October 5,2006

小icon,大學問




初次見到 MAC 對於桌面上的各色 icon 相信很多人都會留下深刻的印象,MAC OS X 提供相當好的環境來讓圖示設計師發揮專長,做出不僅美觀更像是藝術品般的圖示。



前幾天在 TUAW 看到這篇提到蘋果的「Apple Human Interface Guidelines」,守則中的「Icons」鉅細靡遺的指出做為一個好的 icons 應該要按照他的功能區分成「應用程式」(user applications)或是「工具程式」( utilities),應用程式圖示在設計的應該比較多彩、討喜一點,而工具程式的圖示則要正經一點。

應用程式圖示的設計,蘋果建議應該要色彩鮮明並且討喜誘人,而且要讓人能夠一眼就看出圖示所代表的應用程式的功能。

以預覽程式、文字編輯和便利貼這3個圖示為例:



圖示應該要顯示出該應用程式處理的媒材(如果有的話),像是文字編輯器之於文件,預覽程式之於照片。如果需要同時放進相關的支援工具元素(EX:文字編輯器用的筆)才能完成「圖示的故事」,支援工具必須和基礎的元素有高度相關並且置於該元素的上方。另外類似「便利貼」這樣能夠一眼就能辨認且功能上不太需要有支援工具的應用程式則可以單獨呈現。

相對於應用程式,「工具程式」則比較不常被使用,也不是用來玩樂或是做有創造性的活動,所以工具程式的圖示要比較偏向正式一點的色調,通常顏色的飽和度較低、以灰色為主,必要使用的顏色是用來表示該程式的功能性居多,例如:活動監視程式和系統描述



大部分的工具程式都有其單一且獨特的功能,所以圖示在設計上必須把效果集中在工具程式的功能上。此外,工具程式的圖示還有一個特點是必須要「立起來」,讓人感覺就像是一件一件擺在你眼前架子上那樣。

在守則中還有提到關於圖示角度的說明,屬於應用程式的圖示要看起來像是放在桌上並以45度角往下看的感覺,而工具程式的圖示則要做成置於架子上並且以水平角度平視,就像這樣

與這樣


Apple Human Interface Guidelines 提到很多值得一讀的圖形介面設計原則,有興趣的人可以前往參考看看喔!

圖片來源:Apple Human Interface Guidelines

Posted by appleseed0323 at 樂多Roodo! │19:48 │回應(4)引用(0)蘋果咬一口
樂多分類:網路/3C 共同主題:咬一口蘋果OS 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/2233287
回應文章
水喔,懶得看英文,讀你的介紹就對了!
Posted by JT at October 5,2006 23:48
好觀念!!!!!!!!

我不同意將它作為原則
但反觀其他的設計 沒有比apple更好的了...
Posted by 義大利蔬菜湯 at October 6,2006 05:06
按照慣例,跪下來朝 Cupertino 的史老大拜一下~~~

( 差點打成『A片小鵝』...... XD)
Posted by A剖小鵝 at October 6,2006 14:01
當然囉!咱家史老大可不是只會光著屁股坐在沙發上喝咖啡呀~
Posted by appleseed at October 7,2006 00:30