“洋葱理论”与前进色和后退色

尹广磊

关于前进色与后退色的内容，在2012年时就写文章提到过，
2012-02-07，http://www.hiaxure.com/thread-5399-1-1.html
2012-04-16，http://www.hiaxure.com/thread-5909-1-1.html

但是一直只在我的培训课程中主讲，并没有写成文章来论述。
后来这些年当中，我其实问过很多的“UI设计师”，
但他们当中的很多都还不知道有这一概念，或者说不觉得这一概念有那么大的重要性。
今天写这篇文章，算是从头到尾的来论述下。

为什么要设计

先谈第一个议题，就是我们为什么要对一个内容做设计？
假如我们不做设计，它本来就是很好的，那我们不就省事了吗？
我选了如下的角度来解释：(使用我PPT里的材料)

1. 首先屏幕本源的信息呈现方式是：线性传递关系。
    就像一堆文字，不经过加工，它就是这样从上到下，线性来读的。
    或者是一堆图片变成视频，不经过加工，也是前一秒后一秒线性来播的。



2. 而人不是用线性传递关系，来认识和理解事物的，
   人是像“剥洋葱”一样，包含递进关系来认识理解事物的。



这就产生了一对矛盾，设备本身是线性表达的，而人需要包含递进的来理解。因此才产生了设计的必要：
我们要运用设计手段，把一些线性表达的设备，加工的让人有包含递进的感觉。
这才是设计所发挥的根本(或本质)作用，而像“好看”之类只是设计的附带价值。
在这一点的认识上，我与重视觉的“UI设计师”有本质上的不同。
设计(此处仅指屏幕上的交互设计)，存在的本质，就是要让一堆的信息，
可以像剥洋葱一样，一层一层，有节奏，有先后，有顺序的，
让人可以理解、方便理解、容易明白、容易记住的方式，将它们传递出去。
我将以上我的论述总结为：洋葱理论。
这也从根本上解释了，设计为什么要有“层次感”。




前进色和后退色

既然要有层次感，那么颜色的使用也是直接影响这一层次感的。

1. 那些深色、暗淡的颜色(饱和度低的颜色)，叫做收缩色，也叫后退色。
    会产生视觉收缩的效果，就像女孩穿黑色的丝袜会显得腿细一样。

2. 那些明亮、鲜艳的颜色(饱和度高的颜色)，叫前进色。
    会产生“突出”、强调的效果。就像黄色的警示牌，红色的警示牌一样。

这样一个后退，一个前进，运用恰当了，界面上自然会层次感明朗，阅读起来也很舒服自然。
所以一般，后边是暗淡的背景，中间是白色的主体内容，上面主要的操作按钮是鲜艳的颜色。
这样就保证并还原了它该有的层次感，而且并不需要过度的设计，阅读起来就很舒服。
如果没有这种层次感，全黑会太压抑，全彩太刺眼、乱，全白也分不出层次。




在这里还有两点注意事项：

1. 背景一般篇幅都比较大，所以背景多少会带点条纹或渐变，以消除大面积使用单一颜色带来的视觉疲劳。
2. 鲜艳的颜色一般比较刺眼睛，所以不会大面积使用，只小面积的用在一些按钮上，以达到突出的效果。
这也要批评批评当下，动不动用很亮的颜色做背景，乍一看亮丽实际是违背本质的“取悦”和献媚之风。
有关此批评的文章见：http://www.hiaxure.com/thread-9515-1-1.html



一些建议性的文章参考：

1. 配色层次的基本注意事项
2. 交互设计中那些稍有变化的“中间状态”
3. 三栏窗口配色参考
4. 安卓material design设计风格的两点问题
5. 平面化趋势后需要更大的留白让层次清楚
6. 研究交互设计70～80%的精力要用在结构设计上

尹广磊

下边举例论述：

随着平面化的开始，非常多的应用，喜欢顶栏的背景色，跟底部的当前高亮颜色相一致。
从严格的层次上讲，这已经是层次表达的错位了。
不能让一个不可点击的背景框体色，跟通常可以点击的当前高亮色一样。
不然这高亮的还是不是高亮，就说不清楚了。
好在，它们两个离的比较远，也并没有造成很大的异样。




但是如果相临的比较近的时候，不可点击的背景，和可以点击的主要按钮颜色还一样，
就会造成层次和理解上的怪异，不知道背景栏那么亮是不是也可以点击。见下对比图：




所以像“脉脉”这种，先前不懂，上下都用一样颜色的，现在也多少知道改成不同点的颜色了。
见下图：(脉脉里到处都是小红点，讨厌的不行，先不说了。)




还不理解的话，就看看Facebook，顶栏是较暗淡的蓝色，下边的高亮和页面中的按钮，
都是比较鲜亮的蓝色。





下边再看点错误的例子


见下图：12306的客户端，顶栏与按钮色一样，又不区分主次按钮，层次错误。




见下图：顶栏颜色与高亮产品一致，造成当前高亮的效果被压制。



网易新闻、今日头条中，当前的科技和社会，高亮效果被压制。




见下图：当前的tab状态被压制，细细的一条白线险些看不出来。




见下图：Google地图iOS版，以前是左图效果，使用的也是它的material design风格。
由于上半部分的背景底色过亮，导致细细一条线的当前Tab效果不突出，
后来Google认识到了错误，在此处放弃了它的material design风格，
使用了右图，视觉上更为突出的圆按钮Tab效果。




见下图：大面积使用亮色，刺眼睛，也是不好的设计，
好在他知道换个颜色表示高亮状态和按钮。