前文的原子设计中我曾经讲过，原子是构成所有元素的最小单元，没有办法再被细分。它通常对应着产品设计中的通用样式及构成组件的最小颗粒。而颜色，作为整个设计系统中极为重要的原子之一，在心智模型中占据了关键的地位。

我们看到红色能够感受到热情、兴奋和危险，看到绿色时往往就感受到安全、自然和平静。可以说，颜色调动我们的情绪只需要一瞬间，而且它在我们的记忆中可以停留更久。

接下来，我结合公司目前的业务CROV Dropshipping（以下简称DS），来进行色彩体系的探索，以输出一整套的色彩方案。但愿这次探索能够给予各位一点启发。

大纲走起：

• 业务背景
• 为什么我们需要色彩体系
• 如何创造一套色彩体系
• WCAG无障碍测试

业务背景

CROV DS是针对美国市场的线上一件代发平台（类似阿里巴巴的一件代发业务），属于跨境电商B2C行业。平台帮助用户无需任何初始成本、无需囤货即可顺利开展电商之路，时间灵活可控，让用户专注于销售本身。

为什么我们需要色彩体系？

1. 对于业务

目前CROV DS业务日益繁杂，但是除了品牌色之外，辅助色的定义过于随意。而且随着业务场景的扩展，临时增加的颜色很容易被遗漏在某个不知名角落的画板中，导致一次性用色的风险。（tips：一次性即前一篇我所讲到的用完即扔、未被复用的设计）

而且用色本身的随意也导致研发还原结果的不统一，一处地方色彩各异的现象比比皆是。

因此，我们需要基于我们自身的业务特征来产出一套足够完善的色彩体系，让业务从用色上达成基本的一致统一。

2. 对于设计师

我们设计师在定义颜色时，更多的是直接在色板上进行取色，但这样的取色方法存在诸多弊端。

增加决策

可能很多设计师选色时会有这种情况，一会觉得这个颜色脏了，一会又觉得那个颜色太刺眼了，有时候完美主义作祟，为了得到一个满意的颜色甚至花上大半天。这种情况尤其在多色搭配时更为严重。

其实这和不用网格系统来布局是一个道理。（注：网格系统是一种能够极大提升布局效率的方法，后面会讲～）

色板中取色的范围趋近于无穷。如果将HSB模式下的单个H、S和B作为一个最小单元格，那么我们可以选择的格子高达数百万个。颗粒度过细的情况（其实根本就没有颗粒度）导致我们在取色时往往会被迫进行反复的微调和尝试。

缺乏秩序和逻辑性

直接在色板中取色主要依赖的是”直觉“这种相对感性的存在。

比如一个按钮的状态可以包括normal、hover、pressed、disable等多个状态，如果我们仅仅靠自己的直觉自由调整明度和饱和度，最后的配色方案其实缺乏内在的逻辑性和秩序性。

难以复用

对于B端这些偏后台工具、场景复杂的业务，颜色运用得往往也比较广泛，如果我们没有一套完善的色彩体系，那每次一遇到新的项目及业务场景需要用到新的颜色时，之前定义的颜色难以复用，导致我们需要重新定义颜色。而且这种相对主观的方法也缺乏说服力，难以体现专业度。

而如果设计师提前定义好一套色彩体系，一方面只需要在对应的色板中选择即可，大大减少了设计决策。另一方面色彩体系所提供的不同色彩梯度也便于各个需求、业务场景的复用。而且色彩体系富有逻辑和秩序，因此从中挑选的颜色也同样是这样，显著降低设计师依赖”直觉“所带来的主观和不可控。

如何创建一套色彩体系？

Alipay Design团队提过：

以同色系配色为主导，多色搭配为辅。

同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。

接下来我以DS项目为例进行色彩体系探索——

首先，所有的色彩模型统一采用HSB模型进行，正如Ant Design设计团队说的那样，这个模型利于调整色彩时对颜色有明确的心理预期，同时便于团队沟通。

这里再简单普及下HSB模型。H指的是色相（Hue），S指饱和度（Saturation），B指明度（Brightness）。S控制颜色混入白色的量，S值越高，意味着混入白色的量越少，颜色也就越“纯”。B控制颜色混入黑色的量，B值越高，意味着混入黑色的量越少，颜色也就越“亮”。（通俗点说，它们分别代表了明色区域和暗色区域）

1. 品牌色

Crov Dropshipping基于其时间自由灵活、可兼职副业、成本风险低的业务特征，使得对应的用户群越来越多的集中在年轻一代的e-tailer（线上零售商）当中。他们不同于我们常规认知里那类传统的retailer（线下实体零售商），大部分的DSer拥有自己的事业和工作，为了赚取外快，将其当做自己的副业。因此，年轻化是这类用户群的主要标签。

所以，我们采用了高饱和度、偏向蓝色色相的紫色，来作为crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩带”

为了覆盖掉Crov DS本身复杂的前后台业务场景，需要额外搭配各类型的辅助色。我们想要提取24类色相，所以直接通过360/24得出了色环中每类色相的基本角度15°。

因此，这里以品牌色色相为基础，在HSB 360°色环中，对色相（H）正向和反向各自±15°，饱和度（S）和明度（B）保持不变，得到24色的色环彩带。

后续我们的颜色体系就在彩带上的24个颜色上面进行提取。

3. 品牌色同色系配色

品牌色同色系是指，根据品牌色不同的饱和度和明度变化，生成不同深浅、不同明暗的一组颜色。同色系配色不仅传达了品牌性，多个梯度的变化也能够适应及通用尽可能多的业务场景，也便于多信息的层级划分。

而同色系配色的输出则遵循了antDesign发明的tint/shade 色彩系统算法，说人话，就是在颜色中分别加入一定比例的黑色或者白色来更科学地生成色阶。

sketch中可以直接将这套算法可视化处理，便于设计师直接生成所有颜色的色阶。需要注意的是明色区（就是上方横向的那块取色区域，白色至纯色时S由0过渡至100）和暗色区（右侧纵向的取色区域，纯色至黑色时B由100过渡至0）遵循了两种不同的规则，具体规则见下：

当S饱和度变化时（明色区域），S值以S/5的结果值为一个增量进行递减，B值以(100-B)/5的结果值为一个增量进行递增。我们品牌色的S和B分别是80和100，所以这里的两个增量分别是16和0。

品牌色在明色区的下两个色阶对应的HSB参数就是（250，64，100），（250，48，100），以此类推。

而当B明度产生变化时（暗色区域），S值以(100-S)/5的结果值为一个增量进行递增，而B值以B/5的结果值为一个增量进行递减。得出的两个增量分别为4和20。

品牌色在暗色区的下两个颜色对应的HSB参数即（250，84，80）、（250，88，60），剩下的所有颜色以此类推。

根据这两个定义规则推导出全部不同梯度的色阶，我们就可以将其作为品牌色同色系配色。

4. 定义辅助色

我们使用品牌色来传达品牌价值，还需要辅助色来满足多样化业务场景的需要，对用户进行不同的情绪引导，同时也可以缓解用户对单一主色产生的视觉疲劳。

辅助色的定义就可以直接用到我们之前基于品牌色所衍生出的24色“彩带”了。我们通过色环形式，来迅速得出品牌色的同类色、类似色、邻近色、中差色、对比色和互补色。

结果见下：

首先，由于相差15°的同类色与品牌色差距过小，色相对比感微弱，传递的调性过于相似，所以这里直接pass。而邻近色生成的粉色和青色在界面中基本不会作为功能色使用，这里同样直接舍弃。

类似色

类似色即色相差在30度左右的颜色，属于较弱对比色。我们基于品牌色的色相各自±30得出类似色。由于H280的类似色调性与品牌色类似，并且色彩体系中需要一个典型的冷色来覆盖一些场景，所以这里使用了H220的颜色作为冷系的辅助色。

中差色

中差色即色相相差90度左右的颜色，属于中等对比色。H340偏粉，与常规红色相差过多，所以这里借鉴了alipay的辅助色校正原则“色相差值不能超过15”，对H340进行了色相校正，调整至H355。

对比色

对比色即色相相差120度左右的颜色，属于强对比色。最后得出的H130调性与中差色的H160过于类似，直接舍弃。H10与H340调性类似，但是可以向橙色系发展，所以微调到同类色进行色相校正。

互补色

互补色即色相相差180度左右的颜色，属于高强度对比色。最后得出的H70偏绿，这里同样进行了色相校正，将其调整为H55。

最后，得出了共计5种辅助色。不过这些辅助色并不能直接使用，还需要进行感官明度的校正。

5. 感官明度校正

