@  Anfriy Yurchenko

酷九合金社第五期学员的UI课程学习即将结束了，满负荷“作战”的小伙伴们早已开始将扎实的理论基础融会在现阶段的商业实践中。接下来一个月内，我们也会陆续为大家推出一系列的学员作品展示。今天，社长先为大家mark一篇绝对干货满满的UI设计学习清单，无论是刚刚开始学习的小白，还是已经上路的但技术还远不如老司机的新手，都可以在今天的干货中榨一把油水~

由于原文内容过长，所以社长把它分成了两部分，分开推送。

下面就享受你们的学习时光吧~

一、有效掌控用户的关注焦点和注意力

1. 强调界面主题

界面设计的目的当然不会是让用户使用时一头雾水，所以突出界面主题很重要。可以用加粗、变色、大小等方式突出标题。

2. 通过视觉层次引导用户

每个界面都应该有一个清晰的信息层次，引导用户，用户浏览页面潜意识中会发出“我该从哪里开始？下一步看什么？”的疑问，所以，界面设计中要明确信息层级。

（1）避免在版块组合时出现“凹空间”

（2）使用一栏式布局

（3）重叠设计元素来强调信息间的关系

3. 利用格式塔原理设计布局

用户被来自周围环境的各种刺激淹没，我们可以根据心理学原理来简化认知，克服混乱。对信息分组，对元素分类，然后就可以把握信息整体。

（1）可以借鉴的原则有：相似性、相近性、闭合性、连接性、交叉性等

（2）利用信息间的接近性对功能或菜单归类

（3）各个部分的标题要和其内容位置上贴近，体现出其紧密关系

（4）限制各部分标题，只需体现出标题与相关内容间的关系就可以，无关内容间不需联系。

4. 不要在界面出现变化时扰乱用户

有时你需要在用户之前适应界面。让这些变化显而易见，同时，不能破坏用户的体验。

（1）用动画使变化可视化

（2）对引起错误的元素要设置对比

5. 删除或淡化不必要的信息

我们的关注点是有限的，无关信息会侵占我们的注意力。所以突出重要信息。

（1）模糊背景

（2）信息图中最大化数据图颜色与背景的对比

（3）删去设计中不必要的边框

（4）删去不必要的或者是自解释的介绍。一目了然的信息，可以删去。

（5）折叠那些不经常被使用，但是比较重要的信息

6. 暗示用户内容有折叠部分

现在，大多数的浏览器不会为多出的信息设置滚动条，所以需要用设计来表现“滚动条”的功能，引导用户阅读被折叠的信息。

（1）通过部分的覆盖来扩展信息

（2）增加阴影暗示更多信息

（3）用语言或图形表示更多信息

二、引导用户到达最终目标

如果get到了前面的所有干货，那现在你就已经有能力捕捉用户的注意力了，现在就需要帮助用户达成目标。

1. 明确用户使用频率高的内容以及对更接近用户选项的信息

（1）设置默认值。因为原作者是美国人，所以案例中默认值为美国，当然我们国人要设置为“中国”啦。

（2）商品展示页要展现必要的信息

人们在买东西时经常喜欢对比，俗话说“货比三家”。如果没有将重要信息提取展示在商品统一展示页中，用户将要完成“点击进入 - 查看 - 返回 - 再点击进入另一件商品 - 查看 - 返回 - 对比”的繁杂过程，其中还增加了用户的记忆成本。因此商品展现时要总结概括提炼出用户最关心，最有可能成为决策判断依据的信息，并展现出来。

当然，如果你不想破坏页面的简洁，也可以把这些信息显示在浮动窗口上。

在一些密码输入项中，也要减少用户的记忆成本。

（3）将主要的数据或状态展现在一个版块中

2. 用巧妙的设计，增加界面状态的可交流性。

（1）动态的缓冲让有终点的等待不再漫长，你也可以让它更有趣一些。

（2）将信息间复杂的相互关系以可视化的形式表示出来

（3）告知用户究竟有多少步骤

（4）不同分类显示对应的项目数

3. 提供多种方式来完成相同的任务

同样的结果，不同的用户会有不同的使用流程。因此，设计要满足所有用户的需求。

（1）登录页，让用户能够通过用户名、邮件或手机号等登录。

（2）为重复功能提供快捷方式

（3）给予用户拖放元素的权利

（4）让用户可以直接编辑数据

4. 展现交互的要求或参数

（1）描述需要用户上传的内容的限制参数信息

（2）及时的密码反馈

（3）用参数预先填写表单

（4）暗示必填项

5. 提示交互的预期成果

用户与页面交互，点击某个元素前，他们应该知道这个行为的结果是什么。

（1）使用描述性的按钮标签

（2）现有输入的基础上展示出预览图

（3）体现或可以预览序列中的下一项

6. 用户使用过程中，不断奖励他们，告诉他们行为结果是成功的

用户的交互行为成功吗？要有信息提示他们，让他们有意识进行下一步操作

（1）保持链接和目标页面的一致性

（2）登录时提供快速选择项

（3）不要从0%开始进程

7. 解决用户的核心意图

有时，我们只是解决的用户表面上的需要，但没有满足他们深层次的需要。因此，设计师要经常头脑风暴，挖掘用户的核心需求。

（1）比如，告诉用户公司的具体状态

（2）显示活动时间与当前时间的关系

三、减少用户思考成本、平衡操作流程

1. 告诉用户现在的定位

比如对定位菜单做标记，指示、加粗或描黑。

也可以考虑使用图形式的流程图，比起文字，人们更爱图形。

2. 简化选项，一切以降低用户成本为主

比如暗示用户最有可能选择的选项。

3. 使用传统的Web设计界面

设计中创新很重要，不过要适时而为。要以用户行为习惯为基础，千万不要反被创新误，为了创新牺牲掉良好的用户体验。当然，如果你的创新兼顾了用户习惯，也是可取的，但一定要三思而行。

（1）菜单布局

（2）附属的必要信息放在页面右上角

4. 让界面以用户的方式与用户沟通

比如错误提示：

比如用色：

比如把最重要，最有区分度的信息放在列表开头

5. 最大限度提高文本可读性

（1）突出文字，这个在前面提到过

（2）主题文字尽量左对齐，不要居中

6. 在整个界面中保持界面一致性

7. 通过视觉平衡创建美丽的设计

Kurosu＆Kashimura在1995年说过，当设计给人以美学享受的时候，它才更有效，并将其称为美学可用性效应的原则。

（1）用数学法则对平面进行合理布局

（2）使用反差对比性的字体

酷九合金社第六期全栈设计师培训班正在招生中，想成为互联网时代稀缺的全能型人才，融入设计新潮流，就联系我们的酷九合金社的小管家进行咨询吧~

咨询微信：c9dkjhjs      咨询qq：483348967     

咨询电话：025 - 528504566

UI中国直通车：http://peixun.ui.cn/detail/338.html