一、什么是设计原子

原子一词最早出自大家熟悉Atoms Design-原子设计理念，早期由Brad Frost提出 ，Web页面设计上沉淀出的一套设计原则：即将我们设计中的元素、模版拆分成最基础的原子单元，再将这些原子按需有机组合成新的可复用的元素或模版的设计过程。

 

 

 

原子是我们设计系统的绝对基础，它包括调色盘，字体，单个元素（标题，段落）以及投影、缓动参数等。就像设计师习惯将重复使用的元素及模版存成symbol嵌套在页面里反复使用一样，前端工程师也利用Less、compass、Sass等类似工具，让UI样式的修改和调用更轻松。看似大费周折拉长了战线，实则是让设计或代码更方便组织和维护。

 

 

二、提炼设计原子对接开发

在经历一些大的项目改版后，通常我们会沉淀一些新的视觉语言，比如圆角的度数、投影的弥散程度缓动参数等，当然如果组件整理得足够优雅，可以做到修改某个组件的样式迭代关联组件和页面，开发侧也是同样，前端工程师可以通过less变量存储及样式继承的特性动态修改所有代码块关联的UI样式，Native开发也可以通过xml或json文件，存储全局样式变量进行调用关联，前提是设计师和程序员在UI样式变量申明和嵌套规则上达成共识，从而保证设计资产和代码样式库的迭代步调一致，甚至熟练的话可以由设计师直接完成设计变量配置文件的修改更替工作。

想了解样式表代码的工作原理可以移步我的github站，这里我按AntDesign样式表代码嵌套逻辑整理成sketch源文件。

https://github.com/shengjun89/Ant.Design-template-style-customization

 

Less语言的一大特性就是继承，是不是像极了sketch里一层层嵌套的组件

 

 

 

整理后的symbol可以一一映射到样式表的每一段代码上

 

三、利用Framer可视化你的设计原子

一旦你的样式配置文件被设计好，就需要设计师在每次落地执行时通过标注变量名称的形式和开发对接，迭代配置文件时也需要现在设计工具里调试好参数再复制到配置文件里，这样一层思维转换对于一贯视觉驱动的设计师来说极其不友好，我们不确定一段参数的调整会给设计走向带来怎样的变化，基于此我萌生了将设计原子打印出来的想法，制作一款在线工具方便开发和设计查阅每个变量名称及其对应值。

 

{  "fontHead" : {    "size" : 26,    "weight" : "bold"  },    "fontCaption01" : {    "size" : 18,    "weight" : "bold"  },  "fontCaption02" : {    "size" : 16,    "weight" : "bold"  },  "fontCaption03" : {    "size" : 14,    "weight" : "bold"  },  "fontBody01" : {    "size" : 14,    "weight" : "regular"  },  "fontBody02" : {    "size" : 12,    "weight" : "regular"  },  "fontTiny" : {    "size" : 10,    "weight" : "regular"  }}

和Native开发约定的配置文件目录及结构

 

 

 

起初我打算用Framer里的Design Mode去画出每个调色盘，圆角投影样式，引入json配置文件直接渲染，但是由于新增的配置对象需要每次手动添加调整，所以我调整了json配置文件的结构，以数组的形式动态渲染每类配置对象的数量、名称和样式。之后按照既定的json规范录入新的内容便起到迭代样式表的作用。https://lc-onsg2j7w.cn-n1.lcfile.com/0185410229137d5e7591.json复制此链接可在浏览器预览样式表里引入的json结构。

除了调色盘、投影等视觉上可以感知的参数外，动画的缓动和时长参数，我们也以可交互的形式在样式表里陈列出来通过操作直接模拟感知。动画元件和时长同样可根据json内容动态渲染；

 

为了方便快速预览降低试错成本而增加了替换品牌色的功能取代一次次修改json源码；

 

自动计算生成品牌色的梯度范围的功能则保证UI取色更科学有依据，不需要设计师手动挨个添加各梯度色值并赋予变量名称；

 

最后，保证样式表渲染无误，使用复制功能，提取变量对应的参数值复制到我们的配置文件里，网页的形式方便设计可开发快速对照完成标注及核对工作。

 

如果你也有用Framer编程习惯的话可以移步查阅我在github上就此项目添附的说明文档，上面分享了我写的一些蹩脚的函数源码，用来打印不同梯度的品牌色，你可以复制该代码块在自己的原型项目里引入调用。

另外你也可以下载我的项目资源包，使用在线json编辑工具生成自己的样式表url引入替换，生成自己的DLS样式表。

 

 

在线json编辑工具https://www.jsonohyeah.com/

接下来我计划将新定义的栅格布局的规范更新到样式表存储成变量，后期我们会持续迭代样式表版本并同步到github站。

四、总结

 

搭建设计系统不仅仅是给团队提供一份UI样式指南，他更是团队工作的方式以及团队价值观集中体现，不光是视觉，文档整理和设计流程搭建每一步都伴随大量的实验、失败和再测试，而设计原子定义则是系统搭建过程中的一个重要里程碑。如果你也是所在企业DLS设计团队的一份子或致力于设计系统研究的话，欢迎留言一起交流心得。