电商产品设计中的色彩

时间:2022-09-14 | 标签: | 作者:Q8 | 来源:网络

小提示:您能找到这篇{电商产品设计中的色彩}绝对不是偶然,我们能帮您找到潜在客户,解决您的困扰。如果您对本页介绍的电商产品设计中的色彩内容感兴趣,有相关需求意向欢迎拨打我们的服务热线,或留言咨询,我们将第一时间联系您!

产品设计中颜色的作用

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

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

如何合理使用颜色

单色相应用

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


基础配色方法

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

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



纯度:色相的鲜明程度。

明度:色相的明亮程度。

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

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

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

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


取得协调的配色

1.同色系配色

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

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

2.邻近色配色

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

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

3.类似色配色

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

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

强调设计的配色

1.中差色配色

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

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


2.对比色配色

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



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

3.互补色配色

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

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

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

经典APP设计中使用的色调

网易云音乐

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

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


       




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

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

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

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

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

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

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

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

           

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


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

饿了么、支付宝

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

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


                   

      

有调研指出,绝大多数的人都喜欢蓝色,蓝色被认闵行小红书视频本身有流量为是全球范围内最安全的设计用色。



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

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

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

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



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

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

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

电商产品设计中的色彩

上一篇:如何树立品牌影响力?
下一篇:用户心理学是什么?关于电商产品设计的思考


版权声明:以上主题为“电商产品设计中的色彩"的内容可能是本站网友自行发布,或者来至于网络。如有侵权欢迎联系我们客服QQ处理,谢谢。
相关内容
扫码咨询
    电商产品设计中的色彩
    打开微信扫码或长按识别二维码

小提示:您应该对本页介绍的“电商产品设计中的色彩”相关内容感兴趣,若您有相关需求欢迎拨打我们的服务热线或留言咨询,我们尽快与您联系沟通电商产品设计中的色彩的相关事宜。

关键词:电商产品设计

关于 | 业务 | 案例 | 免责 | 隐私
客服邮箱:545321@QQ.com
电话:400-021-1330 | 客服QQ:545321
沪ICP备12034177号 | 沪公网安备31010702002418号