UI 设计综合指南

（这是一篇赞助文章。）随着大图的建立——映射用户旅程和定义你的设计的外观和感觉——我在这十篇文章系列中的第五篇文章深入探讨了设计用户界面组件的细节。

UX、IA、UI：所有这些缩写都可能令人困惑。 实际上，作为设计师，我们经常会在这些不同的专业领域工作：设计整体用户体验 (UX)，在考虑信息架构 (IA) 时逻辑组织信息，以及考虑用户界面 (UI) 的粒度设计.

在我的 UX 设计指南中，我探讨了了解用户需求和考虑用户旅程的必要性、考虑到人类行为的设计需求以及建立整体审美的必要性。 在本文中，我将详细探讨我们如何设计一致且可扩展的界面。 我们在设计过程的这个阶段的目标是将我们学到的知识应用到我们的用户界面设计中：

• 使用基准测试来开发界面清单，以确保以连贯一致的方式考虑您的用户界面；

• 根据您的界面清单构建模式库，以确保您的设计既具有成本效益又具有一致性； 和

• 将动画作为与用户交流的一种方式，在功能和愉悦方面改进我们的设计。

简而言之，本文旨在帮助您开发一种系统化的用户界面设计方法，该方法广泛适用于一系列项目，并且具有可扩展性。 通过建立设计框架，我们可以应用从他人那里吸取的经验教训，从而改进我们的设计并为我们的用户带来更好的结果。

用户界面设计 (UI) 是一个庞大的主题，因此可以将这篇文章视为一个简短的入门读物，但是 - 就像我之前的文章中一样 - 我将提供一些建议阅读，以确保您能够很好地涵盖。

开始使用接口清单

您可能会从一个全新的产品开始，或者重新审视现有的产品，但从建立接口清单开始会有所帮助。 正如内容清单有助于确保内容（即文字、图像和其他类型的内容）的一致性一样，界面清单也确保用户界面在一个全面和考虑过的框架内得到一致的开发。

从长远来看，通过在团队成员之间建立一致且易于扩展的设计系统，花一点时间在这方面将节省大量时间。 构建界面清单可以帮助您将时间和精力集中在此时需要的元素上，但是——就像样式指南一样——它应该是一个可扩展的活文档，随着产品的增长而增长。

那么，究竟什么是“界面库存”？ 好吧，这个词是由 Brad Frost 创造和推广的。 它采用了支撑内容清单的想法并将其映射到用户界面设计的世界。 正如弗罗斯特总结的：

“界面清单类似于内容清单，只是您不是对内容进行筛选和分类，而是对构成您的网站 [或产品] 的组件进行盘点和分类。界面清单是零碎的综合集合构成你的界面。”

— 接口库存，Brad Frost

如果您正在重新设计现有产品，则界面清单首先会绘制出所有组件（无论大小），以便系统地记录它们。 如果您正在着手一个新项目，您可能想绘制竞争对手的产品图，对他人的工作进行分析。 这有助于您了解需要考虑的不同界面组件。

该过程的第一个阶段是系统地截取您设计的所有内容的屏幕截图。 这将很耗时，但很重要。 正是在这个阶段——特别是如果你有一个庞大的设计团队——你可能会开始看到不同元素的设计方式不一致。 您的界面清单将帮助您识别这些元素，然后您可以对其进行修复。

考虑构成用户界面的所有不同组件，包括：

• 排版

  • 标题和小标题
  • 文本元素（Standfirsts，段落）
  • 列表

• 图像和媒体

  • 标志
  • 图像学
  • 图片

• 形式

  • 文本输入
  • 单选/复选框输入
  • 选择菜单

如果你和以前的我一样（在我知道之前！ ），你很可能在需要时设计了这些不同的组件，而没有任何系统的方法。 接口库存的想法是在这个过程中强加一个命令，以确保一切都是一致的。

该过程的第二阶段，对所有内容进行分类，旨在对您拍摄的屏幕截图施加一些顺序。 您可以使用各种工具来组织您的屏幕截图，但我建议您使用 Keynote 或 PowerPoint 来组织所有内容，这样您就可以在工作完成后向您的团队展示。 永远有用的 Brad Frost 提供了一个您可以使用的模板 (ZIP)。

完成上述工作后，作为一个团队或与客户聚在一起并贯穿所有事情是一个好主意。 该讨论将有助于更好地理解您需要设计的不同组件。 它还可能通过识别共享模式来简化您的不同组件 - 效率的巨大胜利。

