豌豆荚年度设计奖:设计无小事,这次我们从颜色说起

 豌豆荚年度设计奖:设计无小事,这次我们从颜色说起

编者注:本文为豌豆荚投稿


2015 年过去了,豌豆荚年度设计奖进行了一次以「颜色」为切入点的评选。

我们在过去一年设计奖的评选和内容制作过程中,发现了一些有趣的事情:那些优秀设计的应用,往往在颜色的选择上也更深思熟虑。

颜色在时尚和 lifestyle 领域一直算是一桩大事。色彩研究机构 Pantone 每年都会评选年度代表色,讲述它们自己的性格和文化含义。

是的,其实在产品设计里面,颜色也是很重要的一个环节。

豌豆荚制定了一套 UI Language,里面描述了设计师对于产品的愿景:我们希望豌豆荚的配色风格是明亮、清晰、精致的,可以给人愉悦的感觉。它像一个盛装着丰富美食的白瓷盘,干净简洁不加装饰。仔细端详后又充满细节,通过细腻的纹理凸显出盘子的品质感。最后,美食被精致地摆盘,显出盘中食物的美味,激发出用户的味蕾。

设计师希望豌豆荚像一个干净的白瓷盘

现在你看到的豌豆荚是以白色和绿色为主色调的。绿色代表着向上生长、活力、有朝气,它最符合豌豆荚的气质,也是我们希望传达给用户的感觉。白色是最干净,最不会抢占注意力的颜色,我们希望干净一点,把更多空间留给内容,用不同的内容去吸引大家,这样能衬托出丰富多彩的感觉。

但事实上,在我们早期做的 Windows 版豌豆荚主色调与现在大相径庭。

早期 Windows 版豌豆荚主界面

第一版的豌豆荚其实是灰色的。

从设计上来说,对于应用界面来讲,大片的颜色不太好处理,像 Google Docs、inbox 这样的应用,也只是在很小的地方露出品牌色,其它还是干净的白色,豌豆荚也是一样。

另一方面,豌豆荚第一个版本作为一个早年的 PC 端产品,还需要考虑用户场景。当时还有很多网吧在使用 CRT 显示器,这会导致很多颜色显示不出来,所以我们当时做最多的一件事情就是在各种显示器上进行测试,包括网吧的显示器,看浅灰色是不是能够被很好的显示。

我们花了很多心思去设计第一个版本的豌豆荚。当时我们有一个愿望,就是希望豌豆荚看起来是这个时代的产品。这并不是一句玩笑,那时候大部分产品的思路还停留在上个时代,看一下 Nokia PC 套件当时的样子就知道了。

而我们当时是拿 Web 2.0 的思路去做这个看起来传统的产品。第一版豌豆荚是浏览器的 内核,每个页面就是一个网页,这跟当时的 PC 产品长得都不太一样,给人耳目一新的感觉。

豌豆荚的灰色一直使用到 2014 年。

14 年初我们发布了豌豆荚 4.0,新增了视频、游戏、音乐、电子书等内容专区。为了强调新功能,我们对之前的设计进行了改动,头部的搜索和功能区由之前统一的灰色变成了独立的绿色背景,「应用」「游戏」「视频」「音乐」依次排列在绿色背景上,很直观地展现我们有丰富的内容。

这个绿色背景一直沿用到 5.0。2014 年 Google I/O 大会上,Matias Duarte 介绍了 Android 新的设计规范 Material Design,鼓励大胆的颜色表达方式,所以我们也在豌豆荚 5.0 中继续使用了这种大色块的设计。

也是从 4.0 开始,我们感觉到豌豆荚需要有自己的设计风格。于是我们开始制定 UI Language 来规范设计,确保所有设计元素都符合「明亮、清晰、精致」的豌豆荚风格。你会看到,在 4.0 之前的豌豆荚界面,如果遮住顶部的 logo,你可能很难区分出它哪一家公司的产品,而 4.0 则是每一个元素都带着豌豆荚的风格。

豌豆荚 3.0 和 4.0 的主界面 从灰色变成了绿色

然而 4.0 的绿色还不是现在豌豆荚使用的绿色,我们在做豌豆荚 5.0 的时候做了一次微调。

4.0 的绿色最初是一位平面设计师给的颜色,我们后来感觉它其实不太适合 UI 设计:这种绿色偏中性,和冷暖色调搭配都不协调。而且这个绿色有点淡,可读性不是很好,于是我们给它加了一点点蓝色,色调调冷了一点,这样和文字的对比度就更强一点,而且,这种有偏向性的颜色,可以和冷色调更好地协调,也能和暖色调形成对比。于是豌豆荚的主色调就从之前的 #3ba24,变成了现在的 #24aa42。

豌豆荚 4.0 和 5.0 的主界面 绿色的色温进行了调整

豌豆荚一直是一家注重设计的公司,也是我们的优势之一,上面的例子就可以看出来我们从初创豌豆荚到今天在这方面花过很多心思。产品设计是一方面,我们在做应用发现的时候,同样把设计当做一件重要的事情来对待,「豌豆荚设计奖」就是一个例子。

我们在 2011 年就设立了这个奖项,想为用户推荐设计优秀、为用户着想的 Android 应用。因为设计奖,豌豆荚也成为了最早开始进行深度应用推荐的应用商店。

2015 年过去了,我们延续「为用户推荐设计最好的应用」这个思路,评选出了这一年当中,在颜色应用上最好的 8 款应用,并且拍了一些短片,希望能把它们的美直观地展示出来。

最终评选出的这 8 个应用,每一款应用的颜色都有设计师的思考和愿景,比如「一席」的设计师告诉我们,红色是希望用户能够感受到一席现场的氛围、舞台上的红毯和投射出来的灯光;「Lignt」的暖黄色则是最接近月亮和灯光的颜色,希望在阅读的时候给人温暖治愈的感觉……

如果你对此兴趣,可以点击这个链接前往页面看一看。

愿 2016 年有更多好设计陪伴你。

年度榜单应用颜色设计豌豆荚
关注极客公园公众号
反馈