构建一个设计系统

· 构建一个能提供统一用户体验、设计规则以及图案的系统

过去的几年，我一直在设计网页和移动端应用，为了能生产出更好的产品，建立起更好延展性、更高效的设计系统，我学会了怎样和不同的部门打交道以及如何把他们的知识为自己所用。

很明显，你能组织起大量的元素来为你的设计身份创造一个核心的基础。我将分享一些我在搭建具有延展性及能让多部门多平台协作一致的设计系统上的看法。

设计语言和设计系统不仅仅是UI样式上的指导，还是团队工作的方式以及团队的价值观和原则。

......

· 系统

“建造用户喜欢的产品是好的设计基础、一个为用户创造好的体验的设计系统的一部分。每个人都需要为创造能振奋用户的高质量商品做贡献，但是要想获得所有这些我们所需要的商业团队间的坚实的基础，所有的东西都只是谜团的一小部分。”

从排版、布局、栅格、颜色、图标、构件和代码规范到语音语调、风格指南和文件，一个好的设计系统是能把所有这些聚合到一起，使你的整个团队学习进步成长。

· 未来

设计系统会为我们将来跟未知的设备打交道提供便利性。它也许会是过程中的一个变化，但不应该在思维方式上有太大的差异。我们需要保持实验和交流，特别是在设计领域，因为好的用户体验是我们产品是否成功的真真切切的迹象。

当我构建设计系统的时候，我不仅仅去图书馆查阅，还在于我们日常是怎么工作的、工具、设计流程、文档记录、整个生态系统。否则你仅仅是清理了灰尘并把灰尘放在我们看不见的地方罢了。

仅仅关注视觉上的东西是远远不够的，我们需要首先统一基础部分，例如文档、我们日常使用的工具，我们的设计流程。所有这些对建立一个坚实的设计基础是灰常重要的，还有怎么管理你的文件，怎么命名它们，日常使用哪些工具。对所有这些细节点进行一个盘点然后开始清理它们并统一起来。

在开展你的设计系统工作之前，跟所有主要的利益相关方沟通，它们可能会需要参照或者更新你的系统。确保你自己心里清楚现在什么是运行良好的，什么挑战可以通过设计系统来解决以及每个利益相关方喜欢的工作方式。

开始阶段把所有人都考虑在内，你要设计的系统语言的成功关键在于你要在整个过程中搜集他们的需求。

设计团队或者“DLS团队”会“拥有”这个设计系统，其创作应该是一个集体愿望的团队合作，通过有效的文档和可重复使用的组件为内部流程增加效率，同时提供了极好的用户体验。

记住：构建设计系统是一个漫长的过程，充满了试错，测试，学习，失败...

在转向视觉方面之前要把基础部分设置正确，这是非常重要的，因为这会加速后期的进程。

首先我检查：

1，我们最近在使用的工具；

2，我们正在使用的文件夹，文件，图层甚至sketch里“symbols”及样式的命名；

3，文档里记下的所有规则，等等...所以当你有任何困惑的时候这真的会很有帮助，你只需要去翻阅文件并进行再次检查；

4，风格指南

你需要在潜心设计之前建立起你的工作小站，假设你是一个调酒师，在服务之前，你需要准备好瓶子、咖啡机、调制鸡尾酒需要的原料等等...这样当你的酒吧开门之后，所有都是准备好并很好运作的，这儿也是相同的工作方式。

· 工具

不要纠结你使用哪些工具，但在过程中将他们标准化是非常重要的。

当我提及工具，我说的是我们在设计过程中用的所有东西，从笔记、收藏到设计。

和团队一起核查，定义你们要用的工具。

· 文件和命名

花半小时时间来查找一些文件或最新的版本是非常令人厌烦的，用每个人都知道的名字和语法来正确命名管理你的文件。

这是一张我默认文件系统的截图，复制粘贴这个“文件系统”到我最近正在工作的项目上并把它重新命名。

我把所有交互和视觉的设计的文件放在一个文件夹内，所以如果你要找线框，那么它一定在“02_ux”这个文件夹里，如果你要找最新的设计稿，那它一定在“01_design”这个文件夹里。

· 文件命名规范

等等，我很混乱，那我应该用“最新.sketch”或者"最近.SKETCH"来命名？“最终_v2.sketch”怎么样？

确保每个人都能在没有一个明确的命名规范的情况下很清楚的知道是什么、如何使用。文件命名经常就变成了“首页”,"首页 v1","首页_v2"等等。

例如：

名字_版本_日期.sketch

元素名称_你的名字_日期.sketch

选择一个顺序。使用连字符或者下划线但不是两者都用。永远不要空格。我没有一个完美命名的格式公式，你需要尝试并坚持一种公式。

选择一个规范并坚持使用下去。

· 记录

设计系统的文字记录是我面临的最大的挑战。

