Axure中文社区

WebPPD产品原型设计

 找回密码
 新用户注册
查看: 8718|回复: 1

[交互文章] “洋葱理论”与前进色和后退色

[复制链接]

410

主题

6599

帖子

6万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
64733

实名认证

QQ
发表于 2017-4-19 19:36:34 | 显示全部楼层 |阅读模式
闪念心情日记
关于前进色与后退色的内容,在2012年时就写文章提到过,
2012-02-07,http://www.webppd.com/thread-5399-1-1.html
2012-04-16,http://www.webppd.com/thread-5909-1-1.html

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

为什么要设计

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

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

2017-04-19_19-30-55.png

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

2017-04-19_19-31-25.png

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

2017-04-19_20-06-44.png


前进色和后退色

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

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

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

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

2017-04-19_20-07-36.png


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

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



一些建议性的文章参考:

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

410

主题

6599

帖子

6万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
64733

实名认证

QQ
 楼主| 发表于 2017-4-19 21:46:03 | 显示全部楼层
下边举例论述:

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

支付宝.PNG


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

001.png


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

脉脉.PNG


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

Facebook.png



下边再看点错误的例子


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

12306.PNG


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

错误配色.png

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

网易新闻今日头条.png


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

IMG_0064.JPG


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

google地图.png


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

IMG_0080.PNG

您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区

GMT+8, 2019-7-21 04:34

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表