《设计体系》第八章 功能性设计模式的体系化(6)

图片

[转载出处：www.11jj.com]

图标 [原文来自：www.11jj.com]

如果某些元素有着类似的设计目标，那么可以试着将它们归为一类，而非单独定义。按钮与链接，tab 导航与列表菜单，下拉菜单与一系列按钮，复选框与切换按钮，这些元素之间有着怎样的本质区别？目标是否一致？

以按钮与链接为例，我们可以从以下几个方面来判断这些元素的异同：

行为一致性

在较为传统的网页设计开发当中，链接和按钮通常有着明显的区别。链接用来将用户导航至另外一个页面，而按钮通常用来提交用户行为或是触发当前页面中的某些状态变化。但在实际当中，这些还不足以成为设计决策的依据。

试想书籍信息模块当中包含一个"查看详情"按钮，点击之后，该模块会展开，进而呈现出更多的详细信息。如果这些详细信息位于另一个单独的页面，而非隐藏在当前模块当中，那这是否意味着"查看详情"应该以链接而非按钮的形式来呈现呢？

造成困惑的本质原因在于概念的定义。有些人（很多时候特指工程师）习惯于将按钮定义为"用于提交数据的触发元素"，因此不会考虑将其用于这种定义之外的行为，他们也不会将拥有按钮样式的链接元素看作真正的按钮。而另一些人（很多时候特指设计师）会将按钮视为特定而独立的行为召唤元素，无论其实现代码究竟是按钮元素还是链接元素。

不同的设计体系对于这两类元素的定义方式也有所差异。在 IBM 的 Carbon 体系中，链接被定义为一种导航元素，而按钮仅用于那些涉及到数据变化的行为。而在 Shopify 的 Polaris 体系中，按钮可以被用于任何行为，包括导航；而链接可以被用于导航，也可以用于局部的、内嵌式的功能行为。

在我看来，无论如何定义，最关键的还是在于清晰一致的诠释方式。用户在使用界面时需要对元素的功能及行为结果产生正确而一致的预期。如果你们始终通过按钮来实现数据提交方面的功能，那么一旦某个按钮突然开始拥有链接元素的行为特征，用户的预期便会被打破，心智模型开始失效。

为避免对于元素的误解和误用，团队内部对于其定义和目标必须达成一致。"按钮"和"链接"对于你的团队而言意味着什么？在使用方式上是否有着最基本的定义？

Heydon Pickering 在其 Inclusive Design Patterns 一书当中所进行的描述是我所见过的最为简单有效的。他认为真正的区别存在于链接与行为召唤之间，而非链接与"按钮"之间。一个重要的功能行为可以通过"按钮"的形式来体现，无论其在实际代码中究竟是"链接"还是"按钮"；而我们更需要关注的是这个元素是否具备行为召唤的特质，还是在于将用户带离当前页面。

关于"行为召唤按钮"、"行为召唤链接"和"链接"的分级定义。细节中的样式差异也体现出了"行为召唤按钮"与"行为召唤链接"在交互方式上的区别。

如果行为作用于当前页面，则使用"行为召唤按钮"；如果行为会将用户带离当前页面，则使用"行为召唤链接"。而普通链接可以承载更多的上下文信息，通常会嵌入在标题、正文内容或图片当中。

如此精准的定义方式还有助于在保持行为召唤呈现力度的同时保持代码的精简可读。

视觉层级

很多界面中的主要（Primary）按钮和次级（Secondary）按钮都有着相似的样式。所谓"主要"，其作用范围究竟是怎样的？是指整个产品，还是特定的页面或某个局部区域？对于图书馆网站来说，"预约借阅"是整个产品当中最为关键的功能之一，那么它是否应该通过全局范围内最为强化的样式进行呈现？

在 Marvel 的设计体系当中，"扁平"按钮用于承载"必要的或强制性的行为"，"线框"按钮用于承载"可选的、低频的或次要的行为"。如果多个行为拥有相同的权重，那么扁平按钮可以同时使用多个。我个人很喜欢这样的定义，因为它简洁、清晰，且对元素的使用方式有着明确的规范。

但对于更加复杂的页面来说，通常会有更多种类的按钮；要对每一种的功能用途进行精准区分也非易事，你需要更加关注于它们在组合运用状态下彼此之间的关联。在 Atlassian 和 Shopify 的设计体系当中，"主要"按钮代表着"任何功能流程当中最为重要的行为"，因此每个页面最多只能出现一个。

他们都提供了一种"基本"按钮用作默认情况。除了"主要"按钮和"基本"按钮以外，其他所有类型的按钮都只能在"需要承载特定重要度的功能"时才可使用。换个角度来诠释，假想界面由语音朗读出来，那么哪一个功能需要被首先读出（默认）？哪一个功能需要被特别大声地读出（主要）？哪些功能需要朗读者变换语调来读出（其他）？

特例

在通用原则以外，总会有特例出现。譬如在图书馆网站中，“预约按钮”的样式不应局限于一种。与其他功能不同，它会包含一些特定的状态，例如在操作之后变为“取消预约”。

FutureLearn的“进度切换按钮”则是命名方面的特例体现。用户完成了一个单元的学习之后，点击该按钮，接下来便会有弹跳动效和对勾图标出现，按钮变为“完成”状态，标志着课程单元的结束。这个按钮仅被用于课程完成度相关的情境，本该在命名中体现出更高的特定化程度。

然而我们当时更希望给到它一个足够通用的名称，例如“进度切换按钮”；虽然从命名原则上来讲，它本可以更具功能传达性，例如“标记完成”其实是更为恰当和更易记忆的名称。

类似这样的特例应该保持其偶然性，一方面可以体现其在整体环境中的差异性，一方面也可以避免通用性的模式受到破坏。

小结