DAY.17

“用碎片时间学习”

1.设计理论的五个层面

2.原子

3.原子-颜色

4.原子-文字

1、设计理论的五个层面

原子设计理论提供给设计五个层面，分别是原子、分子、组织、模板和页面，如同产品设计五要素，表现层、框架层、结构层、范围层和战略层

原子：无法进一步细分的UI元素，是界面的基本构成要素；

分子：形成相对简单的UI组件的原子的集合；

组织：形成界面离散部分的相对复杂的组件；

模板：组件放置在布局中，并演示设计的基础内容结构；

页面：将真实的内容应用于模板，并阐明变化形式以演示最终的UI并测试设计系统的弹性

2、原子

原子是物质的基本组成部分。例如表单标签，输入框、按钮、图标等。原子还可以包括更多的抽象元素，例如色板，字体，以及界面中不可见的部分。接下来讲一下原子的抽象部分和组件部分的组成，看看这两大块都包含哪些内容，我会根据这些内容一个一个来讲，先来讲一下色板中的颜色

3、颜色 - 整体

一整套模块化的设计中，对于颜色的配置还是相对比较严格的。从整体上来进行划分，颜色可以划分为无数种不同的风格，对应不同的产品需求。例如我配置的颜色的风格有“谷歌风”、“Web标准”，还有我自己定义的“亮柔”，亮柔是融合了谷歌配色和苹果配色，调试出来的新颜色。这些基础颜色基本上都是运用在B端的，如果大家想配置更多的风格，如中国风或和风，可以自行定义。我配置了大概400多种颜色，以适应不同的使用场景

3.2、颜色-划分

当我们定义好整体颜色和风格以后呢，就要对颜色进行精确的划分了。从颜色的大类上来分，颜色会分为“彩色”和“灰阶色/消色”。彩色中又会进行更精细的划分，下面会一个一个讲到。而灰阶色会根据文本类和框体类的颜色的层级来进行划分，常用于“标题/正文/注释”、“分割线”、“矩形框背景”和“禁止/Hover状态”等。什么是灰阶色呢，简单来说就是黑色与白色之间颜色等级的值，下面也会讲

3.3、颜色 - 灰阶色

上面讲过，灰阶色会根据文本类和框体类的颜色的层级来进行划分，文本类比较好理解，就是标题、正文和注释等文本。而框体类指的是边框的颜色、分割线的颜色、背景颜色和Hover颜色等等.. 灰阶色有以下这几种，颜色越深层级越高。图是三年前数值，不要做参考

当我们把灰阶色应用到文本中，文本的层级就突显出来了。文字如果不用颜色来突出层级的话，那么标题、正文和注释的字号差别不大时，就会出现分不清楚谁是标题和正文的情况，这样就会降低用户对文字的可读性

框体的背景的颜色也要划分层级，一个优先级高的，一个优先级低的。框体这个词是我自己定的，我真的找不到一个词能一下子准确形容矩形框、矩形框的背景和矩形框的线，这样的一个词

例如像表格这样的组件，它的表头就要比里面的表格的优先级高，所以表头的颜色就要显得更重一些，这样就能体现出它的重要性，而表格的优先级相对要低，颜色也就会浅一些

3.4、颜色 - 设置灰阶色

每个设计师设置颜色的方法都不同，我是用颜色的百分比的数值来设置的灰阶色。我设置的百分比递增值是16，起初颜色不可能设成0%，也就是黑色，肯定要设一个与黑色相近的颜色，黑色太纯不够柔和。起初颜色在整个颜色灰阶度上的值是16%，而小标题的颜色值是32%，正文的颜色值是48%，注释的颜色值是64%，以此类推

在Affinity Designer软件中呢，可以直接对灰阶色的色值进行百分比的设置。你们用透明度或者RGB16进制的方法设置也行，只要结果是适合的就行

另外设置灰阶色有一个小技巧，像#333/#666/#999，是在黑色的基础上分裂出来的，这种颜色会显得有些脏。我几年前通过研究谷歌定的灰阶色，在他们网站上提取了网站代码，发现他们的灰阶色并不是这种纯黑色分裂出来的，而是在黑色分裂出来的颜色的基础上，加了一些蓝色，这样的颜色看上去就比较柔和。所以我们可以通过一些方式把灰阶色的阶级定下来，然后再通过改变颜色色相，来增加一些蓝色，使这些灰阶色变得干净，不会显脏

3.5、颜色 - 彩色

讲完灰阶色来了解一下彩色。彩色会细化分为主色和辅色，主色比较好理解，辅色又会细分为强调色和语义色，我们一个一个来讲。首先来讲一下什么是主色，主色就是色轮一圈，选什么颜色都行，红橙黄绿青蓝紫随便来一个。一般主色会根据产品定位来进行选择，像互联网公司用的最多的是科技蓝和极光色。中国互联网产品中选用红色做为主色的产品也不少，毕竟红色在中国所代表的意义不同

