微信读书：https://weread.qq.com/web/reader/b5732e2071c9561cb579903k3c5327902153c59dc0488e1
微信beforweb：https://mp.weixin.qq.com/s/zF_V7iHamr-JPv7KjF0A6w
译者序
设计实践的三个层级：
第1层级：组件库。
陈列所有界面中被复用的组件，如按钮、文本框、标签页等。组件库不仅可以指导设计师的工作，还可以为前端开发人员提供参考。
第2层级：设计语言。
设计语言统一了整个产品的风格，并让产品有了区别于其他产品的个性。
第3层级：设计体系。
设计体系是以下这些内容的集合：设计目的、设计原则、组件库、样式指南，以及用于提高设计师和开发人员沟通效率的工作流程和实用工具
建立有效的设计体系可以提高设计决策、设计与开发沟通等工作的效率，并减小出错的可能性。此外，建立设计体系也是团队知识管理的一部分，有助于为新加入团队的成员提供指导，同时确保团队的工作不会因为某位关键成员的离开而蒙受损失。
术语
模式或设计模式
我使用模式这个词来指代界面中任何可复现、可复用的元素，如按钮、文本框、图标样式、颜色、版式、重复的使用流程和交互行为等。这些元素可以用来解决特定的设计问题，满足用户需求，或者唤起情感。本书使用功能性模式指代与行为相关的模式，使用感知性模式指代与品牌和美学相关的模式。
功能性模式或模块
这两个术语在本书中可互换使用。它们指代界面中有形的构件，如按钮、标题、表单元素、菜单等。
感知性模式或样式
这两个术语指的是更具描述性的、无形的设计模式，如图标样式、颜色、版式等。它们通常用于创造某种美感，加强用户与产品的情感联系。
模式语言或设计语言
产品界面的设计语言是由一组相互关联、可共享的设计模式构成的。模式语言组合了功能性模式和感知性模式，以及平台特定的模式（如汉堡菜单）、领域模式（如分别针对电商网站、财务软件、社交应用的模块）、说服式用户体验模式，等等。
设计体系或体系
Web领域的社区中没有对“设计体系”这个词的标准定义，人们以不同的方式使用该术语，有的人将其与“样式指南”“模式库”这些词互换使用。在本书中，所谓设计体系，指的是为实现数字产品的目的而组织在一起的一套相关模式和共享实践。
模式库和样式指南
模式库是一种捕获、收集和共享设计模式及其应用指南的工具。创建模式库是良好设计实践的一个样例。通常来说，样式指南聚焦在样式上，如图标样式、颜色和版式，而模式库的范畴则更广一些。
设计体系的思想
Airbnb
Atlassian
欧洲之星（Eurostar）
SipgateTED
第一部分 基础
第一章 设计体系
设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。模式指的是界面中那些重复的要素：用户流程、交互方式、按钮、文本框、图标、配色、排版、文案，等等。
设计模式的选择受很多因素的影响。
首先，产品所属的领域及其核心功能影响了功能性模式（functional pattern）。
其次，产品的精神（或者品牌——取决于你对品牌的定义）也形成了塑造产品调性的模式，本书中我把它们称作感知性模式（perceptual pattern）
1.1设计模式
模式是一种用于解决特定设计问题的可复现、可复用的方案。
有时候，有效且有趣的设计是基于直觉的，我们很难准确地阐述为什么要这样设计。
设计体系的一个主要目标就是“扩展创意方向”。如果你需要让一群人持续可靠地遵循创意方向，就需要将模式明确地阐述出来，并分享出来。
我们将重点关注两类设计模式：功能性模式和感知性模式。功能性模式表现为界面上的具体模块，如按钮、标题、表单元素、菜单等。感知性模式则是描述性的样式，以可视化方式表达和呈现产品的个性，如配色、排版、图标、形状、动画等。
不妨做个类比，功能性模式有点像名词和动词，它们是界面中那些具体的、可操作的部分；而感知性模式则类似于形容词，它们是描述性的。
1.2共享语言
我们不仅要对语言形成共识，还要对语言的用法形成共识。
1.3模式库及其局限性
有人将模式库等价于设计体系。然而，即便是最为全面的动态模式库，也不能称作设计体系。它只是有助于设计体系变得更加有效的一种工具。
1.4构建有效的设计体系
只有当设计体系围绕产品目的，综合了设计过程中的成本效益及用户体验的效率和满意度时，它才是有效的。
1.4.1 共享目的
1.4.2 识别问题
1.5案例：“十分钟食谱”网站
1.5.1 目的和价值观
我们要做的第一件事就是弄清楚用户是谁，他们的目标、需求和动机是什么。
1.5.2 设计原则
重要的是参与产品创建的人都认同这些价值观，并承诺实践它们。
团队成员应就这些内容达成一致，这对于让每个人的工作和优先级保持同步至关重要。这些内容还能辅助决策：从先实现哪些功能、使用何种方法，到制定用户体验流程、设计按钮外观、选择字体，等等。
1.5.3 行为和功能性模式
我们确定了希望用户实现或让用户有能力实现的主要行为，这会帮助用户实现他们的目标。
设计的细节固然会随着网站的改版而变化，但上述关键行为将始终保持不变。这些行为足以体现网站的核心功能模块和交互方式：
1.5.4 审美和感知性模式
我们可以将一些情绪和感觉写下来，并开始尝试一些视觉效果，直到品牌的感觉符合预期。[插图]之后，我们便可以开始定义核心视觉品牌元素，例如排版、配色、说话的语气语调以及任何表现品牌独特性的元素。如插图、图片样式、特定形状、独特交互等，
1.5.5 共享语言
第二章 设计原则
Pinterest的设计原则便偏重于品牌（如“清晰易懂”“充满活力”“牢不可破”等
英国政府数字服务小组制定的原则则偏重于团队的运作方式（如“精简”“重复再重复”等）。
Jack Daniel’s酒厂的价值观是“信任”“独立”和“诚实”，
Atlassian公司比如“大胆”“乐观”“实用但不乏味”。
TED的一条设计原则是“追求永恒，而不是追求潮流”。
FutureLearn消除无用的部分
Salesforce公司的Lightning设计体系的原则是“清晰、高效、一致、美观”
Medium的一个早期设计原则是“方向大于选择”
Airbnb公司的四条设计原则（“统一”“通用”“风格化的”“对话式的”）
Spotify公司的产品团队则为他们的设计原则创造了一个首字母缩略词“TUNE”（这四个字母分别代表“语调”“易用”“必要性”“情感化”）
2.1有效设计原则的特性
设计原则指的是包含团队如何理解好设计之精髓，以及如何体现这一精髓之建议的共享指南。
2.1.1 设计原则是真实而贴切的
2.1.2 设计原则是实用的、可操作的
设计原则应该就如何帮产品解决设计问题提供实用的指导。
如果想让设计原则更为实用，就不要让它们成为只是听起来不错的东西，而应该提供可操作的建议。
模糊的设计原则：明确、简单、有用——第一优先级只有一个、把界面做到牢不可破、从需求开始
2.1.3 设计原则是有观点的
设计体系应该有态度、有观点，能让每一个使用它的人都得到创意上的指导。这些内容应该反复斟酌。
2.1.4 设计原则是能产生共鸣、容易让人记住的
2.2定义原则
2.2.1 从目的开始
2.2.2 寻找共识
让团队的一些人或所有人（取决于团队规模）各自回答关于设计原则的问题
让他们为每一条设计原则找一个产品界面实例。
2.2.3 面向正确的受众
2.2.4 对原则进行测试和修订
设计原则会塑造设计语言，反过来设计语言也会影响设计原则。
为了持续改进设计原则，就需要不断地对其进行测试、评估和改进
2.3从原则到模式
模式的选择与运用以及对模式的独特组合，都受产品的目的、精神和设计原则的影响。可以将设计原则视为创建模式并以具有内在意义的方式组合它们的语法规则。
同样，随着品牌和功能性模式的发展和完善，它们反过来也影响了设计原则。原则和模式始终不断地相互影响，相互完善。
第三章 功能性模式
功能性模式又称作模块，它们在很大程度上是由产品所属的领域决定的。
功能性模式可以很简单，也可以组合成更复杂的模式。
随着产品的发展，模式也在不断发展。
3.1 模式演变，行为不变
模式是我们试着通过界面，让用户能够完成某种行为或激励用户完成某种行为的物理体现。
牢记关键模式的目的，有助于了解设计体系的运转方式，防止设计体系在发展过程中碎片化。
3.2 定义功能性模式
3.2.1 创建模式映射
要了解你的模式如何适应更大的图景，请试着将一些核心模块映射到用户轨迹的各个部分。
想想每个部分的作用及其所鼓励的行为。此时无须操心单个图标或按钮，而是要放眼全局：了解系统的各个部分以及它们是如何相互协作的。
我在脑中记着这张映射图，这有助于我将模式理解为具有相同目的的多个系列，而非单个页面。
哪些行为是在用户轨迹的当前阶段需要去鼓励的？哪些模式可以支持这些行为？网站上还有哪些地方有这些模式，以及它们在那些地方是如何运转的？一个新的模式如何服务于整个设计体系？思考上述这些问题，是系统性地开展设计工作的一部分。
3.2.2 打造界面清单
这些组件形成了不同的分类——导航、表单、标签页、按钮、列表等
界面清单不一定包含所有的内容（尽管你所做的第一个清单应当是全面的）。它可以一次仅关注一组模式，也可以专门针对排版、配色或动画等制作界面清单。
为了保持最佳效果，应该定期维护界面清单。
3.2.3 将模式视为操作
要理解一个模式的目的，需要关注它的作用是什么，而不是你认为它是什么。
要试着找到最能描述其行为的操作。用动词而非名词来描述模式，有助于扩展模式的潜在用例，并更准确地定义其用途。
根据操作——从用户角度及你自身的角度——来定义模式
3.2.4 描绘模式的内容结构
要对模式的工作方式达到共识，请描绘其结构：让模块能够有效运行的核心内容。
首先，列出让模块能够有效运行的核心内容元素。
接下来，试着确定元素的层次结构，并决定如何对它们进行分组。
3.2.5 按某个维度排列模式
3.2.6 将内容视为假设
不一定从内容开始，而是从目的开始
如果内容总是不能匹配此模式，通常是由以下三个原因中的一个或多个引起的。❑ 我们没有正确地定义模式的目的。请试着重新去理解模式是用于支持哪些行为的。❑ 我们设计模式的方式并不是最能反映其目的的方式。请为此模式尝试其他的设计。❑ 我们试图将内容强行放入不合适它们的模式。请考虑修改内容，或尝试其他模式。
目的决定了其他的一切：模式的结构、内容及呈现。
第4章 感知性模式
数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画，以及这些要素在界面中的组合和使用的具体方式。
4.1 感知性模式的作用
4.1.1 感知性模式有助于传递品牌形象
感知性模式通过界面传递品牌，并让品牌被人记住
4.1.2 感知性模式让系统更为连贯
4.2 探索感知性模式
MailChimp，这些特征便是“有趣，但不幼稚；好玩，但不傻；强大，但不复杂；时尚，但不异类；灵活，但不随意”。
4.2 探索感知性模式
4.2.1 情绪板
4.2.2 样式叠片
“由字体、颜色等界面元素组成的能传递Web视觉品牌精髓的设计交付物。”
4.2.3 元素拼贴
将界面元素拼贴在一起，探索品牌在界面中的表达方式。
4.3 迭代与改进
工作的重点便从开放式探索转向了精细化、一致化
既要发展品牌，又要保持模式的一致性是一件很有挑战性的事。
当你专注于产品一致性的时候，打造产品质感的一些重要的细微之处就有可能会丢失。
4.3.1 平衡品牌性与一致性
如果一个设计体系过分追求完美的一致性，那么它就会变得普通、僵化。
好的设计体系能在品牌的一致性和创造性表达之间取得平衡。
4.3.2 标志性时刻
4.3.3 小规模试验
在探索新样式的时候，请先在网站的一小块区域进行试验。
如果它们起作用，就将它们应用到网站的其他区域，逐渐将它们融入设计体系。
4.3.4 平衡品牌和业务需求
4.4 标志性模式：团队练习
让每个人写下产品中最独特的感知性模式。鼓励他们超越配色、字体这一层次，考虑更高级别的针对品牌的原则、组合和处理方式。不仅要想到元素，还要考虑到它们背后的含义——它们描绘的图景和讲述的故事。
第5章 共享设计语言
5.1 为模式命名
精心挑选的名称可以成为构建设计体系的强大工具，因为名称会影响模式的使用方式。
5.1.1 学习为你的团队创造一个好名称
一个好名称必须是聚焦的、令人难忘的，能体现它所代表的模块的目的
5.1.2 好名称是基于隐喻的
5.1.3 好名称有个性
5.1.4 好名称能传达目的
5.1.5 协同命名
5.1.6 建立专用频道
5.1.7 跟用户一起测试设计语言
5.2 将团队融入设计语言
5.2.1 让设计模式变得可见
5.2.2 引用事物的名称
我们的目标是，当你提到一个名称的时候，每个人都明确地知道你在指什么。让每个人都知道序列导航这一模式的目的，并将其叫作“序列导航”，而不是“一串气泡”或者“向导控件”。
5.2.3 将设计体系作为入职培训的一部分
5.2.4 定期组织设计体系会议
5.2.5 鼓励多样化协作
尽可能地尝试将模式的设计和构建与其他领域结合。
❑ 创建模式映射
❑ 打造专注于特定模式的界面清单
❑ 绘制模式结构
❑ 就模式的目的达成一致，并为模式命名
❑ 对模式进行阐释，形成产品的感觉
❑ 用新模式进行小规模试验
5.2.6 维护一份术语表
术语表的价值不仅在于它提供了一种工具，更在于其所营造的语言环境。通过建立和维护术语表，团队会养成一起审查、讨论和阐释语言决策的习惯——认同大家所用的词汇，这很重要。
第一部分总结
目的
设计体系的目的是帮助实现产品的目的：“十分钟烹饪出健康膳食”“尽可能广泛地传播演讲”“每时每刻都播放对的音乐”。设计体系中的所有内容——大到团队运作方式，小到最小的模式——都应该为了实现这些目标进行优化。
原则
团队在设计时需要判断如何实现产品的目的。其设计方法和优先级的选择应当基于一系列原则：“为第一印象设计”“适当高于一致”“追求永恒，而不是追求潮流”。团队对原则的认识越一致，他们创造的模式就越有凝聚力。
模式
我们打造的界面旨在帮助人们实现某种目标并创造某种感受：学习新的食谱，专注于写作，感到高效，受到鼓舞。我们的设计意图是通过设计模式表现出来的。功能性模式支持用户的行为和操作：“选择食材”“选择菜谱”“跟着菜谱做菜”“给菜谱打分”。感知性模式关注的是产品给人的直观感受：“实用主义”“像报纸一样”“开放热情”。整个团队需要充分理解模式的目的。只有这样，才能确保它和用户的预期是一致的。
共享语言
模式应该通过一种共享的设计语言连接起来。共享的设计语言是团队为打造有效且统一的用户体验而形成的关于创建和使用设计模式的根深蒂固的知识。这些知识是通过共享的设计方法、前端架构、品牌愿景和日常实践（如协作命名、跨领域配对、使模式可见、打造常规界面库、模式库维护等）传播的。设计语言应该不断地演进、增强、迭代和测试。
了解设计体系是如何运转的
设计体系不是一夜之间构建出来的，而是通过日常的实践逐渐形成的。如果你正在围绕一款数字产品进行设计，那么设计体系的基础可能已经存在。无论你怎样设计和构建界面，它们最终都会呈现在用户面前。只要这个过程不是完全随机的，你就已经有了设计体系。
第6章 设计体系的参数
6.1 规则：严格或宽松
6.1.1 Airbnb
1．标准化的规范
2．设计与工程完全同步
3．严格的引入新模式的流程
4．全面详尽的文档
6.1.2 TED
1．简单的草图胜过详尽的规格说明
2．简单的文档
6.1.3 权衡利弊，做出选择
通常来说，较为严格的设计体系更能保证精确、可预期的产出和视觉上的一致性。但与此同时，严格的设计体系也有可能趋于僵化，例如为了保持一致性而牺牲用户体验。
对于优先考虑对环境的敏感性和对实验的友好性的产品，松散的设计体系非常合适。想要拥有像TED那样简单、灵活的设计体系，团队里的每个人都需要完全同步地理解产品的目的和设计方法，这些都需要深深扎根于团队文化之中。即使是松散的设计体系，也需要坚实的基础。
6.2 部件：模块化或集成化
模块化的优点：
❑ 它非常敏捷，因为多个团队可以并行地设计和构建模块。
❑ 它经济有效，因为这些模块可以重复使用。
❑ 它容易维护，因为修复一个模块的问题不会影响其他模块。
❑ 它具有适应性，因为模块可以根据不同的用户需求来组装。
❑ 它具有生成性，这意味着可以通过引入新的模式或以新的方式组合现有模式来产生全新的效果。
- 敏捷性：多个团队可以并行设计。
- 成本效益高：模块可以被复用。
- 易于维护：一个模块的迭代不会对其他模块造成影响。
- 适应性强：模块可以通过不同的方式组合起来，满足不同的需求。
- 效率高：你可以通过新的模块组合方式实现新的设计方案。
集成化的优点：
❑ 它们可以是针对特定内容、特定背景、特定故事或特定创作方向的。
❑ 它们往往更为连贯，更加凝为一体（相反，模块化结构则可能让人感觉是脱节的）。
❑ 它们可以更快地构建出来，因为不需要花时间考虑部件的复用问题。
❑ 它们更容易协调，因为团队中的每个人都朝着同一个目标而努力。
- 适用于特定类型的内容、情境、创意方向。
- 更具整体性与连贯性。
- 可以面向一次性需求而快速构建，无需考虑扩展性与复用性。
- 工作流程更聚焦，更易协调。
6.2.1 模块化与用户体验
使用模块化的方法，不仅要考虑效率的提升和成本的降低，还要考虑它对用户的好处和对产品体验的增强。
一味追求模块化并非总是好的。模块化的程度应该取决于你想实现的目标。
6.2.2 模块化与项目需求的范围
模块化方法适用于具有以下特点的产品：
❑ 需要扩张和发展
❑ 需要适应不同的用户需求
❑ 需要大量重复的部件
❑ 需要让多个团队能够并行、独立地开展工作
集成化的设计体系适用于具有以下特点的产品：
❑ 专为某个特定目的而设计
❑ 无须扩张或改变
❑ 需要超越边界的艺术创作
❑ 几乎没有需要共享的重复部件
❑ 是一次性的，不太可能复用
富有创意的会议网站、作品集网站、一次性的营销活动页面，都是采用集成化方法的例子。
6.2.3 权衡利弊，做出选择
模块化的方法适应性更强、可扩展性更高，也更加经济高效。
但模块化也有一些缺点。
首先，比起旨在实现特定目标的一次性解决方案，构建可复用的模块通常耗时更长。
其次，模块通常需要做到十分通用，以应对各种不同的情况，但这样做的结果很可能是毫不出彩的通用设计，为了保证效率而牺牲了创造性与故事性。
再次，为了维护模块化的价值，团队有时会强行复用模块。
最后，也是最主要的一个挑战，是让模块之间无缝连接。
集成化的设计是针对某个具体的目的优化而成的，因而具有较高的特定性。它们往往更加连贯，整体性也更好，但不能很好地扩展。集成化设计的适应性和可复用性很差，而这却正是我们做Web设计所需要的。
6.3 组织：集中式或分散式
6.3.1 集中式模型
在集中式的模型中，设计体系的规则和模式主要由一部分人管理。这意味着：
❑ 他们定义模式和规则
❑ 他们对设计体系的决策拥有否决权
❑ 他们管理模式库或其他存放模式的地方
这种结构最明显的优势是控制权。由于有人对设计体系负责，该体系就会被更好地规划、维护和发展。这种结构还有助于确保创意方向是聚焦的、创意决策是高效的，因为创意只有一个来源。
6.3.2 分散式模型
在这种情况下，每个使用设计体系的人都要负责维护和发展该体系。
这种结构为个体提供了自主权，让他们能自己做出决策。这种结构通常更敏捷、更有弹性——如果一个人漏掉了某个东西，另一个人可以快速补充。在这种结构下，设计知识和创作方向是分散式的，并没有集中在少数人手里。
6.3.3 组织挑战
6.3.4 权衡利弊，做出选择
集中式的方法提供了控制权和可靠性，但有可能跟不上团队的节奏。
分散式的方法提供了更多的自主权，让整个团队都更有创造力。这种方式更敏捷、更有弹性，因为它不依赖于一小部分人。
6.3.5 小结
Airbnb的设计体系是严格的、模块化的，采用集中式的组织形式。它运行的基础是严格的规范和流程。这种设计体系具有很高的确定性和一致性。
TED的设计体系在三个维度上几乎都位于相反的一端。像这样的设计体系就松散得多，创意的方向分布在团队里各个不同的地方。这类设计体系通常允许更多的试验和微调，并能对环境做出反应。
在两者之间的中间位置，有像FutureLearn这样的团队。作为一家年轻且不断发展的公司，FutureLearn的设计体系有所变化。一开始，它是集中式、集成化的，渐渐地，它开始变成分散式的，也更加模块化。当我们开始关注一致性时，设计体系的规则也会随着时间的推移而变得更加严格。
6.3.6 适合你的设计体系
还有一个重要的方面，就是团队文化。
“设计体系的结构必定反映了设计该体系的组织的沟通结构。”
每个有效的设计体系的核心都不是工具，而是能针对特定团队、特定产品打造优质设计和良好用户体验的知识。只要弄清楚了这些知识，其他的一切都将随之而来。
第7章 规划与实践
7.1 获得高层的支持
想要获得业务的支持，你需要证明，有效的设计体系将有助于更快地实现业务目标，并降低成本。也就是说，你需要准备一个商业案例。
7.1.1 在设计和构建模块时能节省时间
用数据表示效率低下所带来的成本，通常是获得高管支持最为有效的方式。
7.1.2 在做整站修改时能节省时间
团队成员花在问题修复和代码清理上的时间越少，他们就有越多的时间处理那些能为用户和业务带来价值的事情。
7.1.3 能让产品更快上线
7.1.4 其他好处
成功的关键是证明低效带来的成本并将其量化。
1．品牌统一
2．视觉一致性：一致的视觉表现会让产品给人熟悉、可预测的感觉，能帮用户更快地理解界面、减少认知负荷。简单地说，一致性能让界面更加直观。
3．团队协作
7.2 从哪里开始
7.2.1 就目标达成一致
1．将界面系统化
❑ 定义设计指导原则
❑ 定义可复用的设计模式并将其标准化
❑ 建立模式库
❑ 建立主设计文件，收集最新的模式
❑ 重构代码和前端架构，以支持模块化的方法
2．建立共享的流程和治理
❑ 通过沟通、协作、结对子、培训等方法，建立知识共享的流程
❑ 在整个公司推广模式库，鼓励大家使用
❑ 面向所有部门推广共享的设计语言
❑ 在入职培训中引入对设计体系的介绍
7.2.2 将成果公开
让幕后的工作变得公开透明了，也有助于让更多的人了解我们所做工作的价值。
7.2.3 创造知识共享的文化
一个团队如果有更新及时的模式库，但没有有效的跨团队协作方式，模式库的价值就会大打折扣。想让团队以更加系统的方式思考问题，需要建立起强大的知识共享体系。
7.2.4 提升团队士气
设计体系的工作是一个长期的过程。在某些时期，你的团队可能看不到所做工作的回报。
为了避免产生总也做不完的任务列表，可以先一次性完成大部分工作，再把剩余的任务当作持续性的工作。
采用这种两阶段的方法，可以让团队快速完成初始阶段的工作，并对余下的工作保持动力。
用这种方式安排任务，能以最低的成本将收益最大化。
如果我们只用屏幕截图而非代码，就能迅速添加完所有的模式，这样模式库就能更快地产生价值。
7.3 关于设计体系实践的思考
有条理的实践体系步骤：
(1) 确定关键行为和美学特征
(2) 对现有元素进行评审
(3) 定义模式
功能性模式和感知性模式的处理方式略有不同。对于功能性模式，我们需要重点关注用户行为，关注单个模块的定义和命名。对于感知性模式，我们将更多地将其当作一个整体来看待，关注感觉和视觉效果，以及如何让它们协调一致的一般原则。
顺序并不重要。有的团队认为应当先构建基础项目，比如排版；有的团队则从核心的功能性模块开始着手。同时构建功能性模式和感知性模式也是可以的。
无论采用哪种方式，我们都要先考虑全局，再将界面拆解为小的部分。这样，我们就不会只关注单独的模块，还会考虑它们如何协调一致，以及如何帮我们实现产品的目的。
第8章 功能性模式的系统化
8.1 目的导向的清单
界面清单是对界面进行系统化的流行方式——先收集各种UI元素的屏幕截图，再根据外观的相似度对它们进行分组。
但本章所描述的过程，其主要目标不是解决视觉一致性的问题，而是定义最核心的设计模式，并在团队中形成关于如何在整个系统中使用这些模式的共识。
8.2 准备工作
8.2.1 安排时间
对于这项工作，最有效的时间是在基础用户体验工作（包括用户研究、内容策略、信息架构及设计方向的确定）做完之后。
8.2.2 选择人员
设计师和前端开发人员的参与是至关重要的，理想情况下还应该包括后端开发人员、内容管理人员和产品经理。理想的小组规模为4～8人。
8.2.3 打印界面
找出你的产品中最重要、最不可或缺的界面和用户流程。通常，10～12个界面就够了，有时甚至更少。它们可以是设计原型，也可以是现有界面的屏幕截图。
将每个关键界面打印两份。第一份按照典型用户轨迹的顺序贴在墙上，第二份则将用于剪切模式并对其进行分组。
8.3 确定关键行为
首先需要确定用户轨迹每个阶段中的关键用户需求和行为
发现-目录-想读清单
8.3.1 措辞是一项基础工作
8.3.2 将行为分解为操作
8.4 按目的对现有元素进行分组
8.5 定义模式
8.5.1 具体性尺度
8.5.2 内容结构
8.5.3 命名
8.6 在更小的维度上重复目的导向的清单过程
8.6.1 操作的一致性
按钮和链接
为了避免混淆和误用这些重要元素，一定要对它们的定义达成共识。在你的团队里，“按钮”和“链接”共同的含义是什么？它们的基本用法是什么？
8.6.2 视觉层次
“扁平”按钮用于“必要的或强制的操作”，“幽灵”按钮[插图]用于“可选的、低频的或微小的操作”。如果两个“扁平”按钮对应的操作是同等重要的，那么这两个按钮可以并排在一起。
8.6.3 特例
像这样的特例应该只能偶尔出现。它们拥有特殊的外观，也不能打破一般的模式规则。
8.7 小结
对界面的一小部分做了系统化工作。你的团队走完这个过程后，你将对自己的设计体系和需要注意的地方有更多的了解。接下来，团队就可以将精力放到代码和Sketch上，来完成模式的最终设计了——确保模式涵盖了所有必要的用例、定义各种状态和行为，并对代码进行重构。第一次进行这项练习的时候，你可能会迷失在数目众多的元素和模式中。但不必一次就做完所有的工作，你可以从构成基础体验的核心模式开始，完成之后再转向另一个领域。重要的是，随着设计体系的发展，这项工作需要定期开展。这有点像园艺——你离开它的时间越长，它就越难以保持良好的形状。下面，我们转向感知性模式。
第9章 感知性模式的系统化
工具应该具有可用性和有用性，但它也应该让人感觉简单、安全和稳健。为了用一种可靠、可扩展的方式去影响用户的感知，我们需要熟悉创造这种感知的模式。
9.1 超越样式属性
对于功能性模式，我们先关注用户行为。对于感知性模式，我们将从美学特征入手。
9.2 美学特征与标志性模式
有效的样式不会流于表面，而会随着产品的发展而发展——它们反映的是产品的精神和核心设计原则
9.3 识别感知性模式
❑ 配色❑ 交互状态❑ 动画❑ 排版❑ 间距❑ 图标样式❑ 形状和边框❑ 插图❑ 照片❑ 语气和语调❑ 音效
(1) 从目的开始。
(2) 收集现有元素并对它们进行分组。
(3) 定义模式和模块。
(4) 形成统一的指导原则。
9.4 配色
9.4.1 从目的开始
❑ 显示不同类型或不同层级的文本（正文、标题、块级引用等）
❑ 突出显示链接和操作（主要CTA、辅助性CTA、链接等）
❑ 提请注意消息，并区分不同类型的消息（确认、警告等）
❑ 将内容隔开，突出显示重点内容（通过背景、边框等）
❑ 区分不同类型的数据（图表、图形等）你所定义的角色，决定了界面清单的类别。
9.4.2 收集现有颜色并分组
❑类型：指定使用颜色对象的类型，如行动召唤、标题、反馈消息等。
❑示例：添加元素的屏幕截图，以显示颜色用在哪里。
❑值：指定十六进制的颜色值。
❑感觉：如果颜色的目的是创造某种情绪或感觉，请在此说明。
9.4.3 定义模式
9.4.4 指定模块
这一步的目标，是增加配色的集中度、准确性和可访问性。
1．仅从需要的开始
目的导向的调色板的优势在于它可以引导你的选择，限制颜色数量。
但一定要避免为追求调色板的多样性而添加颜色。选项越多，体系就越复杂，也就越难实现配色的一致性。
如果一种颜色有两种以上的变体，还可以先设置一个基准的颜色值，再为其他色调指定明暗度数值：比基准亮20%，比基准暗20%，等等。
测试文本颜色和背景颜色的对比程度。
WCAG 2.0标准、Lea Verou做的Contrast Ratio
https://contrast-ratio.com/
https://hexnaw.com/
9.4.5 就指导原则达成一致
9.5 动画
9.5.1 目的和感受
❑ 让交互状态之间的过渡变得轻柔，例如鼠标悬停时的动画。
❑ 对特定的内容或操作加以强调，例如鼓励用户前进到下一步。
❑隐藏或显示额外信息，例如隐藏在侧边的菜单、下拉菜单、弹窗等。
在整个界面上，有效且有意义的动画应当给人的感觉是有明确目的的。
9.5.2 评审现有动画
9.5.3 定义模式
9.5.4 指定模块
9.5.5 就指导原则达成一致
9.6 语气和语调
9.6.1 评审语气和语调的模式
9.6.2 定义模式
9.6.3 就指导原则达成一致
9.7 小结
每种样式都应该形成独立的体系——排版体系、布局体系、颜色体系，等等。它们应该相互关联，并指向一个更大的目标：塑造产品被感知的方式。
要做到这一点，首先要看全局。从整体上捕捉美学特征，并确定对表达这些特征特别有效的模式。然后，便可以对每种样式执行一个类似的处理过程。从样式在产品环境下所具备的关键角色开始，对现有的实例进行评审，再定义模式和模块。最后，通过指导原则将所有内容连接在一起，并将它们与产品的目的串联起来。
第10章 模式库
模式库只是一种记录和共享设计模式的工具
建立模式库通用策略：
❑ 就主要目标达成一致，包括与界面相关的目标和与团队工作方式相关的目标，例如“定义并标准化可复用的设计模式”“定义设计指导原则”“建立模式库”。
❑ 将目标分解为可管理的故事，并为设计体系创建简单的路线图。
❑ 通过记录和分享的方式，让工作进展公开化。对很多团队来说，公开模式库促进了他们的进步，也增强了他们的信心。
❑ 让整个团队的人都能访问设计语言，建立知识共享的文化。
❑ 通过试验、研讨会和小组活动来锻炼系统化的思维方式。
10.1 内容
❑ 首先，团队里的每个人都可以访问这些内容，并对其进行审阅、编辑、提供反馈。使用大家熟悉的、易于访问的工具，可以为更多的人提供参与的机会。
❑ 其次，Google文档里的内容就像是一个模式库MVP——团队可以很快地开始用起来。一旦有了内容，再去考虑如何设计和构建模式库网站就会变得容易多了。
10.2 模式的组织
10.2.1 提炼感知性模式
将模式库分为组件和样式（即功能性模式和感知性模式）
将功能性模式称为“组件”似乎是普遍的共识，但感知性模式的称谓则更加多样化
10.2.2 组织功能性模式
1．按字母顺序排序
2．按层级进行组织
按它们的复杂度进行分类
原子设计（atomic design）：原子是最基本的构件，它们能结合成更复杂的独立元素——分子。
3．按目的或按结构进行组织
10.3 模式文档
10.3.1 为功能性模式编写文档
❑ 名称
❑ 目的
❑ 示例（含视觉示例和代码示例）
❑ 变体
❑组件的版本控制。
❑团队成员。
❑相关模式。
10.3.2 为感知性模式编写文档
1．指定用法，而不仅是构件本身
2．交叉引用样式
3．显示元素之间的关系
10.4 工作流程
10.4.1 添加新模式的过程
(1) 将设计稿提交到Dropbox里的“UI工具箱”文件夹。(2) 整个团队一起用Trello讨论新模式的引入。(3) 对UI工具箱里的设计编写说明。将新设计放入模式库之后，它将自动推送到团队所有人前面。
10.4.2 引入新模式的标准
❑ 网站上的每个新元素都会自动地添加到模式库里。
❑ 只有当元素被复用时，才会被添加到模式库里。
10.4.3 人员与责任
❑审校者。
❑制作者。
10.4.4 统一设计体系的各个方面
10.5 工具
10.5.1 保持模式库的更新
10.5.2 保持主设计文件的更新
10.5.3 将模式库作为求真来源
10.6 模式库的未来
结语
创造能够对人类生活产生积极影响的体系的道德要求。
若有收获，就点个赞吧
0 人点赞
