如何从零构建UI组件及设计规范（二）：设计原则

本篇为如何从零构建UI组件及设计规范之设计原则篇，主要介绍在组件和界面设计中，产品体验原则、界面设计原则以及常见设计定理。

《如何从零构建 UI 组件及设计规范》共分为 5个系列 ，分别为《一：介绍篇》、《二：设计原则》、《三：全局样式》、《四：基础组件》、《五：通用模版》 。

一、产品体验原则

要有 → 高效 → 易用 → 美观。要有是基础的体验，有总比没有的要好；然后是使用效率，效率得到提升后，再然后就是需要好用容易使用；最后才是要好看。

当然丑也是不行的，只不过他的重要性相对是排到最后。

• 要有： 有是最基础的体验，是产品的基石，没有功能就没有其他。
• 高效： 注重用户的长期使用效率。
• 易用： 短时间内是否更快的学习上手等。
• 美观： B端产品是不应该优先考虑好看的，不管从用户价值还是商业价值。相对而言，美观的侧重点是简洁好用，它也是美观的范畴范围。

高效 & 易用的区别：

• 水电煤缴费，每个月都用一次，由于间隔时间较长，可能就忘了上次怎么操作的。所以这时候的侧重点就是“容易学会并能够很快上手”，符合「别让我思考」的逻辑，宁愿多点一次也别让用户多想；
• 商家工作台的预付款也符合此原理，商家使用间隔时间较长，但是一定要能够使用简单。所以我们采用的是分步骤页面，这时用户并不在乎多点击一次还是两次；
• 商家工作台“出入库”功能，对于商家可能就是每天都用，用很多次，使用频率非常之高。这个时候就要主要“使用效率”，需要保证高效操作。所以表单设计时即使有再多内容也都是放一个页面填写，不要每次都要点击很多次次才能完成一个任务。

二、界面设计原则

对于企业类型的产品，完成目标任务永远是第一位的。

1）清晰

帮助人们更准确的理解和使用产品，文案、界面或操作等。不让用户进行深度思考，说人话，不要设置专业门槛。帮助用户在足够清晰的界面环境中完成任务，达成目标。

2）高效

让流程更顺畅，更智能化。优化功能逻辑，预判需求，让使用对象更加轻松快捷。提升效率：某人掌握产品的速度越快，使用该产品的效率就越高。设计时可采用以下3种方法：

• 删除：删除不必要的因素，将页面的元素进行简化处理；
• 隐藏：根据用户使用的场景，让某些元素进行隐藏，需要进行说明的时候再进行呈现；
• 重组：即分类，可以将相近功能进行组织和分类，最常用的就是将不常用的功能分类在「更多」栏目中。

3）一致

“封闭高速路”哲学，判断本身就是成本。对于我们的心灵来说，两点之间，不一定是直线最短。没有路口的封闭高速路，可能更短。

李楠《iPhone 可有设计哲学》

• 界面保持一致： 少数服从多数，一致性可以减少用户思考的次数和时间，让用户的注意力更集中在当前的任务中，进行业务上的判断，即心流体验。
• 表达方式一致： 文案界面保持一致，不多多样化。从开始到结束，从 A 产品到 B 产品，从界面交互到文案内容。
• 保留一定的空间： 保留一定程度的空间，不要为了追求一致性而牺牲更加重要的东西。所以这是放在第三位。

细心打磨界面外观，让使用对象感到我们的产品值得他花费时间与精力去使用。美观是提升体验、激发愉悦的重要手段，但不将它的重要性排在其他任何设计原则之前。

三、常见设计定理

1）数量6原则

数量上一般采取的叫做7+2原则，就是说一般人的记忆容量约为7±2，即5～9之间。这边我将原则简化为6原则，比如按钮（含链接）文字、单选框复选框的标签文字、表单的标签文字、tag标签等。

2）席克定律

当选项增加时，用户下决定的时间也在增加。在人机交互界面中，选项越多意味着用户决策的时间也越长，用户越不知道选择什么。用户在某一场景对选项的反应时间取决于三个要素：

• 前期的认知和观察；
• 根据认知后，处理的时间；
• 选项的数量。

3）几乎没人会改默认设置

• 几乎没有用户更改默认设置的，只要专家级用户才会更改，正常用户只会使用产品提供的默认设置。
• 产品设计时，高级设置等功能绝大多数用户不会去用。

4）习惯路径的设计，比少一次点击更重要

• 《不要让我思考》书中提到，可以多点一次，每次都不需要思考，是基本的原则。所以少点、多点一次没那么重要，重要的是让用户形成习惯性路径思考。
• 让用户明确内容和信息，知道自己要做什么，点击哪里，比单纯的减少点击次数更为重要。

 

本文由 @徐银高 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议