感官明度校正方法来自支付宝设计团队，这是是确认辅助色的最后关键一环。每种颜色都有属于自己的“感官明度”，即发光度。品牌色即辅助色的发光度不一致，就会导致视觉上会有明显的明暗差别。所以，我们需要通过发光度来进行最终的颜色校正。

明度较高的灰色意味着高发光度，明度较低则意味着低发光度。保持品牌色发光度不变，我们对其他辅助色进行微调。

我们只需要将那些视觉明暗差距明显的颜色进行调整。注意，并非所有的颜色都要调整到品牌色的感官明度，这些值仅仅是一个参考。最终的校正依然取决于我们的视觉！比如黄色感官明度本身很高，但是视觉缓和、不像绿色那么刺激，所以基本无需校正。

最后得到校正后的如下辅助色。蓝色、绿色、黄色以及红色在界面中可以作为功能色使用，可以分别代表常规、成功、警告和报错状态。而橙色则可以用作突出类的提示信息，它比bold字重要高出一个层级。

6. 辅助色的同色系配色

与品牌色一样，使用tint/shade规则推导出全部辅助色不同梯度的色阶。具体过程不再赘述～

7. 定义文本色

CROV DS的文本色并非纯粹的中性色，我们通过加入一点点品牌色来让文本呈现色彩倾向，以此提升页面的活力及年轻感，同时也可以让界面更加耐看，减缓B端产品长期使用时的视觉疲劳。

具体方法就是，分别在#222、#555、#888、#b3b3b3的一、二、三级中性文本色代表的色块上，覆盖一层10%透明度的品牌色。最后得出了四个层次的文本色。当然，中性文本色你也可以参考antDesign中通过透明度进行定义的方法，不一定需要按照某个具体色值来。

WCAG无障碍测试

我们必须要承认的现实是，设计师所定义出的色彩在mac上看上去是很出彩，但是这并不能代表所有用户。也许在用户中依然有一部分人群，他们的显示器配置低和老旧。而且我们无法判断用户们的使用环境，有可能是在刺眼的阳光下、有可能是在昏暗的环境中。如果色彩不去做可用性测试，在很多的情况下存在体验降低的风险。

而WCAG（Web Content Accessibility Guideline，Web内容无障碍指南）解决的正是这些障碍问题。WCAG中的POUR无障碍原则包括了：易于感知的（Perceivable）、便于操作的（Operable）、稳定理解的（Understandable）、稳定耐用的（Robust）。

而颜色则正是对应了易于感知的这一无障碍原则。网站中的文字和图像应该具备足够高的色彩对比度，使之更易被用户感知识别。

WCAG颜色对比度无障碍的两个标准分别为：「1.4.3条例：最小对比度标准」和「1.4.6条例：加强对比度标准」，分别对应着AA级和AAA级。

AA级的定义为：普通文本的视觉呈现与背景至少要有4.5：1的对比度，大文本与背景至少有3：1的对比度

AAA级的定义为：普通文本的视觉呈现与背景至少要有7：1的对比度，大文本与背景至少有4.5：1的对比度

（这里的大文本即≥18pt常规字重的文本或者≥14pt加粗字重的文本）

这两个条例被大厂们广泛运用到了产品的颜色标准当中。

比如MD规范中的文本移动性规范标准中的数据就是来自WCAG的1.4.3条例标准。

同样，阿里巴巴在前不久发布的B-Design中的无障碍色acs指标和WCAG本质上也是一样。

1. 颜色对比度验证

那该如何验证我们的颜色符合这俩标准呢？

easy。这里直接上个网址，https://contrast-ratio.com/#%23373247-on-%23fff

我们分别在背景及文本录入色值，即可得到最终的对比度数据。比如我录入了白色和一级文本色数值，最后的12.28即两者的对比度，嗯，达到了AAA级标准。

一样的步骤，分别测试了其他文本色的对比度（产品无暗色模式，所以此处仅验证白色背景下的颜色对比度），分别达到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的对比度均符合可见度标准。

不过WCAG中指出，一些特殊情况下的文本无对比度的限制，其中就包含了表单字段的占位符（placeholder）。而2.38对比度对应的文本色主要用于暗提示，因此这种情况就可以无视掉了~

最后

色彩体系的初步探索到此结束了，不过篇幅原因并没有面面俱到，比如渐变色、实际落地效果等等。另外，一些地方我自己也在摸索阶段，因此很多分析也可能存在不足，文章仅作参考。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

作为UI设计师，虽然现在做了很多项目，但是实际上每一次想要做好，过程都还是很痛苦的。尤其是前段时间，身心俱疲，时间、心情、精力都不在线。但恰恰接到的又是一个重头的急活，产品方也不清楚自己想要什么效果，所以一开始改版的心路很渺茫。

不过也由于这次的经历也让我更加明白设计方法的重要性，越是短时间内，越需要理性分析。在实际工作中，产品有时候因为项目急需上线，给我们的时间会非常有限，根本没有太多的时间去给你思考，就比如我这次，只有半天时间去思考设计。那么如此短的时间，如何提出有效的设计方案呢？

搞清楚需求来自哪里，具体是什么

以这次为例，学习圈页面刚上线不久，当时也是设计了许多方案，都被pass了，如下：

产品方提出页面上方的发布按钮需要重新设计，那我就要搞清楚具体是谁提出的意见，为什么要重新设计，这样才不会让自己处于完全被动状态。

由于项目刚上线，数据库也因为某些原因还不能检测点击和转化量，无法得知哪种按钮点击量高。产品方也不清楚想要什么效果，需求方向不明确就着急去动手设计，那对于设计师来说无疑是效的，问明白需求后再通过竞品分析、产品体验、用户喜好等方式去突破。

所以接下来需要我们主动出击引导产品方，得出一些需求具体的方向。那怎么去引导？反向思维法，既然需要改动的是不确定的，那么我们可以确定那些不需要改动的地方——通过排除不需要改动的，来确定需要改动。

需要排除的是：整体页面排版布局、按钮设计方向（扁平、立体、简洁、卡通等方向）、动效方向、背景（颜色元素）。

通过沟通后明确的是：

• 整体布局没有问题，所以这块不需要有改动
• 按钮点击感不强，产品用户群体是6～14岁的学生，根据用户审美偏好，所以主要方向就是立体、卡通
• 动效不够明显，需要更明显有趣一些
• 整体颜色太冷静，所以背景颜色和元素细节需要修改

在第一版时已经对相关竞品做了分析，基本是一个纯色背景上加一个具象化大按钮，发布功能使用加号、笔、照相机等元素来制作按钮，原则：按钮凸显，背景元素比较少。其实按钮如果用照相机这种结构复杂点的元素去设计会更有方向，但是我们左上角会有拍米币的功能，用相机会更直接一些，而加号笔画过于简单，可延展性不强，所以改版的话最终决定还是使用铅笔作为图标设计元素。

关于整体颜色方向，上一版颜色设计原理是背景用产品主色（蓝色）+白色按钮，不过产品方提出太过冷静，一开始我想用色肯定要跟整个app的主色相关呀，就跳不出蓝色背景的思维，后来决定先跳出来，配色思维反过来，背景不局限在主色，按钮及周边装饰元素可使用产品的主色。

时间紧急，当时想到的是常用的太空元素（有空间感、好延展、符合用户喜好），于是背景就选了蓝紫色（据研究，紫色也是小学生最喜欢的颜色，性别倾向相对偏弱，在色环上是蓝色的邻近色，协调又会有对比。）

想明白要尝试的方向

在设计前，我先在心里大致分了两个设计方向：

• 常规大按钮样式
• 非常规按钮样式

以下便是常规大按钮设计稿：

非常规按钮设计稿

在尝试的这期间，对于有疑问的地方一定要跟需求方及时沟通，及时反馈，确保自己的设计在功能上没有遗漏。比如我这次，是通过询问一个产品经理，才得知，按钮上需要加文字，才在后面加上了。

善于运用对比进行排除

大体方案出来后，通过优缺点分析对比，同产品方选出最适合的方案。

1. 常规按钮设计稿

优点：容易被用户所熟知，用户的学习成本低，更容易点击

缺点：对于小学生来说吸引力不够，形状上偏规矩，不够活泼，另外上方第一个元素稍微有一点抢主角的光环

2. 非常规按钮设计稿

优点：配合动效会更有吸引力一些

缺点：用户的学习成本比较高

通过对比，大家一致倾向非常规按钮，那就在气泡与星球这两者中选出最终方案。在APP的任务页面也有星球的按钮，用户已经对星球有了一定的点击感知，减少了学习成本，最终选择了星球。

细节优化

优化方向：

• 颜色调整
• 细节元素调整
• 添加动效

1. 颜色调整

