您是否曾经经历过感觉毫无生气的用户界面？您是否创建了一个似乎缺少的UI...某物?

如果是这样的话，你可能已经经历了一个尴尬的UI的情况。

笨拙的用户界面 是丢失的装载指示器。它忘了告诉你的客户哪里出了问题。带有可怕错误消息的奖励积分。这是一张看起来很奇怪的图表，只有几个数据点。这是线性的 snap

创建易于被人类理解的界面使我们的产品设计师与计算机懒惰这一可悲的事实背道而驰。他们不在乎帮助人们了解什么是新的，下一步该做什么，或者当出现问题时如何反应。

在计算机的理想世界中，他们所要做的就是在发生意外情况时抛出晦涩的错误代码和令人恐惧的警报。或者，更好的是，他们只会以二进制形式与您交谈。

但是我们不会说二进制。我们在流动中思考，我们已经习惯了物理世界。当一扇门打开时，它会在弧形上摆动。当某物旅行时，你可以看到它在移动。当有东西落下时，你可以看到它反弹。

尴尬的UI是当产品设计人员没有考虑这些因素时。这意味着在这条线上的某个地方，一些规则已经被打破。

但是哪个规则？

UI堆栈的规则。现在让我们谈谈。 UI堆栈您在数字产品中与之交互的每个屏幕都具有多种个性。

确切地说是五个。

根据具体情况，这些个性会向您的客户透露。用设计师的话来说，我们称之为

国家

。你应该为你制作的每个屏幕考虑这些状态。

这是因为遵循UI堆栈和五个状态的规则可以帮助您创建一个宽容，有用和人性化的内聚界面。对自己诚实。你最后一次创建只有一个状态的屏幕是什么时候？即使你正在创建天气应用程序 (提示运球笑话)，一个州也不会削减它。

• 现实是，我们生活的世界并不完美，事情出了问题。服务器需要时间来响应。而且您的客户不会总是按照您的预期方式使用您的产品。
• 因此，作为产品设计师，您必须考虑这些现实。
• 这就是为什么您将为产品设计的每个屏幕最多可以具有五个状态 (
• 单击any跳到该部分

):

理想状态

空状态

错误状态

部分状态加载状态当您的客户在您的产品流中移动时，他们也将在这些流中的每个状态之间无缝移动。

消息应用程序的真实UI堆栈。每个屏幕之间无缝过渡。

想看看UI堆栈在运行吗？如果你愿意，你现在可以跳过那里。

跳到UI堆栈原型

惊喜!现在是互联网历史上短暂插曲的时候了。company-formerly-known-as-37signals大本营2004年为我写了一篇开创性的文章，题为“

三态解决方案。”(不，这不是结束以巴冲突的计划)。他们概述了每个屏幕都应考虑三种可能的状态: “常规，空白和错误”。这让我大吃一惊。改变了我永远对网络设计的看法。

但是互联网上的情况发生了变化。首先是AJAX革命，其次是移动应用程序。第三是技术的大众消费化。对UIs的需求和期望发生了变化。这是我对十年以上想法的改编。

注意到这一点，让我们谈谈理想状态。

理想状态

这是我创建的第一个状态，因为它是您希望人们最常看到的。它的命名恰如其分，体现了您的产品潜力的顶峰-当您的产品提供最大价值并充满有用，可操作的内容时。它将作为您将为此屏幕创建的所有其他状态的基础。可以将其视为典型的营销页面或移动应用商店屏幕截图。

让这个状态设定其他每个状态的基调。因为当你在核心界面上迭代时，这个UI可能会随着时间的推移而完全改变。这既是美丽，也是迭代的风险。

这对所有其他州都有巨大的影响。

所有UI状态导致理想状态。因此，首先从这一点开始，随着您的设计越来越接近解决客户的问题，让所有其他状态就位。

仍然不确定我所说的理想状态是什么意思？让我们看一些例子来澄清一下。

啊，多如画。所以数据。很多照片。

