全文1万4千字，讲解文字编排有两个层面的作用。其一，它做了一些传递信息的工作；其二，它自身在合理地编排下就会有韵律的美感。
在通常版式设计中，一般是由文字、色彩、图形三个要素组合而成的。通过这三个要素的有机搭配，从而给人视觉上造成一定的冲击，激发人们的阅读兴趣。
其次，文字组合编排是构成版式设计中最主要的构成要素，也是传递信息的重要的设计手法和策略。字体的选择是否合适则会直接影响版式的效果，虽然能现在可供选择的字体五花八门，但是所选择的字体要能够与版式的主题相吻合。除此之外，文字的字号也会影响阅读，在排版时要注意文字信息的等级关系，做到有主有次。
如果文字从发明出来的那一刻起，就是为了记录和传递信息，那在版式中的文字就是通过设计设计手法来更好的传递信息。
怎么去理解这句话呢？如果大家看过《王牌对王牌》这节目，里面有个游戏叫传声筒，里面的游戏规则是“每队轮流参赛，每队任选5名成员，每个成员用隔板隔开，第一人将对手所出题目，演绎给队友，只能通过音效和动作表达，依次传递给下一位队友，经过三四个人传递后最后一名队友，猜测题目上的信息。猜对得一分，最终积分高的一队获胜。”
这种形式像不像设计师的日常呢？老板或者领导有个“牛批卡拉斯”的想法,然后他在想法告诉运营总监或者文策划总监，然后在由下面的运营/策划专员做成方案，最后在交给设计师做成图片来传递老板那个“牛批卡拉斯”的想法。
那么文字组合怎么去编排就成为将老板的想法完美的传递出来的关键要素，为了不南辕北辙，我们需要将文字编排的形成方案，并在实际的工作中通过不断的实践去完善，那让我们一起来了解下文字组编排的技巧吧。
一般的软件里面都会有字体选择器，我们需要找想要的字体的时候都是直接在里面去搜索，然后再去点击使用，那么今天我来看看怎么通过观察字体家族的特征来找到我们想要的字体吧。
家庭中的所有成员都有各不同的称谓来辨别身份，在字体家族中也是如此，我们通过不同的前缀后缀的缩写来区别字体的样式。
例如：字体前面的LT代表的是莱诺字体公司，如果我们使用的字体前面或者后面带有LT，那就说明这个款字体是由莱诺字体公司出版的。
当然，我们日常看到字体厂家也会有很多，例如常见的MS是微软公司，MT是蒙纳字体，ITC是国际字体公司等等，一般字体公司的名称的缩写为连着的大写字母，所以我们看到字体中带有2-3的大写字母，我们可以默认他们是字体公司的名称缩写。
那刚刚我们看到LT后面还有STD，那个是什么意思呢？STD是英文单词“Standard”的缩写，代表着这个字体只支持基础的字符集，它的字体字符集相对会少点，与其相对应的“PRO”是英文单词“Professional”，则是代表字符集比较多的后缀。
既然字体家族的缩写那么多，那我们怎么把它规整好方便记忆呢？方便我们通过不同的前缀后缀来区别字体的样式。正常的我们讲字体家族系统一分为三类，1.字体的宽窄，2.字体的造型，3.字体的字重。
宽窄系统：只有比较大的字体公司去做这类型字体，因为不常用，所以做的就比较少，汉字里面好像汉仪旗黑又宽窄系统，那我们怎么去识别呢，以Ai为例子，如果我们在字体后缀发现带Condensed，那么我们可以确定这个字体为窄体，以后如果我们在字体后缀发现带Extended，那么这个字体则为宽体。如果设计中有特殊的需求，需要我们可以通过后缀去识别。
造型系统是为给不同应用场景下字体做区分的，正常的分为：常规体，意大利斜体，空心体，装饰花边，老式数字。
常规题：常规体的后面一般带Roman或者Regular,带着着这个字体里面最常用也是最适中的字体。
意大利斜体：英文后缀一般带Italic,这类型的字体一般是专人设计过的倾斜体，比软件生成看起来更加舒适和谐。例如有的字体公司为了区分窄体的倾斜体，有的也会用这个单词，oblique,但是意大利斜体（Italic）代表的是常规字的倾斜体。
空心体：英文后缀一般带Outline,在一些大型的字库公司设计的字体会有，他打出的字不是实心的，而是空心字类型的，常见会在比较粗的字体上会有，因为这个的字体变成空心字不容易破坏字体的负空间。
装饰花边：英文后缀一般带Ornament，这种类型的字体一般比较少见，只要一个字体的字库做到比较全的时候，才会考虑开发类似的字体。这个可以理解为字体类的素材，一般的应用场景比较少。
老式数字：英文后缀一般带Oldstyle Figures，比较明显的特征是高低不一样，这类型的字体一般应用在小写字母的编排中让数字看起来更和谐。
标题专用字：英文后缀一般带Titling，这类型的字体在放大后使用看起来比较精致，细节相对比较丰富，但是也有特殊的，例如Caslon字体的标题字用的是540的后缀。所以当找不到的时候我们可以通过细节去分辨。
字重的选择一般是根据当前的选择的字体去跳两个字重去选择，这样才会有对比。字重也是我们设计中常用的选字模式。
我们认识了字体家族对我们做设计有什么作用呢，一个字体家族越全面，我们做设计是可以选择的范围就越大，也就越方便，所以我们接到需求，需要选择字体排版的时候，大致看下字体家族，就可以分辨出这款字体是否适合我们去使用。
需要做好文字组合的编排的基础是需要选择合适的版面气质的字体和相对应的中英文混合编排。
中文字体属于方块字，具有字体的轮廓性，并且每个字符占据的空间都是相同的，限制较为严格，如段落开头必须空两格，竖排文字必须从右到左等规则。中文字体是一种非常规整的文字，因此灵活性相对较小，编排难度较大。
一般情况下，英文字体采用流线型方式，灵活性很强，能够根据版面的需求灵活变化字体的形态，以解决版面僵硬、呆板的问题，创造出丰富生动的版面效果。
在版式设计中，经常会遇到中英文对照的情况。中文字体的象形、会意等特征和英文字体的简单、图形化的特征充分结合，展现两种字体的优势。编排时应该注意中文字体与英文字体的设计创意与主次关系，做到层次明确，并且要注意字体的统一性，如果字体变化过多，很容易造成版面的混乱。
我们在聊中西文的编排之前我们需要先了解下西文的历史，就像我们在打王者荣耀一样，要学习某个英雄，就先得了解英雄的技能，然后才是这些技能怎么去搭配使用，学习文字组编排也是一样的道理。
设计的目的一般是为零解决一些生活中的问题，字体的演化设计之路也是一样的，都是通过外部能力能触达的能力加上内部的需求所达到的最优的解决方案。现在我们将西文字体在历史上的进程可以分为“文艺复兴体” “古罗马衬线体”“过程型衬线体”“粗衬线体”“无衬线体”。
我们可以大致简单的把基础款的字体分为两种，一种是一种是衬线体和无衬线体，衬线体（Caslon,Baskeville，Bodoni,Didot,Garamond,）,无衬线体（DIn,Helvetica）,
衬线体
Garamond是一个早期字体，有老式数字，雕刻感比较强，有倾斜体，
Baskeville修饰比Garamond要粗点，稍微有点厚重感，偏向优雅，特征明显，
Bodoni笔画有明显的过度，比较现代，
Didot比较常见，特征更明显，现代感更加强，女性感强，多用品牌，杂志，简化大胆。笔画对比更加大，出现的比较晚
无衬线体
Helvetica，特征，比较平稳，没有特征，没有华丽的装饰，在国外特别受欢迎
DIN，和Helvetica区别：变化性特殊，切口有角度性的变化，更加简单干净。偏向美术字体数字的几何形强，比较抓眼球
Futuer:菱角分明，几何无衬线体，冰冷，升部比较高，比较高挑，多用于科技感比较足的设计中。
因为基础款的字体很多字体公司都会去做，我们可以通过谷歌可商用字体库去寻找免费字体寻找：http://www.googlefonts.net/
中文的基础款排版字体一般为黑体，宋体，圆体，楷体和一些风格多变的美术体。
衬线体
最早是为适应印刷而出现的一种汉字字体，笔画粗细有变化，而且一般是横细竖粗，末端有装饰部分，（即字脚，衬线），点，撇，捺，钩等笔画有尖端，属于衬线字体，常用于书籍杂志报纸等正文排版，赵集，瘦金体。
思源宋体，前身是小塚明朝体改进的，笔画特征比较相似，小塚明朝横笔画要细点，思源宋体横笔画要粗点。
无衬线体
黑体，屏显字体，无论放大还是缩小都能看的清晰，黑体可塑性比较强，常用于标题字的制作，小的可以作为内文，黑体有称作方体或者等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细，结构严谨醒目，笔画粗壮有力，撇捺等笔画不尖锐，使人易于阅读。由于其醒目的特点，常用于标题，导语，标志等。
思源黑体：是最广泛知道的字体，质量高，7个字重，
汉仪旗黑：可以满足所有的排版的需求，宽窄系统也有。
在我们日常的设计工作中，衬线体和无衬线体该怎么选择呢？我相信很多设计师都在这个问题上纠结过。我们来结合历史来看看这个问题吧
我们把时间倒退到欧洲17-18世纪，这个时期盛行一种艺术“巴洛克艺术”和“洛可可艺术”，巴洛克是一种更早期的宏大而华丽的艺术风格，后世有人将洛可可风格看作是巴洛克风格的晚期，即巴洛克的瓦解和颓废阶段。它产生在反宗教改革时期的意大利,发展于欧洲信奉天主教的大部分地区,以后随着天主教的传播,其影响远及拉美和亚洲国家。巴洛克作为一种在时间、空间上影响都颇为深远的艺术风格,其兴起与当时的宗教有着紧密的联系。然而它不仅在绘画方面，巴洛克艺术代表整个艺术领域，包括音乐、建筑、装饰艺术等，内涵也极为复杂。
基本的特点是打破文艺复兴时期的严肃、含蓄和均衡，崇尚豪华和气派，注重强烈情感的表现，气氛热烈紧张，具有刺人耳目、动人心魄的艺术效果。所以它代表那个时期最流行风格。同时我们可以看看那个时期所产生的字体，也是一样浮夸，装饰性明显。
我们在把时间拨20世纪德国，一所代表着现代主义设计风格的学校诞生了，包豪斯学院，德国魏玛市的 “公立包豪斯学校”（Staatliches Bauhaus）的简称，后改称“设计学院”（Hochschule für Gestaltung），习惯上仍沿称“包豪斯”。在两德统一后位于魏玛的设计学院更名为魏玛包豪斯大学（Bauhaus-Universität Weimar）。它的成立标志着现代设计教育的诞生，对世界现代设计的发展产生了深远的影响，包豪斯也是世界上第一所完全为发展现代设计教育而建立的学院。包豪斯风格成为了现代主义风格的代名词。
而包豪斯的设计理念：把简单的问题把形成标准化，强调一些构成上的东西，所以在这种观念的影响下，就产生了一些非常好看的无衬线字体。
而在现代化风格的影响下，产生出了工业衍生品也非常简约，现代。
做设计是一个入世学，所有的问题都需要结合现有的场景来看，我们上面聊完每个时期艺术熏陶下所产生的字体，那么我们结合实际情况来看下，我们和我们的父母都是在不同文化体系下所产生不同审美观的人。左边度图是我们绝大数父母喜欢的装修风格，像洛可可那时候一样浮夸，而我们却喜欢简约的现代风格。
那么字体也是一样的，有衬线的字体属于比较古典的气质，简约的无衬线字体则是比较现代的工业风。
也不是所有的衬线字体都是比较古老的，而Didot这款字体因为它造型的特性，也会经常出现在杂志封面和一些奢侈品的设计中。从时间的角度来讲，最有历史痕迹的是括弧线衬线又称古典型衬线，其次是过渡型衬线到粗衬线，最现代的就是极细型衬线。
而中文的衬线体没有明确的区分，但是我们可以根据字体特征按照西文的类目去区分。
那上面谈到，不是所有的衬线体都代表古典或者历史的厚重感，所以无衬线体也不是根据出现时间和之前的应用场景也是有区分的。
西文的无衬线体分为传统型无衬线，人文主义无衬线，和现代主义无衬线（几何形无衬线），传统型无衬线的G开口的地方都是水平的，开口的地方也比较小，看起来比较保守，母A它的笔画是由粗到细，落差不是特别的大，字体造型也比较稳重。人文主义无衬线它慢慢的开始出现一些倾斜的特征，这样它的开口处可以做的更大一点，它的负空间也会更大一点，字母A为了让它的负空间也就是字谷变的更大，它的笔画粗细变的更大了，手写的感觉会更多一点，现代主义无衬线体字母G它不仅开口要大，而且还有很多圆形切割的特点。几何的特征会更浓厚一点，我们把这个特征称为几何型无衬线字体。
中文的无衬线则分为传统型无衬线，中间无衬线，现代型无衬线。在汉字的黑体里，分为2类字体，一类是有喇叭口的，一类是没有喇叭口的，喇叭口的造型特征是在笔画的转折或笔画造型丰富的地方会有一些向里面凹陷或微微凸起的造型特征，没有喇叭口的字体特征是在任何笔画造型都收拾的比较干净利落。像传统和中间型无衬线都是慢慢像现代型无衬线演化，喇叭口慢慢的演化成工业的切口风。
字体的选择我们应该基于合适的主题，合适的用字场景以及使用平台或者场景，这样才可以选出合适的字体。
合适的主题：这点适用可以在运营设计或者平面设计中，我们接到的需要适用何种风格，例如国潮肯定会选用毛笔字这种张力比较强的字体，在例如比较有工匠精神的工艺品可以选用有手工感的宋体字。
合适的用字场景，看选用的字是用在标题还是还是正文，标题字可以选用张力比较强的字体，因为标题的文字需要醒目，可以直接传递版面需要表达的主题，而正文需要阅读文本则选择无个性的黑体比较合适。
适用的平台，设计展现的平台也是对字体选用的影响的关键因素之一，例如在iOS上选用苹方字体，安卓上选用思源黑体，PC选用微软雅黑都可以减轻开发打包的大小。
我们为什么要做中西文的那我们在中西文搭配的时候应该怎么去搭配呢？下面是我总结的三个方向：
1.细节类似，细节类似我们可以观察字体的细节进行搭配
2.时间相同，就是在某一个时间节点下同时产生的两款字体。
3 .气质相同，这个是在汉字里面才有的，我们常见的字体除了宋体和黑体外，还有是书法字体或手写体，这类型的字体在通常是不太好搭配字体的。
那要是原字体的西文不太好看，我们怎么去搭配呢？、
外形类似
带有这种转角圆滑的装饰线的宋体字我们一般是搭配古典型的衬线体，这样搭配起来会更舒服，或者汉字的黑体搭配西文的无衬线体，因为它们特征是一样的，然后就是中文的圆体也同样会搭配一个西文的圆体，这些都是细节类似的搭配方法。
时间相同
是看笔画相似来匹配的，我们可以看到下面这个中文的笔画特征是带有喇叭口，这种类型的黑体很明显是印刷工业时代的产物才会有的特征，而右边的西文是粗衬线字体，也是带有工业时期复古的感觉，而且产生的时间也是比较近似的，一个是20世纪左右产生的字体，一个是19世纪产生的字体，这两款字体搭配在一起可以凸显工业感，稳重感，复古感都有，这也是时间匹配法。
气质相同
例如在中国像楷书字体的特征独特，但是英文的字体没有类似特征的字体，所以楷书和宋体在中国都可以列为书法体，在气质上是相同的，所以搭配在一起也是比较常见的。
另外我也总结了一些常用的字体搭配方法，放在下图了，这些只是给大家平常搭配字体时候的一个参考依据。
我们在日常的的设计工作中，无论是哪种设计，都会涉及文字组的编排，我们可以观察到一般的文本分两种组合，一种是标题文本+说明性文本。
标题文本主要放置版本需要传递的重要信息，说明性文本是辅助传递标题文本的含义。
对比广泛的存在于我们的生活中，对比的形式也是多种多样的，例如身高的高矮对比，体重的胖瘦对比，速度的快慢对比等等。在设计领域内，对比是最常出现的形式。对于信息来说，适当的对比可以让信息层级更加清晰明了，同一层级的信息更加丰富。对于画面整体来说，恰当的对比可以很好的制造出焦点(画面主体)当我们需要突出某一个元素的时候，其他的元素相应的就要做出对比关系，才能保证主体的突出。
字号对比是最快可以提现内容层级关系的一个设计点，一个版面里面不会有太多的文字层级，一般保持在3-5个层级，大部分的软件都会自己自带的推荐字号，为什么最小的字号是6号，因为印刷里是可视的极限。
常见的字号比例有1:1.5,1:1.618,1:1.732,1:2等等。这些比例在正常使用能很快可以做出层级关系且不会有特别大的问题。例如1:1.618是黄金比例，也是很多植物生长的规律，符合人正常的审美感受。
行距比例如果没设置合适，对阅读会造成影响，很容易造成眼睛是视觉疲劳，看来不舒服且文本不容易阅读。
当行距设置到合适的时候， 我们阅读起来会比较舒服，也会提高阅读效率。
行距的设定也可以套用固定的算法：字号*倍率＝行距。
我们在日常的设计工作中，当行距调整到比较合适的大小的时候，版面会具备层次感 ，但超过一定限度也不太好。那行距的调整具体有哪些用途呢，1.平衡版面，2.阅读效率
例如现在整个版面看起来比较轻盈，那么我们可以选择一个比较大的行距，因为中间的空比较多，所以看起来并没有那么重。例如我们现在的版面非常重，我们需要平衡他，那我们的行距就可以给近一点，让文本块在视觉上更重，这就是平衡的作用。
行距的设定大小会影响我们阅读的效率，例如行距比例小的，一般用在标题文本，因为标题的文本一般需要我们快速阅读并了解清楚。
字距大设定也对人的阅读也会有影响，字据过大的时候像树懒说话一样慢，字据小的时候感觉说话比较快。
当字距是-800时候的感受，感觉想动漫里的树懒一样，说起话来慢吞吞的。
当字距是--100时候的感受，感觉像和人在吵架一样，说话的语速比较急切。
在一般的平面设计中字据设定为正负40-70之间去选择，但是在UI设计中，字距一般为0.
同时字距也会受到中宫的影响，在同字号的情况下，微软雅黑会比其他字号大一号，中宫越大，字面也会越大，因为笔画外扩，中宫大的字体，字面大，默认间距小
中宫大的字体，字面大，默认间距小，他的字距可以给大点，中宫小的字体，字面小，默认间距大，他的字距可以给小点，
例如平方字体，正常0间距做内文会比较舒服，但是作为标题，调了之后会读起来比较连贯。
无论是西文还是汉字，他的形状都会不一样，有圆形的，正方形的，三角形的等等，不同的形状，负空间是不一样的，不同的字号是需要微调字距的，我们需要软件视觉来调整。
在AI中有个功能是基于视觉对齐，我们开启便可以解决这个问题。
分栏的宽度，决定了一行的长度和字数，当栏宽太长的时候，我们阅读可以会比较吃力，总感觉一眼看不到头。
一行多少字合适呢？一般的是20-30字之间，极限是15-30之间比较合适，一行字太少和太长都会让人很累，，这也是为什么有的书为啥读不下去的原因。
这也是为什么很多娱乐消遣方便的书一页的字很多，也是为为了提升阅读的兴趣。
文字设计的成功与否，不仅在于字体自身的书写，也在于其运用的排列组合是否得当，文字层级之间的关系，适用规则，栏距＞行距＞字距。
上面的舒服，因为粗细对比比较平衡，下面面的对比过度，什么时候下可以做强对比呢？做了字号对比，就不要做过大的字重对比，
在现在的板式设计中，有一个被忽略的知识点，就是标点符号。标点符号在当今社会不仅仅是用来断句，也是可以用来传递情感，例如下图，同一句话因为加了不同的标段符号，所传达的意思就完全不一样了。
所以标点符号的运用与文字组的编排在板式设计中同样的重要，例如在聊天的时候，我们随意的时候的问号在正式排版中，“！”和“？”的叠用不能超过3个。
你一句话表达惊讶和疑问的时候，我们应该将问号放在前面感叹号放在后面。
例如有书名号的文本段是不在需要用顿号去隔开的，如果当书名号后面有括号则是需要用标点符号去把他们分割开来的。
当然还有就是逗号和不能在一段的前面等等，这些都只是给各位小伙伴一些拓展知识，有兴趣的小伙伴如果想自己的板式更加规范可以自己去查阅相关资料。
梳理信息层级有哪些作用呢？我们在自然界中会发现很多与阶级有关的现场，例如狼群里，一般都会有头狼，也叫狼王，主要是统领狼群的行动及群体意识，在企业中，老板作为一个公司的核心人物，一般正常的普通员工去离职，不会影响公司的正常运作，但是如果涉及到公司的老板不知下落或者企业的核心管理层离职，会对公司的股价和正常的业务流程造成很大的干扰。
在我们日常设计中编排文字组也是一样的，我们首先需要确定接到的需求哪些是重要且关键的信息，哪些是次要信息。当它的重要层级越高，他在版面中所扮演传递信息的角色就越重要，我们接下来便是通过设计手法，例如通过字距，笔画粗细，颜色，以及字体等等来做出层级的区分。
那我我们一起来看看实际的案例吧！
梳理信息层级有哪些作用呢？我们在自然界中会发现很多与阶级有关的现场，例如狼群里，一般都会有头狼，也叫狼王，主要是统领狼群的行动及群体意识，在公司中，老板
1.首先是它会便于传递信息的中心思想，有助于用户快速理解，所以一般大标题文字很对都会做效果，有助于提升视觉的焦点，2.信息层级分明，主次有序的在版面中传递信息，3.降低视觉噪音：当版面中的文字信息案例主次有序的排列后，版面看起来比较和谐，所有的元素感觉是本应该就在那里的。
如果信息层级没有梳理过的版面，则会阅读起来非常的吃力却效率低下。
关于文字编排节奏感，很多人应该好奇了节奏不是音乐的范畴吗？怎么文字编排也说有节奏吗了？
其实节奏感随着地球开始有生命开始便存在了，因为太阳升起到落下是有着自己每天固定的节奏的，太阳升起人开始劳作，看着周围的动物和植物都一天天有变化，感受着自己由青涩稚嫩到迟暮之年；这些有规则的事物形成的固有的节奏。
在文字编排中也可以感受到这样的节奏，例如，字体是直线还是曲线，垂直还是水平，倾斜还是正立，紧凑还是宽松，对称还是不对称……这些都体现着文字的节奏。段与段之间的留白多少，字间距的大小都是有规律可以寻找的，如果文字组合被有规律的设计、排版，那在设计稿中本身就具有了一种节奏感的吸引力。没有节奏就不会有生命，也不会有任何创造。
好听的因为是因为音乐的节奏会有起有伏，有前奏有副歌有高潮部分，这样的音乐才不会让人觉得平淡，我们转换到文字组编排也是一样的道理，当我们把一些没有节奏感的书籍拿出来看是会觉得很困的。
如果我们加以设计的手法，把文字组合好好的排版一下，这是可以提升我们对内容的阅读兴趣的。例如我们阅读的杂志和一些资讯类的APP，他们对文字和图片的排版就会很下心思。
那我们怎么打造自己设计中的节奏感呢？那接下来我们聊聊怎么通过阅读视线心理去引导用户。首先是基础的视觉逻辑，让用户渐入佳境，通过常规的的阅读习惯，其实是根据大小、色彩、线的指向去引导用户的视线节奏，其次是视线引导，根据用户的常用逻辑打造版面中的节奏感。
我们平时在看版面的时候的视线观看逻辑是怎么确定的呢？1.根据日常的书写逻辑：我们看图习惯和我们日常的书写习惯是密不可分的，一般是从左至右，从上到下，所以我们很少会看到从右往左的排版和从下往上的排版，因为这样的不符合人的逻辑，
因为每个人都心理感受都不一样，所以当视觉引导不一样的时候，传递的感受也是不一样的，文字组合的目的是为了增强其视觉传达功能，赋予审美情感，诱导人们有兴趣地进行阅读。因此，在组合方式上就需要顺应人们的心理感受。人们的一般阅读顺序是:水平方向上，视线一般是从左向右流动；垂直方向上，视线一般从上向下流动；大于45°斜度时，视线从上而下流动；小于45°时，视线从下向上流动。
板式的阅读顺序有两种：从左到右和从右到左。这是人们平时惯性的限制，就好像写文章一样，一旦决定了从左到右写，就不会更改，板式也是如此，一旦决定了板式的阅读顺序，许多元素都会随之被限制。
横排文字
正常我们去阅读横排文字就是先从左到右，从上到下的规律去阅读。
竖排文字
竖排文字的阅读顺序是从上到下，整体在从右上至左下。我们无论是横排版还是竖排版，行距都是要大于字距的。
版式设计的核心就是吸引人的视线。当我们在观看某些东西时，大部分的人都有自己习以为常的观看习惯。人们往往在一瞬间就会判断出这是什么？这一现象导致的结果是人们会想起与所看到的东西相近的信息，并判断画面中信息的价值，我们将这种心理倾向称之为视觉心理。视线的引导是建立在视线的移动之上的，在引导视线前，我们需要先建立焦点。
视觉聚焦是在文字组编排中先建立视觉的突破口，然后就再去引导其他的内容。设计师，有一个重要的瓶颈就是，无法在版面中快速的传达主题的中心思想，明明什么信息都有，就是让人抓不住重点。如何一秒吸引别人的注意力，快速get要表达的点？那就是需要在版面中埋下引导别人实现的点。
引导方式可以根据版面现有的内容做大小层次对比，颜色对比，空间对比及元素具有的特有指向性。
人们在日常生活中，通常会先注意到大的东西，在有较大的元素在版面中，我们的视线往往会向大的元素是聚集，从大到小，这样一步一步的去看，在版面设计运用这样的小技巧，我们阅读起来相对来说比较顺畅。特别是当两件物体颜色或材质相同的时候，视线往往会集中在大的物体上。根据这一原理，应该尽量放大希望吸引读者注意的东西。
通过有序的色彩的引导视线是版式设计中不可或缺的主要元素，同时也频繁应用于视觉引导中。色彩的心理效果在视觉引导中的运用就是：人的目光首先会注意众多色彩中不同的那一个。例如下图中，当色彩是蓝色的时候，是没有焦点的，当出现别等颜色是特别吸引人的目光的。
然后在加上大小的对比之后，吸引我们眼球的肯定是下面这个大圆形。
如果在下面这个大圆形去改变颜色，这个便会更加大吸引人
其次是亮明度高的颜色比明度低的更吸引人的目光。
暖色调比冷色调会更加吸引人
我们正常的浏览顺序是从左至右，从上至下，那当我们怎么打破这个顺序呢？首先是暖色＞冷色，明度高＞明度低的，元素大的＞元素小的，那下图我们浏览顺序应该是先看红色，在上面开始看，其次是右边和下方。
引导是一种视觉的语言。一幅好的设计作品，用户的视线一定是被控制在主体和兴趣点上，而不是被其他与主题无关的杂物所吸引，只要用好视线的引导，才可以传递我们想传递的。
当版面中出现箭头或者人脸等相关指向性的图片或者元素出现，是因为古希腊毕达哥拉斯学派和柏拉图认为眼睛在捕捉物体时，视线、目光和力量会以物体为目标，从眼睛向物体方向传送，把这一想法用设计原理来表示时。这时候的带有指向性的图片或者元素，便是视觉的切入点。
线作为板式中的引导，也是非常常用的，它既可以作为引导视线的切入点，也可以填补画面中的空白点。
线除了是直线，还可以是曲线，文字组成的线或者负空间形成的线，都是具有引导视线的作用。
我们从小在学校学习了数字的大小顺序，在在考试时，我们会顺着考生号找座位，坐车时顺着车票找座位。我们生活中还有很多地方会应用到编号。所以我们的目光会随编号移动，是因为我们一直就有这样的习惯。如果看到1，就自然会找2，看到A会去寻找B，视线就会这样一直移动下去。
设计离不开构图，构图通俗地讲：就是为了表现画面的主题思想，而对画面上的人或物及其陪体、环境作出恰当的、合理的、舒适的安排，并运用艺术的技巧、技术手段强化或削弱画面上某些部分，最终达到使主题形象突出，主体和陪体之间的布局多样统一，画面疏密有致，以及结构均衡的艺术效果，使主题思想得到充分、完美的表现。
当我们把文字组编排好了，可以通过构成形式将他们串联起来，这才是好的排版，能快速想到版面的效果。
居中构图是最常见的构图，指的是将画面的主要元素放置在版面的中轴线上，目的是快速吸引眼球，占据视觉焦点，突出主体。中心构图的版式简洁、利落，给人以雅致的视觉感受。在突出主体的同时又能赋予画面稳定感，并使整体画面具有一定的冲击力，需要表现规整稳定、醒目大方的版面时，可以使用居中构图。其次对称构图是居中的一种特例。
对称的形态在视觉上有自然、安定、均匀、协调、整齐、典雅、庄重、完美的朴素美感，符合人眼的视觉习惯。平面构图中的对称，可分为点对称和轴对称。在平面构图中应用对称法则要避免由于过分的绝对对称而产生单调、呆板的感觉。有时，在整体对称的格局中加入一些不对称的因素，反而能增加构图的生动性和美感，避免了单调和呆板。能够突出主体，聚焦视线，当制作的图片没有太多文字，并且展示主体很明确的情况下，可以使用对称构图，在电影海报中也是比较常见的。
斜线式构图又称倾斜构图，是将文字或者主体物以倾斜的方式放置在版面当中。倾斜的角度产生势能，给人以引导作用。优化视觉层级，清晰的传递信息。让比较呆板的画面具有活力和生机，当制作的版面需要冲击、不稳定效果时，可以使用倾斜式构图，需要冲击感和不稳定感时可以尝试，也可以做透视，让他有近大远小的空间感。
曲线式构图指的是版面中重要元素呈曲线排布，其他元素填充剩余空间，曲线具有灵活的属性。其中“S”形状从前景向中景和后景延申，画面构成纵深方向的空间关系的视觉感，所以曲线构图的版面常常显得充实、热闹、生动、空间感。具有曲线的优美而富有活力和韵味，需要有力的表现场景的空间感和深度时，可以选择S形构图，例如瑜伽海报。
要表现画面的空间感和纵深感也可以用S型购物，这也是S型构图的特性，让画面更有空间感。
压角式构图适用于标题字数较少的版式设计，标题作为绝对重要的元素放置四角，一眼就能被看到。要做好压住四角的版式设计得进行网格构架，控制好版面之间的比例。这种构图形式使得画面更加稳定，突出中心主体。
散点式构图是指主体数量较多，散落在画面当中的构图方法。在应用散点式构图时应防止散乱，宜用隐性结构线或结构形将各个“点暗连起来，相互呼应形成联系。”适用于标题文字稍多的平面版式设计。文字排布时，拉开字的间距，在版式上化作为元素。标题文字的纵向距离要大于横向距离，否则容易误导阅读顺序。当文字信息比较多的时候，可以选择散点构图。
三分法是一条法则，同时也不是一条规则。 这个说法很拗口，我们来理解一下。 从本质上讲，它就是我们的眼睛自然感知图像的方式，这些图像被限制在一个边界之内（例如画框）。 这些框架，都有一个固定的长度和宽度; 将这两个属性分别分成三个相等的部分，这会包含两条水平和垂直穿过框架的等距线，形成四个线相交的点，并创建九个相等大小的框架，如下图的九宫格。
而当版面的主要元素分布在三分线或点上，多数人会感觉这个画面会比较和谐舒服，这接近是一种天性和本能了。当然，你还可以举例说很多不是三分构图的例子来反驳我，但这不重要，只要你要知道大部分遵循三分法构图的画面看着都是比较舒服的事实就行了。
古时候的文人墨客的门槛是“知句逗”，我个人觉得设计要想入行设计的门槛便是最基本的文字组的编排，
我们的感觉，即我们的视觉和我们的美感，优于几何结构，当我们在处理黑白对比的平衡时，我们必须诉诸感，
在文字组的编排中，其中包含的技艺、功能和形式设计是绝对不能分开的。当我们作为设计师，做好每一处设计的细节，也是对观看版面用户最基本的尊重吧！
文章来源：优设 作者：Endings
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
娜•库娜是西班牙马德里的一位自由职业插画师和设计师以及欧洲设计学院的信息图表课程教师。
安娜•库娜是西班牙马德里的一位自由职业插画师和设计师以及欧洲设计学院的信息图表课程教师。她参与过多个插画项目，为音乐家、书籍封面、杂志内容、纺织产品以及漫画制作插画，同时还合作过Monocle 杂志、《快公司》、PDN、Netflix、微软、福克斯、Snapchat 等品牌。
FILTROS MADRID
▲BUSCADOR VIAJES
▲BUSCADOR VIAJES
把握信息表达的张力、排版能力、插画创作以及整体设计感，对信息图表设计师来说各有各的挑战性，也让信息图表设计逐渐发展成为现代平面设计中的一大重要门类。
文章来源：站酷 作者：BranD杂志
安娜•库娜
信息图表：框架、分层、排版、插画
#信息图表由文字、数据以及图像组成。
Q1
Q2
Q3
Q4
Q5
Q6
2016 年玩追波的时候，有幸加入了 FreedomUnion 团队，当时团队内的小D（Dea_n）的界面渐变风很受欢迎，他使用的颜色干净、舒服、有感染力，很快形成了自己特有的设计风格。
我被他的配色深深吸引了，特别想研究他的配色，就尝试把他的作品在 PS 中打开，尝试吸色，找找他经常使用的配色范围。为什么他配出来的颜色就很吸引人，长时间看眼睛也不会太累？下面先欣赏一下小D（Dea_n）的设计作品。
作品已经过了三年了，如果是一般的配色作品应该看上去会有些过时，但是小D（Dea_n）的作品看上去并没有，还是有不少作品的配色现在看上去也是很前卫的。一起来看看我对小D（Dea_n）的大部分作品的吸色情况吧。
小D（Dea_n）的用色着实很大胆，很多都是贴边用色。我上大学的时候，老师曾经说过尽量少用贴边的颜色设计，包括灰色也可以使用带有颜色倾向的高级灰。这下终于明白了为什么小D（Dea_n）的配色这么亮眼。
当然我也有自己的小发现，我发现每个的作品主配色的 CMYK 值总会有两种色值为 0%，比如C：0%、M：91%、Y：95%、K：0%。
难道只是偶然？当时我也请教过小D（Dea_n）是否是刻意的，得到的答案是并没有。然后小D（Dea_n）靠自己卓越的配色能力进入小米 RIGO 设计团队。
当小米 miui9 系统官网海报出来的时候，我把作品拿到 PS 一吸色，结果告诉我小D 一定参与了这个作品的配色设计。那为什么只有黄色的 CMYK 的色值是有 3 种颜色混合而成的。
难道仅靠着一点吸色就可以肯定 CMYK 配色方法的存在？CMYK 配色方法是不是只存在 UI 界面设计中？CMYK 配色方法可不可以增加它的扩展性？CMYK 配色方法可以作为一种配色方法帮助设计师完成色彩搭配的工作吗？带着这些疑问我继续研究配色。
我们来看一下「子弹短信」的应用图标，它的用色基本符合之前说的 CMYK 配色方法，当然是不包含子弹上的深色调。渐渐地我发现 CMYK 配色方法的路子越来越宽了。
Asher 是追波绘画写实图标的大神，他的写实作品配色饱和度高，光影通透到位，需要很强的手绘功底。在他的设计作品中除去暗色调和深色调的部分，其他配色基本都使用了 CMYK 配色的技巧。
我们都知道 iOS 系统和 Android 系统，在他们各自的系统规范中对配色也有相应的规范。我们提取两大系统规范中的配色进行吸色分析。
一顿猛吸之后，发现大厂系统规范的用色也基本符合 CMYK 配色方法的标准。
前段时间 IBM 重新定义了他们的设计语言，在产品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。
近期很多互联网公司进行了品牌改版，深亮色调到浅亮色调慢慢成为一种趋势。
新版的 Facebook LOGO 从深蓝色变为亮蓝色，字体则继续保持原样。其中 CMY 值进行适当减少。除此之外，图标部分也由原来的圆角正方形变为圆形，图标中的「f」从偏右的位置移到圆形的中间位置。
全球旅行者喜爱的民宿预订平台 Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。
微信 7.0 版本使用了经过调整的全新图标。图标除了原来绿色渐变的背板变浅外，两个标志性的对话气泡与背景板的比例也做了相应的调整。色彩的 CY 值减少了。调整后的新版图标除了空间感和符号感也更强外，整体变得「更轻」了。
在网易云音乐 6.0 版本中，对品牌 LOGO 再次进行了调整。新版网易云音乐图标最明显的变化为红色的主色调，其次为「留声机」和「音符」组合而成的图形部分。
红色较之前变得更加明亮，同时图标红色背景由之前的纯色改为轻微的红色渐变填充。新的红色着重考虑了用户长时间使用屏幕造成的视觉疲劳，采用比较「轻」的色彩可有效降低这种问题。其中颜色 CMY 三种色值都有减少。图形部分，新版图形缩小了中间交叉部分的面积，顶部向右弯曲的弧形变大。整体效果较之前更加清晰，特别是在更小的应用尺寸中，其展示的效果明显要比之前的好。
看到上面的描述是不是特别想知道当 CMYK 中的两个色值同时为 0 时，不同颜色的色域范围？带着这样的想法，把红橙黄绿青蓝紫中每类选一种颜色进行区域研究。打开 PS，在拾色器中截取不同颜色的色域范围如下：
上图白色区域就是在红色 C 值为 0、K值为 0 时的色域范围，范围还是很小的。
黄色的 CMYK 色域很奇怪，在色相 38-58 度的黄色纯度最高时，CMY 都有色值。也就是 PS 里面最纯的黄色也是由 CMY 复色调和而成的。这也是为什么之前黄色使用时，CMYK 色值是由三种颜色混合而成的。
上图白色区域就是在绿色 M 值为 0、K 值为 0 时的色域范围，范围开始慢慢变大，意味着绿色高饱和度的可使用颜色越来越多。
上图白色区域就是在绿色 M 值为 0、K 值为 0 时的色域范围，范围也开始慢慢变大，大体范围和绿色相当。
上图白色区域就是在蓝色 Y 值为 0、K 值为 0 时的色域范围，范围应该很大了。
上图白色区域就是在紫色 Y 值为 0、K 值为 0 时的色域范围，范围和蓝色的色域范围相当。
上图白色区域就是在洋红色 Y 值为 0、K 值为 0 时的色域范围，范围和蓝色、紫色的色域范围相当。
1. CIE
从理论上讲，可见光分布的色彩域就是 CIE 所表示的色域。在颜色感知的研究中，CIE 1931 XYZ 色彩空间（也叫做CIE 1931色彩空间）是其中一个最先采用数学方式来定义的色彩空间。从 CIE 图中能看出冷色的区域远远大于暖色的区域。其中黄色和红色的色域范围相对较少，完全符合 PS 拾色器里面的色域范围。
2. RGB
RGB 是计算机荧光屏显示颜色的色彩方式，它们是由 R、G、B 三种发光质通过加光混合产生的。RGB 色彩模式是一种加色模式，将红光、绿光和蓝光以不同的比例相加可以合成各种各样的色光。R、G、B 三种颜色各能产生 2 的 8 次幂，即 256 级不同等级亮度的颜色。256*256*256 即 16777216种颜色。RGB 色彩模式主要用在电脑显示器和电视上。RGB 色彩模式是绘图软件最常用的一种颜色模式。
3. CMYK
CMYK 由C（青）、M（品红）、Y（黄）、K（黑）四色高饱和度的油墨以不同角度的网屏叠印形成复杂的彩色图片。CMYK 色彩模式是一种颜料模式，它利用色料三原色混色原理，加上黑色油墨，形成各种各样的色彩。
这种模式属于相减混色模式，广泛运用于绘画和印刷领域。CMYK 的色域范围比 RGB 的色域范围要小，某些色彩无法用 CMYK 油墨印刷出来。当这些不能印刷出来的颜色出现时，在 PS 的「拾色器」对话框上会显示一个带感叹号的三角形警告标志，表示这些颜色超出 CMYK 的色域。即使设计了比较鲜艳的颜色，如果超出了 CMYK 印刷颜色的色域，计算机就会用一个接近它的较灰暗的颜色去顶替它。可见大部分 CMYK 印刷颜色的色域小于 RGB 屏幕颜色的色域。
我们来仔细研究下 CIE 色域范围，CMYK 当中的黄色色域值有一小段超过了 RGM 的色域值。这就说明黄色的更饱和的 CMYK 的原色和间色可能在 RGB 的范围之外。
其他的我们还有一个方法去验证。就是在 PS 里面新建颜色模式为 CMYK 的文件，打开拾色器界面，把颜色调到右上角改变色相值的 0-360度 的范围。色相在 38-58 度的黄色区域对话框上不会显示带感叹号的三角形警告标志，表示黄色区域的 CMYK 色域值是超过 RGB 的色域值。这就是为什么 iOS 系统规范中的黄色色值必须是三种颜色混合而成的。这时候特殊的颜色就需要特殊处理。
CMYK 配色法就是两种颜色的色值为 0%，但是黄色因为色域问题是由三色组成的（c值尽量小于10）。
色域集中在纯色系的范围，浊（灰）色系和暗色系除外。
界面的主色（纯色系为主）、图标设计、品牌色（纯色系为主）都可以使用 CMYK 配色法。
CMYK 配色法目前多适用于互联网产品，虽说在创意上要敢于创新，但在实际的工作中还是需要理性地根据公司品牌和产品定位，合理地进行色彩搭配。目前此方法没有更多的理论依据支撑，如有疑问希望多多交流。
文章来源：优设网 作者：水手哥
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大家好，今天给大家带来的是配色干货系列之第三期！！超级干货！！
前两期地址传送门：
前面两期，主要分享审美的培养与提升、配色的技巧与习惯。本篇更为实在，主要分析有哪些经典的万金油配色组合，满足日常工作使用。
看完这篇文章，相信你对色彩的掌握，能更深一步~~干货建议提前收藏！喜欢记得给咱们公众号添加星标喔~~
1）经典搭配-黄配黑
色板 颜色组合
Yellow & Black
黄配黑的色系非常经典耐看，普适度也很广。我在公众号里写的一些文章，也经常采用这套配色。
这套黄与黑的组合很适合一些生活、社区、人文、情感等场景进行使用，情绪温和。如果你的设计，会被频繁的在这些场景里进行使用，那么不妨使用一下这套黄黑配色试试看。
比如以下这些案例：
这里也给出我经常使用的两组黄黑色板，一组更为活泼鲜艳，更具娱乐化。一组更为内敛，充满文化气息。
推荐组合色板①：
推荐组合色板②：
2）科技搭配-蓝黑白
色板 颜色组合
Blue & Black
这套色彩就不多说了，蓝色可以说是我非常喜欢的颜色之一了。从咱们公众号的logo，还有日常发文的封面，相信大家就能感受到。
蓝黑白搭配，可以说颜色是百看不腻，并且蓝色色相偏冷，没那么多情绪倾向，所以更能够让人心平气和的阅读信息，提升效率。因此也经常被用到科技、数据、社交、工具等应用场景。
比如以下几组案例：
关于蓝黑白，我也给大家推荐两组我很喜欢的色号组合。一组更为明亮，显得年轻活泼些，而另外一组则更加深沉商务，更为内敛。
推荐组合色板③：
推荐组合色板④：
3）CP组合-红蓝配
色板 颜色组合
Red & Blue
这套颜色组合，在近几年可以说是非常流行了。颜色比较浅的，有经典的马卡龙色组合，被广泛运用到年轻社交等工具场景。而颜色重点的，直播娱乐等秀场平台，也都大量可见其身影。
红蓝搭配，颜色的相撞导致色彩充满了热情与朝气，社交娱乐化产品的场景，非常适合这套色彩组合。
比如下面这些案例：
这里也给大家分享两套红蓝搭配的色板，一套略显温柔，另外一套则热情如火。
推荐组合色板⑤：
推荐组合色板⑥：
4）经典国潮-赤金组合
色板 颜色组合
Yellow & Black
这几年国潮风格也越来越受到大众所喜爱，而在国潮色彩的搭配中，赤色与金色的搭配。一方面红色中国味特色浓厚，而搭配上高档的金色，瞬间浓厚的精致国民画风，就出来了。
比如每年的集五福，就是非常经典的赤金组合，精致的同时，还非常接地气儿。
关于赤金，我也从潘通色里挑选出了一组很经典高档的色彩组合，色板色号也分享给大家。
推荐组合色板⑦：
推荐组合色板⑧：
5）尊显高贵-黑金色
色板 颜色组合
Yellow & Black
黑金组合相比其它颜色更显高贵，在很多知名的APP里面，也都是能看得到，比如淘宝的88vip，京东金融的小金库。这套色彩组合往往代表着商务、尊贵，高级，既内敛又隐蔽，通常被用到各类会员、金融等尊贵体系中。
比如以下这些案例
关于黑金里面的金色，也分为两种，一种颜色更为纯金，还有种偏向于玫瑰金，玫瑰金的色彩相对要更温和一些，没那么冰冷。这两套色板，我都分享给大家啦~~
推荐组合色板⑨：
推荐组合色板⑩：
6）其它色彩组合
色板 颜色组合资源下载
Yellow & Black
除了我上面分享的这五套经典配色，还有很多其它的色彩组合，也都非常优秀好看，比如上次分享的这些：
这段时间的积累收集，又更新了下面这些新色板。
还有很多，就不一一展示了。方便大家收藏，我把这些色彩组合的图片+色板文件，都进行了打包，方便大家直接借鉴这些色彩。
文章来源：UI中国 作者：UX小学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
色彩是影响用户最简单和最重要的一个因素。研究表明，人们只需 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com