J07-界面设计基本原则

先来看最新的几种设计指南中所指出的设计原则：

Materia Design设计原则

iOS10设计原则

小程序设计原则

仔细一看，就会发现很多可以对应上可用性设计原则：

十大可用性原则

综合来看，虽然各种设计风格可能实现方式有差异，但我们可以发现一些基本准则：

1. 形式依存于功能

设计应以用户目标，产品目标为中心，不能喧宾夺主，要有助于用户理解而不是给用户干扰。

iOS的遵从(Deference)原则，Material Design要求的动画要有意义，可以说是对这一主题的演绎。

但这其实是一条过于宽泛的原则，很难执行，怎样的形式不会过度，没有一个界面元素是完全无意义的，怎样在无聊的设计与过度的设计之间平衡，这其中的度需要靠自己把握，这或许也是最新的iOS10不再把它摆在第一位的原因吧。

2. 层次清晰

即“主次分明”。首先设计者要明确界面元素的内容层级，哪些是主要内容，哪些是次要内容，然后视觉上要体现出内容的层级，突出主要内容。

• 内容层级清晰：主要内容，次要内容，辅助信息；主操作按钮，次操作按钮

• 视觉层次清晰，用以表达内容层次，强调重要内容
  同一页面视觉层次也不宜太多，容易混乱，一般是体现出3层；
  不同颜色，不同字体大小，留白，动效等都可以用以突出视觉层级。

3. 清晰明确

清晰的定义，可以简单理解为清楚明白无歧义，主要需关注以下几个方面：

• 界面元素 可读性佳
  --看的清楚：留白，色彩，字体

• 文案以用户视角表达
  --看的懂无歧义，不要用专业术语，除非仅面向专业用户

• 可交互性
  --可操作区域与不可操作区域有明确区分

• 尽可能减少与用户目标不相关的内容

• 图标等隐喻遵从大众习惯，包含文字提示

4. 方便快捷

帮用户减少麻烦而不是增加负担：

• 减少输入
  --能用选择就不用输入
  --利用设备特性减轻输入负担：语音输入，GPS定位

• 记住用户操作，给出建议：历史搜索记录，热门推荐

5. 一致性

前后不一致的应用简直让人崩溃，这是从业余走向专业的开始：

• 设计风格一致
• 前后文案一致
• 同一元素同一用语意义一致
• 相同操作交互方式一致

6. 反馈

给用户以反馈，让用户不致不知所措：

• 所有操作均应有反馈
  --成功与失败都应该有，可以是直接进入下一页，或者一个3s的弱提示等弱反馈，也可以是一个弹窗，一个结果页这样的强反馈

• 反馈信息不仅要给出结果信息，还有下一步怎么做
  --单纯的提示是没有意义的，用户更需要知道怎么做

• 给用户建议但用户自己做决定
  --支付失败，重付还是放弃，交给用户

• 反馈尽量提前，输入即提示
  --特别是在表单填写时，立即提示让用户更快完成任务