用超多案例，帮你掌握尼尔森十大设计原则（上）

对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。这篇是在学习过程中的想法与一些案例思考，希望与各位一起探讨。

关于尼尔森原则

「尼尔森十大原则」又称为「用户界面设计的10种可用性启发式」，是由雅各布·尼尔森（Jakob Nielsen）提出的10条交互设计一般原则。之所以将其定义为“启发式”，是因为它们是广泛的经验法则，而不是特定的可用性准则。

在官方2019年的描述视频中将原则定义为「十大UX设计试探法」，运用这些原则有助于我们试探设计的边界，探索设计的可能性，千万不要让原则成为束缚我们设计的枷锁。

原则一：系统状态可见性

“系统应始终让用户清楚当前的状态以及发生了什么，并且在合理的时间内通过合理的方式给予用户反馈。”

通常来说用户都希望产品是可控的，状态是可预测的，给予用户更多的信息反馈可以转化为更好的决策。这个原则不仅局限于界面设计，生活中常见的交互场景都能适用。

1. 适当的反馈

用户界面设计的基本准则，每当用户进行交互后，它们都需要知道交互是否成功。通过适当的反馈可以让用户清晰的感知到当前的状态，以便于他们进行下一步决策。

这个很好理解，比如最常见的按钮点击后的水波纹反馈，在Material Design的官方规范中，就明确了一个按钮在不同情况下需要通过不同的视觉反馈形式告知用户当前状态。

我们在淘宝选择将某件商品加入购物车后，系统会通过短暂性的弹窗告知用户添加成功，而当我们需要在微信中向别人转账的时候，系统会用弹窗让你进行二次确认。微信中如果有未读消息或者新的朋友圈一般会通过红点的信息给予用户反馈。

添加购物车作为不会对用户造成损害的操作，一般来说尽量不要打断用户的操作，只需要进行短暂的反馈，而转账等牵扯到用户利益的操作就需要打断用户的当前操作，进行再次确认。这就是在不同的场景中我们需要考虑使用「适当的反馈」。

2. 适时的反馈

除了适当的反馈形式外，不同的反馈需要搭配不同的时间场景来进行，并且需要保证反馈的及时性，否则容易造成用户的混乱与不安。

常见的下拉刷新以及进行加载时的loading动画，都是在用户进行相应的加载操作后才会出现，如果一个产品动不动就自动跳出loading，不仅会阻碍用户操作，还会让用户迷惑是不是自己的网络状态较差。

值得一提的是iOS系统中的勿扰模式，用户可以通过自己来开启与关闭是否接收反馈，如果我们无法判断用户合适需要反馈，那就让用户自己决定吧，显然这样会极大满足用户的掌控感。

3. 生活中的反馈场景

前面我们提到状态可见性不仅只是运用在界面交互中，在很多生活场景中我们也能看到。

例如我们经常乘坐的地铁，当地铁即将进站以及离开的时候，隔离门以及指示灯会不停的闪烁灯光，并且发出“滴滴滴”的声音，通过视觉以及听觉给予用户反馈，提示用户准备上车或下车。而且由于地铁停靠时间较短，声音与灯光通常是短而急促的。

另一个生活中的常见场景就是公交车的扫码乘车，当扫码成功后机器会发出音效给予用户反馈，根据不同的场景音效也会有所不同，比如一些车全程都是同样的价格，扫码后只会“滴”，有些车辆按距离收费，所以下车刷的时候会报出具体的价格，最近我所在在的城市周末免费乘车，所以刷了以后会语音播报“免费乘车”。

原则二：系统与现实世界之间的匹配

“系统应使用用户熟悉的语言和概念，而不是技术性很强的术语。产品应遵循现实世界惯例来呈现信息。”

设计师或开发人员≠用户，所以千万不要将我们对产品的理解以及专业术语代入到用户的使用场景中。用户的认知一般来源于对周围环境的感知以及个人因素，我们应该多观察生活场景，寻找最贴切用户的表述方式。

1. 用户熟悉的语言

官方的文献中语言主要是针对“网站上使用的术语”，但是随着设计的发展，这个语言也可以看作平时我们所说的设计语言，比如配色，整体风格等等。应该让用户能够清晰的理解这种「语言」。

