加入收藏 | 设为首页 | 会员中心 | 我要投稿 济南站长网 (https://www.0531zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 网站设计 > 教程 > 正文

APP界面设计:《写给大家看的设计书》移动端界面转化版

发布时间:2016-08-01 00:44:50 所属栏目:教程 来源:简书网
导读:这本书通过简洁明了的语言、通俗易懂的示例,将优秀设计通用的原则总结归纳为四点:亲密性、对齐、重复、对比。适合所有能够进行基础阅读的人学习,跟书名非常贴切。

重复:界面中的元素、样式、空间关系等有意识地在整个产品中重复,以保持良好的一致性。

比如微信的底部功能栏,不管当前在哪个功能模块,它都以相同的风格样式、功能数量、排列顺序出现。不会因为从微信切换到通讯录,就突然多出一个或减少一个功能,或者改变排列顺序。见下(图5)

APP界面设计:《写给大家看的设计书》移动端界面转化版

(图5)微信统一的底部功能栏

又比如简书,统一采用曙光色作为焦点状态;根据使用场景出现的元素,比如搜索和提醒,采用同样的样式和位置;文章列表在不同的分类下也是统一的卡片样式(白天和夜间模式卡片底色、文字颜色有区别,但是在同一个模式下,对应的样式会始终保持一致)。

APP界面设计:《写给大家看的设计书》移动端界面转化版

(图6)简书统一的颜色和产品结构

聪明地使用重复的手法,不仅可以强化设计效果、提高信息清晰度,使用户能够快速熟悉和习惯产品,增加认同感,还可以营造成熟、稳定的产品形象。对开发来说,可以减少代码量、便于统一管理和修改。

对比:如果两个界面元素要传递的信息不完全相同,就应该在视觉上加以区别,有利于信息阅读。

如多看阅读书城分类列表的书籍信息,见下(图7)。左边的文字样式未做对比区分,虽然能够正常阅读,但是信息层级显然不如右边有对比区分的明确。左边没有字号、颜色的对比,显得呆板不够美观;右边则能够让人阅读得很轻松,并感到愉悦。

APP界面设计:《写给大家看的设计书》移动端界面转化版

(图7)多看阅读书籍列表

手机QQ的聊天界面,见下(图8)。左边对界面中现有图形元素作了统一的样式处理,消除了对比,于是可以发现无法区分操作层级,是否可以点击也辨别不出来,并且失去重点。右边是实际界面,图形元素有样式对比,层级明确,是否可点非常明显,业务逻辑体现得充分合理。

APP界面设计:《写给大家看的设计书》移动端界面转化版

(图8)QQ聊天界面

对比可以有效地组织界面信息,体现信息层级关系,帮助用户理解产品操作逻辑。

实际上,很少有一个设计,会只应用这四个原则中的某一个。亲密性、对齐、重复、对比,它们相互协作,服务整体效果。

这本书的主题,几乎可以视为形式美法则与格式塔原理的交集:

形式美法则:变化与统一、对称与均衡、节奏与韵律;

格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运;

然后又可以促进对形式美法则与格式塔原理之间差异的理解。

懂更多设计原理,不一定能做出好设计,但可以让好设计发生得更容易。

所以,大家都来看看这本讲设计的书吧。

(编辑:济南站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读