研究完市面上主流APP圖標(biāo)的顏色后,我發(fā)現(xiàn)抖音其實是紅色的

12 評論 5725 瀏覽 13 收藏 19 分鐘

編輯導(dǎo)讀:如果你細(xì)心觀察,會發(fā)現(xiàn)主流的APP圖標(biāo)可以分成八種顏色。APP 圖標(biāo)的設(shè)計是最顯眼的存在,也是能長期影響用戶認(rèn)知的存在。本文作者對市面上的主流APP圖標(biāo)進(jìn)行了整理分析,希望對你有幫助。

各大互聯(lián)網(wǎng)企業(yè)熱衷修改logo、APP圖標(biāo),似乎換個顏色、換個符號,把直角換成圓角,就能實現(xiàn)逆天改命。

在一個手機不離身的時代,App圖標(biāo)的設(shè)計有時候比企業(yè)logo的作用來得大。不信回家問問爸媽,他們可能知道微信、淘寶的圖標(biāo)什么樣,但是不知道騰訊、阿里的logo是什么。

理論上來說,logo或者slogan的變化能反映企業(yè)文化或經(jīng)營理念的一些動向。而手機上App圖標(biāo)則是一種好看的時候無人問津,不好看就會非常顯眼的存在。

我把應(yīng)用商店排名較為靠前的app中按主色調(diào)做了一個分類,并且附上十六進(jìn)制代碼和RGB分布圖。[這里建議不知道三基色(RGB)是什么的同學(xué),先花一分鐘百度一下。]

應(yīng)用商店里下載排名靠前的App中,紅、藍(lán)作主題色的最多,其次是黃和橙,此外還有一些綠色、黑色、白色為主要背景的App。

說明:熟悉ps的同學(xué)應(yīng)該知道,即使同一個色塊,不同地方取色的數(shù)值也有所差異,因此以下數(shù)值只作為參考。此外,漸變色取相對中間位置。

一、RED

紅色主題的App主要選了以下(按灰度排列):

圖示App的灰度大約在60%~75%

紅色作為經(jīng)典色深受中國設(shè)計者的喜愛,單純?yōu)榱俗層脩舾械叫涯浚ㄒ部赡苁抢蹦浚O(shè)計者也會選紅色。

通過對這些紅色RGB值的分析可以發(fā)現(xiàn),顯色度更高的App圖標(biāo),R值都在250以上,也就是會更紅。而R值低于250的圖標(biāo),通常有種厚重感,即深紅,如果在深紅的基礎(chǔ)上再疊加藍(lán)色(B),就容易紅得發(fā)黑。

制圖@科技復(fù)聯(lián)汪

當(dāng)然最后的成色效果還要看G和B的數(shù)值,其中G(綠)基色用得較多的圖標(biāo)是網(wǎng)易云和京東,因此看起來更活潑。學(xué)習(xí)強國G和B值幾乎沒有,紅得很徹底。藍(lán)色用得最多的是小紅書的圖標(biāo),所以它最后呈現(xiàn)出偏洋紅的效果來。

在色彩心理學(xué)中,紅色等暖色有促進(jìn)食欲的作用(排除紅色恐懼癥患者),但是也會讓人聯(lián)想到死亡和血腥。可以說,大多數(shù)要消耗能量的事都與紅色有關(guān),消耗你的錢包也是消耗。

紅色logo的色彩選擇遠(yuǎn)比選口紅色號復(fù)雜,口紅中同一種顏色涂到不同的人身上會有不同效果,即便效果不行還可以疊涂拯救。但基于三基色的調(diào)色板不一樣,普通人大概率會越疊越丑。

完全可以理解設(shè)計者對于紅色的鐘愛,但萬事萬物都講究一個寧缺毋濫。原本象征熱情的紅色,在互聯(lián)網(wǎng)產(chǎn)品過度濫用的情況下,可能也只會讓人反感,回想單位領(lǐng)導(dǎo)的圖紙修改意見:變紅,加粗,放大……

你要問我什么紅最好看吶?當(dāng)然是毛爺爺?shù)募t?。?/p>

二、BLUE

藍(lán)色主題的App主要選了以下(按灰度排列):

圖示App的灰度大約在53%~81%

