APP圖標的色彩
英文原文:The Colors Of An App Icon
作者(author):https://推ter.com/stuartkhall
在 Appbot,我們看到了大量的 app 圖標(icon)【注1】,然而在 app 測評方面,為我們提供了很多見解。
過去我已經研究了很多東西,包括 app 的描述、截圖、取名及國家。其中,常常讓我真正感興趣的是 app 的圖標,但是,如何更好地研究才是有效的?對此,我一直沒有好的思路。
最近,我偶然發現了一個牛逼的 Ruby 資源庫 Miro,它可以從一副圖片提取出支配色(dominant color)。
找出 app 的支配色,得到了一些真正有意思的結果。
方法
Google Maps Icon
接下來,我根據標準的網頁顏色【注2】(加上黃色)匹配最接近的每種網頁顏色。將其分組為大致的名字。
- #02601e -> Green
- #a8120c -> Maroon
- #0c44de -> Blue
- #bdbfc0 -> Silver
- #f4b510 -> Yellow
- #717973 -> Gray
- #24721b -> Green
- #2d0d0e -> Black
Colors Of Google Maps
忽略黑色、白色和灰色,根據四種最普通的顏色,我將它們繪制到色輪(Color Wheel)上。
大尺寸的圖標代表了該圖標包含的那種顏色的、更大的比例。
前 200 個免費的 iOS app
把前 200 個免費的 iOS app 繪制在色輪上:
我們可以看到藍色和紅色 app 圖標的分布群,還有散開的綠色。粉色和紫色比例較低,Snapchat 擁有黃色。
前 200 個付費 iOS app
前 200 個付費 iOS app 和免費的差異:
和免費比起來,雖然有著類似的藍色、紅色和綠色的分組,但是付費 app 通常使用更多的顏色,大部分圖標只使用一種顏色的情況較少,這導致了在我們的色輪上分布著更多小圖標。
最新的 100 個 iOS app
在寫作本文時,我接著繪制了發布到 App Store 的、最新的前 100 個 iOS app。我們猜測,這將比上圖更能代表 App Store 總體的、更有代表的比例。
這和前 200 個付費 iOS app 的色輪圖,有著非常相似的結果。
前 200 個 iOS 社交媒體圖標
所有的社交網絡 app 都是藍色的,對吧?推ter、非死book 等。
結果顯示,群分布和所有類別的圖都相似,只是綠色有更多的比例。
前 200 個 iOS 游戲
很多游戲比起應用程序而言,有著更多復雜的圖標。這可以從使用的顏色伸展上更多地看到。
前 200 個免費的 Mac app
常常有個感覺,在我的 OS X dock 上,90% 的 app 是藍色的,但是下圖和你想的一樣嗎?
上圖顯示了在 Mac 上藍色比例和 iOS 類似,還有很多使用紅色和綠色的圖標。
按照排行榜排名排序
來自 MacStories 的 Graham 給我提了一個好建議,根據排行榜來繪制 app 的支配色。我嘗試了排行前 100 名的免費 app。
圖標越大的,排行也就越高。
在 Google Play 上排名靠前的免費 app
發布了本文的原始版本后,很多人請求我提供 Google Play 的對比。我的結果來自于澳大利亞的 App Store。
對我而言,看起來非常相似:)
Google Play 上排名靠前的免費游戲
和 iOS 做對比。
你應該為圖標選擇什么顏色?
歸根結底,真的要看你的 app 了,它是做什么的以及你的目標群體。然而,你或許適合這三種分類的其中一個。
墨守成規
你喜歡隨大流,就選藍色或紅色。
我喜歡與眾不同
或許你可以選擇綠色,而不是最流行的,但是你不要太有傷風化。
叛逆型
你嘲笑那些墨守成規的人,鄙視那些自認為與眾不同的人。那么,請選擇粉色或紫色,使用它們,就像它們是你自己的一樣。
如果你喜歡本文,請幫我多多推薦。然而,在你閱讀本文時,為什么不看看我們的 Appbot 呢:)
感謝閱讀!
- 注1:圖示(Icon),亦作圖標,廣義上指所有有指示作用的標志,在中文中一般指電腦屏幕的桌面上用來指示用戶運行各種操作的圖像,作為字符顯 示的重要輔助。圖標的大小多數都是一個正方形的像素矩陣,從 16×16 到 256×256 等不同大小。亦有一些系統可以使用矢量的圖標,甚或一些大至 512×512 的圖像矩陣。https://zh.wikipedia.org/wiki/%E5%9C%96%E6%A8%99
- 注2:網頁顏色(Web Colors)是在互聯網上制作網頁時,表示各種顏色的方法。顏色可以用三組十六進制數字表示,部分常用顏色也可以用英語名稱表示。此外還有直接使用多組十進制表示的方法。https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2