原子设计理论 UI案例详解

前言

每当你做设计规范时候有没有很苦恼，如何才能把界面所需样式覆盖完，如何在多平台，多系统之间采用一致的语言而不会影响体验，如何保证多系统品牌调性一致，国外一个网页设计师 Brad Frost ，写了一本书 Atomic Design ，这本书是关于如何构建套设计系统方法论的著作，今天就和大家详细了解下

原子设计是什么？

原子设计是创造设计语言的一套方法论，就是由原子、分子、生物、模式，页面构成，如上图（当然这不是唯一的方法，但是这个方法确实很实用）可能大家有些不明白，说更清晰一些就是，我们构建UI界面其实都是由一些小原子组成，如颜色、字体、空间、图标／图形、阴影、动效、声音等等，这些都是所有界面的基础元素，我们叫做原子。那么再来细一点，假如按钮，它是分子，它是由图形或字体或颜色这些小原子组成，明白了吗？继续推，那么构成生物组织就是由这些前期定义好的分子组成，列如下图是一个分子

到这里相信大家应该明白其工作原理了，一套熟悉的模式出来了。

为什么要学习原子设计？

在多屏时代，我们时时刻刻都在设计产品界面，需适配多系统，其中很重要的一点是如何在多系统之间保持体验一致性，很多人想到的就是规范，对，没错，可是如何做一套严谨逻辑好，灵活的设计规范，那么原子设计可以帮助我们来很好的实现它，它在构建设计系统中算是比较科学的一种方法，国外很多设计团队都在使用这样的设计方法，来规范自家产品组件，那么今天我们来详细探索它的一些实际运用案例

实例操作

前面铺垫了那么多，终于等到这一步了，有木有很激动，好了回归正题，前面大概介绍其工作原理，那么现在准备表演了！我会分详细步骤和大家说