DAY.18

“用碎片时间学习”

1、原子-按钮

解构按钮

按钮可以拆分为：解构按钮、框体结构、按钮尺寸、字符限制（中/英）、带图标按钮和按钮状态，当我们去理解一下按钮时，是不是先从结构上剖析它，完全理解它的构成以后，再通过自己的理解去改变这些构成，并配置出自己想要的按钮来。那解构按钮就是去理解这整个过程的方法

1.2、按钮-框架结构

完全理解按钮的构成后得先配置框体。框体的结构分为三种形式，分别是圆角、半圆角、直角。从颜色上又分为三种，白色、黑色和彩色。半圆角也就是有曲率的按钮，曲率值的设置比较麻烦，因为按钮的尺寸有三种，需要根据不同的尺寸设置不同的曲率

1.3、按钮-按钮尺寸

按钮的尺寸（高度）分为大中小三种，分别是32px、40px和48px，以适应不同的需求。而我自己做了4个尺寸，分别是24px、32px、40px和48px，增数为8，前者是小高度，后者是大高度。高度越高就说明页面越大，更适用于展示型页面；高度越低就说明页面越低，更适用于功能性产品

1.4、按钮-字符限制（中文）

绘制一个按钮时要对按钮中的字符有一定的限制，像两个字、三个字这样固定字数的按钮，可以给它固定一个数值。而多于三个字，或者字数不固定的情况下，就要设置好字符与框之间的距离，来时宽度做相对的变化

1.5、按钮-字符限制（英文）

由于英文字体结构与中文不同，中文是由几个汉字组成的一个词，英文则是由不同的英文字母组成的单词。所以限制英文这样的按钮时，要比中文多稍微多加一些宽度，这样按钮就不会显得过于拥挤，相对比较舒服

1.6、按钮-带图标按钮（中/英）

带图标的按钮相对不太好画，如果把图标和文字都进行水平垂直居中，就会从视觉上产生差异，看上去左面留白大，并且整体往右面倾斜。这是因为图标字体的视觉重量比图标的视觉重量大造成的，避免视觉产生差异的方法就是把整体向左移动一些单位，这样的整体看上去就会显得比较的平衡了

1.7、按钮-按钮状态

按钮状态也是分为常规的这几种，分别是禁止、正常、点击和选中等状态。白色由深到浅，黑色由浅到深

2、原子-图标

图标定义了两种类别，分别是线性和圆润，一共加起来差不多600多个，来适应不同的需求，但600个图标风格比较单一，没有太大的变化，比较适合应用于系统/后台中。如果想做成一整套设计语言，就需要设计出不同风格的图标，觉得成本高也可以买一些国外付费图标

2.2、图标-产品图标

产品图标是品牌和产品的视觉表现。图标以简单、大胆、友好的方式传达产品的核心理念和意图。虽然每个图标在视觉上是不同的，但是一个品牌的所有产品图标都应该通过概念和执行来统一

2.3、图标-基础图标

基础图标属于整个系统图标里的一个小分支，主要由“基础的图标”组成的。如上下左右箭头、时间、位置、搜索、设置等都属于基础图标，基础图标应用最广也最为常用。在建立图标体系时应先考虑建立基础图标，这样利用帕累托定律（又称二八法则），就能减少80%的研发成本并带来20%的实际价值

2.4、图标-系统图标

系统图标指的是在系统中某些功能没有办法用语言表示出来，就要用图标这种符号化的方式去表达它们的含义。例如点赞、打印、评分等都属于系统图标

3、分子-组件

分子部分除了按钮以外的其他组件，构成了整个分子的体系。除按钮外设计了大概50个组件这样的分子，当然可能会有更多。设计的组件比较复杂，有三种颜色、三种高度和三种曲率，大大小小保守计算应该有1000个，都是一个人一笔一笔画完成的。今天简单的介绍几个

3.2、组件-侧边导航栏

侧边导航栏就是固定在侧边或从侧边划出的导航栏，一般应用在企业网站的触发型导航栏上，或后台页面/系统的左侧功能性导航栏上。侧边导航栏的方向是根据业务需求来做调整的，方向在哪边就往哪边对齐

