视觉感受是如何形成的?

为什么一些设计看上去赏心悦目,而另一些则怵目惊心?不同的设计形成不同视觉感受的背后道理是什么?这是最近一直在思考的问题。

问及一个设计为什么看上去更美,有人回答:你看,这个颜色搭配合理,布局平衡,形式符合潮流…嗯,听起来有点道理,但为什么合理,为什么平衡,为什么时髦呢?我不喜欢这种未究其本质的解释,而希望用理性的方式分析视觉感受形成的原因,相信它的背后一定有道理存在,因为“以理性打量设计,做背后有理的设计师”一直是我推崇的设计理念。

首先“感受”的形成有先天的成分,也有后天的影响。比如我们对刚出生的人或动物的感受是“可爱”,这样的感受是与生俱来的,而一个孩子或小动物毛发是黑色好看还是白色更好看,就没有那么那么统一的感受了,这些会更多受到后天的影响。同样道理,对于任何一个出现在眼前的画面,我们都存在先天(nature/instinct)和后天(nurture/acquired)两种感受,而最终我们决定说“好看”、“不好看”的评价便来自这两部分的加权。 考虑到视觉设计有7大要素-形状,颜色,排布,质感,纹理,字体,动态,所以可以假设每一个要素都存在先天和后天两种感受,而最终对画面的感受变来自这14个感受的叠加。为了证实这一猜测,我结合了一些经历来一一描述。

1. 人们对“形状”的先天感受

1

在研究生阶段,我一直身处在一个车身设计实验室当中,实验室大体是研究汽车造型的。因此时常接触到到一些理论讨论车身造型的优劣。我当时的一个思考是,前车灯造型可以和面孔对应起来(毕竟他们之间太容易形成关联了)由此一个车身形态变可以通过对表情的映射创造设计感受。比如上图中左上角。我们做一个方形的的车灯外框,把圆形灯放在中间,它会形成什么样的感受呢?我认为是中性的,就像一个人平静状态下的表情。而你想创造一个进攻性的感受,便可以模拟人/动物进攻时的表情—低头,眼向上看,眼上部变平。如果我想创造一个年轻的视觉感受,道理是相同的,年轻时眼角相对高,而随着年纪增加,眼角会下降。正如左下图,奥迪A3以及奥迪A8系列的车灯,一个更年轻,一个更成熟,而他们对应的消费群是和这个造型高度相关的群体。

这些关于形状的视觉感受便是先天的,因为人们一出生就能读懂周围人的表情,亦是高兴或悲伤。这个机制这对于设计师的意义就在于,你想要创造一种形状,表达特定的视觉感受,便可以研究人先天这种视觉感受可以在哪里形成,模仿那个形态就可以了。比如你要做一个极具进攻性的汽车造型,提取人进攻的表情,映射到车灯中(见右下角上图)为了更突出,进气格栅还模拟了发怒是牙齿露出的形态,也是同样的映射的道理。

2. 人们对“形状”的后天感受

2

 

有些关于形状的感受是基于后天经验的,比如左图,想象它们是多个冰箱的造型,从上向下看来,第一个只是方方正正的冰箱,我的感受是…没什么感受,“没错” “中性”。向下看,我们把四角磨圆,这次感受变了,但依然很模糊,我脑中出现了几种风格:可能是日本的小家电,也可能是复古的mini cooper风格,俄罗斯重工业感觉下的冰箱也有可能,总之不能确定。继续下一张,我们在冰箱门上加了个镀铬的把手,这下日本小家电的感觉没了,因为日本主流风格(如muji)很少这么做。继续下去,冰箱门加上细线字体,这时粗重的感觉也消失了,好像可以确定它更偏向复古风格。最后加上个英国国旗涂装,视觉感受,或者说风格便非常确定了。这个感受在细节中一步步形成,而这些感受都是后天的。