设计应该包含功能性的解释或例子。有许多可以提供作为文档规范元素的方法。

给他们一个大致的概念，随着同一个地方的功能，它看上去应该是什么样的。我从现在开始记录所以的东西，从文件夹名、文件名、设计过程、设计和搜集素材时用的哪些工具。

现在我用的是Google Docs所有团队都能够轻松的访问，而且他们可以内部评论，这对反馈有很大的好处。

· 设计板

·UI清单审核

一个UI清单或者审核会帮助你轻易的识别一些你可能没意识到的问题和揭露出来的信息。我最近发现同一个按钮有超过八种变化的形式，每一个按钮跟其他的仅有一丁点的不同。关键是，在我们列完UI清单前，没有人会真正认识到到底存在多少问题。这类的问题都会直接造成视觉上的不协调，不必要的标记以及臃肿的CSS表格。

“其他两个按钮的字体大小和样式略有不同。”

也许你可以先从界面清单和一些简单的你能直接找到的元素列表开始。把关注点放在那些会被反复利用的或者至少有可能再次使用。

一些可以学习到更多的链接：

· 在开始设计前

组织你的sh***...宝贵的时间，如果你一个月后还不得不对你的设计文件进行维护，那你会讨厌你自己的。

· sketch插件

·为你的画板和图层设置命名规范

·新建页面

·设置栅格系统

·选择类型比例

·安装你的插件

安装你要用的插件，把它们放入资源文件夹并记录下他们的用法以及在什么情况下用它们。

这是我用于UI kit的插件：

重命名

使用sketch插件像一个老板一样来重命名图层。

sketch调色板

一个sketch插件可以让你在颜色选择器中保存载入颜色

视觉实验室的工艺

一旦进行更改并同步到库中的元素，这将更新所有使用这些元素的sketch文件。不像sketch symbols，在库中的元素不必绑定到每个单独的sketch文件的元素。

这就可以创建一个共享的资源库（托管在Dropbox或者其他云端），团队可以使用这个库来将元素拖拽到他们的设计里。如果库更新了，所有团队成员的也会自动更新。

按钮、输入框、样式等有一个预设库可以降低元素被反复重新设计的可能性，这样能节约时间。

这是我分享库的一个例子

创建一个文档来解释怎么使用它们。从哪里可以得到它们，所有当你有新的设计时，你只需要把工具箱给他们，他们就可以准备好了。

·为sketch设置名字规范

命名图层：每一个图层尽可能的多描述。“图层0 副本副本”是不能被采用的。

图标：图标/界面/普通/事例_名字（使用/，当你导出元素时他们会被自动添加到文件夹）

其他：水平_分割线

·命名styles和symbols

不要创建随机的styles或者symbol，要一直遵循模式。

下面是我一些正常命名的例子。再次申明，没有所谓正确的格式，只要找到一种对每个人都有用并且坚持使用它。

图标/界面/状态/事例名字”

“主要-重点/(颜色名字)”

Symbols:

图标/图标50像素/蓝绿色/图标-右/悬停状态

我推荐读一下这篇文章

 

·栅格系统，8pt栅格

设置好你的栅格系统会使布局和位置变成一种十分被动的操作，你甚至不必考虑这些东西之间会相隔多少空间，因为你知道你的栅格系统的网格间距会使你更精准的进行设计，无论你在设计网页、手机应用还是图标，使用网格它会确保你在使用持续相同的大小个位置。

我喜欢用8pt栅格系统

8pt栅格系统就是说页面的所有元素都使用8pt大小为基本栅格。对我而言，任何被定义的高度、宽度、边距都会是8的倍数。

·字体大小和模块化尺寸

一旦选择了一种漂亮的字体让你的文本更简单的阅读。现在你会想字体大小该用多大。好吧，一个模块化尺寸是决定你字体大小的最好方式，甚至你全局的比例。

你首先挑选一个比率然后选择你的文本基本的字号，例如16px。你通过相乘得到一系列的数字：16px,26px,42px,68px,110px。

·字体和文本样式

使用不同的字体大小和粗细来传递一种视觉上的韵律。

我喜欢给我自己设定一个文本可能的最宽的宽度，所有我的字体表看起来像下面这样，我用时也创建了一个暗色的版本。

设计是动态的，适用性是关键。功能，特色和美学经常会变的。在第一阶段定义文本格式会在一直对你有帮助。

在文本样式名称中使用斜杠（见上文）将在样式下拉菜单中创建一些子菜单

“一个模块化尺寸是每一个都有内在联系的一连串的数字。使用黄金比例，例如，我们可以通过乘以1.618作为最大数，除以1.618作为最小数来对模块化尺寸产生价值。”

·探索

双方设计重要的方面是要了解你正在设计的产品的目标。我们总试图直接跳进像素里然后很快速的撸出项目的UI。如果是一个崭新的网站，或者一个新的功能，首先要确认你要取得的清晰的目标。

