2016 年 1 月 12 日,豌豆荚发布了 2015 年年度设计奖的结果,以「颜色」为切入点,评选出了包括锤子便签、Airbnb、Fabulous 在内的 8 款年度应用。
根据豌豆荚的后台数据统计,2015 年共有 452052 款新应用在豌豆荚上架。我们按照『红橙黄绿青蓝紫』 7 种颜色给这些应用的主色调归类,其中 33% 的应用选择红色作为主色调,其次是蓝色,占比 20.79%。另外,下载率最高的是采用紫色为主色调的应用,比第二名绿色高出 12%;但以绿色为主的应用也有另一个优势:它获得了比其它应用多 16% 的好评。
红色已经当仁不让地成为了 2015 年的流行色,在开发者 Hwee-Boon Yar 对美国区 App Store 的应用颜色进行的分析中,App Store 免费榜 TOP 200 的红色应用也占据了 43.5%。
从 2011 年开始,豌豆荚设计奖已经进行了近五年的评选,为用户发现了超过 230 款优质的 Android 应用。在过去一年中,豌豆荚设计奖以「美」为切入点,推荐设计和功能俱佳的优质应用,内容被分享超过 13 万次。
一个有趣的事情是,对于设计有追求的应用开发者,在选择自己的主色调上,也是非常深思熟虑的 —— 颜色不仅是对内容的呼应和补充,还承担了传递品牌理念的重要功能:
Airbnb 的四位设计师走过了 4 大洲的 13 个城市,入住了 18 个房间,只为了更好的理解 Airbnb 的理念,最终选定了 Rausch 作为主色调;ENJOY 的设计师则在红黑色、金色和黑色之间做出过艰难的选择;豌豆荚自己的设计师在 2015 年,将原本偏中性的绿色(#3BA24)调整为偏冷的#24AA42…
豌豆荚设计奖对获奖的 8 个应用进行了专访,以下是 8 款获奖应用以及他们在「颜色」上的考虑:
Airbnb
主色调:Rausch
提到 Airbnb,你会想到什么?
这个 App 总是有办法发现这个星球上最独一无二的住所。你可以通过 Airbnb 和亲手设计济州岛海边别墅的设计师共用早餐,或者在喜欢收藏古董的老太太带领下寻访罗马最棒的古着店 —— Airbnb 不仅专注于解决你在旅途中「住」的问题,它还代表着「Belong Anywhere」的归属感。
因此,这个应用的主色调,是一种叫做 Rausch 的温暖的颜色。
Rausch 是 Airbnb 第一个办公室所在的那条街的名字,「如果将它形象化,就是青草地上的一只红色小狗,或是余烬中散发的光芒」,Airbnb 认为,它有着能让品牌脱颖而出的强大力量。
在挑选主色调的时候,四名设计师前往 13 个城市,横跨 4 大洲,一共和 18 个 Airbnb 房主相处,只为了更好的理解 Airbnb 的理念:热情、能量和自信 —— 这正是 Rausch 要传递的信息。
除了 Rausch 以外,Airbnb 还有其它九种颜色,包括Kazan、Beach、Tirol、Foggy 等等,它们同样传递的活力与温暖,并且全部以 Airbnb 创始地附近的街道命名。
锤子便签
主色调:米黄色 #F9F5ED
锤子便签设计的出发点,是做一个「简单好用的便签工具」。简单、干净,纸张铺在一张木头桌子上的感觉,是锤子便签想传达给用户的基调。
在 Smartisan OS 拟物化的风格中,需要带有一定情感,因此锤子便签的设计团队在调色的时候,很少注意到色值,而是看「哪个感觉是对的」。
首先定下来的颜色是便签的纸张的 #F9F5ED,一个感觉非常温暖的米黄色,其它的颜色都和它的色值匹配,形成锤子便签最后的整体感。
在设计的过程中,尽量避免大面积地使用撞色。纸张的米黄色、木板的褐色与标题的咖啡色是锤子便签里主要的三种颜色,它们属于同一个色系,是从明到暗的各个阶段。作为锤子便签里的主色调搭配,传达一种情绪的同时,更好地衬托了信息,形成一种隐形的存在感。
与此同时,「暗示」和「引导」则交给比较具有偏向性,比较有「意义」的颜色。锤子便签选取了在色环上和主色调黄色邻近的两个颜色 —— 「红色」用于删除或禁止的引导,「绿色」则用来引导用户进入 Markdown 模式。显眼的同时看起来也并不扎眼。
豌豆荚一览
主色调:白色
辅色调:绿色
在豌豆荚一览里,你可以一次看完超过 500 个应用的最新内容。
为了将更多空间留给每天更新的 10000 多条内容,豌豆荚一览使用了最干净、信息量最少的白色作为主色调,希望传递明亮、清晰、精致的感觉。
它将自己比喻成一只盛装着丰富美食的白瓷盘 ——
洁白的颜色、考究的造型、细腻的纹理,凸显出盘子的品质感;通过精致的摆盘将丰富的美食摆放在其中,素雅的盘子与丰富的美食之间相辅相成,显出盘中食物的美味,激发出用户的味蕾。
除了白色,豌豆荚品牌的绿色在豌豆荚一览中也同样被使用。绿色代表着向上生长的力量,豌豆荚希望借此传递给用户活力、有朝气的感觉。
这种绿色在豌豆荚的主产品中也经历过一次改版,从拟物的 #3BA24 到更适合 UI 设计、对比度更低的 #2AA42。
ENJOY
主色调:黑色
辅色调:金色,橙色
ENJOY 是一个提供「精选限量美食」的应用。在产品设计的理念里,它希望给用户带去精致感和品质感。
红黄色系、金色、黑色是当时设计团队的三个选择。
因为想区隔于同一个团队的主产品「饭本」的橘红色,凸显精致感;而金色又很难撑起整个应用、设计上不好操作,ENJOY 选择了偏冷的黑色作为主色调,并使用了极少的金色和橙色作为细节的辅助。
一开始,设计团队担心黑色作为主色调会让页面过重和压抑,后来他们通过设计解决了这个担心:首页图片离屏幕边缘有一些留白,开放式设计会让整个页面不那么封闭和沉闷。
作为时尚类、摄影类、阅读类应用最偏爱的颜色,黑色不仅最能突出品质感,同时也和其它颜色百搭。ENJOY 作为一个食物照片众多的应用,黑色能让用户注意力集中在照片本身。
橙色是来源与「饭本」的颜色,但 ENJOY 的橙色比饭本更活泼一些,饭本的橙色偏深红,Enjoy 更偏黄。作为辅助颜色,它用来表明一些产品的重要信息,比如引导、价格、购买、剩余份数。
Fabulous
主色调:Material Design 标准色
作为一款习惯养成应用,Fabulous 不想仅仅做一个冰冷的记录工具,而想成为一个鼓励用户度过漫长旅程的同伴,「神秘而亲切」是 Fabulous 希望传达给用户的感觉。
乍看之下,Fabulous 是一个五颜六色的混合体。
它使用了广泛和大胆的颜色,其中包括 Material Design 色板上的每一种主色调 —— 除了受到 Material Design 的启发,Fabulous 还想借此告诉用户,这是一个丰富多彩的世界(fabulous world),值得用心探索。
在浏览 Material Design 色板的时候,Fabulous 的设计师发现了一种偏红的粉色。它不像蓝色、红色和黄色总让人想起 Facebook、Youtube 和 Google Keep,而是一种非常让人过目不忘、非常「Fabulous」的颜色。
这种颜色的名字是 Redish Pink,设计师将它用在 PC 端和应用底部栏,作为 Fabulous 的品牌色。
Light
主色调:黄色 #FFD200
辅色调:白色
Light 是网易旗下的阅读应用,它以早报、晚报的形式为用户推荐互联网中的精品内容,通过内容和设计,Light 想传达给用户一种明亮并温暖治愈的感觉。
Light 所有的视觉,都是围绕着「点亮」这个概念来设计的。
在色相上,黄色是最能发光的颜色。在人们的思维中,「点亮灯泡」之后的亮光颜色就是黄色;从 Light 的日报、晚报出发,黄色也是太阳和月亮的颜色 ——
这种明亮、柔和的暖黄色 #FFD200,就是 Light 选择的主色调。
作为一款阅读类产品,Light 首先考虑的是方便用户阅读:白色的背景、灰色的文字,黄色被运用在列表页底部、文章页底部等位置,不仅是点亮沉闷的阅读气氛,也是一个结点,用于提醒用户已经读完了一份报纸。
每日故宫
主色调:金色 #CA9F75
辅色调:红色、蓝色、黑色
一代一代中国人在日历中记录生活、标记重要节气中发生的大小事 —— 每日故宫这款一天推荐一款故宫文物的日历应用正来源于这种传统。
它选择的几种颜色,都来源于对传统文化和器物的理解。
每日故宫曾经考虑过红色较为浓烈的颜色,但发现这些颜色会抢过故宫文物的风头、削弱藏品的内容 —— 为了给文物留出更大的空间,每日故宫使用了更为干净的白色。
金色是一个符号性很强的颜色,它的大气、富贵感让它成为世界各地皇家的首选 —— 其中也包括故宫。每日故宫主要突出中间文物部分的陈列,用白色和其它颜色作为铺垫,将金色作为点睛用在关键的地方。
在节庆的日子,每日故宫以传统印章的红色展现节日名称、提点内容;蓝色作为色调里唯一的冷色系,被用在日期上,使画面不那么浮躁,起到区分的效果。
一席
主色调:红色 #CC3434
不仅只有网络视频,一席这个品牌至今已经在四个城市举办了将近 40 场演讲,万晓利、张大春甚至「家在水草丰茂的地方」导演李睿珺都曾经担任过演讲者。
一席的主色调是红色,它来源于一席的现场。通过这种颜色,一席希望让用户感受到现场演讲的氛围,舞台上红色的地毯和投射出来的灯光。
设计团队对于颜色讨论的方向基本都是围绕在「哪一种红色最能代表一席」上,几种方案包括偏亮、偏黄的 #EA3535、鲜明的 #D0021B 和这几种颜色的渐变。最终,一席选择了饱和度较低、更好搭配的 #CC3434 作为主色调。
一席设计师梧桐说,一席想用演讲,让每个人都感受到在生活中的激情、乐趣和韵味。
这也是一席的设计团队想让这个应用的颜色传达的感觉。
豌豆荚设计奖专门为每款获奖应用拍摄了一支短片,来直观的呈现它们的颜色之美,如果你对此感兴趣,可以前往这个页面观看。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/162795.html