说到这个形态视觉感受的好坏,非常取决与你对英伦+复古的后天经验,比如:你以前使用类似产品的感受,你喜欢的人是否喜欢这个风格,你周边的人评价如何等等,这些后天因素形成了对形式的感受。

3. 人们对颜色的先天感受

3

 

我的颜色感觉向来不是很好,刚毕业的时候我找到一种配色方法:机械的记下几种颜色组合,比如墨绿和深棕,橘红和深蓝,这样在找不到好的颜色搭配时能解燃眉之急。但后来我一直思考,这个颜色搭配的道理是什么,为什么这样的颜色感受会好? 现在想明白了,这是写在基因中的——假设我们的祖先有两类人,一种偏好墨绿和深棕的颜色,一种喜欢另一个颜色搭配。那么第一类人更倾向在肥沃的土地附近生存,那么他们的后代就能更好的繁衍,而另一个种人生存的状况就差一些,基因没能留存下来。我们今天能在这里,一定是生存得更好的人的后代,便也遗传了这种视觉感受的偏好。之下的几个颜色搭配相信有着同样的道理。

现在有很多色彩理论帮助我们寻找好的颜色搭配,比如在色轮中寻找相邻色,补色,相隔120度的三个颜色,等等。我相信背后有一定的道理,但拿绿色和棕色的搭配来说就很难套用到色轮的体系上,所以最好的解释便是:这种颜色感受的偏好是先天形成的。

4. 人们对颜色的后天感受

4

看到红白相间的条纹,我们会联想到什么?麦当劳?袜子?小丑,这些都是后天经历的一些映射。再加入蓝色,我想到了美国国旗,以及图上的美国队长,他正是用上了美国国旗的三个颜色做主色,以便传达一些美式的视觉感受。总的来说,感觉到很上档次。我觉得这和美国本身强大及美国电影确实精彩有关系,这些后天的认知潜移默化地影响了这个配色——视觉感受不错。为了对比,我们用黄绿来替代红蓝,什么都没变,只是颜色变了,感受如何? 美国队长变成了巴西队长,重点是感觉一下没那么高端了,甚至都不像一个正面人物了。

后天的经验影响了我们对颜色搭配美丑的判断。有意思的是,我认为如果美国国旗是黄绿色,而巴西是红蓝,那么我们的视觉感受很可能会发生变化,黄绿变得高端了,而红蓝也许没有现在这么和谐。当然这在当今不好验证,很想找个巴西人问下两个配色他更喜欢哪个? …当然我们需要一个爱国的巴西人。

 

5. 关于排列的先天感受

5

 

上图是公司北门车库前的标识,在我每天上班必经的路线之上。这个标识盘读起来稍有难度,实际上我因为看过太多次,脑中早就了解它该怎么读,也深深知道这是个设计失误。但有意思的是,我无法自拔的,潜意识地,不自觉的还想竖着读。解释只有一种,人先天会聚类地看信息,严谨的说这是格式塔心理学的一部分。如果你有机会来到上地西路6号,便能深切的感受一下你先天对视觉排列的倾向是多么强烈地影响你的感受。

同样对于视觉动线,黄金分割也是一些先天的关于排列的感受,符合规律的感受好些,不符合则差些。黄金分割能创造好的视觉感受可以参见我前面的文章《被玩坏的黄金分割》

 

6. 关于排列的后天感受

6

 

对于布局和排列,我没有找到特别多能够形成后天感受的例子,因为纵观现在的各种布局,大体都能找到自然界中对应的映射。平行细线的布局形式是我看到的为数不多的例子之一,如上图高压塔是我工位向外拍摄的一张照片。同样类似的形式还有集成电路。这些都是自然界中见不到的,姑且称作“平行细线”的一种布局。这种布局因为不在我们祖先的视野中出现过,所以它在后天给我们造就了一种脱离自然的感觉,新时代的感受。也因此当我们看到类似的设计时,我们便感受到了一种新的视觉感受。并将他联系到新的,现代的,科技感的事物之上。比如右下图中望京soho的图片,为什么我们会觉得它很现代,很科技感,便是源于我们后天对科技感布局的映射。

