版权申明：本教程出自"罗耀"原创，感谢"罗耀"的原创教程分享！
另外我想对有这样观点"原子设计的设计流程我们都懂，这不就是一个正常UI设计流程吗"的人说一句哇。因为你们是懂UI的人，是处于工作中并有一定的工作经验的人，你们会开车肯定会觉得考驾照不难考。对于那些不懂得UI设计流程的人们来说，他们不清楚UI界面的结构与设计流程，所以就需要用原子设计理论，来进行一定的引导。
还有这样观点"中国人喜欢把简单变为复杂，一个简单的设计流程搞的这么复杂，也没有办法去理解"和"可以用其他的方法去理解UI，套用原子设计会显得有文化，高大上"，对于这两个问题我想说，这个理论是受认可的，也可以说是比较权威的，并不是我想把简单的流程搞复杂，这也不是我能控制的了的。我还是希望大家能够多去接受不同的观点，这对大家的设计道路帮助还是很大的。
大家都有自己的理解挺好的，用不同的角度去解读UI设计这本身就是一件好事。但问题在于每个人的认知不同，用自己的理解去解释，很像自说自话，我们应该寻找一个"共知"，一个能让大家都能理解的知识去解读它。所以Brad Frost套用化学去解释UI设计，我个人是可以理解他的。毕竟大家都接受过义务教育，多多少少都会懂一些。能想出一个简单易懂，并且能准确的描述出UI界面的构成与细节，还能让所有人都能更容易的去理解的一个方法，真的非常的难。也希望大家能够理解一下哇。
目录
1. 设计理论的五个层面
2. 原子
3. 原子 - 颜色
3.1 颜色 - 整体
3.2 颜色 - 划分
3.3 颜色 - 灰阶色
3.4 颜色 - 设置灰阶色
3.5 颜色 - 彩色
3.6 颜色 - 主色（颜色重量测试）
3.7 颜色 - 主色（色盲测试）
3.8 颜色 - 辅色（比例）
3.9 颜色 - 辅色（强调色）
3.10 颜色 - 辅色（语义色）
4. 原子 - 文字
4.1 文字 - 样式
4.2 文字 - 组块
4.3 文字 - 字体（中英）
4.4 文字 - 字号（标题）
4.5 文字 - 字号（正文）
4.6 文字 - 文本行高（标题）
4.7 文字 - 文本行高（正文）
4.8 文字 - 字间距
4.9 文字 - 文本行长
5. 原子 - 按钮
5.1 按钮 - 解构按钮
5.2 按钮 - 框体结构
5.3 按钮 - 按钮尺寸
5.4 按钮 - 字符限制（中文）
5.5 按钮 - 字符限制（英文）
5.6 按钮 - 带图标按钮（中/英）
5.7 按钮 - 按钮状态
6. 原子 - 图标
6.1 原子 - 图标
6.2 图标 - 产品图标
6.3 图标 - 基础图标
6.4 图标 - 系统图标
7. 分子
7.1 分子 - 组件
7.2 组件 - 侧边导航栏
7.3 组件 - 时间选择器
7.4 组件 - 消息数/头像
7.5 组件 - 气泡卡片
7.6 组件 - 文字提示
7.7 组件 - 基础列表
7.8 组件 - 卡片式列表
8. 模块
8.1 模块 - 导航栏
8.2 模块 - 导航栏（交互）
8.3 模块 - 焦点图
8.4 模块 - 底部
8.5 模块 - 功能模块
9. 模板
10. 页面
1.原子设计的五个层面
原子设计理论提供给设计五个层面，分别是原子、分子、组织、模板和页面，是不是很像产品设计五要素啊，表现层、框架层、结构层、范围层和战略层。今天从理论角度就不说那么多了，毕竟上一篇文章把能说的都说了《概念-原子设计理论》。
原子：无法进一步细分的UI元素，是界面的基本构成要素；
分子：形成相对简单的UI组件的原子的集合；
组织：形成界面离散部分的相对复杂的组件；
模板：组件放置在布局中，并演示设计的基础内容结构；
页面：将真实的内容应用于模板，并阐明变化形式以演示最终的UI并测试设计系统的弹性。
2.原子
原子是物质的基本组成部分。例如表单标签，输入框、按钮、图标等。原子还可以包括更多的抽象元素，例如色板，字体，以及界面中不可见的部分。接下来讲一下原子的抽象部分和组件部分的组成，看看这两大块都包含哪些内容，我会根据这些内容一个一个来讲，先来讲一下色板中的颜色。
这里我节省时间也不配图了啊~
一整套模块化的设计中，对于颜色的配置还是相对比较严格的。从整体上来进行划分，颜色可以划分为无数种不同的风格，对应不同的产品需求。例如我配置的颜色的风格有"谷歌风"、"Web标准"，还有我自己定义的"亮柔"，亮柔是融合了谷歌配色和苹果配色，调试出来的新颜色。这些基础颜色基本上都是运用在B端的，如果大家想配置更多的风格，如中国风或和风，可以自行定义。我配置了大概400多种颜色，以适应不同的使用场景。
FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/
当我们定义好整体颜色和风格以后呢，就要对颜色进行精确的划分了。从颜色的大类上来分，颜色会分为"彩色"和"灰阶色/消色"。彩色中又会进行更精细的划分，下面会一个一个讲到。而灰阶色会根据文本类和框体类的颜色的层级来进行划分，常用于"标题/正文/注释"、"分割线"、"矩形框背景"和"禁止/Hover状态"等。什么是灰阶色呢，简单来说就是黑色与白色之间颜色等级的值，下面也会讲。
上面讲过，灰阶色会根据文本类和框体类的颜色的层级来进行划分，文本类比较好理解，就是标题、正文和注释等文本。而框体类指的是边框的颜色、分割线的颜色、背景颜色和Hover颜色等等.. 灰阶色有以下这几种，颜色越深层级越高。图是三年前数值我没改，不要做参考。
当我们把灰阶色应用到文本中，文本的层级就突显出来了。文字如果不用颜色来突出层级的话，那么标题、正文和注释的字号差别不大时，就会出现分不清楚谁是标题和正文的情况，这样就会降低用户对文字的可读性。
飞特游客
委托设计