电商产品设计中的色彩（电商产品设计中的色彩搭配）

电商产品设计中的色彩（电商产品设计中的色彩搭配）

产品设计中颜色的作用

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

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

如何合理使用颜色单色相应用

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

基础配色方法

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

色相：红色、黄色，这些色调的称呼。

纯度：色相的鲜明程度。

明度：色相的明亮程度。

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

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

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

在色相环中，我们把色彩划分为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里都没有用到，而大家喜爱的都是有色彩加无色彩的方法。在当今“少就是多”的行业风向里，这也可能是经过设计师门的大量尝试和产品经理们的大量调研，选择出的有益于效益的最优方案。

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