总结

7

视觉感受的形成源于图形各要素感受的加权,而每一种图形要素(形状,颜色,排布,质感,字体,动态)又存在先天和后天两种视觉感受,将它们融合交织在一起,便是视觉感受的最终结果。受限篇幅,文章中只列举了形状,颜色,布局的例证,其他元素的视觉感受形成机制相信是非常类似的。发现本质更利于我们深刻理解,创造设计新的机会,实现变革创新。总之希望有所启发,欢迎讨论。

非专业动画角色绘制

最近尝试画些动画角色,随性的想学学,想着设计相关总能用上。之后买书,在youtube上看教程,再结合上一些随机的凌乱的自我理解,总算可以画一点东西了:

final20170815

对于专业的人,这样的图完全不入眼。但是零基础的人,想要快速上手,也许能找到一些共鸣。分享我的方法及关键步骤:

第0步:绘制铅笔线稿

 

step00

首先画好角色线稿,这本应有很多步骤,但除去练习没什么技巧可谈,我找了一本网红书《漫画技法标准教程-人物基础篇》从第一页模仿直到最后一页,之后基本可以画个角色了。工具的重点是买到颜色较重的铅,2B或者4B的自动铅会好于常用的HB。人物选择上,二次元,大胸妹,肌肉男,画自己喜欢的,学得便会快一些,也容易坚持。

第1步:制作透明线稿

step1

扫描后放入Photoshop,首先用色阶或曲线工具把白色调得够白黑色调节的够黑以方便去除白底儿,如果你的扫描设备够好,这一步可以省去。之后在通道选项卡选择RGB通道并转化为选区(Ctrl+单击RGB通道),Delete删除,如此只剩下黑色人物轮廓了。之后在人物图层下建立一个灰色填充的图层,为什么是灰色? 毕竟要花点时间盯着屏幕画画,保护眼睛啊~

第2步:建立参考颜色

step2

对于初学者,这是取巧的一步,找一个喜欢的卡通人物配色,分别取皮肤的深浅两色,头发的深浅两色,衣服多个颜色的深浅两色。将取出的颜色简单命名并放到一个单独的图层中。(如上图右上角的部分)这样你就站在大师的肩膀上了,而且这个图层可以在今后一直用下去如同你的色板一样。什么?你自己颜色感觉好,用不着参考,那这步都可以跳过~

第3步:纯色块填充

step3

将第一步处理的线稿图层置于最顶层(这样在画色块的时候就不用太考虑边缘是不是整齐了,因为线稿挡住了色块),之后思考自己的画有几个部分,比如这幅,有皮肤,头发,上衣,裤子,鞋子。每个部分建立一个新的图层画色块,能想好颜色最好,没想好颜色也没有关系,因为各个色块在单独的图层,变颜色也容易。 找被遮挡多的色块先画,比如脸的皮肤,这样做的原因是这部分色块的边缘可以画的很随意,毕竟会被头发遮挡,只要头发画的准就行了… 我的工具是wacom笔沿着每个部分画一圈,之后用油漆桶填填充色块。颜色用第二步中我们提取的浅色皮肤,以此遮挡最多的也就是距离你最远的部分开始画,如见画倒最近的部分。大体感觉便有了。

第4步:描绘光影关系

step4

这步目标是把明暗关系表现出来,丰富细节和质感。在每个色块图层上建立一个新的图层,选择当前色块稍暗的颜色,用非常柔和的笔刷(上百像素,百分之3~6的填充率)在各色块上被遮挡的部分轻刷。因为笔画很大不能控制在色块内,这里可以用色块图层作为光影图层的剪切模版。或者更直接的方法:调用色块图层选区(Ctrl+单击色块图层),反选,Delete。这样就可以取出光影图层多余的部分了。画了半天,相比步骤三,貌似区别不大。。。

