App的 icon 要怎麼設計??

手機一打開，就是滿滿的ICON，你可以清楚找到你要的東西嗎? 有沒有發現有的ICON一看就會印象深刻，甚至容易聯想得到App的功用，有的則是怎麼樣都想不起來?!因此一個App icon
的辨識度和色彩設計就變得極為重要了。以下整理了幾個App Icon在設計上的重點:

1. 與產品的功能性相呼應

▲Designed by Konstantin Dats.

▲Designed by Konstantin Dats.

▲Designed by Burç Pulathaneli

從上述這幾張圖，是否一看就清清楚楚知道產品功能是啥呢? 應該不用在解釋了吧?! 第一張是拳擊APP，第二張是計數器，第三各就是音樂類的囉~

2. 暗示性的表達

毫無疑問的，隱喻是一種非常好的設計手法，設計師可以運用誇張的圖示、容易理解的形象，將想要表達的訊息傳遞給用戶，特別值得一提的是，這種設計通常很容易讓用戶對你的 icon 產生印象。

不過，隱喻雖然是個淺顯易懂的設計手法，但真正善用的案例卻不多，舉例來說，如果你在 App Store 搜尋饒口令（tongue twisters），會發現以下 10 款 icon，這10 款 icon 雖然都各自擁有不同的設計風格，但真正會吸引用戶目光的，可能只有下排左方數來第四款這個 icon，此 icon 善用了隱喻手法，使用誇張的表情符號外加打結的舌頭，將繞口令這個訊息傳達給用戶，除了此 icon ，剩下的 icon 可以說是毫無特色。

3. 注目性高

一個容易吸引第一目光的icon design總是會伴隨的明視度高或注目性高的配色，經典的像是警戒的●●黃黑配色，在台灣●●黃黑配色則是用在交通的號誌設計和安全標示最多，這是因為在色彩學上，黃黑(或黑黃)配色的設計是明視度最高的，容易讓人一眼就辨識出來。除此之外，次於●●黃黑的配色就是●●黑配亮綠●●黑配橙○●白配紫與○●白配深藍這樣的配色組合，在色彩學上是注目性較高的配色原則。

4. 風格一致性

App開啟後的設計風格亦應與Icon相呼應。

                      
5. 產用商標

如果你正在為知名企業設計icon，請善用他們的品牌商標，因為大部分用戶對這些知名商標都已經有特定的印象，所以就算你在 icon上沒有作任何提示，用戶很有可能直接猜出該 App 是屬於哪個領域的應用或是它所提供的功能（Ex：看到 icon 上出現 Nike Logo，你很快的會與健身、鞋子、慢跑聯想在一起），此外，使用品牌商標另一個優點是，它有可能吸引一些該品牌的忠實用戶來下載。

Nike – 與運動相關的服務
Madonna – 影音方面的app
Jamie Oliver – 與食譜相關

同時不要忘了，消費者在選擇APP時，是在一堆的app當中選擇，此時icon的大小不同，在一群icon當中，能見度有多少，亦是不能忽略的項目。以下是tuts網站做的一個對照表，稍微調整後，icon的辨識度便提升了。

原來的版本:

在app store中的結果: 找得到Rachel 以及 iclearly嗎?

稍微做了一些調整後的結果:

在App store grid 中，辨識度提高了:

6. 針對不同平台設計不同的ICON

除了上述共通原則之外，不同平台之間，使用習慣確實有些差異。因此，針對不同平台之間，App的icon 還是有些差別，除了風格差異及平台使用習慣不同之外，尺寸亦不同。下面是網路上一些相關資料。

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 圖的比較都放上去了。
• 
• Icon 的設計必須是 3D 的前視圖，同時具有一點點從上往下看的投射視角，所以使用者可以感受到一點點的深度就像這樣：
  
• Icon 應該有特別的輪廓設計，也就是說應該避免簡單的圓形或是矩形這類簡單的設計，最好是一些比較獨特的形狀，比如說上圖的範例詞除了圓形之外都是 （但怪的是開發工具中的 Icon generator 不就會產生方的跟圓的嗎？）
• Icon 的設計應該巨觀來看簡單，但是微觀看來必須俱有細節，也就是說必須有一些細微的邊緣效果，漸層，或紋理。
• Icon 應該有稍微的 Drop Shadow 來與背景圖作出區隔，但同時也要避免太重的陰影顏色。
• Icon 應該具有介於 0 ~ 3 dp 的 padding。

下面是幾個國外網站，介紹如何製作IOS使用的APP ICON，甚至Adobe Illustrator一步步的進行教學，還蠻實用的。

How to design app icons for iphone and ipad?
A step-by-step guide to design an iphone app icon.
Application image design guidelines. --> for iphone and android