敏銳的讀者可能也發(fā)現(xiàn)了,藍(lán)色系的圖標(biāo),無論深淺色調(diào),都不會像紅色系一樣,帶來沖擊感:這種沖擊感可能是正向的,也可能是負(fù)向的。

藍(lán)色的最佳拍檔是白色,正好映照藍(lán)天白云的自然景觀,給人以遼闊感,12306倘若把紅色和藍(lán)色位置對調(diào),一定會有非常不同的觀感。同時,藍(lán)色也是更容易顯得嚴(yán)肅的顏色,參考國家反詐中心、交管12123以及公安系統(tǒng)通用的藍(lán)色,尤其是國家反詐中心的App,B項數(shù)值偏低灰度又高,更顯嚴(yán)肅。

制圖@科技復(fù)聯(lián)汪

藍(lán)色組App中,藍(lán)得最徹底的要數(shù)知乎,因為知乎的R值為0,主題色完全由藍(lán)和綠組成。汽車之家由于R和G指數(shù)都低,也顯現(xiàn)出了格外藍(lán)的效果,而12306含G(綠)太多,已經(jīng)脫離了藍(lán)天本色。

所謂自古紅藍(lán)出cp,原因只不過是因為人們愛用紅藍(lán),紅藍(lán)兩色在各種場合出現(xiàn)的頻率也最高,App設(shè)計自然不例外。

藍(lán)色有紅色所沒有的冷靜,也象征著自由、遼闊和智慧(可以理解知乎為什么那么藍(lán)了)。另外,英語里blue本來就含有憂郁的意思,藍(lán)色用得不慎,可能就會給人過于冷靜之感,甚至憂郁。

在App圖標(biāo)的設(shè)計中,藍(lán)色可能并不像紅色那樣一眼就能讓人注意到,但它能夠讓你及時冷靜下來,釘釘這類辦公軟件就絕對不會考慮用紅色。試想如果釘釘是紅色的圖標(biāo),那員工和老板吵架的概率會大大增加,畢竟紅色能量十足。

三、YELLOW

黃色主題的App主要選了以下(按灰度排列):

圖示App的灰度大約在14%~26%

黃色作為光譜中最容易被吸收的顏色,也是人出生最先看到的色彩,天然帶有積極健康的暗示。但黃色是把雙刃劍,情緒穩(wěn)定的人看到它會促進(jìn)情緒穩(wěn)定,悲傷的人看到又會加強這種悲傷。

制圖@科技復(fù)聯(lián)汪

到了黃色主題這一組App,紅色和綠色的占比相差都不是很大,G值越高的顏色越偏向檸檬黃,反之相對暗沉,比如七貓小說和懂車帝。RGB分布存在較大差別的是含藍(lán)量,可以看到,QQ音樂和美團(tuán)含藍(lán)量為0,只由紅綠混合而成。

英語中,有一個短語yellow press / journalism, 即黃色新聞編輯作風(fēng),意思指低級渲染、聳人聽聞且不負(fù)責(zé)任的報道。所以頭條寧愿用紅色也不會用黃色作為App圖標(biāo),倒是微博的底色,似乎從某個角度印證了它現(xiàn)在的社區(qū)氛圍。

盡管黃色有諸多積極暗示,但它也有消極的一面,英語中所謂yellow-belly,指的是膽小鬼和懦夫。

總體而言,黃色并不如紅藍(lán)那么有存在感,飽和度過高顯得土氣,飽和度太低又不夠顯眼,是個并不好操控的顏色。

四、ORANGE

橙色主題的App主要選了以下(按灰度排列):

圖示App的灰度大約在45%~60%

橙色糅合了紅色與黃色的特點,所謂活力橙,比紅色更溫柔,又比黃色更熱烈。除了芒果TV,這些APP用色中R值都在250以上,然而芒果TV依舊顯示出了偏紅的效果,主要是因為它藍(lán)和綠都用得少,探探、快手等同理。

藍(lán)色數(shù)值最高的要數(shù)大眾點評,如果細(xì)心觀察就會發(fā)現(xiàn),大眾點評的圖標(biāo)顏色是所有橙色中看起來最不扎眼的,橙得比較和諧。

