图标 - UCD大社区

图标设计心得

adali — 2010-12-24 00:22:55

图标在生活中运用是显而可见的。例如：男女厕所标志和各种交通标志等。在计算机系统或软件方面的应用也是很广泛。例如：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。
下面的例子更形象的说明这个问题。

(图片来源：九铭)
外国人A与中国人B，两人在语言上存在差异对文字的认识是不同的，用图标来表示，会缩短语言描述的距离。所以图标更具有快捷传达信息、便于记忆的特性。那么图标被广泛使用的时候，什么样的图标才是好图标呢？好图标从两个角度去认识：辨识度与精致度。
辨识度：图标能够直观的表现要描述的物体。
精致度：在精美的页面或者系统界面上，精致的图标能提升整个页面的最佳视觉。
那么怎么样才能做出一套好的图标？在图标设计过程中需要注意哪些问题？
在《图标设计语言》中作者Yegor Gilyov (来源站点Turbo Milk )曾提到 “如果你需要画几个图标，你需要整体考虑这个站点所有图标，然后再开始使用软件绘制。”如果你的icon全都是粗糙模糊的造型或拙劣的渐变色，那么这个icon很失败，不能当作是“风格的问题”来了事。这样的icon不仅仅会毁掉整个页面的美观，更让被描述的文字降低了被查看的欲望，对你的用户来使用或阅读它是一种极大的痛苦。Icon的细节包含对颜色的使用，对造型的创新，对质感的体现。
Icon的设计步骤

我认为icon设计遵循上面的一个规则，在做icon的前提要先构思好整个icon的风格，有了构思可以开始造型设计接着就是上色，然后对整体的icon进行细节修改。
Icon的要点从学会批评别人开始
曾经有人说过：“批评别人的作品比自己制作一个优秀的作品要容易得多。但如果使用系统的方式去批判，这才是个成熟的分析！”那么怎么学会去批判呢？下面来分享一些批判后总结的例子。

（图片来源iconfans）
上面一些图标看起来很像，这让人很难分辨出哪个是哪个。尤其小图标的时候辨识性差了。如果你不注意说明，你会很容易把这些图标混在一起。图标还是要有差异性，在保全风格统一的前提下要有很好的识别性，可以在颜色上或者造型上做差异的改变。

(图片来源：九铭)
图标应该是轻松被识别的，构建它的元素要越少越好。而上面的插画和图形明显的告诉我们图标的相关性不该是复杂的，可以省略掉相同的对象，凸显出重要的信息。

上面图片形象的说明了图标像素边沿化的问题，左边的图标比较模糊不清，右边的比较清晰。

在做icon时很容易出现一些常见的毛边，导致像素过渡化，最后圆角不柔和。
怎么样处理不柔和的圆角？
在由大icon到小icon的过程中你要重视一些细节的处理，对于这个我创了一句口诀：去多稳造型，边沿移到位。
去多稳造型：大icon到小icon的过程是由细节的减少开始变化，大icon比较注重质感和光泽等，小icon除了保证质感还要清晰可见。在做16像素icon时可以减少一些必要的元素用像素点去代替，去掉多余的阴影与高光。
边沿移到位：小icon的边缘移位主要靠移动像素点来实现，或者增加像素点。

经过处理，上面的图标已经没有了原来的锯齿，有的是柔和的圆角。
当然每个设计师做icon的习惯都是不一样的，这只是我做icon时的一些心得。

“BUSINESS”ICON制作分享

云泽 — 2010-11-18 00:57:48

大家一般都用一般都用PS或者AI来制作icon，其实PS与AI也可以打造出不一样的效果。AI造型（不得不承认钢笔工具可以秒杀掉PS里面的钢笔工具），PS效果灵活运用可以让图标既有AI图标的简洁干净又不乏PS制作的效果。因为AI是矢量的，同时也能保证图标在某些用处的时候能够灵活的放大与缩小而不损失太多的效果，同样简洁干净的图标也是商业运用的首选

此类图标风格除了在造型上有所不同外，效果的制作手法都是大同小异，下面列出了两个制作过程中的变化流程

网上冲浪：

