京东出品！如何搭建高效的设计体系：利其器

现在规划职业中小到每个团队，大到每个公司都在致力于建造服务于自己的规划系统，毫无疑问在职业背景下，一套有用的规划系统能够协助团队或公司快速完成规划的产出。现在自己有幸参与到京东数坊项目中，敞开了京东数坊的一段规划系统构建之旅，在这期间咱们经过规划、建造、最终服务于实践项目中，虽然现在还不完善，但是也有阶段性成果能够共享。

为什么要去建立规划系统

显而易见这个是一套被充沛验证过的，并且能行之有用的辅导协助咱们在规划进程中，高效的产出并坚持产出的共同性，也能让咱们团队协作之间愈加高效，解放咱们重复画图的东西人特点。

数坊规划系统

以数坊为例，数坊是一个 B 端营销东西类产品，产品页面组件复用率高，而且涉及多人协同规划，一个有用的系统系统能协助咱们作业愈加的高效。咱们规划系统的建造并不是从 0 开端的，咱们前期有一些堆集了，只是没有完善的归类到详细的系统中，这种现状其实也是大部分规划团队最开端都存在的情况，咱们怎么把这些堆集的财物和文档归类整理集合成为咱们规划进程中的“东西包”，“东西包”中详细会集合成为哪一些财物与文档。然后“东西包”能够满足日常需求迭代，能让咱们的精力更专心于去深掘用户与事务，去探究更老练的规划言语与产品开展创新方向。最终产品获得用户共同的好口碑，逐渐堆集构成产品影响力，立足于职业一席之地。

• 利其器：建造规划根底设施，完善健全咱们手中的“东西包”
• 善其事：专心于去深掘用户与事务，探究产品方向提高团队创新力
• 立于世：打磨产品体验，依托用户口碑构成影响力，立足于职业

咱们计划用 3 篇文章来共享以上 3 点。本篇为「高效规划系统建立」系列文章的榜首篇，首要共享一下怎么去建造规划的根底设施，咱们在数坊项目中是怎么样去一点一点打磨手中东西的进程。现在这套根底系统也还在完善弥补中，文章共享一点经历，欢迎咱们沟通主张与弥补。

利其器：首先配齐东西

一般咱们扩展认知的办法是知道它、仿照它，超越它。规划系统的根底建立现在有十分多的参阅，这其中包含现成的网站与书本，Web 端就有 Microsoft Fluent、Shopify 等等优异的规划系统库，书本《规划系统：数字产品规划的系统化办法》也讲述了十分系统的办法。有了这些参阅与办法，那咱们要做的便是结合产品本身的需求一步一步去实践。

首先咱们了解现在现状，看看自己手里有什么，先把已有的财物完善。其次参阅优异规划系统库中包含什么，对自己做建立弥补。最终产品开展的未来，能储藏的去探究添加。

利其器：打磨东西

数坊全体规划系统现在依托于 sketch 建立，全体思路也从 sketch 提供的变量库、款式库、组件库来进行展开。

1. 色板的建立：

虽然常用的主色与辅佐色能覆盖大部分产品的 UI 规划，但是跟着产品体量的添加，事务场景的多元，咱们就需求构建完整的色彩系统来支撑其开展。咱们常用色板建立的办法有手动叠加法、公式计算、东西生成等。

2. 根底款式的完善：

根底款式也叫感知模式，是一种主观感触，UI 中每一条线的粗细、色彩、长短都影响到界面的全体调性，坚持根底款式的统一是提高 UI 共同性十分有用的手法。

3. 图标库的建立：

图标库咱们常以图标文档的形式存在，用则打开文件取之，咱们进一步对图标字体化与 Symbols 化，常用图标嵌入 Symbols。当然能够做的更深，例如 iconpark 的可装备化。

4. 组件化：

大部分团队都在做组件化的，这种标准化的作业方式能愈加高效的达到产品方针，这其中就包含规划组件化与前端组件化，这儿能够提供一个十分优异的 UI library 的参阅 tetrisly，它包含 sketch 与 figma 的组件，系统学习能够参阅一下它。

5. 产品大局规矩：

前面说到的根底款式与组件其实都是大局规矩的一部分，为什么需求再单独弥补呢？由于在大体量产品规划中，每个模块都由不同的同学担任，这样大局产品的把握就会降低，需求去弥补大局规范说明去保持产品大局通用部分的共同性。

6. 品牌言语的探究：

探究部分一般都是为未来而储藏的，品牌言语是基于产品开展方向，品牌言语的持续探究是为产品宣扬添加产品影响力的手法之一，好的言语能够对内辐射产品内部，对外辐射宣扬推行。同样也是下一阶段产品改版升级的重要参阅。

总结

规划系统根底部分是一个长时间的进程，咱们需求花时间去保护更新，使之越来越完善，越来越高效。但是它始终是咱们保持作战的东西，咱们不能够沉迷打磨东西而忘记了东西是用来干活的，当然如果能做到极致，乐意做个匠人也未尝欠好，嘿嘿。

好了，以上便是咱们的一点点经历堆集，期望能够协助到咱们，咱们有什么主张或纠正欢迎谈论沟通。下一篇咱们将带来「高效规划系统建立之怎么善其事」咱们有了高效的东西，那么咱们就能集中精力去寻找机会点，去解决那些用户痛点中的顽疾。

欢迎关注「JellyDesign」的小程序：