电商产品设计中的色彩 - 鱼摆摆电商资讯 

当前位置 鱼摆摆网 > 电商资讯 >

电商产品设计中的色彩

栏目:电商资讯   时间:2019-05-15 09:27

产品设计中颜色的作用

人们接触到一个新鲜事物时,色彩是最容易被记住的信息,色彩的吸引力往往高于其造型所产生的印象。所以人们说,色彩是第一视觉语音。

所以,用对了色彩,可以增强画面感染力,抓住用户眼球,引起用户的共鸣,帮用户建立对产品的认知,提升其对产品的印象和感觉,甚至影响购买决定。

如何合理使用颜色

单色相应用

不同的色相会给用户不同的心理感受,例如红色让人感受到热情、活力,黄色让人感受到温暖、明亮等,各种色相的感受大致如下。


基础配色方法

要讲基础配色,应该先知道色彩的三要素:色相、纯度、明度。

色相:红色、黄色,这些色调的称呼。

纯度:色相的鲜明程度。

明度:色相的明亮程度。

色彩之间的搭配大体上可以分为两种:取得协调的配色和强调设计的配色。

取得协调的配色:通过同一或类似的色相搭配,形成稳定、和谐的印象。

强调设计的配色:通过不同色相之间的相互碰撞,强调色相差异,从而形成某种色彩的印象。

在色相环中,我们把色彩划分为12种基本色相,选取其中某一种色相做为基准色相,这样就会产生包括同一色相、邻近色相、类似色相、中差色相、对比色相、互补色相在内的六种色相之间的关系。


取得协调的配色

1.同色系配色

主色和辅色都在同一色相上。

这种配色可以体现整体画面的统一性,同时也容易形成单调的感觉,所以在明度、纯度和面积上应有所调整,使画面更均衡。

2.邻近色配色

主色和辅色在相邻的色环上。

因为色相上存在微妙的差异,所以配色效果比同色系配色稍微丰富,柔和过渡的色相使得页面看起来更加和谐。

3.类似色配色

主色和辅色相隔一个色环。

类似色色相上含有共通成分,配色也可以体现出和谐、协调的印象,也具有适度的变化和动感,可以体现画面色彩的张弛效果。

强调设计的配色

1.中差色配色

主色和辅色在色环上相差90度。

中差色色相上基本没有共通性,搭配出一种暧昧的印象,表现出舒适感和适度的刺激效果。


2.对比色配色

主色和辅色在色环上相隔120度。

对比色配色也叫相反色配色,色彩对比效果十分强烈。色彩之间互相衬托,形成明快、鲜明的印象,适合于表现活力四射,朝气蓬勃的画面。

3.互补色配色

主色和辅色在色环上相隔150至180度。

互补色在色相环的相对位置,色相差较大,配色体现出十分强烈的视觉冲击效果。同时也容易形成廉价、劣质的印象。

同一画面中,最好不要超过四种色相,除了单色和双色的搭配,业界还有三种、四种颜色的搭配方法,例如:三邻色搭配、三角形配色、正三角形配色、四边形配色、正四边形配色等,就不展开说明了。

经典APP设计中使用的色调

网易云音乐

整个网易系列都以一抹鲜艳的红色在用户脑海中留下了深刻的印象,这里说一说我最喜欢的网易云音乐。

网易云音乐的logo和启动页都以高纯度的红色为主色调,如下图。


网易云Logo.jpg       网易云启动页.png


很明显,网易云音乐logo的红色比启动页中的明度高,我认为原因是,logo在手机屏幕上只占据了不到1/24的面积,适当调高明度有利于在一整个手机屏幕中比其他APP更快吸引用户的注意力,同时也不会使眼睛产生疲劳感;而启动页会占据整个手机屏幕,如果红色明度偏高,会带给用户视觉上明显的疲劳感,同时吸引掉大部分的注意力,分散掉对启动文字的注意。

同时,logo和启动页都以白色为辅色。正如基础配色方法中所说,同色系配色容易产生单调的感觉,所以logo和启动页都使用了其他颜色突出它们的重点部分(logo中的音乐符号和启动页中的文字)。

这里要插入一点,“有色彩”和“无色彩”的说明。

无彩色:指白色、黑色、灰色,这三种色彩没有“色相”属性和“纯度”属性,只有“明度”属性;

有彩色:包含“色相”属性、“纯度”属性、“明度”属性的全部色彩。