要在球体上贴上世界地图使他变成地球，为了节省时间可以从网上找下地图的矢量然后贴上去，然后渐变并给上投影。给球体加上高光与反光，再加一点小细节AI部分的制作就完成了。导进PS后进行锐化处理再调节下整体的色相饱和度，最后给上投影就算整体完成了。

回收站：

在制作这个垃圾桶的时候，我首先定位他的质感是磨砂半透明的，这样他能适应在不同背景。

第7步磨砂半透明的效果：把回收站里面装的杂物（A）的那个图层复制一层（B），在复制的这一层的上面进行高斯模糊，降低模糊后的图片，然后擦去A在玻璃遮住的部分，再擦去B露出玻璃的部分，最后合并图层就完成了。

总结：当我们把AI制作矢量的导入到PS里面的时候需要稍微做下锐化处理（第5步是刚入PS的时候），因为这样可以使轮廓更清晰，当然整个锐化的过程中，需要用橡皮擦把一些锐化过度的地方抹掉。

首次写文章，不足之处在所难免，小弟以后会努力，谢谢大家

128Px 下载

胜过语言的图形符号

小多 — 2009-05-04 00:57:38

就在刚才，我给GMAIL安装了Twitterd插件。
安装完插件后，Gmail提示我要连接Twitter的账号才能使用：

我顺着提示操作下去，就看到了这个页面：

一路下来的英文界面，已经让我相当的头疼了。
但是这两个按钮即使不看文案,也很容易猜出其中的意思。
比起千篇一律的方形按钮，这里的“小箭头”设计真是太贴心了。
在这里它准确的指导了我进行下一步的操作。

在TB UED最新的文章《鸡肋般的文案内容》里说到：能不说就不说，用优秀的交互来代替文案。
这里可以小补充一下了：优秀的视觉设计也能达到这样的效果。
当我们纠结于这里的文案是”接受”‘，“允许”或者是“下一步”的时候，一个小小的箭头反而最能说明问题。
图形符号的作用是不能小视的，它直观易记，非常便于信息的传递。

我认为在以下3个方面，图形符号能帮助我们改善体验：

一、明确方向性

从我们学习交互设计相关知识开始，就一直被强调“符合用户的心理模型”。
我们绞尽脑汁掩盖计算机那种难以令人理解的工作模式。
（1）就像是注册：
我们要告诉用户：
线上注册就像你在银行申请开通某项业务一样简单。
遵循一定的操作步骤，就能成功。
更妙的是，还有温柔的银行小妹告诉你：您还差几步就办理成功了。
鬼才关心计算机在后面交换了多少次数据。

（2）除了操作流，恰当的图形也能对视觉的方向进行引导：

如果这个下拉菜单不是往下，而是往左边展开
应该是一件很让人恼火的事情吧。

二、提高效率

阅读图形总比阅读文字来的快。
（1）在提高效率方面，出现的最多的就是反馈图标了。
为了加快用户理解反馈的速度，大部分网站的反馈不仅提供了辨识用的图标，还用颜色做以区分。

这样的反馈，不需要看完所有文案，一眼就能得到反馈信息。
(2)图形在对比中的优势也是显而易见：

就像上图，你想了解不同卖家提供的服务，通过图形对比几乎一眼就能看出差别。
但是如果没有图形呢，相信你得多花不少时间：

(3) 当然，还有上面Twitter的那个例子，它极大的提高了我这个英盲的效率。
至少，我省去了查词典的时间。

三、容易学习

现实环境中，有很多物理对象可以为我们提供隐喻。
虽然说在复杂的交互行为中，合适的隐喻体并不如我们想象中容易找到。
但是对于一些简单的行为模式，使用一些通用图形符号，会节省用户的学习成本

例如上图，左边保存，右边打印。
已经广泛的应用在各大软件界面上。
这种通用的甚至可以说是标准化的功能性图形，对于用户来说，学习成本是极低的。
当然，不排除不合适的图形反而给用户带来困扰的情况。

当我们通过交互方式、文案，找不到合适的解决方式的时候。
不妨看看是不是能通过视觉的手法来解决问题。
就像Twitter那个贴心的箭头按钮一样。

相关话题：图标源地址：http://www.xiaoduo.net/?p=177

按钮表状态还是表动作？

西贝 — 2009-03-18 09:06:54

