软件工程·UI设计原则专题

由于UI设计原则很多而且微妙复杂，再加上自己本身对概念的理解也不是很充分，所以写这篇博客专门复习一下，因为有很多感觉都是其他原则的一个具体案例，所以详细程度是不一样的

---

一、设计原则(UI design principle)

1. Anticipation(前瞻性) 

UI设计的前瞻性体现在预知上面 

这种预知来自于对用户的历史使用数据的分析或者是开发者专门进行的用户使用调查，通过得到的信息，预知用户来到界面之后想要做什么

使用人工智能来手机用户对于界面的习惯和喜好的数据，然后利用这些数据进行评估，提前预测并回答用户的需求，可以减少用户的认知性决定

在具有前瞻性的UI中，用户并不需要输入新的信息，只是在元素上更具有选择上面的前瞻性，从某种意义上来说，是开发者帮助用户进行对于选项的筛选，代表用户进行一定程度上的选择

能够体现前瞻性的元素有 ： 弹出框、地理位置、推荐、通知或者提醒等等

EXAMPLE：

1，我们在打开百度地图的时候，想要选择路线， 那么地图可能通过分析你的历史使用数据，自动给你提供Home这个选项，我们就可以直接点选，会更加方便

2. 在QQ音乐里面，会根据用户的对于音乐的偏好，来推荐音乐和歌单

前瞻性的作用是 ：

1. 减少认知负荷 ： 认知负荷是指用户在做某件事情的时候需要付出的心理努力，前瞻性可以通过减少或者消除用户必须做出的决定的数量来减少心理努力，用户越是不需要考虑他们需要做什么来实现他们的目标，就越可能想要去实现它
2. 简化用户接口 ： 屏幕上更少的选择意味着界面的设计会更加干净，更加直观
3. 节省时间 ： 确保用户能够更快地找到自己需要的东西或者做出决定
4. 提高转换率 ： 电子商务网站的个性化产品推荐为销售提供机会，能够创造更多收入

2. Communication/Feedback

communication的机制就是说，UI会对每个交互的工作进行一个结果的反馈，这个反馈是可见的，可以理解的， 说的直观一点其实就是：当用户进行完一个task，界面会给出一个提示，这个提示有可能是告诉你这个task是否完成，也有可能是用来引导你更接近于完成

常见的例子有 ：按钮悬停效果、错误弹出、确认消息、完成动画、检查标记和颜色变化

EXAMPLE： 

1. 在Word文档里面，我们如果想要去选择菜单中的哪个功能(格式刷)，当我们把鼠标移到那里的时候，我们会发现格式刷所在的框颜色变深，这就是一种反馈，告诉你这个框里面的选项是可以点击的，是可以选择的

2. 在加载视频的时候或者是游戏开始之前，可能出现一个进度条动画，这也是反馈的一种很常见的样式

3. 还有一种反馈的形式是提供一种real-time的视觉反馈，就比如说，我们看到文本中带下划线的蓝色字体，我们就知道这是一个超链接

3. Consistency(一致性)

一致性就是说UI元素和元素对应的功能符合用户的认知，也就是说，UI元素和元素功能之间的对应关系应该和已经存在的，用户已经学习或者熟悉过的对应关系是一致的

如果这种对应关系在页面之间是不一样的，就会造成inconsistent

UI元素包括：

• 符号 ： 用来传递信息的图标
• 代码 :  颜色、大小、重量、标记和其他可以表示成数据值或者是调用隐喻的图形维度
• 单位 ： 用于特定的数值或者一组相关的属性
• 格式 ： 文本的格式
• 术语 ： 在UI中描述对象、类、行为和事件
• 缩写/快捷方式 ： 在术语中对功能或者控制词的描述
• 排版 ： 在每个页面、菜单、窗口或者临时序列中的相对位置

inconsistency有两种类型：

1. irregularity(不规律)：不同的元素拥有相同的功能和行为
2. contradiction(冲突) ： 相同的元素具有多种不同的功能

	irregularity	contradiction
symbol(符号)	在窗口A中，用水滴的图案来表示查看水资源剩余量，但是在窗口B中用水龙头的图案来查看水资源剩余量	在窗口A中，用水滴的图案来表示水资源的剩余量，但是在窗口B中，同样用水滴的图案表示使用的水资源总量
Codes(代码)	在注册账户的时候，我们有的时候会被要求密码格式，一旦出错，就会在下方出现一行字体提示 在窗口A中，字体的颜色是红色，但是在窗口B中，字体的颜色是橙色	说的离谱一点，在一个交通信号灯模拟软件中，用橙色来表示禁止通行，但是其实用户心里面的对应关系是“红色是禁止通行”
度量单位	在窗口A中，身高使用m为单位显示的，但是在窗口B中，身高是用cm来表示的	None
数据格式	在窗口A中，身高使用x.xxx m来表示 在窗口B中，身高使用x.xxxxx m来表示	对于时间的表示： XX/XX/XX 在一个窗口里面是年月日的排序 在另一个窗口里是日月年的排序
术语	在窗口A中，确认按钮上面是“confirm” 在窗口B中，确认按钮上面是“OK”	在窗口A中，confirm代表对修改的确认，但是在窗口B中，confirm开始一个功能的执行
缩写/快捷方式	在页面A中，control+ C是复制 在页面B中，control + M是剪切	在页面A中， IS表示information system， 在页面B中， IS表示instruction slide