第5步:暗部填充

step5

根据光线照射方向,人物各个部分都会形成暗部。再每个光影图层上再建立一个新的图层,根据光线的遮挡关系,用选区工具画出勾勒出暗部区域,之后填充当前色块对应的深色(第二步中的深浅色就用上了),填充后有的深浅色边缘变化较为突兀,可以用软橡皮擦涂抹一下, 人物的部分就基本完成了~

第6步:背景及签名

step6

加一个自己喜欢的背景,这里用了一个渐变蓝色加6边型底纹,这个底纹科技感比较强,人物的长衫的感觉有一点中国古代传统服饰的感觉,并不是非常搭配,但无奈没想到更好的,就用它吧。在之后加上人物下方的软阴影,加一个白色的图形元素”Anime“,免得画面光秃秃的一个人,加上签名,隐藏灰色背景使对比更强,完成!

 

相比我的步骤记录,更为推荐的是youtube上MikeyMegaMega的视频教程,详尽清晰,笔笔入神。推荐观看。

体验经济时代下的产品设计

最近听了几次Alex老师的培训课程,很多知识点都有共鸣,拿出来和大家分享

这个课程的主题是在体验经济时代,如何做好产品。什么是体验经济,一个核心观点既是现今我们所处的时代,人们对价值的判断发生了很大的变化,从追求产品实体本身带来的价值,逐步转向追求消费产品过程中体验的价值。传统经济模式下,产品值多少钱,就卖多少钱,而体验经济下,产品实体值多少钱并不重要,甚至产品只是道具,而通过这个道具在虚拟化的场景比如一种社会舆论下,一个精心打造的卖场中,能产生的虚拟化价值可以远远高于产品本身的价值。这就是体验经济时代的特征。

这个变化背后的原因,可以从S.E.T的角度分析

—Economy,经济的变化是最重要的推动力,大家从吃不饱穿不暖的时代跨入了衣食无忧的时代,现在家里的问题,不是东西买不起,而是东西太多放不下。在这个情况下,人的需求就发生了变化,追求商品本身的功能属性,追求性价比已经不是选择商品的第一优先级。我作为一个穷苦环境中长大的孩子深有体会,比如我有100块去填饱肚子,5年前的我可能会花比较少的钱吃饱,剩下的钱买零食屯着。而现在,我想的可能是怎么吃的开心。有人说这不就是有钱了吗? 其实重点不是我有钱了,而是像很多人都有钱了,而一个大的群体经济情况的变化,必然导致商品的变化,以前好卖的现在不一定好卖,以前小众的,现在可能是大众市场。 企业不追随这个变化,往往就比较危险。比如你一味的最求性价比,以前的时代可以活的很好,现在呢,不一定。就拿联想手机说,为什么市场不好,品牌没有优势的的情况下,依然要打高端,我想也是看到了这个消费者变化的大趋势

—Society,社会环境发生了变化,社交媒体发达了,别人干什么你都知道(或叫做信息民主化),这些信息是无形却有力量的手影响人的决策。社交媒体爆发之前,我们购买决策受到的影响可能只是周边的几个人,电视广告等有限的渠道,至少我们还有很多时间自己去思考和判断。现在的影响就不同了,你打开朋友圈,大家在晒新的iPhone,信息下边还写着“来自iPhone7 plus”,各种信息中充斥了这个词,满眼都是。这时你的决策会不会受到影响?几乎是肯定的。有人说我自己不受影响,我都是客观的决策。我认为这只有两种可能,一种,你不是主流群体,没有样本意义。另一种,你自己不承认自己的潜意受到影响。实际上人对事物的判断能受到社交媒体的影响是如此深重,以致我能看到,很多人说,你们联想手机质量太差了,特别差,而实际他从来没用过。所以在这个新的社会环境变化中,企业闷头做事做得很努力,质量不差,当放到市场上依然很吃亏。