3.6、颜色 - 主色（颜色重量测试）

具体如何配置主色，需要借助色彩理论、构成、色彩心理学等众多知识来进行配置，这么多知识肯定是讲不完的。今天就讲一下其他两个比较重要的点，颜色重量测试与色盲测试。不管大家用什么方法进行色彩的配置，最后还是要把这些颜色转换为灰阶色，来测试一下它们的视觉重量，如果颜色有轻有重，就表示颜色不够均衡柔和。我们给颜色加上一个“黑白”效果，如果转化为灰阶色的颜色，色彩重量不均匀，就需要重新调整，如下图所示

上面是没有进行颜色测试的图，下面这张是经过调试的图。调试以后颜色的重量看上去比较均衡，而颜色中的主色可以进行强化，让它的重量变得比其他颜色重一些

3.7、颜色 - 主色（色盲测试）

色盲并不是分不清楚所有颜色，只是在辨别某几种颜色方面存在缺陷。色盲数据统计，据说资料显示色盲发生率在我国男性约为5%～8%、女性0.5～1%，保守估计我国男性色盲约为4%，女性约为0.7,%，这样的比重对于一个用户基数比较大的产品来说，也算是能产生一定的影响了。而根据《设计师要懂得心理学》中讲过，色盲比率男性占9%，女性占0.5%，这组数据应该对应的是全世界。最普遍的是红绿色盲，患者无法分辨 红、黄和绿色。蓝黄色盲（无法分辨蓝色和黄色）和全色盲（所有颜色 看上去都是灰色）的情况很罕见。不同色度的褐色和黄色识别度最高，但我们不可能把所有的产品的主色都设为褐色和黄色

而对于色盲测试，我有我自己的思考。首先我们知道“最普遍的是红绿色盲，患者无法分辨 红、黄和绿色”，也就是说红色盲和绿色盲占的比重比较高，相对优先级比较高。而蓝色盲会分不清楚蓝色，对绿色的分辨也比较模糊，比率也比较低，色值的差异没有那么明显，所以我们可以忽视蓝色盲。之后我们看一看哪种颜色对于红绿色盲而言，最不容易被识别，就找到了以下这几种颜色

相对的除红色、绿色和粉色外，如橙色、黄色和蓝色，这几种颜色识别度较高。那我们在考虑主色选取时，是不是可以优先考虑橙色、黄色和蓝色这几种颜色，而之后再考虑红色、绿色和粉色等颜色。但主色的选取也不是绝对的，如果产品主色必须选择有一定象征意义的颜色，如红色（文化图腾与精神象征），就不用去考虑色盲，可以用其他的方式对色盲进行弥补，例如把主功能按照不同颜色或者不同粗细的线做划分等等

3.8、颜色 - 辅色（比例）

辅色的意义在于避免枯燥和突出视觉层级，页面中如果全是主色一种颜色，就会显得十分的单调，因此可以加一些其他的辅助颜色和点缀颜色，来使整个页面更加的饱满。辅色又细分为强调色和语义色，先了解一下辅色在整个页面中的比例。我个人常用的主色、辅色和点缀色的比例是6:3:1，主色为6，辅色为3，点缀色为1。颜色如何搭配就需要其他理论性知识解释了，美感对颜色影响也比较大

3.9、颜色 - 辅色（强调色）

辅色的强调色指的是层级相对比较高的颜色，例如hover状态等，又或想突出主要功能的颜色。强调色是通过我们设置的主色的基础上，完善色阶并得到的。我们可以通过改变主色的亮度/明度去调整并找到我们想要的强调色。在一个界面中，强调色并不是非要与主色有一定的关联性，用黑色等其他颜色做强调色，也不是不可以的，还是要根据的产品需求与风格来进行强调色上的选择

3.10、颜色 - 辅色（语义色）

语义色可以简单理解为系统中如通过、完成、警示和禁止这样的提示信息的提示颜色，语义色强调了一种特殊状态，语义色的定义中包含了一定的色彩心理学原理，如蓝色可以消除禁止与不按，多数用在普通提示状态；绿色有着自然的寓意，舒心平静，多数用在完成状态；黄色则传达一种积极性和新鲜的感觉，多数用在提醒状态中；红色最容易使人们注意到它，并充满危险的，多数用于错误/警示的状态中

4、文字 - 样式

上面讲颜色时，颜色配置好以后都被设置在“色板”里，属于设置颜色样式的一种方式。而我们处理文字时也是一样的，需要把文字定义为样式，并且把段落样式和文本样式都配置好，设置在“样式”的面板里方便我们使用。我设置的文字有样式有四种，分别是无衬线体（黑）、无衬线体（白）、衬线体（黑）和衬线体（白）。在样式中所有关于文字的配置，如字号、行高、字间距、颜色等属性都被定好，并设置在字体样式中