关键字：按钮状态动作
在网页中经常见到两类不同的按钮。一类表示当前所示的状态，一类表示将要进行的动作。(如下图)

那么，同样是icon类的按钮，为什么有的表状态，有的表动作？

分析两类按钮的使用场景：
场景一：声音开关的按钮

场景：这组按钮首先表示当前的状态（声音是开着的，还是关着的），点击以后切换到另一个状态。
分析：声音在视觉的表现上不能直接感知，因此需要一个图形化的icon表示当前的状态；左侧的图标表示当前音乐是开启的，点击后关闭声音。如果说只表示当前状态，那么点击后会产生什么操作就比较难猜，没有一个明确的引导。

场景二：视频播放停止的按钮

场景：这组按钮不表示当前的状态，而是表示用户可以进行的操作，跟第一组的表意是反着的。
分析：画面是否在播放是可以直接在屏幕上感知的，因此不需要再讲述当前是怎样的状态，而是提示下一步可以进行的操作；

讨论一下，什么样的体验和表现才是比较好的呢？

1）其实，如果先说状态，再说动作，用户会更明白，比如一个页面的声音状况可以通过一个icon说当前是怎样的，然后再通过一个icon来说你可以怎么样；
具体的表现就是“当前是怎么样的+可以怎么样”

2）这样再看来，其实场景一是省掉了后半句（可以怎么样），场景二省掉了前半句（当前是怎么样的），如果实在是界面上位置稀缺，不能像把两种icon都做出来，那是不是可以先判断在当前的场景下用户是更需要知道“可以怎样”，还是“当前是怎样的”。

3）由此再看其他场景中的设计，比如下拉列表

在前面的部分表述了当前的状态，向下的箭头按钮则表示了可以进行的操作，这个就比较接近于完全展现“当前是怎么样的+可以怎么样”。

4）生活中，类似“可以怎么样”的场景多用于电器/物品的操作，有极强的状态提示，所以比较关心的是“可以怎么样“。例如插板的开关，有按下去的效果。

按钮来操作是不是更明白一些呢？大家是否有不同看法。

相关话题：图标源地址：http://www.shupianhui.com/?p=172

什么样的图标更具有可用性？

hciobserve — 2007-05-10 23:45:17

作为WIMP(Window/Icon/Menu/Pointing Device)界面的关键部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新，越来越多精美、新颖、富有创造力和想像力的图标充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的图标越被用户所接受，图标的可用性要回到它的基本功用去思考。图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系。用户通过这种隐喻，自动地理解图标背后的意义，跨越了语言的界限。但是，如果这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不应是好的图标。因此，图标的设计应该遵守这样的原则：

图标的可用性原则一：图标指向的映射关系应该尽可能的直接、简单。

可能与我们的直觉相反，一些研究显示图标界面与文本界面的比较中，并没有体现出明显的优越性，一个主要原因就是文字和意义的映射是直接的，而图标与意义的映射却不一定是直接和明显的。在坏的图标设计中，用户需要花费几秒钟甚至更长的时间去猜测图标代表的意义，而且还很可能猜错，错误的理解导致错误的操作，错误的操作导致糟糕的结果，这决不是美妙的用户体验，即便从美学角度讲那个图标可能是上佳的艺术作品。“直接”的意思是：不要绕弯。图标展现的视觉表象与其背后的意义只需要很短的意义路径即可连结。譬如对于“剪切”操作，使用“在文稿上打×”的图标形象比“剪刀”的图标形象更易理解，因为前者与剪切操作有更短的意义路径，尽管“剪刀”图标显得更加生动活泼。认知心理学家提出过一个激活扩散模型，就是在人的知识和概念体系中，当一个概念被加工或受到刺激时，该概念结点就产生激活，然后激活与该结点直接相连的多个连结，并继续向四周扩散。与当前概念在概念网络上的连结关系决定了其被激活的强度。这种连结关系取决于人的知识体系的组织架构（即两个概念是否属于同一类别）和概念同时出现或使用的频率。例如在人的知识和概念架构中，在纸质文稿上写字和在电脑上写字都属于撰写文档的类别，那么当“在文稿上打×”的图标形象出现时，被试就会快速地联想到在电脑上进行剪切操作。而“剪刀”的视觉形象最易归属到“衣服裁剪”或“手工劳动”这样的类别中去，因此映射关系具有教长的路径和较弱的连结强度。因此在图标设计中，设计师应该仔细考虑或者直接去调查用户的知识体系，找到最短的概念连结。

