很多開發(fā)者在開發(fā)應(yīng)用時,可能直到最后才會想起應(yīng)用圖標。然而,從宣傳推廣或吸引應(yīng)用商店用戶的眼球來說,應(yīng)用圖標至關(guān)重要。正如實體店的標識或櫥窗一樣,圖標不僅要體現(xiàn)應(yīng)用的核心價值,還要能吸引用戶點擊。
應(yīng)用圖標有問題,就算應(yīng)用本身再好也無濟于事。很多用戶并不會深入了解或使用應(yīng)用。所以一開始便考慮應(yīng)用圖標的設(shè)計方案很有必要,并以嚴謹?shù)膽B(tài)度選定最合適的方案。
對此,我們撰寫了本指南,分兩部分進行介紹如何設(shè)計和確定最適合的圖標。首先,讓我們來了解應(yīng)用圖標的基本知識。(敬請關(guān)注博客的第二部分:如何進行 A/B 測試,甄選最佳圖標。)
讓圖標在應(yīng)用商店中脫穎而出
您可能已經(jīng)有了應(yīng)用的初步想法,或者可能已經(jīng)快要完成開發(fā)(恭喜!)。如果把應(yīng)用比做產(chǎn)品,圖標就是營銷。出色的圖標對應(yīng)用發(fā)布至關(guān)重要。現(xiàn)在,不妨測試一下設(shè)計,看看哪款圖標會讓用戶忍不住要“安裝”!
設(shè)計圖標時,需要牢記以下幾點:
1. 無論大小,“好看”很重要(還要有特色)
圖標會出現(xiàn)在各種屏幕和菜單中。有些設(shè)備可能支持視網(wǎng)膜顯示屏,有些則沒有。在設(shè)計應(yīng)用的圖標時,必須適配各種硬件環(huán)境及分辨率。
設(shè)計不同尺寸的圖標,并在多種環(huán)境下測試。
設(shè)計要簡單,專注于單個要素或形狀。
縮放時,圖標應(yīng)清晰可辨。
我們發(fā)現(xiàn),大多數(shù)設(shè)計師都借助 Illustrator、Photoshop 或 Sketch 等軟件來實現(xiàn)圖標的可縮放性。對于第一次參與圖標設(shè)計的新手來說,最好使用模板。AppIconTemplate.com 提供適用于 Photoshop 的免費版本。
2.簡單明了
應(yīng)用商店匯集了數(shù)百萬應(yīng)用。在瀏覽應(yīng)用商店時(假設(shè)從左向右讀),用戶首先看到的是圖標,其次是應(yīng)用的標題和預(yù)覽圖。如果通過圖標就能大概了解應(yīng)用的功能,用戶會覺得很方便。
總是依賴于應(yīng)用的預(yù)覽圖像并不可靠(例如,如果進入熱門榜單,應(yīng)用的預(yù)覽圖像就不予顯示)。圖標要有特色,要與眾不同。
以下是一些經(jīng)驗法則:
優(yōu)秀圖標的共同點是設(shè)計簡單明了。如果不是像 Facebook 或 Google 一樣的知名品牌,就別太依賴自身 logo。
無論主要功能(例如可以使用購物車的優(yōu)惠券應(yīng)用)、主要角色(例如游戲類應(yīng)用)是什么,圖標都應(yīng)該代表應(yīng)用的核心品牌價值。
圖標的顏色應(yīng)醒目,同時反映應(yīng)用內(nèi)的配色方案。
Gmail、Dropbox 和《跳跳先生(Mr. Jump)》的圖標在傳達應(yīng)用理念方面做得非常出色。它們在傳達信息的同時,還突出了應(yīng)用的獨特賣點。
3. 醒目
假設(shè)用戶下載了一款應(yīng)用,隨后關(guān)上了手機屏幕,過了幾小時再打開。如果用戶手機里的應(yīng)用很多,那么要找到特定應(yīng)用通常會花點時間。這時,如果您的應(yīng)用能夠一眼就認出來,對用戶來說會方便很多。
專注于獨特的形狀或物體。想想 Instagram 的老式相機,或者 Snapchat 的幽靈。尋找既醒目又能突出獨特賣點的切入點,例如 Instagram 的精美照片和 Snapchat 的“閱后即焚”照片。
光靠形狀不夠,還應(yīng)該選擇對比度高的醒目顏色。LINE 和印象筆記(Evernote) 在這方面做得很好,兩者將綠色與截然不同的顏色進行了鮮明對比。綠色也讓它們脫穎而出(只需將 LINE 的綠色與 FaceTime 比較便能看出)。
4. 避免使用文字
如果可以,避免在圖標中使用文字。
一方面,文字不易閱讀。看到上面的小圖標了嗎?在窄菜單中,圖標中的文字將難以辨認。
另一方面,在應(yīng)用商店、手機屏幕和菜單中,應(yīng)用名稱會被標注于應(yīng)用的下方或旁邊。使用文字,尤其是應(yīng)用的名稱,會顯得多此一舉。
5. 背景同樣很重要
不是每個人都用默認壁紙。有些人會選擇淺色背景,有些會選擇深色,還有一小部分會選擇彩虹背景。應(yīng)用會顯示于背景之上,因此測試圖標顏色時,務(wù)必要始終做到顏色“醒目”。需要檢查:
常見的默認設(shè)備壁紙
應(yīng)用所支持平臺的應(yīng)用商店背景
ROYGBIV 和黑白譜(紅、橙、黃、綠、藍、靛、紫、黑、白、灰)
雖然聽起來有點乏味,但如果因為圖標與背景(例如黃色)不合適而需要重新設(shè)計圖標時,會發(fā)現(xiàn)這樣做能節(jié)省大量時間。
我們已經(jīng)介紹了快速上手的應(yīng)用圖標模板和一些重要的設(shè)計原理。您可以使用不同的配色方案和圖案模擬一些概念,請設(shè)計師朋友進行設(shè)計,然后進行測試。記住要給出多個設(shè)計方案。