8个步骤,成功建立一套设计规范系统

设计规范系统最近在行业里变得很流行,相信你肯定已经在很多地方见过这个词了,我最初认识到“设计系统”这个词,是在我们2019年1月设计网站设计系统时开始的。作为在99.co仅有的两名产品设计师之一,其实如果我们要开始一个新的项目,手头上的资源是很吃紧的。

8个步骤,成功建立一套设计规范系统

然而,我们坚信设计系统可以帮助不仅是我们和开发的同事,消除现有不统一的设计,并随着公司逐渐扩大,改善未来的工作流程。话虽如此,想要推动这个项目,我们仍然需要做很多的准备工作。

这里想先让你知道将要看到的是什么,我会先定义我们这里说的设计规范系统是什么意思——是一个设计师和开发人员共同分享的,一个储存着多个可重用组件的使用规范指南的知识库。它应该呈现所有现存组件的使用方法,包括什么时候用、如何用并带有随时可用的代码。

尽管我们的设计系统还在制作中,我希望能够把这个过程记录下来,并分享我觉得有帮助的技巧和工具。

步骤:

  1. 审校原有组件
  2. 研究其他设计系统
  3. 列出所有模式和组件
  4. 计划一个时间线
  5. 研究和讨论组件
  6. 创造设计符号(风格指南)
  7. “设计”设计系统
  8. 实施设计系统

第一步、审校现有组件

为了得到一个能够看到所有需要迎合的使用场景鸟瞰图,很重要的一步就是要审校我们产品里现有的所有组件。对,每个页面中的每个组件。这是至关重要同时也是很枯燥的一步。于是我们通过截图的方式把它们整理到Trello里面。

8个步骤,成功建立一套设计规范系统

带有卡片列表和标签显示的Trello板

每一个列表(从上到下)代表着我们网站上的一个页面,例如:主页。每一列里面的每个卡片,都包含了页面上不同部分的截图。每一个卡片都有标签标记(下图最右方),用来记录每个部分里面包含的组件。每一个标签都根据不同类型进行颜色区分,例如:复选框、单选按钮、文本框等是数据输入的方式,所以这些标签都是绿色的。

8个步骤,成功建立一套设计规范系统

经过“复选框”过滤筛选之后的Trello板

经过这样的一番整理,我们可以轻松地搜索到特定的页面,并利用最右方的标签版面去过滤组件。从而能够看到这个组件目前在所有页面中的使用场景。它也能帮助我们找到设计不统一的地方。

第二步、研究其他设计系统

我们参考了以下设计系统去帮助塑造我们想要的系统:

  • Atlassian
  • Ant Design
  • IBM
  • Zendesk
  • Workday
  • HubSpot
  • Salesforce
  • Shopify
  • Bootstrap
  • QuickBooks

我们想要从这些非常棒的设计系统中提取最佳的范例,同时参考它们是如何组织和展示内容的。下面我列举两个我个人非常喜欢的系统—— Atlassian*和Ant Design。

*译者注:Atlassian是澳大利亚的一家开发与协作软件公司,主力产品为专门用作追踪应用程序问题的JIRA。

8个步骤,成功建立一套设计规范系统

Atlassian将他们的设计系统分为品牌,市场营销和产品。因为不同的设计需要不同的指南,满足不同设计的需求能够保证整个公司设计语言的一致性。例如,市场营销或许需要更多颜色去设计好看的宣传资料,相比之下产品部门一般只需要一套固定的颜色去呈现不同组件的交互状态。Atlassian也为每一个组件提供了极度清晰的使用方法,从它的不同风格到在使用场景里的各种变量以及它的最佳范例。

8个步骤,成功建立一套设计规范系统

Ant Design把他们的组件分成不同类别,例如:数据显示、数据输入、导航等。这对整理和查找组件有非常大的帮助。他们的页面在右上角提供了锚点菜单,因此用户不需要滚动页面便可以清楚地知道里面的内容。在每一个组件页面开头都放了它的风格和变量,并且都是交互式的。里面附带的源代码的功能,也使开发人员能够很快速地复制或在不同的环境里打开并使用。他们设计系统的用户体验非常值得称赞!

第三步、列出所有模式和组件

研究完其他设计系统后,我回到了自己的项目上。通过Trello整理出来的标签和过滤,列出我们需要的模式和组件。这个概况能让我们知道什么组件需要被审核,并制定相应的追踪和时间计划。

8个步骤,成功建立一套设计规范系统

在Google文档上面整理所有模式和组件

我根据这些组件的功能特性,把它们整理成以下几个分类:按钮、数据输入、数据显示、反馈和导航。每当我们完成一个组件的讨论,便会持续地审核和设计这个列表上的内容。

第四步、规划时间线

接下来,我们制定了一个周计划来记录谁需要做什么。这帮助我们的相关同事和所有人参与到更新设计系统的进程中来,并有助于我们的资源分配。我们计划了需要讨论哪个组件,一般是根据Trello整理的使用场景找出最常用的组件开始入手。一些例如字体排版,颜色和布局的模式,也是我们首先要讨论的内容。因为这些都是构成其他组件的重要元素。

8个步骤,成功建立一套设计规范系统

Google表格上的时间线规划

在需要完成我们每日原有的任务,我们利用仅剩的时间,期望在每周尽量做2-3次设计系统的讨论,每次讨论大概持续2个小时。当然了,这都是理想化的情况。有更多的时候,我们两个设计师忙得不可开交,并不能抽出时间来。只有在非常偶然的时候,我们才能够抽出时间来讨论设计系统,然后再补回其他工作。

除了每周讨论之外,我们还规划了以下几个步骤——在Sketch里创建组件用到的符号、为设计系统设计页面、交给我们的前端工程师建立这些页面。根据我们每一周的进程,会持续相应地更新我们的时间线。

第五步、研究和讨论组件

讨论的最终目标是为了设计每个组件的属性和状态,并且建立它的使用指南。对于每一个组件,我们会审核在Trello上列出的使用情景和研究它的最佳范例。这包括阅读文章和参考其他公司是如何使用这个组件的。

一开始的时候,我们会在讨论会议里做这些组件调查。但之后我们意识到,这些调查并不需要我们两个设计师同时在场。想要更好地利用这个时间来讨论,我们应该先提前在各自的时间里做好调查。

8个步骤,成功建立一套设计规范系统

在Google文档上记录我们的讨论内容

我们在Google上记录我们讨论的内容和如何达成那些决定的过程。这对我们日后要回顾之前讨论过的组件起到了很大的帮助。它们能够帮我们会想起以前的思考和决定过程,从而帮助我们更好地完成日后的讨论。

第六步、创建设计符号

随着讨论的顺利进行,我们开始建立我们的风格指南。我创建了文字和图层风格库,并在Sketch创造了每个组件的符号并包括了它的状态和变量。

8个步骤,成功建立一套设计规范系统

Sketch上的文字和图层风格库

8个步骤,成功建立一套设计规范系统

Sketch上的组件库

再次,我们梳理了许多文章,查看了许多 UI设计包,对比它们的命名方式,以及如何创建套件等。我发现其实并没有一个整理这些组件的最好方法,只有最适合我们目前的工作流程的方法。很可能的是,当我们使用的工具随着时间更新换代,我们也需要调整我们的工作流程去充分利用这些工具。

举个例子,Sketch60最近更新了新的组件面板和Popover。我们之前风格库的命名方法是根据尺寸、宽度、颜色、排列对齐、和行高来进行多个图层的归类。而因为新加的Popover里的搜索(其实更像过滤)功能,我们现在则需要滚动页面和点击多个文件夹去查找一个特定的风格。

8个步骤,成功建立一套设计规范系统

给文字风格库更新过的命名方法

为了迎合这个更新,我把我们的命名结构平整化了,从此我们能用[尺寸][宽度]来搜索所有带/不带行高的字体颜色、或用[颜色]来查看所有根据大小和宽度排列过的字体。

因为当显示大字体时,Popover里显示的水平空间有限,我们的中性色板的命名也从Dark、Mid、Light Neutrals相应地改成了D、M、L Neutrals。在以后的日子里,我预测将会有更多的修改。但总体来说,因为这些更新,我可以肯定我们的效率也得到了提升。

这里一些有用的文章:

  • 在Sketch中释放符号功能的所有潜力
  • 我们一直在等待的Sketch更新
  • Sketch 58 —— 智能布局
  • 在Sketch里使用智能布局
  • Sketch 60和新组件面板 —— 如何使用它?
  • 在Sketch组件面板中如何使用风格和符号功能

