美文网首页
【译】“坏”图标:如何识别和改善它们

【译】“坏”图标:如何识别和改善它们

作者: 米渣 | 来源:发表于2018-04-06 04:32 被阅读0次

    摘要:相关链接通常被分成一组,每组都有一个图标,一个差的图标会影响用户的体验,一组不好的图标则更糟糕,因为它不仅让界面看起来更混乱,还浪费了屏幕的空间。

    什么让图标变得劣质?

        图标功能和它视觉上已确定的含义不同。例如:星形图标用于评分和书签,而不是查看“演示文稿模板”;IE的图标表示“启动Internet Explorer“,而不是打开王者荣耀。

        图标的形象过于复杂,它的含义需要靠猜。大多数用户都不想像做难题一样去理解一个图标的含义。

        模糊。这个显而易见了...

        列表中每一个项目都重复使用这个图标。当列表中只有名字而没有其他内容时,为什么要在每一个用户旁边添加silhouette icon?为什么要在链接列表中给每一个链接都加一个图标?为什么要在文档列表中给每一个文档都加一个纸张图标?

        这些图标只能以组使用。用户不需要研究这组所有的图标来确定其中某一个图标的含义。


    内网图标例子:没有标签或者说明,你能说出每个图标的用途吗?

    为什么内网上有很多”坏“的图标?

        内网在集群中整合类似的命令和链接。集群相关项目有助于员工更快地浏览和消化页面中的内容。这一良好的设计原则,加上良好的意图和一连串的破坏性事件导致不良图标设计。一个常见的场景是:一组相关的链接放在一个列表中,或者作为一组按钮。集合中的一个或两个单词(如日历或注释)可以创建一个明显的添加图标的机会。该组中剩下的单词不能提供一个简单的图标提示,但是设计师现在非常热衷于使用图标,所以他们会变着花样使每一个文本链接都伴随着糟糕的视觉元素甚至直接被其替换。另一种情况是,一个页面的文本量很大,最简单的解决方案是将文本与图片、插图和图标分开。

    “坏”图标的成本

    如果计划给每一个图标都加上标签或者说明,那图标不好的地方在哪?毕竟这个标签或者说明会解释它的用处,对吧?

    错了,图标不是免费的,并不是网站上每一个链接都值得放一个图标。以下举例就是使用图标的成本:

        设计和研究:图标不是凭空出现的,它和添加文本链接不同,设计师们需要创建、修改、绘制、可用性测试、还有迭代。

        开发与支持:一旦创建,需要做的工作比实现文本链接更多。

        屏幕的空间:图标占用屏幕上的空间比单独的文本链接更多,使用过多的空间意味着另一个UI组件会被折叠到另一个界面里去,或者必须完全省略。

        信息处理:图标可能会影响界面的整体度,虽然优秀的图标会给界面加分,但差的图标会让界面混乱,让用户难以理解。

    图标的好处应该大于它的成本。

    Intranet的Icon示例(文字说明)

    优秀图标的好处

        快速识别:一个熟悉的或者令人难忘的图标可以快速传达它的意思,有些时候比文本链接更有意义。

        可见度:当人们清楚给定的图标相关与什么活动关联时,图标的存在就可以为一些用户提供一个快速定位命令的机会,从而使重复任务变得更加高效。不过,我们仍然建议在所有图标上添加文本标签,主要是为了确保所有命令都易于理解,即使不是每个用户都能识别这些图像。如果文本标签始终存在,图标会提供任何额外的好处吗?在决定是否在文本标签中加入图标之前先思考一下这个问题。

        容易点击:包含文字的图标比只有文字或者只是图标的目标要大,这些较大的目标更容易点击。

        品牌和风格强化:强化你的整体风格没有图标的链接和按钮也可以这样做,包括颜色,样式,形状,字体和颜色。)

    请记住,优秀的图标应该能快速识别,定位,并且令人难忘。

    优秀图标的机会

    你认为你有些地方可以添加一些有用的图标吗?那在继续之前,请确保以下几点:

        你想用图标来增强的概念或命令可以自然地用图标来表示。别忘了有些概念很复杂,很难用图标来表示。

        候补的图标需要简单易懂,避免过多细节。人们不需要将身子前倾或眯着眼睛来看清图标在到底表达什么。

        参考需要明显且一眼就能看懂,不需要解码,学习,或思考才能理解。一个网址的图标和博物馆里的画不一样-使用者不需要长时间盯着看。目标锁定的一瞬间就应该已经足够了解其涵义。(内网中,员工每因糟糕的设计多浪费一秒钟的时间,你就多支付一秒钟的薪水给他们,并且这一秒钟他们什么工作都没有做。)

    总结:图标可以帮助用户识别和回忆命令。但是,一组具有不一致质量图标的链接会混淆员工,浪费他们的时间。最好要么大家认真、研究并设计一组可用的图标;要么只使用清晰的文本链接而不使用图标。

    原文作者: KARA PERNICE 

    原文地址:https://www.nngroup.com/articles/bad-icons/

    相关文章

      网友评论

          本文标题:【译】“坏”图标:如何识别和改善它们

          本文链接:https://www.haomeiwen.com/subject/zxxhhftx.html