萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 圖標設計中的常見錯誤

圖標設計中的常見錯誤

  1.不同圖標之間差異不明顯

  有時候,在一組圖標中,各個圖標看起來很相似,很難區分出哪個是哪個。如果你如果你錯過了文字說明,你會發現很容易把這些圖標弄混。

圖標設計中的常見錯誤 三聯教程

  上面的圖標來自Mac OS X的效率應用板塊。我經常把它們搞混,以至於運行錯誤的程序。

Small similar icons

  如果在屏幕上顯示小圖標的話,分辨不出的問題更是嚴重。

  2.一個圖標中包含太多元素

  越是簡單簡明的圖標越好。最好是把一個圖標中的元素控制到最少。

  然而,微軟的設計師,受到Windows Vista中新圖標形式的鼓舞,決定采用大而膨脹的圖標,以便為他們膨脹的預算做辯護。

Mistakes in Windows Vista icons

  每個圖標都是一個情節糾纏不清的小故事。問題是尺寸變小的話,咱們根本就看不清圖標裡描繪的什麼。即便是在大尺寸的情況下,要破譯圖標也不是件容易的事。

  3.不必要的元素

  圖標應該容易讀懂。元素越少越好。最好全部的圖像元素都是相關的而不僅僅是整個圖標的一部分而已。因此,你必須了解使用圖標的語境。

  讓我們來看看這組數據庫的圖標:

Unnecessary elements in icon

  一眼看過去,好像一切都沒有問題。

  但是,如果這個程序(或者單獨的工具條)全都是處理數據庫的,我們就可以(也應該)把不必要的部分移除:

Unnecessary elements in icon

  圖標的含義並沒有丟失,但是圖標變得更容易識別了。

  這是個BeOS 5 圖標中的真實案例,就是關於一些多余元素的:

BeOS 5 icons

  勾勾在這裡絕對是多余了。另外,為神馬是紅色的?

  4.同一組圖標缺少風格的一致性

  幾個圖標之所以能成為一組,就是因為風格的一致。一致性可以通過下面這些方面顯示出來:配色、透視、尺寸、繪制技巧、或者類似幾個這樣的屬性的組合。如果一組中只有少量的幾個圖標,設計師可以很容易一直記住這些規則。如果有一組裡很多圖標,而且有幾個設計師同時工作(例如,一個操作系統的圖標),那麼,就需要特別的設計規范。這些規范細致地描述了怎樣繪制圖標能夠讓其很好的融入整個圖標組。

Lack of unity of style within a set of icons

  Windows XP shell32.dll文件裡的多種風格. 這是推薦給想換圖標的用戶的一個默認圖標組。

  5.小圖標裡不必要的透視和陰影

  前進的腳步從來沒有停止:界面已經有能夠顯示半透明的類,不再有顏色的限制,現在還有朝3D發展的趨勢。但是,真的都有用嗎?並不都是!特別是說到16x16或者更小的的圖標。

  例如,我們來看看GNOME 2.2.0 (RedHat 9)的程序管理器。

Unnecessary perspective in small icons

  這些小尺寸圖標裡的透視是不需要的甚至是影響效率的。

  這裡是Windows XP的程序管理器:

Unnecessary shadows in small icons

  按照標准,Windows XP 的圖標都有2px的黑色陰影,但是在16×16 的圖標中,2px的陰影好像太大讓圖標看起來有點兒髒。 Address Book圖標看起來最糟糕。

  6.過分原創的隱喻

  選擇在一個圖標裡展示什麼總是可辨認和原創之間的相互妥協。在隱喻或者圖像還沒做出來之前,去看看別人的產品是怎麼做的總是好的。最好的方案可能並不是腦子裡想出來的新東西,而是采用已經存在的方法。

  一個過分原創的例子是 OS/2 Warp 4裡的垃圾桶圖標。它不是一個垃圾桶而是一台碎紙機。

Overly original metaphors

  選擇一台碎紙機的另一個問題是碎紙機有很多類型,並沒有一個統一的形象。這個圖標看起來非常像是一台打印機,只不過裡面躲了一只章魚而已。另外,在這個隱喻裡如何展示垃圾箱滿了也是一個問題。

  7.沒有考慮各個國家或者社會的特點

  把你的圖標圖標被用的情境十分必要。一個重要的方面就是國家特點。國家之間文化傳統、環境、手勢的差別可是非常大的。

  假設我們需要做一個圖標表示通過e-mail進行。用一個真實的郵件隱喻很不錯。比如說一個郵箱。

International Post Box

  這些圖片來自維基百科。

  答案可以在《為Mac OS X制作圖標手冊》找到:“使用大家能容易辨識的普遍的圖像。避免把焦點放在一個元素的次要方面。比如,一個郵件圖標,一個鄉村的郵箱比蓋了郵戳的郵票更難識別一些。”

Mail icon in Mac OS

  使用郵票的想法很棒,但是使用紅尾鷹的圖片似乎有待商榷。

  但是,不只要考慮國家特點。這讓我想起了一些趣事。有一回,我們需要一個數據篩選的圖標,常用的隱喻是一個漏斗,像下面這樣:

Filter icon

  客戶反饋說:“我不太明白為什麼用一個像馬蒂尼酒杯的形狀來表示篩選。。。”

  8.在圖標中使用真實界面的圖像

  《為Mac OS X制作圖標手冊》警告我們,在圖標中避免用界面元素,它們可能會被錯認為是真實的交互界面。但是這警告都白費了!看下面這個圖標:

Mutant-icon

  你動手去點單選按鈕,結果發現點了整個圖標!

  這是一個有趣的例子來自 OmniWeb浏覽器界面:

OmniWeb Toolbar

  注意前進和後退按鈕,很不常見地在前進和後退按鈕下面加了文字。 Oops! 它們完全不是buttons,只是icons!

  9.圖標內文字

  這個錯誤常見於軟件圖標。明顯地,腦子裡第一個想法就是用在圖標中采用軟件的logo。圖標裡有文字有什麼不好呢? 首先,它直接和語言相關,阻礙本地化。第二,如果圖標小,很難看清文字。第三,在軟件圖標的情況裡,這個文字通常會在軟件名字裡重復。

Icons with titles

  10.沒有像素基准

  這個問題通常發生在你用矢量編輯器來繪制圖標的時候。在大尺寸時,一切看起來很清晰很不錯,但是現實是圖標通常很小,在柵格化時抗鋸齒模糊了物體的邊界。

Icons with Blured Edges

  本文由 站酷網 - weee 翻譯,轉載請保留此信息,多謝合作。

copyright © 萬盛學電腦網 all rights reserved