现在看着球跟背景区分不是很明显，整体偏灰，需要加强对比，球的颜色需要调亮调纯。我们看下色环：

90度以内的邻近色，搭配在一起和谐又不失活泼。所以可以尝试将球的颜色改为背景蓝紫色的邻近色：红色或者天蓝色，如图：

红色的球虽然跟背景拉开了对比，但是过于鲜艳，大家反应有点类似于心脏。

所以相对来说蓝色的球比较适合，也跟APP的主色相呼应。

2. 细节元素调整

球的环境色过于明显，需弱化一些；周边增加几个小球，四周边缘的球太抢，也需要弱化 ；文字“写一写”由常规字体改为大一点的手写字体：

3. 添加动效

鉴于上线版本的动效反馈说不明显，按钮点击感偏弱，所以这次动效优化点需要凸显星球本身。第一想到的就是呼吸效果，但是只有一个呼吸有点单一，周边可以添加一些社交鼓励的元素，如鲜花、笑脸、太阳，动效一开始想着是从球两边飞出来，但是经过对比就参考了直播送奖励的形式，相对来说辅助性稍微好一些，视觉上不会过于太抢主角，如下最终呈现结果：

如果有限时间内想要让需求方得到满意方案，所以以下两点我觉得是挺重要的：

• 对比排除法是一个很好的工作方法；一个西瓜到底好不好，拿另一个进行比较就知道了。
• 及时反馈：很多时候什么结果并不是一开始就知道，所以在做的过程中需要不断理顺想法。此时很重要的一点就是，跟需求方及时反馈，无论是正向的还是负向的，否则结果不是老板所期望的，自己也会陷入无限的苦恼中。

好啦，文章写到这里，如果大家有更好地意见也欢迎留言

文章来源：优设网     作者：麦芽糖

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

为什么要建立Banner组件库

在互联网公司中，运营Banner往往是由不同的运营团队去完成，甚至在一些跨国企业，运营Banner是由不同国家的运营团队完成的。那么如何保证大家输出的运营Banner在保证视觉冲击力的同时，还能输出以及体现统一的设计语言呢？甚至不用设计师也能轻松替换Banner组件？想要解决这种难题的最好方法就是设计Banner组件库，Banner组件库的四大优点能够完美解决以上的问题。

Banner组件库的类别

根据设计师个人及每个公司业务的不同需求，我一共把Banner组件库分为两大类别：

1. 设计师及设计团队操作的Banner组件库：

这类组件库面向的操作人群是设计师，仅有设计师才对其有操作权限：

案例部分效果演示：

2. 非设计师操作的Banner组件库：

这类组件库面向的操作人群是非设计师人员（运营、销售、子公司员工等），是设计师根据运营的需求特制的Banner组件库。

我当时制作这个组件库的原由是因为母、子公司经常都会有相同的模板化设计界面替换，而每次替换都需要花费设计师很多零碎的时间，所以我们干脆就直接设定好Banner组件库，让运营人员自行替换，我们先教会母公司的主运营操作流程，主运营再去负责子公司的操作流程培训，这样一套下来省去了运营人员与设计师的沟通及修改过程，运营人员可直接输出成品，从而提升了整个团队的生产力，也让设计师专注于设计上的创意与用户体验。

案例部分效果演示：

Banner组件库的四大知识要点

不管是建立哪一类别的Banner组件库，想要设计好它，那么首先就要清楚的了解Banner中的基本构成以及设计原则，从底层逻辑出发去构建Banner组件库，我构建Banner组件库的思路主要依据以下四大知识点：

1. Banner的层级拆分

Banner层级拆分的主要目的是为了组件的设定，我们通过层级拆分可以有规律的把每一个层级都设置为可替换选项，在Banner组件库中可分为5个层级：

• 背景层：可替换背景颜色、背景样式
• 文案层：可替换字体、颜色
• 标签层：可替换标签、显示隐藏标签、标签颜色
• 点缀层：可替换点缀元素、元素颜色
• 产品配图：可替换显示图片、也可更换为插画元素

案例：

2. 合理运用Banner中的点线面

在组件化的Banner设定中，我们可以用点、线、面来划分画面的整体层面，我们要罗列出哪些层级是用点来表达，哪些层级是用线或面来表达，这样不仅有利于组件库的快速建立，也有利于Banner整体画面的视觉表达。

点、线、面是相对存在的，点可能在画面中成为线、面，线也可能在画面中成为点、面。

“点”越大就可能会变成“面”，“点”发生规律性变化也可能成为“线”。

当“线”在画面上显得短小时，可以把它看成“点”，当把“线”加粗一定程度，那么我们就会把它看成“面”。

当“面”成为未封闭状态时就会成为“线”，当“面”在画面中的比例缩小时我们可以把它看成“点”。

我们在组件Banner时要事先把层级的点线面归纳好，这样才不会在我们设计相同元素时出现杂乱的现象，层级与点线面的常规关系图如下（这样的常规组合关系有利于建立组件库）：

需要注意的是在Banner组件库中点缀层与标签层并非一定要存在于Banner中。

3. Banner组件库常用版式

Banner的版式复杂多样，而我们的组件库想要达到轻量化，所以更适用于下面三种常规的版式，如下：

4. Banner设计五大原则

组件库的建立必须遵循Banner设计五大原则：对齐、统一、对比、留白、结构平衡。

对齐

Banner的内容都要有一个对齐的准则，特别是文案层面，每个元素都有自己应该处于的位置，要有秩序化，才有舒适感。常见的对齐方式有左对齐、右对齐、居中对齐，建议一个板式只使用其中一种对齐方式。一个小小的Banner版面，如果使用了多种对齐方式，实际上在用户看来这些信息都是零散的，增加了认知成本。

统一

字体以及字体颜色最好不超过两种，内容元素设计风格也必须一致，太多容易导致内容杂乱，干扰过强。

对比

了解各项信息的权重大小，重要的信息要加强显示，次要信息可以弱化。

留白

要为Banner留出一定空间，让Banner多一些呼吸感，这样也更容易聚焦重要信息。

降噪原则

在Banner设计中不要使用过多的字体、颜色或者过于复杂的图形，这种不断做“乘法”的行为，实际上是在增加用户认知的“噪音”。

组件库制作流程及案例展示

1. 制作前提：设计规范（字体/颜色/版式说明）

字体使用规范

在字体的使用中，我们要确定字体类型以及字体的大小。

颜色使用规范

为了保证Banner拥有较强的适应性，我们可以不规定精准颜色，用颜色明度的使用区间来代替。(颜色规范仅限于主色调，并不包含特殊用色：如标签、点缀元素)

版式说明

制定版式的整体尺寸、元素间距、排版、字数限制。

2. 设计师应用版制作流程：

设计师应用的Banner组件库可以用Sketch制作，也可以用Figma制作。

如果是用于外包设计或公司设计师仅有一人，那么建议用Sketch制作；如果设计团队人数较多，那么建议用Figma，我这里就用SKetch给大家讲解一下制作流程。

第一步：根据层级与点线面设计Banner中的元素

第二步：把每一层级的元素组件化

在Sketch中只用选择想要组件的图层（或组），点击按钮即可立即生成组件，如下图：

在组件层级时我们需要注意从哪里开始，到哪里结束。例如我做的这个宠物Banner案例，第一层是Banner样式切换，接着才是样式里面的层级切换，并不是把内部所有层级都组件完后就结束了，可能层级中还存在更多的小组件切换，比如在样式2中我没有把点缀层合成一个组件切换，而是分为三个组件切换，甚至在三个切换里你还可以设置它们的颜色切换，全部设置完后这样才算真正的组件结束，下面是我组件的层级图：

第三步：设计可替换组件

在完成元素组件化后，我们就可以在组件库里添加更多可替换组件的样式，添加方式如下图：

当把可替换的组件全部设计完后就可以使用了，如果发现内容不够用还可以往内部再次添加，下面是Banner样式1的切换效果展示：

Banner样式2的效果展示：

注意要点：

• Banner组件库的内部层数不宜过多，尽量轻量化。
• 组件库内部的相同元素可以同时使用，例如样式1与样式2的文案部分，都可以用一个组件，不用再单独设置。
• 命名要清晰，层级之间用“/”隔开，以免发生组件库内部的调取错乱。
• 因SKetch的组件机制，组件的尺寸大小要有区分，如果出现相同大小的组件请任意修改一个。（增加1px）
• 想要快速得到组件，可以把左侧的图层面板更换为组件面板，直接可拖取内部组件。

3. 运营人员应用版制作流程：

运营人员应用的Banner组件库的建立需要用到的软件是PS与Excel。

在设计这类组件库时我们一定要多从操作人员的角度出发去设计，最简单化，下面案例来自于之前在老东家做的PS组件。