图标的可用性原则二：每个图标指向的映射关系应该是唯一的。

这个原则的意思就是，不要让图标产生歧义。想像一下，一个“飞旋的车轮”图标，它代表了什么？也许设计者的本意，是要用车轮的移动来象征电脑中文件的移动操作。可是，用户也许猜测出了其他十几种对应关系，比如一款3D赛车游戏。这个原则其实还有一个推论原则：

不要使用过于复杂的图标。

因为图标的视觉元素越多，那么其意义指向的可能性就越多，用户越有可能从各种各样的角度去解读，那么该图标的可用性就可能越差。

图标的可用性原则三：同一个图标系列中，最好使用相同的映射模式。

在真实世界与计算机世界（或网络世界）的对应中，存在很多种映射模式。笔者粗粗地归纳下，可以发现这样几种映射模式：外观映射、功能映射、语词（字母）映射、部分指代映射和综合映射。在同一个系列图标中，用户极易对图标形成某种固定的映射模式，如果突然出现了另一种模式的映射，用户可能仍将延用先前形成的思维定势进行理解，从而出现理解困难或理解偏差。

图标的可用性原则四：最好使用简短文字做为图标的冗余编码。

在信息传播的过程中，增加信息的冗余度是保证信息传输的可靠性的最有效的方法。在人机交互设计中，最常见的冗余编码就是红绿灯，即每个颜色皆对应位置，使得在人口中占具相当比例的色盲人群也可以通过灯的位置来接收是否可以通行的信息。图标设计也需要增加冗余编码，以保证绝大多数的人都能够快速、准确地理解图标的含义。一个很好的例子出现在手机主菜单的设计中，下面看两种常见的手机主菜单的设计：

图一、诺基亚N95的主菜单

图二、阿尔卡特OT-C825的主菜单

在图一中的图标都在下方加注了简单的文字，和图标一起形成冗余编码。这样即使用户是第一次使用该手机，也能避免图标选择错误。而图二的图标没有将文字直接标注在图标下方，而是在只有选中某个图标的情况下，在屏幕上方显示文字标注，这样无疑增加了用户操作的负担。尽管某些图标，用户很容易理解其含义，比如图二中第二行第一个“相机”图标，用户很容易清楚这是指拍照功能；但有些图标，在没有文字标注的情况下，还是令人费解，比如图二中第四行第一个“礼品盒”图标。因此，笔者认为，在大多数情况下，给图标加注文字是比较好的选择。

最后，我要说明的是，图标设计中的可用性原则与图标的美学考虑在实践中可能存在矛盾，这时候权衡两者是必须的。好的可用性可以让用户更方便地使用产品，而漂亮、时尚或者富有情趣的外观设计可以给用户带来喜悦感等良好的心理体验。很难说哪一方理所应当地取得主导地位，更理想的状态是交互设计师和视觉（外观）设计师进行良好的沟通和合作，求得双赢的设计方案。

参考文献：

1 朱祖祥主编。工程心理学教程，第305至309页，人民教育出版社，2003年，北京。

2 Wichens C D，Hollands J 著，朱祖祥等译。工程心理学与人的作业，第262至266页，华东师范大学出版社，2003年，上海

【译】在网页设计中，如何使用图标来支持内容？

锦心 — 2009-03-11 09:49:40

在做视觉设计时，如何高效地使用图标是一门学问：该使用什么样的图标？图标该放在哪里？大小如何？图标的使用是否帮助用户更好更快的理解内容，亦或是增加了他们的理解负担甚至产生误导？今天恰好看到了一篇很好的文章，可以帮助我们了解该如何使用图标来支持内容，故翻译如下：

为什么使用图标？设计就是传达信息：如果你的网站不能吸引用户，这个问题不在于你分享的信息有多重要、有多刺激。在访问一个网站的最初，大多数用户首先扫描页面来寻找视觉上看着有趣的内容，只有某些事物引起了他们的注意力，他们才真正开始阅读。图标是一个简单、有效的方式吸引用户阅读你网站上的内容。