构建模式库

随着您的界面清单和所有组件的组织，开始识别常见的设计模式并围绕这些构建是很重要的。 您的界面清单可能已经揭示了您的设计中的明显不一致，现在是设计过程中的重点，您可以通过以模块化方式重建 UI 来解决这些问题。 我发现把这种方法想象成有点像乐高是有帮助的。

使用乐高，您可以（通过使用小组件）构建非常复杂的东西。 接口类似。 尽管乍一看界面可能非常复杂，但它本质上是由较小的组件组​​成的。 这些组件是模式库的用武之地。那么，什么是模式库？

模式库识别和分类设计模式，这些设计模式是针对典型设计问题的重复解决方案。 这些可能是：

• 日历选择器
• 面包屑小径
• 旋转木马

模式库将接口分解为更小的元素，然后可以将其用作可重用的构建块。 这种方法的好处包括：

• 设计的一致性
  通过使用更小、可重用的组件构建复杂的用户界面元素，您可以确保所有用户界面元素都是一致的，因为它们都是由相同的简单组件构建的。

• 您可以在团队成员之间共享的视觉词汇表
  通过为您的产品建立模式库，团队中的每个人都可以以此为基础进行构建，而不是构建自己的临时元素。

• 随着设计的发展，效率随时间推移而变化
  即使您的产品随着时间的推移而增长，它的维护也是有效的，因为它是建立在核心模式库之上的。

在设计您的用户界面时，参考其他人的设计模式以了解哪些可行——同样——哪些不可行是很有帮助的。 UI Patterns 是一个很好的资源，收集了大量的设计模式。

通过使用您的界面清单作为识别常见设计模式的起点，您离建立需要创建的组件以建立设计系统只有一步之遥。 这将有助于确保您的 UI 一致且可扩展。

拥抱原子设计

在深入探讨原子设计原则之前，重要的是要在应得的地方给予一点信任。 Andy Clarke 一直在写和谈论“设计系统，而不是页面”已经有一段时间了。

Clarke 的洞察力——我们需要停止孤立地设计页面，而是专注于创建构建这些页面的系统——已经为围绕关注设计模式重要性的写作提供了很多信息。

我们很幸运，许多设计师接过接力棒，深入探索了这一思路。 Brad Frost 关于原子设计的书和 Alla Kholmatova 关于设计系统的书都充满了有用的建议，应该是必读的。 我强烈推荐他们两个。

Frost 强调了采用有条不紊的方法设计界面的重要性，他指出：

“[我]对我们的界面由什么组成以及我们如何以更有条理的方式构建设计系统感兴趣。
在寻找灵感和相似之处时，我不断地回到化学。 […]所有物质都是由原子组成的。 这些原子单元结合在一起形成分子，这些分子又结合成更复杂的有机体，最终创造出我们宇宙中的所有物质。
同样，接口由较小的组件组​​成。 这意味着我们可以将整个接口分解为基本的构建块并从那里开始工作。 这是原子设计的基本要点。”

— 原子设计，布拉德·弗罗斯特

Frost 的方法建立了五个不同的层次，包括原子设计：原子、分子、有机体、模板和页面。 通过从头开始构建，我们创建了设计的基本构建块，使我们能够构建任何东西。

化学从来都不是我的强项，但本质上是：

1. 原子聚集在一起形成分子；
2. 这些分子结合形成有机体；
3. 然后将这些有机体用作创建（明显是非化学的）模板和页面的基础。

简而言之，我们创建小的界面构建块，然后将它们组合在一起以创建逐渐更复杂的界面元素。 原子设计的好处是您可以通过在粒度级别组合元素然后从这些元素构建来确保一致性。

开始使用 UI 工具包

作为设计师——大部分时间——在网络上工作，我们非常幸运地成为一个社区的一员，这个社区庆祝我们工作的共享方法。 在过去的几年中，我们看到了 UI 工具包（系统设计的用户界面组件集）的爆炸式增长，帮助我们的生活变得更轻松。

当 UI Kit 可以为您节省这些时间和精力时，浪费时间重绘常见的 UI 组件是没有意义的。 设计良好的 UI 套件可以构成数字产品的基石，无论是网站还是应用程序，确保其具有一致的外观和感觉以及视觉识别。

Adobe 与一系列世界知名设计师合作，创造了一些很棒的 Adob​​e XD UI 工具包，非常值得探索。 他们还提供了一些很棒的教程，帮助您开始使用 UI 工具包进行设计，以帮助您快速上手。