第一步：根据层级与点线面设计Banner中的元素

第二步：设计可替换元素组件

在设定前我们需要了解以下几点知识：

• PS做组件库用到的是图像-变量属性。
• 我们进行所有的元素替换都不在PS内部，而是在Excel操作替换，若有图片替换，图片则与源文件存在同一文件夹内。
• 可设置所有元素的显示和隐藏。

通过以上4点可以得知我们需要设计的元素仅仅只有背景图片，而其他元素可以通过变量来达到效果，下面是设计的4张不同颜色的背景替换图：

第三步：定义变量元素

只是给需要变量的元素打标签，具体该如何变量在第四步

定量步骤：选择想要定量的图层-图像-变量-定义

注：PS会自动识别定量元素，如果是组，那么只有可见性选项（可见性选项的意思就是可显示可隐藏）；如果是图片，则会多出像素替换（替换图片）；如果是文字则会有文字替换（替换文字）

在定义时为了避免操作错误，定义名称就为图层名称，定义完成一个就按“下一个”按钮，直到全部定义完成再按“确认”按钮，案例中的Banner一共定义了6个元素，分别为商品图（像素替换）、商品名（文字替换）、原价（文字替换）、优惠价（文字替换）、特价标（可见性）背景图（像素替换）

第四步：制作Excel表格

我们所有的数据修改都是在Excel里面进行的，Excel表格制作非常简单，第一排为定义的名称，我们只需把刚才定义好的6个名称输入到表格的第一排。

如上图，建议大家多加入一个编号定义，在PS里把编号定义的图层隐藏就行了，目的是为了选取数据组时更直观，操作如下：

除了第一排，下面的排列都是输入性定义，如果要改变商品名的文字，就可以在下方输入修改的文字；

如果要替换图片，就要输入替换图片的名字及后缀，仅支持png与jpg格式的图片，并且图片必须与源文件在一个文件夹内。

如果要显示或隐藏某个元素，那么就可以输入大写的“TRUE”或“FALSE”。

当把表格信息都填完后，最后一步就是把表格存为.csv格式。（注：.csv文件必须与PS源文件、图片文件存在于同一文件夹内）

第五步：导入操作

当全部设定完后，我们就可以在PS内导入切换不同的数据应用。

操作路径：图像-变量-数据组-导入数据组-选择数据-应用-确定

这五步下来我们的Banner组件库就顺利完成了！

特别提醒：避免运营人员操作失误，建议把PS内部的所有图层锁定。

第六步：培训运营人员

通过上面的组件建立，运营人员只需添加Excel文件的子列表，并在PS选中导出即可完成操作，可以让运营人员把PS看成图片导出工具，可以非常轻松的完成。（机械化流程）

因为考虑到运营人员可能无法理解设计逻辑，所以很可能会出现操作失误或不知道怎么操作的情况，所以建议通过直播以及视频文件、PDF文件、GIF文件来引导运营人员操作。

• 直播优势：直播在线操作，不懂可以及时询问，能让运营人员快速上手。
• 文件优势：主要用于操作者忘记操作或操作失误时的提醒。
• 特别提醒：给予运营人员文件中必须包含：操作文件（PS源文件、背景图片、Excel表格）、字体包（PS中用到的字体）、操作提示文档（视频、PDF、GIF）

下面是员工PDF操作步骤图示：

案例源文件提取

Sketch组件库源文件：

PS、Excel组件库源文件：

下载链接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取码：e3li

文章来源：优设网     作者：黑狮力

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

颜色的本质

当今是色彩的世界，物体颜色的不同，带给我们的情绪也截然不同。想要掌握颜色，首先就要研究颜色的本质。

颜色分为光学三原色和颜料三原色。

1. 光学三原色

光学三原色由：红、绿、蓝组成。

色值分别是：

• 红（red ）：#FF0000 RGB（255，0，0）
• 绿（green）：#00FF00 RGB（0，255，0）
• 蓝（blue）：#0000FF RGB（0，0，255）

2. 颜料三原色

颜料三原色由：品红、黄、青组成。

色值分别是：

• 品红（magenta）：#FF00FF CMYK（42，64，0，0）
• 黄（yellow）：#F8F400 CMYK（0，11，92，0）
• 青（cyan）：#00FFFF00FFFF CMYK（38，0，16，0）

理论上，原色可以调制出绝大部分的其他色，而其他色都调不出原色。

那么，这两种有什么区别呢？

3. 区别

光学三原色和颜料三原色最主要的区别就是他们的混合原理不同，分为相加混色和相减混色。

光学三原色为相加混色（可以理解为光的叠加），混合后颜色的明度提高，三色混合即为白色。

相反，颜料三原色采用相减混色（可以理解为光的吸收），混合后颜色的明度和纯度都会下降，三个混合即为黑色。

在设计中我们可以区分为 RGB（光学三原色）和 CMYK（颜料三原色）。

RGB 模式本质上与 CMYK 模式没有区别，只是产生颜色的方式不同。显示器采用RGB模式，就是因为显示器是电子光束轰击荧光屏上的荧光材料发出亮光从而产生颜色，当没有光的时候为黑色，光线加到最大时为白色。而打印机呢？它的油墨不会自己发出光线。因而只有采用吸收特定光波而反射其它光的颜色，所以需要用减色法来解决。

运用场景：

• 光学三原色：RGB模式，灯光色彩中；
• 颜料三原色：CMYK模式，绘画和印刷领域。

冷暖色调

冷暖色由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色，黄色至紫色为暖色。

冷色可以让人联想到海洋、天空、雨雪等，让人产生理智、寒冷、沉寂的感觉。

暖色可以让人联想到火焰、太阳等，让人产生温暖、热情、开放的感觉。

实际案例中，冷暖色调的搭配，直接决定了观赏者的第一感官。观赏者第一眼的情绪感触，就由此而来。

颜色的三个属性

颜色的三个属性分别为：色相（Hue）、明度（Brightness）、饱和度（Saturation）。

1. 色相

色相指的是这些不同波长的色的情况。波长最长的是红色，最短的是紫色。

色彩是由于物体上的物理性的光反射到人眼视神经上所产生的感觉。色的不同是由光的波长的长短差别所决定的。把红、橙、黄、绿、蓝、紫和处在它们各自之间的红橙、黄橙、黄绿、蓝绿、蓝紫、红紫这 6 种中间色——共计 12 种色作为色相环。在色相环上排列的色是纯度高的色，被称为纯色。

2. 明度

明度是表示色所具有的亮度和暗度。计算明度的基准是灰度测试卡。黑色为 0，白色为 10，在 0~10 之间等间隔的排列为 9 个阶段。

色彩可以分为有彩色和无彩色，但后者仍然存在着明度。作为有彩色，每种色各自的亮度、暗度在灰度测试卡上都具有相应的位置值。彩度高的色对明度有很大的影响，不太容易辨别。在明亮的地方鉴别色的明度比较容易的，在暗的地方就难以鉴别。

3. 饱和度

饱和度是用数值表示色的鲜艳或鲜明的程度。

饱和度为 0 时，就是黑白灰。有彩色的各种色都具有彩度值，无彩色的色的彩度值为0，对于有彩色的色的彩度（纯度）的高低，区别方法是根据这种色中含灰色的程度来计算的。

颜色搭配

1. 单色

单色指的是某个颜色纯度的变化，就是在原有色上叠加 10%~90% 的白色/黑色得到的一个颜色。

这种方法运用到产品中，会给人一种朴素、低调干净的感觉；同时，也会给人一种单调的感觉。单色的颜色搭配适合沉浸式的产品中使用，不会因为色彩而打乱用户的体验。

产品案例：MUJI

2. 互补色

互补色是指在色相环上对立（180°）的两个颜色。

色彩中的互补色有红色与绿色互补，蓝色与橙色互补，紫色与黄色互补。

补色并列时，会引起强烈对比的色觉，会感到红的更红、绿的更绿。

互补色是很难把控的一种色彩搭配。由于色彩冲击力极强，用好了可以达到视觉峰值，反之则会很“村气”

3. 邻近色

邻近色是指在色环上相邻的两三个颜色，在色相环上相距 60°

它们色相彼此相近，冷暖性质一致、色调统一和谐、感情特性一致。邻近色是选择相近色彩时很不错的方法，可以在同一个色调中制造丰富的质感和层次。一些效果不错的色彩组合有蓝绿色、蓝色和蓝紫色，还有黄绿色、黄色和橘黄色等。

4. 对比色

对比色是人的视觉感官所产生的一种生理现象，是视网膜对色彩的平衡作用。指在相环上相距 120° 到 180° 之间的两种颜色。