熟悉的语言前提是针对不同的用户群体，比如上面这三个产品的目标用户群体就大不相同，B站更加倾向二次元群体，顶部导航栏中的「追番」就是二次元用户熟悉的语言。再比如金融类产品中的「自选」tab选项，以及面向工程师的产品分类。

2. 充分模拟现实世界中的概念

用户现实中的体验会在不经意间带入到数字世界中，所以使用模拟物理世界中的交互，利用人们的现有知识，可以帮助用户轻松掌握界面的使用方式，最大程度的降低用户的学习成本。

早期数字产品界面使用的「拟物化」图标就是通过描绘现实时间的产品，方便用户对功能进行感知，不过随着用户被互联网教育的越来越成熟，后面渐渐开始使用扁平化风格代替。虽然逐渐扁平化成为主流，但一些成品中依然保留了拟物但特征，比如IOS中的指南针表盘。

网易云音乐中最显著的黑胶唱片特征，不仅通过模仿现实世界的使用映射降低了学习成本，而且融入了情感，拉开了跟其他同类音乐唱品的差异性。

3. 文化观念隐喻

利用用户对现实世界对感知，不仅视觉上带有拟物化对相似性，不同对文化之间也有广泛对隐喻，比如符号中的「+」代表增加，「-」代表减少，以及常用红色代表禁止状态，绿色标示成功，黄色标示警告。（不同的地区，宗教，教育等文化差异性会有所不同）。

原则三：用户操作可控性

“用户经常在使用时选择了错误的操作，所以产品需要有一个非常明确的「紧急出口」，用于帮助用户撤销或重做。”

原则上来说，在用户发生错误之前我们就应该给予阻止或者警示，但很多时候用户发生主观操作上的失误不可避免，当用户发生错误的操作后，不要责备用户做错了什么，这时候需要帮助用户尽可能的挽回，及时给予撤销或者重做的功能。

Web端中的「面包屑」导航形式是常见的保证用户可控性的体现，他很直观的告诉了用户，我在哪，可以去哪以及可以回到哪里去。

另外一个典型场景是web浏览器中的「返回」「前进」按钮，点击后我们可以回退或者前进页面，为了增加用户的可操控性，长按后会列表展示出前面所有历经过的历史记录，方便用户快速回退或前进到指定的页面。

微信中如果我们发送了觉得不合适的消息，可以及时通过长按撤回，且撤回后会用文案进行提示，可以再一次编辑发送。在iOS系统中如果你需要删除男朋友照片时候系统并不会做过多的阻拦，让你删的痛快，当你过几天气消后，到「最近删除」中就能选择恢复了～（不用担心，最近删除给了用户几十天时间冷静）。

原则四：一致性

“用户不必疑惑是否使用了不同的设计语言、情况或不同的操作产生的结果实际上是同一件事。”

通俗的来说就是保持设计中相同场景的一致性（视觉语言/交互形式），让用户感到自己是在进行同一步骤或产品上进行操作。保持一致性并遵守标准对于确保用户界面可预测和可学习至关重要。

1. 内部一致性

内部一致性就是指保持同个产品或产品系列中的一致性，让用户感知到自己是在同一个产品中进行操作。内部一致性有助于传达自身的品牌特征。

百度网盘中主要的图标都使用了切割的表现形式，且色系都比较统一，以此来保持产品的一致性以及传达品牌特征。

电商类产品是比较极端情况下的一致性运用场景之一，由于业务以及产品类型繁杂，很难约束产品展示内容，这种时候只能通过大的视觉风格和交互形式来确保产品的一致性。

在淘宝中使用同样的底色以及卡片区分的形式来表现界面，边距保持一致，且大卡片均使用了同样大小的圆角，消息和购物车页面都使用了大标题的展现形式。一些重要操作按钮以及底部tab选中样式都使用了品牌色。最大程度上保证了视觉上的统一。

2. 外部一致性

外部一致性指整个行业类一些约定成熟的习惯，比如底部tab标签栏是对页面模块大切换，点击输入框可以进行文字输入等等，爱心图表是指点赞或喜欢，这些用户已经习以为常的操作可以保证用户以最低的学习成本上手产品。

