VISION

App主色调选择需要注意什么?

颜色在时尚和 lifestyle 领域一直是很重要的事情。色彩研究机构 Pantone 每年都会评选年度代表色,讲述它们自己的性格和文化含义,上个月同时入选 2016 流行色的两个颜色想必大家还有印象。


根据豌豆荚的后台数据统计,2015 年,共有 452052 款新应用在豌豆荚上架。我们按照红橙黄绿青蓝紫 7 种颜色给这些应用的主色调归类,其中 33% 的应用选择红色作为主色调,其次是蓝色,占比 20.79%。另外,下载率最高的是采用紫色为主色调的应用,比第二名绿色高出 12%;但以绿色为主的应用也有另一个优势:它获得了比其它应用多 16% 的好评。


我们在过去一年豌豆荚设计奖的评选和内容制作过程中,发现了一些有趣的事情:往往设计优秀的应用,在颜色的选择上也更深思熟虑。于是 2016 年初,豌豆荚的年度设计奖从「颜色」的角度评选出了 8 款年度应用。


最终评选出的这 8 个应用,每一款应用的颜色都带有设计师的思考和愿景,它们在颜色这件「小事」上倾注的,往往比你想象的要多:


Airbnb


主色调:Rausch


世界上第一个 Airbnb 房屋,是在一条叫 Rausch Street 的街上诞生的。而 Airbnb 的主色调,就是一种叫做 Rausch 的温暖颜色。

 

App主色调选择需要注意什么?

 

在挑选主色调的时候,四名设计师前往 13 个城市,横跨 4 大洲, 只为了更好的理解 Airbnb 的理念:热情、能量和自信 —— 这正是 Rausch 要传递的信息。


除了 Rausch 以外,Airbnb 还有其它九种颜色,包括 Kazan、Beach、Tirol、Foggy 等等,它们也都是以 Airbnb 的社区街道命名的。


Airbnb 总是有办法发现这个星球上最独一无二的住所。你可以通过 Airbnb 和亲手设计济州岛海边别墅的设计师共用早餐,或者在喜欢收藏古董的老太太带领下寻访罗马最棒的古着店 —— Airbnb的象征意义,远远超越旅行本身,它所构想的,是一个「家在四方」的世界。


锤子便签


主色调:米黄色 #F9F5ED

 

选择App主色调时需要注意什么


锤子便签设计的出发点,是做一个「简单好用的便签工具」。简单、干净,纸张铺在一张木头桌子上的感觉,是锤子便签想传达给用户的基调。


对于锤子便签设计师来说,设计一款应用的时候,通常跳到脑海里的第一个就是颜色。比如锤子便签这个简单的应用,第一个想到的就是温暖的米黄色。而 Smartisan OS 的应用商店就会想到红色、邮件是蓝色。因为商店的感觉是琳琅满目的,像糖果店,有温暖的灯光、喜庆的气氛;而邮件就表达出冷静的感觉,是非常默认的工作道具,给人的定位就是系统里不可或缺的,强调效率。


在 Smartisan OS 拟物化的风格中,需要带有一定情感。首先定下来的颜色是便签的纸张的 #F9F5ED,它是一个偏暖的颜色,是橙色转到明黄中间的一个色度。锤子便签的设计师在调色的时候喜欢记色值的 H 值,那代表了一个颜色的色偏向,而 40 就是橙色和黄色之间的一个值。


在设计的过程中,设计师尽量避免大面积地使用撞色。纸张的米黄色、木板的褐色与标题的咖啡色是锤子便签里主要的三种颜色,它们属于同一个色系,是从明到暗的各个阶段。作为锤子便签里的主色调搭配,传达一种情绪的同时,更好地衬托了信息,形成一种隐形的存在感。

豌豆荚一览


主色调:白色 #FFFFFF

辅色调:绿色

 

App主色调选择需要注意什么?

在豌豆荚一览里,你可以一次看完超过 500 个应用的最新内容。


为了将更多空间留给每天更新的 10000 多条内容,豌豆荚一览使用了最干净、信息量最少的白色作为主色调,希望传递明亮、清晰、精致的感觉。

它将自己比喻成一只盛装着丰富美食的白瓷盘 ——


洁白的颜色、考究的造型、细腻的纹理,凸显出盘子的品质感;通过精致的摆盘将丰富的美食摆放在其中,素雅的盘子与丰富的美食之间相辅相成,显出盘中食物的美味,激发出用户的味蕾。


除了白色,豌豆荚品牌的绿色在豌豆荚一览中也同样被使用。绿色代表着向上生长的力量,豌豆荚希望借此传递给用户活力、有朝气的感觉。


这种绿色在豌豆荚的主产品中也经历过一次改版,从拟物的 #3BA24 到更适合 UI 设计、对比度更低的 #24AA42。

ENJOY


主色调:黑色 #1A1A1A


辅色调:金色、橙色

 

 

ENJOY 是一个提供「精选限量美食」的应用。在产品设计的理念里,它希望给用户带去精致感和品质感。


一开始,Enjoy 里商品较少,每样商品都附有图片、摘要,希望给用户「阅读」的感觉。随着商品渐渐增多,设计师不断做平衡,取消了摘要,新增了附近商品,总体希望产品能有「精致感」。


红黄色系、金色、黑色是当时设计团队的三个选择。


因为想区隔于同一个团队的主产品「饭本」的橘红色,凸显精致感;而金色又很难撑起整个应用、设计上不好操作,ENJOY 选择了偏冷的黑色作为主色调,并使用了极少的金色和橙色作为细节的辅助。


