最近看到這篇文,Spotify Iconset 關於一套 icon 的設計發想過程,是篇很有意思的文章。要怎麼做才能保持產品裡所有icon的風格一致、但又依運用場合不同保持不同的特色呢?想想,也許要先把icon分類之後再依功能來設計會比較妥當吧?

有的 icon 不會是單一屬性,可能是複合式的,大致上我會這樣分類:

操作系

可點擊的按鈕、icon 等,常配合文字說明。


圖片來源:http://www.gogobot.com
中間 3 顆很明顯是可以點擊的「icon + 文字」按鈕。


圖片來源:https://itunes.apple.com/tw/app/google-maps/id585027354?l=zh
即使沒有文字說明,也知道圖片中下方那 3 顆併排的 icon 代表什麼含意。

具現化系

空數據集時出現的預設、讀取中、下載中的 icon。


圖片來源:https://itunes.apple.com/us/app/id517114354
這其實算是 icon 集合體的圖片,當這個列表沒有任何資料時才會出現,提示使用者可以怎麼操作來新增項目。


圖片來源:http://www.pttrns.com/p/264
一張卡片形式的icon,擬物風,跟你說現在沒有任何影片可以觀看。比空空的架子有趣親切。

強化系

具有代表性的icon,可強化使用者的印象。如分類、選單上的 icon。


圖片來源:https://itunes.apple.com/us/app/swarm-by-foursquare/id870161082?mt=8
透過列表前方的淺灰色 icon,可以立刻區分項目類型。


圖片來源:https://foursquare.com
左方時間軸上的 icon 顯示各種地點,比只放單一個圓點更貼心。

變化系

有既定形象,卻因配合設計風格而改變的 icon。如 Facebook 分享icon。


圖片來源:https://itunes.apple.com/us/app/id529406556
Facebook、Twitter這類社群網站有固定的 icon ,為了和產品風格統一可以略作變化。


圖片來源:https://itunes.apple.com/us/app/id711923885
雖然各家社群網站都有定義他們的分享 logo,但在這邊採用色塊 + 白色 icon 的形式。

放出系

指在icon旁邊的提醒或通知(Badge),如數量、數值、提示、符號。


圖片來源:https://itunes.apple.com/us/app/id441534409
導覽列上的扁平風格的紅底白字 Badge 是非常常見的作法。


圖片來源:http://www.nationalgeographic.com
不使用預設值,這個 APP 客製了綠色對話框 + 白色數字。

特質系

其它難以歸類的 icon。

有可能會發生一個 icon 非常萬用的情況,上述每個系的運用時機和呈現方式略有不同,我會特別留意這顆 icon 的設計,盡量簡單化。越複雜的設計風格越強烈,要融入各個產品或頁面就越困難。

即使是同個產品同樣的風格,最好明確定義出每個系的 icon 的運用限制與製作規範,這樣能確保整個產品的風格一致性又能帶出各系 icon 的特點。

comments powered by Disqus