我搜集所有的图片进我的灵感文件夹。我使用情绪版主要为了和我的同事讨论我的想法然后描述一些视觉的点子，在我开始像素设计流程之前，我会尽可能多的搜集信息。

颜色/字体探索

·初稿

设计永远是正在进行的过程。这一路上，你为了得到一个很好的结果会迭代很多。初稿出来也是为了搜集第一批的反馈，为了收集你的同事、客户及潜在用户的反馈，你不必设计的很完美。

我通常会同时出2个草稿版本，所以我混合了颜色按钮和字体样式等来构建基础。通过这个草稿，我就能知道我想往哪个方向走，颜色及总体的样式。当我其余画布是空白的时候我经常会纠结于设计一个好看的头部。设计的时候我学会了先把所有内容放进去—仅仅先考虑布局和字体，这会使设计精美的细节及用内容排布来实现整体概念更加容易。

现在所有都好了，我知道了使用哪种颜色和字体来定整体风格基调，在这一阶段，我不组织任何元素，我会在我知道使用哪种基调后再去做。

·创建一个画板库

画板库的概念很简单：把一个界面拆分成能复用的板块，把它们分组、命名，在它们之间建立规则，为所有组成部分生成一个概述，让他们能为整个团队设计使用。

经过探索，回顾和迭代，你会得到你喜欢的样式，你已经定义了全局的样式板。

现在的任务是创建一套占据所有状态和场景的模式和组件—基本上创建了一个全部的UI工具包。

视觉系统是由基础性的元素构成的，例如头部和内容定义的文本样式、颜色板、输入框、表格，这些我们统称为板块和组件。

这包括了导航、卡片、表、空状态或加载状态、提示、警示消息和模态。板块具有多面性，它能包含组件，也能一起配对起来生成一个模板。

一个样式库跟基础代码是紧密联系的，因为它通常是由基础代码本身用工具生成的。

样式指南

·使样式库可用的方法

我们怎么能让样式库更多的在组织中被使用？也许是将关注点从模块化方法转移到一个更全局性视野的组件。下面是一些对于这个问题的有趣的解决方法。

-原子设计理论

原子设计是网页端基于设计系统的思考方法的一套流行的原则。它可以帮助网民们考虑用户与之互动的元素以及如何将它们整合到一个整体的系统中。它基于在设计阶段应用的网络概念的基础。由Brad Frost创造，他的指南在网上是可以搜到的。

这是一篇解释了什么是原子设计的很棒的文章：

·通用电气Predix设计系统

这是另一个原则和应用的经典案例。

练习

Predix最终版的设计系统包含Predix平台设计团队创建归档的板块，也有些画板是由打造Predix顶尖产品团队做出的贡献。通过多个团队的贡献，我们可以通过内容填充来完善整个设计系统的层次结构。平台团队，作为设计系统的管家，为原理、基础、组件和模板提供了大部分基础的设计模式。另一方面，产品团队从设计系统的更多应用层面提供了设计模式。

包含由多个产品团队创建的设计模式不仅有助于填写设计系统的层次结构，而且它已经证明了我们如何实现我们共享和重用的目标。团队正在绘制已经在其他产品中被使用的设计模式，而且他们很急切的想分享和炫耀他们的设计给团体的其他人看。基于发布数个月来的反响，Predix团体正渴望学习分享新的设计模式。

那些和其他之间，你需要找到最适合你们组织通俗易懂的方法。

·不要忘记UI动态视觉模式

通常我们在设计界被称为“品牌”，采用与之对应的视觉语言和他们核心价值的表达。从布局、颜色、字体、照片、做什么不做什么，还有很多很多都是需要思考的。这些品牌的建议是一种品牌的表达，使用视觉设计媒体的基本原理和符号系统，符合我们队品牌承诺的期望。某些字体因为其含义而被选中。被选中字体的含义也撑起了品牌的价值。你可以说设计一系列产品跟品牌的关系可以有着连续的经验总结。

同样的，用户体验中的动效可以是一门视觉语言本身的思考，包含像时间、速度的要素，还有一系列时间上的属性，不仅限于透明、大小、旋转、位置、形状、叠加模式、锚点、遮罩和哑光的材质表现等等。每个元素或属性恰好像是设计的基础，承载着他们各自的意义。

一些有用的资源：

·最后

这些是我再构建由多个产品团队创建的包含设计模式的设计系统的最重要的点。不仅仅帮助填充了设计系统的层次结构，而且它决定了我们怎么通过分享、复用和组织工具来达到我们的目的。

建立和维护一套设计系统是相当大量的工作，但是如果我们从一开始就开始做好它，那么创造有特色的产品会变得更加方便和快捷。

我在这篇文章里说的是在开始真正非常重要的工作之前的工作流的设置。

感谢大家的阅读，以上就是全部内容了。