Tinder是市场上最好的理想状态之一。 空状态空状态真的比一个屏幕还大。当您向客户介绍产品时，它将为客户提供令人难以置信的第一印象-激发他们采取行动，保持他们的兴趣，并提醒他们您的产品将提供的价值。 空状态有三种广泛的版本。首先是您的客户第一次使用您的产品时所看到的。第二个是当您的客户自愿从屏幕上清除现有数据时会看到的情况，例如，当您获得崇高的 “收件箱零” 时。第三个是当搜索结果没有任何内容可显示时会发生什么。 从广义上讲，空状态的风险在于，很容易将它们作为事后考虑。在大多数情况下，这样做要么会带来压倒性的体验，要么会带来冷酷的，非个人的体验。正如乔治·武井 (George Takei) 所说: “哦，我的……”

在我看来，教练标记 (或教学覆盖) 是初次思考的最佳例子。他们把学习的负担放在客户身上，包括更多的界面，更多的记忆，所有这些都在相当大的精神中断下完成。真是个嗡嗡声。

• 下面让我们更深入地探讨一下首次使用状态。
• 首次使用/入职
• 
  
• 如果客户是第一次使用您的产品，则此状态是您描述数据存在时客户将看到的内容的一次尝试。这是你鼓励行动的机会，帮助他们理解他们将从这个屏幕中获得的价值。第一印象只发生一次，这是你创造一个伟大印象的机会。

我将这种状态部分地比作文学界所谓的 “英雄之旅”。约瑟夫·坎贝尔 (Joseph Campbell) 在他的惊人作品中介绍了

千面英雄,这是世界各地神话故事的基础奥德赛到星球大战

。这是基本前提:“一个英雄从普通的世界冒险进入一个超自然的奇迹地区: 在那里遇到了神话般的力量，并赢得了决定性的胜利: 英雄从这场神秘的冒险中回来，有能力给他的同胞带来恩赐。“什么是什么用空虚的状态推动你的客户踏上英雄的旅程。召唤他们去冒险，带他们经历已知的挑战和深渊的诱惑，并将他们转变为更强大的个人。

但是怎么做呢？一些想法:

把一匹马带到水里。在你的文案写作中要令人鼓舞和振奋，并直言不讳地谈论该做什么。例如，说 “这里什么都看不到” 之类的话实际上并没有说明您的客户应该期望什么，这将是您看到的第一件事，这有点令人沮丧。相反，告诉您的客户要按下的确切按钮以及他们为什么要按下该按钮是一个更有帮助的前景。

使用您产品的内容来指导您的客户做什么。例如，如果您正在构建消息传递产品，您的首次体验可能会自动在客户的收件箱中包含一条消息。主题行可能会说 “点击打开我”，而消息中的文本更多地讨论如何操作和回复消息。

提供一个屏幕截图的示例，说明在理想状态下屏幕的外观。它给你的客户带来了一点希望，他们会在展示你的产品有多有用的同时实现类似的目标。

监控客户的进度并做出相应的反应。例如，如果他们在某个屏幕上停顿的时间过长，您可以通过实时聊天向他们发送消息，询问他们是否需要帮助。

以下是我喜欢的一些首次使用空状态。什么是什么Hipchat马上出来，告诉你该怎么做，同时暗示隐藏在表面之下的一些有趣的额外功能。

Facebook论文在教您关键手势的同时逐渐向您介绍其功能。

什么是什么

Basecamp没有内容可以向您显示-但是它没有为屏幕填充任何内容，而是为您提供了替代内容，以可视化产品的潜力。我的完成主义者想要创建项目，这样我就可以看到这个屏幕充满了乌托邦式的生产力。

首次进入Airbnb的愿望清单，您将获得这种时尚简单的空状态。我喜欢这个设计的地方是它不会太努力 (符合Airbnb的设计语言)，但也有一个非常明确的行动号召，让你开始收集数据。 关于登机和首次状态的主题对于另一本书来说是一个足够大的主题。碰巧有一个存在。如果您想进入登机池的用户，我强烈推荐Samuel Hulick的出色

用户入职的要素

。用户清除的数据

第二种类型的空状态是您的客户自愿从屏幕上删除数据的情况。例如，如果您的客户完成了待办事项清单上的所有项目，阅读了他们的所有通知，存档了他们的所有电子邮件，或者下载完他们所有的音乐。

这些类型的空状态是奖励客户或刺激进一步行动的绝佳机会。实现 “收件箱零？” 太好了!查看这张惊人的照片。下载了你所有的音乐？很好，现在去听听。筛选了你所有的通知？这里还有一些你可能想读的东西。