除了提供大量免费图标集（由 Lance Wyman、Buro Destruct 和 Anton & Irene 设计）外，他们还创建了一套全面的免费 UI 套件，其中包含适用于 Web 和移动项目的预构建模板。

UI 工具包非常有用，可以通过避免重绘常用元素来为您节省大量时间。 然而，需要注意的是，与任何通用套件一样，存在陷入模板驱动方法的危险，其中一种设计看起来非常像另一种。 使用您的套件作为起点非常重要，您可以在其上叠加创建元素拼贴时建立的外观和感觉。

设计交互和动画

丝网设计和印刷设计之间的关键区别之一是，当我们为丝网设计时，我们是在为流体介质进行设计。 这是交互设计和图形设计之间的关键区别。

作为交互设计师，我们不是在设计页面的静态集合，而是在考虑这些页面以及这些页面中的元素如何交互。 这是一个关键的区别，并且经常被一小部分平面设计师所忽视，他们认为他们的角色只是设计一组页面，然后由“技术人员”传递并“缝合在一起”。

冒着释放“设计师必须编写代码”的风险，这些蠕虫永远抬头，对于在这种媒介中工作的设计师来说，了解这种媒介是如何工作的至关重要。 要真正设计出令人难忘的体验，花一些时间学习动画原理很重要。 值得庆幸的是，像 Adob​​e XD 之类的工具抽象了过去设计沉浸式交互体验时必须处理的大量代码。

在为屏幕（本质上是流体媒体）进行设计时，考虑用户将如何与您正在设计的内容进行交互、考虑如何处理从屏幕到屏幕的转换以及在用户界面组件中提供有价值的反馈至关重要。 我们需要考虑宏观交互（在页面级别）和微观交互（在对象级别）。

从 A 到 B

在我之前的文章中，我探讨了如何使用用户故事开始在高层次上通过您的设计绘制路径。 在这个过程中，我们需要关注用户如何在这些屏幕之间移动，从 A → B → C 遍历。

过去，我们可能只是在几乎没有动画或根本没有动画的屏幕之间移动，受限于我们当时使用的设备。 然而，随着我们台式机和移动设备的处理能力的提高，我们提供的设计更身临其境的体验的机会也越来越多。

当然，我们需要有节制地使用这些新发现的能力，但我们用户可以使用的硬件现在为我们提供了设计令人愉悦的交互的机会。 这就是为什么我们在过去几年中看到对动画的兴趣上升的原因。 作为设计师，我们对可用的工具做出回应； 随着这些工具的发展，我们的设计也必须如此。

在设计屏幕之间的过渡时，我们需要考虑许多因素，包括：

• 用户如何触发转换以从一个页面移动到另一个页面
  通过单击按钮或在屏幕上滑动。

• 我们使用什么样的过渡
  溶解、擦拭、缩放或其他效果。 我们选择的过渡将传达给用户，因此谨慎选择它很重要。

• 过渡持续多长时间
  是快还是慢？

当我们设计从 A → B → C 的旅程时，我们所做的选择（即触发器、过渡和时机）将影响叙事，因此对它们进行一些思考很重要。 与任何旅程一样，如果它是愉快的，它会更顺利地通过。

我们正在设计的内容类型也会影响这些决定。 在某些情况下，我们希望用户通过使用过渡和时间来加快节奏，从而让用户在叙述中更慢一点。 在其他情况下，我们希望通过加快转换来避开阻碍。

当 Apple 首次推出 iBooks 时，它在阅读书籍时的页面转换（“页面卷曲”效果）会减慢阅读速度。 “卷页”乍一看令人愉快，但一旦你看到它数百次——当你只想读一本书时——它变得难以置信地令人沮丧。 每一页翻页所用的微秒加起来都是令人沮丧的体验。

在设计屏幕之间的过渡时，重要的是不要忽视底层功能。 归根结底，我们的目标是取悦我们的用户，而不是让他们失望。

当然，动画可以令人愉快，但如果它以牺牲功能为代价就不会。 Sophie Paxton 在一篇名为“你的 UI 不是迪士尼电影”的优秀文章中写到了这个主题，它强调了如果我们不小心的话，无端动画和过度动画的用户界面会如何让用户感到沮丧。 非常值得一读。

与对象交互

在定义了页面级别的宏交互之后，是时候将注意力转向对象级别的微交互了。

