图标是否就是我们认为的这么重要?

不知从何时起,网页设计流行起了图标,即象形化某个功能,以图形方式表达出来,如下: 知乎的输入框工具栏,是没有文字标注的,用图标确实可以让用户一目了然的清楚它所代表的功能是什么,即使没看懂,鼠标悬停上去后也会有提示文字。这样的图标,就是好图标。 再比如这个:以上的每句话左边都有个图标,如果没有文字标注,用图标还可以理解,可是在已经有文字标注的情况下,为什么还要添加图标? 还有很多地方,图标与文字的搭…
关注者
409
被浏览
10461

20 个回答

图标的使用自从 Macintosh 1.0,甚至在更早的 Xerox 图形界面开始就有了。

图标的好处:
  • 全球通用,Windows,iOS, etc., 中文版和英文版甚至各种语言版本,在不打开菜单之前,基本上都长一样。
  • 节约空间,如果在一个图标能够表述清楚含义的时候,比如用一个叉就可以不用写「关闭」。
  • 快速定位,图标可以用它独特的形状或者颜色让人快速定位到一个功能,豌豆荚2.0左侧的导航在「音乐/应用/视频」分类加了简单的小图标之后,用户的对应用管理功能的访问量增加了约30%
  • 上下文的定位,比如小飞机的图标单独放出来不确定是什么,但是在和收件箱在一起它就可以认为是发件箱了。所以原问题里面单拿出来一个图标不知道是什么含义,我并不认为是错的。
图标不能解决的问题:
  • 不明确的图标还不如文字,这一点从 Panic 关于清除列表的「Clear」图标的设计一文就能看到。panic.com/blog/2010/02/ 他们设计了种种图标,实际上最后还是用了文字。
  • 图标不能太「统一」,不知道是从什么时候开始,很多国内的公司为了视觉的一致性,用了全是圆形,或者全是细线的图标,比如QQ手机版,这其实对于可用性是有损害的,因为无法快速从形状或者色彩定位到功能,就失去了图标的意义。


如果从这样的考虑,原问题提到的对知乎右侧图标的批评,我认为主要有以下的问题:
  • 风格太一致了,失去了快速定位的用处
  • 上下文定位的含义不明显。

如果是我小改动一下的话:
BeforeAfter: ( 改动的图标来自 Glyphish: glyphish.com )肯定还有更好的解决方案,我做出改动的主要考虑是:
  1. 每个图标的形状区分度更明显(方,星,圆 vs 方x4 ),
  2. 收藏和关注有了更明显的区分(收藏表示质量好,关注表示先看看)
但是修改的话还需要考虑其它地方的统一,比如添加关注和添加收藏时,用这样的图标是否还能够保证上下文和识别度,还是要继续考虑的了。
首先我很同意题主的观点,很多地方对图标的使用已经走火入魔了。

但是图标依然重要

因为图标的功能不仅仅只是「在没有文字表达的时候依然让用户一眼看清含义」,除此之外还有以下一些功能:

1. 增加识别和认知的冗余度,比如图标的颜色、形状可以明显区分不同项,我教我老爸电脑的时候可以明确地告诉他点那个红色的大叉,而不是说点那个「以后不再显示」的文字。其他时候图标也能以另一个纬度加快我们对界面元素的学习过程和识别速度

2. 突出重点、增加界面的韵律,听起来很玄,但是在一些复杂界面里用图标破开一堆对齐的视觉参考线有时候是很有效的。

3. 强化品牌形象,比如腾讯的很多网页,哪怕 Banner 上也会放不少图标,虽然你会觉得俗,但是看一眼他们家标志性的糖果色高质感图标你就知道你上的是腾讯而不是谷歌

4. 好看,不解释。。。。

5. 养活一帮 GUI 设计师,继续不解释。。。


其实图标滥用的地方很多,但是题主的这个例子举得不好,因为图标在这里完全起到效果了:那个「邀请我回答的问题」图标你哪怕给我 20 秒我也没法直接看出含义,但他们的作用远不在于此,上面 4 个图标做了轻量化的处理,与下方三个图标有着明显的区别。如果去掉了图标哪怕还是保留细线那上下依然区分不开,视觉上会有些混乱不知道这两块到底是不是一起,或者到底为啥不在一起:再放到完整的界面来看:

直接粗暴地去掉图标之后右侧会很空,而侧栏目前的消息承载量又比较大,直接减小侧栏宽度不太可能。那为了弥补这边的空隙、增加右上方那些列表和其他文字的区别,需要付出的额外代价相信会远远超过增加那几个小图标的。

当然,没有参与过知乎界面的设计,以上纯属无责任个人推测~
为什么?