一开始,设计团队担心黑色作为主色调会让页面过重和压抑,后来他们通过设计解决了这个担心:首页图片离屏幕边缘有一些留白,开放式设计会让整个页面不那么封闭和沉闷。ENJOY 的黑色偏灰一些,是偏冷一点的黑色,黑色有一些冷感或让整个页面看起来更精致。


作为时尚类、摄影类、阅读类应用最偏爱的颜色,黑色不仅最能突出品质感,同时也和其它颜色百搭。ENJOY 作为一个食物照片众多的应用,黑色能让用户注意力集中在照片本身。


橙色是来源与「饭本」的颜色,但 ENJOY 的橙色比饭本更活泼一些,饭本的橙色偏深红,Enjoy 更偏黄。作为辅助颜色,它用来表明一些产品的重要信息,比如引导、价格、购买、剩余份数。


Fabulous


主色调:Material Design 标准色

 


作为一款习惯养成应用,Fabulous 不想仅仅做一个冰冷的记录工具,而想成为一个鼓励用户度过漫长旅程的同伴,「神秘而亲切」是 Fabulous 希望传达给用户的感觉。


乍看之下,Fabulous 是一个五颜六色的混合体。


其实 1.0 的 Fabulous 使用的是黑白两色和一些相对灰暗柔和的色调,但设计师发现这样的配色无法激发用户的情绪。于是 2.0 开始尝试一些大胆的色调,并且收到很多积极的用户反馈。于是在最新的 3.0 版本,Fabulous 使用了更加广泛和大胆的颜色,其中包括 Material Design 上的每一种主色调 —— 这除了收到 Material Design 启发之外,设计师还希望借以告诉用户:这是一个丰富多彩的世界(fabulous world),值得用心探索。


在浏览 Material Design 色板的时候,Fabulous 的设计师 Taylor Ling 发现了一种偏红的粉色。它不像蓝色、红色和黄色总让人想起 Facebook、Youtube 和 Google Keep,而是一种非常让人过目不忘、非常「Fabulous」的颜色。


这种颜色的名字是 Redish Pink,设计师将它用在 PC 端和应用底部栏,作为 Fabulous 的品牌色。

Light


主色调:黄色 #FFD200

辅色调:白色

 


Light 是网易旗下的阅读应用,它以早报、晚报的形式为用户推荐互联网中的精品内容,通过内容和设计,Light 想传达给用户一种明亮并温暖治愈的感觉。


Light 所有的视觉,都是围绕着「点亮」这个概念来设计的。设计师希望用户看见 Light 的第一感觉就是「眼前一亮」—— 不论是从视觉,还是产品、交互、动画层面来说。


在色相上,黄色是最能发光的颜色。在人们的思维中,「点亮灯泡」之后的亮光颜色就是黄色;从 Light 的日报、晚报出发,黄色也是太阳和月亮的颜色 ——


这种明亮、柔和的暖黄色 #ffd200,就是 Light 选择的主色调。


从产品气质出发,作为一款阅读类产品,首先要考虑的是方便用户阅读:白色的背景、灰色的文字,配上精美的图片,整个界面很干净;用户阅读起来要顺畅,没有过多干扰色;而黄色作为点睛色,可以最大程度点亮沉闷的阅读气氛。黄色被运用在列表页底部,文章页底部等位置,也是一个结点,可以提醒用户你已经读完了一份报纸。

每日故宫


主色调:金色 #CA9F75

辅色调:红色、蓝色、黑色

 


一代一代中国人在日历中记录生活、标记重要节气中发生的大小事 —— 每日故宫这款一天推荐一款故宫文物的日历应用正来源于这种传统。


它选择的几种颜色,都来源于对传统文化和器物的理解。

首选是白色的主色调。每日故宫曾经考虑过红色较为浓烈的颜色,但发现这些颜色会抢过故宫文物的风头、削弱藏品的内容 —— 为了给文物留出更大的空间,设计师使用了更为干净的白色。


金色是一个符号性很强的颜色,它的大气、富贵感让它成为世界各地皇家的首选 —— 其中也包括故宫。每日故宫主要突出中间文物部分的陈列,用白色和其它颜色作为铺垫,将金色作为点睛用在关键的地方。


在节庆的日子,每日故宫用红色来展现节日名称。红色在此处具有功能性,它以印章形式出现,表示提点性的内容。而且红色作为传统印章的颜色,和中国传统契合,印章的概念强化了特别的日子对藏品选择的意义所在,和日历更好地联接了起来。


日常的日期则选择了蓝色来表现。不同于其他的金色、黄色、红色,蓝色属于冷色系,它的出现可以使画面相对冷静,起到区分的效果。


一席


主色调:红色 #CC3434

 

 

不仅只有网络视频,一席这个品牌至今已经在四个城市举办了将近 40 场演讲,万晓利、张大春甚至「家在水草丰茂的地方」导演李睿珺都曾经担任过演讲者。


一席的主色调是红色,它来源于一席的现场。通过这种颜色,一席希望让用户感受到现场演讲的氛围,舞台上红色的地毯和投射出来的灯光。


设计团队对于颜色讨论的方向基本都是围绕在「哪一种红色最能代表一席」上,几种方案包括偏亮、偏黄的 #EA3535、鲜明的 #D0021B 和这几种颜色的渐变。最终,一席选择了饱和度较低、更好搭配的 #CC3434 作为主色调。


一席设计师梧桐说,一席想用演讲,让每个人都感受到在生活中的激情、乐趣和韵味。


这也是一席的设计团队想让这个应用的颜色传达的感觉。

以上是获奖应用的设计师为我们讲述的应用颜色的故事。我们还专门拍摄了一支短片,试图还原这个应用在设计师眼里最美的样子。如果你对此感兴趣,可以点击这个链接前往页面看一看。

作者:liuyaping
来源:知乎
沈阳App定制开发,唯思科技!