对比色能使色彩效果表现更明显，形式多样，极富表现力。需要注意的是，互补色一定是对比色，但是对比色不一定是互补色。

色彩的视觉呈现

1. 光源色

物体只有在光的照射下我们才能看到他们的颜色。

发光体发出的光，形成了不同的色彩，我们将这些色光称之为光源色。

2. 固有色

固有色就是我们平时看到物体的颜色。

比如在正常光照下我们看到一个物体是红色，那他的固有色就是红色。

3. 环境色

环境色是物体周围环境的颜色。

环境色对我们看到物体颜色的影响非常大。大家平时肯定也遇到过一个物体在不同的光照下，呈现出来的物体颜色也不尽相同。比如，一个在蓝色天空下的苹果会呈现部分淡蓝色，就是环境色的影响。

色彩格式

1. RGB

RGB 色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB 即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

2. HSB

在 HSB 模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示明度。

3. HSL

在 HSL 模式中，H(hues)表示色相，S(saturation)表示饱和度，L（Lightness）表示明度。

4. HSB 和 HSL 的区别

HSB 和 HSL 都是表示色相、饱和度和明度，不同的点在于应用开发中，不同开发语言下可调节的明度值名词不同，所以这两个格式不用过于纠结哪个用的更多，具体使用中就是需要哪个用哪个。

不同颜色的感受

1. 黑色

黑色代表着品质、权威、严肃、稳重、高级。它是所有颜色中最有力量的，黑色+金色凸显高贵感，黑色+红色凸显时尚感。

黑色是永不过时的颜色。

2. 白色

白色代表纯洁、信任、朴素、简单。黑色和白色经常会被用作无色，这两个颜色没有色彩倾向，属于中性色，所以常常被忽略掉。在界面设计中，白色常常被用作背景色，提高画面明度，凸显其他内容，提高文字的易读性。

3. 红色

红色代表喜庆、热情、奔放、自由、欢乐。它是很强势的颜色，一出现就会使人热血沸腾，常常出现在电商活动中，让人有购物的冲动。同时，红色也有一种警告的含义。一些产品高危操作的 Button，都是用红色来提醒用户。

4. 蓝色

蓝色代表冷静、商务、未来、科技、安全，它是一种比较理智的颜色，在色彩心理学的测试中发现，几乎没有人对蓝色反感。主色调用蓝色的太多了：知乎、Twitter、Behance、钉钉等，蓝色的运用给用户一直安全、放心的感觉。

5. 黄色

黄色代表辉煌、高贵、信心。它的明度极高，虽然没有红色给人那么强烈的感官，但是黄色给人一种警示的意思。黄色经常会以高贵的含义被用到：网站的 VIP。

6. 绿色

绿色代表健康、活力、生命、安全、和平、宁静。绿色可以治愈心灵，当你不开心的时候，看一下绿色的东西，会让你的愉悦值增加。它在生活中用到最多的含义是安全：绿色通道、绿灯等。

7. 紫色

紫色代表浪漫、时尚、性感、梦幻、创造力。紫色+粉色经常在女性化妆品被用到，紫色在自然生活中很少看到，所以也有一种稀有、高贵的感觉。

色彩在设计中的应用

1. 数量

一个页面中尽量不要超过 3 种颜色（黑白除外），颜色过多会让用户的兴奋值上升，不易长期查看。

2. 统一性

每一个产品都有自己的主色调，所有的页面的色彩搭配都要和主色调呼应，主色调的合理运用直接关系到用户对产品的信任值。同一组件、场景中，颜色使用要保持一致，切忌“自由发挥”，毫无规范可言。

3. 60-30-10原则

60%、30%、10% 的原则，是达到色彩平衡的最佳比例。在 60% 的空间使用主色，可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个 App 的视觉焦点和色彩关系；30% 的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下 10% 的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。6:3:1 原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。

4. 颜色禁忌

禁用纯黑、纯灰，纯黑和纯灰会使用户陷入负面情绪中，可以在黑色和灰色中加入一些色调，让颜色看上去更柔和，另外纯黑色看时间久了会使人疲惫，在实际产品中，也很少有用纯黑的。

5. 文字中的使用

超链接颜色用蓝色，为什么呢？

最早期电脑中用的是深灰色背景+黑色字，那时候能用非黑色最深的颜色就是蓝色，所以这个习惯一直延续至今。这种用户习惯非常一致的情况下，尽量不要去改颜色，因为改成别的颜色就会颠覆用户认知，学习成本就会增加。

6. 卡片阴影

一定不要用纯黑色阴影，阴影的颜色会受到环境色和固有色的影响，对于有颜色卡片的背景，尽量使用比卡片更深的同色系颜色来调阴影，会使得阴影更干净、整洁。

配色网站推荐

1. Wbgradients

网站链接：https://webgradients.com/

Wbgradients 是一个在线调整渐变色的网站 ，可以根据你想要的调整效果，同时支持复制 CSS 代码，可以更好的与开发对接。

2. Grabient

网站链接：https://www.grabient.com/

Grabient 是一个非常漂亮且实用的渐变配色网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下方自由添加和调整渐变的色系、以及线性渐变方向。

3. Color Grid

网站链接：https://www.0to255.com/740941

该网站随意选色值，它自动换算出已选色值的 32 种明度色值，简单易用。

4. Eva Design System

网站链接：https://colors.eva.design/

Eva Design System 是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。右上角可以切换浅色模式和深色模式的对比。

5. Color Hunt

网站链接：https://colorhunt.co/

Color Hunt 是开放的调色板集合，可以添加到 chrome 浏览器，方便随时随地使用。

文章来源：优设网     作者：友设青年

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

前文的原子设计中我曾经讲过，原子是构成所有元素的最小单元，没有办法再被细分。它通常对应着产品设计中的通用样式及构成组件的最小颗粒。而颜色，作为整个设计系统中极为重要的原子之一，在心智模型中占据了关键的地位。

我们看到红色能够感受到热情、兴奋和危险，看到绿色时往往就感受到安全、自然和平静。可以说，颜色调动我们的情绪只需要一瞬间，而且它在我们的记忆中可以停留更久。

接下来，我结合公司目前的业务CROV Dropshipping（以下简称DS），来进行色彩体系的探索，以输出一整套的色彩方案。但愿这次探索能够给予各位一点启发。

大纲走起：

• 业务背景
• 为什么我们需要色彩体系
• 如何创造一套色彩体系
• WCAG无障碍测试

业务背景

CROV DS是针对美国市场的线上一件代发平台（类似阿里巴巴的一件代发业务），属于跨境电商B2C行业。平台帮助用户无需任何初始成本、无需囤货即可顺利开展电商之路，时间灵活可控，让用户专注于销售本身。

为什么我们需要色彩体系？

1. 对于业务

目前CROV DS业务日益繁杂，但是除了品牌色之外，辅助色的定义过于随意。而且随着业务场景的扩展，临时增加的颜色很容易被遗漏在某个不知名角落的画板中，导致一次性用色的风险。（tips：一次性即前一篇我所讲到的用完即扔、未被复用的设计）

而且用色本身的随意也导致研发还原结果的不统一，一处地方色彩各异的现象比比皆是。

因此，我们需要基于我们自身的业务特征来产出一套足够完善的色彩体系，让业务从用色上达成基本的一致统一。

2. 对于设计师

我们设计师在定义颜色时，更多的是直接在色板上进行取色，但这样的取色方法存在诸多弊端。

增加决策

可能很多设计师选色时会有这种情况，一会觉得这个颜色脏了，一会又觉得那个颜色太刺眼了，有时候完美主义作祟，为了得到一个满意的颜色甚至花上大半天。这种情况尤其在多色搭配时更为严重。

其实这和不用网格系统来布局是一个道理。（注：网格系统是一种能够极大提升布局效率的方法，后面会讲～）

色板中取色的范围趋近于无穷。如果将HSB模式下的单个H、S和B作为一个最小单元格，那么我们可以选择的格子高达数百万个。颗粒度过细的情况（其实根本就没有颗粒度）导致我们在取色时往往会被迫进行反复的微调和尝试。

缺乏秩序和逻辑性

直接在色板中取色主要依赖的是”直觉“这种相对感性的存在。

比如一个按钮的状态可以包括normal、hover、pressed、disable等多个状态，如果我们仅仅靠自己的直觉自由调整明度和饱和度，最后的配色方案其实缺乏内在的逻辑性和秩序性。

难以复用

对于B端这些偏后台工具、场景复杂的业务，颜色运用得往往也比较广泛，如果我们没有一套完善的色彩体系，那每次一遇到新的项目及业务场景需要用到新的颜色时，之前定义的颜色难以复用，导致我们需要重新定义颜色。而且这种相对主观的方法也缺乏说服力，难以体现专业度。

