中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 藝術(shù)設(shè)計(jì) > 設(shè)計(jì)理論 > 圖標(biāo)設(shè)計(jì)常犯的10種錯(cuò)誤
交互性被認(rèn)為是有害的 回到列表 Google Logo 誕生記
 圖標(biāo)設(shè)計(jì)常犯的10種錯(cuò)誤

作者: 時(shí)間: 2008-03-04 文檔類型:翻譯 來自:相關(guān)論壇

It is much easier to criticize somebody else’s work than to create something cool yourself. But if you apply a systematic approach to criticizing, make a numbered list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon design is undergoing a transitional period. On the one hand, screen resolutions are increasing, hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and even smaller are still widely used. And so, here are the most commonly observed mistakes in icon design…

  1. 圖標(biāo)之間沒有明顯的差異化(太相似,難以辨識(shí));
  2. 在一個(gè)圖標(biāo)中設(shè)計(jì)了太多的元素(windows vista的圖標(biāo)是反面教材);
  3. 加入不必要的元素;
  4. 一套圖標(biāo)中的圖標(biāo)統(tǒng)一性不足(顏色主題,透視角度,尺寸,繪圖技法等);
  5. 在小圖標(biāo)中(24X24以下)使用不必要的透視和陰影;
  6. 過度原創(chuàng)使語義不明確(比如將回收站設(shè)計(jì)成碎紙機(jī)的樣式);
  7. 國家區(qū)域和文化特征沒有被考慮進(jìn)設(shè)計(jì)中;
  8. 在圖標(biāo)中使用純界面化的元素(比如泛濫的mac aqua效果,用戶會(huì)認(rèn)為你的產(chǎn)品是蘋果的產(chǎn)品)
  9. 在圖標(biāo)內(nèi)部使用文字(特別是不容易辨識(shí)的);
  10. 圖標(biāo)外部邊緣沒有做像素化處理。

#1 Insufficient differentiation between icons
Sometimes within one set of icons, we have icons that look alike and it is very hard to understand what is what. If you miss the legends, you can very easily get the icons mixed up.

Icons from the Utilities section in Mac OS X. I am always getting them confused and launching the wrong application.

The problem is aggravated by having small size icons displayed on screen.

#2 Too many elements in one icon
The simpler and more laconic the icon, the better. It is preferable to keep the number of objects in a single icon to a minimum.

Nevertheless, Microsoft’s designers, inspired by the new format of icons featured in Windows Vista, decided to go big and drew bloated icons to justify their bloated budget:

Each icon presents us with a mini-story with an intertwined plot. The problem is that in small size you are unable to work out what is depicted. Even in larger sizes, it is not always that easy to decipher the icons.

#3 Unnecessary elements
An icon should be easy to read. The fewer elements it has, the better. It is better if the whole image is relevant and not only part of it. Therefore, you have to pay attention to the context of using icons.

Let us take for instance some database icons:

At first glance everything looks alright.

But if this application (or a separate toolbar) deals only with databases, we can (and should) remove the unnecessary part:

The sense is not lost here but the icons become much more discernible.

Here is a real-life example of unnecessary elements occurring in BeOS 5 icons:

Ticks here are absolutely superfluous. By the way, why are they done in red?

#4 Lack of unity of style within a set of icons
It is a unity of style that unites several icons into a set. The uniting property can be any of the following: color scheme, perspective, size, drawing technique or a combination of several such properties. If there are only a few icons in the set, the designer can keep some rules in his head. If there are many icons in the set and there are several designers working on them (for instance, icons for an operating system), then special instructions are created. Such instructions describe in detail how to draw an icon so that it fits straight into the set.

A multitude of styles in the shell32.dll file in Windows XP. This is the default set of icons suggested to a user wishing to change an icon.

#5 Unnecessary perspective and shadows in small icons
Progress does not stand still: interfaces have gained the potential to display semi-transparent objects, lost the limitation on the number of colors and there is now a trend towards 3D icons. But is it really all that useful? Not always! Especially if we are talking about icons sized 16×16 or smaller.

For example, let us take the application manager from GNOME 2.2.0 (RedHat 9):

Perspective in icons of such minute size is unnecessary and even counter-productive.

And here is the application manager from Windows XP:

As standard, icons in Windows XP are given a two-pixel black shadow; but in 16×16 size the shadow appears too large and makes the icons look dirty. The Address Book icon looks especially bad in this set.

#6 Overly original metaphors
Selecting what is to be displayed in an icon is always a compromise between recognizability and originality. Before a metaphor (image) is developed for an icon it is wise to see how it is done in other products. Maybe the best solution lies not in coming up with something original but rather in adopting the existing solution.

An example of excessive originality is the bin icon in OS/2 Warp 4, which is not actually a bin at all but a shredder.

