Android App Icon:你做對了嗎?

最近在做一個 App,原本只有 iOS 版本,最近花了點時間改成 Android 版本,就剛好想到 App Icon 的設計問題。iOS 跟 Android 的 App Icon 理論上應該要長一樣吧?這樣對使用者來說才會有一致性的印象啊,不過由於兩邊在使用者介面體驗上本來就不太一樣,所以好像也沒道理內容的體驗不同但卻 Icon 卻要求一致吧? (當然市面上還是很多 App 硬是在 Android 上刻出 iOS 樣子的 App 啦)

Android App Icon 設計原則

剛好最近在 Android Developer Blog 上面有一篇文章整理了幾個要點來說明如何設計出好看的 Android App Icon:

  • Icon 的寬高必須是 48dp square ,並且必須提供 MDPI / HDPI / XHDPI / XXHDPI 等螢幕密度對應下的版本。
     
  • 用在 Google play App 列表的 512px 的版本,Icon 內容必須跟 Launcher Icon 一樣(除了額外的 padding 之外)
     
  • App icon 應該是特別為 Android 設計的,應該避免模仿其他平台上的視覺元素 (這其實是在說不能跟 iOS 上的一樣嗎?)
    在 Android 的 Design guideline 的頁面中還有一頁專門在說明要避免使用與 iOS 視覺元素相同的設計,甚至連 iOS 圖的比較都放上去了:

    要求很細,甚至連 List View 裡面的 arrow 都特別說明不能放! 

     
  • Icon 的設計必須是 3D 的前視圖,同時具有一點點從上往下看的投射視角,所以使用者可以感受到一點點的深度就像這樣:
     

     
  • Icon 應該有特別的輪廓設計,也就是說應該避免簡單的圓形或是矩形這類簡單的設計,最好是一些比較獨特的形狀,比如說上圖的範例詞除了圓形之外都是 (但怪的是開發工具中的 Icon generator 不就會產生方的跟圓的嗎?)
     
  • Icon 的設計應該巨觀來看簡單,但是微觀看來必須俱有細節,也就是說必須有一些細微的邊緣效果,漸層,或紋理。
     
  • Icon 應該有稍微的 Drop Shadow 來與背景圖作出區隔,但同時也要避免太重的陰影顏色。
     
  • Icon 應該具有介於 0 ~ 3 dp 的 padding。
     

 

Google 自家的 App Icons

說真的要符合這些原則不容易啊,首先讓我們來驗證 Google  自己的 App 是不是有乖乖地照做呢?
 
在這 41 個 Apps 中符合以上原則的比例是 14 / 41 = 34%,看起來不高啊,怎麼 Google 自己的 Guideline 遵循的比例這麼低啊 XD (這邊我算符合的規則主要是看視覺上比較明顯的 3, 4, 5, 6, 7 項原則)
 
在這幾個符合的 Icon 中,Chrome 為了符合這些原則似乎是做得有點粗糙,感覺是硬加的啊,滿有趣的。
 
 

3rd Party App Icon

另外,再來看看其他 3rd party 的公司有沒有符合,就從之前 裡面來看好了,11 個裡面有 4 個符合。那再來看看符合的 App 是不是真的有為了 Android 特別設計與 iOS  上不同的 icon。
拿 flipboard 來看看,還真的有耶:
 
下次要看一家公司的 Designer 是不是有認真看過 Android Design Guideline 就從 App Icon 來判斷就可以了。
 
前面有說到我們最近在做一個 Android App,Icon 的部分我們也有盡量符合原則:

( App Icon)
 

結論

趕快回去檢視一下你家 App Icon 的 design 吧 🙂
 
iCoding 當初發起的初衷是希望不管你遇到什麼問題或是正在研究什麼技術甚至是看到什麼很棒的外國文章想要分享都可以有一個管道可以發佈出去之後會有人看。如果您也有東西想要寫成文章(不管是多大或是多小的 topic 都歡迎)分享,我們都很歡迎您成為駐站作者,意欲投稿請洽:iCoding@icoding.co)

(資料來源:http://android-developers.blogspot.tw/2013/07/making-beautiful-android-app-icons.html



Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *