相關文章

E5edb8d1bd9ea463b34e4ec3efab0389 本文作者 Martin LeBlanc 是icon搜尋引擎 IconFinder 的創始人,他整理了蘋果用戶體驗工程師 Mike Stern 的想法,並且還給出了一些新見解和案例研究。

六月的 WWDC 對於設計師來說,又是一個新的征程,因為,iOS 7 扁平化了。

為了適應新的風格,很多app的icon都必須得回鍋重新設計了。蘋果用戶體驗工程師 Mike Stern 曾經做了一個名為《偉大 iOS 設計指南》的演講,第一部分就是講述該如何創造一個好的app icon。本文作者 Martin LeBlanc 是icon搜尋引擎 IconFinder 的創始人,他整理了 Mike 的想法,並且還給出了一些新見解和案例研究。

為什麼app的 UI 和icon如此重要?用戶不會從app中看出工程師設計師用了什麼代碼,嵌入了什麼先進科技。他們第一眼只會看到icon,然後留下印象。大多數用戶希望直觀漂亮,有時候還會喜歡那種設計得不可思議的icon。

下圖中就是 App Store 中搜索「Camera」出現的結果,茫茫icon中,Path 脫穎而出,其他的icon大多採用了相機或鏡頭圖片作為icon,以至於很多icon看起來都大同小異,而直觀簡潔漂亮的 Path 則正好凸顯出來了。

因而,花費大把的時間在icon設計上是不為過的,精緻的icon很容易感染到人,好icon很容易讓人聯想到app內的體驗也是很棒的。為了達到美觀和直觀這兩個簡單又困難的追求,Mike 給出了六點建議。

獨一無二的形狀

這四個icon非常特別,有些使用的單調的色彩,有的色彩多樣層次分明,但是它們都有一個簡單但特別的形狀,僅需一瞥,就能記住。

icon在 App Store 中顯示得較大,但是在手機螢幕中的面積就小多了,更不用說有的還擠在資料夾中,所以,簡單特別的圖案有助於icon脫穎而出。

慎重使用顏色

不要打翻調色板,有時候甚至一兩種顏色就已經足夠了。是的,有很多優秀icon還是用到了很多色彩,但是那是大師作品,一般人駕馭不了。

避免使用真實照片

無論一個照片多麼驚豔,一旦用在了狹小的app icon上,效果絕對是毀滅性的。Sipp 這個app就是一個不錯的例子,它可能源於照片,但是卻比用照片做icon好不知多少個檔次。葡萄酒傾倒而下形成的「S」和app名相對應,色調光感也重新調過,木紋背景讓icon顯得很有質感。

避免使用文字,一個單詞也不行

如果能在設計中避免使用文字那就再好不過了。試著去只用一個標識或者字母去完成icon吧。 Ness,Pocket,Vine,Snapguide 和 Pinterest 都是成功的案例。

適用材料,傳遞質感

這點可能在 iOS 7 上有點衝突。獲獎作品 Paper 就是很好的例子,水彩暈出的層次和色彩和其藝術app的特質非常吻合。One Password 也是如此,通過鑰匙孔反映了資料的安全性。LifeKraze 就是真正的大師作品了,Mike 說這款icon是「不知道怎麼做出來的,簡直是icon藝術巔峰之作」。

保持創意

創意是脫穎而出的好辦法,Routesy,Hipstamatic,Evernote Food 和 Brewski Me 幾款app都基本上都有不錯的創意。通常來說,訣竅就是簡單就好,有時候複雜的東西恰恰是通過簡單的形狀來呈現的。

附贈的小提醒

在完成了一個icon之後,不要忘了在各種顏色的桌布上測試icon的顯示效果。另外也不要忘了將icon放在資料夾中測試一下顯示效果。最後,在使用者的設備上,icon會以不同尺寸出現,設計者需要確保icon在所有尺寸下看上去都很舒服。

優秀案例展示:Turnplay

著名的icon設計機構 Ramotion設計了 Turnplay icon,這也展示了 Ramotion 的設計功力。Turnplay 是一個音樂播放機的app,其 UI 複刻了老式的黑膠唱片播放機。


Ramotion 在最開始設計這個app的icon時,自然而然的想到了使用黑膠唱片播放機的款式。下面就是在設計初期階段 Ramotion 的設計師們用鉛筆手繪的icon草圖,可以看出即使在這些草圖中,也有著很多的細節。


在這些草圖中,很多都嘗試將代表app名稱的字母「T」放在icon設計當中,而細節方面,他們則試圖在唱盤上勾勒出紋理。最終他們採取了以下的設計方案,簡單的邊框,中間是黑膠唱片。

使用 Facebook 留言

發表回應

謹慎發言,尊重彼此。按此展開留言規則