4.2、文字 - 组块

文字光有样式还是不够的，文字样式只能调整如标题、正文和注释单个文本的属性。如果要添加一个文本系统，就需要一整套不同字号、不同语言、不同颜色的文字组块，这样的组块可以快速适应不同的业务需求，因此我们需要配置好这样的组块。我配置的组块包含文本样式的全部属性，重要的是它针对不同的文本行宽，会对应不同的字符宽度，都不能超过110个字符。字符宽度我下面再讲哈。我配置的文字组块有4大类、48组，分别是：中文-无衬、英文-无衬、中文衬线和英文衬线。48组中的每组又会针对不同语言的字体结构进行不同程度的行宽的划分

4.3、文字 - 字体（中英）

选择字体这块好像没有啥要说的哈，Web端最常用的中文字体就是微软雅黑，像宋体这样的衬线体不常用，微软雅黑不光是黑体字，还是一款非常标准的显示器字体，它不会像印刷字体那样与显示器不兼容，会在显示器中呈现出比较好的显示效果。另外黑体字的属性具有现代感和科技感，也常用于科技型公司和互联网公司

英文的显示器字体就比较多了，选择也比较多，我个人喜欢用黑体字Arial（无衬线体），因为它的字形比较像Helvetica，兼容性也好。像黑字体Verdana也可以。宋体可以对应英文无衬线体Times New Roman，还是看大家的选择了。界面不像平面设计有那么多字体可以进行选择和搭配，常用的也就这几种

4.4、文字 - 字号（标题）

字号的设置我了两类，分别是标题字号和正文/注释字号。标题字号有分为大标题和小标题，大标题由H1~H7不同字号组成的，具体的字号设置均以4的倍数递增，小标题大家可以自行定义，字号区间范围较窄，我这里设了16px和14px两种字号。另外所有标题均有中文和英文两种语言进行混搭，中文优先级比较高，字号相对也就比较大一些。下图中A=4，H1~H7对应着字号

4.5、文字 - 字号（正文）

正文字号我配置了三种，分别搭配不同的标题字号，分别是12px、14px和16px。正文字号越大就说明页面高度越高，都是相互影响的。由于现在网页栅格宽的的不断增加，12px的字号所对应的项目需求已经不多了，但也要考虑向下兼容。大家设置正文字号时也不用采用我设置的值，也可以改变基础字号和增数，如14px、16px、18px和20px这样的字号。页面宽度和高度越大，字号相应的也就越大

4.6、文字 - 文本行高（标题）

文本行高就比较主观了，大家给行高配置多少都行，但有一个比较核心的理论就是，文本的字号越大它的行高就越小，甚至可以小到1.0倍，一行与一行之间上下没有距离，通过字体结构的负形来创造出视觉空间，文本的字号越小它的行高就越大。设置的行高最小值是1.16倍，这个倍数是一点一点测出来的，展示效果中的字并不是实际字号，不是很准确

除了最大的标题H1以外，其他标题的倍数似乎都可以找到一定的规律，每一个文本行高的倍数值呈现递减的趋势，并且随之减少0.1的值。这样的规律会使我们的文本产生一定的规则，进而被赋予一定的条理性，看上去就会更自然。这里的增数值大家也可以自行定义，先指定好规律，在美感的基础上调试这些规律，才是设计的准则

4.7、文字 - 文本行高（正文）

中文正文的行高我针对12px、14px和16px的字号设置了几种，分别是1.8倍行高、2.0倍行高和2.2倍行高。当然了大家可以自行去设置行高的倍数。这里有个关键点，因为系统和展示型网站不同，系统这种偏功能性的产品，相对的字体、组件和模块的高度就会小一些，如果所有模块高度很大，那在有限的屏幕高度范围内，不能把很重要的功能全部展示出来，就对用户需求和产品体验产生一定的影响

4.8、文字 - 字间距

字间距分为这三种：标准排版、紧凑排版和留白排版，标准排版字间距是软件默认字间距0 ‰，紧凑排版字间距是-10 ‰~-40 ‰不等，留白排版字间距是10 ‰~-40 ‰

4.9、文字 - 文本行长

在网页中一个标准的文本行长是90个字符，中文占两个字符，英文字母占一个字符。觉得行长不够长可以再加20个字符，最长也就是110个字符，一定不能超过120个字符，不然就不好阅读了。很多网页设计师不考虑栅格对版心的限制 ，直接拉长文本的行长，这样的方法肯定是不对的，大家只看重形式，谁又会考虑这些呢

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