UI设计10个必须遵循的法则

Interaction Design Foundation

Interaction Design Foundation是一个国际大型用户体验设计社区，旨在为设计从业者提供丰富的学习内容和设计知识。

这篇文章是转载Interaction Design Foundation社区：文章已在原社区获得作者的授权。

User Interface Design Guidelines: 10 Rules of Thumb

欢迎转载，请注明本文当前的链接出处

作者：EUPHEMIA WONG 翻译：Echo

在设计中学会结合用户需求和经验，应用Jakob Nielsen和Rolf Molich的UI设计规律10则。这十个法则已经被一些非常有名的公司（苹果、谷歌、Adobe等）应用在了产品中。这些公司的设计团队公布和分享的一些经验就是他们将这些法则糅合到设计工作中的有力证明。本文将传授一些如何将这十项法则应用到设计工作中，以提高产品的可用性、实用性、和用户需求的满足的方法。

Nielsen和Molich的10个UI设计指南

Nielsen，是著名的web可用性顾问、尼尔森-诺尔曼公司合伙人。Molich，是另一位著名的web可用性顾问，在上世纪90年代建立了UI设计的十个法则。值得注意的是，Nielsen和Molich的10个UI设计指南与Ben Shneiderman的八大黄金法则有相当多的重叠部分。这十大指南可以说是八大黄金法则被发布4周年后的更新版。

系统状态可见性：用户应该随时了解系统操作状态，在合理的时间内以易于理解和高度可见的状态显示在屏幕上。
系统与现实世界的匹配：设计者应该基于目标用户尽力将现实世界中的语言和概念呈现给用户。以有逻辑的顺序将信息呈现给用户，并且依靠用户现实世界的期望，这样便可以减少用户的认知压力，让系统更容易使用。
用户对系统可自由控制：任何操作可以撤回，这为用户提供一个选择的机会，包括撤消和重做以前的行为。
一致性与标准性：界面设计师应该确保在相似的平台上图像元素与专有名词是固定的。例如，代表一个类别或概念的图标在不同的屏幕上使用时，不应代表不同的概念。
预防错误：在条件允许的情况下，尽可能将错误发生的可能性降到最低。用户不喜欢被迫发现问题、解决问题，这可能超过了他们的专业水平。排除或者标记可能出错的操作，是比较可行的预防错误手段。
用识别代替回忆：当用户在探索界面的阶段，通过相关的提示信息来减少用户的认知压力，人类的注意力是有限的，我们只能在短时间内同时注意到五个点，由于短时记忆的局限性，设计者应该确保用户可以简单地识别，而不是在界面的各个部分中回忆信息。识别总是比回忆更容易，因为识别涉及感知线索，帮助我们达到我们记忆力的最大程度，并且关联到相关的信息。比如，我们觉得选择题比简答题更简单，因为选择题只需要我们识别出正确答案，而简答需要我们回忆出答案。
操作的灵活性和高效性：随着操作的增加，尽量少的交互可以快速定位，这可以通过使用缩写、功能按键、隐藏命令和宏设施来实现。用户应该能够定制或调整界面以满足他们的需要，从而可以通过更方便的方式实现频繁的操作。
美学与极简主义设计：尽量降低抽象程度，所有不必要的信息都会抢夺用户的注意力资源，这可能妨碍重要信息的检索。因此界面应该只展示当前任务的必要组件，同时提供到其他界面的清晰路径。
帮助用户识别、诊断、恢复错误：设计者应该默认用户不能理解技术术语，因此，错误提示消息应该用简单的语言表达。
帮助文档：理想情况下，我们更希望用户能够脱离帮助文档，自如地使用系统。然而由于各种各样的问题，帮助文档还是有必要的。当用户需要帮助的时候，确保问题容易被定位到，明确当前的任务，然后用某种方式引导用户解决问题。

谷歌——价值数十亿美元的技术公司，理所当然的会设计出满足上述设计规则的产品。谷歌搜索2012的首席设计师Jon Wiley曾经说过：“当我需要设计和创造伟大的用户体验时，我通常会从三个方面考虑：可用性、实用性和可取性。”
Nielsen和Molich的10个UI设计指南很好地涵盖了这三个关键组件，这意味着，遵循这些指南，你可以提高你的设计的用户体验！

学习Adobe如何整合Nielsen和Molich的10大UI设计规则

Adobe是北美的大型计算机软件公司，它阐述了Nielsen和Molich的十大用户界面指南可以为公司带来的成功。他们最受欢迎的软件——Photoshop是一个有着良好用户界面设计的光栅图形编辑器，它很好的展现了十大UI设计的指南。
为了能够启发你在自己的产品设计中提升产品可用性、实用性和可取性，我们下一部分将进一步分析Photoshop是如何体现这些规则的。

