10 項 icon 設計常犯的錯誤
在設計的品項上,往往尺寸愈小,難度愈高。
過去,在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變得模糊失真。
參考文獻:
CR & LF 研究所著,博碩文化編譯( 2006 )。配色王:最能激發創意與觸動人心的配色技法。
許峻誠、張恬君、莊明振.(2001).網頁風格認知與設計要素之探討-以企業網站首頁為例,第六屆設計學術研究果研討會論文集。
Calder, B. T.; Philillips L. W.; Tybout, A. M. (1981), Design Research for Application, Journal of Consumer Research, 8(Sept), 197-207.
Carmela, D. M.; Anna, M. (2004), Attitudes to Risk and Attitudes to Uncertainty: Experimental Evidence, Applied Economics, 36(4), 357-372.
相關文章
企業網站優化,拒絕seo詐騙網頁設計中GIF和JPG圖片的選用MSN Bing 2010/07/20 網站提交管理大改版如何提升網站的瀏覽率(四)網路行銷及網站規劃的持續改進美國購物網站雙雄差異,透露了電子商務網站設計玄機
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了