前言
每当你做设计规范时候有没有很苦恼,如何才能把界面所需样式覆盖完,如何在多平台,多系统之间采用一致的语言而不会影响体验,如何保证多系统品牌调性一致,国外一个网页设计师 Brad Frost ,写了一本书 Atomic Design ,这本书是关于如何构建套设计系统方法论的著作,今天就和大家详细了解下
原子设计是什么?
到这里相信大家应该明白其工作原理了,一套熟悉的模式出来了。
为什么要学习原子设计?
实例操作
前面铺垫了那么多,终于等到这一步了,有木有很激动,好了回归正题,前面大概介绍其工作原理,那么现在准备表演了!我会分详细步骤和大家说
1.构建原子 2.构建分子 3.构建生物 4.构建模式 5.最终页面1.构建原子
这里建立的原子是页面中所需要的基础元素.前面有介绍,我如果忘记再去看一遍,首先我们开构建视觉基础单元(如下我只是做示例有这些元素,没有详细写完,不然这篇文章会很长) 字体 (整体系统字体层级,这里省略详细内容)
PingFang SC Regular
PingFang SC Semibold
图标(整个系统图标调性走向,大小,品牌符合)
颜色(整个系统颜色体系)
网格(系统所需间距系统)
阴影(设计语言所需阴影,没有可以不要)
黄金比例(界面所需尺寸比例)
2.构建分子
分子是前面构建原子的任意组合,这里你可以构建出系统所需要的所有小分子,既单个小组件,这里你需要穷举所有可能性,如下面的列表和按钮分子
3.构建生物
生物其实就是由多个分子集合而成如下:黄金比例/头像列表/字体/按钮 / 图标(一个功能组件)
4.构建模式
模式其实就是由多个生物集合而成;导航/卡片
5.最终展示
最后就是由前面构建好的一系列生物组织来构成最终的视觉页面
总结
写在最后,原子设计是一套具有科学严谨的创建设计系统的方法论,是一个构建ui系统的心理模型,因此希望以后大家都能从中借鉴一些方式,那当我们真实设计中所运用时候,如何去做呢?首先是需要确定视觉语言方向(就是前期风格探索),定好方向后,开始运用原子设计方法论来构建一套科学严谨且灵活性高的设计系统
MicroUX小铺 好产品拼的是共情力
Mini Program