正如我们需要考虑使用户从一个页面到另一个页面的所有因素一样，注意简化用户与页面中特定对象的交互也很重要。 这些可能包括按钮、表单字段和其他元素，其中一些明智的动画可以帮助向我们的用户提供反馈。

提供视觉反馈在用户界面设计中非常重要：它通过提供他们的行为已被确认的信号来让用户的思想休息。 当我在“现实世界”中点击一个电灯开关时，我会通过听到令人满意的点击以及电灯打开或关闭的结果来接收反馈。 这个反馈让我知道发生了什么。

我们可以通过将这些来自现实世界的经验应用到屏幕世界来改进我们的用户界面设计。 一个设计良好的用户界面应该响应用户的行为，让他们知道他们的行为有预期的效果，让他们放心。 这就是动画可以发挥重要作用的地方。

UI Movement 等网站提供了丰富的灵感，展示了应用于用户界面的有效动画示例。 重要的是要考虑您如何提供反馈以及在什么情况下提供反馈，例如：

• 当您要求输入密码时，在用户输入信息时指出密码的强弱是很有帮助的（后来才发现密码太弱是令人沮丧的）。

• 当用户与按钮交互时，它有助于提供反馈，让用户知道他们的操作已被确认。

• 在与日期选择器和日历交互时，提供有用反馈的空间很大。

以上场景只是冰山一角。 任何要求您的用户与页面上的元素交互的地方都是考虑使用动画来提供有用反馈的机会。 当然，正如我上面提到的，您的用户界面不是迪士尼电影，所以不要过火！

最后，值得注意的是，动画并不适合所有人，而且可能——对某些人来说——会引起问题。 对于患有前庭疾病的用户，运动会导致头晕或恶心，因此在使用动画时考虑可访问性很重要。

为用户提供选择可能是一个想法，很高兴看到像 CodePen World's Fair 这样的网站提醒用户注意其动画的使用，并为他们提供继续使用或不使用动画的站点的选择。 很高兴看到这种考虑：为可访问性而喝彩！

结束时

在设计用户界面时，建立一个系统会有所帮助。 这可确保您构建的任何内容都被考虑和一致。 从界面清单开始——尤其是当您作为重新设计的一部分重新访问现有产品时——将帮助您确定界面需要工作的点。 随着时间的推移，不一致会慢慢蔓延是很自然的。 这个工具提供了一种精确定位这些的理想方法。

当需要构建您的界面时，请花一些时间来建立一个经过深思熟虑的设计系统。 这不仅可以确保您的设计是一致的，而且还有助于让您的团队保持在同一页面上，并在一个中心位置为从事该项目的任何自由职业者提供他们需要的所有指导。

最后，重要的是要考虑交互和动画的设计。 作为为屏幕工作的设计师，重要的是我们要考虑我们的设计如何响应用户的交互。 毕竟，我们是为可延展的媒介而设计的，让我们利用这种可延展性来为我们服务吧！ 将以上所有内容结合在一起，您将拥有经得起时间考验的可靠用户界面方法的基础。

推荐阅读

有许多很棒的出版物，无论是离线还是在线，都可以帮助您进行冒险。 我在下面列出了一些内容，以帮助您开始您的旅程。

Alla Kholmatova 写了一本关于设计系统的优秀书籍，我强烈推荐这本书。 它探讨了构建有效的设计系统如何使团队能够创建出色的数字产品。

Brad Frost 详细地撰写了有关进行接口盘点的过程的文章。 他还写了一本非常好的书《原子设计》，它专注于创建有效的界面设计系统。 Frost 是一个聪明的 cookie，我强烈建议为他的博客添加书签。

如果您有兴趣了解有关设计交互和动画的更多信息，我强烈推荐 Val Head 的动画和用户体验资源。 Head 经营研讨会，并拥有出色的电子邮件通讯。

如果网络是您的媒介并且您对动画不熟悉，请放弃所有内容并注册 Donovan Hutchinson 的 CSS 动画课程。 这是一门优秀的课程，哈钦森的教学风格是首屈一指的。

本文是 Adob​​e 赞助的 UX 设计系列的一部分。 Adobe XD 专为快速流畅的 UX 设计流程而设计，因为它可以让您更快地从构思转变为原型。 设计、原型制作和分享——全部在一个应用程序中。 您可以在 Behance 上查看使用 Adob​​e XD 创建的更多鼓舞人心的项目，还可以注册 Adob​​e 体验设计时事通讯，以了解最新的 UX/UI 设计趋势和见解。