……还有Sketch插件:

  • 查找和替换:在图层和符号里替换文字
  • 共享风格查找器:查找共享(重复使用过)的图层和文字风格
  • Sketch执行器:利用键盘更快速地执行Sketch动作
  • 符号整理器:按字母排序整理符号,和根据符号名字进行分组

第七步、“设计”设计系统

上文提到,我们想要把其他设计系统里的最佳范例整合到我们的设计系统中。在每个组件都被符号化之后,我给它们的每个页面都设计了原型图,然后递交给我们的前端工程师去建设这些页面。

8个步骤,成功建立一套设计规范系统

Sketch上的设计系统原型图

很快地我们意识到这不是我们最理想的工作流程,因为如果我们想尽可能地按照我们的意思去做,建设这些页面会占用我们本来就已经很有限的资源。因此,我们找到一些能够帮我们简化流程的工具,好让我们的资源能够更好地分配到必要的环节上,例如:构建组件和把它们实行到产品中去。

能够找到一个可以整合到我们现有的工作流程并带有以下功能的工具是很关键的,例如:版本控制、自定义品牌风格功能等。我们找到了uxtools.co提供的一个对比设计系统工具和它们的性能的表格。

我尝试了几个不同的设计系统工具,例如brand.ai (现在叫Invision DSM)、 Lingo 和 Zeroheight 以帮助我们找到最能满足我们需求的一个。尽管每一个工具都有其独特之处,我们最后选择了Zeroheight 。

8个步骤,成功建立一套设计规范系统

在Zeroheight上的设计系统

每个页面我都创建了不同组件及其变量的页面和章节。我根据每一个使用情景清晰地列出了组件的使用范例。并且用插件把在Sketch里的风格符号直接导入到Zeroheight中。

用户可以通过用动态的HTML片段和Storybook组件实时地呈现组件例子。开发人员也可以很容易地把设计同步到他们的设计指令API中。

第八步、实行设计系统

在整个过程中,和工程师、产品经理和其他相关的同事沟通是至关重要的,特别是最后这一步。为了实行这个设计系统,我们需要构建新的组件,把它们连接到Zeroheight,并且替换掉我们现有系统里和设计文档里的旧组件。

8个步骤,成功建立一套设计规范系统

在Google表格中的实施方案

我从我的数据分析师那里得到了一份最常访问页面的列表。根据排列这些最高流量的页面,我们决定了在不同阶段更新这些页面上的组件。最初的方案是在每两个星期的冲刺计划中拿出几个冲刺工作量来给设计师和工程师去做这些实行工作。

但是作为一个初创公司,我们常常只能优先做产品功能的工作,于是我们并不能按照原计划做设计系统的工作。与其腾出时间来修改特定的页面,我们退而求其次地选择了去更新本来就需要设计新功能的页面里的组件。

8个步骤,成功建立一套设计规范系统

Zeplin上的整体风格指南

另外一个帮助我们设计师和工程师在实施设计系统过程中提高协作的工具叫Zeplin。它包含了整体风格指南和连接组件的功能。如上图所示,我们把所有的新组件符号直接上传到我们的风格指南。

然后我们的开发人员能够把组件跟他们的代码库和记录工具(如Storybook或Github)连接起来。等以上步骤完成之后,开发人员可以随时在Zeplin上查看设计,他们能够看到连接到我们的风格指南的这个组件的全貌,并重复使用这个组件。

8个步骤,成功建立一套设计规范系统

总而言之,这就是如何从零开始建立我们的设计系统的过程。这里面还有很多工作需要完成,但缓慢的进展总比没有进展好得多。随着我们继续更新和更好地迎合我们公司的需求,建立一个设计系统是一个永不结束的挑战。一开始或许会让人很气馁,但小小的一步都能够离实现这个项目更近一点。慢慢来(Baby Steps)!

原文作者:@Ruiwen Tay

原文地址:https://uxdesign.cc/starting-a-design-system-in-a-start-up-3359f2d4784b

业界动态

6步打造私域流量,让企业度过疫情大考

2020-3-18 17:38:20

业界动态

从财报对携程旅拍产品进行分析

2020-3-18 21:34:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索