因为工内容，最近2年一直在探索何打造一个高度灵活的设计规范系，在能够持自身设计积累的基础之上，也能够合项目需要快速的产出高质量的定化付件。偶之间看到书，看之感很有启，就用业余的时间翻译成中文，希望对大家有帮助。
一、简介
1. 本书的内容
随着互联网快速发展并变越来越复杂，将网站设计看作成静态页合度已经变站不住脚了，很多设计师已经开始以更系统化来思考如何设计。
而，并非所有的设计系统都样有效。有些可以带来流畅用户体验，另一些则是胡乱拼凑的设计。有些设计系统够激励团队持续善，另一些则会被忽视掉。有些设计系统会随着时间的推移而变得更好，更有凝聚和行良好；另一些则会变得更糟和臃肿。
个运作良好、经久不衰设计系统关键品质是什么？这个问题引起了我极大兴趣，我花了大量时研究和思考这个问题。我研究和思想结论为这本书奠定了基础。根据不规模公司经验和设计系统经验，我尝试探索能够创造个高效设计系统关键素，从而增强团队有能力创造出伟大数品。在本书，我将分享我工作些法。我希望这些法也能够你工作有帮助。
2. 本书的目标人群
本书主要于尝试将设计系统思想合到他们组织文化小型品团队。品团队个都可从书受益，尤其是视觉和交互设计师、用户体验从业者和前端开发员。
3. 本书的讨论范围
本书阐述了以我做为名交互和视觉设计师经历提出设计系统观。我不涉及其他相关领域，如信息架构、内容策略或设计研究。样，这不是本技术书。尽管会有大量与前端实践接相关讨论，你不会看到任何代码示例或开发工具和技术深入分析。
是一设计书，但不是要讲述设计什么。它也不是试图创建一个设计数字产品的面指。1它是关何以更加系统化的方式处理设计程，并确你的设计系统有助现你的产品目的的同时符合你的团的文化。
4. 本书的内容结构
书包含两部分。
一部分：基础
在一部分中，我们将讨论设计系统的基础——patterns 和 practices（做法）。设计模式是界面的重复的、重用的部分，从具和功能（按钮和文字段）到表述更强的部分（图像样式、颜和版式）。模式是相互关联的，它们共同构成产品界面的语言。Shared practices（做法）是我们通遵循一组准则，或者持模式库，指导何创造、获取、共享和应用 patterns。
二部分：程
设计系统不能一夜之间就建立来，它随着你的产品而逐渐展。但是，我们以遵循某原则和做法，以确设计系统朝着正确的方向展，并为我们提供对设计系统在一定程度上的把控能力。书的二部分重点介绍建立和护设计系统的所需要的具步骤和技术，包括： 安排工计划；梳理界面清单；建立 pattern library 模式库；创建、录、优化和护设计模式。
5. 术语
在我们深讨论个主题之前，让我们先确定我们将在整书中使用的术语。
模式或设计模式
我使用 pattern 个词来指界面中任何重复的、重用的部分（例按钮、文字段、图标样式、颜和版式、重复用户流程、互行为），pattern 以被应用和修改用途来决特定的设计问题，满用户的需求，或者唤用户的情感。在整书中，我将 pattern 分为与行为相关的功能模式 functional patterns，以及与品牌和美学相关的感模式 perceptual patterns。
功能模式或模块
两个术语在整书中以互换使用，指用构成用户页面整的具单元，例按钮、标题、表单元素、菜单。
感模式或风
是描述强而不太具的设计模式，通常用强某种审美风和增强与产品的情感关联。例，图标样式或颜以及版式。
模式语言或设计语言
一套相互关联、共享的设计模式构成产品界面的语言。模式语言结合功能模式和感模式，同时包含具有平台特征的模式（比汉堡包菜单）、行业领域模式（比电子务网站、金融软件或应用程序的特定模块）、UX（用户验）和 引导模式（persuasive patterns），以及其他众影响元素结合在一产品的用户界面中。
设计系统或系统
目前在互联网领域中还没有「设计系统」的标准定义，人们对该术语有种不同的理——有时与「样式指」和「模式库」互换使用。在书中，设计系统指的是一套关联的模式 connected patterns 和共享的做法 practices，一致地组织来，为数字产品的目的服务。
模式库和样式指
模式库是能够按照设计模式和使用指的用将其获取、收集和共享的工具。创建模式库是（良）设计做法 design parctice 的案例。传统的理上，样式指重样式风，例图标样式、颜和版式，而模式库包含更类型的模式集。
设计系统洞察力
书是以现世界的产品的际见为基础的。其中的大数产品是从我在 FutureLearn 工的经历中获得的，FutureLearn 是英国的一家中等规模的从开放式教育司。我在司的三年中从设计师的位，从而有机观察和打造一个设计系统是何从最初的概念展到一个成熟的系统。
了能够设系统方面深度多样性研究，我还密切关注了其他五家不同规模采用不同设方法的公司：Airbnb、Atlassian、Eurostar、Sipgate TED。过去的18月里，我一直采访他们的团队员，从直观的理解这些团队随系统的发展所面临的挑战。以下愿意分享他们对设系统方面见解的公司。
- Airbnb：在2016的采访中，RoyStanfield（首席互设计师）给我很关 Airbnb 的 Design Language System 的细节。DLS 的亮点在严密， patterns 的定义和用法明确，使用规则（rules）需要严遵循。为现一目标该小组采用需求 practices 工具。他们在采用新模式、整合新模式 patterns 的速度以及持艺术方向与工程同步方面仍有一挑战。
- Atlassian：2016的11月份 Jürgen Spangl（设主），James Bryant（首席设师） Kevin Coffey（设理）分享了他们对 ADG（Atlassian Design Guidelines）观点。虽然一专门负责理 patterns 的团队，但他们也提供了一可以共同打造的源模型。公司里的每人不仅被允许能看到，且公司积极鼓励家这系统出贡献。这模型的挑战给人们提供足够的贡献自由度的同时，确保设系统保持可理策划之间找到平衡。
- Eurostar：2016年的8月和9月以及2017年3月，Dan Jackson（解决方案架构）非常坦诚的交流了在 Eurostar 所做的事情。在撰写本书，队正在构建的第一个模式库。最初遇了一些挑战，别是在确定项目的优先次序和鼓励队中的每个人做出贡献方面。一年后，获得了配一个专门组的资源，该组目前正在负责该系统的工作。
- Sipgate：2016年8月份和11月份的交流中，Tobias Ritterbach（经验有者）和 Mathias Wegener（络开发工程师）都给了我很多于他们在的工作中的见解。sipgate 模式库建立于2015年，但一年之后，团队发现由于产团队之间缺乏沟通而导致入了太多的组件。最，他们正在开发一个的模式库，实现在多个产上统一设计语言的目标。
- TED：2016年8月和9月，Michael McWatters（UX架构师）、Aaron Weyenberg（UX主管）和 Joe Bartlett（前端开发员）在讨论发表了意见。在众多支持 TED.com，设计系统是由几个UX设计师和前端开发员组成小团队负责。团队他们 patterns 理解有着深刻共识，这些模 patterns 以简单理出来。到目前为止，他们没有觉有必要立个全模库。
二、设计系统
在网络社中，「计系统」没有一个标准的定义，人以不同的方式使用这个术语。在本章中，将定义什是计系统以及它由什组成。
设计系统是一组相互联的模式和共享的做法 practices，它们一致的方式组织起来，为数字产的目的务。模式是我们为创建户界面而重复组合的元素：诸如户流程、交互方式、按钮、本字、图标、颜色、版式、显微拷贝。实践是我们如何择创建、获取、共享和使这些模式，这一点在团队协作中尤为重要。
看看这两个相产的截图。一个来自 Thomson Reuters 于交易和场分析的名为 Eikon 应程序；另一个来自开放式社交习 FutureLearn。
△ 左边是Thomson Reuters的 Eikon，右边是FutureLearn
在个示例，这些模起工作以实现不用途。于 Thomson Reuters，它目是数据处理、实用、快速扫描和多任务处理；于 FutureLearn，它目是让用户深思熟虑阅读、正学习、反思以及以及结识志合。品用途决定了它所采用设计模。
Thomson Reuters 的局是基面板和挂件，允许用户执行任务。紧凑的设计，以适合展示大量的信息在屏幕上。密度是通选择狭小的间距、紧凑的控方式、灵活的局和排版，例更小字和相对小的标题。而与之相反，FutureLearn 的局要宽敞得。每个屏幕通常集中在一个任务上，例阅读文章、参与讨论或完成互动练习。页面的局大是单列，有高对比度的排版：包含大个头的标题，粗大的控件，以及大量的留白空间。
设模式的选择受多种因素的影响。其中一些自产品所属的领域，以及其核功能：功能模式。例如，使用交易市场分析软件，您需习惯任务栏、数据字段网格、图表数据可视化具。对于线学习网站，可以文章、视频、讨论区、度指标互动活动。一电子商务网站很可能包括一产品展示，列表筛选，购车购结算。
产品的道德观（或品牌，取决于你对品牌的定义）也形成了模式，这些模式共同塑造了一个产品是如何被知的；在本书中，将把它称为知模式 perceptual。指的是声音的声调，排版和颜色的选择，图标的式，间距和布局，指定的形状，交互方式，动效和声效。去除知模式，你觉不出同类型、功能相似的产品之间有什差异 。
尽管 HipChat 和 Slack 有着相似的用途和功能，但它觉不一，主要是源于产品界面中传达了品牌的形象 。
模式还受平台共识的影响。由于特定于平台的设计语言，产需要有明显的 web 的样子或 app 的样子。例如 iOS平台的产的与 Android 在操作方式和使感受上会有很大的差异。
在创造数品时，是由很多模共影响 。这是为什么设计起来很难。模需要互动、相连时，仍然可以缝地起工作。让我们深入研究下。
1. Design Patterns
设计模概念是筑师克里托弗·亚历山大（Christopher Alexander）在他开创性著作「永恒筑以及设计模」（The Time Way Of Build And A Pattern Language）提出。贯穿全书个问题是为什么有些地感觉如此生勃勃并感觉很棒，而有些地却感到沉闷和死沉沉。亚历山大认为，地和筑带我们感觉不仅仅是为主观情绪。时是某些有形和特定模结。即使是普也可以借鉴和使用它们来创造性化筑。
模式是一种重复使用的决方案，并且应用决设计问题。
Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem.（每个模式描述在我们的境中反复出现的问题，描述该问题核心决方案。）——Christopher Alexander，《A Pattern Language》
模式语言包含253种建筑设计模式，大到市的局和道路系统，小到民居室内的光和家具。
同样，新建页面时，我们使用设模式解决常见问题：我们使用选项卡将内分几部分，并指出当选择了哪选项；我们使用下拉列表显示的选项列表响应用户的请求。
△ 图例Bootstrap的模式，Bootstrap一响应式的端发框架
使用模式来提供反馈， 展示流程中还剩多少步，允许人其人互动，查和选择项目。计模式可以激发和鼓励用户，使任更容易，创造一种成就或足用户的控制。
△ 在UI Patterns上的一个棒的案例「recognition over recall」
很多已成和熟悉的设计模式 。它们利人们的心模，使设计够直观地被解。那些要求户首先接受然后通过习才够使的模式是很的。使产有别于竞争对手的是它使的模式的颖性，而是这些模式是如何执行和应的，及它们如何相互联达到设计目的。一套相互联的模式构成了产界面的设计语言。
我们开发个品时候，会随生设计语言。我们并不是指导设计语言是什么。有时候，有效而有趣设计是立在觉基础上，我们很难准确地阐明它们是如何工作，以及为什么会起作用。设计师和开发员可能本能地知这，觉并不是可靠或发散。设计师 Dan Mall 在他文章「设计系统研究」指出，设计系统主要目标是「拓展创意」。如你需要让群始终如地、可靠地、连贯地遵循个创意，那么需要把模理出来并团队共享。
当你清晰地表达出你的设计语言时，它就具有操和重复。你开始接近带着系统思做设计的阶段。例，与其讨论以做整从而能够让一个选项更加突出 ，你以使用一组不同等级视冲击力的促销模块。汤姆奥斯（Tom Osborne）的视响度指（visual loudness guide）是一个何系统地处理按钮和链接的例子。它们不是单独列出，而是为一个套件呈现，并且根据每个元素的视冲击力相应的拥有一个「响度」值。
△ 汤姆奥斯（Tom Osborne）的视响度指（The visual loudness guide）
当表达的设语言时，需拥对设系统多的控制权利。可以用深刻的方式影响它，不一些小的调整。如果您发了设的微调会对用户体验产积极影响，那么不仅可以应用这里，可以将其应用于整系统的模式中。与其花几小时设一下拉列表，可以花时间与用户领域专家一起，首明确的系统中否需一下拉单。当设语言共享知识时，您可以不再关注模式本身，多关注用户。
在整本书中，将讨论多关于数字产品的模式语言的表达、共享和文档化。因此，将研究种计模式：功能部和情部。功能模式体表现为用户界面中体的模块，例如按钮、标题、表素、菜。情模式是一种展现和传达产品个性风格的视觉表达方式，如颜色和版式、图标、形状和动画。
参照语言的语法，功模式有点像名词或词——它们是界面的具体的、可操作的分；而情感模式类似于形容词——它们是描述性的。例如，按钮是具有明确功的模，允许户交操作。但是按钮标签中的版样式、它的形状、背景色、边距、交互状态和效都是属于样式的范畴，而是模；它们描述按钮长么样子。从前端的角来看，模总是基于 HTML语言，感知模式通是 CSS属性。
设计系统含许多其他类型模：用户流（例如表单提交流程，其含了误和成功消息状态页）、领域设计模（比如 EdTech系统学习模和电子商务模和引导用户体验模）。这本书是功能模和情感模，功能模和情感模是设计系统核心组成部分。
当，重点不只是模式身，而是它们是何进化、共享、相互关联和使用的。
2. 共享语言
共享语言是协的基础。果你在团中工，你的设计语言需要分享给其他参与产品设计的人。没有共享语言的，大家就不能有效地在一协——因为每个人对他们想要达到的目标有不同的思模式。让我们回到按钮里案例。即使是界面中样一个基的组件也能有不同的理。按钮到底是什么？是一个以点击的框区域吗？页面上以链接到某个地方的互元素？允许用户将表单数据提的元素？
AbbyCovert 她的书「理清乱麻」（How to Make Sense of Any Mess）中建议，考虑界面设之，首先应该先建立一种共享语言，共享语言通过讨论、审查记录我们的语言决策逐建立的。这法既可以用描述高层次的概念，也可以用于日常谈论设决策的语言。拥共享语言意我们相同的方法命界面元素义设模式，或者设文件端架构中使用相同的称。
即使这也可能不够。有，一个群体中的人认拥有相同的词并表达性地使用就算是达成了共识。但在理解上仍然保持着根本的差异。例如，在项目中使用「景（Scenario）」这个术语一年后，您可能会发现不同的人以完全不同的方式解释它。这不仅是为了需要共享语言——还需要发展一套共享语言的使用方法。仅仅对按钮达成一个共识是不够的。人还必须知道为什用按钮以及如何使用按钮，在什情况下需要一个按钮，以及需要按钮达成什目的而服。
假设我们在界面中使一个名为「Sequence」的元素。通过将表示为「序列」，我们的目标是向户传达使的步骤应该按照怎样的特定的顺序来查看。
△「Sequence」模举例
理想情况下，参与品研发个都应该知这个元素是什么：它名称和用途，为什么这样设计，以及如何和何时使用它。这共享知识越强，正确使用元素会越大。设计师和前端开发员应该拥有这些知识，也会其他岗位（内容、销、品管理）并有些想法有所帮助。
每个人应该道个元素的名字叫「序列」，而不是「向导控」或「幻想泡泡」。果设计人将其称为「花哨泡沫」，开人将其称为「向导控件」，并且用户将其释为一组选选项卡，么你意识到您的语言失效。为什么用户说明很重要？我们以一回忆下唐·诺曼的开创工——「常物的品（The Design of Everyday Things）」，他在书中谈到系统映像（界面）和用户模型（用户通与界面互形成的对界面的感）之间的鸿沟。果用户的互心理模型不符合设计团提供的系统映像，系统的通出乎意料的行为不断的挑战用户。有效的设计语言则以在系统映像和（假设的）用户模型之间的搭建一座沟通的桥梁。
随您的语言变得加丰富复杂，您需一种效的方法捕获共享它。当今的网络，模式库支持设系统的良好实践的关键示例之一。
三、设计系统
1. 模式库及其局限性
设计系统不仅包括模式，而且包括创建、捕获、共享和展模式的技术和践。模式库是收集、存储和共享设计模式的工具，以及何使用它们的原则和指。虽最近将模式库到网络上是主流方式，但以各种形式文档以及种形式的共享设计模式已经存在很长一段时间。
帕拉迪奥（Palladio）的「建筑四书」（ The Four Books of Architecture）于1570威尼斯出版，重影响力的建筑书籍之一。它也早的系统文档示例之一。帕拉迪奥从古罗马建筑中汲取灵感，并提出了设建造建筑的规则词汇，包含了原则模式，并详细明解释了它们如何作的。
梯类型：螺旋梯、椭圆形梯直道梯。帕拉迪奥描述了如何何时使用每种类型，例如，螺旋梯用于「非常限的置，因他们占用的空间比直梯少，但难去。」
在现代面计中，从早期的排版和网格系统包豪斯计则，计系统也存在了长的间了。在过去的十年，公以品牌册的形式记录了的视觉身，于1975年发布的「美国宇航局图形标准册」就是其中一个比较著名的例。
△ 美国宇航局图形标准册中指导则
在络上，模式库最初是扩展的牌标识档，侧重于标志处、企值和牌格，如版式和色规范。然后扩展到包括户界面，及使指南。Yahoo 的模式库是早期界面模式的案例之一。
△ Yahoo的模式库
于不像雅虎那样有足够资公司来说，模库常会使用 PDF 或 wiki，这意味着它是静态，很难跟上时代发展。今许多设计师和开发员愿望是立让设计模更动态或「实时」模库，以及用于生成模库实时代码。是实时风格指南或模库，而不仅仅是个参考文档——它是用于为数品创界可靠工作模。
△ MailChimp是网络上早期动态模库案例
2. 模式库的局限性
模库有时被认为可以与设计系统互换。即使是最全、最有生命力模库也不是系统本身。模库是个有助于使设计系统更有效工具。
模式库不能证更有凝聚力和一致的设计。它能有助纠正小的不一致或使代码库更加健壮，但仅凭一个工具将对用户验几乎没有影响。没有模式库以修复糟糕的设计。即使有模式仍能被设计得很糟糕，被误用或者以一种和整不一致的方式组合在一。正 TED 的 UX架构师 MichaelMcWatters 在一次采访中指出的样：「即使是 SquareSpace 模板也能被草率的设计思想所破坏。」相反，即使没有完整的模式库，也以创建具有一致用户验的产品（我们将在TED设计系统示例中的6章中看到一点）。
一实时的模式库与好的协作关。然，您可能终会遇到这样一种况，即只一小部分人使用它，或者由于团队之间缺乏沟通，可能会太多的关联模式。当新时，模式库共享语言的语表。但这并不意解释的余。围绕解释的讨论通常模式库败的关键。
另一方面，模式库有被指责为扼杀创造力，导致网站起来相似。但是，模式库反映了它背后的计系统。如果您的系统从根本上是严格限制的，模式库可以展示和调刚性。如果它允许大量的创造性实验，一个好的模式库可以使实验更容易展开。
现在可到越来越多的自工具和样式指南生成器，因此可过更快地建立一个组件库。但是，如果没有一个将模式和实践结合在一起的一致设计系统的基础，影响将是有限的。当使模式库来是由基于善的设计语言基础时，它就成为一个强大的设计和协作工具。在此之前，它将是一个页上的模集合。
3. 怎样才能形成一个有效的设计体系？
设计系统的有效性可通过同环节的协同工作，帮助实现产的目的的顺畅程来衡量。例如，「FutureLearn」的目的是「激励每个人可随时随地的终身习」。我们可问，界面的设计语言如何有效地帮助我们实现这一点，及团队的实践有多有效？如果界面令人困惑，人们没有实现他们的目标，那么设计语言就没有效果。如果由于每次必须从头开始创建模式而需要太长的时间来构建点的区域，那么我们知道我们的可通过实践改进。当设计系统将设计过程中的成本效益与户体验相对于产目的的效率和满意结合起来时，就可认为是有效的。
4. 共同目的
在「系统中的思考（Thinking in System）」一书中，DonellaMeadors 解释说，系统具有的最重要的特性之一是它们是如何连接和组织的：子系统被聚合成更大的系统，而这些系统又构成了更大的系统的一分。细胞是肝脏的一分，而肝脏又是构成器官的一分，器官又是构成整个你身体的一分。没有一个系统是孤立存在的。您的设计系统可包含一个较小的子系统：控制页面布的编辑规则；或者，在某些缩放 logo 的制定方法。同时，它是可是更大系统的一分：您的产、您的团队、您的公司。
△ 美国惠特尼艺术博物馆的标志，一个「态W」，是在设计系统中的一个简单但有标志性的适应性系统。W 应周围的艺术和字，允许一个巨大范围的灵布的可性。
在高效系统，我们看到子系统是连接在起并朝着个共目标：设计法反映在前端体系结构；设计模遵循指导原则；模语言在设计、代码和模库是致。我们从这些系统运作看到了和谐：它们工作流程更有效率，它们生用户体验也更有意义和连贯。
5. 发现问题
裂痕是很容易看到。个支离破碎设计系统导致了个支离破碎用户体验，充满了相互矛盾信息。我们希望注册账号来订阅资讯，我们也想让用户体验我们最新品。我们希望他们过这些步骤取进步，我们也需要确保他们个知识进打分。「Sequence」用于在页个区域内浏览步骤内容；在另个页，它突然变成个选项卡导航。该界充满了各相颜色阴影和按钮多个版本。团队生力也受到了影响：为代码乱团糟，改动个细节费时费力不讨好。设计师们把时花在为相问题提供调页改解决案，而不是理解和解决真正用户需求。
我们何消除裂痕，使我们的设计系统更有效呢？通理设计系统是什么以及它是何工的。我们将首先从在新产品中设计语言是何演变的。下面以一个虚构的分钟食谱网站为例。
案例，一个分钟的菜谱网站
想象一下，我们正在创建一个网站，与喜欢健食品但又不想花很时间做饭的人分享食谱。在开始提前准备系统思以及定义设计模式，我们从哪里开始呢？在我们开始之前，让我们先做一假设。我们对烹饪的领域有所，并且已经做够的研究来指导我们的设计决策。所以我们想做的不是找出经验应该是什么，而是看看我们何为个新的网站建立设计系统。
6. 目的和价值
我们首先要做的情之一就是试图我们的用户是谁，他们的目标、需求和动机。从简见，我们定义他们是忙碌的业人士，他们的目标是得到一个美味，健的膳食，但又怕烦以及太花费时间做饭。我们有很方法以帮助他们现个目标：把他们和厨师对接来，把食物送到他们家门口，建立一个流工具。但是我们想通一个分钟食谱的网站来做到一点。
如果我们用一句话表达这一目的，就应该这样的：激励让人们能力10分钟内就能出的健康食品。这目标产品的核，它应该设发决策提供信息。团队应该主动意识到并相信到这目标，不应该强迫接受。
另一个重要的因素是，图通过网站描绘的价值观和神想传递出来的价值观。对来说，它可以是简的康食品和用常见的食材就可以尝一下。而其烹饪网站，是高烹饪和掌握烹饪能。
7. 设计原则
为了确保所做的每一件事都清楚地表达了产品的目的，需要建立一些基本则和价值观。可能会被非正式地讨论或写成宣言——重要的是，参产品开发的人认同这些价值观，并致力于这些价值观。
例如，每个人在10分钟烹饪食谱团队解时间的值。驱他们的是有时间限制的食谱，因此，他们都努使上的交互方式快捷，简单，快速和顺畅。这一原则仅体现在设计模式上，而且还体现在点的性、语音的声调，甚至团队的作方式表达上。
这些原则可能不定是官，甚至不定写下来。是，团队需要成致共识是保持个努力和优先事项保持步是关键所在。它可以帮助决策：从哪个特性首先构和使用哪法，输出用户体验流程，或者按钮应该是什么样子，以及体选择。
8. 行为和功能模式
我们会找出能够鼓励或有助于我们用户些关键操作，以帮助他们实现他们目标。
- 我们希望人们总是择健康的庭烹饪食物，而是快或微波食。这意味着我们的饭菜需要微波食物看起来美味、健康和诱人。非上镜而且很美味，但看起来很容易做的的食物有助于实现这一目标。
- 我们希望们能在十分钟内能取作出好作品。这意味着我们需要在简单几步将谱展示完毕。这些步骤应简短、明确和突出。也许我们可以在步上都有个计时，以确保我们遵守十分钟承诺。
- 我们希望鼓励人们随心所欲，让,他们感他们以随时就以开始。从开始你已经拥有所有的资料，而不是需要你去买昂贵的料才能开始。就用户界面而言，以轻松勾选带有略缩图并且成分标签达到一点。
- 后，我们希望鼓励人们具创造性自发性，并享受乐趣。显示哪些分可选的，哪些分可以被替换。展示令人意不到的组合并让人么乐于试。
当，随之网站的进展，设计细节也生变化，但是关键的行为将持不变。行为现在核心功能模块和网站的互方式上：成分缩略图，食谱卡，步骤序列，计时器。
9. 美学与知觉模式
大约在同一时间，我们需要清楚希望使用分钟烹饪食谱网站的人感到什么。给人感简单而朴的，还是迷人而复的？是认严肃的还是让人愉悦的？大胆还是沉闷？功能派的还是情感派？个的审美偏是什么，我们想通页面传达出什么样的价值观？我们需要开始考虑品牌。
我们衷于健康食品，所以我们希望它通过网站传达出。也许它会一种机的，温暖的，健康的感觉。我们也相信烹饪不需很多的划准备；它可以自发的趣的，且可以十分钟的时间内行试验创新。
在这一点上，可能会把一些相关的素材机情绪板中，并开始尝视觉效果，直有正确的品牌觉为止。13一旦做了这一点，就可以定义核心视觉品牌素，如版式、调色板、音调，以及增品牌识别度的征；例如，插图、图像式、定形状、独的交互方式，它抓住了服的本质，以最佳方式呈现内容。
假设我们想了一个温暖的，土色的调色，手工绘制的图标，注重可读性的版，健康食的质量摄影，及一些简单的界面元素和控制。这些格将成为我们的感知模式。
10. 共享语言
在这个过程中，我们将通过择引某些领域概念来做设计语言决策。么是「食谱」？我们说的「步骤」是么意思？是么使「令人愉快的简单」的互方式？我们择的词语会影响团队的思维方式。间接地，他们影响到设计来的样子。
首先，模和语言选择会议比较随意些共享团队。随着我们团队和品不断发展，语言也会发展。最终，我们将需要更结构化法来捕获、共享和组织我们设计词汇表。
现在我们已经用通一个虚构的站点案例简单地验一遍设计程，下一步，我们以用现世界的数字产品和司的例子来看系统是何演变的。
原版电子书购买址：https://www.smashingmagazine.com/design-systems-book/
图片素材作者：Alexandra Zutto
浙公网安备33011002017549号