設計出優質Icon的三個關鍵點

設計出優質Icon的三個關鍵點

每個App都需要一個漂亮的圖標,而每個設計師也都力圖讓自己App的圖標看起來漂亮而吸引人,為了在眾多的App脫穎而出,優質的圖標設計是如此的讓設計師渴求,而成功的APP圖標設計則有著相似的特性,這也是促成今天這篇文章的重要原因。

每個APP都需要一個漂亮的圖標,而每個設計師也都力圖讓自己APP的圖標看起來漂亮而吸引人。
為了在APP Store 和APP列表中脫穎而出,優質的圖標設計是如此的讓設計師渴求。
失敗的APP圖標設計有著各不相同的原因,而成功的APP圖標設計則有著相似的特性,這也是促成今天這篇文章的重要原因。
icon範例圖
製作一個對用戶友好、具備良好識別度的好的APP圖標,應該遵循什麼樣的設計規則?讀下去,下面所挑選的三個最實用的規則,應該能夠幫你在迷霧中,辟開一條道路。

1、設計一個高識別度的圖標

首先,圖標需要表情達意,傳達信息。一個需要讓用戶猜測的圖標並不是一個稱職的圖標。
對於你的APP而言,圖標就是它的臉面,一目瞭然的圖標設計能夠讓用戶明白你的APP的功能與意義。
當你為你的APP設計圖標的時候,你應當時刻謹記一件事情:圖標是借助隱喻和聯想來同用戶溝通的,如果它的形象或者暗示的操作不能讓用戶立刻明白,那麼這個圖標就不具備良好的可用性。
因此,讓你的圖標清晰直觀是至關重要的:
不要使用抽象的圖標設計,因為抽象的圖標設計很少能夠正常工作。
用戶很難依靠以往的經驗來弄明白圖標背後的含義,iOS中遊戲中心的圖標設計就是一個相當典型的反例。
這個圖標是一組多彩、具有玻璃質感的圓圈組成的,它看起來像氣球,也許能夠喚起部分用戶的想像,但是人們通常很難明白它的確切含義。
icon範例圖
而一個安全的設計思路是使用用戶能夠一眼分辨得出來的形象,這樣用戶就很容易識別了。
絕大多數的用戶都能夠清晰地認出Home的圖標,列印和放大鏡這類圖標就更是廣泛地為用戶所瞭解。
所以,當我們看到Gmail 的圖標的時候,哪怕是新用戶,通常都能很快聯想到電子郵件。
icon範例圖

2、盡力做到極簡

找到一個能夠捕捉應用程序本質的元素,並儘量以簡單的形態呈現出這個元素。
然後,刪除這個圖標中不必要的裝飾性的、冗餘的內容即可。
絕大多數的設計師希望他們的APP的圖片看起來很棒,但是正像許多圖標所共有的問題,核心的信息總是被太多的細節和冗餘的裝飾所掩蓋,許多過度設計的細節成為了阻礙用戶獲得良好體驗的視覺噪音:
儘量不要在圖標中包含沒有必要存在的、或者指向性或者涉及交互的詞句,僅在必要的時候在LOGO中包含特定的文字。
(至少現在沒必要在圖標中加上「Free」的字樣了吧?)
icon範例圖
不要在APP的圖標中包含APP的名稱,因為APP的下方已經有文字名稱了。
不要在APP的圖標中包含過度圖像細節,因為這麼小的尺寸,即使是視力正常的用戶也常常看不清那麼小的細節。
icon範例圖
不要包含照片和螢幕截圖啥的。
icon範例圖
不要使用3D透視圖,因為3D透視和陰影在小圖標上難於辨認。
當然,細節並非完全是圖標的天敵。最重要的事情還是讓你的圖標清晰而直觀,所以你需要做的更多的是平衡細節和整體視覺:
‧當你為你的圖標選取一個合適的形象之時,儘量選擇它最有代表性的特徵,或者最常見、最具有識別度的特性來作為設計的基礎,其他的部分儘量略去。
‧設計圖標的時候,儘量讓它擁有視覺焦點,立刻抓住用戶的注意力,讓用戶記住你的APP。
以iOS的天氣APP為例,其中的太陽和雲是是讓用戶立刻記住「天氣」這一特徵的元素。
icon範例圖

3、在不同的背景下測試你所設計的APP圖標

圖標應當在所處的背景下清晰可見。
設計一個易於識別且極簡的圖標並非意味著你已經完成設計了。正如同其他所有的UI元素一樣,完成設計之後需要對設計進行測試和驗證。
你並不能控制用戶選擇螢幕背景,者也就意味著你需要測試不同的背景,確保你的APP 圖標在不同的背景下都具有良好的識別度:
不要讓圖標與背景融為一體。下面的股票APP在深色背景下幾乎無法識別。
icon範例圖
不要使用透明的圖標背景,確保你的圖標能被輕鬆識別。
icon範例圖
在具有動態背景的手機上測試你的圖標設計,在背景的變化與移動過程中,測試你的APP圖標的可用性。

結語

看了上面的三個技巧之後,你如果有所啟發並且發現你的圖標尚有提升空間的話,不妨著手重新設計吧。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。