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

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

什么让图标变得劣质?

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

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

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

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

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


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

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

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

“坏”图标的成本

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

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

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

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

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

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

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


Intranet的Icon示例(文字说明)

优秀图标的好处

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

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

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

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

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

优秀图标的机会

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

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

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

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

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

原文作者: KARA PERNICE 

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,657评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,133评论 25 707
  • 我的乡愁不是邮票,不是墓碑,不是某一个地方,而是一个人,一个爱上便再也无法忘却的人。 现在的我远在大洋彼岸,我不曾...
    花痴狂魔阅读 416评论 0 3
  • 今天我中午出去吃饭,去了一家看上去档次好的餐馆,在餐馆里我找了个位置坐下,看完菜单后说来一份红烧肉盖饭,老板答应了...
    酷酷酷酷酷酷酷酷酷阅读 132评论 0 0
  • 摊一窗的珍馐,披满了霜诗人发挥他龌龊的想象触摸是他邪恶的模样天马行空是他淫荡的倚仗.擢一节的芬芳,踏星的光诗人埋汰...
    买金矿阅读 583评论 42 32