C译版《设计体系》 Design system.docx-资料库

0109bc8d-00b7-4e15-b2fd-14d453a9badd.docx.pdf-第1页.png

第1页 / 共235页

0109bc8d-00b7-4e15-b2fd-14d453a9badd.docx.pdf-第2页.png

第2页 / 共235页

0109bc8d-00b7-4e15-b2fd-14d453a9badd.docx.pdf-第3页.png

第3页 / 共235页

0109bc8d-00b7-4e15-b2fd-14d453a9badd.docx.pdf-第4页.png

第4页 / 共235页

0109bc8d-00b7-4e15-b2fd-14d453a9badd.docx.pdf-第5页.png

第5页 / 共235页

0109bc8d-00b7-4e15-b2fd-14d453a9badd.docx.pdf-第6页.png

第6页 / 共235页

0109bc8d-00b7-4e15-b2fd-14d453a9badd.docx.pdf-第7页.png

第7页 / 共235页

0109bc8d-00b7-4e15-b2fd-14d453a9badd.docx.pdf-第8页.png

第8页 / 共235页

C 译版《设计体系》广而告之一直有朋友问到何时做“Design Systems”一书的完整翻译，那最近就在做了，终于。说起来也是一整本书，在时间精力的分配上有不小挑战；相比于第一遍的浅层阅读，如今既要在原文层面上咬文嚼字深入思考，同时又会随着翻译的过程而反复体会、斟酌；三叉神经痛。当然，这也正是身为译者才能体会到的乐趣之一。固然复杂而漫长，却也简单而纯粹。从下周开始，将随着进度而陆续在 Beforweb 公众号放出译文；此次无法像《触类旁通》那样正式出版，略遗憾。效率方面，毕竟是业余项目，我会尽力；在时间资源比较匮乏的状况下，还是质量优先吧。在正式发布译文之前，约么有些声明要做：原著信息

C译版《设计体系》的原书“Design Systems”由 SmashingMagazine 出版，作者 Alla Kholmatova。译版条约 C译版《设计体系》是个人自发项目，译者 C7210，发布于 Beforweb，仅用于知识交流，不涉及任何商业或盈利目的；译文禁止转载，禁止任何以商业或盈利为目的的传播形式。内容范围 C译版《设计体系》不包含原著中的“推荐序”、“作者鸣谢”等内容；对于正文及注释中过于繁冗或重复性的内容有所删减。购买原著如果你喜欢“Design Systems”一书，可以前往SmashingMagazine购买纸质或电子版原书： https://www.smashingmagazine.com/printed-books/design-systems 支持译者如果你喜欢C译版《设计体系》，可以通过文末的“喜欢作者”为我提供咖啡支援，或通过留言来表示鼓励，污个小蓝手也无妨，随缘。章节目录全书章节目录如下：前言第一部分 • 第一章设计体系 • 第二章设计原则 • 第三章功能性设计模式 • 第四章感知性设计模式 • 第五章设计语言第二部分

• 第六章设计体系的范围界定 • 第七章前期规划与可行性研究 • 第八章功能性设计模式的系统化 • 第九章感知性设计模式的系统化 • 第十章设计模式库前言约 2700 字关于本书随着互联网的飞速发展及产品复杂度的提升，以“页”为单元来思考界面设计的方式变得越发不可行，我们需要更加体系化的思维方式。现实当中，并不是所有的设计团队都能以正确的方式创建和使用设计体系。有些设计体系可以切实帮助团队高效构建出众的产品体验，而多数则是流于形式，既不实用也缺乏维护，直至最终被搁置。运作良好、持久高效的设计体系有哪些特质？对于这个问题，我投入了大量时间进行观察和思考，而本书正是基于相关结论所著。我研究了不同规模、类型的团队在工作方式上的差异，研究了他们如何构建高效而实用的设计体系；我从中学到了很多，我每一天的工作都因此而受益。希望这些知识同样能帮助你的设计团队提升工作效能与质量。本书面向的读者本书旨在帮助中小型产品设计团队将体系化的设计思维模式融入到工作当中。团队中的交互、视觉设计师及前端工程师均能从中受益。本书的研究范围本书不会扩展到设计体系以外的主题当中，譬如信息架构、内容策略或用研等方面。同样，这也不是一本技术书籍，不提供任何范例代码，虽然其中一部分内容与前端开发实践相关。这是一本关于设计的书，但不会讨论“设计一款怎样的产品”或“如何设计一款成功的产品”。本书所探讨的是如何以体系化的方式推动设计流程，以及如何围绕特定的产品目标及团队特质来构建设计体系。