4. Controlled Autonomy(控制权)

满足用户的控制欲也是很重要的，可以通过定期呈现系统的状态、直接有效的操作、相似的环境、即使反馈、可预期的交互和结果、清晰的路径来保持用户的控制

一种很有效的方式就是：永远允许用户在界面的所有阶段反向操作，也就是回溯

另一种方式是建立有效的导航机制和方便使用的界面，让用户不用在页面上一点点寻找自己想要实现的功能，让用户的每一步都会得到预期的反馈，就能满足这个原则

EXAMPLE：

1. 在编辑Word文档的时候，如果我们打错了字或者不小心删掉了一大段内容，我们可以点左上角的撤销来返回前面的额操作

2.在进入淘宝界面的时候，图标下面会提前告诉或者提示你这是什么功能，然后你就会得到一个印象，在脑海中形成界面的样子，然后点击之后就可以得到符合你预期的某种反馈，也就是有点像在考试之前就知道有什么题型，或者直接知道答案的样子……

5.efficiency(效率) 

efficiency要求用户可以在尽可能少的步骤之内完成自己想完成的任务，同时也要求在设计中尽可能避免复杂冗余的元素，所以efficiency总是和simplicity有千丝万缕的联系 

simplicity要求在用户完成任务的过程中尽可能减少用户的认知负担

也就是说，efficiency要求尽可能缩减，精化过程，通过“更少”来得到“更多”

首先的一个标准就是：简单的接口应该对用户是透明的，应该避免依稀复杂的操作，同时，使用的语言描述也应该比较简洁清晰

其次 ： 每个屏幕应该只有一个主要的核心关注区，也就是只有一个焦点，或者说C位也可以，这就要求我们把主要的动作放在前面和中间，把次要的动作移到更深的位置，或者给他们更轻的视觉重量和适当的排版

最后是clarity，在用户完成任务的每一步，保证他们只能看到绝对必要的动作

EXAMPLE：

1.在进行一些功能，比如说切换页面的时候，尽可能用一个动作一个图标完成，越简单越好

2.将页面的名称，文章的标题放在最显眼的位置

6.focus(焦点) 

这个principle强调的是 ：一个华丽的用户界面远远不如一个有用的用户界面

每一个UI元素都应该有它存在的目的，同时，它能够对整个产品起到积极的辅助作用，帮助页面更好地向用户提供帮助

UI中只能包括对可用性也就是符合efficiency要求的元素，尽量不要使用没有关联的，出挑的颜色，元素或者按钮，不要在边框上乱放一些容易分散用户注意力的元素或者是材料

EXAMPLE：

在网页提供的文章结束之后，在最底部显示广告

7. Fitt's Law

这个定律的基本内容是 ：越大越近的对象越容易交互

从UI设计的角度上，用户的鼠标从一个点A到达另一个点B的时候， AB之间越近，交互会越轻松，如果想要增大AB之间的距离，那么B的体积应该要随之增大来保证原来的轻松程度

这个定律同样可以用来提高efficiency

EXAMPLE：

在淘宝上，或者某些购物网站上，“下单”这个icon总是和商品的图片等概述信息离得不远

8. human interface objects 

现在已经开发出了一个巨大的可以重用的人机界面对象库

人机界面对象就是屏幕上可见的对象和图标，可以被用户使用，来进行某种动作或者是功能

9. Latency reduction

APP应该在某种程度上使用多任务处理，让用户继续工作

就是类似于流水线一样，一部分没有影响的程序可以慢慢进行，先让用户去下一步

10.learnability 

 learnability 就是说：界面应该容易使用，同时容易记忆，用户的记忆负担小

这个原则可以通过让界面变得更加直观来实现 ： 直观的意思就是清晰和一致(clear and consistent)，所以这个通常和consistency是共生的

再一种途径就是，我们可以通过将引导用户的线索尽可能设置成现实生活中的物体，这样用户的学习能力也会增强

11. maintain work product integrity

说白了就是自动保存，保证已经存在的状态不会因为一些意料之外的事情清空

12. readability

 可读性其实是clarity(也就是efficiency)的一个衍生，也算是一个必要条件(?)

会影响可读性的因素有：

1. 背景颜色 ： 背景颜色不要分散用户的注意力，不要太过刺激出挑
2. 视觉层次 ： 调整大小，强调最重要的视觉元素，让它能够被用户先看到，我们把主要的动作放在前面和中间，把次要的动作移到更深的位置，或者给他们更轻的视觉重量和适当的排版
3. 留白 ： 适当留白，强调重点内容
4. 文本 ： 排版
5. 字体大小 ：不同的网站和应用需要的字体大小是不一样的，必须说给老年人看的就应该字体稍微大一些

13. track state

要让用户随时知道自己进行到了哪一步，可以用标题等来提示，感觉应该是control autonomy里面衍生出来的内容

 

 14. visible navigation

功能导航应该放在所有页面的同一个位置，这也是consistency、anticipation的要求