iOS app icon 通用設計規則

發表於2015-12-13

轉載無限歡迎,但請註明「作者」和「原文地址」。轉載請在文中保留此段,感謝您對作者版權的尊重。如需商業轉載或刊登,請聯絡作者獲得授權。

 

前言:在知乎上看到了這個問題:「為什麼很多 App 圖示使用白色,而不是用 Brand colors 做底色?」。於是我乘此機會研究了 iOS 下的 App Icon,總結出下面幾條設計規則。雖說是規則,也並非絕對,只是一個可以簡單套用的設計技巧而已。我將在本文列舉一些優秀的 App 圖示加以佐證。

 

總結出的 3 條設計「規則」:

 

1. 如果品牌 LOGO 在「顏色」上的展示訴求大於「造型」的話,可用白色背景加品牌 LOGO;

2. 如果品牌 LOGO 「造型」足夠獨特具有高識別度,或對「顏色」訴求相對較小的話,則可用品牌色做背景;

3. 如果產品擁有具象的形象物或場景的話,可設計「擬物化」或「 場景化」的圖示(遊戲圖示居多)。

 

先讓我們來看下適用於第一條規則的。

1

如果品牌 LOGO 在「顏色」上的展示訴求大於「造型」的話,可用白色背景加品牌 LOGO。

怎麼理解這句話。

首先我們第一眼可以感覺到這些圖示裡的 LOGO 顏色都是較為豐富的。

其次,像「Google」、「Bubble Chat」、「Hyperlapse」等都是造型非常簡單的,「Hyperlapse」甚至就只是一個圈。這些 LOGO 比起形狀,顏色會給人更深的印象。

另外像「Google」、「Medium」將帶色彩的 LOGO 作為主要形象充滿 VI 系統中,被人們所熟知。因此使用白色背景,用形象的 LOGO 更將有辨識度,被人所接受。

 

再來看下第二條規則。

2

如果品牌 LOGO 「造型」足夠獨特具有高識別度,或對「顏色」訴求相對較小的話,則可用品牌色做背景。

理解了第一條的話,這條比較好說了。上面這組圖示中,除了「Memoir」外,大家可以發現圖示中的 LOGO 圖形都是比較有獨特性、高識別度的。並且這些 LOGO 圖形自身對顏色的訴求也並不大,因此可直接使用品牌顏色做背景,上面放個 LOGO 形狀。

當然出於差異化或美觀,可以讓 LOGO 多些細節,如「Airbnb」的陰影和「美拍」的漸變色。

 

再來看下第三條。

3

如果產品擁有具象的形象物或場景的話,可設計「擬物化」或「 場景化」的圖示。

相信這個很好理解。遊戲圖示自然不用說,比如「Monument Valley」、「Hearthstone」。像 「Dueling」和「Twitterrific」這類自身有形象物的產品,也可以用形象物直接作為圖示。「Sooshi」和「Wunderlist」也類似,只是「Wunderlist」的這枚圖示直接作為 LOGO 使用,被人所知。

 

最後要說的是,圖示不是獨立存在的,一定要結合產品本身設計。

 

舉例來說 iOS 9 的「音樂」圖示相較 iOS 7 就有很大不同。為什麼要改?這是因為產品本身發生了鉅變。

4

iOS 7 時期,系統自帶的「音樂」App 更偏向一個工具,同步 iTunes 上的音樂,然後作為播放器播放。而 iOS 9 的「音樂」它自身帶有大量內容,做了流媒體服務。人們可以通過這款 App 去瀏覽發現音樂,而不單單是個音樂播放器了。並且,「音樂」App 中的介面搭配了大量色彩配色,從介面本身展示給人這是款「多彩」的 App。

因此,當軟體發生了這樣的鉅變後,自然不能使用單調的 iOS 7 圖示了。當然,這次改變更重要的作用就是告訴人們「俺已經變身啦!

相關文章