作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
迈卡·鲍尔斯的头像

弥迦书鲍尔斯

Micah通过品牌、插图和设计帮助企业打造有意义的参与.

专业知识

分享

想象自己开车去上班,播放着最喜欢的播客, 手里拿着旅行杯, 前方只有畅通的道路. 作为一个谨慎的司机,你往下瞥了一眼,发现仪表盘上有一盏不熟悉的灯在发光.

令人困惑的图标可用性轮胎压力管理系统

有点像灯座和冒泡的女巫大锅的混合体, 那盏小灯显得很重要, 但你不确定这是什么意思. 看一眼仪表,没有什么异常, 这辆车似乎运行得很好, 所以你决定下班后再处理.

那天晚上晚些时候, 一天的工作结束了,晚餐就在眼前, 你把车停在办公室的停车场,然后——“你在开玩笑吧!”

前驾驶侧的轮胎瘪得像煎饼一样. 如果你知道之前的那个小图标是你的轮胎压力管理系统发出的警告就好了, 你本可以解决问题,避免不必要的悲伤.

图标必须提供清晰度

物理和数字产品的世界充斥着图标,这是有原因的:图像传达意义的速度是文字无法比拟的. 事实上,麻省理工学院的神经科学家已经发现,人类大脑处理图像的时间可以短至1秒 13毫秒.

不幸的是, 有时候我们遇到的图标制作得很差, 让我们感到困惑和沮丧. 精心设计, 然而, 图标通过减少歧义和沟通功能来提高可用性.

的最终目的 图标可用性和设计 是为了增强用户体验,而不是混淆用户体验. 但那是什么样子,怎样才能 用户界面设计师 确保他们制作的图标容易理解?

巧妙的图标设计提高了产品的可用性

图标是抽象的. 它们简化了对象, 的想法, 并将命令转换成图形符号,以便人眼能够快速识别. 所以,什么使图标有用,它们应该给用户什么样的感觉?

图标很容易看到和使用.

感觉如何: “这很简单。. 我看了看屏幕,很快就找到了我需要的图标. 我点了一下,它像预期的那样工作了.”

图标增加了产品体验的凝聚力.

感觉如何: “这些符号显然意味着什么,它们帮助我导航和操作这个产品.”

通用图标设计的安全性,增强图标可用性

图标是跨文化语境的线索.

感觉如何: “我不懂语言,但我知道那个符号是什么意思.”

图标增强并扩展了品牌的视觉叙事能力.

感觉如何: “这个品牌是个人的,但也很专业. 他们关心的是在最小的细节上提供帮助.”

神秘的图标设计让产品使用起来很痛苦

当图标设计没有得到足够的考虑,或者在产品开发过程中匆忙组装图标集时, 并发症出现并导致糟糕的产品体验, 生气的用户, 一个失去光泽的品牌.

什么是隐式图标?它们给用户的感觉如何?

神秘的图标与它们的实际功能联系很差.

感觉如何: “等等,我以为那个偶像会做些不同的事情. 刚才发生了什么??”

Snapchat截图图标设计意义

感觉如何: “这些图标中哪一个是我想要的?”

神秘的图标在文化上令人困惑.

感觉如何: “哇! 我绝不会点开这么丢人的东西.”

神秘的图标让用户失去了预期的体验.

感觉如何: “我以为这个应用程序可以帮我预算我的钱,但是这些图标看起来很傻. 这个产品适合我吗?”

世界级图标设计的10个指导原则

现在我们了解了图标可用性,以及图标是如何提高或阻碍产品可用性的, 让我们来看一组指导原则 图标设计者 可以用于几乎任何图标设计项目.

  1. 努力理解与图标相关的功能. 如果你不明白,不要猜测. 问.
  2. 避免一次只设计一个图标. 相反,方法图标集作为一个整体. 问问你自己,“这个场景是连贯的吗? 是否有双重含义的图标或令人困惑的联想? 这个套装能很好地代表这个品牌吗?"
  3. 绕过电脑,用简单的草图开始早期的图标构思.

    图标设计概念草图


    手绘缩略草图是探索多个图标设计概念和快速捕获想法的有效方法.
  4. 不要重新发明轮子. 以普遍理解的符号为目标, 不要害怕使用现有的图标集,这些图标集在像 字体太棒了材料.io.
  5. 当使用股票图标集, 随意定制品牌对齐或添加的字符, 但不要牺牲清晰度.
  6. 在适当的地方使用文本标签来提高图标的可用性. 文本本身是一个难以点击或点击的目标, 但是当与图标结合在一起时, 它可以帮助用户消除疑虑,避免符号误解.
  7. 不要为了美观的设计而牺牲易用性.
  8. 考虑图标如何适应界面的设计层次结构, 不要忘记,不同的屏幕尺寸可能会影响图标的可见性.

    在处理应用图标设计时, 看看手机界面和桌面界面的相对图标设计大小.


    注意,与桌面版本相比,手机界面上“搜索”图标的视觉突出. 版本之间的实际大小变化很小, 但是手机界面的空间较小,所以图标很显眼.
  9. 记住5秒规则. 在创建图标概念时,尝试在5秒内想出符号关联. 否则,单词、动作和符号之间的联系可能会很弱.
  10.  测试图标 和真实的人. 它们是可识别的吗?? 它们令人难忘吗?? 如果没有,那就继续工作.

结论

我们生活在一个充斥着视觉信息的世界. 我们经常在短时间内做出多种选择. “我们要去哪里? 我们怎么去那儿? 我们到达后做什么?“图标帮助我们从杂乱的信息中脱颖而出,快速决定什么是重要的. 他们让我们愉快地参与到我们每天使用的产品中, 当它们运转良好时, 提升品牌满意度.

内聚设计的谷歌文档图标集

可悲的是,偶像往往没有发挥出他们的潜力. 设计不良的图标阻碍 产品可用性,惹恼用户,损害品牌忠诚度. 对于产品设计师和设计团队来说,这是一个重要的机会.

当图标增强而不是混淆用户体验时, they achieve the main goal of any design endeavor; they improve quality of life. 记住,图标是抽象的,而不是事后的想法. 它们旨在快速无缝地关联复杂性,无需用户暂停. 这对设计师来说可不是一件小事, 但只要精心规划,这是可能的, 一个有条不紊的过程, 以及以人为中心的用户测试.

聘请Toptal这方面的专家.
现在雇佣
迈卡·鲍尔斯的头像
弥迦书鲍尔斯

位于 温哥华,华盛顿州,美国

成员自 2016年1月3日

作者简介

Micah通过品牌、插图和设计帮助企业打造有意义的参与.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.