1. 系统状态可见性

为了让用户知道软件发生了什么，Adobe做了一个伟大的工作：在任何时候，只要条件允许，就会直观地让用户看到。比如，当用户在图层面板中移动图层的时候，他们可以看到图层在物理空间上被拖动。

当用户在图层面板中拖动图层时，光标由一个打开的小手变成一个抓取的小手，这让用户很容易就理解了软件当前的状态。此外Adobe选择用小手做为光标的图标体现了十大准则中的第二个准则：系统与现实世界的匹配。

2. 系统与现实世界的匹配

Photoshop的用户都了解，Photoshop根据摄影和印刷媒体专用的一些术语和表达方式来设计软件的术语和表达方式。熟悉的概念和术语，如RGB色调/饱和度/亮度和CMYK来表示颜色，而各种工具减淡工具和加深工具模拟传统暗房技术。

Photoshop的Doge工具和Burn工具模仿了传统的暗室技术

PS图象处理软件使用的术语——“曝光”，常用在摄影技术中。

3.用户控制与自由

Photoshop为用户控制每一步提供了很好的条件，比如当他们在更改一个图像或者添加一些特效的时候犯了错误，他们可以非常简单迅速地撤销一步。

用户可以在编辑菜单中选择后退一步，也可以使用快捷键ctrl+alt+z。

4.一致性与标准性

Photoshop的布局和菜单栏是十分标准的，术语也是众所周知的，比如“新建”、“打开”、“另存为”等。

Photoshop的文件菜单都是非常熟悉的选项。

5.预防错误

为了预防用户犯错误，Photoshop提供了一个简短的描述工具，当用户将光标悬停在某个按钮上时，给用户提供提示。

用户将光标悬停在“橡皮擦”工具上时，显示“橡皮擦工具”。

6. 用识别代替回忆

无论是从艺术滤镜菜单里进行选择，还是打开一个新的图像文件，Photoshop都为用户提供了一个样本以提示用户做出正确的选择。用户可以在视觉上识别他们正在寻找什么，而不是必须记住名字或键入名字来搜索。也许你遇到过其他的照片编辑软件，这些程序要求你回忆并键入要处理的文件名，文件名为29412_09342.jpg的情况下，这的确是真的很难想起。

用户通过缩略图可以识别出来日落的图片。

7. 使用的灵活性和高效性

用户爱Photoshop的原因就是喜欢它的灵活性和高效性，用户可以添加、编辑工作空间，保存下来，以备将来使用。

8. 美学与极简主义设计

Photoshop的工具栏只显示图标，放在最左边，将杂波降低到最低，并且保持极简美学。

Photoshop工具栏非常简约，通过使用图标避免了杂波。

9. 帮助用户识别、诊断、恢复错误

每当有错误发生时，Photoshop提供对话框，让用户知道出了什么问题，如何解决问题。

对于这个没有正确使用“仿制图章”工具的错误，软件解释了为什么错误会发生、如何解决错误。

10.帮助文档

帮助文档可以通过主菜单栏轻松访问到。从那里，用户可以找到各种各样的帮助主题和教程，了解如何充分利用Photoshop。

窗口显示信息是如何在Web图形环境创建滚动条。用户还可以在侧菜单上看到主题列表。

通过应用十大法则提高可用性、实用性和可取性的十个步骤

作为一个设计人员，你应该具备评价自己和别人的作品的能力，并给出合理的建议和参考理由。在对产品的评估中应用这十大法则将会帮助你发现潜在问题，指导你和你的团队提升用户体验。这里有一张工作表供你练习，通过这个，你可以学会识别这些规则是否被应用，以及何时违反了这些规则。最后，现在是时候通过进一步执行十大法则来改进网站和程序了。

关注微信公众号回复关键字【UI设计10个必须遵循的法则】（公众号搜索：Interactiondesignfoundation）下载高清文件

总结

当你遵循Nielsen和Molich的UI设计10则，在设计过程中你会有考虑可用性、易用性以及用户需求的满足。像Apple，Google，Adobe这些公司的设计师一样，你在设计决策过程中，能够充分的调研探索，并且能够将设计方案兼具可用性和美观性。通过在上方的表格文件中，对每一项进行核对，变能够锻炼这10条UI设计规则。

拓展阅读

To view ‘A Usability Study of Adobe Photoshop’ please see:

http://courses.cs.washington.edu/courses/cse595/98…

To find more information on Jakob Nielsen’s ‘Enhancing the Explanatory Power of Usability Heuristics’ please see:

https://static.aminer.org/pdf/PDF/000/089/679/enha…
To view more information on Jon Wiley’s design thinking please see:

http://www.fastcodesign.com/1671425/how-googles-de…