制圖@科技復(fù)聯(lián)汪

多數(shù)時候,RGB都占一點的色彩看起來最舒服,只含其中兩種基色甚至一種基色的色彩會由于純度過高帶有厚重感。

橙色是歡快活潑的光輝色彩,作為暖色系中最溫暖的色,容易與居家、生活、安穩(wěn)等關(guān)鍵詞聯(lián)系起來。在一眾生活娛樂、消費App中,探探的用色其實挺耐人尋味,偏紅的橙容易給人一種很曖昧的感覺。

如果有一天微博logo色要換,蠻建議換橙色的。這樣一來不會顯得變化過大讓用戶不適應(yīng)(原本黃+紅),二來又可以增加更多溫暖和諧的理念,再有就是淘寶色或許有賺錢的好運。

五、GREEN

綠色系主題的App主要選了以下(按灰度排列):

圖示App的灰度大約在35%~51%

綠色屬于冷色系,人們樂意將一切與大自然有關(guān)的詞匯都放到綠色身上、energy、growth、harmony、freshness……其功效也最廣為人知:譬如放松、舒緩、鎮(zhèn)靜,乃至保護(hù)視力。

不知道是不是微信坐著移動App王座的原因,綠色圖標(biāo)的App寥寥無幾。一個豆瓣勝在年紀(jì)夠大,估計也懶得花心思再動logo,畢竟老板阿北已經(jīng)夠佛。

愛奇藝用綠色大約與奇異果的象征有關(guān),航旅縱橫不必多言,綠色總能代表一路通暢的意思。為了凸顯穩(wěn)重感,航旅縱橫的G值設(shè)置在了不到200的范圍,灰度略高。

制圖@科技復(fù)聯(lián)汪

以上4個App中,愛奇藝和豆瓣的綠最為接近,他們同樣屬于R值和B值偏低,綠得更純粹一點。而微信和航旅縱橫的綠,一個綠中泛藍(lán),一個綠得很混合。

綠色并非一個很貼近中國傳統(tǒng)文化的顏色,古時以黃色為正色,綠為閑色,所謂綠衣黃里,說的正是尊卑反置??梢娫趥鹘y(tǒng)文化里,綠色并非那么好的顏色,日常用語中也有形容一個人臉都“綠”了的說法。

可是綠色又是大自然的顏色,與生長和春天有關(guān)。如果希望和豆瓣、微信一樣擁有長久的生命力,設(shè)計logo是或許考慮以下綠色。

綠色雖然不是那么有層次和可操作空間的顏色,但看在市場缺乏的份上,以后做App圖標(biāo)設(shè)計,其實可以考慮用綠色。畢竟還有那么多綠沒有人用,檸檬綠、牛油果綠、馬卡龍綠、抹茶綠、孔雀綠、薄荷綠、嘉陵水綠(這個真的好看)、原諒綠……

六、BLACK

黑色系主題的App主要選了以下(按灰度排列):

圖示App的灰度大約在85%~100%

過高的灰度使得黑色的RGB數(shù)值呈現(xiàn)異常統(tǒng)一的狀態(tài)。黑色感相對不重的要數(shù)訊飛文檔,它的RGB值均為58,紅綠調(diào)和下,厚重感減少了許多。soul(深色部分)的RGB值也處于均分狀態(tài),均為27。剪映和得物用的是一樣的黑色,RGB均為1。

有趣的發(fā)現(xiàn)在抖音的圖標(biāo)上,很多人都以為抖音是黑色背景,但當(dāng)把它放到PS里拆開RGB來看,才發(fā)現(xiàn),人家是紅色,只不過紅得太深,就黑了。

抖音不僅大膽用了黑色圖標(biāo),還把這黑色搞得五彩斑斕。當(dāng)年被領(lǐng)導(dǎo)要求五彩斑斕黑的設(shè)計師,看到了嗎?抖音——現(xiàn)成的五彩斑斕黑。

黑色的負(fù)面詞相對其他顏色更多,所以除了跟拍照、相機有關(guān)的軟件,用作主體色的App并不多。

黑色在現(xiàn)代審美的流變中也許變成了更為高級時尚的選擇,但人類千萬年進(jìn)化出來的色彩心理暗示并不會輕易消散。黑色,神秘,且令人恐懼。