客户清算数据是与您的产品互动的客户。通过为他们做工作，将它们保持在产品的流程中。不要让你的客户承担下一次飞跃的责任。

是的，这是iOS 6的老式屏幕截图，但仍然说明了实现收件箱零带来的轻微多巴胺滴落。您的奖励是从某人的咖啡店或日落中手工选择的Instagram场景-您可以将其分享到Interwebz上，在那里您将庆祝收件箱为零，并为邮箱做广告。三赢!

没有结果

如果您的客户正在浏览或搜索您产品中的一条数据，他们有可能找不到他们想要的东西。这些场景是推断您的客户打算找到什么并提出明智建议的绝佳机会。

亚马逊采用了我见过的这种技术最好的例子之一。考虑到拼写错误和类似的搜索，亚马逊的搜索很少给你一个空的结果。相反，它会给你最接近的匹配结果，同时显示哪些术语不匹配。

我终于流露出我对金属的热爱的例子。哦，好吧，它必须在某个时候出来。

至于Pinterest，嗯，结果与亚马逊不太一样，但这毕竟是Pinterest。根据他们的搜索解析我的查询的方式，客户应该相对容易地调整他们的搜索词以获得他们想要的东西。

教训: 在这种状态下，不要只是把你的客户从墙上赶走。给他们一些他们可能可以使用的东西，或者建议另一条路。

错误状态

出现问题时的屏幕。通常，这比仅仅一个屏幕更复杂，因为错误可能以令人惊讶的组合发生。错误状态可能包括表单数据中丢失或无效的任何内容; 您的应用无法连接到服务器; 尝试在不完成上传的情况下继续下一步，留下没有提交文本的页面，等等。

错误状态也应该令人欣慰，因为您的产品可以确保所有用户输入的安全。如果出现错误，您的产品不应撤消，销毁或删除客户输入或上传的任何内容。

这很容易解释杰夫·拉斯金 (Jef Raskin)，他是原始麦金塔的创造者，也是

人性化的界面

该系统应将所有用户输入视为神圣的，并且-套用阿西莫夫的机器人第一定律，'机器人不得伤害人类，或者通过不作为，允许一个人来伤害。界面设计的第一定律应该是: 计算机不得损害您的工作，或者通过无所作为，允许您的工作害。”

不要。是的!也许吧？

啊，最后，我们可以遵循一个上下文错误消息。奖励: 我们会有一点幽默感来人性化。

理想的错误状态动态发生，而不会破坏用户输入的任何数据。如果必须重新加载页面以检测到错误，请帮大家一个忙，并保存输入到产品中的任何数据 (无论多么有缺陷)。但是，通常情况下，重新加载页面以检测错误是懒惰的标志。为了您的客户，请确保您和您的开发人员付出更多努力，以优雅和包容的方式处理错误。

此外，错误状态不应该是戏剧性的，也不应该是模糊的。还记得 “死亡蓝屏？” mac的 “内核恐慌？” 或者-对于那些计算老兵-“中止，重试，失败？” 这些错误状态中的每一个都必然标志着需要重新启动或重试的重大系统错误。但是直到今天，由于每个错误状态传达给最终用户的震惊，恐惧和困惑，这些错误状态中的每一个都被记住了。

微软的死亡蓝屏变得如此臭名昭著，因为它只是吓坏了人们。蓝屏-虽然比红色屏幕更好-断章取义，突兀，并且充满了令人恐惧的行话，即使它在调试问题时很有用。

这是因为错误状态必须包含简洁，友好和指导性的副本，以说明下一步要做什么。模糊的错误代码，十六进制数字和令人困惑的前进选项只会吓and和挫败经历这些错误的人。

当然，您产品的受众可能包括火箭科学家或计算机工程师。那么这些技术性很强的错误信息可能非常适合您的客户。但是，随着世界上大多数人在日常生活中采用软件，这些类型的错误消息变得越来越不合适。 很简单。使错误消息成为人性化的，而不是技术性的，并且适合您的受众。当出现问题时，你想被告知什么？

错误状态是如此广泛的出现，并且是设计的最不希望的状态之一。但是我保证，如果您像在前两个状态中一样对这种状态投入更多的关注，那么您的产品将使用起来更加快乐-而且更有帮助，因为你已经考虑了常见的客户陷阱，并提前解决了它们。

