本文作者 Martin LeBlanc 是圖示搜索引擎 IconFinder 的創始人。

蘋果在六月份的 WWDC 上發表了 iOS 7,隨之網路上也出現了大量與之相關的精彩內容,其中就包括蘋果 UX Evangelist Mike Stern 名為「優秀 iOS 設計最佳實踐指南」的演說。這篇演說的第一部分提到了什麼是蘋果眼中的優秀 app 設計,接著他列舉了設計 app 圖示時應該考慮的六個重要元素。

首先 Mike Stern 解釋了 UI 和 app 圖示的重要性:使用者並不會根據你使用了多少技術,或是整合了多少 API,或是你寫的程式有多強而對 app 做出評價,而是你的 app 能讓他們做什麼,給他們什麼感受。使用者期待你的 app 能為他們帶來直觀的、美妙的甚至不可思議的體驗。

六招助你設計優秀圖示

有一些錯誤是開發者們經常犯的,它們也導致了許多 app 未能通過 App Store 的審核,糟糕的 app 圖示設計就是罪魁禍首之一。

app 圖示是你的 app 的第一道窗,為了搏得使用者的好感,你得想方設法突出重圍。下圖是蘋果 App Store 中「照相」類 app 的截圖,在遍地的「相機鏡頭」中,像 Path 這種圖示就能讓人一目了然。記住,美觀和易於辨認是設計圖示時兩個主要的品質。

icon01

當使用者在 App Store 注意到你的 app 圖示的時候,他們就開始展望它所能帶來的使用者體驗,用起來有多舒服,它會有多直觀,它能多大程度上滿足使用者的需求。如果一個 app 的圖示讓人感覺是經過精心設計的,那人們通常會假設整個 app 也同樣是經過細緻打磨的。不錯的第一眼印象才會促使使用者打量這個 app 的其餘特點——你所使用的技術有多好?你的 app 有多安全,多穩定?與競爭者相比更優秀嗎?所以,投入時間專注設計你的 app 圖示真的很重要。

現在讓我們來看,什麼能讓你的 app 圖示出類拔萃?首先是美觀,其次更重要的是易於辨認。怎樣才能做到這兩點?來看看下面這六招:

第一招:使用獨特的圖形

下面這四個圖示互不相同——其中一些包含了很多顏色或是漸變,但是以簡單的圖形示眾是它們共同的特點。這讓它們一眼看上去就能被認出來。

icon02

圖示會以多種不同的尺寸出現,在 App Store 中,它們會比較大,在手機主螢幕上又會比較小,出現在通知中心和 app 文件夾中時,就更小了。請確保你的 app 圖示能各種尺寸縮放自如並始終保持清晰的識別度。

第二招:謹慎用色

不要濫用顏色,一種或兩種就夠了。的確有很多優秀的 app 圖示設計採用了很多顏色,但這種做法很難出色。

第三招:避免使用照片

icon03

盡量別直接拿照片來做 app 圖示。下圖中的 Sipp 是一個極好的例子,告訴你怎樣在採用了類照片的元素的同時,更突顯主題。

第四招:避免使用大量文字

icon04

圖示中能不用文字就不用文字,好的做法是使用符號或公司標誌作象徵。下面這幾個是優秀案例。

第五招:準確傳遞訊息

icon05

簡單來說,要讓使用者看到你的圖示就知道它是幹什麼的。iOS 7 對擬物化圖示進行了大刀闊斧的改革,但這裡依然要提到擬物化設計的亮點。2012 年 Apple Design Awards 冠軍 app 設計 Paper 直白地告訴你它的內容,Square Wallet 和One Password 也同樣。LifeKraze 的圖示深得擬物化精髓,讓 Mike Stern 都不禁讚歎「不知道他們是如何設計出來的,這簡直是藝術的最高境界。」

第六招:富有創意

icon06

創意讓你的 app 圖示脫穎而出,下面這些 app 都謹遵創新法則。通常,秘訣是開發一些簡單的概念,有時候最複雜的渲染也是建立在簡單的圖形之上的。

PS:在不同的背景上測試 app 圖示的視覺效果

確保你的圖示在所有種類的背景上都看起來不錯,也不要忘了測試把它放進文件夾後的效果。

icon07

案例研究:Turnplay

Turnplay是一個可以在iPad上模擬黑膠唱片播放的音樂播放 app ,它的圖示設計出自著名圖示設計公司Ramotion之手。

icon08

Ramotion 開始動手設計的時候,採取了他們一貫的做法——素描來進行繪製。可以從下圖中看到團隊所進行的不同嘗試——把產品打頭字母T 放進圖示裡、在唱片上添加指紋等等。

icon09

最終成果如下圖:圓形唱盤加三角形播放鍵——兩種基本圖形的簡約組合。

icon10
最後,有時間的話可以看一下這場演說的完整影片。

Source: The Next Web

本文出處:蘋果 UX 傳教士,教你六個 app 圖示設計元素

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 艾蛙 Aiwa 的頭像
    艾蛙 Aiwa

    A小姐的迷你世界

    艾蛙 Aiwa 發表在 痞客邦 留言(0) 人氣()