3.3、组件-时间选择器

时间选择器的内容还挺多的，一个颜色有8种形式，三种颜色就是24种形式，再加上三种不同的曲率和不同的高度，组件真的还挺多的

3.4、组件-消息数/头像

消息数和头像我也做了一些，分别做了一位数、两位数、三位数和超出三位数的部分。消息数和头像也跟其他组件一样，颜色上有三种、曲率上也有曲率、圆角和直角三种

3.5、组件-气泡卡片

气泡卡片和文字提示小组件是最多的

3.6、组件-文字提示

前面列举了几个比较小的组件，比较大的组件也有很多，像这个高级搜索、校验表单、表格、弹窗、手风琴、卡片式列表、表格。对话框和抽屉等等，都属于比较大的组件，就不一一进行展示了

3.7、组件-基础列表

把头像和上面用原子设计配置过的文字组合在一起，就可以形成像基础列表这样的大组件了

3.8、组件-卡片式列表

下面都是组件展示了，也就不过多强调组件的重要性了

4、模块-导航栏

以上原子设计理论中原子和分子所包含的内容就大致讲完了。接下来在原子设计理论中，分子集合组成在一起并形成组织，影射到UI构成中就可以简单理解为模块。对于模块的定义可没有那么简单，例如大家熟知的Ant Design，它体系由上面讲的这几部分构成的，而实际却没有办法解决不同业务层的问题，因为他们没有对模块再进行规范，又或者有规范但没有公开化或开源。我定义的业务层导航栏模块，也是把它拆分成三种颜色（黑白彩）、三种曲率（圆角/直角/有曲率）、三种高度（32/40/48），以适应不同的业务需求，并把导航栏中的细小模块再进行拆分，例如搜索功能我做了几种样式，导航功能的多种不同组合等

4.2、模块-导航栏（交互）

当然了光从导航栏的属性与功能划分上来进行设计，还是远远不够的，这样单层面的设计没有办法适应各种业务需求。因此我在导航栏菜单的交互方式上定义了三种样式，分别是：无二级、内容少和内容多等，以适应不同的业务需求

4.3、模块-焦点图

业务层按照业务主要会划分为展示型网站和功能性网站两种，由于功能性网站基本没有焦点图这样的需求，针对焦点图这个需求，主要是用于展示型网站的。我设计的焦点图样式没有多少，也是由于沉没成本的原因，差不多设计了50个，相对都是比较基础的样式。但很多样化，有文字型、表单型、搜索型、设备型、产品型、引导型等等

4.4、模块-底部

导航栏和焦点图两个模块组合起来构成了头部这样的一个模块组，那相对的有头部是不是就要有底部啊，底部我也有设计它的样式，但不多就30个左右，一般网页底部没有太大要求，把要突出的信息都突出出来就行了。包含：Logo、导航、电话、备案、二维码和其他信息等

4.5、模块-功能模块

当我们把头部和底部的样式都设计好以后，就要开始设计中间的功能模块了。那针对不同页面具体的内容，会有相对不同的功能模块，这个没法全部给它规范死，只能从一致性和兼容性去规范。我设计的功能模块大概有300多个，它们可以随意进行拼接和搭配，以适应不同的业务需求

5、模板

模板和页面两个概念相对就比较好理解了，当很多个大大小小的模块组合起来以后，就会形成一个个的模板

6、页面

做完的模板可以理解为是设计稿，不能算是与实际上线的页面，把客户的真实内容填充到这些模板中就形成了页面

总结

来自网友的质疑：“原子设计流程不就是普通的界面设计流程吗”

答复：因为做界面设计的人理解界面设计流程。如果在做界面设计时不采用原子设计，而是从分子或者是模块开始设计，刚开始直接画框，而不是去配置颜色、线、按钮和图标，设计到中后期的时候就会出现很大的问题，包含迭代、一致性、统一性、不规范（字号与间距）等等问题。这种可能并不是没有，我在刚开始做网页的时候就是先画个框，也不会考虑事先考虑颜色和配置按钮的问题。所以原子设计理论帮助了设计师规范了整个界面设计及流程

欢迎加好友交流，增加社交圈，改变社恐