而如果设计师提前定义好一套色彩体系，一方面只需要在对应的色板中选择即可，大大减少了设计决策。另一方面色彩体系所提供的不同色彩梯度也便于各个需求、业务场景的复用。而且色彩体系富有逻辑和秩序，因此从中挑选的颜色也同样是这样，显著降低设计师依赖”直觉“所带来的主观和不可控。

如何创建一套色彩体系？

Alipay Design团队提过：

以同色系配色为主导，多色搭配为辅。

同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。

接下来我以DS项目为例进行色彩体系探索——

首先，所有的色彩模型统一采用HSB模型进行，正如Ant Design设计团队说的那样，这个模型利于调整色彩时对颜色有明确的心理预期，同时便于团队沟通。

这里再简单普及下HSB模型。H指的是色相（Hue），S指饱和度（Saturation），B指明度（Brightness）。S控制颜色混入白色的量，S值越高，意味着混入白色的量越少，颜色也就越“纯”。B控制颜色混入黑色的量，B值越高，意味着混入黑色的量越少，颜色也就越“亮”。（通俗点说，它们分别代表了明色区域和暗色区域）

1. 品牌色

Crov Dropshipping基于其时间自由灵活、可兼职副业、成本风险低的业务特征，使得对应的用户群越来越多的集中在年轻一代的e-tailer（线上零售商）当中。他们不同于我们常规认知里那类传统的retailer（线下实体零售商），大部分的DSer拥有自己的事业和工作，为了赚取外快，将其当做自己的副业。因此，年轻化是这类用户群的主要标签。

所以，我们采用了高饱和度、偏向蓝色色相的紫色，来作为crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩带”

为了覆盖掉Crov DS本身复杂的前后台业务场景，需要额外搭配各类型的辅助色。我们想要提取24类色相，所以直接通过360/24得出了色环中每类色相的基本角度15°。

因此，这里以品牌色色相为基础，在HSB 360°色环中，对色相（H）正向和反向各自±15°，饱和度（S）和明度（B）保持不变，得到24色的色环彩带。

后续我们的颜色体系就在彩带上的24个颜色上面进行提取。

3. 品牌色同色系配色

品牌色同色系是指，根据品牌色不同的饱和度和明度变化，生成不同深浅、不同明暗的一组颜色。同色系配色不仅传达了品牌性，多个梯度的变化也能够适应及通用尽可能多的业务场景，也便于多信息的层级划分。

而同色系配色的输出则遵循了antDesign发明的tint/shade 色彩系统算法，说人话，就是在颜色中分别加入一定比例的黑色或者白色来更科学地生成色阶。

sketch中可以直接将这套算法可视化处理，便于设计师直接生成所有颜色的色阶。需要注意的是明色区（就是上方横向的那块取色区域，白色至纯色时S由0过渡至100）和暗色区（右侧纵向的取色区域，纯色至黑色时B由100过渡至0）遵循了两种不同的规则，具体规则见下：

当S饱和度变化时（明色区域），S值以S/5的结果值为一个增量进行递减，B值以(100-B)/5的结果值为一个增量进行递增。我们品牌色的S和B分别是80和100，所以这里的两个增量分别是16和0。

品牌色在明色区的下两个色阶对应的HSB参数就是（250，64，100），（250，48，100），以此类推。

而当B明度产生变化时（暗色区域），S值以(100-S)/5的结果值为一个增量进行递增，而B值以B/5的结果值为一个增量进行递减。得出的两个增量分别为4和20。

品牌色在暗色区的下两个颜色对应的HSB参数即（250，84，80）、（250，88，60），剩下的所有颜色以此类推。

根据这两个定义规则推导出全部不同梯度的色阶，我们就可以将其作为品牌色同色系配色。

4. 定义辅助色

我们使用品牌色来传达品牌价值，还需要辅助色来满足多样化业务场景的需要，对用户进行不同的情绪引导，同时也可以缓解用户对单一主色产生的视觉疲劳。

辅助色的定义就可以直接用到我们之前基于品牌色所衍生出的24色“彩带”了。我们通过色环形式，来迅速得出品牌色的同类色、类似色、邻近色、中差色、对比色和互补色。

结果见下：

首先，由于相差15°的同类色与品牌色差距过小，色相对比感微弱，传递的调性过于相似，所以这里直接pass。而邻近色生成的粉色和青色在界面中基本不会作为功能色使用，这里同样直接舍弃。

类似色

类似色即色相差在30度左右的颜色，属于较弱对比色。我们基于品牌色的色相各自±30得出类似色。由于H280的类似色调性与品牌色类似，并且色彩体系中需要一个典型的冷色来覆盖一些场景，所以这里使用了H220的颜色作为冷系的辅助色。

中差色

中差色即色相相差90度左右的颜色，属于中等对比色。H340偏粉，与常规红色相差过多，所以这里借鉴了alipay的辅助色校正原则“色相差值不能超过15”，对H340进行了色相校正，调整至H355。

对比色

对比色即色相相差120度左右的颜色，属于强对比色。最后得出的H130调性与中差色的H160过于类似，直接舍弃。H10与H340调性类似，但是可以向橙色系发展，所以微调到同类色进行色相校正。

互补色

互补色即色相相差180度左右的颜色，属于高强度对比色。最后得出的H70偏绿，这里同样进行了色相校正，将其调整为H55。

最后，得出了共计5种辅助色。不过这些辅助色并不能直接使用，还需要进行感官明度的校正。

5. 感官明度校正

感官明度校正方法来自支付宝设计团队，这是是确认辅助色的最后关键一环。每种颜色都有属于自己的“感官明度”，即发光度。品牌色即辅助色的发光度不一致，就会导致视觉上会有明显的明暗差别。所以，我们需要通过发光度来进行最终的颜色校正。

明度较高的灰色意味着高发光度，明度较低则意味着低发光度。保持品牌色发光度不变，我们对其他辅助色进行微调。

我们只需要将那些视觉明暗差距明显的颜色进行调整。注意，并非所有的颜色都要调整到品牌色的感官明度，这些值仅仅是一个参考。最终的校正依然取决于我们的视觉！比如黄色感官明度本身很高，但是视觉缓和、不像绿色那么刺激，所以基本无需校正。

最后得到校正后的如下辅助色。蓝色、绿色、黄色以及红色在界面中可以作为功能色使用，可以分别代表常规、成功、警告和报错状态。而橙色则可以用作突出类的提示信息，它比bold字重要高出一个层级。

6. 辅助色的同色系配色

与品牌色一样，使用tint/shade规则推导出全部辅助色不同梯度的色阶。具体过程不再赘述～

7. 定义文本色

CROV DS的文本色并非纯粹的中性色，我们通过加入一点点品牌色来让文本呈现色彩倾向，以此提升页面的活力及年轻感，同时也可以让界面更加耐看，减缓B端产品长期使用时的视觉疲劳。

具体方法就是，分别在#222、#555、#888、#b3b3b3的一、二、三级中性文本色代表的色块上，覆盖一层10%透明度的品牌色。最后得出了四个层次的文本色。当然，中性文本色你也可以参考antDesign中通过透明度进行定义的方法，不一定需要按照某个具体色值来。

WCAG无障碍测试

我们必须要承认的现实是，设计师所定义出的色彩在mac上看上去是很出彩，但是这并不能代表所有用户。也许在用户中依然有一部分人群，他们的显示器配置低和老旧。而且我们无法判断用户们的使用环境，有可能是在刺眼的阳光下、有可能是在昏暗的环境中。如果色彩不去做可用性测试，在很多的情况下存在体验降低的风险。

而WCAG（Web Content Accessibility Guideline，Web内容无障碍指南）解决的正是这些障碍问题。WCAG中的POUR无障碍原则包括了：易于感知的（Perceivable）、便于操作的（Operable）、稳定理解的（Understandable）、稳定耐用的（Robust）。

而颜色则正是对应了易于感知的这一无障碍原则。网站中的文字和图像应该具备足够高的色彩对比度，使之更易被用户感知识别。

WCAG颜色对比度无障碍的两个标准分别为：「1.4.3条例：最小对比度标准」和「1.4.6条例：加强对比度标准」，分别对应着AA级和AAA级。

AA级的定义为：普通文本的视觉呈现与背景至少要有4.5：1的对比度，大文本与背景至少有3：1的对比度

AAA级的定义为：普通文本的视觉呈现与背景至少要有7：1的对比度，大文本与背景至少有4.5：1的对比度

（这里的大文本即≥18pt常规字重的文本或者≥14pt加粗字重的文本）

这两个条例被大厂们广泛运用到了产品的颜色标准当中。

