软件产品设计-产品经理前端设计的十大可用性原则

界面设计流程当团队分工明确、人力储备充足时软件产品设计，开发新的B端业务系统时，界面设计流程一般如下：

产品经理绘制线框原型来表达软件中每个页面的设计要求。 UE设计师协助产品经理改善交互体验，创建交互原型。 UI设计师根据交互原型进行美术设计并生成裁剪文件。 前端工程师拿到裁剪文件并进行前端开发，包括实现交互、动效等。

产品经理在设计前端时可以参考尼尔森的十大可用性原则。 下面详细介绍十项可用性原则。

人机交互博士雅各布·尼尔森于1995年1月1日发表了“十大可用性原则”。尼尔森十大可用性原则是尼尔森博士在分析了200多个可用性问题后提取的十项通用原则。 它是产品设计和用户体验设计的重要参考标准，值得深入研究和应用。

十项可用性设计原则是：

反馈原则、隐喻原则、回退原则、一致性原则、防错原则、记忆原则、灵活性易用原则、简单设计原则、容错原则、帮助原则。

1.反馈原则（系统状态可见）

系统应该在合理的时间以正确的方式向用户提示或反馈系统当前正在做什么以及正在发生什么。

人机交互的基本原则是系统与用户之间保持良好的沟通和信息传递。 系统必须告知用户发生了什么以及期望是什么。 如果系统不能及时向用户反馈适当的信息，用户难免会感到失控、焦虑，不知道下一步该做什么。 以下是一些遵循反馈原则的常见设计示例。

图1 系统安装示意图

2. 隐喻原理（系统与现实世界的匹配）

系统应使用用户熟悉的句子、短语和符号来表达含义。 遵循现实世界的认知和习惯，使信息的呈现更加自然、易于识别和接受。

在人机交互设计中，程序的交流表达和功能的呈现必须以最自然、易于用户理解的方式进行，避免使用计算机编程语言表达。 设计应符合现实世界的认知，使用户能够通过联想、类比等方法轻松理解程序的含义。

例如，在音乐播放器APP中，功能按钮设计如图2所示。即使不进行解释，用户也可以轻松了解每个按钮的用途。

图2 音乐播放器App功能按钮图

再比如软件产品设计，美团APP的分类图标设计非常有趣，易于理解和使用，令人印象深刻，如图3所示。

图3 美团APP分类图标

3. Fallback原则（用户控制和自由）

用户经常会不小心出现操作错误，需要一个简单的功能来快速将程序恢复到错误发生前的状态。

用户出错的概率极高。 对于误操作，软件系统应尽量提供“撤消”、“重做”或“后悔”功能，以便系统能够快速恢复到错误发生前的状态。

当然，并不是所有的操作都能“悔改”。 例如，您可以取消错误的订单，但无法取消成功的转账交易。 以下是遵循回退原则的常见设计示例。

4. 一致性和标准

在相同的场景和环境下，用户执行相同的操作时，结果应该是一致的； 系统或平台的风格和体验也应该保持一致。

软件设计和产品设计中有很多约定。 虽然没有明确的规定，但是大家都在遵守，因为用户已经习惯了这些规范。 我们在设计的时候，应该遵循惯例，保持系统的一致性意识，而不是盲目创新。

例如，在APP底部的导航图标中，“首页”始终排在第一位，个人中心（“我的”）始终排在最后。 而对于“主页”、“购物车”、“订单”等常见按钮吉祥物，不同App的设计风格非常相似。

图3为美团、去哪儿、百度外卖应用底部导航栏的设计。 您可以看到以上特征。 如果你特意把个人中心放在第一位，或者使用一个奇怪的图标作为个人中心的图标，用户在使用时肯定会感到别扭。

图4 三个APP的导航栏设计

此外，一个或多个系统应采用统一的设计风格。 无论是图标的选择还是布局的规划，都必须工整、一致，以便于用户理解、习惯和适应。

例如，Office软件所包含的各产品的界面布局和设计风格保持高度一致。 图4显示了Word（上）和Power Point（下）的界面。 可以看到卡通人物，两者的“插入”一级菜单下包含的功能的顺序、布局甚至图标图形都高度相似。

图5 Word和Power Point的设计风格非常统一

5. 防错原则

系统预防错误发生比错误发生后给出提示要好。

设计时，首先考虑如何避免错误，其次如何检查和验证异常。 一方面，这可以使问题变得更简单，另一方面，可以让用户避免或减少不必要的操作。