白色和红色的配色,在前面讲的几种配色方法中都没有出现,因为白色属于“无色彩”,不在色环上出现。而无色彩在色彩搭配中可以和谐地与任何有色彩搭配。而无色彩没有纯度和色相,只有明度,黑、白、灰中当然是白色明度最高,所以用高明度的白和高明度的红色搭配,碰撞出冲击力,加上红色纯度的合适调整,使得这种冲击力是和谐的,给用户以活力、热情的感觉,仿佛好客的云村在迫不及待等待你的入驻。

有趣的是,白色没有色彩的强烈主张,一般做为衬托的作用出现在画面中,而网易云音乐通过面积的对比,让红色成为白色的衬托,是比较有创新的一点。

另外,我把首页皮肤分别换成“官方红”和“官方白”,效果如下图。

2.png           1.png

很明显,“官方红”和“官方白”只有头部红色和白色的区别。我猜测原因是网易云音乐希望用户可以将注意力放在推荐歌单上。我原以为“官方红”会是将“官方白”中的白色和红色互换,或许试试这样做,效果也不赖呢。于是我发挥主观能动性,把网易云音乐的启动页设置为app的皮肤,效果如下。

图片.png


整体偏暗,如果把明度调高一点,效果也是不错的。而且,就我自己的使用来说,无论换什么皮肤,我都很少看歌单内容,除非真的听腻了,想找新的歌。大多数场景下,用手机听歌,都是在路上走或洗澡时打发时间,直接打开右上角进入上次播放的内容,打开随机模式继续听。所以首页用色不妨大胆一点,不怕赶客的。看到这里,我认为网易云音乐的配色还是比较谨慎的,毕竟互联网市场竞争如此激烈,色彩又是建立用户第一印象的重要元素,颜色的改动可能导致30%用户流失,不得不谨慎。所以包括网易云音乐在内的大多数音乐APP都在给出一定方案的同时,也允许用户自定义,这样也把承担色彩造成后果的责任转嫁了一部分到用户身上。

饿了么、支付宝

没想到饿了么和支付宝还有着这样的缘分,主色调都是蓝色,饿了么被收购后,也和支付宝一样是阿里系的产品。

从logo、启动页,到app内部,除了支付宝的启动页是白色底,饿了么和支付宝主色调都是蓝色。


                   图片.png

图片.png      

有调研指出,绝大多数的人都喜欢蓝色,蓝色被认为是全球范围内最安全的设计用色。



同时,蓝色会给人安全、可靠的感觉。饿了么和支付宝都涉及大量交易,饿了么需要用户相信平台提供的商家安、配送,支付过程安全可靠,支付宝需要用户相信平台提供的资金账户、转账、理财安全可靠,所以不约而同地选择了最安全的蓝色,在配色上和网易云音乐有异曲同工之妙,也选择和最稳妥的白色搭配。

他们的另一个共同点是,不同于淘宝,希望用户在闲暇时花大量时间浏览,饿了么和支付宝更希望在特定时间,比如饭点、跨年夜,促使用户尽快找到目标,完成交易行为。所以安全可靠比引人注目来得更重要,APP内部大面积的白色也可以理解了。

写到这里我不禁想到,BAT产出的APP大多都采用高纯度和偏低明度的单一色系与白色搭配,很难找出配色大胆的产品,是大家生意做大了都得如履薄冰吗?

在特殊节日到来时,饿了么和支付宝都会改变首页头部主色调,迎合节日气氛,因为在这么一天里,拉高用户,尤其是付费用户的活跃度,所以,它们可以稍微降低品牌主色调的存在感,突出节日气氛。例如,饿了么今天已经开始做3月8日女王节的活动,首页头部使用了粉色作为主色调。


图片.png


粉色,会给人甜蜜的感觉,尤其受到女性喜爱。将粉色应用到这种场景,给了女性一种被重视的感觉,从而拉高女性用户的好感度。同时我也注意到,除去首页顶部,APP内其他地方的配色并未改变,一方面是为了不脱离品牌营造的根本形象,另一方面也是为了照顾男性用户吧。

以上是我一些浅显的看法,没想到前面讲到的几种配色方法在我举例的3大APP里都没有用到,而大家喜爱的都是有色彩加无色彩的方法。在当今“少就是多”的行业风向里,这也可能是经过设计师门的大量尝试和产品经理们的大量调研,选择出的有益于效益的最优方案。

一千个人心中有一千个哈姆雷特,色彩也是如此,没有好的用色和坏的用色,根据场合、目的,选择出合适的配色方案就是优秀的。

[ 标签:电商产品设计 ]
  • 全部评论(0
说点什么吧