首页 > 网页教程 > 设计分享 > 想搞定移动端APP/网页设计?你起码得做好这几点

想搞定移动端APP/网页设计?你起码得做好这几点

时间:2016-09-01    来源:优设网

编者按:当一个领域趋于成熟的时候,就会呈现出诸如“套路”这样的东西,它是用户和设计师/开发者在逐步磨合过程中产生的,约定俗成的一些规则。而在做移动端设计的时候,在考虑差异化设计之前,有一些最基本的事情要做好,今天我们就来聊聊这个~

如果你曾仔细观察过近些年来那些优秀移动端产品的交互设计,会发现它们都拥有一个共性:它们在基本的功能和设计上的执行都相当的完美。它们从最基本 的人类行为模式中汲取营养,然后通过优秀的设计和执行,为用户悄无声息地扫除了所有的障碍,这个时候,用户会感受到其中惊艳的视觉效果和突出的互动体验, 其中尤为突出的就是浏览体验。今天的文章,就让我们一同来梳理一下,有哪些关键而核心的移动端设计项目,总结一下今天移动端设计的“核心考点”。

有效的排版设计

不论你所设计的是网页还是APP,其中的文本构建起了用户和你的产品之间的明确关系,所有的文本都在帮助用户抵达他们想要的那个目标。所以,排版设 计在交互中扮演着相当关键的因素。

文本的大小和屏幕上的整体布局设计,对于用户的阅读体验有着巨大的影响:当文本过小,而行间距和字间距也比较紧凑的时 候,用户需要更长的时间来对内容进行识别,而许多用户干脆会跳过其中的许多内容。在移动端上出现这样的问题之时,则显得更加严重:过小的字体在一块明亮的 小屏幕上显示,低下的识别度和炫光让用户更加头疼。排版对于移动端用户而言,影响更大。

1-GlX4qtsH0geZ7ju23_-DFw

移动端的文字排版的核心技巧在于,平衡易读性和空间利用率。当你在为移动端界面设计文本排版的时候,需要选择合理的字体尺寸和间距,这两个因素是最 关键的影响因素。字体尺寸需要足够大,确保绝大多数的用户能够识别,而足够的间距则保证小界面上内容的呼吸感,不会让人觉得局促。当然,这些是底线,字体 和间距并非越大越好,适中而舒适才是最终目的。

1-TTOquyQRqajRr_DjkF8XZw

iOS 平台上Medium 的客户端的字体和间距的设计就是很好的参考范例。

小贴士:为了确保移动端设备的可读性,英文文本控制在每行30~40个字符,中文文本控制在20个字左右。如果是在桌面端,英文字符通常控制在60~75个字符之间,会让人阅读起来比较舒适。

简单的配色方案

色彩是视觉设计中最复杂的部分。太过繁复的色彩有时候会让用户感到不适,简化配色方案往往能够很好的提升整体的体验。学会对复杂的配色方案说不吧。 如果简单的配色方案让你的设计看起来略显单调,不妨通过新增现有色彩同色系不同饱和度、明度的色彩,生成丰富而不至于繁复的配色方案。

0-FmmKPg9NKFpRSOKx

蓝色的单色调配色方案

下面的APP的设计案例采用的就是单色配色方案,通过同色系不同色调、饱和度的色彩来构成一个紧凑而不单调的配色方案。

0-w_FvxwQG_6Px2vGE (1)

小贴士:从零开始创建配色方案有很多技巧,本身并不复杂,可以参考我们的文章、借助合理的工具来创建配色方案。如果现有的配色方案本身比较单调,或者整体偏中性,那么不妨增加一种明亮的色彩,让它能够更好的吸引用户的注意力,简单又不失个性。

1-w2H9AoP_8rRtqPxt_2K4Jg

1-9nnSYvAcY7cKlohXzY6AuA

基于内容的卡片式导航模式

不管你想在你的应用或者网页中呈现什么样的内容,你总是希望你的用户能够仅可能方便、完整地体验到它们。基于内容的导航模式的思路在于,尽量让内容 的概述和详情两种状态能够无缝地切换,而卡片式设计和这种设计模式最为搭配,因为卡片式设计能够统一而自由地组织内容,并且很容易消化大量不同类型的内 容:

·卡片将用户划分成更有意义的区块,让屏幕的利用率更高。就像不同的文本段落组成文章一样,卡片式设计将不同类型的内容用卡片承载着,构成连贯的信息流。 ·卡片是为移动端触摸交互而生的。用户无需学习就能够直观而自然的点击、滑动、翻转卡片交互,这是基于现实世界的物理规则的设计。

1-LxKZBYZuif-zLS3vwUb5Ag

小贴士:想要让界面真正意义上地“隐形”,那么就专注于内容吧。

层次与深度

桌面端和移动端之间最明显的差异大概就是屏幕尺寸的大小了。由于移动端设备屏幕尺寸上的局限,越来越多的移动端APP设计开始试图在界面层次和深度上做文章,让界面拥有“厚度”,在原有的平面上增加一个“Z轴”。

1-02GDXjZOSIXTK_PIApEQlA (1)

图层让界面拥有了深度,让体验更加真实

分层式的界面设计甚至成为了Google的Material Design的核心设计原则,它参考了现实世界中人们同不同的物体进行交互的方式,将这些物理法则融入到界面交互当中。表层和投射在背景中的阴影则在界面 层次中起到了重要的作用,它将不同控件和元素分隔为不同的层。

0-dKgwcQ4gBjOIoWk8

相关推荐
APP浏览体验设计的思考:如何理解用户的眼?
20个创意漂亮的手机应用程序登陆页面设计欣赏
iOS7用户界面设计的10个准则分享
交互设计上常见的界面切换动画如何优化
Windows Phone 8 UI设计指南分享
APP设计经典:Pinterest的交互细节
对症下药!如何设计受欢迎的应用引导页?
搞定APP着陆页优化的超实用原则(附工具)
APP界面设计:移动缺省页如何设计才会内容“丰富友好”?
产品设计:FEEDLY创始人再聊改版实战经验
写给初学者:移动站点app开发尺寸基础知识
扁平化设计与Material Design区别在哪里?
APP界面设计教程:让人眼前一亮的渐变设计手法
APP导航设计:不要在移动端菜单设计犯这些错误
交互设计基础!四个移动界面常见的动效类型
国外UI设计师:UI界面设计作品精选
APP设计!6个方法助你设计出优秀的APP
APP设计零基础教程:5步让你设计出漂亮的APP界面
15个值得学习的APP交互体验设计细节
手机APP设计规范:图标和按钮视觉设计规范
APP界面设计之页面布局的22条基本原则
APP设计!教你怎样才能把APP引导页设计的高大上
经典案例分析:10个戳中痛点的APP更新欢迎页文案
2015最流行的APP设计是啥?比如 Facebook那样的
前方高能!别让这10个设计误区毁了你的APP
20款创意设计的移动动画界面案例欣赏
内容化设计项目总结:如何从0到1做出淘宝头条架构
移动开发教程:移动页面适配小知识分享 设计师必备
民宿APP UI设计分享 在线旅游APP设计分享
扁平化设计的六点优势分析
视觉设计的思考:如何设计APP的登录页?
网页设计已死?如何看待近几年网页设计发展前途?
20款最佳移动UI界面设计欣赏
33款设计独特的非横向UI设计欣赏
十五个用户体验设计(UI/UX)案例剖析
腾讯CDC分享QQ登录界面的banner设计过程点滴

分类导航

教程推荐

热门特效

热门教程