例如，有时为了防止用户重复提交或重复点击，按钮在第一次点击后呈灰色，直到处理完成后才恢复。 有时会调整按钮的顺序以防止用户意外点击。 例如，对于非常重要的操作，为了防止用户误点击，二次确认对话框中“是”和“否”按钮的位置将会颠倒。 仿真效果如图6所示。

由于常见的对话框将“是”按钮放在第一个位置，用户在操作时很容易出现条件反射，点击第一个按钮，然后突然意识到自己按错了按钮。

虽然看起来有点别扭，但它很有效，因为单击多次比意外删除文件要好。 这种设计在软件卸载、APP取消会员订阅等操作中也很常见。 但后两种情况主要是提供一些心理暗示和引导，防止用户卸载或退订。

图6 通过调整按键顺序避免用户误操作

6.记忆原理（识别而不是回忆）

让系统的相关信息在需要的时候显示出来，减轻用户的记忆负担。

计算机应该减轻人们的记忆负担，而不是相反。 例如，在切换页面时，不应要求用户记住不同页面的内容，而应在适当的地方主动呈现或提示以前的信息。 例如，几乎所有的APP和PC端搜索引擎都会记录用户的搜索历史并呈现给用户。

图7是美团APP的搜索页面。 可以看到上面的“搜索发现”是推荐功能，下面的“最近搜索”是用户最近使用过的保留搜索关键词。

图7 美团APP搜索功能

再比如，在所有的电商购物流程中，用户提交订单后，都会出现验证页面，让用户仔细检查所填写的信息是否正确。 这个设计非常有用。 我经常在下订单时忘记更改默认地址，直到再次检查时才发现。

7、使用灵活高效

在系统的用户中，中级用户往往最为常见，而初级和高级用户则相对较少。 系统的设计应面向大多数人，同时考虑少数人的需求，并且灵活易用。

灵活易用原则不仅是一种交互设计原则，更代表了一种软件产品设计理念：系统必须简单易用，让所有中级用户都能轻松使用； 它还必须提供必要的帮助，使那些刚刚起步的人变得容易。 新手用户也能顺利上手； 还需要支持灵活的个性化定制，让高级用户能够更高级地使用系统，充分发挥其价值。

让高级用户灵活定制最典型的例子就是各种软件和APP的配置功能。 基本上所有的软件都会提供定制化的功能，从快捷键设置，到页面布局，再到自定义参数，软件系统都会尽力提供全面的个性化设置功能，以满足不同用户的需求和习惯。

例如，图7展示了Word的定制功能，它提供了非常强大的配置功能。 用户可以实现对Word UI的颠覆性重置。

图8 Word提供强大的自定义配置功能

8.美观简约的设计

对话不应包含不相关或不必要的信息； 添加或加强某些信息意味着削弱其他信息。

太多的专注就等于没有专注。 在视觉设计中，要掌握好“显着标志”的程度和内容的呈现方式。 例如，图 9 显示了中断通知的示例。 左图仅突出显示了停电和停机时间。 右图突出了更多内容，但用户无法一下子抓住真正的关键点。

图9 过多强调相当于不强调

9. 容错原则（帮助用户识别、诊断错误并从错误中恢复）

错误消息应该用简单易懂的语言进行解释，而不是仅仅提示用户错误代码； 提示错误信息时应给出解决方案。

对于许多运行时错误或异常，计算机程序将返回错误代码。 然而，对于用户来说，当他们看到这些错误代码时，他们并不明白发生了什么，因此必须将错误代码转换成用户可以理解的语句。 并告诉用户解决建议。

当访问网站时，如果页面不存在，服务器提供的标准错误消息是404错误（如图10左侧所示）。 很多用户不明白404是什么意思。 图 10 右侧所示的页面处理此问题，将错误消息转换为用户可以理解的表达式，并给出解决方案建议。

图10 页面不存在的不同提示页面

10.帮助和文档

对于一个设计良好的系统，用户无需培训就可以轻松上手，但提供帮助文档还是有必要的。 帮助信息应该易于检索，指导用户通过清晰的步骤解决问题，并且不要太复杂。

如今的软件产品，尤其是C端产品，普遍具有良好的交互设计，可以帮助用户快速学会使用，而无需阅读和理解复杂的文档。 但B端产品的复杂度远高于C端产品，因为B端产品包含了很多业务流程规则。 系统中的一个按钮可能代表一个复杂的业务处理规则。 如果不了解整个业务场景和处理规则，就很难理解按钮操作的含义。

因此，对于B端产品来说，用户进行自助服务和自助操作的难度要大得多，仍然需要B端产品的帮助文档。 产品设计师应该尽力为前端交互提供引导提示。 对于复杂的规则和逻辑，可以考虑使用帮助文档来指导用户。