圖標|幫你成就優質APP圖標的三個關鍵點

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

圖標|幫你成就優質APP圖標的三個關鍵點

制作一個對用戶友好、具備良好識別度的好的APP圖標,應該遵循什么樣的設計規則?讀下去,下面所挑選的三個最實用的規則,應該能夠幫你在迷霧中,辟開一條道路。

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

首先,圖標需要表情達意,傳達信息。一個需要讓用戶猜測的圖標并不是一個稱職的圖標。

對于你的APP而言,圖標就是它的臉面,一目了然的圖標設計能夠讓用戶明白你的APP的功能與意義。當你為你的APP設計圖標的時候,你應當時刻謹記一件事情:圖標是借助隱喻和聯想來同用戶溝通的,如果它的形象或者暗示的操作不能讓用戶立刻明白,那么這個圖標就不具備良好的可用性。因此,讓你的圖標清晰直觀是至關重要的:

不要使用抽象的圖標設計,因為抽象的圖標設計很少能夠正常工作。用戶很難依靠以往的經驗來弄明白圖標背后的含義,iOS中游戲中心的圖標設計就是一個相當典型的反例。這個圖標是一組多彩、具有玻璃質感的圓圈組成的,它看起來像氣球,也許能夠喚起部分用戶的想象,但是人們通常很難明白它的確切含義。

圖標|幫你成就優質APP圖標的三個關鍵點

而一個安全的設計思路是使用用戶能夠一眼分辨得出來的形象,這樣用戶就很容易識別了。絕大多數的用戶都能夠清晰地認出Home的圖標,打印和放大鏡這類圖標就更是廣泛地為用戶所了解。所以,當我們看到Gmail 的圖標的時候,哪怕是新用戶,通常都能很快聯想到電子郵件。

圖標|幫你成就優質APP圖標的三個關鍵點

2、盡力做到極簡

找到一個能夠捕捉應用程序本質的元素,并盡量以簡單的形態呈現出這個元素。然后,刪除這個圖標中不必要的裝飾性的、冗余的內容即可。

絕大多數的設計師希望他們的APP的圖片看起來很棒,但是正像許多圖標所共有的問題,核心的信息總是被太多的細節和冗余的裝飾所掩蓋,許多過度設計的細節成為了阻礙用戶獲得良好體驗的視覺噪音:

盡量不要在圖標中包含沒有必要存在的、或者指向性或者涉及交互的詞句,僅在必要的時候在LOGO中包含特定的文字。(至少現在沒必要在圖標中加上“Free”的字樣了吧?)

圖標|幫你成就優質APP圖標的三個關鍵點

不要在APP的圖標中包含APP的名稱,因為APP的下方已經有文字名稱了。

不要在APP的圖標中包含過度圖像細節,因為這么小的尺寸,即使是視力正常的用戶也常常看不清那么小的細節。

圖標|幫你成就優質APP圖標的三個關鍵點

不要包含照片和屏幕截圖啥的。

圖標|幫你成就優質APP圖標的三個關鍵點

不要使用3D透視圖,因為3D透視和陰影在小圖標上難于辨認。

當然,細節并非完全是圖標的天敵。最重要的事情還是讓你的圖標清晰而直觀,所以你需要做的更多的是平衡細節和整體視覺:

·當你為你的圖標選取一個合適的形象之時,盡量選擇它最有代表性的特征,或者最常見、最具有識別度的特性來作為設計的基礎,其他的部分盡量略去。
·設計圖標的時候,盡量讓它擁有視覺焦點,立刻抓住用戶的注意力,讓用戶記住你的APP。

以iOS的天氣APP為例,其中的太陽和云是是讓用戶立刻記住“天氣”這一特征的元素。

圖標|幫你成就優質APP圖標的三個關鍵點

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

圖標應當在所處的背景下清晰可見。

設計一個易于識別且極簡的圖標并非意味著你已經完成設計了。正如同其他所有的UI元素一樣,完成設計之后需要對設計進行測試和驗證。你并不能控制用戶選擇屏幕背景,者也就意味著你需要測試不同的背景,確保你的APP 圖標在不同的背景下都具有良好的識別度:

不要讓圖標與背景融為一體。下面的股票APP在深色背景下幾乎無法識別。

圖標|幫你成就優質APP圖標的三個關鍵點

不要使用透明的圖標背景,確保你的圖標能被輕松識別。

圖標|幫你成就優質APP圖標的三個關鍵點

在具有動態背景的手機上測試你的圖標設計,在背景的變化與移動過程中,測試你的APP圖標的可用性。

結語

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

【Nick Babich 的用戶體驗設計經驗之談】

  1. 輸入框設計:《講真,你真的懂得文本輸入框設計的那些潛規則么?》
  2. 表單設計:《摳細節!設計高效好用表單的10個技巧》
  3. 極簡APP UI:《超贊!幫你打造極簡風APP UI 的實用設計技巧》
  4. 前端開發:《有法可依!幫你衡量一個動效是否合格的六個核心因素》
  5. 面包屑:《并不簡單!網頁中為你指路的面包屑到底應當怎么使用?》
  6. 移動端頁面:《跟著建議走!這樣的移動端網站設計才對頭》

原文地址:uxplanet
原文作者:Nick Babich
優設譯文:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量180萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 8
點贊 3

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。