最出彩的APP圖示,都會經歷這樣9個關鍵設計步驟
對於移動端APP而言,圖示始終還是最重要的「門面」,它直接關聯著產品的品牌價值,圖示是否具備良好的可用性,將會直接影響到品牌和產品本身。圖示設計的講究很多,而 APP 圖示這種牽一髮而動全身的東西更加講究。今天,就分享一組圖示設計的方法和技巧。
通常,當用戶第一次仔細審視 APP 的圖示是在 App Store 和 Google Play 這樣的軟體商店和某些第三方推薦文章當中,相比於在介面中使用的功能性的圖示而言,APP 圖示需要承擔更加廣泛的責任,不只要具備本身本身的氣質和元素,要能夠體現這個數字產品本身的功能和特質,還要能夠在同類的設計當中脫穎而出,在手機主介面的程式列表中還得足夠抓人眼球,易於識別。對於這樣一個小小的圖示而言,要求一點都不少,不是嗎?(對於圖示設計師而言,這個要求同樣很高了!)
想要達成上述的目標,我們整理出了幾個關鍵性的建議,這樣你在設計的時候,能夠藉助這些方法來獲得更好的設計效果。
Lion 瀏覽器
1、第一件事:從背景資訊蒐集開始
在給一個 APP 設計圖示的時候,最重要的是什麼事情?是圖形和色彩嗎?這當然重要,但不是最重要的。隨後我們會講到這個部分,但是給APP 設計圖示的時候,這不是起點。先應該瞭解的是產品背後公司的氣質、團隊的背景、產品的功能,而不是直接設計。
瞭解這個圖示所涉及到的 APP 的業務組成和整體架構,詢問團隊相關的營銷策略和內容,包括價值主張,目標受眾,市場特徵,定價策略,這些東西確定了產品本身給人的感覺,應該有的定位,和設計息息相關。沒有做過足夠深入的背景調研,就只能閉著眼睛做設計了,這很難讓 APP 圖示真正貼合產品,發揮功用。
企業和產品本身的狀況和資料對於設計的重要性,怎麼強調都不算過分。這種準備工作絕對是磨刀不誤砍柴工。
2、熟悉標準:仔細研讀設計規範
雖然在圖示的設計上,創意和想法並不受限制,但是在任何平臺上,都有著相對清晰的設計規範是需要設計師來遵守的。設計規範讓圖示在一個範圍內和其他的圖示在視覺上保持著足夠的協調,設計師可以在規範範圍內讓圖示更加「出彩」,而不是「突兀」。
在Android 平臺和 iOS 的設計規範中,對於圖示的設計和使用有著非清晰的說明,從配色到尺寸大小,包括樣式和具體使用。請儘量遵循圖示設計的技術規格和設計建議,之後無論是提交給軟體商店,還是面向使用者,都可以規避很多不規範所造成的麻煩。
3、選對工具:大家通常用這些軟體
通常情況下,最終輸出的圖示會使用 PNG 格式,不論你選擇什麼樣的工具,至少要能夠輸出PNG 格式的圖示。當然,這只是選擇軟體工具過程中很小的一個條件,在當前甚至可以說是微不足道的一點。目前,絕大多數的設計師都會選擇時下最常見、接受度最廣的專業軟體,其中幾個甚至就是行業標準本身:
- Adobe Illustrator CC ,也就是常說的AI,是最好的向量設計工具之一,歷史悠久。
- Adobe Photoshop CC,是目前使用範圍最廣也是最好的點陣圖編輯軟體,無論是製作光影還是陰影效果,都非常的跟手。
- Sketch 是一款有著友好介面和豐富外掛的向量圖形編輯和UI設計軟體,對於複雜的設計它可能不是最好的選擇,但是拓展性足夠強大,許多功能都是基於現代的UI和移動端的設計來開發的。
- Affinity Designer 是向量繪圖軟體中的新貴,有著足夠乾淨的UI,非常適合初學者。
4、注意細節:簡約而富有凝聚性
在設計圖示的過程中,記得隨時審檢視標,看看是否缺少一些關鍵性的資訊,關鍵性的元素是否缺失了,是否有多餘的東西。眾所周知,APP 的圖示被設計出來之後,會出現在不同的場合,大小也不盡相同,隨著大小尺寸的變化,有些資訊會變得不夠顯著,擁有太多細節的圖示會在縮小的時候顯得非常混亂,所以將過多的文字和圖片細節融入到 APP 圖示當中,是非常沒有必要的。
簡約的圖示設計不僅僅一種風格上的選取,它在功能和體驗上的優勢也非常的明顯。不要指望將大量的隱喻和內容都包含在同一個圖示當中,抓住最主要的概念和想法,並且用清晰的輪廓、簡單的元素來呈現它。至少絕大多數大型企業和優秀的團隊都傾向於使用直截了當的設計。
5、結合品牌:記得考慮品牌風格指南
每個品牌都有著獨特的設計,從配色方案到細節元素的樣式,通常都有這相對明確的定位。品牌風格指南在絕大多數的品牌當中,已經具備了非常明確的說明文件。為了讓 APP 的圖示和品牌的聯絡足夠清晰,最好參考品牌風格指南來進行設計,這樣確保使用者在看到APP 的第一眼就能夠從視覺上與品牌本身構成關聯。
Foxygenic app icon
6、艱難取捨:讓你的圖示替 APP 發聲
當你想到電子郵件的時候,你的腦海當中想到的第一個意象是什麼?是信封,對嗎?那麼,當你在蘋果的 App Store 中搜索郵箱的時候,會發現一大堆的信封樣式的圖示,各種配色和風格的都有,不一而足。
一方面,使用大眾所熟知的意象來設計圖示,確實非常成熟,被廣泛的認知,大家非常容易理解。而這種設計策略的另外一面,則是在圖示設計的層面就意味著激烈的競爭,陷入同質化的泥潭。這件事情可能是設計師在設計圖示的時候,所面臨的最大的挑戰:設計師需要在原創性和功能性之間,做艱難的取捨。
Elephun app icon
7、知己知彼:仔細審視競爭對手的設計
留出足夠的時間來對競爭對手進行調研,瞭解競爭對手的功能,APP的設計,圖示的構思,這樣可以讓設計師足以排除已有的設計,在營造獨特性上獲得思路,避免作出和競爭對手相似的設計,降低風險。
有些甲方喜歡使用和競爭對手相似的元素,這同樣有其優勢在,因為相似甚至相同的元素確實會讓一些使用者面對這個新的APP的時候,產生信任感和同理心。但是和之前所提到的很多問題一樣,這需要設計師來取捨,或者控制中間的程度。看起來太過相似,使用者會視之為山寨和跟隨者,缺乏獨特性,很容易讓人在使用過程中失去信任,甚至完全放棄。
8、開始設計:選擇正確的色彩和展現形式
終於到了這個熟悉的環節了。優秀的配色和有趣的圖形,確實能夠讓圖示在視覺上脫穎而出。在選擇色彩這個環節,很多設計師都很容易收不住手,許多色彩擠壓在小小的圖示當中,會讓圖示變得像現代藝術品一樣。這個時候,需要在已經限定的色彩範圍內(品牌用色),結合色彩心理學,來構建圖示的色彩體系。
在紙上繪製圖標的原型,探索基本的想法和構圖,是非常有效的手段,無論你會不會手繪,這個過程都會讓你的設計過程更加順暢,很多創意和想法,會在紙和筆的摩擦中,逐漸誕生,這一點,是許多數字軟體都無法替代的。
此外,運用基本的幾何圖形(圓形、方形、三角形等)來建立圖示的基本框架,非常有用。請記住,任何複雜的圖示都是在簡單的圖形的基礎上創建出來的。
App icon for App Shack
9、多做檢驗:繞不過的實際測試
無論你的APP 圖標出現在什麼地方,你都希望它看起來是非常不錯的,對吧?所以,接下來繞不過的環節,就是要在不同的場合、不同的地方測試圖示的設計,是否有足夠的對比度,是否看起來足夠清晰,是否能夠融入相應的場景,是否貼合品牌的氣質,等等等等。
- 檢查不同尺寸的APP 圖示,主要注意看小尺寸的圖示是否可以看得清,識別度如何,大尺寸的圖示是否有不恰當的設計
- 使用不同的背景來檢視APP 圖示,看看圖示在不同色彩、樣式的背景下,是否有足夠的對比度
- 瞭解圖示在不同解析度下的樣子
- 不要只在App Store 和 Google Play 下測試圖示的外觀,還可以將圖示放到隨機某個使用者的螢幕上,看看實際的效果