本书的内容第一部分：设计体系的基础构成在本书的第一部分当中，我们将对设计体系的基础构成进行了解，包括“设计模式” 与“实践方法”两大方面。 “设计模式”指代任何可复用的界面组成要素，主要包括功能性设计模式（按钮、文本框等）和感知性设计模式（配色、字体等）。具有高度内在关联性的一系列设计模式进一步构成了产品界面的设计语言。 “实践方法”聚焦于如何管理设计模式，包括设计原则的定义，以及如何通过模式库来创建、提炼、共享和使用设计模式。第二部分：如何构建设计体系设计体系的构建是一个漫长而复杂的过程，并且会随着产品的发展而持续进行。藉由一系列特定的原则与方法，我们可以有效地将整个构建流程控制在正确的方向上。本书的第二部分将关注于构建和维护设计体系的具体步骤与方法，包括前期规划、界面清查、模式库创建、文档撰写、维护与迭代。术语定义在进入正式话题之前，我们还需要对书中将要用到的一些关键术语进行定义。 “模式”或“设计模式” 用于指代任何可复用的界面组成要素，包括按钮、文本框、图标、配色、字体，以及可复用的交互行为与功能流程等等。这些要素用于解决特定的设计问题，满足特定的产品需求。其中，“功能性设计模式”与行为相关，“感知性设计模式”与品牌及外观相关。 “功能性设计模式”或“组件” 界面的实体组成要素，例如按钮、页头、表单元素、菜单等等。 “感知性设计模式”或“风格” 界面的非实体组成要素，例如配色、字体等等，通常用于塑造界面外观，强化品牌识别与情感关联。 “模式语言”或“设计语言”

组成产品界面的一系列具有内在关联性的设计模式，包括功能性模式与感知性模式，以及与特定平台或行业领域高度相关的设计模式。 “设计体系”或“体系” 业界当中还没有关于“设计体系”的标准定义，人们对于这个概念的理解方式也不一而同，有时会与“设计规范”或“组件库”混为一谈。在本书中，我们将其定义为“服务于数字化产品设计的一系列具有内在关联性的、组织有序的设计模式与实践方法”。 “设计模式库”与“设计规范” 在本书中，“设计模式库”指代一种综合性的工具，用于对模式进行汇总、提炼和共享，同时还包含对于使用方式的指导。而传统意义上的“设计规范”更多的是聚焦于风格定义，例如配色、字体、样式。设计体系研究本书基于对真实产品及团队的研究而著。其中多数内容来自于我在线上教育平台 FutureLearn 的工作经验。三年多的时间里，我亲眼见证了我们的设计体系从基础概念到发展成熟所经历的林林总总（注）。为了确保研究的深度与多样性，我还对另外五个大家耳熟能详的产品设计团队进行了为期 18 个月的追踪调研，包括 Airbnb、Atlassian、Eurostar、Sipgate 和 TED。通过对设计师的直接访谈，我了解到他们在构建设计体系的过程中所遇到的各种挑战。感谢他们同意将相关内容收入本书。注：futurelearn.com/pattern-library Airbnb airbnb.design/building-a-visual-language Airbnb 的首席交互设计师为我提供了大量关于 Airbnb 设计语言体系（DLS）的详细信息。DLS 的最大特质在于它的严谨性，其设计模式的定义与使用方式都相当严格，涉及一系列工具与实践方法的协同作业。他们仍在面对一些挑战，包括 DLS 的推广，新设计模式的整合，设计与开发的同步，以及如何保持整体方向等等。 Atlassian atlassian.design Atlassian 的设计师们分享了他们对于 Atlassian 设计规范（ADG）的展望。他们拥有独立的设计体系团队，同时还建立了一套开源模式的维护机制，鼓励其他设计师共同参与体系的发展。这个模式的挑战在于如何在“鼓励全员贡献”与“确保体系化管理”之间寻求平衡。

