设计中的 9 个关键状态

这篇文章介绍了初始，载入，和空等设计中的 9 个关键状态。通过将这些设计状态引入设计/开发流程，我们在设计/开发更会主动的为用户着想，我们的产品将会更贴近用户，从而具有更强的竞争力。

缘起

这次回国，我见到不少在创业的朋友，也把玩了他们的产品（绝大多数是手机应用），并为他们的产品提供各种建议。经过交流，我发现他们的产品有一个通病：只考虑理想状态（happy path），而忽视其它状态（unhappy path）。

这么说比较抽象，我举几个例子：

• 某购物推荐应用，我在注册之后进入应用主界面，这时推荐列表是空的（因为用户还没有选择任何偏好）

• 某订饭应用，我完成订单后没有任何提示，直到经过一番点击，我才意识到已下的订单在另外一个页面里

• 某新闻应用，我在注册时输入密码，点击确认，没有任何反应，询问应用开发者之后才直到密码不能少于 8 位

总而言之，这些交互问题都是只考虑理想状态而导致的。按理说这些问题在测试时就应该被发现，但为什么没有被发现呢？我观察了下他们的测试流程：

1. 安装应用

2. 注册，登录，填一些数据

3. 各种测试

这时你可能已经发现问题了——开发者和测试者都对产品很熟悉，因此他们跳过了第 2 步（注册，登录，填一些数据）直接进入第 3 步进行测试，这就导致了第 2 步中的问题很难被发现。然而第 2 步至关重要，因为如果注册有问题或是用户不知道如何增加数据，那么他/她很可能就不会继续使用这个应用。

我把这个问题反映给应用的开发者/设计者，他们大多表示赞同，并询问如何避免这些问题再度发生。我说我知道两个方法：如果有时间，阅读 探索性软件测试（我的前 BOSS 给我的推荐读物之一）；如果时间不足，阅读 Medium 上的 The Nine States of Design。下面即是 The Nine States of Design 的译文全文：

现代的 UI 团队会在设计界面（interface）之前设计好组件（components），之后将组件组合成用户界面。这种做法经常会遗漏一些细节，形成一些『出乎意料的交互流程』——用户有意或无意进入的，开发者/设计者意料之外的交互流程。作为设计师，我们不能只考虑单个页面，而需要考虑整个系统，因此我们需要花时间去改善这些被遗漏的设计状态（States of Design），并为这些设计状态创建出一个通用的生命周期（Life Cycle），以便应用到各个组件之上。下面的 9 个关键状态构成了我提到的生命周期：

1. 初始

UI 组件在第一次使用时应该做什么？它可能是第一次被用户看到，也可能还没有被激活。总之，它代表了 UI 组件的初始状态。

通过设计合理的初始状态，Jonas Treub 保证了 Framer 用户在第一次打开应用时的体验

2. 载入

理想情况下，用户是不会看到载入状态的——但是我们不能只为理想情况设计。有很多设计方法可以使载入状态变的既精巧（subtle）又不那么显眼（unobstrusive）。Facebook 在这方面就做的很不错：

Facebook 通过使用『占位条目』替代传统的载入转轮

3. 空

当 UI 组件完成初始化，但没有任何数据时，它就处于空状态。良好的 UI 组件会在这时提醒用户做一些操作（例如『请点这里 :–)』）

4. 第一次输入

处于空状态的 UI 组件在接收用户输入后进入为这个状态。例如空输入框在用户输入第一个字符之后的状态，以及空列表在添加第一个条目之后的状态。

5. 若干数据

这个状态往往是设计师最先考虑的状态：UI 组件已经完成载入，它已有一些数据，用户在这时也对 UI 熟悉起来。

UENO 设计的展示板（dashboard）

6. 过多的数据

当用户提供了过多的数据时， UI 组件就会进入这个状态。对于列表，我们可以进行分页，对于文字，我们可以考虑进行合理的截断。

Pete Orme 设计的分页 UI

7. 错误

当用户输入错误时，UI 组件应给予用户相提示。

8. 正确

当用户输入正确时，UI 组件亦应给予用户提示。

9. 完成

当用户的输入被提交之后，UI 组件应给予用户提示和鼓励。

上面的设计状态会被反复的应用在页面设计，用户交互，数据上传，以及几乎所有涉及到改变应用状态的交互之中。通过仔细设计这些状态，不管用户处在哪一条交互路径，我们可以为都可以为他/他提供出良好的体验。

尽管显而易见，但这些涉及状态往往被设计/开发团队遗漏或忽视。因此，为这些状态提供合理的设计会大大的改善产品体验并提高产品的竞争力。通过将这些设计状态引入设计/开发流程，我们在设计/开发更会主动的为用户着想，我们的产品将会更贴近用户。

以上。

英文原文链接：The Nine States of Design

作者：Lucida