部分状态

错误状态和理想状态之间的区别就像黑夜和白天。但是，当只有一行数据时，屏幕看起来如何？几张照片？半完整的侧写？

部分状态是当页面不再为空且人口稀少时，有人会看到的屏幕。你在这里的工作是防止人们灰心丧气，放弃你的产品。

这是一个很好的机会，可以设计微交互，引导人们走向理想状态的完全荣耀。这是您带客户帮助他们实现产品真正价值的旅程。这意味着一项成就 -- 你的客户花了一些时间在你的产品上，一瞥它的潜力。让他们上瘾。

一些游戏设计原则可以在这里有用。我指的不是类似祸害的做法，即让您的客户收集水晶来推进部落冲突，而是将所谓的加速构建到您产品的这种状态。

这是一个游戏设计术语，可帮助玩家可视化他们将来将如何变得更强大，并指导他们完成预定义的一系列任务以实现这一愿景。诀窍是让玩家没有意识到他们正在执行可能被视为乏味的操作，以便从您的产品中提取最大价值。

“进入加速阶段的球员并没有考虑他们必须进行的乏味的重复才能升级，他们只是在做，享受结果的加速速度…… 相反，这些玩家陷入了一个未来，在这个未来，他们的角色将以一种他们甚至还无法理解的方式变得强大。

从技术上讲，他们正在推断出呈指数级增长的权力结构，该结构消失在玩家预测范围之外。与传统的流量不完全相同，但玩家的兴奋程度在主观上非常相似。”

以下是一些野外局部状态的好例子…

LinkedIn著名的 “个人资料完整性” 栏，鼓励您执行精确的任务来实现100%。完成主义者欢呼。

我敢肯定，Dropbox向您展示了实现一些额外存储空间的距离，这是大多数Dropbox客户的主要吸引力。Dropbox不仅向您展示了您还需要完成多少步骤，而且这些步骤还具有通过教育和激活使客户更有价值的副作用。_

加载状态

很容易忽略这种状态，许多产品设计师将其插入是事后的想法。但是，设定期望会带来非常实际的负担。当您的应用程序正在加载数据，等待互联网连接或过渡到另一个屏幕时，您必须非常小心，注意如何表示正在获取数据的情况。这可能包括整个页面接管，内容窗格的延迟加载或内联加载，当人们可能从表单字段中查找用户名可用性时，可能会使用它们。

对装载的感知同样重要。设计师常常只是用空白和微调器填充屏幕，给不存在的内容带来了巨大的责任负担。反过来，这鼓励您的客户形象地观看时钟-将重点放在进度与实际装载进度的指示上。

这就是卢克·弗洛布洛夫斯基 (Luke Wroblewski) 的信念

,一位产品设计专家，带领设计团队从eBay到Yahoo!在出售移动投票初创公司Polar之后，他现在居住在Google。

Wroblewski和他的团队发现，在为每次民意调查实施一系列加载微调器后，Polar客户开始抱怨该应用程序似乎较慢，诸如 “似乎有过多的等待页面刷新和加载-似乎没有以前的版本那么快。”

Wroblewski意识到:

他说: “随着这些进度指标的引入，我们已经让人们看钟了。”“因此，时间变慢了，我们的应用程序也是如此。我们关注的是指标，而不是进展，这表明你正在朝着你的目标前进，而不仅仅是等待。

这种认识直接导致了他所谓的 “骨架屏幕” 的创建。这是Pinterest和Facebook现在在其web和移动版本中使用的一种技术。

• 骨架屏幕是对加载状态的一种创新-它将重点放在加载内容时的内容上，而不是内容正在加载的事实。这是通过显示页面的基本结构并在下载时逐渐填充丢失的部分来实现的。这种技术的美妙之处在于它可以完全消除旋转器。它可以提高你的产品的感知性能。
• Luke Wroblewski的应用程序Polar及其骨架加载屏幕。
• 
  
• Pinterest在使用骨架屏幕加载状态概念的同时，对其实现进行了独特的改动: 得出图钉图像的 “平均颜色”，并使用该颜色填充图钉的背景。因此，在加载图钉的图像之前，您会感觉自己可以预览图钉的内容。什么是什么