黑色用得好還是可以出彩,只是它并不適合作為占據(jù)更大面積的背景色,它更適合在淺色的襯托下作為logo基準(zhǔn)線,如下——黑白配的很多App。

七、WHITE

白色系主題的App主要選了以下(RGB值均為255 255 255):

百度、優(yōu)酷、58同城、順豐速運、虎嗅、QQ、輕顏相機

圖示App的灰度大約在0~1%

白色系的RGB幾乎一樣(除了58同城有點跳脫),所以就這里就不再一一列出16進(jìn)制代碼以及RGB分布表。

白色能反射全部的光線,具有潔凈和膨脹感。用白色做背景色的App圖標(biāo)應(yīng)該是所有圖標(biāo)里面用色最豐富的,沒有背景色的感染之后,用戶的視線對logo本身的注意力則會加強。

研究表示,空間較小時,白色對易動怒的人可起調(diào)節(jié)作用,這樣有助于保持血壓正常。需要注意的是,本身抑郁的人,最好不要生活在白色過多的環(huán)境,因此,為你的App多設(shè)置一點顏色,或許能讓你開心一點。

一個小tips,采用白色元素,其實不見得都要用純白的ffffff(代碼),也可以考慮在個位數(shù)以內(nèi)增加RGB的值,可能會有不一樣的收獲。

八、PINK OROTHER

粉色系主題的App有B站、美柚、韓劇tv等,這是一個一看就很年輕且女性化的色彩,除了B站,另外兩個App的女性用戶都占大多數(shù)。

還有就是紫色、灰色等冷門選色,這些顏色要么正向暗示太少,要么不夠鮮明,所以很難成為多數(shù)設(shè)計者的心頭好。

當(dāng)我們將顏色一一拆解就會發(fā)現(xiàn),有些App是精心設(shè)計,而有的大概不太對得起造物主賜予眼球分辨三基色的錐體細(xì)胞。

所以,不要覺得App圖標(biāo)的設(shè)計可以敷衍了事,有那么一撥人,會純粹因為圖標(biāo)丑而不想打開那個軟件,比如作者本人。

 

作者:風(fēng)千語,微信公眾號:科技復(fù)聯(lián)汪

本文由 @科技復(fù)聯(lián)汪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 有幾個App不那么主流

    來自廣東 回復(fù)
    1. 大概是顏色比較典型……所以選了它

      來自四川 回復(fù)
  2. 哦吼,哈哈哈哈,不過這些圖標(biāo)顏色的設(shè)計還真的挺讓人上頭的,我也是經(jīng)常點錯,這該死的顏色,這該死的APP,學(xué)問太深,又可以讓我拿來賣弄了

    來自河南 回復(fù)
  3. 笑死,原來抖音的LOGO是五彩斑斕的黑哈哈哈,這怕不是甲方爸爸要求的?

    來自北京 回復(fù)
  4. 就是這些顏色相似的APP讓我經(jīng)常點錯?。”热缙炊喽嗪途W(wǎng)易云和喜馬拉雅。。。

    來自北京 回復(fù)
  5. APP圖標(biāo)得設(shè)計看似簡單,實則背后也蘊藏著很多巧思,自己以前怎么沒發(fā)現(xiàn)哈哈哈

    來自韓國 回復(fù)
  6. 偽需求下聊icon無意義 「微笑」

    來自北京 回復(fù)
    1. 此話有理

      來自四川 回復(fù)
  7. 原來app圖標(biāo)設(shè)計也有學(xué)問,產(chǎn)品同學(xué)在設(shè)計時要好好考量這個方面,圖標(biāo)太丑的app可能就此喪失了一批看顏用戶哈哈哈。

    來自廣東 回復(fù)
  8. 我手機里的app就是按照圖標(biāo)顏色分類的耶,這篇文章讓我了解了原來圖標(biāo)顏色也有這么大的學(xué)問呢

    來自江西 回復(fù)
    1. 又學(xué)到了一招,按顏色分類

      來自四川 回復(fù)
  9. 圖標(biāo)好看與否真的蠻重要的,不好看或者看上去就比較低級的就真的非常有影響。

    來自廣東 回復(fù)