文字还是图标?

五月 8th, 2006 49 Comments »

在软件设计中,使用文字链接还是使用图标?
使用文字恐怕是目前为止最准确的表达方式了。但文字却并不总是最好的方式,比如:在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 说:

    不错~ [cool]

  2. iceshow 说:

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

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

  3. 一叶千鸟 说:

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

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

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

  4. 爆牙齿 说:

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

  5. Tony 说:

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

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

  6. 白鸦 说:

    说的好,

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

  7. 瀚潮 说:

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

  8. s5s5 说:

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

  9. DoChance 说:

    BOKEE的例子举的也不恰当

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

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

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

  10. DoChance 说:

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

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

  11. s5s5 说:

    楼上的我顶

  12. 梦游客 说:

    感谢楼主的文章,受益匪浅,谢谢了~~~!

  13. 感谢楼主 说:

    如上!

  14. DoChance 说:

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

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

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

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

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

  15. 臭鱼 说:

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

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

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

  16. DoChance 说:

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

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

  17. sume 说:

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

  18. iqst 说:

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

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

  19. onling 说:

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

  20. ffuqiangg 说:

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

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

  21. ffuqiangg 说:

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

  22. aWFLASHER 说:

    OTL 路过! 这里的文章有的一看了,哈哈

  23. Awflasher 说:

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

  24. 臭鱼 说:

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

  25. 丛潇洒 说:

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

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

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

  26. Hanson 说:

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

  27. tramp 说:

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

  28. 冬虫草 说:

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

  29. maxbbn 说:

    不错不错,继续关注中

  30. 无法显示 说:

    学习.受益匪浅.

  31. green 说:

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

  32. Evan 说:

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

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

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

  33. 小鱼鲨鲨 说:

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

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

  34. 小不点的恋情 说:

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

  35. 呵呵 说:

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

  36. 奇遇 说:

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

  37. badst 说:

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

  38. 臭鱼 说:

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

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

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

  39. simonlau 说:

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

  40. corel 说:

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

  41. 使用Title提升可访问性 - 千鳥志 说:

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

  42. 使用Title提升可访问性 « Join BLOG 说:

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

  43. 751 说:
  44. 34 说:
  45. 890 说:
  46. 864 说:
  47. Sigma 说:

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

  48. 冰棍 说:

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

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

发表评论

您的大名: