第一部分 基础

第1章 设计体系

在Web领域的社区里，“设计体系”（design system）一词没有标准的定义，人们以不同的方式使用该术语。在这一章里，我们将讨论设计体系的定义及其构成。

设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。模式指的是界面中那些重复的要素：用户流程、交互方式、按钮、文本框、图标、配色、排版、文案，等等。实践则是我们如何创建、捕获、共享和使用这些模式，尤其是在团队协作时做这些事情的方法。

让我们来看两个毫无关联的产品的界面。一个是汤森路透的交易与市场分析工具Eikon，一个是互联网教育与学习平台FutureLearn（见图1-1）。

这两个案例展现了如何选用不同的模式以实现不同的目的。对于汤森路透来说，目的是实现数据处理、工具构建、快速扫描及多任务处理；对于FutureLearn来说，目的是实现深度阅读、非正式学习、反思，以及连接志同道合的人。产品的目的决定了它所采用的设计模式。

汤森路透产品的布局是以面板和小部件为基础的，这样做会方便用户进行多任务处理。这个设计很密集，整个界面承载了很多信息。它使用了紧密的间距、紧凑的控件、灵活的布局和排版方式（例如使用窄体字体和相对较小的标题）。

相比之下，FutureLearn的布局则宽松得多。每个界面通常只对应一个任务，例如阅读一篇文章、参与一项讨论，抑或是完成一次互动练习。在这里，布局大多是一列的，排版上则通常使用对比强烈的风格，如大大的标题、厚实的控件及宽大的留白。

设计模式的选择受很多因素的影响。首先，产品所属的领域及其核心功能影响了功能性模式（functional pattern）。例如，为了使用交易和市场分析软件，用户需要熟练掌握任务栏、数据字段和网格、图表等数据可视化工具。对于在线学习网站，其核心功能是文章、视频、讨论话题、进度条、互动活动等。而对于电子商务网站，其核心功能则很可能是产品展示、筛选器、购物车和结账模块等。

其次，产品的精神（或者品牌——取决于你对品牌的定义）也形成了塑造产品调性的模式，本书中我把它们称作感知性模式（perceptual pattern）。这种模式包括文案语气、排版、配色、图标样式、间距与布局、特定的形状、交互、动画和声音等（见图1-2）。如果忽略感知性模式，相同领域的产品就不会有什么差异，因为它们的功能都是相似的。

此外，模式还会受平台的惯例影响。例如，一种平台特有的设计语言可能会决定其产品看起来更像Web产品还是更像App。又如，一个产品的iOS版可能跟其Android版的感觉完全不同。

创建数字产品时，通常有各种各样的模式在发挥作用。这就是设计难做的原因。不同的模式需要相互联系，并能无缝地衔接在一起。下面就来详细地谈谈模式。