如何设计优秀的Dashboard（主控面板/仪表盘）？

在许多方面，一个主控面板（或叫仪表盘，本文统一采用“主控面板”）就像一块数字设备的屏幕 ——在其表象之下其实发生了许多活动，但作为用户，我们不知道这样的活动，只是相信我们所看到的。

有多少人知道甚至关心在手机屏幕上要显示电池的状态到底需要调用多少系统级功能？但是，一旦电池标志变为红色，我们很快就能明白，如果还不充电，设备很快就无法使用了。类似的例子举不胜举，于是我们不得不意识到，随着时间的推移，我们的一些认知和判断都开始依赖系统设计了。

当谈到B2B/SaaS产品时，可以说主控面板就是其系统的生命线，因为它是客户与之交互的主要对外接口。虽然一个主控面板封装了底层系统的复杂性，但它的成功真正在于它如何有意义地将KPI传递给客户，如何作为一个可靠的信息来源的以及如何使客户的工作更加高效。

在这篇文章中，我想分享一下作为一个好学的产品经理，在缺乏专业设计师指导的情况下，你如何应用Jakob Nielsen的10条可用性原则（启发式方法）评估你的SaaS类产品的主控面板的设计。

接下来，让我们来看看这10条启发式方法是什么，以及各种控制面板的设计中是如何应用它们的。

1、系统状态具有可见性

系统应该在合理的时间内通过适当的反馈，始终向用户通知正在发生的情况。

在仪表板的上下文中，应该预先显示对用户最重要的信息。根据您的产品所面向的客户类型，这些信息可能是数字型的——帮助用户可视化他们需要经常通过图表追踪的一些指标，或是文本型的——使用摘要文字告诉他们关键信息。

由于店主们主要使用Shopify来在线售卖实体产品，因此Shopify的主控面板就用来告诉店主他们的销售情况究竟如何，比如店主们登录进来就能立刻看到他们的销售额、订单量和付款数量等信息。

Basecamp的主页通过由标题、简要说明以及成员列表构成的一个个卡片让用户能够统览不同的团队和项目。这些卡片反过来又作为网站中不同区块的入口。

2、系统和现实世界要贴切匹配

系统应该说人人都能理解的话，使用用户熟悉的词语、短语以及概念，而不是拿系统导向的术语来为难用户。要遵循真实世界的约定，使其传达的信息以符合自然语言的逻辑。

Hubspot 使用访问量、联系人、客户、登录页、转换率、浏览量以及提交等关键词向他们的核心用户——市场营销者传达关键信息。

Localytics——另外一个营销自动化产品，则使用了诸如用户终身价值、每用户平均收入、购买频率、增长率以及付费用户等营销者每天都在使用的词汇。

3、给用户控制权

实际上，用户在选择系统功能时经常出错，他们需要一个足够清晰的“紧急出口”以快速的离开并非他们当前想要的状态，而不必非得通过其他扩展对话。另外，应该支持撤消和重做。

Mailchimp用户可以通过点击标记清楚的“保存并退出”按钮离开模板创建工作流程。 此外，用户可以“保存并关闭”模板的单独组件，例如文本块和图片模块; 另外还支持了查看上次保存的时间戳以及撤消和重做。

Freshbooks 用户可以在生成一个新发票的过程中通过取消、保存和退出按钮回到主控面板。这几个按钮的尺寸、样式和布局使用户很容易注意到。

4、保持一致性并符合一定标准

用户不应该还得花时间思考不同的措辞、情况或动作是否意味着相同的事情。要遵循平台的惯例。

用户在一个平台上花费的时间越多，他们的心智模型也会变得越来越成熟。 而随着过去几年中平台的数量有所增长，要应用这个启发式也就变得更加有挑战性。

这条启发式在于两方面：

（1）一个产品的主控面板在不同平台间应该保持一致性，包括用户界面、措辞以及动作等都应该看起来熟悉的。

BlueJeans是一个企业在线视频会议服务平台，它在不同的平台（无论是网络，桌面还是移动）上向用户显示三个标准的号召性按钮（“安排会议”，“加入会议”，“开始我的会议”），营造了很好的一致性。 作为一个用户，当你看到不同平台的用户界面时——按钮的数量和他们的名字保持相同，自然会产生一种似曾相识的感觉，用起来也是得心应手。

（2）无论是用在哪个平台，主控面版的设计都应该遵循当前平台的设计准则。

在Android和iOS平台上，Buffer提供了相同的功能，但UI却不同，因为这两个应用程序都遵循了各自平台的设计准则。在Android上，你会看到诸如汉堡包和溢出菜单、卡片、悬浮按钮等组件，而在iOS上，您看到的会是标签栏、导航栏以及选择器等。

5、预见性防错

相比于错误发生后显示一条错误消息，通过更细致的设计能在第一时间防止问题发生显然是更好的做法。要么消除容易出错的条件，要么检查它们，并在用户提交操作之前向用户显示确认选项。

