当今是色彩的世界，物体颜色的不同，带给我们的情绪也截然不同。想要掌握颜色，首先就要研究颜色的本质。
颜色分为光学三原色和颜料三原色。
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一觉醒来，2020 年潘通年度色就这么发布了。
这款被命名为为「经典蓝」（Classic Blue）的色彩沉稳耐看，隽永优雅，按照潘通官方的说法，「经典蓝」仿佛暮色四合时的天空，宁神静心，让人驻足。「经典蓝」是一种稳固可靠的色彩，给人确信感，抚慰着每一个期待稳定者的心灵。
为什么会选择这样一种蓝色，潘通色彩研究所的执行董事 Leatrice Eiseman 在潘通官网上，予以详细的解释。
「我们生活在一个亟需信念和信任的时代。潘通 19-4052 经典蓝 ，这种色彩正是自信和恒久的外化体现，这种坚实可靠的蓝色调，更能与人产生深层的共鸣，令人心安。一望无际的蓝色能够唤起人类对于广袤无垠夜空的无限遐想，经典蓝鼓励着我们透过显而易见的事实，拓展思维，放飞想象。
经典蓝敦促着我们更加深入地思考，开阔视野，进行更加深入的交流。」
——Leatrice Eiseman 潘通色彩研究所执行董事
从色彩心理学的角度上来看，蓝色色相本身有着信任、信念的含义，也是的色相。在此之前，潘通曾经多次选择蓝色作为年度色， 2000 年的时候选择天蓝色（Cerulean），在 2005 年的时候则选择了蓝绿色（Blue Turquoise），2008 年的年度色叫鸢尾蓝（Blue Iris），2016 年的年度色则是静谧蓝（Serenity）。
相比于这4种蓝色，「经典蓝」更为沉静稳重，没有一点攻击性，也不显得沉重，轻松而易于互动。
「经典蓝」无疑是一个略显保守，但是非常贴合当下语境的色彩。它充满了确信感，让人觉得安全，屏蔽了焦虑。同 2019 年充满前进感的「活力珊瑚橙」相比，「经典蓝」更加内敛和笃定，悄无声息地增加每一个的信心。
除了发布这一年度色彩之外，潘通色彩研究所还专门制定了5套配色方案，这些配色方案应该会在接下来的 2020 年，得到更加广泛的应用。
沉思
这是一套舒缓的配色方案，凉爽的蓝色调和同样柔和的暖色组合到一起，给人以沉静的感觉。
呼吸
这套名为呼吸的配色方案当中，加入了更为经典的黑白色，选择了对比更加强烈、更加富有活力的搭配方式。这样的色彩搭配更容易唤起观者的幸福感，让你的设计更加具有田园牧歌的气息。
沙漠暮色
「经典蓝」的灵感来源之一就是夜幕降临时的天空。而这套名为沙漠暮色的配色方案，就与此相关。充满金属质感的潘通色更能够凸显「沙漠」的闪亮质感，而恰为对比色的「经典蓝」让这套配色方案优雅无比。
异域风情
这套配色方案比起之前的配色更加丰富，更显混搭，仿佛加入了天然的调味料。这种健康而自我的色彩搭配方式，让人仿佛身在异域，不同于此地的文化，迥异与此时的感觉，独特却令人着迷。
非传统
打破常规的桎梏，选择异乎寻常的色彩搭配，而足够传统的「经典蓝」恰恰构成了这种搭配方式当中，作为基础的底色。这套配色方案指向时尚，突破规则，如同小品，有趣而俏皮。
为了更加方便线上的设计师来使用这些配色方案，优设的小编从官方提供的这些配色方案当中，精心挑选了 9 套适合进行数字设计的配色方案，并且标注上了相应的 HEX 值便于精准取色，请尽情取用：
文章来源：优设网 推荐：陈子木
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
节能环保是符合可持续发展战略的一个课题。在节能环保方面界面设计都有哪些风格呢？
下面给您展示两种风格界面：清新明快和深色沉稳。
绿色和黄色为主的色调给人一种清新自然，富有生机与活力的印象。图形以圆形为主，比较有亲和力，同时圆形也是今年UI设计的流行趋势。
紫色和粉红色渐变为背景，明快有活力，容易吸引人眼球。绿色、黄色、蓝色作为辅助色，增加页面的灵动感。图标简洁清晰，辨识度高。
黑白色调是一种低调雅致的配色，配以简洁的线条，更符合节能环保的主题。
这款APP界面采用深灰色底色，沉稳大气，有现代科技感，界面采用卡片式布局。配以粉红和橘黄作为点缀，让界面不因深色而显得呆板。
界面采用深蓝和灰色为主的配色，大面积留白。卡片式布局，配以曲线图表，扁平风格图标。简洁清晰，表意明确。让人对节能的理念一目了然。
（图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
讲到设计初期的页面构图规划问题，其实这个构图是服从你的展示方式的，即故事线。设计前期规划阶段，先想好打算怎么表达，再选择对应的构图方式。表达上我们讲究总分主次关系 ，那么构图上依旧遵循这个规则，先具体再抽象。
全屏平铺式的构图方式是最常见的一种构图方式，如下图无意中构成横平竖直的辅助线将内容一格一格展现出来，界线清晰分割明确。因此模块之内的内容就会显得格外的清楚和突出，给人一目了然的感觉。注意哦，平铺并不代表完全一个一个格子码好，比如下图中的深红色区域，没有被网格框住但也码的很清楚，浅红色区域中有一对一的也有一对二的对应关系，故此类型的构图中加上这些灵活的变化就会显得没那么生硬。并且这种构图方式是遵循F型网页阅读习惯的，因此重要内容放哪大家知道了吧~
圆形就是一个典型的中心放射式，圆是有圆心的，通过构造不同大小的同心圆起到聚焦、凸显作用。伴随一个一个同心圆自然而然形成放射线，把重要表述放中间，其他表述按照放射线编排起来。引导用户的视线聚集在我们重点突出的功能点上，先主后次，有起有落。
视线引导式主要是依靠点线面的关系形成一条清晰的视觉引导线，引导用户的视线，避免杂乱无章的堆砌。视线流动的轨迹多则是从上至下从左到右移动，故在大屏上从左到右，从主到次，减小用户的负担和阅读疲劳。如下图是我同事做的一张大屏，指标琐碎，每个指标与指标间没有太强的相关性。当时发现大方向上有一定的前后关系，故最后用这种方式把数据串起来。设计稿上需要把样式给全，看上去有点碎，实际开发后效果还是蛮不错。
水平罗列式的构图方式有点像全屏平铺式，同样是利用人从左至右的阅读习惯。如下图，不一样的是四个大类有明显的前后关系，并且彼此之间存在对比。利用无形之中形成的水平线条把内容串在一起，将同级且对比的意思表达出来。
三角排列式的构图方式，核心思想就是一个稳！从上至下的三角构图，能把信息层级罗列得更为规整和明确。这张大屏是我做的某地数字驾驶舱中的一个分页，用来总览这个分支的三个内容，每块内容上面是政策解读下面是数据结果，清晰明确。
页面的氛围个人主要认为是通过恰到好处的细节堆砌出来，这些细节要自然合适不突兀，讲究一个“巧”字。对于我来说这些细节就好像欧亨利小说的结局一样，意料之外又在情理之中。不过讲道理这些氛围的东西并没有很明显的一定之规，有些方法在这个场景下合适在那个场景下就不合适了，需要设计师在做的时候不断尝试，也是一个缘分。
抄现实是我们在设计中最直接的也是最常用的一种表达方式，它的含义就是提取现实中存在事物的点线面关系。因此往往在发散思维中找到与主题相关的灵感点后，用方式提取其中的内容后，能紧密的结合主题。它将抽象的主题通过实体表达出来，并以之作为内容信息的载体，能够合适的存在于页面之中。这个纬度的内容我直接举几个案例描述下。
公安的项目是我同事做的，在用户那边得到了一致的好评，并且也是团队前期重点研究的一个DEMO。这个项目好在业务逻辑清晰，并且在表达方式上做到合理合适的程度。如下是项目其中一张大屏的一处细节，需求是需要排列公安系统中处置人员的不同分布，在大屏中也是核心区域。
一般在页面核心区域我们会花点心思将这块的内容做充实做饱和，毕竟第一眼需要留下好印象。设计的时候提取了警徽的基础形状、警徽的构成、胸徽的线条排布、旌旗的基础形状、放射线的构图方式，然后将文案排布形成设计结果。最后客户这边对于这块内容直接过稿，认为设计环节带出了警队的特色，给了高度的评价。
驾驶舱的项目是我直接参与主导的，当时这个项目的欢迎屏风格稿做了好几版本的，用户一直都不认可。过程中去除主观因素，总结用户对于驾驶舱的认知和理解。客户的需求是驾驶舱需要在“驾驶”的时候，眼中不光有舱内的内涵，也要有舱外的风景。如下是欢迎屏的基础状态（交互操作并未展开），设计的时候提取了汽车仪表盘的基础形状和风格组成、星光点与点的关系、逆光山体风景的天空渐变，然后组合在一起形成设计结果。最后客户这边看到后过稿，这个设计也留到了项目最后。
如下的作品是behance上一个大佬的作品，作品的名字叫做山海经，我们也是经常拿出来学习参考。在人物设定中，作者将古代的乌纱帽、官服、官徽纹样等内容融入角色的道化服之中，并且角色周边环境中大量融入一些官府的元素，比如官兵举得牌子、衙门的建筑体等。整个作品虽然融入大量的古代元素，但是用赛博朋克的方式表达出来，成品没有一丝违和感。确实给了大家一个方向，原来国风的东西可以这么玩。
1.使用足够并且容易区分层级的颜色去构造页面。数据可视化的项目往往信息的量级是不可控的，准备工作需要做充分。
2.合适的字体能让你的页面事半功倍。挑选字体得对比，确保不同的使用场景下有一致性的显示。条件允许下，针对自身业务场景打造对应的显示字体（羡慕脸.jpg）
3.好的构图可以让表达更上一个台阶。根据故事线的讲述，挑选对应的构图方式，做到从总到分、有主有次。
4.氛围彰显作品的细腻程度。细节决定成败，在作品中增添“巧”的细节，会让观赏者更加投入获取信息的节奏中。
文章来源：tob.design 作者：王亮亮同学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
从入行到如今的这些年中，眼中的设计风格不断变化。伴随这些年行业的兴起，从最早的拟物风到现在的内容当道，越来越多的设计师参与其中，为行业贡献着自己的理解。但也发现同质化的现象越趋明显，个人认为这里面有设计师本身的问题，也有行业风气的问题。同质化的现象有很多的组成因素，可能是页面视觉是直接的拿来主义，亦可能是脱离不了舒适圈的习惯为之。
我很担心的一件事情就是我们一味的反对同质化的假，最后会演变成另外一种假。是一味的摈弃，还是部分的接纳。这是一个界限的问题，而这个界限我还没想明白。如今风格太现成，都像麦当劳一样，思想的麦当劳，短暂的吃下去了，饱了，不去想了。这个惯性思维很可怕，最可怕的是可能有段时间自身都意识不到这个问题。
那么如何跳出这个惯性思维？我这边借用冯小刚导演在十三邀里说的一段话来解释。创作过程太正常很多时候是经验在发挥作用，每次都和自己的经验作斗争，最后可能会出现一个在经验之外又让自己激动的东西。简而言之就是革了自己的命。可能哪天我想明白这个问题，会再写一章如何创新来讲这个问题。
那么本章主要讲我们是如何在前期定义一张大屏的风格？主要可以从几个方面来讲：配色、字体、构图、氛围。
定义大屏配色的前提是对于用户的政务有着充分的调研，明白是主管哪个行业的，分别用对应的色系去定调子。
举个例子，生物医药、环保等行业通常选用能表达健康安全的绿色；公安、教育、政府等通常选用能表达科技未来的蓝色；消费业、服务业等行业通常选用能表达热闹、朝气的暖色调。
它们有个共性就是主色调不管倾向于哪个颜色，背景通常是对应颜色的暗色系。因为可视化大屏使用环境通常是在室内、展厅等这种外部环境比较暗的地方，避免对于观赏者视觉上的不适应。而且这也有帮助观赏者对于数据的聚焦比对的工作，暗色调的背景加上高亮的配色，也容易在界面中将层次做出来，这点特别适用与3D城市的构建，以后我们会讲述如何在城市中做出层次对比的方法。
色彩心理学普遍还是适用于可视化大屏的，颜色对于人意识的倾向性还是比较强烈的。但是需要明确的是在数据可视化领域中，有些配色规则并不适用。在传统UI设计中我们一般会拟订主色辅色特殊状态色，甚至在灰阶会把标题、正文、背景的颜色区分做全。这样做的好处就组件一致性，给人统一的感觉。数据可视化一般会定一个主基调，围绕这个主基调会用至少5-6中以上的调色板进行设计。
假设我们需要做一个政务的可视化系统，在设计初期敲定了以靛蓝（H:200）为主色调的设定。那么我们会寻找在这个颜色周边的邻近色去做这个靛蓝色调的搭配，比如在青（H:180）和深蓝（H:220），使得整个大面积的色彩整体上过渡会比较自然。通过对纯度S和明度B的调节，我们可以找到很多色调用于数字、文字、点线面等视觉元素。然后在靛蓝色调的对比色上去寻找用于高亮的展示，比如绿（H:120）这类的，起到强化主色调的层级作用。最后找到靛蓝色的互补色左右的红（H:10）和黄（H:45）用于重点强调内容。主色调的互补色需要少量并且珍惜的使用，需要有但不是大面积得使用。
色彩是为了突出内容的重要信息，请有选择、有策略的使用颜色，切勿滥用。配色没有绝对的好坏，只有在当前场景下是否适合，色环理论只能大致告诉你一些配色的方式，最重要的是靠设计师自己眼睛去感受颜色带来的冲击力。上述的配色方式仅仅是我们工作的一个惯用方式，不同项目敲定的内容也不同，请灵活使用。
当然我们在这边提及的色调并不是一个确定的值，而是围绕选定颜色周边的一个色域。可能在文字或者数字上会沿用传统UI的规则，保持特定的统一。但是在点线面、配饰、特殊状态的触发等元素上使用这些色域去提高整个界面的层次和细节，使得画面没有那么硬，各个板块之间是有舒服得过渡。这里的色域以前是需要自己将色调于黑白二色融合的渐变中选取不同位置的颜色组成色板，如今AntDesign的轮子比较友好，填入主色就可以对应生成有层级的颜色。
我们上述的配色方案是有倾向观赏展示型的，由于用户使用大屏普遍都是汇报展览并且用户样本容量小。故在表达的过程中大量借鉴了运营设计的方式方法，因此配色方式存在包容性不够的现象，对于色盲色弱的人群是有障碍的。比如青色、蓝色、紫色在色域展开的过程中，选取其中几个颜色做叠加色板样式时，灰色模式下存在颜色拉不开的现象。可能是“蓝色”是对色障人群最友好的颜色，AntV保留MPC叠加色板，但同时在使用建议中也写明推荐使用MOB叠加色板。
在数据可视化领域中，还需要界定清楚你做的是偏向观赏展示型的还是偏向实战分析型。这两者的区别主要在观赏性的数据可视化往往需要大量的视觉语言去烘托气氛、用辅助性的元素去增强观赏的趣味。实战分析型的主要是需要消除不必要的视觉杂音、强化传达的力度。因此这就是一个尺度的问题，是偏向品牌创意的手法多一点，还是偏向传统UI的手法多一点，君可自决~
以下的案例是我自己工作中犯的错误，拿出来共勉（捂脸233333）。做的时候由于可视化的经验并不是很多，在选用颜色的过程中并没有把颜色的层级拉的特别开，导致长时间观赏容易产生识别不清的问题，进一步讲有可能在比对数据过程中产生认知障碍。回首一看，中央的核心区插画的比重大于数据本身要表达的内容，出现了喧宾夺主的情况。这也是一些设计师容易犯的错误，需要再次明确所有的手法和表达方式都是服从一个原则，即清晰有效地传达与沟通信息。
设想一下，一个充满数据的界面本身就是会伴随视觉疲劳的。人是有惰性的，会自然的抗拒一些不清晰不明确的展现方式。数据可视化在我们理解中就是通过设计师清晰有效地传达与沟通信息，使人有能力抗拒自己的惰性去从枯燥的数据中分析出超额信息。
数据可视化和大量数字打交道，选对数字的字体挺重要的。涉及到字体版权的问题请自行解决，在推荐字体之前有两件事情需要注意下：
第一、文字习惯左对齐，数字习惯右对齐。文字左对齐是人一般从左至右阅读，数字右对齐能够快速识别数据量的大小，容易与其他数据比对。因此在选用数字字体的时候，尽量使用字间距相同的字体（比如Lato字体和DIN字体，注意PS中比对的时候需要选择度量标准，使用视觉的字间距会有问题），这样比对数据的时候字间距相同更容易产生比对结果。
第二、选用数字字体的时候需要检查下常用字符是否有缺失、是否显示正常。比如钱币的符号“￥”和“$”以及“%”。还有就是“1”和“7”、“0”和“O”这两个需要能够清晰识别。（国外的很多字体是没有人民币的符号的，DIN的0和O并不是特别好识别，故很多公司会自己改良字体满足自身业务的要求）
我们最长使用的就是思源黑体、思源宋体，开源并且字体库全。缺点就是比较中性，在数字上辨识度不是很友好，因此我们在数字上最常使用的就是DIN字体。DIN 是德国标准协会，Deutsches Institut für Normung 的首字母缩写。1975年起，德国政府把DIN作为国家标准体系，DIN 标准在国际和欧洲范围内被广泛使用。DIN 字体继承了严谨可识别度高，被广泛运用。
DIN也是有缺陷的，支付宝设计师SKY在专栏里也讲过4的开头较大，以及5，6字体的圆形不够一致，7缩小后识别度问题，所以很多公司都会基于这些问题进行二次设计，比如微信钱包、京东金融、百度金融都在一些地方对DIN字体进行了微调后使用。
接下来我们直接推荐几个有风格的英文和数字字体给大家（私货环节！）：
Futura这个字体是我自己特别喜欢的一个字体，字体表现很现代，看上去特别利落，继承了包豪斯的设计理念。
Optima也是我个人比较心水的一款，字体充满人文主义。字体本身严格遵循了黄金分割原则，比例优美，字里行间充满了变化。
Garamond简直就是衬线体之中的典范，就这么说吧，经典的设计中一定会出现他的身影。
Bodoni被誉为“现代主义风格最完美的体现”。字体粗细对比强烈，给人浪漫的感觉。
Didot和Bodoni很相似，都是给人浪漫的感觉，不同的是Didot在数字上面做了不一样的处理，两者在电商上使用都蛮多的，一般用做价格显示。
DIN被德国人视为“国民字体”，有着悠久的历史。德国的路标和路牌的标准字体就是DIN。其中的4这个设计挺有个性和特点的，容易辩识出来。除了前面说的问题，真的是精准的徳国工艺阿（dog脸~）
lcdD是常见的电子表数字的字体风格，更加端正鲜明的视觉效果，运用在数字提示等内容上，倾斜风的设计让字体更有自己的独特魅力。
Lato就是那种非常现代科技感的一款，并且具备了很多常用自己的特点，属于那种用了不会出错的字体。
Avanti和DIN在字形上是很相似的，但是它的字形更加饱满。差异主要在3、5、8这三个数字以及G、Q都做了不一样的处理，上半部较小而下半部较大，多了一些变化和趣味性。这个字体还有一个细体，一粗一细，灵活使用。
Tensans和Avanti也很相似，如5和8上下部分的比例，6和9的转折以及中圈部分都挺相似的，有点像Avanti字体的加粗版本。但是Tensans特征更加明显，比如2、3、4、7的转角尖锐，切角锋利，具有很浓重的现代工业气息，比较适合速度、刚猛、游戏等主题的设计。
Impact这个字体第一感觉就是厚重醒目，视觉冲击力很强。特粗的笔画、紧缩的间距以及狭窄的中宫，特别适合大标题和醒目的价格展示。
字体字面比较秀长，笔画流畅，简约大方。适用于化妆品、服装等女性向。
和上面哪个BebasNeue是有点相像的，字面细瘦，挺拔优美。多了一些衬线体的字重和体势的变化，设计感与装饰感更强，尤为时尚，在女性、文化、时尚类中用的格外多。
Gaoel有着Avanti的韵味，但是更加年轻、圆润，令人惊喜的是大写的字母有着统一的特点，特别未来。不过需要注意的是该款没有小写，小写就直接变成如下样子。整体字体设计很圆润，年轻化，可爱非常适合一些偏年轻化的产品，同时字重非常适合金融产品的字重效果！
Proxima Nova的style还是比较多的，我个人用的比较多还是在它的细体上做修改，比较纤细现代。
Gotham号称发布会字体，特别现代干净的一款字体，这些年看到的较多是手机发布会的海报设计，纤细的字体压在海报上很有力量。
Expansiva也是特别有个性的一款字体，用于做数字的也比较多，目前看到的可视化设计中存在，但是使用量并不多，由于字形骨骼的因素，用于数字上比较多。
文章来源：tob.design 作者：王亮亮同学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2020又过大半了，去年这个时候我们研究了目前国际大厂在使用的一些趋势-晶白，点线底纹，光感，那么到了今天又有哪些新的趋势映入眼帘呢，你还在使用那套旧的设计风格来做设计，今天带大家来看看今年哪些性格值得我们学习呢？
什么是液态视觉
参加过去年UCAN的同学应该对于这个水的主KV印象深刻，当时是以水，宇宙概念做的整个视觉。整个视觉最让人深刻的莫过于这个画龙点睛的水滴液态效果。
整个水滴流动感，运用到整个KV各个地方，背景还有底纹等等，印象深刻。
在2020年，液态视觉毫无疑问是当前最受关注的视觉风格之一。这种效果看起来像流动的各种液体，在设计中不仅可以很强的吸引人眼球，同时无论是作为背景元素，还是装饰都让人过目难忘。
液态视觉除了视觉感官层面会让你记忆深刻，它的整个视觉概念也可以讲很多故事，比如你可以说整个设计概念，是围绕”水“来设计，水是流动的，水也是生命之泉，能赋予很多产品很强的概念，所以也就是为什么今年会被很多大型KV所运用的原因。同时这种流动感也可以比如宇宙万物，生命不息，也可以运用在很多大型的科技发布会上。
所以作为设计，今年我们势必要去关注这个趋势和理念，尝试如何去运用到我们产品中去。
液态视觉的情感感受
1、生命力
使用过siri的朋友对这个效果应该不会陌生，液态视觉一个非常直观的感受就是具有生命力，可以随机的发生各种各样的变化，正是如此，被很多语音产品在页面中使用。
在很多科技类产品，智能功能这块都会看见这种风格的运用，所以假如你今天需要设计一款智能，很未来的产品，这种液态风格设计一定需要去关注。
比如这款科技类产品，在启动页面时候，就直接跳出一个类似水滴的机器人，用智能语音和你对话，然后随着人机交互，它会变成不同的形态。
2.流动运动感
液态视觉另外一个特点就是具有流动感运动感，在很多智能家居中被广泛运用，比如图中这个智能水壶页面设计，随着水温度的变化，颜色和形状都会发生变化。
在很多发布会中，营造一些比较大气的感觉，或者宇宙场景时候经常运营到这个风格，在空间上和视觉上都有方向和动态效果。
这组海报设计，就非常有方向感和宇宙未来感，整个图形都朝着一个方向走向，这也是其他图形元素很难表达的风格特点。
GlebKuznetsov的作品中这个动态效果，随着液态效果的流动，整个画面呈现出非常有程序的水流动效果。
3.科幻未来感
液态效果另外一个视觉感受就是未来感和科技感，因为它造型的变化，抽象图形的表达，给人很神秘，抽象的视觉感受。
如上图，通过将流动的图形，进行旋转，形成虫洞感觉，不由自主想起宇宙和未来感。
液态视觉的技法特点
1.质感柔软呈现透明
液态风格特点虽然视觉冲击力强，但是视觉表现上，柔软和透明是非常大的一个特点。整体的材质比较轻，加上透明效果运用，整体会非常的轻盈。通常人工智能页面场景运用比较多。
2.色彩丰富大胆渐变
液态风格另外一个特点是什么。色彩丰富，大胆的渐变色，形成很强的视觉冲击力。
整个色彩类似彩虹，或者霓虹灯反射效果，这也是它在设计中能吸引人很重要的一个原因。
Kikk的官网设计，和Ucan有些神似，也是采用的的一个液态的玻璃球，配色大胆的渐变在视觉表现和冲击力让都让人印象深刻。
3.塑料质感运用
塑料质感：液态视觉视觉质感丰富，质感也很大胆，比较常用的有塑料质感，配合灯光，如上图就是运用是塑料质感，配色彩色的渐变，非常梦幻。
这种塑料质感不止是在设计中用到，在时尚摄影中也被经常使用。
4.玻璃质感运用
玻璃质感的运用，一般会运用玻璃这种效果，出现在画面中，随着玻璃的折射效果进行变换，玻璃的质感和平面这种强反差的设计，让你过目不忘。
玻璃质感的折射效果，结合后面文字的透出，很好的将这种液态融合效果运用到了。
在越来越多的国外设计中，都经常看见这种玻璃液态图形和平面设计的融合。
5.水的质感运用
水的质感，毋庸置疑，但是这个水的质感一般是运用气泡的表现形式，再结合折射效果，整个视觉水泡就是核心视觉元素。
Ucan的主视觉效果，就是采用类似的手法，这类设计很巧妙，同时简约又不失大气。
6.点线面结合运用
除了塑料，扁平质感以外，点线的运用在液态设计中非常多，比如上图的OPPO和colo的海报设计，就是运用了流动变化的线条，让整个设计呈现出简约高科技之美。
用线成为整个设计主体，通过流动的线勾勒出一幅场景，在科技类产品中运用较多。支付宝很多理财产品都曾经运用过类似风格。
在界面中运用
天猫双11的很多场景中，其实都有用到液态设计元素，比如双11的潮流盛典舞台设计，就是运用的液态当元素，整个画面非常潮。
在AI人工智能的产品设计中，液态设计经常被广泛使用，无论是智能语音设计，还是说智能家居是使用，都能看见它运用的影子。
这组机器学习的网站设计，通过液态设计，讲玻璃元素设计成动态的方式非常的逼真。整个设计给人空间和未来感展现。
这个液态网站的设计，大胆的渐变，流动的液态效果，让整个页面充满了时尚感。
液态设计除了一些抽象元素，一些3D的元素也可以使用，整体呈现出来的效果，也非常的有吸引力。当然得结合设计整体来平衡。
目前来说液态设计在界面中运用，一般在科技网站，AI或者机器人场景比较多，一般液态会呈现多种变化趋势。
在平面中运用
在平面设计中案例比较多，目前很多商业设计中都运用到了一个液态的图形配合一些几何图形，干净利索的文字都能搭配出不错的视觉效果。
这组海报，看似简约但是充满了设计感，除了液态的核心元素，字体运用，板式空间的利用都体现出设计师极高的功底。
在韩国很多艺术展的设计中，抽象的几何图片配合液态的动态变化。整体非常强的视觉冲击。
如果你今天做设计，找不到感觉了，不如放弃下你之前的设计套路。尝试一下新的设计思路，说不定可以打开不一样的视角。
在品牌中运用
今天除了页面是动态的，在很多时候品牌LOGO也是动态的液态的，会变化，如上图这个logo他会随着不同的方向去旋转变化。LOGO一定要是静态的么？不可以是动态的？甚至液态么，我觉得一定有可能会出现液态的图形。
电信OI公司的logo就是液态呈现的，他的变化有几十种展示方式。
整个图形以明亮，形状变化的“气泡”为液态容器，可根据客户的声音改变LOGO的颜色和形状。
或许在未来，液态的LOGO会成为一种新的主流，只是作为新时代的设计师，我们必须要去了解和关注。
最后
趋势是变化的，唯一比变的就是变化，作为处在互联网中的设计师，我们身边的一切都是变化的，身边的人，身边的事儿，甚至是商业模式都在变化，学会拥抱变化， 并且让自己持续的成长和变的更好，是每个设计师都要学习的。
文章来源：站酷 作者：我们的设计日记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：作为一个设计师，有时候在工作中会过度重视美感和创意，辨识度是有了，但是缺失了品牌感。没有了品牌感，这个图标就可以放在任意一个产品上使用，无法与品牌产生强联系。那么，如何设计一个有品牌感的图标呢？本文将从三个方面展开分析，希望对你有帮助。
我们在画图标的时候，往往会忽略掉一个重要的问题：缺失品牌感。也就是说，这个图标和我们的实际品牌、业务并没有什么联系，它仅仅满足了可辨识这个温饱需求。
图标缺失品牌感，就会导致同质化的问题，这些图标放在任意一个产品上都可以通用。
对于产品，记忆点的缺失导致用户看完后对于我们的业务、品牌不会产生任何深刻的印象。对于我们设计师，图标和业务的断层则很容易让我们陷入反复改稿的被动局面，并且设计话语权也越来越小。
那么，有没有什么系统、易于理解的方法来让我们的图标具备品牌感？
当然有。
接下来的这个图标三步品牌化是我一直在用的办法，而且屡试不爽，基本用了这个方法，需求方基本一稿过～
文章案例选用了对接京东物流的国际物流项目。当时有一个着陆页的需求，需要在首屏下的优势板块中绘制六个图标，分别对应平台的六大优势。接下来，我将详细讲解如何运用这个图标三步品牌化方法绘制与品牌息息相关的图标。
品牌符号从广义上来讲也就是形状。
比如天猫最近的双十一购物节，便是用一个猫头来作为这次大促的品牌符号，通过每年固定时间节点的品牌形象建立心智。
再比如之前大热的腾讯综艺《演员请就位》，它的品牌符号就是不同矩形色块的叠加组合形态。
通过承载的不同信息可以扩展为不同的类型，比如下面的固态层、图片层和文字层就分别承载了内容、图片和文字。
Google在18年于material design中新增了一整块章节来阐述图形语言。
google原话是：形状可以引导注意力，让用户易于识别组件，识别状态和品牌语言传达。
也就是说，形状并非我们以往认知中的作用，品牌同样可以借助形状来加强效应。
最典型的就是谷歌自家出品的google play。你可以看到google play被提炼出的三角形符号被作为外轮廓延展到来所有相关的业务icon，显著加强了品牌记忆点。
再比如国内的蚂蚁财富，便是通过提炼logo中的箭头符号，将其延展到三个优势图标当中，一样得传达了蚂蚁财富的品牌表达。
所以，基于业务目标以及行业特征，我们将倒三角这个符号作为我们这次项目的品牌符号。
至于为什么选择这个形状，主要考虑到了稳定性（三角形自身的稳定性、象征专线的稳定可靠）、保障性（倒三角常被用于保障承诺类的徽章标志）、隐喻物流（由飞机和定位的图标变形而来）和三者的战略合作（开锣、中国制造网和京东）。
第二步相对而言就比较简单了，不过考虑到颜色在各个场景及状态到通用性，这里需要基于原本的品牌色额外不同明度的颜色。
这里我简单扩展出淡色和深色，为了避免页面过冷加入了暖色作为点缀色以提升温度。
将图标与业务紧密结合，能够与其他竞品拉开差异化，这是个相对简单但是很容易出效果的品牌化的方法。
具体的操作办法就是：首先根据所给文案脑爆出图标所对应的关键词，然后根据所在行业的特征筛选关键词，或者进行二次联想及转化。
下面我通过此项目中的三个图标案例来简单讲述下设计过程，仅为大家提供下思路：
运营所给文案如下：
这段文案意思就是，由于我们平台和清关行合作，因此让我们的业务更具有保障性，货物可以按时送到客户手中。
这里我一开始脑爆出了雨伞、锁和盾牌这三个形象，并且传统得用了盾牌符号传达保障性。
这种任何行业平台都可通用的形象，并不能关联我们这个物流类的平台。
后面联想到到我们跨境、外贸的行业特征，将“雨伞”这个形象变形转化为降落伞，来代替盾牌符号。
一来，降落伞外形似伞，相当于是货物的保护伞一样体现”保障“的感受， 另外，这种”空运“式的表达也额外传递出按时递交的概念，很好得体现出典型的”跨境物流“的行业特征。
运营所给文案如下：
同样，一开始我着眼于”跟踪“”实时“”轨迹“这些关键词，脑暴出定位、雷达之类的事物。
但是结合我们行业特征的话，其实有空间去更贴切到业务本身。
我们平台的业务线包含了两个站点——美国（主站）和马来西亚。供应商发货后，货物的轨迹必然是反映在世界地图中，从起点至终点得分布。
因此我用了地球仪映射全球，以定位来映射包裹收货地，以延展到定位icon中的虚线映射轨迹。这样产出的图标，不仅仅是指代了文案意思，同时表达出对应的行业特征，和业务紧密贴合。
文案如下：
一开始，我传统得想到了一个时钟图标来代表。但是仔细想想，这个时钟图标仅能代表”时效“的特征，而不能传达”快“的感受。如何更好得传达“快”？
发散思维，我联想到交通运输工具，飞机、轮船、火箭等等，最终我选取了飞机这类跨境物流专线主要使用的运输工具，它所带来的快捷相比轮船更加深入人心，又不像火箭那样脱离现实。
当然并非所有的图标一定需要去结合行业特征，其余的三个图标暂未想到更适合的元素，所以依然选用了常见的形象来传达概念。我们不需要完全硬坳这个方法，但是身为设计师，我们依然需要掌控我们的项目，充分发挥自己的创造力来赋予产品更多的power。
最后，我为所有图标加入了非线性动画。一方面为着陆页注入了活力，增加用户愉悦度，另一方面通过动态的表达引导用户更好理解平台优势，比如地球仪通过加入轨迹的修剪动画以及定位的弹跳动画，来更生动得传达物流轨迹全程跟踪的这个概念。相比原本的静态图标是不是更好理解了？
更重要的是，动画的加入也贴合了我们物流行业“运动”的特征~
篇幅原因，动画的制作今天先略过，后面可能另抽时间单独出个教程出来。当然，动力来自于你们的在看或转发啊～～（手动斜眼）
我们每次接手一个需求时，都要想想，这个设计可以在哪些地方和我们的业务、品牌进行关联？而不是每次都好像在做一个完全独立于业务外的项目，这很容易让你陷入反复改稿的被动局面，而且话语权也越来越小。
总之，品牌思维是需要设计师格外关注的！
最后，我们再来回顾一下这个图标三步品牌化这个方法！
第一步，融入品牌符号；第二步，注入品牌颜色；第三步，结合行业特征。
但愿今日份的分享对你有所帮助！
文章来源：人人都是产品经理 作者：Andrewchen
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在网页和移动端界面中，内容和信息是否能够经过系统性、有效的整理和组织，对于内容的可用性和实用性，都是意义巨大的。而在呈现信息的时候，视觉间隔是组织信息的关键因素。它说起来并不难理解，但是在实际的运用当中，却是千变万化，今天我们来梳理一下流行的视觉间隔的方法。
视觉间隔是一种布局元素，它有助于将内容分隔成为清晰的分组、选项和部分。它可以让设计师更好地组织内容的视觉体验，处理信息的层级，也有助于用户理解内容，明白内容之间的关系。
视觉间隔和页面上的其他内容在一起，构成视觉层级，这是它最重要的作用。在视觉间隔的帮助之下，用户可以轻松地感知内容之间的关系，明白各个信息片段之间的关系是相似，并列，承袭，从属，还是其他。
视觉间隔的可用性也同样重要：在很多时候，有的视觉间隔元素看起来是可点击，可交互的，这在移动端界面上，是非常重要的。
谈到视觉间隔，我们可以从两方面来进行拆解分析：视觉间隔的外观和功能。按照视觉特征，视觉间隔有5种基本的类型：
下面我们分别针对这5种类型进行说明。
很长时间以来，在排版印刷领域，线条就一直是一种用来分隔内容的方法。线条的分隔功能是认可度最高的一种间隔方式，用户几乎不用思考，就能够理解和感知它，并且发挥作用。
另一方面，这种间隔方式也很容易显得过于简单，并且和应有的形态相去甚远。这也是为什么设计师在想尽办法去寻求别的视觉间隔形态。太多的线条间隔会让屏幕上的视觉干扰太多，并且带来不必要的视觉噪音。
所以，能够将线条间隔用得微妙、恰到好处、出神入化，是设计师功力的一个重要体现。
在这个网站产品页面中，使用深色的线条间隔来分割产品信息，用来组织和间隔信息内容。
在这个页面当中，线条分隔了不同的内容区块，让页面的结构更易于被扫读。
这个电商网站将不同级别的视觉内容进行了分离，借助简单的水平线将价格、CTA按钮以及承载相关信息的表单分隔到不同的区域。
负空间，也就是留白，也是最为常见的一种视觉分隔元素。留白绝不是对空间的浪费，和屏幕上其他的元素一样，它同样发挥着重要的作用，拱卫支撑着整个用户体验。负空间是最为流行的视觉分隔之一，尤其是在极简主义风格为主导的设计当中。负空间本身遵循着格式塔原理，尤其是其中「接近原理」和「相似原理」是负空间在设计中，发挥分隔作用的核心所在。合理地运用负空间，还能强化页面的呼吸感。
上面这款旅行规划 APP当中，使用留白将不同的条目分开，没有使用额外的具体视觉元素，仅仅只靠留白。
Health Blog 的列表的排版层次是基于负空间来实现的，看起来清晰又充满呼吸感。
高对比度的色彩，同样能够带来清晰的视觉间隔效果。在 UI 界面中高对比度的色彩有着极为明显视觉表现潜质，它们能够增强网站的信息和内容的表现力，分割区块，营造氛围。对比度是影响页面和屏幕可读性的关键因素之一。在具体的应用当中，不同的色彩会有效地分离不同的选项、条目和区域，这意味着它作为视觉分隔的作用非常强。这也是近年来分屏式设计如此流行的原因所在。
这是一套移动端菜单的概念设计，强烈的色彩对比让信息清晰可见。
即使是在这样的柔和的设计当中，色彩的对比度也发挥了相当的作用：一方面，强烈的色彩对比让CTA按钮和输入框之间有了明显的区分，另一方面，右侧的主视觉元素的背景也同样借由不同色彩的对比，做到了突出的效果。
在 GNO Blankets 这个网站当中，强烈的明暗对比将网站元素分隔成为精美而清晰的区块。
阴影和体积也是一种非常常见的视觉间隔方式，通过营造在「高度」或者说高程上的视觉差异，从而达到分层的效果，而这种设计也是符合人类一直以来的认知习惯。这种方法有利于保持整个设计的平衡和易读性，另一方面，它又能保持足够的微妙和自然，不会那么引人瞩目从而让人觉得出戏或者受到干扰。
这个APP的目录页面所有元素都采用了白色的背景，而阴影让布局呈现出了纵深层次，让内容足以展现又不显突兀。
这款提供定制化花束服务的APP也采用了类似的阴影元素，让整体看起来清晰又通透。
图片在 UI 界面当中，同样也是一种非常有效的视觉间隔，尤其是在包含大量文本内容的界面中。无论是博客、在线媒体网站还是其他类型的网站当中，图片的间隔作用都非常明显。无论是照片、插画、3D图形，它们作为图片都可以很好的平衡文本内容，提高内容的识别度和可读性，有效地划分层级，并且提高情感吸引力。
这个比特币网站的着陆页就使用了带有3D效果「了解更多」动态图片，图片和文本在内容和功能上都清晰地分隔开来。
在这个餐厅 APP 当中，图片作为划分内容的关键元素而存在。
如果从功能的角度上来划分视觉间隔，可以根据它所处的层次来进行划分。
使用线条作为全出血间隔是最为常见的，它会很跨整个屏幕布局来作为信息层级的划分。
这个画廊图库 APP 的艺术家目录当中，使用线条作为全出血间隔，来区分艺术家。
这个名为完美食谱的APP也使用了全出血间隔线来区分内容。
在这个财务APP当中，也使用了全出血间隔线来区分条目。
在这个电影APP的结帐页面当中，也使用了线条来作为全出血间隔。
嵌入式间隔的功能是将相关性较高的内容分割开，并且它通常会和标题或者其他的特定元素保持对齐或者对应，它们通常是进行某个大区块内不同组件的分隔，或者将多个同类的元素分隔开。
这个网站当中，使用横向的短分隔线来区分表单中的参数条目。
这种分割线通常会置于布局的中间某处，同样是分隔相关的内容，但是通常它们在属性上不一定是一致的，但是层级近似。
在这个出售草药的电商网站的右侧，使用中间分隔线将文本和可交互的区域清晰地分隔开。
上面对于不同类型的视觉分隔方式都有描述，在此之外，还有两个问题需要注意：
文章来源：站酷
日常工作中，经常听到交互和视觉同学有着如下对话：
可以看到，无论交互还是视觉同学的提问，其实都是围绕「信息」表达的逻辑。视觉同学设计过程中，应该如何理解交互稿件，并进一步体现交互的层级逻辑？是否可以对交互稿的布局进行调整发挥？我们通过案例来一起看看。
目前，页面类设计一般分为运营型和平台型。
关注重点：「活动利益点」「模块内容顺序」「视觉发挥空间大」
活动页设计中，信息的层级表达相对简单，一般分为主氛围图-体现活动主题、内容展示区-直接转化、尾部兜底区-相关扩展。这类型需求，重点在理解交互稿中主题的表达、内容区的分类及重点元素体现。视觉设计师在该类型的设计中，发挥度是很大的。
关注重点：「层级结构」「浏览顺序」「视觉在信息逻辑之上发挥」
平台类设计项目，交互设计师通过页面框架、模块设计来表达产品/运营的策划思路，涉及内容及模块更多，且包含着复杂的逻辑关系。一个优秀的平台视觉设计师，应当是通过好的视觉表达，按照交互信息层级关系，将信息内容传递给用户。这里视觉同学要避免两个误区：完全按照交互框架和排布，只是纯粹填色；从「好看」的角度重新布局，忽略交互层级关系。
下图是美妆频道的一次改版，通过观察交互稿和视觉稿可以看到，这位视觉设计师在交互稿的基础上，采用了更灵活的视觉引导方式。这些改变是否有效传递了交互逻辑？视觉阶段的这些调整是否都合适呢？看完本文，你就能有一个清晰的答案了。
浏览顺序 元素表意
这是一个新品速递模块的设计方案。交互稿表达的信息是：这个区块是用来介绍新品的，首先希望用户知道模块属性是什么，然后让用户快速了解推荐商品是什么，及为什么值得买。视觉稿较好的传递了交互层级及信息表达，首先突出了栏目名称让用户能一眼看到，其次是商品及商品特性展示；而稿件中的栏目名称位置和样式则在视觉上做了自由的发挥。
小结：模块中各元素的浏览引导（眼睛浏览路径）需要严格按照交互逻辑，元素的表达和位置可以根据逻辑发挥。
下面这组案例，在信息层级上，视觉稿是否完整传递了交互逻辑？先自己思考一下吧~
模块比重 内容布局
交互层级来看，整个区域有2个模块「正在进行」和「品牌精选」，每个模块有4个等大的展示单元格。而视觉稿中，「正在进行」模块的单元格变成了两大两小。严格来说，这个调整是不符合交互逻辑的。
但是，视觉稿的输出效果明显更灵活，浏览层次更佳！那，能不能这么改呢？
这需要回到，为什么交互输出时，画成了等大样式。在交互环节，运营侧提出四个专题希望是相同层级，无优先级的差异。
这种情况下，视觉同学如果仍然坚持有层级差异的视觉感官更好，可以先和交互同学一起商量，从用户体验的角度来看，这个改变是否有严重影响，如果团队内部也都认为改动后的效果更佳，可以一起找到对应的运营同学，说明原因，建议他们进行调整；同时去了解这样的调整对业务方的业务表达是否有影响。
小结：视觉表达要关注信息模块的比重，视觉侧好的想法也要直接提出和交互及业务方讨论
上面这个案例也是关于模块比重的，最大的差异在于栏目名称及入口的调整。从不强调楼层名称变成楼层名称成为模块的视觉焦点，因涉及到模块比重，类似的改动也建议和交互设计师进行讨论。同样，该案例的改动，丰富了楼层样式，并通过标题模块强调了楼层的调性氛围，同时并未对用户阅读体验造成不好的影响，因此是个视觉提升交互表达的优秀案例。
对于同层级关系的单元格，我们也可以采用不同的操作方式，比如上面案例中，视觉环节使用了叠起的展示样式。相对于交互，优点在于增加了一种互动形式，而缺点则在于会对部分信息进行遮盖，不能直观呈现全部内容。这个案例的处理方式是，我们将两种方案的优劣告知运营方，运营方认为可以牺牲部分信息的呈现，而选择互动方式的不同呈现。
我们以TAB来举例，TAB形式体现的是并列关系的多个模块呈现，视觉设计师可以根据不同场景用不同视觉方案来呈现。
常规的视觉展示
场景化表达-日历
下面案例中，交互传达的是一周七天的食物推荐，在视觉阶段可以把TAB样式设计得更贴近日历，更贴合模块的主题表达。
场景化表达-餐桌
这个案例视觉侧在模块面积上进行扩大，影响到原首屏内展示内容的信息量。这种情况则需要与业务同学进行沟通，信息后置是否会影响他们在首屏信息的展示需求。一般活动类页面，首屏内容和页面长度的要求，相对宽松；如果是工具类/综合性展示页面，信息是否能在首屏出现，对页面点击和使用效率会有很大影响。
TAB的引导位置
下面案例中，因为TAB的位置发生了调整，用户的阅读顺序发生了变化。交互稿中，我们希望用户先看到TAB分类以了解推荐手机的不同纬度；而视觉稿中，优先让用户看到推荐商品，如果首轮推荐无兴趣，再通过TAB切换查看其它维度内容。
元素的不同呈现顺序会体现不同的交互逻辑。
下图中的推荐区模块，交互上的顺序是图→人物→具体商品描述，首先强调的是商品，其次是用户的评价；而视觉稿上的顺序是人物→图→具体商品描述，首先调的是评价的人，再说商品是什么。两种逻辑其实都符合「食鲜者说」的逻辑，但从属关系是不同的。这里的逻辑决策是，如果评价用户是知名度较高的，可以通过人物为食物加分，则我们选择视觉稿逻辑；而如果我们是靠商品图本身致胜，评论者只是辅助决策元素，则选择交互稿逻辑。
模块间的层级关系，可以通过去色来快速判断，是否符合交互浏览要求。去除颜色和元素对界面视觉优先级的影响，更聚焦逻辑本身。
对比下面案例，去色后可以更容易看到，优化后方案更加整体，视觉引导也更加顺畅。
交互稿中体现的逻辑，涉及到样式/位置调整的，我们应遵循原则：「在保证信息顺序、层级关系、信息占比逻辑正确的前提下，视觉可以进行专业的各种发挥」。
文章来源：优设
蓝蓝设计的小编 http://www.lanlanwork.com
