色彩是影响用户最简单和最重要的一个因素。研究表明，人们只需 90 秒就能对一种产品做出下意识的判断，而其中高达 60%以上的判断仅基于颜色。因此，选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。在没有文字的场景中，颜色的搭配非常重要。如何配色可以使设计感更强，如何配色更好看，哪些配色不好看，解决这些问题就需要学习色彩理论。
我们身处在一个多彩的世界中，物体的不同颜色，会让我们产生不同的情绪。色彩，即光从物体反射到人的眼睛所引起的一种视觉心理感受，按字面含义上理解可分为色和彩。「色」是指人对进入眼睛的光传至大脑时所产生的感觉，「彩」则指多色的意思，是人对光变化的理解。色彩的基本理论虽然老生常谈，但在 UI 设计中具体怎么运用，还有关于色彩的性格和含义，都是我们需要了解的。因此在学习 UI 配色之前我们先来了解色彩的基础知识。
原色
所有的色彩都源自“红黄蓝”三种原色，很多人误以为三原色是“红绿蓝”，其实不是。红绿蓝是显示上的三原色，计算机屏幕的显示是色光三原色（红 red，绿 green，蓝 blue）即 RGB 组成的，每一个像素的颜色都用三原色值来显示，与美术上的三原色不一样。原色是其他颜色调配不出来的。把原色相互混合，可以调和出其他种颜色。
虽然 RGB 在显示设备上表现良好，但并不够人性化。因为人们判断颜色，往往是通过：这是什么颜色？是不是太艳了？是太亮了还是太暗了？这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了 HSB 模式和 HSL 模式。
印刷三原色为青（Cyan)、品红（Magenta)、黄（Yellow)。是减色模式，混合为深灰色，并不能产生黑，所以在印刷时加上黑色油墨，才能产生纯正的黑，就是 CMYK 颜色模式。
间色
又叫“二次色”。它是由三原色两两混合调配出来的颜色。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫“三间色”。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。
复色
也叫“复合色”。复色是用原色与间色相调或用间色与间色相调而成的“三次色”复色是最丰富的色彩家族，千变万化，丰富异常，复色包括了除原色和间色以外的所有颜色。例如，黄色与橙色混合得到橙黄，红色与紫色混合得到紫红。
冷暖色
最后由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色，黄色至紫色为暖色。冷色令人联想到天空、海洋、冰雪等，产生寒冷、理智、宁静等感觉；暖色则令人联想到太阳、火焰、热血等，产生温暖、热烈、危险等感觉。
虽然可以用「冷」、「暖」色系来划分色彩，但配色的变化却有千种万种。借着色彩的组合方式，从「非常冷」到「凉爽」到「暖和」再到「炎热」都可以用不同的配色组来表现色彩的印象。
不同的色轮由不同的人发明，他们对于色彩的见解不一样，因此创建出来的色轮用途也不一样。比如：伊顿色轮又被称之为美术三原色，是由颜料的三原色混合叠加而成；RGB 色轮主要运用于电脑、手机、平板等一系列科技产品，RGB 的三原色是光的三原色；CMYK 色轮主要用于印刷领域。
丰富多样的颜色可以分成两大类，即有彩色系和无彩色系。彩色系的颜色具有三个基本特征：色相、明度和饱和度，在色彩学上被称为色彩三大要素或色彩三属性。
色相（Hue）
色相是自然状态下的色彩，是色彩的相貌。简言之，色环上没有改变明暗的色彩。色相是色彩的首要特征，是区别各种不同色彩的标准。例如红、橙、黄、绿、青、蓝、紫就是其中不同的基本色相。黑色是没有色相的中性色。不同的色相在人眼中的差异是色相本身对应光的波长不同而造成的。红色波长最长，紫色的波长最短。
饱和度（Saturation）
饱和度是色彩的纯度，他表示颜色中所含有色成分的比例。增加饱和度，色彩会变得更强烈、鲜艳生动；降低饱和度，颜色中灰色成分越大，色彩会变得暗淡乏味。当一种颜色掺入黑、白或其他色彩时，纯度就产生了变化，当掺入的颜色达到很大的比例时，人的眼睛就无法感知出来了。
饱和度为 0 的颜色为无彩色，就是黑、白、灰。数值越大，颜色中的灰色越少，颜色越鲜艳。饱和度高的地方给人感觉靠近，而饱和度低的地方则给人的感觉很遥远。高饱和度和低饱和度的色彩都给人坚硬的感觉。
明度（Brightness）
明度，指色彩的明暗度，反应的是色彩的深浅变化。以自然界为例，一些物体在早晨和晚上的色彩不同。如树木和山脉，早晨色调浅；傍晚因为光线减少了，色调变得偏暗。距光源越近的物体，明度越高，反之，则明度越暗。
明度在 UI 设计中扮演重要的角色，明度运用得好，可以实现好的对比效果。明度达到 100%时，色彩就会变成白色（黑白模式下）；明度是 0%时，就会变成黑色。色彩的明度变化往往会影响到纯度，例如蓝色加入黑色以后明度降低了，同时纯度也降低了；如果蓝色加入白色则明度提高了，纯度却降低了。
完整的 UI 配色应包含主色、辅助色和中灰色。主色通常与品牌色一致，辅助色一般选择与主色色调一致且能拉开层次的颜色，强调色选择与主色相对立的互补色。下面我们来学习几种常见的配色方案。
单色
单色是指某个色彩的明度变化，即在色彩上叠加 10%-90%白色或黑色得到的一组颜色。单色搭配由于彼此之间色彩相同，因此能和谐共处，但因较为朴素也就不容易引人注目，而且会给人一种单调的感觉。单色配色在色彩变化上也适合长时间阅读，颜色波动较少，比较适合沉浸式交互的界面设计。
虾米音乐就是单色搭配的最好例子，它将主色橙色用在主要功能入口、标签栏图标等所有界面的关键元素上，给人非常精致和统一的视觉体验。
如若想要在色彩变化上融入一点微妙的变化，可以尝试在色环中选用两侧相近的颜色，这样色彩层次丰富了而统一感也不会变，称之为“邻近色配色”。
邻近色
是指在色相环中相邻的两种颜色，在色相环上相距 60°，或者相隔五六个数位的两色。它可以在同一个色调中建立起丰富的质感和层次，优点是阳光、活泼、稳定、和谐但不单调，理所当然称为最安全的配色法则。邻近色色相相近，冷暖性质相近，传递的情感也较为相似。例如，红色，黄色和橙色就是一组邻近色。邻近色表现的情感多为温和稳定，没有太大的视觉冲击。
美颜相机的主色是粉色，将浅粉色和浅紫色作为辅助色，既能信息区分又和谐统一。
互补色
互补色是指在色相环上对立（180°）的两个颜色，色相环上夹角呈现一条直线，例如黄色和紫色、橙色和蓝色、红色和绿色等。互补色有着非常强烈的对比度，在颜色饱和度很高时，可以产生许多十分强烈的视觉效果，就会使这两种颜色都显得更加鲜明，也将视觉冲击力强度提升至峰值。这类配色形式优缺点和对比色很相似。常给人一种潮流、刺激、兴奋的感觉，把互补色放在一起，会给人强烈的排斥感，搭配不好会很山寨。
Airbnb 的主色为红色，界面设计中使用主色的互补色「墨绿」作为主色调，给人清晰、简洁的感觉。
分裂互补色
分裂互补色是指寻找三种颜色，其中两种互为邻近色，另一种与它们形成互补色，例如黄色和蓝色、洋红。这种搭配既能保持互补色强烈的对比及视觉上的趣味性，又能让颜色变得柔和。
36Kr 将蓝色作为主色，互补色黄色作为辅助色用在图标、标签上，再选择黄色的邻近色红色作为另一辅助色，用在不同的信息上，有助于用户区分产品信息。
对比色
指在色环上相距 120°～180°之间的两种颜色，也是两种可以明显区分的色彩，包括颜色三要素的对比、冷暖对比，彩色和消色的对比等。对比色能使色彩效果表现更明显，形式多样，极富表现力。需要注意的是，互补色一定是对比色，但是对比色不一定是互补色。因为对比色的范围更大，包括的要素更多，如冷暖对比、明度对比、纯度对比等。这类配色形式优点是视觉冲击力强烈、富有跳跃性、突出、点缀能力强，比如常用作画面中的点缀色，或与主体固有色成对比关系的背景色，用于突出主体。缺点是大面积使用比较难把控。
马蜂窝的主色是黄色，对比色蓝色作为辅色用在标签、小图标上，红色作为强调色用在价格等信息上。
对比色也不单纯是两个颜色之间的对比，而是色调之间的对比！对比色还包括：补色对比、色相对比、明度对比、饱和度对比、冷暖对比，饱和度越高对比越强烈，明度反差越大对比越强烈。
四元色搭配
四元色搭配在色环上形成了一个矩形，使用不是一对而是两对互补色。将其中的一个颜色作为主色，其余颜色作为辅色进行搭配可以得出不错的效果。
四元色是比较难以平衡的颜色，不过搭配好了会非常出彩。不信可以自己用用感受一下，尤其是使用其中一个颜色作为主色，其他的三个颜色作为辅助色的时候。
了解了色彩的基本知识，下面说说色彩和光源的关系。如果想描绘好对象的色彩，那么就必须了解对象的固有色、光源色、环境色及它们之间的关系和变化。
固有色
即物体本身的颜色。是指在光源条件下物体占主导地位的色彩，如红色的罐子、绿色的植物等。物体的固有色并不存在，在绘画过程中为了观察方便经常引入“固有色”这一概念。从实际方面来看，即使日光也是在不停地变化中，何况任何物体的色彩不仅受到投照光的影响，还会受到周围环境中各种反射光的影响。所以物体色并不是固定不变的。
光源色
物体只有在光源的照亮下才能观察到它们的色彩。光源有自然光（太阳、天光）和人造光（灯），这些光源都各自具有不同的颜色。太阳光是偏黄色暖色光，月光是偏青的冷色光，阴天则更多的是蓝灰色的天光，普通灯光是偏黄色的暖色光。光源的颜色对物体的颜色影响很大，想象一下一个置于红色光源照射下的蓝色物体会是什么颜色。
环境色
物体周围环境的颜色就是环境色。环境色对物体的影响非常大，如在红色背景下的白色物体，由于光源打到红色背景上的背景反射光也会“染”到白色物体上，因此白色物体的部分表面会蒙上一层淡红色的色彩。所以，设计师在用电脑作图时也需要考虑并想象环境色的影响。
Lab
Lab 的全称是 CIELAB，有时候也写成 CIE L*a*b*。最突出的特点是它的生理特性，一是它包括人眼所看到的所有颜色，是目前为止色域最宽的色彩空间，二是跟人眼一样，首先看到的是明暗，其次是色彩，可以用数字化的方式描述人的视觉感应，在计算机视觉中广泛应用。
LAB 颜色空间中，L 表示亮度，取值[0-100]对应[纯黑—纯白]；A颜色表示从绿色到红色的范围，取值[-128—+127]对应[绿—洋红]；B表示从蓝色到黄色的范围，取值[-128—+127]对应[蓝-黄]，正是暖色，负是冷色。Lab颜色空间中亮度和颜色是分开的， L通道没有颜色，a通道和b通道只有颜色。不像在RGB颜色空间中，R通道、G通道、B通道每一个既包含有明度又包含有颜色。
在表达色彩范围上，最全的是 Lab 模式（其次是 RGB 模式，最窄的是 CMYK 模式），它弥补了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是说 Lab 模式所定义的色彩最多，且与光线及设备无关，并且处理速度与 RGB 模式同样快，比 CMYK 模式快数倍。
Hsb
HSB 和 HSV 是同一个东西，只是名称不同。在 Photoshop 拾色器上可以看到每个颜色都有一组 HSB 值，H 表示色相、S 表示纯度、B 表示明度。色相值为 0～360 度，即圆；纯度和明度值为 0～100%，因此，了解 HSB 模式的原理，就能了解色彩的本质。
当我们需要调配同色系色彩，保持色相不变，只需要改变纯度和明度即可。如下图所示的 3 种同色系绿色，他们的色相（H152）都一致，仅在纯度和明度上有所变化。
当色相和纯度都为 0 时，色彩称为中性色，也称为灰度色，即黑白灰。其中，灰不是单指某一种颜色，而是一系列从黑到白的过渡色。
灰度色多用于文字，通常一个应用中的文字不应超过 3 种灰度色。深黑用于标题、正文等主要文字；浅黑或深灰用于辅助、提示性文字；浅灰用于禁用、失效等状态文字；纯白用于深色按钮文字。
此外，灰度色由于没有任何色相，始终沉着冷静，减少对内容的视觉干扰，因此常用于界面背景色，例如 MOO 音乐的界面设计。
Hsl
HSL 色彩模式是工业界的另一种颜色标准，是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。在原理和表现上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（饱和度）不一样，L 和 B （明度 ）也不一样。
取一个颜色试试看，先选一个颜色 #0688F9，放入 “HSL Color Picker”，显示 HSL 数值为：H(208), S(95), L(50)，但是我们放在 Sketch 里面看一下，显示的 HSB 数值为，H(208), S(98), B(98) 。
HSL 的 H 代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是 0°到 360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照 60°圆心角的间隔排列。
HSL 相比 RGB 的优势
我们来做一个基于 HSL 的调色实践。你可不可以快速说出“海棠红”所对应的 RGB 色值？如果再加一点橙色进去，把亮度提高一点，色值又是多少？想想那应该是一个介于洋红和红色之间的，性感娇艳的颜色。我们可以假定它在色相环 H 上的角度是 330°左右，饱和度较高，亮度适中，看看那是什么颜色？
em…我们想要的颜色应该再接近红色一点，让我们把色相（H）+20°到 350°，现在好多了。
通过改变色相值 H，我们实现了色相从洋红向海棠红的偏移。 大感觉接近了，但还是略微有点灰暗，我们可以通过增加饱和度（S）+15%，让这个颜色变得更鲜活，看起来更亮丽。
感觉还是差点，海棠红是属于少女的颜色，应当再嫩一点、通透一点，不会这么强烈。那可以通过增加亮度 L，+10%试试看，嗯，这才是我们想要的颜色。
同理，如果想加点橙色进去， 再亮一点，我们通过心算就大致可以确定色相环的相位和亮度值。在这里，我们需要让 H 增加 20°，L 增加 5%。
在使用 HSL 调色的过程中，不需要了解复杂的色光混合原理，这是一个自然的、感性的、易于理解的过程。相比之下，RGB 调色方式显得非常笨拙复杂、难以理解，而 HSL 是多么的友好。
需要提醒一下的是，CSS 代码里支持的是 HSL，而不是 HSB。如果和前端对接时，UI 给到的是 HSB 的色值，那么最终落地的颜色效果会与设计稿有出入。Photoshop 中的 Hex 和 RGB 颜色可以直接在 CSS 文件中使用，但是 Photoshop 中的 HSB 模式颜色和 HSL 是不同的。
Yuv
YUV，是一种颜色编码方法。常使用在各个影像处理组件中。YUV 在对照片或影片编码时，考虑到人类的感知能力，允许降低色度的带宽。Y 表示明亮度（Luminance 或 Luma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示浓度（Chroma）；通常 UV 一起描述影像色彩和饱和度，用于指定像素的颜色。
采用 YUV 色彩空间的重要性是它的亮度信号 Y 和色度信号 U、V 是分离的。如果只有 Y 信号分量而没有 U、V 信号分量，那么这样表示的图像就是黑白灰度图像（回想一下小时候看的黑白电视）。彩色电视采用 YUV 空间正是为了用亮度信号 Y 解决彩色电视机与黑白电视机的兼容问题，使黑白电视机也能接收彩色电视信号。
色彩心理学是美术知识学习中非常重要的一部分。他所研究的是色彩通过对人视觉上的刺激，而引发人情感和感官上的变化，通过日常生活中人们对应用色彩的经验积累而归纳总结出人类对色彩心理上的预期感受。在生活中，色彩心理学对人们对颜色的认知有很大的影响。为什么交通信号灯用红色表示停止通行而不是绿色呢？为什么大多快餐店用红色或黄色作为品牌的主色？这都是色彩心理学的相关知识。
虽然红、蓝是受到最普遍喜爱的颜色（通过对 App Store 应用流行颜色分类统计得知）。但并不意味着这一准则可以套用在所有产品上。产品的属性是什么，用户定位是什么，要传达的产品气质是什么等等，这些都是选择应用图标的颜色时需要考虑的问题。世界上第一间 Airbnb 房间是在一条叫 Rausch street 的街上诞生的，因此 Airbnb 的主色被命名为「Rausch」的温暖颜色。在挑选主色调的时候，4 名设计师前往世界 13 个城市，只为了更好地理解 Airbnb 的理念：热情、能量和自信，这正是 Rausch 要传递的信息。除了 Rausch 以外，Airbnb 还有其它九种颜色，包括 Kazan、Beach、Tirol、Foggy 等等，它们也都是以 Airbnb 的社区街道命名的。
下面来讲解每一种颜色都各自带有什么样的性格，只有理解了颜色的性格才能正确的使用它们。
黑色
黑色代表着品质、高端、时尚、低调、权威、严肃、稳重，是一种充满质感的颜色。它是所有色彩中最有力量的，能很快吸引用户的注意力。作为一种无彩色，能让它和其他色彩百搭，黑色+金黄色，给人一种奢华精致的感觉；黑色+银灰色，则给人一种成熟稳重的感觉；黑色+红色，给人一种时尚潮流的感觉。因此黑色是一种永远流行的主要色彩。
白色
白色代表着纯洁、简单、纯真、朴素、信任、开放、雅致，白色常常被认为是“无色”，即不是色彩。单一使用白色通常不会引起任何情感，但是当白色与其他颜色配合使用时，白色能很好的衬托，大量的留白让其他元素脱颖而出。在界面设计中，作为无彩色的白色，常用于背景色，缓和各种颜色的冲突，以衬托其他色彩，提高画面明度，提高文字可读性。
灰色
灰色是代表着睿智、老实、执着、严肃、压抑、沉稳。介于黑色和白色之间，也属于无彩色，没有色相也没有纯度，只有明度的变化。它和任何颜色都能很好的搭配，也常常用于背景色或用于突出其他彩色。灰色不像黑色那么坚硬刺眼，他更有弹性，它比黑色更有深层次的力量。因此在画面中，很少出现纯黑，基本都是用深灰色来代替黑色，也可以用浅灰色来代替白色。
红色
红色代表着喜庆、热情、欢乐、斗志、奔放、自信，是一种充满能量的颜色。这是最醒目和强势的颜色，一登场即获得全场的关注，甚至能引起一些生理反应，例如心跳呼吸加快等。红色最能烘托气氛，在中国传统节日里都使用热闹的红色来装饰，因此也就不难理解每逢佳节各大电商应用活动页一片红，为的就是发冲动，引人消费。同时红色也代表了警示、告诫。所以在界面设计中常用红色的文字和按钮来警示用户慎重操作。
橙色
橙色代表着温暖、欢乐、辉煌、健康、阳光、年轻、华丽，是一种充满朝气的颜色。橙色并不像红色那样咄咄逼人，而且它烘托出的活跃气氛没有危险的感觉，反而是一种友好。因此越来越多的应用避开常见的红色和蓝色，而选择橙色的原因。
黄色
黄色代表着信心、青春、聪明、尊贵、辉煌、时尚，是一种充满活力的颜色。黄色是明度极高的颜色，其鲜亮的色调使它在众多图标阵列中显得尤为突出。尽管在警示效果上没有红色那么明显和强烈，但是还是能给人很醒目和危险的感觉（例如道路警示牌）。同时因为过于明亮，也是一种非常难以运用的颜色，性格不稳定常有偏差，和别的颜色配合使用易失去本来的性格。不过黄+黑的搭配很流行，例如站酷和美团外卖。
绿色
绿色代表着健康、生命、青春、宁静、自然、和平、安全、舒适，是一种充满希望的颜色。绿色给人无限的安全感，当情绪低落与消极时看一些绿色，能缓解我们焦躁的情绪。绿色在生活中被广泛运用，如安全出口的颜色就是绿色，但绿色的饱和度要适当控制，如高饱和度的绿色也会令人兴奋，引起注意。
青色
青色代表着坚强、古朴、活泼、清爽、柔和、优雅、希望，是一种充满灵动的颜色。青色是一种介于绿色与蓝色之间的颜色，如果无法界定一种颜色是蓝色还是绿色时，这个颜色就可以被称为青色。豆瓣的主色调是青色，很符合豆瓣小清新的气质，带给用户恬静的感受。
蓝色
蓝色代表着冷静、科技、灵性、自由、放松、未来、理智、纯净、商务，是一种充满理性的颜色。蓝色是天空的颜色，是大海的颜色。在色彩心理学的测试中发现，几乎没有人对蓝色反感。纯净的蓝色通常让人联想到海洋和天空，可以抚平内心的伤口，让人的内心感到平和，有助于人的头脑变得冷静。例如 twitter 的主色调是蓝色，在社交应用里蓝色是一种很安全的颜色，高纯度的颜色传递了信赖、年轻和沟通的氛围。
紫色
紫色代表着高贵、浪漫、优雅、性感、幸运、梦幻、时尚、创造性，是一种充满神秘的颜色。是小孩子和有创造力的人十分喜欢的颜色。紫色的光波最短，在自然界中较少见到，所以被引申为象征高贵的色彩。紫色的明度在所有有彩色的颜色中是的。与不同的颜色结合会展现出不同的风格特色。紫+粉常用于女性化的产品调性，黄色是紫色的对比色。
当我们讨论色彩的时候，聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择，但是实际上，色彩对于用户的心理和行为的影响相对更深，最终会反映在用户体验和行为反馈上。
当然，色彩理论是一个相对复杂的主题。从用户体验的角度上来说，色彩所涉及到的远不是配色方案这一个维度。通常，我们聊得最多的是不同色彩所产生的心理效应，以及多色彩搭配时，相互之间的影响和可访问性上的问题。设计师可以将色彩更好地运用到设计中，而无需重新考虑整个过程。一旦设计师掌握了基础知识，色彩理论中最有意义的部分之一就是学习将更多意想不到的色彩融入他们的设计中。
界面颜色的情感影响不容忽视。尽管有些颜色在 Ui 设计中是“通用的”（例如，黑色，白色和灰色，实际上几乎所有好的设计中都使用了其中的至少一种），但它们结合使用的颜色可能会对体验设计产生巨大影响。当然，颜色的使用方式也会对颜色的感知产生巨大影响。以蓝色为例，在简约的布局当中，大面积使用蓝色作为主色调，和在大面积白底上使用很小的一抹蓝色用来强调 CTA 按钮，所带来体验是截然不同的。
尊重文化差异
人类对于色彩都有着共通的认知，但不同国家对于色彩赋予了不同的含义。红色在中国象征着喜庆、财富和爱情，而在西方国家被赋予了流血、牺牲、暴力和激进的文化意义，贬义的味道更重一些。而白色与红色相反，白色在中国代表了死亡、反动和投降，以白色为主的设计常常会被视之为过于「素」，认为不够吉利。而西方国家却认为白色高雅、纯洁和幸运，因此要根据不同的文化背景，使用不同的色彩，才能更好地降低被误解的风险。
另外一方面，随着现代主义运动的普及，白色也拥有了更加现代的特征。在日本，白色甚至和当地文化结合，延伸出更加细腻独特的精神特质，随着日本战后设计领域的发展和崛起，白色在这一地区的含义则更加丰厚。原研哉在《白》一书当中，针对白色的含义和特征进行了非常深入的探讨，之后的《Subtle》一书当中，虽是围绕纸来探讨微妙的体验，但是也没少提及白色本身的特征。
例如股票交易市场，在国际股票市场通常是绿涨红跌，这是因为红色在西方国家代表着财政赤字，绿色代表着财富；而在中国正好相反是红涨绿跌，这是因为在中国红色象征着财富。
设计师必须根据产品的目标受众来审视其调色板的文化含义，这一点很重要。如果产品要面向全球受众，请确保在使用的颜色和图像之间取得平衡，以防止负面的文化内涵。如果产品主要只针对特定文化，则设计师可以不用太关心所选调色板在其他文化中可能产生的影响。
历史对配色的影响
时间变化对于配色所带来的影响不仅仅如此。比如中日两国在色彩使用上，还存在一个非常典型的差异，历史上日本在一个很长的周期内是作为中国的属国所存在的，这也使得中国自古以来崇尚饱和度较高的正色，而日本则大多使用饱和度偏低的间色，这一特征可以从两国的传统色上体现出来：
△ 中国传统色：https://color.uisdc.com/
△ 日本传统色：https://color.uisdc.com/jp.html
性别误区
或许天生如此，女性不喜欢灰色、棕色和橙色。她们钟爱蓝色、紫色和绿色。而男性不喜欢紫色、棕色和橙色。男性喜欢蓝色、绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择能传达男性气概的色彩，想象下你把运动类应用的界面使用女性色彩，结果可想而知。
△ 男女最喜欢的颜色
△ 男女最不喜欢的颜色
你有没有想过你的 APP 使用人群中会有视力障碍者？
当人们谈论色盲时，他们通常指的是不能感知某些色彩。 大约 8％的男性和 0.5％的女性患有不同程度的色盲——他们在识别部分或者全部颜色时有困难。面对如此庞大的特殊受众，设计师理应关注他们的需求。
△ 正常人和红绿色盲看到的相同色彩
因为色盲有多重表现形式，例如红绿色盲，蓝黄色盲和单色色盲。所以运用多样的视觉线索来连接你 APP 的重要状态是很重要的。绝不要仅仅依靠色彩来表示系统状态。 相反，应使用元素（如笔画，指示符，图案，纹理或文本）来描述操作和内容。需要注意的就是不要简单认为色盲就是简单的分不清红绿，色盲用户对色彩的感受差异不仅仅是单独某种的问题，是某些范围色光的敏感程度问题。
有趣的事实：Facebook 的标志和不怎么讨喜的蓝色配色是特意挑选的。因为 FB 创始人马克·扎克伯格是红绿色盲，他对蓝色的识别是最好的。他曾说过，“蓝色是我生命中最丰富的颜色，我几乎可以看见这世上所有的蓝色。”
△ facebook
Photoshop 有非常实用的工具来帮助模拟色盲，在「视图」的「校样设置」菜单内选中就可以使用了。这个功能让设计师可以看到在色盲用户的眼中你的界面是什么样子的。
△ pinterest登陆页红绿色盲视图
下面以点状图信息图形为例，来说明如何为色盲用户优化信息图：
优化采用了这样一些手段：1.调整配色，将色盲人士容易混淆的红、绿、橙色换为红、蓝、黄色。2.调整明度，使图中几个颜色在明度上差异更明显。3.为不同元素赋予不同形状。所有使用点元素的信息图，都可以参考这种解决方式。
在实际设计过程中，我们需要在美观和友好之间进行权衡。我们也可以采用一些交互手段，避免同一界面中元素太多太过杂乱的问题。
这是更长维度上的变化，在短时间以内，流行色的趋势变化，对于用色也同样存在影响。这种影响在时尚行业有着非常直接的体现，而在网页和 UI 设计行业，同样存在。比如 2020 年的潘通年度流行色是「经典蓝」（Classic Blue），也就明白了为什么 iphone12 今年的主打色是蓝色了。
所以，当你在设计的时候，如果你的目标用户群体有着清晰的地域或者性别偏向，你可以有目的地利用这些知识来规避设计陷阱，更好地发挥色彩本身的功能和优势。如果受众广泛，则可以尽量使用通用性更强的色彩来进行设计。
你知道世界上的颜色是什么吗？
是否存在一种色彩，是不分性别文化，大家都会喜欢的呢？确实有人通过大规模的调研和探索找到了一种世界上的色彩：马尔斯绿（Marrs Green）。来自全世界 100 多个国家 3 万多人响应号召完成了这项投票，并且最终选取出来的一款绿色。
人脑对于色彩的记忆度要高于形态，即一个 App 给用户留下深刻印象的往往是界面的色彩。例如说到支付宝，我们可能想不起它的首页长什么样子，标签栏图标是那些，但能马上记起它的界面主色是蓝色。因此运用好色彩对 UI 设计十分重要，它能直观的呈现产品的气质和性格，能有效的帮助用户组织和阅读信息，与界面设计产生联系和记忆。好的配色往往依靠设计师审美、感觉搭配出来，但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑，下面结合相关案例为大家讲解色彩运用的几个技巧。
不得触碰的禁区
分析研究了很多优秀设计作品，发现他们在用色的时候有一部分区域是不会使用的，也就是我们常说的“配色禁区”。当然，这里的“禁区”是带双引号带的，并没有什么绝对的禁区，只是说这些颜色不易控制，在连基础色都没有驾驭好之前，尽量少碰。
配色禁区大概分为这三种：三角形禁区、矩形禁区、扇形禁区（红色为禁区），如下图：
综合看来，不管是那种禁区，右下角区域的颜色是很少用的。毕竟他们又脏又深，当然什么颜色都能驾驭的大师请略过。
在界面设计中，一般主色和辅助色都集中在右上角，次要的和不可点的颜色都集中在中上方，而文字信息和背景色则集中在左侧，右下角禁区是我们要重点避开的对象。
色调一致
在 App 设计之前应先确定界面的主色调，主色将占据界面中很大的比例，通常是品牌色，而辅助色、点缀色、背景色等都应以主色调为基准来搭配，这样才能保证 App 整体色调的一致。色调一致的界面，能带给用户始终如一的视觉体验。例如马蜂窝将黄色（品牌色）作为主色，以及从主色搭配出的蓝色（对比色）贯穿 App 始终。
60-30-10 原则
60% 30% 10%的原则，是达到色彩平衡的最佳比例。在 60%的空间使用主色，可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个 App 的视觉焦点和色彩关系；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下 10%的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。6:3:1 原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。
哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上，蓝色的辅助色用在角标、图标上，还有黄色、红色用在一些小图标、小标签上，主次非常清晰明了。
色不过三
经常很多大神在网上说配色不要超过三种色，其实就是「色不过三」原则，即在一个页面中不要使用超过 3 种颜色搭配，这也和上面说的“60-30-10 原则”类似，即一个主色、一个辅助色和一个点缀色。但在实际 UI 设计中，迫于产品的需要可能会使用更多数量的色彩，但切记不可超过 7 种色相（注意不是 7 种色值），每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。
美团外卖的首页 20 个功能入口大图标的背景用了 9 种不同的色彩，每种色彩又包含一种低饱和度色彩进行彩色渐变，但并没有显得杂乱，而是呈现一种年轻时尚的律动感。这是因为这里虽然使用了 9 种不同的色彩，但仔细观察发现只使用了 3 种色彩，其他 6 种则是从前者邻近色中提取出来的搭配，再将它们错落放置，呈现出丰富多彩的色彩搭配，整体和谐统一。
远离纯黑色和纯灰色
黑色就像没有生命力的深渊，使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色，是因为它们不存在于现实世界里。尝试在纯黑和纯灰中加入一些色调，会让界面看上去更柔和自然。另外，纯黑色还会与白色产生强烈的对比度，看久了会使人疲劳，让用户产生焦虑的情绪。MONO 的导航栏并不是深黑色，而是加入了蓝色的低饱和度蓝黑色，它的界面背景也是加入了蓝色的的浅色，这样就不会让界面看上去死气沉沉的。
遵循色彩心理学
前文我们已经了解过各种色彩的心理学知识，就是为了我们在进行 App 设计时提供依据。这些色彩都是源于人类对大自然最原始的感受，蓝色的天空、绿色的草地、黄色的沙漠等等，自然的色彩，对于我们来说是司空见惯的，但其中却蕴含着丰富的美感，并达到了和谐统一。网易云音乐使用红色作为主色，这种热情奔放的颜色传递出一种充满能量、自信的气质。
良好的可读性
良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验，而一个可读性差的界面则会成为用户浏览的障碍。那如何确保界面具有良好的可读性呢？这就需要在界面设计中注意色彩搭配的对比，如在浅色背景上使用深色文字，在深色背景上使用浅色文字，使用高对比的度的亮色展示重要的元素，用低对比度的浅色来体现需要弱化和次要的内容。例如苹果 Music 的主要功能入口，标签栏图标、按钮等都是用了高纯度的红色，与其他元素形成鲜明对比，就连深灰色的辅助文字都有着清晰的可读性。
从大自然中获得灵感
配色中尽量使用大众熟悉的色彩，如自然界中人们常见的色彩等。从大自然中获取的配色灵感可以使你的设计更加切合用户的审美，非常自然。而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。我们可以搜集各种与自然风光相关的图片，从中提取色彩运用到设计中，这些几近完美的搭配呈现出来的和谐美感能瞬间打动人心。天气应用 Marline 就是一个很好的例子，它的界面背景渐变就参考大自然的变化，随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐变色，打开应用即唤起了用户的快乐情绪。
将 UX 颜色与品牌相匹配
品牌价值在创建调色板中发挥关键作用，但是它们不是唯一重要的因素，行业规范也是关键。使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。配色在品牌视觉中所发挥的作用是不言而喻的，但是，色彩本身的内涵和情绪特质并不是全部。比如一个行业当中，很多产品都使用了蓝色，那么你的产品继续使用蓝色，可以让用户更快「识别出」你所属的领域，但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出，可以试着使用不同的色彩。
△中国区或美国区，红色和蓝色都是最流行的颜色。
在进行品牌设计的时候，选择配色的第一步，始终是了解各种颜色或者色相的气质和情感属性。然后，在具体设计的时候，再进一步根据品牌的气质和需求，再在色相的基础上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案。
从强调色入手
想要让配色方案更加突出，在设计中添加强调色可能是最容易入手的地方。举个例子，一个律师咨询的 App 可能会使用传统的蓝色作为基础配色，但是，如果能够加入柠檬绿作为强调色，会显得独特很多。
冷暖色对比搭配
冷暖对比色是自然平衡的规律，可以在设计中大量使用，这样的配色会使作品非常的出彩，同时不显单调，让用户感觉舒服平和。而且这种搭配方法基本没有啥缺点，使用在设计中，技巧性比较多，对设计的细腻感受要求比较高，需要多练习。
黑白色搭配不过时
黑色是所有中性色中最强的，而白色是最常用的背景颜色。黑色是一个很好的选择，有种高端和永恒的感觉，而白色可以带给用户自由，宽敞和透气的感觉。如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。
强交互色彩
交互色彩在执行过程中必须清晰且在界面中保持一致。号召性用语必须相对于背景具有足够的对比度，并且相对于其他组件必须具有足够的视觉权重，以便用户可以轻松识别它们。Nike 健身应用中，「开始」按钮以高饱和度的柠檬绿作为主色，从背景中脱引而出。
但是，交互色彩并不总是以最具饱和度或最亮为特征，而是通过色调、形状、大小或对比度，从屏幕上脱颖而出。因此，交互色彩的有效性将基于用户识别交互区域和执行任务的速度来衡量。同时，次要功能权重要更轻，并在视觉上更接近信息元素。如上图 Nike Training 界面中，“设置”和“声音”按钮只用简单的白色，减轻对主按钮的干扰，也避免了页面中出现多个强交互按钮。
保证良好的可读性
可读性是任何设计中的重要因素。你的颜色应该清晰易读，尤其是在处理文字时。因此对比度对视觉效果的影响就非常关键，对比度过小，就会使得界面出现灰蒙蒙的效果。清晰的对比度，一般会采用色彩的两极，黑纸白字或白纸黑字。而在彩色背景上要让内容清晰可见，就需要搭配纯白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互补色和明度接近的文字，因为这两种搭配会产生一种“震颤效应”，发出光晕的视觉效果。
UI 中的阴影
没有完全纯黑的阴影，阴影的颜色是会受到物体本身固有色的影响，一定要避免使用纯黑色（#000000），使用不太深的灰色，效果会更好。对于有颜色的元素，好的做法是为阴影设定与元素相同的颜色，并使其更暗一些。
如果是有颜色的元素，并且它处在黑暗的背景下，一般情况下，是不建议使用阴影的。但是如果你一定要用，把阴影透明度调到小于 10%及以下，并且颜色跟随主色调来。比如按钮为绿色，则可以为按钮设定一个更深的绿色阴影，并加上小于 10%的透明度数值。如下图，左侧的按钮阴影很自然，右侧的则有一层模糊发光的效果，显得不够漂亮。
为什么「超链接文字」要用蓝色？
简单说，因为在最早期的网站页面中，蓝色能呈现最高的对比度。
Tim Berners-Lee——web 的主要开创者，被认为是最早用蓝色链接的人。
一个很早期的 web 浏览器 Mosaic，用的是深灰色背景和黑色文字。那时候，能用的非黑色、最深的文字颜色，就是蓝色。所以，让超链接文字突出显示，同时保证可读性，就选定了蓝色。此后超链接文字都用蓝色的传统沿用至今。
App 的色彩搭配能直观、快速的反馈到用户的大脑中形成记忆思维。好的色彩搭配可以加深用户对产品的印象；明确界面的视觉层次，让用户分清主次信息；同时还能给用户赏心悦目的视觉享受。那么，在 UI 设计时该如何进行色彩搭配呢？我们可以从 App 中都包含了那些色彩开始，通常一个 App 中包含了主色、辅助色、点缀色、背景色这 4 类，下面就以微信读书为例进行详细的讲解（个人角度）。
主色
主色是指在配色中处于主导地位的色彩，给用户的第一眼印象，通常是产品的品牌色。在 App 设计中，主色一般占有色相色彩的 60%的比例。这里指的是 60%的界面都使用到的主色比例，而不是使用面积（因为通常一个界面中使用面积最大的是背景色）。还有就是背景色多为浅灰色或白色，它们都属于无色相色彩，因此不涉及到配色过程中。我们看到微信读书的第一印象，就可以判断它的主色为蓝色，这也是它的品牌色。在标签栏、按钮、图标、注册登陆全都使用了这种纯净的主色，使界面看上去非常和谐一致。
辅助色
辅助色与主色相辅相成，辅助色的功能是帮助主色建立更完整的形象，使界面丰富精彩起来，避免画面过于单一。通常，主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色，但注意辅助色不宜过多，否则就会使界面看上去花哨分散了主题。根据 6:3:1 原则，辅助色可以占有色相色彩的 30%或更少为宜。
在微信读书中，绿色、橙色、梅红、蓝紫色是除了主色以外使用最多的颜色，它们都是辅助色，主要用于功能图标和栏目分类上。虽然辅助色看起来有点多，但其实都是从主色的邻近色和对比色（及其邻近色）中提取出来的搭配，而且只用在页面中很少的地方，这种搭配技巧既可以丰富色彩的搭配，传递出年轻活跃的产品气质，又保证了整体搭配的和谐统一。
点缀色
点缀色是除了主色和辅助色以外的另一种色彩，通常体现在细节上。其作用是，当页面中主色和辅助色不能满足关键信息的提示时，就需要点缀色来吸引用户眼球，还有就是利用点缀色来平衡画面的冷暖色调。点缀色通常都是分散的，使用面积小，颜色非常显眼，能与主色形成强烈的对比。一般点缀色是主色的互补色。在微信读书中，使用了香槟金、梅红和红色作为点缀色。香槟金用在文章分享按钮上，梅红色用在点赞图标上，强调其特殊性，红色用在通知及退出登录提醒上，用于警示。
来康康这三种点缀色与主色之间存在什么样的关系，在色相（H）上，3 种点缀色为邻近色，与主色为互补色；在明度（B）上，3 种点缀色均为高明度色彩，起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用户注意力。
背景色
背景色就比较好理解了，通常为了衬托内容，大多数 App 都是用浅灰色作为背景色，以白色作为背景色的对比色，来区分视觉层次。建议是可以根据前景色来提取背景色，将其调亮或变暗，这样可以让界面色调更加统一。在微信读书中背景色是偏蓝色调的浅灰色，而不是纯灰色，背景对比色是在白色里加入了蓝色色相，而不是纯白色，整体对比较柔和，给人清爽通透的感觉。
支付宝 Alipay Design 团队提出过一个配色原则：
以同色系配色为主导，多色搭配为辅。
同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
不同于单一色彩，渐变色不属于任何色彩，它营造出千变万化的视觉效果，却又不会增加视觉负担。相较于单一的色彩，渐变色的复合性质让它在界面设计中具有更强的视觉冲击力，有助于快速抢占视线。如今，这种的色彩正逐渐成为一种潮流，究其原因是目前大量的扁平风格造成 UI 设计的严重同质化，人们需要追求更加个性的视觉语言来满足日益增长的设计需求。下面我们来了解几种常见的渐变的使用技巧。
色相、饱和度、明度的渐变
色相（H）渐变是指由一种色彩向另一种色彩的过渡，这种渐变因跨度大产生的视觉效果非常明显；饱和度（S）渐变是指同一种色彩不同纯度的过度，其产生的视觉效果比较和谐单调；明度（B）渐变是同一种色彩不同明暗的过度，这种渐变的视觉效果给人一种沉静的氛围。
渐变的表现形式
在界面设计中经常看多各种各样的渐变表现方式，使用最多的有以下几种：
这个很好理解，是指角度为 0 的线性渐变，是最流行的渐变形式。界面设计中多用在导航栏、进度条、按钮等元素上，能让画面变得精致而通透。例如京东使用橙红渐变的设计语言贯穿整个 App，从应用图标到导航栏、按钮、标签，全部都运用了这种由红色到橙色的过渡。仔细观察发现在很多小标签上都使用了水平渐变设计手法，使产品看起来更年轻化。
在水平渐变中，通常把轻（亮）的色彩放在左边，重（暗）的色彩放在右边，这样由左向右的方向感刚好与人的浏览习惯保持一致。而反过来就会与人的浏览视线相悖，应避免。
垂直渐变
即角度为 90°的线性渐变，它通常被用在正方形或竖条形的元素上，如注册登陆页，个人中心头部等。垂直渐变中上下两种色彩的深浅变化会产生截然不同的视觉效果，上浅下深会让给人一种凸起的立体感，而上深下浅会给人一种凹陷下去的空间感。例如「纪念碑谷」的背景是采用了单色相和多色相的垂直渐变作为游戏背景，在让整个画面丰富的同时又不会太抢夺主体的色彩，使画面显得清新透气而不沉闷。
角度渐变
角度渐变通常有对角渐变和多角度渐变。有角度的渐变相比水平和垂直渐变，它的使用场景更广，如图标背板、启动页、注册登录页、标签等。想让界面更加绚丽、动感和迷人，这时候我们可以考虑多组渐变搭配使用。
色块渐变
渐变的颜色不只可以运用在一个色块上，还可以运用在一组色块上。设计师运用一组近似性色彩，将每个菜单项清晰区分开，让界面平衡在一个频率上，这样的画面更有节奏感和舒适性。不同于平滑的渐变，色块渐变不再是单纯的背景装饰，在某些地方还具有一定的功能性，比如使用不同的色块来分割的列表样式。Clear Todos 是一款日常任务清单的 APP，它抛弃了传统的列表样式，使用了一系列色块来作为列表的分割，非常漂亮和精致。
径向渐变
是指色彩以圆心向四周扩散的渐变，是一种模拟光源照射的视觉效果，因此光源是整个画面的视觉焦点，将关键元素放在光源中心就会成为主角。通常被运用到大背景上，如启动页、引导页等。Solar 天气应用的背景就是径向渐变，光源扩散的效果营造出一种梦幻般的美感。
和谐的渐变色
渐变色是由一个色彩走向另一个色彩的过程，有着迷人的视觉效果。如果你仔细观察两种色彩的过渡关系，就会发现不是每次都会得到满意的效果，例如红绿渐变就很糟糕，因为它们两者是互为对立的色彩，但是如果加入黄色的过渡色就会好很多。原因是当两种色彩之间超过 90 度就会导致其渐变色看上去不太和谐自然，只有控制在 90 度之内才会产生美妙的变化。如何改善超过 90 度的两种色相的渐变呢？这时候可以在两色之间加入过渡色进行调和。例如当从黄色到蓝色渐变时，就可以加入紫色作为过渡才能呈现完美的视觉效果。
在搭配渐变色时，尽量只改变其色相（H）、饱和度（S）、明度（B）中的一项，这样才能创造出和谐的渐变色方案。
调色板帮助我们在设计项目中建立色彩规范、提高工作效率。通过上文对色彩基础知识的学习，接下来为大家介绍几种简单易用的创建调色板的小技巧，以及 Materia design 配色方法和配色网站推荐。
打开 dribbble，每一幅作品预览页左下角都有一份自动生成的配色板，很多同学可能不知道这个配色文件是可以下载的。将调色板保存到本地，为自己在创作时提供灵感。在 ps 里的操作步骤是：点击“窗口—色板”，然后在色板的属性面板右上角打开“导入色板”，载入刚下载的色彩文件即可。
它也有颜色搜索工具，输入或选择颜色值即可搜索相关配色的设计作品。
这种方法也很常用，不需要任何插件，丢一张图片到 Ps，然后将图片「马赛克」处理下就可得到一组配色。例如，我们需要一组同色系的绿色，在网上（建议 unsplash 或 500px 等专业图片网站）找一张树叶的图片，接着将图片在 Ps 中打开，进入“滤镜—像素化—马赛克”，在打开的窗口里调节单元格大小即可。
同时，建议平时多去收集好看的摄影图片和优秀的配色方案，看的多了就知道什么是好的什么是 Low 的配色，对提升审美也有很大帮助。
△ pinterest画板
该方法稍微复杂一点，示例步骤如下：第一步绘制一个正方形做底板，填充一个颜色#5354F0；第二步分别在正方形的上和下 1/3 处叠加 20%的白色和黑色；第三步分别在正方形中和右 1/3 处叠加 40%、80%的紫红色#DF56FA；最后改变紫红色图层的混合模式为叠加即可得到一组蓝紫色色调的调色板。
Materia design 调色板
Materia design 从生活场景中提炼出 19 个充满活力的色彩，旨在和谐地协同工作，可用于开发品牌调色板。Materia design 提供了一整套调色板，从原色开始，延伸出其他许多色彩，这些色彩和谐相处，可用于产品设计的品牌色。基础色的饱和度是 500，Google 建议以此作为产品应用的主色调，可以再选择一种辅助色，并在主色的基础上进行饱和度，明度变化，构成一套配色方案。
如果上面的色板不能满足你的需求，你可以选择一个主色，Materia design 调色板生成工具会为你生成完整的色板。
主色和强调色
在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，建议选择饱和度为 500 的基础色作为主色，根据设计需要在主色的基础上增加 1～3 种不同饱和度、明度的色彩建立层次感，再选择一种强调色突出重要内容或操作，例如 FAB 的背景色。
深/浅背景上的文字
Materia design 通过文本的不透明度建立在不同背景上的深浅对比，对于浅色背景上黑色文字，主文字不透明度 87%，次要文字不透明度 60%，禁用文字不透明度 38%；而黑色背景上的白色文字正好相反；彩色背景上的白色文字不透明度 100%，分割线不透明度 12%。Ant Design 也定义了一套用于界面文字、背景、分割线的中性色，在落地的时候同样也是按照透明度的方式实现的。
背景
为了提高应用之间的一致性和阅读的可读性，背景色根据设计需要选择纯白色或饱和度依次为 50、100、300 的灰色。
颜色是一个很难掌握的概念-因为有无限多种可能的颜色组合，对于很多设计师来说还是一件蛮困难的事，为了让设计配色变得容易些，下面推荐几个常用的配色网站，希望能帮助大家在日常工作中节省更多的时间。
Adobe Color
Adobe Color 是一个基于网络的应用程序和创意社区，提供免费的色彩主题，并且在 Adobe 相应的软件中也提供了扩展程序，比如我们常用的 Photoshop 和 Illustrator。
Adobe Color 通过拖拽色轮或输入自定义色值，可以创造出基于相似、互补、三原色、正方形等不同色彩规则的配色方案。除此之外，还支持 CMYK、RGB、HSV 多种色彩模式的配色调整。用法很简单，点击颜色块上的小三角确定基础色，就会自动生成 5 个基于你所选色彩规则的配色方案，拖动下方的颜色条时相应的也会改变配色方案。如果没有灵感可以通过顶部导航进入“探索”页，这里为我们提供了很多提取好的颜色和图片，有的是摄影作品，有的是设计作品，上方的轮播图提供的一些其他内容，比如潘通流行色、Adobe 社区和手机端的 APP 等等，非常的实用。
Eva Design System
Eva Design System 是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。右上角可以切换浅色模式和深色模式的对比。
Colorhunt
Color Hunt 是由设计师 Gal Shir 创建的开放调色板集合，每天更新丰富的配色方案。颜色卡片下方可以看到更新的时间和喜欢人数。鼠标悬浮在任一色块上显示颜色值，点击颜色卡进入详情页可下载和分享，惊喜的是还可以添加到 chrome 浏览器，方便随时随地使用。
Grabient
Grabient 是一个非常漂亮且实用的渐变配色网站，支持 CSS 样式代码复制、360 度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下方自由添加和调整渐变的色系、以及线性渐变方向。
当然，以上这些配色工具只是为我们提供方便的，而不是主导我们的，所以在使用配色工具的时候最好是要有一定的理论基础作为支撑，让你的配色有理有据，切忌生搬硬套。
对于新手设计师来说，颜色越少越容易把控画面。色彩层级越精简，就越容易达到整体色彩平衡，掌握好色彩的功能划分必然会让你的配色过程保持思路清晰从而提率。
同时，不管是 2C 还是 2B，很多大公司都构建了自己的设计系统。如果你想学习别人是如何进行配色布局的，最快的方式就是研究他们的设计源文件。
建议设计软件使用 sRGB 作为色彩空间的默认配置，而不要采用未管理（ Sketch 中默认是未管理），若团队协作请提前保持色彩空间配置的统一性。如果有需要针对广色域色彩空间做项目，可以单独设置该项目文档的色彩空间为 Display P3 或者 Adobe RGB。
Mac 系统色彩空间配置
建议所有 macOS 用户都在系统偏好设定的显示器颜色设定当中换用 sRGB IEC61966-2.1 这个校色方案，可以极大改善系统显示效能。如果有外接显示器，也建议使用外接的默认选项，默认选项一般可以发挥出该显示器的最大色彩性能。
Sketch 色彩空间配置
Sketch 默认颜色配置是 Unmanaged「非托管」， 我们可以在「偏好设置」中为 Sketch 指定默认的色彩空间配置，如此一来每次新建设计文档将会默认采用我们的设置作为默认的色彩空间，不用每次新建文档都单独设置一次。
设置方法：Sketch → 偏好设置(Preferences) → 通用(General) → 颜色描述文件(Color Profile)，修改下拉框选择器的内容为 sRGB IEC61996-2.1。（其他设计软件设置方法类似）
如果要更改已有的文档为 sRGB 色彩配置，可以通过文件——更改颜色配置，在弹出的对话窗里对文件进行色彩空间的更改即可。
其实无论是色彩理论还是配色方法，最本质的东西就那些，更多的还是需要设计师在日后的工作中不断的摸索和积累。这篇文章全部写下来耗费了不少时间（小声 BB：其实每篇都是），抱歉内容确实有点多，但其实已经是收着点写了。就像大树一样，有很多分枝不断生长，需要了解很多细分出来的深度知识。这也是写这类文章的乐趣，通过不断的查阅资料，把过去很多模糊的概念摸清楚了。果然学透一个知识点的最好方式就是把它讲出来才能真正为自己所有。关于色彩的知识先分享到这里，希望对大家有所帮助，文中有不严谨或错误的地方，欢迎大家指正，一起学习成长。
色彩基础知识
1. 色彩常识
2. 色彩三属性
3. 色彩的搭配
4. 色彩和光源关系
5. 色彩空间
色彩心理学
色彩对用户体验的影响
1. 色彩心理学和用户体验紧密关联
3. 针对色盲用户群体的设计
4. 流行趋势对色彩的影响
色彩在UI设计中的应用
1. 色彩的应用
2. App 设计中的色彩搭配
3. 迷人的渐变色
创建调色板及配色工具
1. 从设计作品收集色彩
2. 从图片取色
3. 自定义色块叠加
4. 色彩系统
5. 配色工具推荐
6. 关于色彩空间配置(附加内容)
写在最后
文章来源：优设网 作者：印迹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天给大家带来的是如何建立设计师个人的插画组件库，因内容过长并知识点过多，请泡杯枸杞观看。
一、关于个人插画组件库的3大疑问点：
1、为什么要建立个人插画组件库？
其实最主要目的是为了给自己的插画提供一个设计轴心，我们可以围绕着这个轴心创作出更具有效率规范的插画内容，演变更多的插画风格，让我们使用插画时变得游刃有余，提升率的设计输出，衍生更多的组件化运营设计与品牌插画组件库。（注：按照以下步骤设计，插画手残党也能轻松学会哦！）
2、品牌（产品、项目）插画组件库与个人插画组件库的区别？
01-规范区别：
品牌插画组件库：组件品牌插画库前会做很多细致的规范，如：颜色规范/情景规范/光线规范/关节细节处理/景别元素处理等等；
个人插画组件库：为了让我们的插画更具有灵活性，所以在做个人插画组件库时不会做太多的规范，反而为了插画的衍生要更注重人物构造、比例、小组件等等，目的就是为了成立个人插画轴心。（注：个人插画轴心是针对于第一个插画系统的原型，我们后面的插画风格衍生都会参照第一个插画系统的原型，后面会给大家详细讲解）
02-使用效率：
品牌插画组件库：使用更加，拖入即可更换组件使用；
个人插画组件库：因为我们采用的是不断迭代式做法，所以在刚建立个人插画组件库时，我们的组件替换效率是比较低的，但是在逐渐迭代中，我们的使用效率会逐步提升。
03-拓展力：
品牌插画组件库：因为有很多规范的约束，所以拓展力偏弱，不过针对于自己的品牌已经足够了，它本身就是为了自己的品牌服务的；
个人插画组件库：因为从我们插画组件库的层级分区来看本来就是为了衍生拓展，所以拓展力非常强，不仅可以衍生出相同类型的插画风格，还可以衍生出不同类型的插画形势，甚至可以以个人插画组件库为基础创建单独的运营设计组件库，或者升级为品牌插画组件库。
3、个人插画组件库哪些人最应该去建立？
我认为UI设计师是最应该去建立的，在我们线上接触的banner、功能页、启动页、海报等等，很多都可以用到插画去设计，不管是针对于在公司还是针对于自己私下接私活都是一大利器，可以让你的完成甲方的任务，更大程度保证设计的统一性以及输出的质量。（相信大家都遇到过到处找插画素材拼凑banner的时候吧，有了个人插画组件库就不用愁了）
当然除了UI设计师还有插画设计师、平面设计师、美工也都可以去建立插画组件库，不过具体还是要看每个人所接触的不同设计内容，有些设计师的设计内容很少接触到插画部分，或者很少接触到可以组件化的插画（比如材质复杂、偏手绘插画），所以就没有必要去建立插画组件库。
二、如何建立个人插画组件库？
想要建立个人插画组件库就要从它的本质特点出发去考虑，个人插画系统归纳下来一共有三大特点：可复用、适应力强、效率高。那么接下来我会围绕着这三点来阐述该如何制作UI设计师个人的插画系统。
1、可复用性方向出发设计
可复用性是做插画系统的一个基础，如果不能解决可复用问题，那么做个人插画系统根本没有任何意义。
如果想要达到插画可复用性，我们就要把插画内容进行不同的拆分，在它可替换的部分都作为一个复用样式，让它可以更换不同的组件，那么我的解决方案有五步：
第一步：
设定基础人物组件（肢体细节、型体比例），规范组件内容。如果你是第一次做人物组件，可以多在网上找一些可参考内容：
下图是我做的一个基础人物组件案例：
从人物组件上面来看我一共把它们分为了9个小件，它们分别为：头部、上身、上臂、前臂、手掌、臀部、大腿、小腿、脚掌。
从人物比例来看，男性比例为10a，男性略高，上身宽大，整体壮硕；而女性比例为9a，稍矮于男性，纤细苗条。不管是男性还是女性整个身体构造简单常规，符合真实人物比例，有利于后期的组件改造。（第一个插画组件最好使用常规比例，后面会提到为什么要这样做）
在人物组件上的划分并不是固化的，你可以把它细化分为9个部分，也可以分为7个部分，如果分为7个部分就把上臂与前臂统一融为手臂，大腿与小腿统一融合为腿部，到底要怎么去进行组件化，还是要取决于自己设计的插画人物特性。
除了男性、女性外也可以建造更多的人物进来，例如老人、小孩、婴儿...人物越多，后续的延展空间也越大，前期为了更快的制作插画组件库，可以先建立1到2个人物，后续可以逐步完善迭代。
第二步：
为了后期人物的动态延展，我们可以用人物组件制定一些高频的人物基础动态，例如标准站姿、坐姿、跑动等，以便于我们插画的延展，图示如下：
做人物基础动态可以让我们在后面的插画设计上少花很多时间，例如工作中要用到跑步动态时，那么就可以直接用人物基础动态里面的跑步动作进行添加人物细节，会节省很多工作时间，提升工作效率。
第三步：
有了人物组件的基础，我们就可以开始设计插画的风格。
在设计前我们可以多参考一下别人的插画风格，这里所说的风格主要是指插画的处理方式，比如：颜色的选择、表情的处理、衣服材质的处理、曲线直线的选择等。
我们需要注意的是建立第一个插画系统时可以先做一个风格简单的，不仅容易调节组件也有利于后期的风格衍生，以下是我为人物添加的简单基础风格（ 特点：纯色/完全按人物组件贴合设计/无渐变）：
第四步：
设计人物组件（可以让你的插画在不同的场景应用不同的动作/服装/表情/肤色等）
1/发型：
在发型上面我们可以进行一些人物的区分，可以适用于不同的场景，例如：男性第一个适用于公司场景，第二个适用于学生，第三个适用于军人...
2/肤色：
做肤色的变化最主要原因是让插画适应于国际化，在不同的场景中可以加入不同肤色的人物。
3/表情：
表情是为了更好的体现出人物在环境中的状态，如：领取红包插画，人物的表情就应该是开心或者大笑。
4/角度：
在插画的角度上，我们采用了最常用：正面、半侧、正侧，让它在插画中的适应力变得更强。
5/纹理：
我们目前设计了6个基本纹理，基本纹理不仅可以设定于服装中，还可以设定于辅助元素以及背景中。
6/服装：
在整个人物组件中，分为3大块可替换服装组件，分为别：上身、下身、鞋子。例如上身可以替换为短袖、长袖、卫衣、背心等，同时在它的下一个层级还可以替换服装纹理、服装动作、服装颜色。
结合以上的人物组件我们就可以组合出各种不同的动作，如下：
第五步：
设计通用组件库：
通用组件库中的元素最开始要用黑白灰来表达，因为在不同的场景中元素的运用也有很大差异，例如花盆作为近景元素会多许多细节，作为远景元素可能只是作为线条来点缀，这些表达方式我们可以在日后使用过程中添加到它的子级库即可，这样可以让我们在使用组件库时更加灵活，也有利于我们迭代组件库，后面会逐一的讲解。
这5个步骤下来我们的可复用性插画就做好了，那么接下来看看运用效果：
我们可以看到以下4个场景，运用到了不同的景别处理方式，例如：第一组为背景渐变；第二组背景则采用了大面积的纯色；第三组背景用线性表达；第四组则用浅色面表达。
这也是与品牌插画组件库的很大区分点，虽然都是可复用性插画，但是品牌插画组件库大部分是使用现有的、具有规范的，而我们所做的个人插画组件库可以用同一个辅助元素增添不同的插画表达形式，不断迭代子级，迭代的子级越多它的内容选取性就越高，后续就可以直接拖入使用，比如图4中的植物就有2种状态，第一种是显示部分颜色，第二种则直接为灰色。（注：后面会详细讲解）
以下活动页中，背景元素也可以运用同样的方法，在我们的背景组件库中调取想要的单个插画元素，把它们组合放入活动页背景中，进行再次调色得到不同的背景组合，以下三种背景组合都可以相互替换使用。
2、让你的插画具有极强的适应力
适应力强是指我们的插画系统可以匹配大多数的产品，因为个人插画组件库是以设计师身份做的，我们会面临各类产品，而各类产品风格都会有不同的变化，要解决这一点我们可以使用以下三个方法：
方法一：改变人物结构
例如：你想为产品A做一些插画类的功能页或banner时，发现你现有的第一套插画组件库并不符合产品特性，产品A想表达更多夸张的成分，而我们所做的插画系统显示更多的是柔和与大众，这样就完全不匹配，那么我们就要去改变一个基础点，那就是人物结构，通过人物结构的重组我们可以得到想要的夸张效果，那么我就男女各举一例结构重组对比图，如下：
我们为了在身体结构中达到人物夸张的效果，在原有10a比例不动的情况下对原本的身体结构做了重大调整，男性：上身的缩短，下身的延长以及手部脚部的突出；女性：整体更加硬朗，手脚放大，腿加长。
如果把他们用相同的插画风格表现出来，就会出现如下效果：
当你在做人物结构调整时，你会发现有一个常规的人体结构作为基点去设计是多么重要，也就是之前所提的为什么第一版插画组件让你做常规的，因为如果不是常规人体结构，调整起来会非常麻烦，就很难有参考意义。
方法二：改变插画风格
除了人物结构外我们还可以更多的考虑插画风格，通过不同的插画风格去适应不同的产品，例如：线面/渐变/杂色/极简...同样我就男女各举一例，如下：
上图改变风格后，男性的风格则更偏向于线条的表达与高亮色调；女性的风格则简单直接，更注重凸显配色的碰撞。
方法三：改变人物结构+插画风格
在上面两种方法中除了已有的基础人物结构A与插画风格A，我们还得到了人物结构B、C与插画风格B、C，如果我们用人物结构B（或C）与插画风格B（或C）结合又可以形成新的插画状态。
按照这样的方式下来我们就可以逐步添加自己的插画系统，假如当你的插画系统人物结构有5组、插画风格有5组时，你就可以组合出25组不同的插画，这样你的插画系统适应能力就极强了，甚至你要为产品做插画系统时，也可以大幅度参考你的个人插画系统，当然这一切都是需要自己去慢慢迭代添加的。
3、用软件规范插画组件库（层级详解），提升应用效率
为了更好的替换组件，提升输出的工作效率，我们可以从一开始就使用软件对插画进行管理。市面上可以提供复用样式的软件也蛮多的，这里我就使用应用率最高的Sketch来进行讲解。
首先我给大家讲一下我的插画组件库的构成，我的插画组件库一共分为了5大块，分别为：人物组件库、非常规人物组件库、动物组件库、辅助元素组件库、辅助背景组件库，而这5大块中也细分出了很多小层级，我就一一为大家分析下我所用的层级。
我们可以从以上图中看出从风格分类开始直至最小的组件，我用到最多的层数是5层。
如果大家看的有点懵，我们就拿一块从层级1到层级5举例说明：
风格分类（A）-角度分类（正侧）-四大组件（下身）-动作（B）-颜色（B）
这里所用的是sketch复用样式中的“套中套”，“套中套”的组件方式看似复杂，其实挺简单的，并且在软件中换取都在大组件内，因为不是软件讲解所以就不带入过多的软件知识。
在制作时我们不要想着一次性就做出很多小组件，比如你想做表情时，一来就想做10多20个全部包含完，其实没有必要，我个人是比较建议最开始小组件做个3-5种常用的就可以了，因为组件库是要不断添加优化的，所以可以在后续工作应用中再不断的添加。
有了层级的划分，我们可以用sketch的复用样式简单、的规范插画组件库，想要覆盖替换组件内容也是十分方面，如下：
2/非常规人物组件库
除了常规的人物组件库外，我还单独罗列了非常规人物组件库，这一类组件库主要是作用于人物特殊的动作形态，比如下面3个透视类的插画动作形态，这些动态与常规的插画组件库的内容很多是不互通的，比如脸的角度、鞋子的角度、身体的透视尺寸，所以我们就单独给他罗列一个非常规人物组件库。
都是同为组件库，当然也有可替换内容，非常规人物组件库与常规的人物组件库的层级逻辑有所不同，常规的人物组件库是用小组件替换人物动作，但是非常规人物组件库是先替换整体的动作然后才可以替换小组件，这也是对他的特殊化管理。（注：不想舍弃它，又不想为他做出更大的调整，所以就单独让它成立出来。）
根据非常规组件库的设定给大家做个小案例：
以上可以看出我在这个透视化的插画人物中可以替换表情、发型、纹理、上身、下身。
3/动物组件库
我这里做的动物组件库是用来辅助人物以及调和场景的，所以在层级划分上并不会做的非常细，满足我的日常插画需求即可，当然如果你想把动作组件库做的非常细，那么可以参照人物组件库的层级来划分层级。
根据我使用的动物组件库层级，给大家举一个正确小案例与错误小案例，先看下错误小案例：
可以看到下图（狗子）是一个非常粗糙的动物组件库，里面只能替换动作以及动物的动作，当选在狗子的状态下，狗子除了换动作没有其他的组件选项，虽然我想让动物组件库简化，但是也不至于什么都不能替换。
接下来看看正确的案例：
我们可以看到在猫咪的状态下就有很多组件可以选择，不仅可以替换猫咪的动作，还可以替换展示形式（展示形式我是按照景别来做差异化，当然也可以用其他方法）、猫咪表情以及猫咪的颜色，这样的动物组件库已经完全能够满足我的设计需求。
4/辅助元素组件库
辅助元素组件库层级最好要添加景别，因为我们经常会遇到同一个元素在不同产品中体现出不同的景别，如果不区分，在选取组件时就非常的伤脑经，经验之谈、强烈要求。
为了大家更好的理解，我给大家举一个小案例：
我们可以看到我不仅可以切换元素，还可以切换景别以及颜色，至于其他的小组件我并不需要，因为这些已经足以满足我的日常运营设计需求，这个层级划分简单实用非常推荐。
5/背景元素组件库
背景元素组件库一共分为两种类型，分别为：组合场景背景与纹理背景。
组合场景背景：
组合场景背景是用辅助元素组件库拼凑而来，它是一个可以直接用的完整场景，想要替换的组件如果在辅助元素组件库能够替换，那么在背景组件库也是可以的。（注：这里牵涉到组件库的重组调动，在后续出的文章中会详细提到）
上面的插画由白天变为黑夜只需要用组件库就能轻松完成，而这些组件库也不是现做的，全部是辅助元素组件库里提取过来的，也就是我所说的组合场景背景是用辅助元素组件库拼凑而来。
大家可以发现插画中山上的小房子只用一个组件就可以全部替换颜色，而左右两边的树却要做6次不同的替换，树木需要多次替换的原因这就是没有做重组，如果想要相同元素做相同的替换，那么建议在调换过程中重组组件，优化层级。
纹理背景：
纹理背景相对于来说就是最简单的，它里面只存在纹理的不同样式，并且只可更换颜色。
三、人物插画组件库如何结合到运营设计中？
1、创建常见运营设计规范
在做设计前，我们先要做好运营设计的规范，以便于组件库的插入应用。
那么我就用卡片弹窗来举例：做设计前我们先确定卡片内容，当内容确定后，根据内容进行卡片的运营设计规范：
我们需要注意的是初步规范里并不需要涉及到用什么字体，也不需要罗列出插画的尺寸规范，我们可以在后面的设计中一步步去实现。
2、结合运营设计的两大方法：
当规范做好时，我们就可以利用规范去制作相应的组件库，利用组件库来结合运营设计，按照不同的情况可以分为以下两种方法：
1/重组组件库（无人物动态组件的情况下）
在一些运营设计中，如果我们要用到的人物动作之前并没有做过，那么就需要我们重新设计人物动作，设计完后再把可以重组的人物组件拖到我们现在的组件中进行重组，分以下几步进行：
第一步，根据卡片的规范做出卡片的设计内容，如下：
第二步，把设计好的内容分板块，以便于组件库的层级划分。在这里我把他们一共分为了4个大块，分别为：文字组件、人物组件、辅助装饰组件、背景元素组件。
第三步，在大的板块下划分小组件，结合小组件就可以得到我们组件库的层级，可看下图：
在小组件里，很多都是个人组件库里原本有的内容，这时我们就可以把它们拖进来进行重组。
假如你替换的元素不够用，那么就需要你自己手动设计了，这样也能反过来扩充你总的人物组件库内容，其实组件库的内容就是这么一点点迭代添加的，当你的组件库内容越来越多时，你的设计成本就会越来越低。
三步下来我们就把组件库融入到了运营设计中了，有了新的子级运营设计组件库。
2/直接替换（有人物动态组件的情况下）
如果你做的运营内容组件库里都有，那么就可以按着规范直接拖入即可，也没有必要去进行重组。
总结：
总的来说组件库的建立是一个庞大的工程，在你有了基础架构的时，你就要慢慢往里面塞更多的内容进行填充，当你的内容足够多时它就可以反向为你提供更多的便利，它是你的宝贵的设计资源库。
因为这期的内容实在太多，所以插画组件库的应用、运营设计常用模块组件案例、重组技巧以及品牌插画组件库的建立我会另外抽时间给大家总结。（做案例太费时间希望大家谅解）
参考资料提取：
我为大家提供了一些组件库的可参考性文件，里面包含成套组件库（sketch）、成套的插画图片、宣传动画、一些参考性的图片（构图、表情、发型等等）。
文章来源：tob.design 作者：黑狮力
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
元旦过后，新的一波工作又要开始了，我在开始准备新一轮汇报材料的时候突然想到了一个问题，不知道铁子们在往年参加设计评审的时候，有没有总被老板 diss 设计稿里“太空了” “不够饱满” 这些个问题呢？
我猜测应该99%的铁子经历过，我也不例外，从校招进到第一家公司就开始被植入页面需要利用好每一像素的理念，搞得像北京房价一样寸土寸金，生怕被浪费了；思前想后为了大家不重蹈我的覆辙，所以新年的第一篇，咱一起来聊聊排版的问题：
如果你看过我过往的文章，也许会对我的排版多少有点印象，夸张的大字，极强的对比，还有一些微妙的层级关系；坦诚的讲，我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格；
整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在；这种一丝不苟，传达准确的风格，即所谓瑞士国际主义风格。简单的说，由于 Swiss Design 这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此，又被称为国际主义平面设计风格；
简单的说，瑞士的这种设计风格典型的代表就是我们看到的杂志，其中有 3 个特点：讲究网格 / 非常理智的克制颜色的使用 / 层级关系；有趣的是，审美和潮流是循环的，随着时代的发展，越来越多的app开始重新挖掘出来瑞士风格并加以使用，比如我们iOS系统自带的应用们，Spotify：
年少的时候，我经常看着这些个app会不禁的问，为什么在没有一张图片的情况下还能如此好看？这些年终于明白了前人良苦用心：文字是内容，同样也是构成；是信息，同样也是装饰；简单可以理解为，不管在平面还是网页亦或者是UI界面，在没有可用的装饰下，信息本身要承担起装饰和传达的双重功能，这就是瑞士风格的核心本质。
iOS是拟物的典型代表，网上对于这块的讲解已经过于饱和了，我也没必要赘述；那么这一趴，来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳，潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已…
但当我打开下图这个页面的时候，我意识到我对拟物的理解还是浅薄了，第一次被光影的层次震撼到：
通过光影塑造了一个三维空间，让整个画面丰富饱满，也打破了我幼稚的设计观，PS.不管锤子科技现在如何，我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献，respect！
毫无保留的说，我的设计就是二者的融合，以 层次对比 作为核心理念。
啰嗦了半天，赶紧进入正题；如果你是一名产品体验设计师，一定听说过 “奥卡姆剃刀” ，这个定律通常用在交互链路的设计上（意思就是在用户路径中没必要的步骤，省了就完事了），“如无必要，勿增实体” 即简单有效原理；
通常来讲，如果想要不平，把二维空间转化成三维空间是必要的一步，需要在Z轴上下功夫；如果你恰巧也是一名摄影爱好者，可以想象下照相机的焦距和景深，工作原理是相同的，需要 前景 / 主体和背景 三个层次；当然，虚实的对比对信息的呈现和层次的拉开是极其重要的，这里需要通过景深来控制效果，你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到：
另外，空间的感觉想要被突显，那么“光影和空气”的价值就可以无限放大了，按照如上所说的结构，把内容和自然物质摆进去就好了，甚至可以做到举一反三（比如不同颜色的氛围，我就不展开了）：
整个case下来，你会发现用光来聚焦在信息上，自然而然就形成了我们说所得 “信息优先级”；有点时候空气和光影的饱满程度超乎你的想象，这种自然存在的物质可以很好的帮助画面分层，以达到填充的效果，并不是一定要依赖于实体化的装饰。
本来不打算再开一个章节说这个，但还是觉着很有必要再说下（我好纠结），作为PPT来讲，ta的主要用途分为两种：其一是给人看的，其二是给人讲的；不管是哪种，尽可能的简化文字，是对输入者关爱；
以上图为例（实名diss自己的作品），坦诚的讲左边的部分大多数观者是不会有心思来看的，按照视觉系统的处理，这部分就会被当成一个“面”而被忽略掉，这种情况下右边显得有力很多，也能帮助观者聚焦信息，所以还是那句话，能不写的就别写，能少些的别多写，保持信息的密度也是设计师必要的职责之一。
想问一个问题，铁子们觉着UI的本质或者作用是什么？从我个人的角度来讲，UI设计的本质就是对信息的整理归类和编排，没有什么比信息更重要，如果贸然为了饱满加入一些装饰元素，很有可能是本末倒置，得不偿失。这就像喝酒一样，喝醉很容易，但微醺的感觉才是最棒的，今天是元旦后的第二个工作日，希望你能有个好心情迎接美好的一年～
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当今是色彩的世界，物体颜色的不同，带给我们的情绪也截然不同。想要掌握颜色，首先就要研究颜色的本质。
颜色分为光学三原色和颜料三原色。
1. 光学三原色
光学三原色由：红、绿、蓝组成。
色值分别是：
2. 颜料三原色
颜料三原色由：品红、黄、青组成。
色值分别是：
理论上，原色可以调制出绝大部分的其他色，而其他色都调不出原色。
那么，这两种有什么区别呢？
3. 区别
光学三原色和颜料三原色最主要的区别就是他们的混合原理不同，分为相加混色和相减混色。
光学三原色为相加混色（可以理解为光的叠加），混合后颜色的明度提高，三色混合即为白色。
相反，颜料三原色采用相减混色（可以理解为光的吸收），混合后颜色的明度和纯度都会下降，三个混合即为黑色。
在设计中我们可以区分为 RGB（光学三原色）和 CMYK（颜料三原色）。
RGB 模式本质上与 CMYK 模式没有区别，只是产生颜色的方式不同。显示器采用RGB模式，就是因为显示器是电子光束轰击荧光屏上的荧光材料发出亮光从而产生颜色，当没有光的时候为黑色，光线加到最大时为白色。而打印机呢？它的油墨不会自己发出光线。因而只有采用吸收特定光波而反射其它光的颜色，所以需要用减色法来解决。
运用场景：
冷暖色由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色，黄色至紫色为暖色。
冷色可以让人联想到海洋、天空、雨雪等，让人产生理智、寒冷、沉寂的感觉。
暖色可以让人联想到火焰、太阳等，让人产生温暖、热情、开放的感觉。
实际案例中，冷暖色调的搭配，直接决定了观赏者的第一感官。观赏者第一眼的情绪感触，就由此而来。
颜色的三个属性分别为：色相（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 代码，可以更好的与开发对接。
网站链接：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
Color Hunt 是开放的调色板集合，可以添加到 chrome 浏览器，方便随时随地使用。
文章来源：优设网 作者：友设青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前文的原子设计中我曾经讲过，原子是构成所有元素的最小单元，没有办法再被细分。它通常对应着产品设计中的通用样式及构成组件的最小颗粒。而颜色，作为整个设计系统中极为重要的原子之一，在心智模型中占据了关键的地位。
我们看到红色能够感受到热情、兴奋和危险，看到绿色时往往就感受到安全、自然和平静。可以说，颜色调动我们的情绪只需要一瞬间，而且它在我们的记忆中可以停留更久。
接下来，我结合公司目前的业务CROV Dropshipping（以下简称DS），来进行色彩体系的探索，以输出一整套的色彩方案。但愿这次探索能够给予各位一点启发。
大纲走起：
CROV DS是针对美国市场的线上一件代发平台（类似阿里巴巴的一件代发业务），属于跨境电商B2C行业。平台帮助用户无需任何初始成本、无需囤货即可顺利开展电商之路，时间灵活可控，让用户专注于销售本身。
目前CROV DS业务日益繁杂，但是除了品牌色之外，辅助色的定义过于随意。而且随着业务场景的扩展，临时增加的颜色很容易被遗漏在某个不知名角落的画板中，导致一次性用色的风险。（tips：一次性即前一篇我所讲到的用完即扔、未被复用的设计）
而且用色本身的随意也导致研发还原结果的不统一，一处地方色彩各异的现象比比皆是。
因此，我们需要基于我们自身的业务特征来产出一套足够完善的色彩体系，让业务从用色上达成基本的一致统一。
我们设计师在定义颜色时，更多的是直接在色板上进行取色，但这样的取色方法存在诸多弊端。
增加决策
可能很多设计师选色时会有这种情况，一会觉得这个颜色脏了，一会又觉得那个颜色太刺眼了，有时候完美主义作祟，为了得到一个满意的颜色甚至花上大半天。这种情况尤其在多色搭配时更为严重。
其实这和不用网格系统来布局是一个道理。（注：网格系统是一种能够极大提升布局效率的方法，后面会讲～）
色板中取色的范围趋近于无穷。如果将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值越高，意味着混入黑色的量越少，颜色也就越“亮”。（通俗点说，它们分别代表了明色区域和暗色区域）
Crov Dropshipping基于其时间自由灵活、可兼职副业、成本风险低的业务特征，使得对应的用户群越来越多的集中在年轻一代的e-tailer（线上零售商）当中。他们不同于我们常规认知里那类传统的retailer（线下实体零售商），大部分的DSer拥有自己的事业和工作，为了赚取外快，将其当做自己的副业。因此，年轻化是这类用户群的主要标签。
所以，我们采用了高饱和度、偏向蓝色色相的紫色，来作为crov dropshipping的品牌色。它的HSB值是 （250，80，100）。
为了覆盖掉Crov DS本身复杂的前后台业务场景，需要额外搭配各类型的辅助色。我们想要提取24类色相，所以直接通过360/24得出了色环中每类色相的基本角度15°。
因此，这里以品牌色色相为基础，在HSB 360°色环中，对色相（H）正向和反向各自±15°，饱和度（S）和明度（B）保持不变，得到24色的色环彩带。
后续我们的颜色体系就在彩带上的24个颜色上面进行提取。
品牌色同色系是指，根据品牌色不同的饱和度和明度变化，生成不同深浅、不同明暗的一组颜色。同色系配色不仅传达了品牌性，多个梯度的变化也能够适应及通用尽可能多的业务场景，也便于多信息的层级划分。
而同色系配色的输出则遵循了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），剩下的所有颜色以此类推。
根据这两个定义规则推导出全部不同梯度的色阶，我们就可以将其作为品牌色同色系配色。
我们使用品牌色来传达品牌价值，还需要辅助色来满足多样化业务场景的需要，对用户进行不同的情绪引导，同时也可以缓解用户对单一主色产生的视觉疲劳。
辅助色的定义就可以直接用到我们之前基于品牌色所衍生出的24色“彩带”了。我们通过色环形式，来迅速得出品牌色的同类色、类似色、邻近色、中差色、对比色和互补色。
结果见下：
首先，由于相差15°的同类色与品牌色差距过小，色相对比感微弱，传递的调性过于相似，所以这里直接pass。而邻近色生成的粉色和青色在界面中基本不会作为功能色使用，这里同样直接舍弃。
类似色
类似色即色相差在30度左右的颜色，属于较弱对比色。我们基于品牌色的色相各自±30得出类似色。由于H280的类似色调性与品牌色类似，并且色彩体系中需要一个典型的冷色来覆盖一些场景，所以这里使用了H220的颜色作为冷系的辅助色。
中差色
中差色即色相相差90度左右的颜色，属于中等对比色。H340偏粉，与常规红色相差过多，所以这里借鉴了alipay的辅助色校正原则“色相差值不能超过15”，对H340进行了色相校正，调整至H355。
对比色
对比色即色相相差120度左右的颜色，属于强对比色。最后得出的H130调性与中差色的H160过于类似，直接舍弃。H10与H340调性类似，但是可以向橙色系发展，所以微调到同类色进行色相校正。
互补色
互补色即色相相差180度左右的颜色，属于高强度对比色。最后得出的H70偏绿，这里同样进行了色相校正，将其调整为H55。
最后，得出了共计5种辅助色。不过这些辅助色并不能直接使用，还需要进行感官明度的校正。
感官明度校正方法来自支付宝设计团队，这是是确认辅助色的最后关键一环。每种颜色都有属于自己的“感官明度”，即发光度。品牌色即辅助色的发光度不一致，就会导致视觉上会有明显的明暗差别。所以，我们需要通过发光度来进行最终的颜色校正。
明度较高的灰色意味着高发光度，明度较低则意味着低发光度。保持品牌色发光度不变，我们对其他辅助色进行微调。
我们只需要将那些视觉明暗差距明显的颜色进行调整。注意，并非所有的颜色都要调整到品牌色的感官明度，这些值仅仅是一个参考。最终的校正依然取决于我们的视觉！比如黄色感官明度本身很高，但是视觉缓和、不像绿色那么刺激，所以基本无需校正。
最后得到校正后的如下辅助色。蓝色、绿色、黄色以及红色在界面中可以作为功能色使用，可以分别代表常规、成功、警告和报错状态。而橙色则可以用作突出类的提示信息，它比bold字重要高出一个层级。
与品牌色一样，使用tint/shade规则推导出全部辅助色不同梯度的色阶。具体过程不再赘述～
CROV DS的文本色并非纯粹的中性色，我们通过加入一点点品牌色来让文本呈现色彩倾向，以此提升页面的活力及年轻感，同时也可以让界面更加耐看，减缓B端产品长期使用时的视觉疲劳。
具体方法就是，分别在#222、#555、#888、#b3b3b3的一、二、三级中性文本色代表的色块上，覆盖一层10%透明度的品牌色。最后得出了四个层次的文本色。当然，中性文本色你也可以参考antDesign中通过透明度进行定义的方法，不一定需要按照某个具体色值来。
我们必须要承认的现实是，设计师所定义出的色彩在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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在经历了一个不太理想的新十年开局后，年轻人们迫切需要重塑品牌。幸运的是，以下2021年的标志设计趋势完全可以胜任这项任务。
观察来自世界各地的logo设计作品，他们的预测代表了设计环境的变化。虽然去年的趋势集中在通过新技术进行革新，但2021年标志趋势中的一个共同主题似乎是限制条件下的创新。过去的一年可能在很多方面限制了世界，但是2021年的标志设计师们还都在继续努力着。
彩色玻璃
透视图
简单几何
发散字母
真实写真
原始对称
古怪的人物
现代象征主义
静态运动
类似配色方案
标志设计作为一项相对现代的发明，往往在过去的技术和局限中寻求灵感。在2021年，许多标志设计师在过去时代的彩色玻璃窗中找到了启发。
当应用到现代设计中时，将图像分割成纯色碎片，给普通概念增添了一点抽象感。彩色玻璃也与神圣联系在一起，因为它起源于中世纪教堂。这可能不是巧合，这种标志趋势经常与美丽的自然景观结合使用。在一年的大部分时间被困在室内之后，我们可以期待我们脆弱的生态系统将在2021年的彩色玻璃标志设计中得到尊重。
正如标志设计师林登·莱德（Lindon Leader）曾经说过的那样，伟大的设计源自简洁和清晰。这两个优点使标志设计能够有效地向观众传达品牌的复杂身份。这就是为什么许多过去的标志潮流都集中在极简主义和平面设计上。
虽然2021年的logo设计师们决不会放弃这种方法，但他们正寻找在过度简化中失去的一些魔力。一个流行的标志设计趋势是融入微妙的视角。使用基本的绘画技巧，如线性透视，曲率或缩短，设计师能够创造深度的错觉，而不会使设计复杂化。
其效果是，标志给人的感觉很突出，品牌从页面上一跃而下，而半平面的设计技术，一直以来都是为设计师服务的，但至今仍然完好无损。
形状是构成意象的基石。但是，尽管三角形、正方形和圆形等原始形状一旦打下基础，往往就会被淘汰，但它们纯粹的简单却有力量。
2021年的设计师们正利用这种力量，用简单的线条和形状制作出标志。这种对形状极简主义的严格遵守给了这些标志一种刻意克制的气氛，允许他们在其他地方自由发挥，比如在丰富的颜色饱和度上。
这种方法的另一个特点是，简单的分层可以产生一种结构和深度的错觉，这符合我们前面提到的透视图趋势。通过纯粹的造型语言，设计师能够创造出易于解析、令人难忘、色彩鲜艳的logo。
基于字体的文字标记标识有着直截了当的名声，无论好坏。虽然他们使品牌名称成为整个标志的焦点，因此更令人难忘，但他们没有留下太多的空间，为创意铺路。但是2021年的标志设计师们正在一个字母一个字母地改变这种印象。
具体来说，我们看到越来越多的单词标记中的一个字母被夸大了。这可以是一个颜色突出的小写的“i”，或作为一个突出的筷子形成一个大写的“H”。这个不同的字母不仅创造了一个吸引眼球的兴趣点，它给予品牌最好的选择：一个传统的，基于类型的标志，也不怕打破规则。
人们凭直觉寻找其他面孔，这是一个有据可查的事实，这就是为什么肖像画有助于在设计中建立情感联系。这些面孔越真实，越容易辨认，联系就越深。
因此，2021年更多的标志设计师开始转向反映不同种族、文化、性别、年龄段等的肖像画。与媒体过于拥挤的同质表现不同，这种方式创造了真实的印象，有助于人们在瞬间与品牌建立联系。这些标志可以从简单的，平面的人物肖像到详细的说明性技术。
归根结底，设计师们厌倦了那些让人感觉不亲切的形象。归根结底，无论一个标志是在讲述品牌背后的人还是品牌服务的人的故事，人都是关键。
平衡是标志设计的基本原则之一，而对称也许是其最极端的表现。对称的标志从中间分开时，两边是相同的。
虽然相同性和可预测性似乎是冗余的同义词，但对称设计完全是关于强度的。它们让我们想起了建筑，无论多么高大复杂，它们的设计都是为了站稳脚跟，它们通过完美的对称平衡来实现这一点。
这种原始的对称性允许标志包含线条艺术，感觉既不可能复杂又完美有序。但即使对称在几何设计中很常见，我们也看到这种趋势在手绘徽标中找到了归宿。无论是设计师追求的完美还是实力，有一点是肯定的：2021年的标志建筑是为了经得起时间的考验而建造的。
虽然logo设计师在真实人物的表现上处于领先地位，但2021年的其他许多人则通过漫画和夸张的幽默来对比这一点。我们正在看到越来越多的以插图为主要内容的logo呈现出诙谐，甚至古怪的概念，从玩老鼠的医生到华丽的甜甜圈花花公子。
从事舒适或娱乐的企业希望能让他们的观众放松，而设计师们则用散发着博爱气息的logo来回应。最终，这些异想天开的设计让顾客觉得他们找到了朋友而不是品牌。
逻各斯的根源一直是古老的象征，从升起的凤凰到不朽的女神，再到无所不能的眼睛。就像古代的象形文字一样，它也是一个标志的目的，通过简化的图形来传达信息。
通常，logo寻求创造他们自己独特的符号语言，但在2021年，设计师们正在疏导古代符号的力量。其效果是将人们普遍理解的、经典的美德与奋斗品牌的愿景联系起来。开始一个新的企业是一个信仰的飞跃，这些象征性的标志承载着一个启示的承诺。
这意味着运动跟踪器、流体形状、飞溅粒子和动作线的增加。对于那些希望创新的企业，比如科技品牌，这是一个标志潮流，肯定会引起轰动。它提醒顾客品牌不仅仅是一种产品或服务：它是一种活的东西。
随着每年的标志设计潮流，我们常常期望找到令人眼花缭乱、革命性和颠覆性的技术。另一方面，相似的配色方案是学生设计师在第一年的色彩理论学习的内容。这基本上意味着在色轮上对彼此相邻的颜色进行配对，其结果是创造和谐的科学方法（代替对立颜色的对比）。
虽然类似的配色方案并不一定是新的，但它们在标志设计中日益流行可能表明了对对比度的排斥。色彩是设计师用来影响观众情绪的最重要的工具之一。
2021年的标志设计趋势是重塑这个新的十年的一个机会。从透视技法到简单造型再到对称性，从极简主义到古典主义的复兴，我们未来的理性似乎在追求一种纯粹。
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
软件熟练度属于“器”的范畴，对主要靠作品集吃饭的设计师来说很难对外体现。但是我们不能说它不重要，软件的熟练度依然是设计是否能够产出的重要因素之一！！
今天结合我自己之前的经验，来谈谈AI中的一些相对比较冷门的小干货（很多是我最近才get到的- -），但愿这些快捷操作能帮助你进行产出～～
大纲：
AI中存在很多参数需要我们自己去调节。比如一个形状的宽高圆角，对形状进行变换的旋转、扭曲等参数等等。可能很多朋友跟我一样，要么一个个手动输入要么通过拖动滑块进行调节。
这么做造成的问题有两个，一个是交互的繁琐，一个是参数调节颗粒度过细，在进行往返调试时需要耗费大量的重复工作量。对于我们时间宝贵的设计师来说这种方法简直太弱了好嘛！！
不过这些完全可以通过一个方法来解决——快捷键调节即可！结合shift、cmd（即win系统的ctrl）以及上下方向键完完全全地提升效率。具体的方法如下：
比如对形状的变换，我们就可以使用上下方向键1px微调，结合shift以10px数调。键入位置通过tab切换。
再比如变换效果的参数，同样可以使用这种方法快速地调试，全程只需要快捷键操作即可。而且这种一边敲击键盘一边实时预览的赶脚也让人心情莫名得顺畅！
这种方法也可以迅速地让水平和垂直数值保持一致，比我以前的滑块拖动、数值输入的操作好太多了。
顺带一提，sketch参数数值调节也支持这种快捷操作哦。
我们在调节形状的圆角时，一般情况有两种方法，要么在菜单栏or变换工具中数值调整，要么直接在角落的圆角点上拖动。
但是对于平行四边形这种四个顶角度数不一样的形状，即使四个圆角大小是一致的，由于锐角和钝角的存在导致圆角看起来并不一样。
这时候，外观效果就派上用场了。
我们在效果-风格化中找到圆角选项，为平行四边形添加一个圆角外观效果。
风格中找到圆角选项就可以自己设置。这里给一个和刚刚一样的圆角10px。
最后（右图）得出的四个圆角看上去明显比之前的方案更加一致。
另外，这种外观的好处就是，后期随时可以在外观中编辑！
我们更多时候缩放是滚轮缩放，但是这样的缩放的颗粒度太大，尤其在小屏电脑上想要定在某个合适的窗口大小比较麻烦。
这时候我们可以利用快捷键Z激活缩放功能，然后通过左、右拖曳的手势进行快速而平滑的缩放操作。我们可以轻易定格在我们想要的窗口大小。一开始可能很多朋友和我一样习惯上下缩放，但是ai里的缩放并不是上下，而是左右。
一般我们画波浪线是通过扭曲与变换中的波纹效果来变换。
但是我们也可以使用钢笔来直接画。
向一个方向拖拽生成手柄（不知道有没有朋友和我一样用钢笔工具都有点一下去绘制形状的毛病），然后在合适的位置再拖拽一次即可绘制出波浪线。在对精准度要求不高的情况下完全可以采用这种办法，方便快速。
在以往，我在进行路径消除操作（比如绘制一些断线icon时），通过这样的步骤，添加锚点工具在路径上添加两个锚点，然后直接选择工具选中锚点间的路径删除。拜托，都2120年了，别用这么古老的方式了好嘛！！（好想乘时光机回去拯救年少迷茫的自己）
但其实压根不需要这么麻烦，一个工具就可以迅速解决，而且可以连续消除！
这个工具就是路径橡皮擦工具，说实话知道这个工具后我再也回不去了。
只需要激活它，你就可以在任意的路径中像使用橡皮擦那样，迅速地消除你想消除的地方。另外，我提前给这个工具设置了E这个快捷键，以便我能迅速调用它进行路径消除工作。
路径橡皮擦用在填充的色块中同样只能消除路径，但我们想要消除色块时，则可以用到另外一个工具——橡皮擦工具。
shift+E直接调用到它，按住shift即可直接在填充色块中进行切割。而且最后被切割出的图形都是互相独立的闭合形状。
当我们按住alt后，就可以随意地绘制出不同宽度的矩形进行切割，相比形状生成器或布尔运算更加方便点。
一点点平时积累的ai小干货，但愿能帮到你！！
文章来源：优设网 作者：转行人的设计笔记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
LOGO 是品牌设计当中最为重要的一环，LOGO 本身的设计不仅昭示了品牌的身份，甚至可以表现品牌的价值观和特点。你可能想开拓新的领域，或者重塑旧有的业务，又或者是基于 2020 或者2021 年的新趋势，将原本的 LOGO 升级，这些都是促使 LOGO 革新变化的契机。
和视觉设计不同，LOGO 的设计常规类型其实是相对固定的，通常不会有某种类型的 LOGO 占据主流，但是不同类型的 LOGO 呈现出不同的变化和趋势倾向，下面就是 LOGO 设计在 2021 年呈现出的 11 个趋势：
2021 年将会是 3D 在设计领域中彻底崛起的一年。而相应的，在 LOGO 设计领域，光影细节也成为了很多企业和品牌体现品牌价值和特质的一种设计策略。如果你正在寻找一种流行的风格，或者打算将已有的 LOGO 翻新升级，试试立体的 3D 设计，这可能是当下的一种设计风格。
这是最近2年又重新流行开来的一种设计风格，复杂的轮廓和阴影，笔触细节丰富，繁杂但是令人愉悦，手写和手绘都融入其中，从手写风格的文本到近乎手绘的图形图像，你能在这样的 LOGO 设计中感受到强烈的品质感，感知到精致的元素和独特的个性，整体其实是给人耳目一新的感觉。
文字 LOGO 一直是 LOGO 设计中的一个比较大的门类，只需要使用特别风格化的字体来呈现品牌的名称，就能够很大程度上传递品牌的主要信息和气质，它足够简明，不费吹灰之力就可以确保信息的传达，视觉的美观，气质独特，并且获得某种程度的认可。下面的 LOGO 都是2020年新设计的文字 LOGO 中，比较有特点和代表性的作品。
有很多品牌本身，和自然元素是有关联的。在今年这个大环境之下，大家对于自然的青睐是无与伦比的。这也是的很多和自然元素相关的品牌，会尽可能多地在设计的时候从自然汲取灵感，尽量创造富有识别度，有着平静协调气质，并且能够让人想到「自然」的设计，下面的案例就是典型：
黑白是永恒的经典。通常，黑白 LOGO 会更加考验设计师对于形体和构成的认知。优秀的黑白 LOGO 通常轮廓分明，优雅又颇具识别度。
有意思的地方在于，2021年的黑白 LOGO 并非和往常一样毫无新意，很多设计师会将 3D 效果、动画和黑白 LOGO 结合到一起来进行设计。
生动的色调，明亮的色彩，只有扎眼的设计才能够在第一时刻抓住用户的注意力。在 2021 年，反常规、大胆的用色会是 LOGO 设计当中相当合理且出彩的一种策略。用户会下意识地被品牌色吸引，这也能够让LOGO 和品牌最快发挥效用。
角色总是能够更容易引起共情，因为一个具体的角色总能够更加具象和立体地呈现特征、传达情感甚至在某些方面引起互动。
值得一提的是，在品牌设计方面，设计师将想象力和品牌特征加诸角色，也可以帮用户和观看者构建出想象空间。
使用角色或者吉祥物构建的 LOGO 可以更加轻松地应用到海报、标牌、广告、动画、社交媒体等地方。这类 LOGO 设计的重难点，是如何通过简单的角色传递出独特的气质和情绪。
在抖音风靡全世界之前，很少会有人在 LOGO 中玩故障效果。一方面是故障风并没有那么主流，虽然很赞很赛博朋克，另一方面是和故障风在气质上契合的品牌其实并没有那么多。
不过在这个注意力资源稀缺的时代，前有大厂带路，后有市场压力，很多品牌开始在条件允许的情况下，尽可能地采用更为大胆的故障效果，疯狂地、富有创造性地尝试这一效果。
总而言之，如果你正在寻找一些特殊的 LOGO 效果，来试试故障效果吧。
动效，或者我们称之为微动效，是在2020年之前就存在的东西，不过在 LOGO 设计领域的大范围流行，应该在 2021 年。在数字硬件性能过剩的今天，让 LOGO 动起来并不是什么大事，只要它能够吸引用户的注意力。
唯一的问题是在于，怎么动才会让它恰到好处？很简单，看看别人都是怎么做的：
和 3D 设计一样，渐变色也一直身处设计领域的话题中心。渐变本身会赋予 LOGO 以更强的体积感和立体感，让色彩更加有趣，即使 LOGO 不动的时候，依然具有足够的「动感」，这大概是渐变色最富有价值的地方。
值得注意的是，随着「拟物化」的「文艺复兴」，大幅度渐变色重新成为了设计师们的宠儿，虽然这是大趋势，但是在设计 LOGO 的时候，依然要注意坚守品牌色，同时控制好变化幅度，避免过犹不及的情况发生。
回归简约和基础可能也是 2021 年 LOGO 设计的一个重要的主题。很少有东西能像基础的几何图形那样具有启发性和趣味性。
将基础的几何图形进行重新的排列组合，可以创作出各式各样的图形，传达隐喻，还富有艺术性。在2021年，你可以尝试一下这种 LOGO 设计，它巧妙且有趣。这种设计还可以结合动画和色彩变换，创造出引人入胜的动画效果。
相比于其他的设计门类，LOGO 设计更加考验设计师的基本功和打磨的耐心，而与此同时还能拥抱变化的设计师，能够在接下来的 2021年，创作出更优秀的作品。
文章来源：优设 作者：Iveta Pavlova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每年的双11在设计师们的眼里，都不仅仅是购物狂欢节还是一场视觉盛宴。这不，今年的双11重头戏来了。
天猫联合各品牌发布了超级符合“猫头海报”，一共55家下面让我们一次看个够。
1. 泡泡玛特，很有意思的创意
2. The North Face场景感十足
3. 好奇很温馨的设计
4. 外星人，一直都想买的电脑
5. VANS，我喜欢他家的黑格子鞋
6. Levi’s，我服了
7. 麦当劳，烟雾的创意很契合产品
8. 惠氏铂臻3，一团线织出来的创意
9. 拉面说，来碗面
10. 宜家家居，仔细看，是购物袋
11. 巴黎欧莱雅，万能的C4D
12. 朗仕，细节很多
13. 华为，冷暖对比很有冲击力
14. 乐高，积木的海洋
15. Marshall，燥起来
16. Jordan，乔丹
17. 肯德基，WOW好吃！
18. 林氏木业，俯视的构图角度，空间感很强
19. 元气森林，故事性很强
20. 强生，满是爱
21. fresh，高端的护肤品牌
22. 万代，为“酷”而生
23. 始祖鸟，化石来了
24. 三生花，旗袍肯定很漂亮
25. HOLLISTER，一起冲浪
26. 施华洛世奇，每个女孩都值得拥有
27. PINKO，乱的有创意
28. MINI，我有个进MINI车友群的梦
29. 孩之宝变形金刚，汽车人变形
30. Onisuka Tiger，日本的运动产品品牌
31. 优衣库，线下实体店的货架创意
32. 三顿半
33. OLAY
34. Dyson，很亲切的表达方式
35. 迪士尼商店，可爱、好玩
36. NIKE
37. 法国娇兰，看起来很贵气
38. 荣耀
39. LINE FRIENDS
40. M.A.C
41. 红星美凯龙，空间感很强
42. NET-A-PORTER，泡泡龙的感觉
43. 稀奇，太喜感了
44. 百威，哟哟切克闹
45. 芭比
46. 李子柒，依然还是熟悉的味道
47. 爱他美3，阳光帅气
48. 花西子，雕刻工艺品
49. 伊利谷粒多，太美了
50. Apple，表情包集合
51. 滴露，传统国风的感觉
52. Moleskine
53. 大疆，很喜欢无人机，有一起拼单的吗？
54. 绘儿乐，这个创意现实中我玩过
55. 乐事，好吃
每个品牌对于猫头的创意表达都不一样，很多都是生活中随处能见到的，但在设计师的眼中，就是创意灵感来源。
下面还有视频版，大家一起看看：
以下视频来源于
看完今年的猫头海报，让我更加期待接下来各品牌双11活动的玩法和创意。接下来让我拭目以待吧。
蓝蓝 http://www.lanlanwork.com