Eurostar style.eurostar.com 本书撰写期间，Eurostar 的设计团队正在构建他们的第一个设计模式库。最初，他们遇到了一些挑战，例如怎样判断模式库项目在整个团队中的优先级，以及如何鼓励其他人参与贡献。一年后，他们获取到了足够的资源，得以组建独立团队专门负责设计体系的构建。 Sipgate design.sipgateteam.de Sipgate 的设计师们给到我很多洞见。他们的第一个模式库建立于 2015 年，但在一年之后，他们发现设计模式的种类过于繁杂，多数是由于产品团队之间缺乏沟通所造成的。近来，他们正在重新构建模式库，旨在统一各产品之间的设计模式。 TED ted.com/swatch 在所有对 TED.com 进行专业支援的人们之中，一部分 UX 设计师与前端工程师专门负责设计体系的构建。这个小团队对于 TED 的设计模式有着深刻的了解，并通过一种相对简单的形式进行着梳理和维护。他们认为，一套庞大而复杂的设计模式库对于 TED 来说并非必需。第一章设计体系约10600字目前，业界当中还没有关于“设计体系”的标准定义，人们对于这个概念的理解及使用方式也有所不同。在本章中，我们就将对“设计体系”的基本定义与组成要素进行探讨。 “设计体系”是指服务于数字化产品设计的一系列具有内在关联性的、组织有序的设计模式与实践方法。其中，“模式”指代任何可复用的界面组成要素，包括按钮、文本框、图标、配色、字体，以及可复用的功能流程与交互行为等等；“实践”则是关于如何在设计团队当中创建、提炼、使用和共享这些模式。下面截图当中所示的两款产品来自不同的行业。左侧是名为 Thomson Reuters Eikon 的贸易与市场分析工具，右侧是 FutureLearn，开放式教育与社交化学习平台。

每一款产品的设计模式都有其各自的协同运作方式，以实现不同的产品目标。Thomson Reuters 重在高效实用的数据处理、信息检索及多任务能力；而 FutureLearn 则更加关注于深度阅读和友好的学习体验，包括推动志趣相投的学习者进行互动等等。产品的目标决定着它需要采用哪些类型的设计模式。 Thomson Reuters 的界面主要由面板与挂件组成，利于多任务的实现。紧凑的空间，灵活的布局，精小的控件，合理的字体与字号选择，这些设计要素共同构成了高密度的整体设计风格，易于在有限的屏幕空间中呈现大量数据。而 FutureLearn 的风格则更加简洁、松弛，每个页面通常都会聚焦于特定的任务，例如阅读文章、参与讨论、完成互动式练习等等。布局通常以单列为主，大字号标题、硕大的控件、充裕的留白，所有这些设计要素共同构成了较高的视觉对比度。（注）注：FutureLearn 所采用的设计模式旨在构建反思式学习体验，帮助学习者聚焦于当前任务，避免干扰；页面所营造出的整体氛围要使人感到冷静与专注。设计模式的选择会受到多方面因素的影响。对于那些由产品的核心功能及其所在领域所决定的设计模式，我们称之为“功能性模式”。以刚刚介绍过的贸易与市场分析类工具为例，任务栏、数字表格、图表及一系列数据可视化工具是最为常用的设计模式；对于在线学习平台而言，则是文章、视频、讨论组、学习进程、互动教学等等；而电商平台一定离不开商品列表、筛选排序、商品详情、购物车、支付等核心模式。产品的气质（或品牌形象）则是另一类设计模式的决定要素，而这些模式又进一步塑造了产品带给我们的感知。在本书中，我们将这类模式称为“感知性模式”，包括话术风格、文本样式、配色、图标风格、空间与布局、特定的形状、动效、音效等等。离开了感知性设计模式，对于那些领域相同且功能相似的产品，我们将难以分辨它们所属的品牌。

资料库

C译版《设计体系》 Design system.docx

相关推荐

移动开发

热门标签

最新资料