图标起着与分段一样的心理效果：在视觉上，图标打破了内容，使之不那么让人生却。通过图标将内容划分成几个容易理解的段落和重点，这样的页面很容易阅读，在视觉上也足够有趣以维持用户的注意。因此，不要再浪费时间写那么多无人阅读的内容了，开始使用图标吧！

在本文中，我们将展示很好的例子和网页设计中使用图标来支持内容的最佳做法。

1.如何使用图标

使用图标的首要目标应该是帮助用户更有效地吸收和处理信息。一般的做法是使用大量的空白和那些能增强内容的图标。图标通过给予内容更多的实质和有效的传达，能很好地丰富内容。图标应该用来吸引用户注意信息内容，而不是削弱或取代它。

让功能清单更有趣

列出服务清单是有效的市场推中实用、必要的一部分，但本质上来说，清单是乏味和无聊的。在您的功能清单中使用图标将使其更具有吸引力。

280 Slides

吸引用户关注Web应用程序的新功能

图标是一个视觉邀请，吸引用户去试用Web应用程序的最新、最强大的功能。图标应该捕捉用户的注意力，并引导他们到新的功能上。一旦抓住了他们的注意力，告诉他们是什么使得新功能如此伟大。

Coda

罗列不同的应用和产品

在这种情况下，把图标想成是logo，记住logo的目标是在产品和特定的图像建立精神联系。图标应该独特而简单的：大部分的图标只有128*128像素的，因此要用最低限度的方法，用少表达更多的信息。

intridea

列出您的服务并增加可读性

图标应与内容相关且设计很简单。考虑您试图表达的内容是什么并在此基础上创建图标。网站或文章的主题是什么？使用什么颜色？是什么风格？现代？经典？在视觉上，图标应与网站整体的内容和个性所传达的思想相统一。

j.Alexander Woodworking

2.目的和放置的位置

图标的使用让你的网站显得友好、吸引人和专业，这些表明了你注重细节，哪怕这个细节很小很小。让你的图标发挥创意：标题、工具条、功能清单都是放置图标的好地方。

一个很简单的图标能增加网站的魅力和个性。

Coffeenatic

让用户参与到拥有超长内容的网页中

使用能概括段落大意的图标，这将更便于读者理解文章。

Rackspace

在文章的不同章节间使用图标，可以提供视觉注意点来划分这些章节。

Defined Clarity

大小并不重要，即使是小图标也是有效果的

小图标提供的视觉趣味与大图标的相差无异，却不会让用户分心。确保图标容易辨识并和内容紧密相关。

Morgan Hayes

把图标放置在段落的右侧

>图标的放置不要局限于常规用法，把图标放在右侧比较少见，因此会更有视觉效果。但是请注意，把图标放置在右侧有时候看起来会显得凌乱。

South Creative

改变图标的大小和位置

发挥创意！改变图标的大小和位置可以让内容更具活力和趣味。

Media Temple

3.选择你的风格

说到风格，它的目的是让人有深刻印象。如果你期望设计是独特的，那么可以使用新颖的图标，但图标的有效性至关重要。请记住，使用图标是为了增强内容和设计。不要简单地在iStockPhoto上购买看起来很酷的图标，而是要考虑你的网站风格。

同时，图标的匹配性同样重要。把不相匹配的图标放在一起，无论他们单个看起来有多酷，都是个明显的设计错误，非常不专业。以下是一些图标有效地结合于各自网站风格的例子。

使用浅色和很酷的3D设计的图标，提升了网站的外观和感觉。

GoodBarry

正如下面例子所示的，简洁是有吸引力和实用的。

CrowdSPRING

在2D图标上实用粗糙低劣的风格可以增加很多深度：

Take the walk

选择一个独特和一致的风格，可以使页面有活力且专业：

Squarespace

单色的图标可以帮助突出内容而不会分散注意力：

Studio 7Designs

Gist

不要仅仅因为图标看起来很酷而使用它们，选择哪些与你的风格和品牌相符合的图标：

Treemo

除此之外，还有很多很好的例子，限于篇幅，这里就不一一列举了。如果大家有兴趣，可以查看原文How to use icons to support content in Web design 的第四部分-Additional Examples ^_^

相关话题：图标源地址：http://ued.alipay.com/?p=923