在設計的品項上,往往尺寸愈小,難度愈高。
過去,在Pixel Style盛行時,耗時數十個鐘頭來點幾張網站用pixel圖,實在是非常司空見慣的事。
然而,隨著網路頻寬、螢幕解析的進化,Web Designer在絕大多數的設計工作上,都不再需要強求pixel by pixel地算計,唯獨icon(小圖示)設計除外。
午休時讀到10 Mistakes in Icon Design這篇文章,隨手作了以下十點註解,或許可以當作icon設計的檢視清單:
(1)圖示之間缺乏區別差異
icon設計首重差異傳達,尤其在小尺寸的圖示設計,各別圖示間的差異呈現,往往足以決定設計的成敗。
(2)使用過多視覺元素
icon設計應該力求簡潔、一目瞭然。
(3)使用不必要的視覺元素
icon設計應該努力聚焦於單一功能或服務的核心意義,不必要的元素反而有妨礙視覺傳達的可能。
(4)缺乏風格一致性
風格一致性將暗示使用者:這一系列的icon分別代表了同一服務的多樣功能,這種辨識上的成功,也將強化產品服務的效率。
(5)在小圖示裡使用不必要的透視與陰影
在icon設計上,應該以最小尺寸(16×16 pixel)最終輸出效果為主要參考,任何視覺風格或效果,如果在小尺寸icon裡嚴重失真,就不該採用。
(6)扭曲既有視覺認知
icon設計應該講究直覺概觀,因此,在應用既有icon元件時,應該要避免扭曲一般使用者的既有認知,以免形成誤導或含意指涉不清。
(7)使用文化地域特徵明顯的視覺元素
icon設計應該取視覺辨識的最大交集,文化或地域特徵太明顯的視覺元素,往往會因為文化、地域的不同而招致使用者的誤解。
(8)使用實際操作介面或風格
蘋果電腦Mac OSX的圖示設計指南提到「避免在icon設計時使用Aqua元素」,主要是在避免使用者產生混淆。
(9)在小圖示裡使用文字
通常應用軟體較容易犯這種錯,原意是想取其文字說明性的優勢,但在icon設計時,受限於尺寸,使用文字的圖示往往在辨識度與易讀性都明顯不足。
(10)失真
網頁icon的失真錯誤,主要發生在向量與點陣圖形的轉換。舉例來說,如果你以Illustrator這套向量軟體製作icon,則向量軟體貫有的防鋸齒特質,反而會使得最終輸出的點陣格式icon變得模糊失真。