虽然上面是三种不同类型的产品，但是通过产品经验用户能够很快速的感知到哪个是「扫码」功能的入口。

图中为三种视频播放类产品界面，虽然三者为不同品牌的产品，但是在视频播放窗口都能通过手指双击的交互形式进行视频播放或暂停。遵循了外部一致性，满足了用户的的操作习惯。

3. 求同存异

在遵循一致性的原则上，不少产品通过小一些小心思来体现与其他产品的差异性，突出自己的品牌特征。注意：必须是在遵循整体一致性的原则之上。

在移动端产品中下拉刷新是最常见的交互形式，用户早已习以为常。上图三个产品都是通过下拉进行刷新交互，但是通过不同的loading形象来突出自己的品牌特征以及与其他产品的差异性。

原则五：预防错误

“用户通常会分心于手头上的任务，因此可以通过提供建议、利用约束和保持灵活性来防止无意识的错误。通过精心的设计防止用户发生问题，比出现错误信息提示更好。”

解决用户错误的方法不是责问用户，而是应该重视自身产品的设计，尽量减少错误的发生。回忆一下以前用win电脑时候，程序用的好好的突然“登”的一声崩溃了，然后给我一个弹窗反馈，问题是弹窗上动不动就讲什么数据库损坏的，咱也不懂阿。

1. 习惯性错误

官方将这种错误称为“滑倒”，为了更好理解我把它归位习惯性错误，其实就是指当用户非常熟悉自己想要实现的目标以及实现该目标的过程时候，偶然性的发生错误。一般来说我们在操作熟悉的产品流程时候，并不会那么集中注意力。

一般来说以轻柔的引导方式或者提供所需的精确来协助是最合适的。在IOS中设定就寝时间的时候，滑动表盘经过每一小格的时候都会有轻微的震动反馈，且每一格单位为5分钟，通过触感反馈最大程度的协助用户操作。

另一个场景就是我们经常在一边刷剧或者综艺时候一边回复消息，现在很多输入法都可以自动将一些稍错的拼写进行自动的调整，比如上面我输入“wan sh hui jia chi f”，最终也能回复“晚上回家吃饭”。

2. 有效的约束

虽然限制用户并不是一个很好的体验，但是如果在有明确的规则定义之下，通过限制条件来阻止用户犯错是个很好的选择。

最常见的场景就是类似airbnb这种选择房屋居住日期的时候，通过限制可以控制用户只能选择能够入住的时间。另一个常用的约束就是电商类产品，通过置灰限制没有存活不可购买的物品，不过现在除了置灰也会使用一些更加委婉的表达方式，比如“到货通知”。

3. 提供建议

在用户发生操作之前提供合理的建议，是一种防错的常用方式。

在搜索引擎中，当你输入搜索内容的时候系统会联系上下文来提供建议，如果有自己相匹配的搜索记录也会前置出现。而且即使输错了单词或词语，也会辅助进行正确的匹配。

4. 设置默认值

当用户需要执行重复操作，或者对操作精度有特殊需求的场景下，可以结合实际场景首先提供可能符合其目标的合理默认值。

比如滴滴打车，一般会通过定位给一个默认的起点位置，而且如果周围正好有常用的打车点，会默认定位到常用的地点，有效的防止了用户地理定位上发生的错误。还有银行类产品如果是近期经常转账的对象，会有小气泡进行提示，可以进行快速点击填充信息。而且在进行转账的时候，输入卡号后会自动识别对方所属银行。

5. 使用格式化信息

有些时候需要用户输入一些非常特定格式信息的时候，可以利用格式优化帮助用户输入并且协助检查。

在一些数字类信息的输入场景中比较常见，比如输入银行卡号或手机号会根据位数进行分割，滴滴输入验证码时候会使用格子划分位数协助输入，电商类的产品新增地址通常也会明确划分出城市，区域，街道等因素来帮助用户快速输入以及检查是否出错。

写在最后

很多情况下原则以及融入了我们的设计直觉之中，即使说不出来但是做的时候也会遵循。但是了解原则的原理对于向别人阐述自己的设计会有很大的帮助。

原则的使用因人而异，正如开头所说的原则可以辅助我们设计，保证设计不犯一些显然易见的错误。很多场景下也会出现多原则交叉使用的情况。