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

译者声明：

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

原书 Design Systems 由 Smashing Magazine 出版，作者 Alla Kholmatova。C译版《设计体系》是个人自发项目，并非官方引进版本；译者 C7210，发布于 Beforweb，仅用于知识交流，不涉及任何商业或盈利目的；译文禁止转载，禁止任何以商业或盈利为目的的传播形式。 [原创文章：www.11jj.com]

你可以在 Smashing Magazine 购买到纸质或电子版英文原书。如果你喜欢C译版，可以通过文末的“喜欢作者”为我提供咖啡支援，随缘。

查看关于C译版《设计体系》的更多信息。

Prev：第七章 前期规划与实践起步

第八章 功能性设计模式的体系化

约8060字

本章介绍的实践方法将帮你了解如何从产品目标分析开始对功能性设计模式进行体系化定义。

我生活的地方有个小书店。一进门，你就会看到一排排的书封，有些上面还有手写文字 - 这是来自于真实读者的评语。即便不知道自己想要读什么，你也有可能被这些评语吸引；当你真的产生了兴趣，还可以到店内一个安静的小角落窝在沙发里边喝咖啡边读，买不买都无妨。这个书店的特质就在于"发现"与"阅读"，，售卖反而成为了其次；它所蕴含的模式，包括手写评语、安静的角落、沙发和咖啡桌都体现着其整体特质。

与此相仿，我们在数字化产品当中也会通过设计模式来鼓励和引导用户执行特定的行为。想想看 Slack 是如何实现的那些沟通效率远超邮件与 IM 软件的协作方式的，又或是 Tinder 是如何通过轻扫手势来鼓励随机的、无承诺的社交关系的。或许很多产品是都围绕着相似的用户目标及需求来设计的，但它们藉由设计模式来鼓励的行为却可能存在着很大差异。因此，当我们在思考模式与产品目标及设计意图之间的关联时，必须要考虑到特定的产品所鼓励的关键行为是怎样的。

设计意图可以通过诸多方式体现，包括实体与环境（书店）、语音朗读等等，而不局限于可视化的操作界面。可以清晰体现关键行为的设计模式更具健壮性和持久性。

目标导向的界面清查

界面清查是体系化定义工作的起点，大致包括界面元素的汇总及分组归类等典型步骤。

概念很简单，但实际执行方式却多种多样。很多团队会聚焦于视觉一致性的角度，将元素按照类型分组，尝试发现冗余样式；而本章介绍的方法旨在对设计模式的本质进行定义，使团队对于设计模式的运用方式产生共识。

完成界面清查之后，你将得到一份清单，为你指出有哪些元素需要进行标准化重构或是值得关注；此外你还能通过草图将接下来定义具体设计模式的方式梳理清楚。

我们会从"目标"（行为）的维度对界面元素进行归类，而非按照元素类型（按钮、tab、下拉菜单）进行分组。

因为我们更希望首先理解设计模式的目标及运用方式，而非它们是否应该拥有相同的外观。我们需要首先理解何时使用特定类型的按钮，何时应该使用链接而非按钮，何时避免使用按钮而引导用户直接与内容对象进行交互。当然，在整个过程中，我们也不会忽略一致性的改进，只是关注的重点需要明确。

界面清查的准备工作

时机

在界面清查之前，团队对于现有产品应该进行过必要的用户体验研究工作，包括内容策略、信息架构、可用性等方面，确保现有的设计当中没有本质性的缺陷或明显的可用性问题，避免设计体系相关工作被历史的或现有的重大问题影响。同理，如果你们的产品将要进行大规模的改版，那么前期的目标与方向探索工作也要先于界面清查来进行。

团队

团队初期的规模控制在4到8人会比较理想。人员构成包括设计师与前端工程师；如果有后端开发人员、内容生产者或产品经理能够参与则更加理想。如果原本规模较大的团队需要继续扩张，同样可以考虑来自不同职能部门的新鲜力量。

打印页面

识别产品核心行为路径所涉及到的那些关键页面，那些对于产品来说绝对需要、无可替代的页面；具体数量取决于不同类型的产品，通常10到12个即可，有时甚至更少。你可以使用 mock-up，或是在现有产品页面里截图。

假设你们正在为公共图书馆设计网站，其目标是扩展实体图书馆的体验，譬如通过提供在线预约功能来避免排队和资料填写等繁琐流程。与该目标最为相关的页面所涵盖到的关键行为大致包括查找特定的图书、发现新书、预约、下载相关资料等等。当然，一个图书馆网站通常还会包括其他一些内容，譬如展会或活动信息、会员体系、线上收藏等等。对于这些关键路径以外的页面，我们可以记录下来，但无需囊括到初期的页面清查工作当中。

接下来每个页面打印一式两份，其中一张贴在墙上，用于演示用户历程；另外一张用来裁剪组件并归类粘贴。在界面清查期间，我们时常需要在整体与局部之间切换视野；而两份打印稿可以帮助我们同时关注到这两方面，在思考特定模式的时候不会失去页面情境感。

当然，期间你还需要剪刀、记号笔、便利贴等工具，以及足够大的墙面与工作台。

第一步：识别关键行为

首先，我们需要从用户历程的每个阶段当中识别出最为关键的用户需求与对应的行为。对于仅由少量页面构成的小 app 来说，你可以聚焦于每个界面，包括其可能拥有的各种状态；而对于较大的产品，我们需要首先将界面按照用户历程的不同阶段进行分组。

回到公众图书馆的例子，我们可能要基于下述关键行为将页面分组：