重点是,怎样在体验经济的时代做设计,符合这个大趋势? 来看星巴克的例子,普通的咖啡豆,几美分可以买1盎司,炒熟装袋可以卖不到1美元。放到咖啡机里做出来喝,一杯1-2美元最多还可以免费续杯。星巴克一杯5-6美元,不能续杯。但是星巴克非常成功原因在哪里?首先,从体验环境来看,首先它竭尽全力在打造欧陆的风格,但实际上他是美国本土品牌,为什么不打造成美国的风格?因为美国的东西都是傻大黑粗,而星巴克要尽力往精致的欧陆风格上倾斜。这就是要在体验生潜移默化的影响你。你在看咖啡的名字,一个美国企业,点餐盘没一句英文,都是Latin 拿铁,是原汁原味的拉丁文。即使是美式咖啡,都不叫cafe america,而叫cafe americano,顾客在整个体验过程当中,细节还非常多。比如点咖啡时你看零食,可松,芝士。典型的欧洲的精致甜品。所有的餐点都往精致上贴,什么时候你都看不到汉堡在他的橱窗里。点餐的时候就更有意思了,首先星巴克给你各种各样的选项,其实就是定制概念。脱脂,低卡,半糖。最后还在被子上写你的名字,都是强化定制这个服务和体验的感觉,你都不知道为什么就觉得高端了。你点杯型,tall、grande、venti。美国人说这几个词都会显得cool一些,你说small,big,very big,自己说都觉得土。这些所有的体验细节,最后创建的是一个文化,这个文化有一个符号,这个符号就是Starbucks,这个文字及人鱼徽章。这就是整个体验经济的形成。有了这个基础,一杯咖啡的溢价就可以多出200%-300%以上。从成本上讲,一美元的事,5美元卖给你,而顾客还乐得在这买,形成了某种时尚。这个billion dollar business 很大程度就建立在这个体验之上。而不是建立在传统经济成本定价的基础之上。

落实到产品上,依然任重道远。 这里有一个重要的前提,就是你产品质量得有保证,不能掉链子。在产品质量大致相当的情况下,这些点就成为天平上重要的砝码。另外,关注体验经济时代下的产品的变革,Alex推荐《营销革命3.0》,推荐找机会读一下。

武汉大学演讲实录—如何在企业中做好创新设计

好,谢谢大家!让大家久等了。今天上午和下午听了一整天的毕业答辩,当时是这样,大家在上面讲,我们在下面各种挑战。现在呢,反过来了,变成我在上面讲,大家提问。这让我我深深感受到,出来混早晚要还的,是吧,我们挑战了半天大家,一会儿如果大家有什么需要挑战的可以随时问我。

继续阅读“武汉大学演讲实录—如何在企业中做好创新设计”

感谢(前)新华社记者Mark对我的采访和报道

Innovation Marketing团队发布了一系列LTRE研究院晋升者系列报道, 所以就有了这篇Mark对我的采访和报道,原文照搬如下,感谢!

 

联想研究院创新英雄之:会写代码的设计师

2012年3月,一位毕业于“千年学府”的设计师加入了联想研究院。

2017年5月,他在联想集团的“全球技术职称晋升”项目中,晋升为Band 10主任设计师。

他的名字,跟他所做的工作一样,充满了艺术的气息。他就是高歌。

个人照片 截图

来自千年学府的设计师

说起千年学府,你会想起什么大学?其实,中国有一所历千年而不衰的高校——湖南大学。湖南大学前身是建于北宋初年的岳麓书院,它历经千年,弦歌不绝,最终华丽转身为湖南大学。

在设计领域,湖南大学实力不俗。它是Businessweek评出的全球top 60设计院校,那里云集了中国设计教育界的许多权威大咖。在那里,高歌与大师为伴,眼界和专业能力获得了极大的提升。

设计感悟

在湖南大学的求学生活,在诺基亚、腾讯研究院以及联想研究院丰富的工作经历,让高歌对设计有了深刻的感悟。

