元旦过后，新的一波工作又要开始了，我在开始准备新一轮汇报材料的时候突然想到了一个问题，不知道铁子们在往年参加设计评审的时候，有没有总被老板 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活动的玩法和创意。接下来让我拭目以待吧。
专注设计理论书籍，大多偏底层原理的知识，特意整理过往的笔记与设计心得分享一下。对设计的学习，要知其然，也要知其所以然。
以上都是近年来的几本阅读笔记和心得总结，一直在慢慢整理中。特意分享给各位作为参考交流，本文还有诸多不足，望各位批评指证。
此篇为构图与形状的第二节，开始深入原理的探讨，第三节是关于构图与形状与人类知觉关联的深层内容。
理论不同于软件和技法，短时间的学习就能看到进步，不能现学现卖。它是一种所谓的“种树”过程，靠的是日积月累，是一种学习、消化、迭代的过程，一种由量变到质变的过程。需要坚持不懈、持之以恒。
仅作免费交流与启发，请勿商用! 谢谢！
参考书籍：
《绘图构图学》常锐伦
《图像语言的私密》Molly.Bang
《摄影构图学》本.克莱门茨，大卫.罗森菲尔德
《图解艺术》郭书宣
《迷情黑白》Marcos Mateu-Mestre
《设计元素.造型与空间》丹尼斯.M.普哈拉
《艺术与视知觉》鲁道夫.阿恩海姆
文章来源：站酷网
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先看看我们的素材：
当拿到一张原始素材的时候！
怎么办？该怎么入手？怎么找方向？
来吧！
先来看看成稿：
最终设计成果还可以，那么是通过怎样的设计手法达到这样的效果呢？
下面我就来分享一下我的作图思路；
1.需求的梳理和信息收集：
理解核心需求，为设计方向做好前期准备
Slogan：传武（作品名） 副文案：幽府之力，逆转生死
我们漫画类的作品众多，内容风格繁杂，所以拿到需求之后,首先就是要对作品进行“调查”。通过对漫画作品的阅读，理解内容、故事、绘画风格来定性设计的方向。这样才能在设计过程中准确把握住作品调性，才能设计出最贴合作品风格内容的banner，才能把我们作品精髓的内容传递给用户。
比如上面这部作品，SLOGAN“传武”是我们要着重设计展示的。而副标题“幽府之力，逆转生死”也很重要，往往传达出了作品的卖点和调性。
再看看我们拿到的素材，一张单人的简单素材，看起来很单调，似乎没有可切入的地方。这个时候就体现出为什么要先对作品进行“调查”的重要性了！
2. 确定设计方向：
明确设计方向，精准展现作品调性
通过阅读，我们了解到这部作品是一部热血，古风，玄幻作品，还有大致的故事内容，再结合我们的副标题“幽府之力，逆转生死”。
脑子里就已经开始有画面了，“幽府”大概表达了一个场景，而“力量”和“逆转生死”又传达出了一种气势磅礴的场面。这就为我们设计的方向奠定了一个准确的方向。
首先就把我们的素材和文案拉进画框里，进行一个大致的排版找找感觉。第一个左右排版就太常规了，在场面和气势上有些弱。第二个添加了漫画框，想切入一些故事内容一起展示。但又有一些强调漫画框的存在了，磅礴的场景没有展示出来。但注意右边的部分，把主标题排在人物的两边似乎是一个不错的选择！我们就从这里入手。
重新尝试了一下，发现这样布局好像就是我们想要的感觉哈！那既然确定了框架，我们接下来就按照这个方向继续强化出“气势”“力量”的感觉。
我们以人物为中心，想象画面里有力量从人物背后向外“迸发”所以我们的字体可以设计得有一些趋势在里边，也是以一个圆弧为中心向外生长。以光从人物背面照射出来大逆光的视觉，营造一种“力量”迸发的感觉。
3. 颜色的选择：
跟随之前确定的设计方向，提炼选色搭配。
我的方法一般是先从素材本身出发，根据想要达成的视觉风格来延伸出想要的配色。这样得到的颜色更整体，人物素材能更好的融入背景氛围中，也方便后期调整。观察的素材，发现他的颜色都比较灰，缺乏对比，就会显得很“平”，难以营造出我们想要的感觉。所以从人物素材本身的颜色出发，提取同类色和提高饱和度。结合考虑到有利于运营推广的视觉需要“吸睛”。得出了后面一组对比更强烈的颜色。
4. 有主次地进行深入刻画：
画面中最主要的肯定是我们的SLOGAN和人物角色，是我们要重点刻画的对象。剩下的副标题、背景氛围次之。不仅是要在排版上做区分，在视觉感受上也要做出差异化。这样才能有远近虚实的感觉，增加空间感。
我们希望画面具有一定的质感，增加其冲击力。所以我们在刻画背景的时候可以选择一些漫画里比较好的场景，或扉页背景素材来做底图。再叠加上一些纹理材质，再一层一层地来给背景打光，用“叠加”“柔光”“滤色”等图层属性来慢慢提高亮度,最终达到我们想要的效果。
小技巧1：相同光源的照射，传达到不同的物体上时，它的视觉表现时不同的。并不是光源时什么颜色，照射的地方就会是什么颜色。
我们来对比一下两种颜色的实际效果，可以说是很直观了！
小技巧2：为了使素材更完美地融入到背景中，我们可以后期人为地给素材增加一圈高光/轮廓光。这样使画面更融洽的同时，也能让我们的人物变得立体起来！。
再来对比下没加轮廓光的感觉：
真的是少了些味道和细节哈哈，其实在很多时候我们都可以对我们的素材进行二次加工让其提升一定的品质，配合画面以达到更好的视觉效果。
5. SLOGAN的设计：
主文案在我们草图的基础上，结合整体画面的趋势进行细化。（增加毛笔笔触，和优化笔画）。
这里主要分了三层进行处理颜色层(文字层)：主要给一个基础颜色；
材质层：因为这两个字的占比比较大，所以可以增加一些纹理细节让画面更丰富耐看；
厚度层：让后面的光源，在我们的字上形成一圈高光，可以突出我们的文字。
增加一些光晕效果，再放上做好的SLOGAN看看效果，好像还不错。
有些同学可能会疑惑这里为什么字体要做一个厚度层，我们也上一下对比图先看下效果：
可以看少了一些些质感和重量，在轻量的风格里ok，但是在我们当前的画面里就差了些感觉，所以才做了厚度层来强调光线照射过来的视觉增强画面冲击力。
之后主要是做一些符合我们画面氛围的漂浮元素，丰富画面。有一定手绘功底的话就再好不过了！
完成，到这一步差不多达成了我们想要实现的效果，“气势”和“力量”的感觉在这么“朴实无华”的素材身上也基本表现到位了。还是比较满意的，差不多可以提审交稿了！
最后在观察观察整体的画面，审视一遍,查缺补漏。
发现我们的画面好像有些燥啊，红色和黄色饱和略微有些高。整体的感觉也不够清晰。最后再做一个调整吧。
降低一些红色和黄色饱和度，在暗部加一些紫色(主文案暗的部分和画面四周的暗部)。增加冷暖对比就好多了。
小技巧3：盖印整个图层——在滤镜里面找到其他——高反差保留，数值根据画面来调。
然后就得到这么一个图层
是不是很神奇？别慌，把这个图层的属性改成线性光看看,画面清晰了很多，也变得更有质感了！
最后看下过程演变图：
总结
1）梳理需求内容：通过阅读漫画作品，深入了解内容并收集整理信息；
2）提炼关键字延展：尝试多种可行方案，最终确定设计方向；
3）slogan的设计：一定要符合画面和作品调性，达到与画面相映成辉的效果；
4）细节把控：完成之后再回过头来审视整体画面，查漏补缺力求做到最好！
文章来源：UI中国 作者：腾讯动漫TCD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