当然了，一些基本的处理方法，比如表单校验、输入类型和范围的检查、错误消息和帮助文本的提示都可以很好地发挥作用，但是难道就不能在用户可能犯错误时就预防某些情况的出现吗？ 具有前瞻性的设计方案既可以帮助用户避免令其挫败沮丧的体验，又能够反映出一个设计师对用户的同理心。

JIRA 在用户创建一个事务时强制性的要求选择一个受托人。然而很多时候，用户批量的添加事务时，他们也不会事先搞清楚究竟谁将负责处理这个事务。 JIRA帮助用户提供两种类型的默认默认：a、自动分配事务，通常是给管理员或版主或当前用户，b、提供一个名为“分配给我”的链接，也就是将该任务分配给该事务的报告人。

只要用户尝试向5个或更多团队成员发布通知时，Slack就会显示警告消息。警告通过寻求用户的确认来防止错误地发布通知。

6、关键信息摆上台面

通过保持系统对象、操作和选项可见，最小化用户的记忆负载。用户不应该还需要记住从跟系统对话的一个地方到另一个地方的信息。在适当的时候，系统的使用说明应该是可见的或容易检索的。

这种启发式的经典例证是文本编辑器中常见的字体下拉列表。 从用户认知上来说，区分识别一个字体名称使用了其本身代表的样式的字体显然更加容易，而不是所有字体名称都采用相同样式，用户还需要自己去把字体名称跟样式靠记忆一一对应起来。

这样的视觉提示对于减少用户在检索信息上付出的脑力劳动有很大的帮助。

JIRA直接在系统主控面板上显示分配给一个用户的事务流， 这有助于用户快速导航到相关事务项，而不需要再花费时间和精力去应用过滤器来查找。

在Trello中，用户回看一个板子和卡片时，他们不需要去回想之前都做了哪些改动，Trello自动帮助用户保存了其更改日志，让用户一目了然。

7、灵活高效

“加速器” ——新手用户往往看不到——但通常可以提高专家用户跟系统间的交互效率，这就使得系统既满足了新手用户的基本使用又从一定程度上迎合了有经验的用户的更高级的需求。 另外，要允许用户能自定义一些比较频繁的操作。

“加速器”其实就是一些相对高级的功能，比如键盘快捷键功能，对于相对专业的用户而言，无疑是一个提升工作效率的利器。不过请注意，这里并不是说面向专家用户会提供额外的功能，而是说在使用一个相同的功能时，提供一个更佳的体验给这群用户以提高他们的生产率。

UXPin 会在用户将鼠标光标移动至一个按钮上时显示其对应的快捷键，从而让专家用户使用起来更有效率。

定期使用Meetup并且非常依赖个人日历的专家用户可以将设定的会面时间与各种其他服务（例如Google日历，iCal）进行同步，而新手用户则可以通过主控面板的日历小部件查看即将到来的会面时间。

8、兼具美学设计和极简设计

跟用户的对话不应该包含不相关或很少需要的信息。对话中的每一个额外的信息单元都会与相关信息单元有竞争关系，会降低它们的相对可见性。

Mailchimp的电子邮件模板部分仅包含用户选择一个模板的足够信息——用户可以通过查看模板名称和线框图来区分各种模板。 该设计采用最小的灰度色调，留有充足的空白和一个容易理解的视觉层次。

SoundCloud 的统计页面为艺术家提供了丰富的信息，这些信息可以清楚地辨别，因为它的页面结构通过交互式图表、列表、关键色和留白等要素组织得很好。

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

错误消息应以简明的语言（无代码）表示，准确地指出问题所在，并建设性地提出解决方案。

在用户尝试将Trello与Slack集成时，如果他不属于某个团队，则会显示一条以简明扼要的错误消息，既描述了问题所在，又提供了解决方案。

如果系统跟服务器断开，Asana会将屏幕半遮盖使其处于非活跃状态，并显示一个明亮的弹出消息，告诉用户当前发生的错误并显示Asana正在恢复的状态以及一个找到更多可能原因详细信息的链接。

10、提供适时的帮助

尽管一个好的系统即使没有任何帮助文档也应该可以使用，但提供相关的帮助说明或文档还是有必要的。 任何这样的信息都应该容易搜索到，而且关注于用户任务，列出具体的步骤，并且篇幅不要太大，保持简洁。

Wordpress Help 组件贯穿于所有页面——它易于发现，关联于用户当前所处的页面和选取，内容简介且能够根据用户需要展开或收缩。

Mixpanel 在用户开始填充文本字段时显示简短、有用和相关的帮助消息。

最后，不妨思考下你遇到过的最喜欢的主控面板的设计方案是什么样的？你认为它们有没有或是如何应用本文提到的这些启发式方法的？不妨留言分享。

译自：https://rahulgulati.com/designin ... 50636841#.6q2f66xyh