首先他提出产品成功中“设计的指数作用”,技术,商业,设计是创新产品的三要素,在当今技术同质化,商业拼资本的大环境下,设计这个看似微小的变量越发起到举足轻重的作用。

另外对于设计师,高歌提到“广义设计的重要性”所谓广义的设计,指所有的用户和产品的接触点都可以被设计,设计可以渗透到每个接触点。从用户第一次接触产品的一句话,一个词,比如 “某手机又一次替主人挡住了子弹!”到接下来用户去网站/线下店咨询的体验,再到线上购买,售后服务体验等等,甚至一些看起来不起眼的体验, 比如店面的灯光的颜色,打开包装时的气味,所有都会影响用户的购买决策和二次传播。一个设计师不能局限于把图画漂亮,而是要把自己的知识扩展到广义设计中的方方面面,才能从全局高度做好设计,最终影响到产品的成功。

说到具体的设计,在2016年联想Tech World上展示的业界首款真正的柔性设备技术原型CPlus和Folio,就有高歌和其团队在图形界面设计方面的贡献。因为CPlus设备形态的特殊性,每个人佩戴在手腕上的弯折度,以及抬手查看设备的视角都是不同的。这里的一个创新设计是:不论用户从什么角度看向屏幕,关键信息的部分都可以显示在视线正对的区域,界面需要被重新定义,高歌将其称为Floating Interface。这考验的不仅仅是设计,还包括与此相关的一整套用户体验及解决方案。

此外,高歌团队还设计制作了许多概念影片,比如2016公司新财年誓师大会上,元庆演讲所使用的未来生活场景的视频。

除了柔性设备项目和概念视频,高歌还是联想研究院众多核心设计及孵化项目的主要贡献者,在Keywest,No.5,PhotoMaster等项目上扮演了关键角色。

进军AR
随着整个行业和联想内部战略布局的调整,AR这一热门技术成为了兵家必争之地。面对AR设备设计这一全新的软硬件结合的技术挑战,高歌及其团队不断创新,取得了许多成绩。

AR产品设计跟传统产品设计有一个巨大的不同,也是巨大的挑战——它是一个完全虚拟的沉浸式体验过程。绝大部分的设计团队都是基于现有显示设备进行设计模拟,当往往达不到很好的效果。

高歌团队通过努力,成功地将所有的界面及交互集成到了AR测试设备中,打通了3D 和360度全景界面1:1还原的设计流程,这对团队后续的设计工作推进起到了巨大的推动作用,也为联想研究院探索全新类型设计奠定了基础性的一步,从而使联想设计团队成为了目前业界为数不多的具备这样经验和能力的团队。
会写代码的设计师
与很多设计师不同,高歌是工科背景出身,对于技术有着浓厚的兴趣,拥有很强的代码编写能力。比如他个人很喜欢“愤怒的小鸟”这个游戏,他便自己动手实现了一个。因为了解技术和代码,在设计工作中,他能够顺畅地与研究和工程人员沟通交流。对产品研发的效率也很有助益。

高歌的设计团队也是一个拥有交叉学科背景的团队。成员大多毕业于顶尖院校,比如清华,香港理工,慕尼黑大学等,每年暑假还有斯坦福和哈佛大学的实习生加入到团队中。这种高素质、高学历又有交叉学科技术背景的设计团队,在业界也很少见。

业余爱好:思考

工作之外,高歌最大的兴趣爱好是……思考。他经常把时间花在思考稀奇古怪的问题上,比如“为什么北方动物一般比南方动物体型大?看似无关的问题其实最终会放到工作的创新当中,从动物体型背后的原理导出“同样的设备形态,我们做个24小时待机的TV在电池技术上是没有难度的”他会因为解决了问题,发现了新的规律儿获得成就感

一个爱思考的设计师通常会努力追求新的创意和灵感,我们希望,未来能看到高歌团队更多的创新设计成果。