Another problem with choosing a shredder is that there is no one well-known type of shredder out there. The icon appears very much like a printer with an octopus hidden inside. What is more, it is absolutely unclear how a full bin would be displayed according to this metaphor.

#7 National or social characteristics not being taken into account
It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country.

Let us suggest that we need to draw an icon for working with e-mail. It makes perfect sense to use a metaphor of real paper mail. A mailbox for example.

These images are courtesy of the Wikipedia article entitled Post box.

The answer can be found in the manual on creating icons for Mac OS X: "Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp."

The idea of using a stamp is great but the use of the eagle red-tailed hawk image is definitely questionable.

However, you need to account not only for national features… That reminds me of something funny. Once, we needed an icon for a data filter, which is often portrayed using the metaphor of a funnel. It was drawn like this:

The client’s response was as follows: "I do not really understand why for a filter, you drew an icon shaped like a Martini glass!"

#8 Images of real interface elements in icons
The manual on creating icons for Mac OS X warns us: “Avoid using Aqua interface elements in your icons; they could be confused with the actual interface.” But all in vain! For instance, take a look at the following icon:

You reach out to click on the radio button but end up clicking the whole icon!

Here is an interesting example from the OmniWeb browser interface:

Pay attention to the Previous and Next buttons, a rare type of button with legends underneath. Oops! They are not buttons at all, they are icons!

#9 Text inside icons
This mistake is commonly seen in application icons. Clearly the first thing that comes to mind when working on an application icon is to adapt the application’s logo. What is so bad about the text inside the icon? Firstly, it is directly language-related and so impedes localization. Secondly, if the icon is small, it is impossible to read the text. Thirdly, in the case of application icons, this text is repeated in the name of the application.

#10 Outside the pixel framework
As a rule, this problem occurs if you use a vector editor for drawing icons. In large size everything looks pretty and clear; but in reality the icons are small, and under rasterization anti-aliasing frets the objects’ borders.

 
http://turbomilk.com/truestories/cookbook/criticism/10-mistakes-in-icon-design/

本文鏈接:http://m.95time.cn/design/doc/2008/5396.asp 

出處:相關(guān)論壇
責(zé)任編輯:bluehearts

相關(guān)文章 更多相關(guān)鏈接
404錯(cuò)誤頁面的創(chuàng)意設(shè)計(jì)
十大網(wǎng)站設(shè)計(jì)錯(cuò)誤——2007
常見可用性錯(cuò)誤——交互錯(cuò)誤
常見可用性錯(cuò)誤——表單組件錯(cuò)誤
常見可用性錯(cuò)誤——文案錯(cuò)誤
作者文章 更多作者文章
圣誕節(jié)彩燈攝影作品
新浪博客、圈子模版設(shè)計(jì)大賽
方正推出徐靜蕾字體
CrossOver 參展作品選
視覺中國6周年主題設(shè)計(jì)展
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計(jì)比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點(diǎn)最新 站點(diǎn)最新列表
周大!熬•自然”設(shè)計(jì)大賽開啟
國際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計(jì)算如何讓安全問題可控
云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)
阿里行云
云手機(jī)年終巨獻(xiàn),送禮標(biāo)配299起
阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽
欄目最新 欄目最新列表
國外創(chuàng)意名片設(shè)計(jì)欣賞
情感化界面
線下項(xiàng)目工作流程(歸納篇)
線下項(xiàng)目工作流程(分析篇)
簡約而不簡單-Practise平面設(shè)計(jì)
培養(yǎng)用戶的使用習(xí)慣
優(yōu)秀名片設(shè)計(jì)
專題頭圖的秘密武器
別讓UED忽悠你(2):多少錢一斤
別讓UED忽悠你(1):天生的矛盾

藍(lán)色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨(dú)家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請(qǐng)不要盜鏈到本站,且不準(zhǔn)打上各自站點(diǎn)的水印,亦不能抹去我站點(diǎn)水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計(jì)作品,如需使用,請(qǐng)與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請(qǐng)與我們聯(lián)系,我們將立即刪除修改。

您的評(píng)論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評(píng)論。如果您不是本站會(huì)員,你可以注冊(cè) 為本站會(huì)員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯(cuò)誤,請(qǐng)用報(bào)告錯(cuò)誤,以利文檔及時(shí)修改。
不評(píng)分 1 2 3 4 5
注意:請(qǐng)不要在評(píng)論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請(qǐng)您注意:
·不良評(píng)論請(qǐng)用報(bào)告管理員,以利管理員及時(shí)刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項(xiàng)有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評(píng)論管理人員有權(quán)保留或刪除其管轄評(píng)論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評(píng)論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評(píng)論文檔 | 報(bào)告錯(cuò)誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計(jì)之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計(jì)》
犀利開發(fā)—jQuery內(nèi)核詳解與實(shí)踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2