比如MD规范中的文本移动性规范标准中的数据就是来自WCAG的1.4.3条例标准。

同样，阿里巴巴在前不久发布的B-Design中的无障碍色acs指标和WCAG本质上也是一样。

1. 颜色对比度验证

那该如何验证我们的颜色符合这俩标准呢？

easy。这里直接上个网址，https://contrast-ratio.com/#%23373247-on-%23fff

我们分别在背景及文本录入色值，即可得到最终的对比度数据。比如我录入了白色和一级文本色数值，最后的12.28即两者的对比度，嗯，达到了AAA级标准。

一样的步骤，分别测试了其他文本色的对比度（产品无暗色模式，所以此处仅验证白色背景下的颜色对比度），分别达到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的对比度均符合可见度标准。

不过WCAG中指出，一些特殊情况下的文本无对比度的限制，其中就包含了表单字段的占位符（placeholder）。而2.38对比度对应的文本色主要用于暗提示，因此这种情况就可以无视掉了~

最后

色彩体系的初步探索到此结束了，不过篇幅原因并没有面面俱到，比如渐变色、实际落地效果等等。另外，一些地方我自己也在摸索阶段，因此很多分析也可能存在不足，文章仅作参考。

文章来源：优设网     作者：转行人的设计笔记

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

转自：站酷.         作者：丝绒Store

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

孙子兵法有云：知己知彼，百战不殆。知天知地，胜乃不穷。

“知己知彼”说明了解自己和竞争对手的重要性，“知天知地”则强调了了解行业竞争环境的重要性。能通过竞品分析达到知己知彼、知天知地，是设计师的必备技能。

什么是竞品分析

竞品分析是对市场上存在直接或间接竞争关系的优质产品，进行分类、组织、对比、刨析，总结竞品、以及自己产品的优势和不足，为下一步决策提供帮助。竞品分析维度包含但不限于市场调研、盈利模式、战略定位、产品功能、交互流程、页面框架、视觉表现、文案内容、运营方式等。

竞品分析和市场分析、产品分析、产品体验分析的关系如下：

竞品分析的作用

对设计师来说，竞品分析在了解行业现状、熟悉功能、了解竞争对手、了解用户习惯、明确自己产品定位等方面都有帮助，具体如下：

竞品分析有这么多好处，那么设计师该如何做竞品分析？

设计师如何做竞品分析

1.明确竞品分析的目标

做竞品分析前最重要的是要明确竞品分析的目标。明确竞品分析目标的前提是要“知己”。

“知己”即了解自己产品处在哪一个阶段，有什么问题，接下来打算怎么做或达成什么目标。然后根据产品当前问题确认“要通过本次竞品分析获得什么？”。竞品分析一定是为自己的产品服务的，是通过了解竞品来达成自己产品的某种目的。不能盲目地为分析而分析。

大多数工作流程中，设计师进行竞品分析一般有以下几种场景：

场景一：在产品需求确认之前，通过竞品分析对某功能进行调研，了解行业中该功能的具体设计。

如设计师了解到产品计划对帖子详情页面进行改版，产品需求还没确认。此时进行竞品分析的目的可以是：了解竞品帖子详情页面的设计共有哪几类表达方式，每一类表达方式的优缺点各是什么。

场景二：.在产品需求确认之后，通过分析产品需求，推导出设计目标。此时竞品分析是为产出能满足设计目标的方案服务的。

如产品的设计需求是“提高帖子详情页的点赞数、留言数、评论回复数”。此时推导出的设计目标可能是“营造详情页互动氛围、提高回复评论的效率、减少操作步骤”，对应的竞品分析目的可以是“总结竞品营造社区互动氛围、提高活跃度的方式。掌握竞品回复评论功能中操作步骤少、效率高的设计方式及总结背后原因。”

场景三：产品大改版、重新设计，或者孵化新产品时，通过竞品分析对行业内的产品有一个整体的了解，从而得出自身产品的差异化定位。此时竞品分析的维度会更多元：可以从用户体验的5个要素逐级进行分析，或使用SWOT分析、波士顿矩阵分析等。

场景四：竞品的动态跟进，主要是跟进竞品的迭代情况，以保持长期的“知彼”状态。可以定期（如2周或一个月）对竞品迭代信息进行一次整理。App Store或七麦数据等网站可以查到竞品每个版本的迭代内容。

2.选择合适的竞品

竞品可以选择直接竞品或间接竞品。直接竞品指市场环境、商业模式、目标用户、产品功能都相似的产品。间接竞品可以是市场环境和目标用户相似，但商业模式和产品功能当前不同、未来可能相同的产品。如果只对产品交互流程、页面框架、视觉表现等进行分析，还可以选取功能相似，或者目标用户相似，用户体验好的产品进行分析。

建议通过易观千帆、七麦数据、App Annie等平台了解竞品的数据情况，选取数据排名靠前的产品进行分析。

3.了解竞品定位、盈利方式、用户画像

了解竞品的定位、公司战略、盈利方式和用户画像，有利于我们理解竞品功能的背后的逻辑，利于我们分析竞品为什么设计成这样。竞品分析不只是分析表面看到的功能，还要分析更深层次的原因。

1.了解竞品定位、公司战略途径有：竞品官网、维基百科、拉勾网、天眼查、IT桔子 、Questmobile、App Annie等

2.了解盈利方式的途径有：36 氪

2.了解竞品用户画像的方式有：竞品官网、移动观象台、百度指数、艾瑞咨询等网站。

4.选择合适的竞品分析方法

竞品分析的目的不同，选用的竞品分析方法也不同。以下介绍几种常用的竞品分析方法：

竞品画布

竞品画布是一个简易的竞品分析模板，用一页纸包含了竞品分析的9大问题，如下图。

适用条件：

1.竞品画布可以用在竞品分析之初，用来梳理竞品分析的思路，是竞品报告的MVP（最小可用产品）2.竞品画布包含竞品分析的6个关键步骤，可以让新手快速上手竞品分析。

操作步骤：

按照竞品画布模板上的问题依次的分析解答。竞品画布中包含了SWOT分析，注意优势、劣势是对产品或公司内部的分析，而机会和威胁是对外部环境的分析。另外，在分析第3点分析维度时，建议结合分析目标说明选择这些方式的理由。

优点：竞品画布相对其他方法来说视角更全面，可以结合其他分析方法一起使用。

缺点：对UI/UE来说，针对性不够强。

矩阵分析法

矩阵分析法又称知觉图，主要是通过二维矩阵分析2个关键要素，以了解自己和产品的定位及竞争优势。

适用条件：

1. 矩阵分析法主要用来帮助产品做2个关键要素方面的定位决策。如自营电商平台可用矩阵分析法来决策平台定位是售卖高价格、优质的商品平台（如寺库），还是售卖超低价格、质量一般的商品的平台（如拼多多）。以及帮助产品评估自己的竞争优势，判断产品是否需要重新定位。

2. 设计师还可以用矩阵分析法分析竞品的视觉风格，以辅助定位自身产品的视觉风格。如下图为视频app logo风格的矩阵分析

操作步骤：

（1）确定两个关键竞争要素。这两个竞争要素应该是用户最会关注、会影响用户决策的关键属性，如价格和配置。

如果是设计师用矩阵分析法来分析竞品视觉风格，可选取两对意思相反，对视觉风格有较大影响的关键词。如严肃—活泼、扁平—拟物

（2）绘制横纵坐标轴，把两个对关键竞争要素作为横坐标和纵坐标填入。

（3）针对竞品关键竞争要素的表现，把竞品放到4个象限的对应位置。并思考自身产品在4个象限中的位置。4个象限的空白区域可能存在机会，而4个象限中竞品较多的区域，用户群可能更广泛，也意味同类公司更多。

优点：矩阵分析法的优点在于聚焦于关键的两个要素，可以直观的表现出用户对自身产品和竞品在关键要素方面的认知。

缺点：矩阵分析法的缺点是只能从两个要素进行分析。如果要分析多个因素，可以使用雷达图分析法。

雷达图分析法

雷达图分析法本身是对企业经营情况进行系统分析的一种有效方法。我们可以将它运用到互联网产品用户体验分析上，用图示化的方式对竞品多个维度的优势、劣势作出直观的展示。下图为对母婴类产品拍大肚照上传功能进行的雷达图分析：

适用条件：

分析竞品多个维度的优势、劣势（一般选6个维度分析）。

操作步骤：

（1）定义分析维度

定义分析维度主要是确认从哪几个角度分析具体功能，如选择可用性、防错设计、易懂、一致性等。分析维度的选取也可以参考尼尔森的十大可用性原则，具体选取什么维度应根据分析的功能来定。

（2）对竞品的每个维度进行打分

