如何設計APP的啟動圖標?

想要在啟動圖標設計上入門,就要先從規範開始學習,然後瞭解不同的風格以及對應風格的設計過程。如果沒有比較明確的學習目標,就會和學習 LOGO 設計一樣無從下手。

4.1啟動圖標的設計規範

說到啟動圖標的規範,首先會想到的,就是 iOS 提供的圖標柵格。通過這個柵格,會規範圖形的尺寸,以及所處的位置。

如何設計APP的啟動圖標?

這個模板和工具圖標的使用方法類似,我們在後面的案例進一步講解。接著,來說明一個更重要的問題,就是啟動圖標畫布的尺寸。

默認的情況下,我們使用 1024 * 1024 尺寸來設計啟動圖標,這個參數在 iOS 和 Android 中都適用。

之所以使用這麼大的尺寸,是由屏幕分辨率的差異和使用場景導致的。

第一,在手機硬件中,根據屏幕規格的不同,展示圖標的實際像素量也不同,即圖標的尺寸會發生改變。

例如在 1x 的屏幕中,圖標使用 6060px,在 2x 的屏幕中,就使用 120120pt,3x 則是 180*180。

如何設計APP的啟動圖標?

第二,不同設備和顯示場景裡,應用的圖標尺寸也不一樣。對於一個真實的項目來說,圖標不是隻放在手機上運行,無論 iOS 和 Android 的 APP 都可以在 PAD 上安裝,圖標尺寸規格就不同。並且,在網頁或者手機應用商店裡,也需要展示啟動圖標,顯示的規格和真實應用列表中又不同。

如何設計APP的啟動圖標?

所以,在 iOS 官方的圖標模版中,我們會看見裡面羅列了非常多的圖標尺寸,我們只需要設計第一個 1024 規格的,將這個圖標置入到 PS 的智能對象,或者 Sketch 的 Symbol 中,就可以一次性生成所有尺寸,不需要我們自己手動調整各種規格的圖標輸出。

如何設計APP的啟動圖標?

應該有同學這時候還會產生疑問,模版裡的畫布就是一個正方形,但是大多數手機的 APP 圖標使用的是圓角,所以,應該如何製作這個圓角,以及它的相關參數呢?

真實項目中,除非項目的特定要求,只需要提交正方形的圖形即可,之後無論是 APP Store,還是多數安卓應用商店,都會自動對該圖形進行裁切,生成符合自己系統的圓角圖標。

如何設計APP的啟動圖標?

如果我們想要在設計出正方形圖形後預覽真實的效果,就可以用我們準備的 PSD 模版,將正方形置入到模版中即可。

如何設計APP的啟動圖標?

在設計已經確認以後,我們就要導出這些圖標。因為啟動圖標有很多擬物的設計或會使用真實的攝影素材,所以應用商店提交的格式會選用位圖格式而不是矢量格式,所以導出啟動圖標,只需要導出對應尺寸的 PNG 即可。

我們提到的這些素材和模版,我們提前整理出來了,下載地址:iOS圖標模板樣機

4.2 啟動圖標的設計演示

4.2.1 圖標形式

如何設計APP的啟動圖標?

在一些比較基礎的應用類型中,通常會直接使用工具圖標的圖形設計啟動圖標。因為基礎的 APP 服務大多有表意極其清晰的工具圖標與之對應,例如郵箱、計算器、音樂、地圖等類型應用,企業往往在使用一些抽象的品牌化圖形與表意更清晰的工具圖標中選擇後者。

工具圖標的設計其實很簡單,就是在畫板中完成兩種元素的設計,一個是背景,一個是上方圖標。

背景的設計,有比較常見的就兩種類型,純色、漸變。而上方圖標的設計裡,包含的類型就是我們前面講過的幾種常見的工具圖標。所以你看,只要將它們組合,就可以很輕鬆的設計出符合主流特徵的啟動圖標。

如何設計APP的啟動圖標?

所以,如果我們要設計一款筆記應用,那麼就可以先畫一個線性的筆記圖標,然後再將它置入格線模版中確認大小,再分別為它們上色,就可以完成設計了。

4.2.2 文字形式

如何設計APP的啟動圖標?

文字形式的設計,背景和上方一樣,也只使用純色和漸變,但這種設計的主要難點在與字體的設計上。

想要放文字,大家首先想到的肯定是直接用字體打進去,但是切記,字體的商業版權問題是不能視而不見的。選擇字體前,一定要關注該字體是否是免費,百度或者官網都可以查詢。或者一開始就在免費字庫中挑選,如思源黑、思源宋、王漢宗系列等等。

如何設計APP的啟動圖標?

如果覺得直接使用字庫文字太沒有設計感,那可以選擇做一次字體的二次創作,對於新手來說簡單一點。即一開始挑選一個合適的字體,然後在 AI 中對該字體進行臨摹,再對細節進行重新加工,比如襯線的調整,壁畫粗細的調整等等。

比如要設計一個我的應用,那麼我可以取 “超人的電話亭” 的第一個字——超,作為圖標上方的文字。然後我選用 “方正蘭亭大黑” 作為基礎字形,對它進行重構即可。

如何設計APP的啟動圖標?

最後建議,如果不是一些比較嚴肅或是傳統的題材,儘量不要選用宋體或是楷體進行設計。

4.2.3 擬物形式

如何設計APP的啟動圖標?

雖然現在整體設計環境中,擬物已經被扁平取代,但不代表它已經消失,或是在形式上不合理。適當的擬物設計會讓我們對應用功能的認識更清晰,且更有趣味性。

還是老慣例,我們從簡單的擬物設計入手。目前擬物的領域中,使用最普遍的風格也是新手最容易學習的風格,即 “輕擬物” 的設計。這種風格需要刻畫的細節相對較少,更易於我們掌握,只要能用好漸變即可。

比如,iOS 的官方應用——文件,圖標的形式就符合輕擬物的特徵。簡單分析一遍,即在確定完輪廓後,通過漸變填充來表示物體本身的高光和陰影,並添加投影來製造立體感。

如何設計APP的啟動圖標?

如果要設計一些更復雜的擬物圖形,可以通過多做擬物圖標的教學會更有幫助。在今天扁平化圖形當道的環境中,設計得精良的擬物圖標往往可以在滿屏的扁平圖標中脫穎而出,助於吸引用戶啟動應用。

4.3總結

啟動圖標的介紹就到這裡結束,新手該掌握的知識點並不多。無論是更好的字體、圖案、插畫,都已經進入 LOGO 設計的範疇。如果要在這個領域進一步提升,那麼針對性訓練的效果反而並不理想,需要長期積累視覺、圖形的整體設計能力。


分享到:


相關文章: