文字还是图标？

5月 8th, 2006

在软件设计中，使用文字链接还是使用图标？
使用文字恐怕是目前为止最准确的表达方式了。但文字却并不总是最好的方式，比如：在Micirosoft Word中的文字居中对齐功能可以使用文字表述：“居中”，也可以使用图标：
uploads/200605/08_181918_wordcenter.gif
Word软件的设计师使用了图标，并在鼠标经过时显示文字：“居中”。

关于这个问题，在《About Face 2.0》中有详尽的分析，分析得出的结论是：使用图标能提高中间级用户的使用效率；而使用文字，对于新手用户更合适。这里所说的“新手用户”是针对某个特定界面而言的，并不是指缺乏电脑使用经验的用户。中间级用户也是如此。

新手用户对于界面的认知十分有限，多数情况下，不知道特定图标的含义。当我第一次使用Word软件写文档的时候，“哪个是‘粗体’功能？”我只能用光标一个个的去试探，还好，第一个图标就是了。要使用这些功能，鼠标经过时显示的文字对我更有帮助。

用户对软件更加熟悉后，逐渐变为了中间级用户，图标就更方便了。因为，文字本身并没有视觉传达功能，用户不能只通过识别字形就猜出它所表达的含义。即使是中文也做不到。中文是从象形文字演化发展而来的，每一个字都能独立的表达一定的含义。但是，演化到现在，中文已经不是象形文字了，不能完全实现图标的功能。

图标是有视觉传达功能的。“那个功能是绿色的，圆的，在工具条中间偏左……”。
uploads/200605/08_181958_wordlink.gif
一个中间级用户可以通过这样的记忆找到Word的“插入超链接”功能，而不需要阅读具体的说明文字。

软件的设计是针对中间级用户的（—Alan Cooper），而web的设计却不是。

web界面设计需要针对新手用户。
web界面面临的首要问题是：“告诉用户有这么个功能”。而“如何更快捷的找到这个功能”退居到了第二位。虽然，软件界面设计也同样面临着“告知”的问题，但，与web相比，软件对用户的黏性更大，用户不会因为某一次没有在Word中找到“居中”功能，就放弃使用这个软件了，但却会很轻易的放弃访问一个网站。

与软件相比，用户在网站上要完成的任务往往不那么重要，因此，愿意为之所付出的学习成本也就会更低。用户会为了学习使用photoshop钻研上几个月，甚至还会报上个什么培训班。但是，却不会在flickr的图片编辑工具上花太多心思。
uploads/200605/08_182043_flickr.gif
所以，flickr的图片编辑功能都有文字说明。
ps:上图中的照片是青海湖，位于我国青海省，异常美丽的内陆咸水湖。

用户会为了第二天的报告而一整天都面对着PowerPoint，但是，却不会一整天都面对着新浪的新闻中心。web界面面对的用户更加缺乏耐心，所以，web界面需要更直接，让用户学习的过程更短。更多的使用文字，把要表述的功能直接呈现给用户，往往效果更好，比如google，
uploads/200605/08_182112_gmail.gif
如果使用图标，Gmail的界面看起来会更简洁、美观。但是，那样的话，Gmail就不会象现在这样“好用”了。和其他web界面一样，Gmail的用户主要是“新手用户”。即使每天都使用Gmail收发邮件，Gmail对于您来说也不会比网页浏览器更常用。（这是显而易见的，您需要使用网页浏览器来访问Gmail，只要另外再访问一个其他什么网站，您使用网页浏览器就会比使用Gmail界面更频繁了。）所以，同样是表述“刷新”功能，Gmail界面用文字，而网页浏览器用图标。鉴于目前对google的溢美之词过分泛滥，我们就此打住好了。

当然，web界面中并不是只能使用文字而不能使用图标。对于某一个网站，有些链接或功能是用户要经常用到的。此时，用户确切的知道界面上有这样一个功能。恰当的使用图标，可以缩短用户操作时间。Yahoo.com首页左上角就设计了3个自定义的图标位置，并为其网站的27个重要频道设计了图标，供用户选择。

但是，如果不能正确认识图标在web界面中的作用，那么，将会造成图形元素的泛滥。不幸的是，目前，我们的网页设计经常是这样。
uploads/200605/08_182135_bokee.gif
图标被毫无节制的滥用，那些原本有价值的图标被淹没在众多“网页设计素材”中。类似界面的设计师们不仅没有意识到web界面中，图标和文字链接给用户带来的不同体验，甚至其中有些人还只是把图标当作页面上的装饰元素。当然，设计出类似界面也许是迫于某些压力。（噢，好像又要说到公司老板和客户了。不是说您，不是不是，绝对不是，别多心。）

在web界面设计中，要使用一个图标，需要确定，不会因为使用这个图标而让用户找不到这个链接了，并且，需要确定，这个图标确实能让用户更快捷的找到这个链接。图标并不总是能让界面更易用。

面对“是否需要使用一个图标？”的问题，首要的判断依据不是界面的视觉表现是否需要，其次的判断依据也不是视觉表现的需要，最最次要的判断依据仍旧与界面视觉表现无关。

有49 条对“文字还是图标？”的评论

  1. todd 说：
    5月 8th, 2006 at 10:17 下午

    不错～ [cool]

  2. iceshow 说：
    5月 8th, 2006 at 10:31 下午

    出手不凡，对于最后的一个举例太贴切了 [yes]

    这图文并茂很适合阅读，而且图上的标注非常醒目。赞一下

  3. 一叶千鸟 说：
    5月 9th, 2006 at 9:04 上午

    很有说服力，文字确实比图标更好。

    1，图标视觉权重比文字高
    2，要做到形象贴切没有歧义，入眼显眼养眼
    3，控制使用比例，往往少才会有好效果

    实际产品中的图标，如果没有统一风格，东拉西扯的盗用，效果会更差。

  4. 爆牙齿 说：
    5月 9th, 2006 at 9:42 上午

    很好。
    喜欢此类细节设计的研究。

  5. Tony 说：
    5月 9th, 2006 at 10:00 上午

    我每次使用Gmail的时间确实不长，但是每天都要访问若干次，长久下来，应该不算是一个“新手用户”。但是Gmail不厌其烦的使用文字来描述功能，并没有让我觉得自己已经转换为一个“中间用户”。而且也影响我使用Gmail的效率。

    能否使用文字和图标并用的方式了？或者有一个选项让用户自己来选择？

  6. 白鸦 说：
    5月 9th, 2006 at 11:09 上午

    说的好，

    这个BLOG的程序被你改的也确实舒服了 [yes]

  7. 瀚潮 说：
    5月 9th, 2006 at 11:22 上午

    臭鱼兄不甚高产，却篇篇尽是精华！赞！对我这样的新手也耐心引导，推荐了不少好书，感谢！记得在哪里看到一篇文章，讲的是图标的设计不能有太复杂的细节（如文中所举的bokee的例子），以免用户的注意力被吸引到图标本身而非其标示的含意上。文字+简单的图标（如文中所举的flickr的例子）或许很适合Web设计。

  8. s5s5 说：
    5月 9th, 2006 at 7:47 下午

    事实是你无论设计成什么样，人都会适应~
    当然，前提是：有用！
    GMAIL的例子举的很失败～
    事实是，这样说明都是有用的～
    BOKEE的例子还可以～
    因为，全TMD的没用～

  9. DoChance 说：
    5月 10th, 2006 at 1:53 下午

    BOKEE的例子举的也不恰当

    flickr和gmail的例子都是引用了以追求用户交互/操作为目的的界面

    而bokee的例子实际上是引用了一个以服务介绍为目的的界面。。。

    ———————————————————-
    http://blog.DoChance.com
    [star] DoChance - Just Do It !

  10. DoChance 说：
    5月 10th, 2006 at 2:12 下午

    实际上，gmail注册成功之后看到的那个介绍页面，flickr的learn more页面，跟这个例子中引用的BOKEE的页面更具有可比性

    ———————————————————-
    http://blog.DoChance.com
    [star] DoChance - Just Do It !

  11. s5s5 说：
    5月 10th, 2006 at 9:55 下午

    楼上的我顶

  12. 梦游客 说：
    5月 10th, 2006 at 9:55 下午

    感谢楼主的文章，受益匪浅，谢谢了~~~！

  13. 感谢楼主 说：
    5月 11th, 2006 at 9:26 上午

    如上！

  14. DoChance 说：
    5月 11th, 2006 at 10:37 上午

    我这绝对不是为了广告而发的spam，
    请臭鱼针对我所提出的质疑给与说明，不然上banerzhuan也行:)
    ———————————————————
    BOKEE的例子举的也不恰当

    flickr和gmail的例子都是引用了以追求用户交互/操作为目的的界面

    而bokee的例子实际上是引用了一个以服务介绍为目的的界面。。。

    实际上，gmail注册成功之后看到的那个介绍页面，flickr的learn more页面，跟这个例子中引用的BOKEE的页面更具有可比性

    ———————————————————————————–
    http://blog.DoChance.com
    [star] DoChance - Just Do It !

  15. 臭鱼 说：
    5月 11th, 2006 at 10:29 下午

    DoChance：别，别着急，没人说你在发广告啊。我这两天要出远门，忙着准备行装，看到你的评论了，没来的及认真琢磨，也没来的及回复。多包涵！

    引用自 DoChance
    flickr和gmail的例子都是引用了以追求用户交互/操作为目的的界面
    而bokee的例子实际上是引用了一个以服务介绍为目的的界面。。。
    实际上，gmail注册成功之后看到的那个介绍页面，flickr的learn more页面，跟这个例子中引用的BOKEE的页面更具有可比性

    flickr和gmail的界面是那种操作界面，bokee的界面也确实是个介绍性的界面。这两者确实存在差别。
    我写这篇小文的时候并没有考虑这个差别，只是觉得都是web界面，目的都是要向用户清楚的传达信息。“这有一个功能，您是否需要？”“这有一项服务，你是否需要？”
    如你所说，如果能使用更相似的例子，会更有说服力。比如，可以以bokee后台管理界面为例，与flickr和gmail那两个界面对比。
    其实bokee后台管理界面中图形元素滥用的现象更突出，哎呀！后悔后悔！

  16. DoChance 说：
    5月 12th, 2006 at 5:39 下午

    难道你要求一个blog的管理后台像一个email那样简洁吗？
    国内有这样的例子可举嘛？
    不过你所说的BOKEE的后台不知道具体是指哪个，他们有好几个呢，你都研究过吗？

    让那些自己没有主见的人被说服去吧！
    真正就事论事的人自有判断！
    ———————————————————————————–
    http://blog.DoChance.com
    [star] DoChance - Just Do It !

  17. sume 说：
    5月 12th, 2006 at 7:55 下午

    IE的自定义选项可以借鉴，提供了三个选择“显示文字标签/选择性显示/无文字”，我比较喜欢。对于“中间”用户我觉得这个设置方式不错。

  18. iqst 说：
    5月 12th, 2006 at 10:01 下午

    1 DoChance 有些斤斤计较了，没必要在这些细节上纠缠不休，明白作者所要表达的就足够了，至于是否有可比性，你自己知道也让臭鱼回复了就足够了，继续纠缠没意义

    2 文章的确不错，不过这个博客还是有所欠缺，评论里没有写blog地址的地方，我想来这里的朋友都有自己的博客吧，不能互相访问是很不方便的，影响了相互的沟通，希望能加入这个功能

  19. onling 说：
    5月 13th, 2006 at 11:27 下午

    写的很不错，但是，我个人感觉一个网页的界面，虽然可用性是很重要，但是装饰以及部分图案的运用也还是可取的（当然是恰当的运用），如果单单从可用交互来考虑，可能一个界面会很平淡，给人的第一印象不好，就不会有下一步的体验~

  20. ffuqiangg 说：
    5月 14th, 2006 at 1:18 上午

    文字和图标各有各的优势，应该根据实际情况分析
    还要考虑用户的审美趋向，一般欧美的用户比较能结束简单的界面设计，而亚洲，东方的用户比较喜欢漂亮精美的设计。
    重要的是用户的体验，如果说大量的图标并没有对用户的体验造成困扰那就完全是可行的，而相反文字的识别效果差需要设计师小心的排版才能有好的效果。
    就像sina的首页导航，一大堆文字链接挤在一起就很难看也很难用

    Contact Me
    —————-
    Gtalk：ffuqiangg@gmail.com

  21. ffuqiangg 说：
    5月 14th, 2006 at 1:24 上午

    啊，不能帖图的啊。
    麻烦大大把上面的图片链接给删掉！！^_^ :-( 大大记得改一下版把哪些ubb代码可以用写给注解，免得用和我一样的兄弟

  22. aWFLASHER 说：
    5月 15th, 2006 at 1:16 下午

    OTL 路过！　这里的文章有的一看了，哈哈

  23. Awflasher 说：
    5月 15th, 2006 at 1:17 下午

    发表评论也很爽，不过会不会广告很多……哎……

  24. 臭鱼 说：
    5月 15th, 2006 at 6:04 下午

    To onling：同意你的意见。网页的交互设计也只是网页设计的一个部分，如同图形界面设计是网页设计的一部分一样。强调交互设计并不是要“罢黜百家，独尊交互”。只不过这里是在说“交互设计”罢了。

  25. 丛潇洒 说：
    5月 30th, 2006 at 6:34 下午

    引用：
    －－－－－－－－－－－－－－－－－－－－－－－－－－－－－
    Tony 2006-05-09 10:00:53
    我每次使用Gmail的时间确实不长，但是每天都要访问若干次，长久下来，应该不算是一个“新手用户”。但是Gmail不厌其烦的使用文字来描述功能，并没有让我觉得自己已经转换为一个“中间用户”。而且也影响我使用Gmail的效率。

    能否使用文字和图标并用的方式了？或者有一个选项让用户自己来选择？
    －－－－－－－－－－－－－－－－－－－－－－－－－－－－－

    [lol] 我想你应该庆幸他起码还在那里没什么变化。并没有因为你成了中间用户而变成什么别的东西让你摸不到头脑。

  26. Hanson 说：
    6月 5th, 2006 at 2:20 下午

    臭鱼的文章总是很实用，虽然貌不惊人，但是细读起来却是大有内容。佩服佩服。 [smile]

  27. tramp 说：
    6月 19th, 2006 at 10:58 上午

    对于WEB界面来说，好用、易用我觉得是主要的，而好用、易用的前提就需要给用户操作简单、容易识别的信息，如文字、图标等。而我要说的是，文字、图标或文字加图标应根据具体的产品而定，不能一概而论地说使用文字好或则使用图标好。

  28. 冬虫草 说：
    7月 24th, 2006 at 4:25 下午

    臭鱼的文章我在一篇篇的读,确实受益非浅,关注并继续交互设计研究中….还有我是新手,希望臭鱼能些指导和建议，谢谢!

  29. maxbbn 说：
    7月 26th, 2006 at 3:16 下午

    不错不错，继续关注中

  30. 无法显示 说：
    8月 29th, 2006 at 3:27 下午

    学习.受益匪浅.

  31. green 说：
    9月 14th, 2006 at 2:54 下午

    快看完了，感悟中….. [yes]

  32. Evan 说：
    10月 16th, 2006 at 3:07 下午

    个人也是觉得文字比图标好,
    但往往有些人或者客户喜欢页面上的美观,加上乱七八糟的图片,真晕

    如果大家都说文字好的话,那以后大家设计都不要图片了,直接用文字好了,这样会不会造成网页从此缺少点什么呢?

    怎样把图标和文字合理的利用起来才是硬道理.

  33. 小鱼鲨鲨 说：
    10月 17th, 2006 at 11:34 上午

    曾经有一个web设计奖赛，为航空订票系统作的，全是文字构成的，还拿了奖，那个也可以作为一个案例分析。

    我是一个新手，请多多包涵。

  34. 小不点的恋情 说：
    10月 28th, 2006 at 8:24 上午

    能不能帮我设计一个标志呀,是用一个M和一个X组成的,我挖空心思想了半天也想不出来.拜托啦! [redface]

  35. 呵呵 说：
    10月 30th, 2006 at 7:02 下午

    [angry] [angry] [angry] [angry] [angry] [angry] [angry] 垃圾!!!!!!!!!!!!!!!!!!!!!!!!!拜托这个也敢弄!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 [angry] [angry] [angry] [angry] [angry] [angry]

  36. 奇遇 说：
    11月 10th, 2006 at 6:03 下午

    小姑娘,这里是讨论交互设计的 [smile]

  37. badst 说：
    12月 9th, 2006 at 8:41 下午

    有文字又有图标不是很好吗？
    http://www.yupoo.com/photos/view?id=ff8080810f50595a010f67391cd15478
    看看这图。

  38. 臭鱼 说：
    12月 15th, 2006 at 1:46 上午

    图中的例子是让用户自定义，自己选择是用图标还是文字，这似乎是个万全之策。之前，Tony也说过，但是，软件和网站毕竟还是有区别的，即使网站提供类似的选择功能，恐怕也很少会有用户愿意去选。

    如果大量的链接前面都顶一个icon似乎也没有价值，因为通常很难为内容各异的链接都找到合适的链接，如果是凑合，那就又变成了装饰。

    如果你能确信某个图标能帮助用户识别，那当然是可以使用的。不过恐怕多数时候是做不到的，比如，现在至少可以找到10种以上的图标当作“登录”，那么加上其中的一个就很难起到辅助识别的作用。

  39. simonlau 说：
    5月 25th, 2007 at 5:14 下午

    我曾记得看过的一个网站，他的操作按钮的形式是可选的，默认的界面是文字+图形，而当你觉得不再需要要文字提示的时候，可以通过一个按钮，来切换简洁模式，这个模式的每个按钮只是图形而已，目前ajax盛行,做一个这样的效果应该不算很难吧 [confused]

  40. corel 说：
    6月 7th, 2007 at 3:05 下午

    臭鱼 2006-12-15 01:46:15
    图中的例子是让用户自定义，自己选择是用图标还是文字，这似乎是个万全之策。之前，Tony也说过，但是，软件和网站毕竟还是有区别的，即使网站提供类似的选择功能，恐怕也很少会有用户愿意去选
    用了这么多年，根本就不知道IE还有这功能，更别说一般用户了。
    如果要提供选择，如何将这个选择让用户看得见，又要做一个平衡。

  41. 使用Title提升可访问性 - 千鳥志 说：
    4月 2nd, 2009 at 6:44 下午

    [...] 最典型类似对icon图示的辅助说明，可以最大化平衡界面复杂度与可操作性。并且针对某些群众认知度比较高的操作，如果图形传达到位，完全可以使用icon代替，更多交互场景请参考臭鱼在06年完成文字还是图标的总结。 [...]

  42. 使用Title提升可访问性 « Join BLOG 说：
    4月 2nd, 2009 at 8:53 下午

    [...] 最典型类似对icon图示的辅助说明，可以最大化平衡界面复杂度与可操作性。并且针对某些群众认知度比较高的操作，如果图形传达到位，完全可以使用icon代替，更多交互场景请参考臭鱼在06年完成文字还是图标的总结。 [...]

  43. 751 说：
    11月 24th, 2009 at 2:28 上午

    http://www.67g.cn/movie/news/movies/0910/289653043.html

  44. 34 说：
    12月 5th, 2009 at 5:04 上午

  45. 890 说：
    12月 30th, 2009 at 1:38 上午

  46. 864 说：
    3月 18th, 2010 at 2:28 上午

  47. Sigma 说：
    5月 20th, 2010 at 10:36 上午

    最近正在纠结于此事，看了受益匪浅。希望有机会多交流！！！

  48. 537 说：
    7月 8th, 2010 at 2:05 上午

  49. 冰棍 说：
    7月 28th, 2010 at 2:36 下午

    这篇文字很有很有说服力:-) PS:GMail的文字默认就是那么难看嘛？ 总感觉可以有更为合适 更为美观的处理方式来协调文字与图标的关系 也可以说是功能与美观性的关系 我会一直走在探索与进步的道路上

发表评论

您的大名：