定义好分析的维度后，我们依次对竞品的每个维度的表现情况进行打分评估，每个维度满分为100分。

优点：雷达图分析法的优点是相对直观、可以分析多个维度的优势，劣势。

缺点：雷达图包含多个维度，每个维度的满分和量级指标是不一样的。需要分析者心中对每一个维度的满分有个大致预期。如流畅度怎么样算90分，怎么样算80分？有可能同一个产品A同学认为流畅度80分，B同学认为流畅度90分，因此分析可能带有一定的主观性。

表格法

表格法主要是用表格来统计竞品功能元素的有无。

适用条件：

1.当我们想较为全面的了解一个功能的概况，或较为宏观的把握竞品的现状，可使用表格法。2.当我们思考某个功能元素是否需要保留，可使用表格法分析竞品的做法。

操作步骤：

（1）画出一个N行M列的表格，首列填入功能元素的具体名称，首行填入竞品的具体名称。

（2）对每一个竞品的具体功能元素进行统计，若某元素存在则在表格上对应位置打勾，不存在则空着。

（3）进行分析小结。

如果某一列功能元素所有竞品都打了勾，则说明该功能元素竞品都有，是个普遍元素，优先级可能较高。如果某个功能元素是某个竞品独有的，则可能是该竞品的差异化功能，可能是竞品的特色。使用该方法时要注意：即使是其他竞品都有的功能，自身产品也不一定要有，最终自身产品功能元素如何定，要根据需求来分析，不可盲目照搬。

优点：表格法的优点在于可以清晰展示功能细节的有无。

缺点：如果页面元素过多会显得杂乱，且表格中没有显示元素的优先级。

多级功能表格比较法

适用条件：当产品功能较复杂，要统计竞品功能元素、全面了解竞品概括，可用该方法。

操作步骤：在表格法的基础上，将功能点拆解成一级功能、二级功能、三级功能，再进行比较分析和总结。具体形式如下图：

优点：可以清晰的展示一级功能、二级功能、以及功能的子级。

缺点：如果层级太多，或者元素太多表格会比较庞大杂乱。

用户路径分析法

用户路径分析主要是把自己假想成用户，体验用户操作某软件中某功能流程，并记录过程。如下图是对亲宝宝拍摄照片用户路径分析：

适用条件：适用于要分析某一个功能的具体交互流程。

操作步骤：

（1）把自己想成小白用户，给自己布置一个小任务，并用竞品软件操作，完成这个任务，如完成上传照片。

（2）操作时按照：发现入口—了解功能—操作上传—跟进操作反馈的步骤进行。

（3）记录自己在体验功能时的感受，如哪一个步骤觉得疑惑，哪一个步骤觉得爽。

（4）梳理一下该功能的用户路径，看看产品设置的路径中有哪些是自己在体验时主要操作的，它们是不是该功能的主要路径？哪些是自己体验过程中忽略的，是竞品有意弱化或者其他，并总结结论。

优点：专注于操作流程中的细微体验，聚焦于发现体验问题。

缺点：自己的操作习惯不一定完全代表用户的操作习惯，带有一定主观性。

产品视觉表达分析法

产品视觉表达分析指对竞品某个模块的页面表达元素进行拆解分析，并总结每种表达方式体现的内容优先级和规律。

适用条件：适用于设计师横向分析某个功能模块的表达方式，及掌握每种表达方式的适用场景。

操作步骤：

（1）将选择竞品具体模块功能进行截图并对比。

（2）提取每个模块的表达元素，并在截图的下方用色块表达提取的元素。

（3）总结共有几种表达方式，每种表达方式的突出对象是什么、适用条件如何、视觉优先级如何。下图为母婴类产品问答功能视觉表达分析。

优点：可以聚焦于单模块的表达方式分析。

缺点：不适用于流程的纵向对比。

5Why分析法

5Why分析法又称5问法，即看到一个现象不断的去问“为什么”来寻找根本原因，以找出解决某个问题治本对策的方法。该方法最初由丰田公司提出并在丰田公司广泛采用。

适用条件：

适用于深挖某个功能表现背后的根本原因。也适用于帮助我们在做竞品分析时养成透过现象看本质的思维习惯。

操作步骤：

（1）把握现状。主要是为了确认问题，调查基本的表现、数据情况等。

（2）原因调查。针对明确的问题，探究背后原因。找到浅层次的原因后，再问为什么，找更深层次的原因，问5次为什么。原因调查过程中要注意：一定要以事实为依据去探究背后原因，不可主观臆想。另外，5why分析法也不一定都要问满5个为什么，重要的是通过多次提问探究到根本原因。

（3）实时措施，纠正问题

（4）吸取教训，从源头上预防错误再发生

5Why分析法用到竞品分析上，重点是在前2步，即把握问题和原因调查。我们不一定要完成5Why分析法的所有步骤，但我们要有问“为什么”的意识，不断的问自己竞品这么做的目的和原因。

优点：聚焦现象背后深层原因，利于我们培养透过现象看本质的思维。

用户体验5要素分析法

用户体验5要素分析指从战略层、范围层、结构层、框架层、表现层5个层级，逐级的去分析。

适用条件：适用于要全面系统地了解某个产品时，对该产品进行全局分析。

操作步骤：

可以按照用户体验要素的5个层级从上到下分析，或从下到上分析。每个层级的分析可以使用不同的分析方法，在此不赘述。需要注意的是使用该方法分析时要避免追求大而全，建议站在竞品分析目的角度，分析时有一定倾向性。

优点：分析较全面，对产品理解会比较深入。

缺点：要真正执行并好不容易，需要对用户体验的5个要素有比较深的理解。

以上就是设计师常用的竞品分析方法的解析说明，我们要根据分析目的灵活选择方法。各方法的对比如下图：

5.了解竞品的用户反馈

除了对竞品进行分析，我们还要关注竞品的用户反馈，了解竞品用户在使用产品过程中遇到的问题，了解用户觉得竞品好在哪里。要对竞品的问题进行规避，对好的使用体验进行分析并学习借鉴。

可以通过网站 https://appbot.co/ 查找App store上的用户反馈。如下图为亲宝宝产品的用户反馈:

6.总结竞品分析结论

不论使用哪一种分析方法，分析完之后都应输出分析小结。在所有分析结束之后，还要输出整体的分析结论。结论可以由定性或者定量分析得出，可以既包含客观分析的结论又包含主观分析的结论。

客观分析的结论如行业市场布局情况、竞品数据情况、界面操作反馈、产品包含的功能点（普遍功能、特色功能、实现程度如何）等。主观分析的结论如竞品的可用性、易用性、操作体验等。

总结

竞品分析是通过分析竞品，得出要解决的问题的结论过程。所以，了解自身产品当前处在哪个阶段，有什么问题相当重要。通过当前问题推导竞品分析目标，再跟进竞品分析目标灵活运用分析方法。竞品分析方法可以有很多，但确认好分析目标才是关键。

参考文献：

《有效竞品分析：好产品必备的竞品分析方法论》——作者：张在旺

《步步为赢 交互设计全流程解析》——作者：董尚昊

《电商类APP：商品卡片竞品分析》——作者：白鹭漫谈

转自：站酷

作者：小夕看太阳 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

图标在UI设计体系中，是重要......

（此处省略1000字）

直接上图！

上图是我以前绘制的一套图标作品，

感兴趣的话就一起来了解一下我平时是怎么创作一套图标的吧~

制作过程

1、搜集+临摹+原创

积累素材是设计师必备的“基本功”，同时也是“职业病”。

平时我会有意识的在速写本上绘制一些简易的图标，如果在一些APP中看到比较好的图标，我也会临摹下来。

下面给大家随机展示一些我平时绘制的图标。

除了绘制图标以外，我平时也喜欢绘制一些其他的图案。

2、反复打磨

将绘制好的图标利用电脑矢量化后打印出来，根据打印稿用笔标记出不合理的地方，比如：线条太粗了，重心不稳.......对不合理的地方进行反复修改，再次打印，再修改，循环多次后直到得到自己满意的效果，最后定稿。

下面这幅手绘图就是文章一开始给大家展示的图标成品的手绘最终稿了。

需要强调的是，这一次图标的绘制，有一个特殊的地方，其中一个图标是有实物的。（左：实物图；右：对应图标）

3、图标插件化

最后，将图标上传阿里的iconfont网站，制作成字体图标。

然后将字体图标做成插件（我演示的是ps插件，也可以做成其它xd/sketch/figma插件）

制作过程就是给每个图标赋予关键字，然后利用正则表达式，可以方便的搜索所有图标。

不过这个步骤我就不详细解释了，因为

转自：站酷

作者：灰色执照 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务