图标的可用性和设计最佳实践 _原型设计

本文概述

图标必须提供清晰度
熟练的图标设计提高了产品可用性
隐秘的图标设计使产品痛苦使用
世界一流图标设计的10条指导原则
总结

想象一下自己开车去上班-最喜欢的播客播放, 手里拿着杯子, 只有前进的道路。小心谨慎的驾驶员, 你低头窥视, 发现仪表板上有不熟悉的灯发光。

文章图片
轮胎压力管理系统(TPMS)的图标是a肿的横截面, 几乎不像轮胎。
有点像电灯插座和冒泡的女巫大锅的混合, 小灯似乎很重要, 但是你不确定这是什么意思。瞥一眼仪表, 没有发现任何异常, 并且车辆似乎运转良好, 因此你决定在下班后进行处理。
那天傍晚, 工作日结束了, 在地平线上吃了晚饭, 你驶近办公室停车场中的车辆, 而且-“ 你一定要和我开玩笑！”
前驾驶员侧轮胎像一块煎饼一样扁平。只要你知道早先的小图标是车辆轮胎压力管理系统发出的警告, 便可以解决问题并避免不必要的痛苦。
图标必须提供清晰度物理和数字产品的世界充满了图标, 这是有原因的：图像传达的含义是单词无法比拟的。实际上, 麻省理工学院的神经科学家发现人脑可??以在短短的13毫秒内处理图像。
不幸的是, 有时我们遇到的图标制作不当, 使我们感到困惑和沮丧。但是, 如果精心设计, 图标会通过减少歧义和传达功能来提高可用性。
图标可用性和设计的最终目的是增强用户体验, 而不是造成混淆。但是, 这看起来像什么？用户界面设计人员如何确保他们制作的图标易于理解？
熟练的图标设计提高了产品可用性图标是抽象的。它们将对象, 构想和命令简化为可以由人眼快速识别的图形符号。那么, 是什么使图标有用, 又应该如何使用户感到呢？
图标易于查看和使用。
感觉如何：” 那很容易。我看着屏幕, 很快找到了我需要的图标。我单击它, 它按预期运行。”
图标增加了产品体验的凝聚力。
感觉如何：” 这些符号显然意味着某些东西, 它们可以帮助我浏览和操作该产品。”

文章图片
凭借其权威的帽子, 制服和姿势, 非母语人士可以立即识别” 安全” 的中文图标。 (中国公共信息符号)
图标是跨文化背景线索。
感觉如何：” 我不懂语言, 但我确实知道该符号的含义。”
图标增强并扩展了品牌的视觉叙事能力。
感觉如何：” 这个品牌是个人的, 但专业。他们关心即使在最小的细节上也要有所帮助。”
隐秘的图标设计使产品痛苦使用如果在产品开发过程中很少考虑图标设计或匆忙组装图标集, 就会出现复杂情况, 并导致不良的产品体验, 用户不满意和品牌受损。
什么是神秘的图标, 它们如何使用户感到？
隐性图标与它们的实际功能关联不佳。
感觉如何：” 等等, 我认为该图标会做一些不同的事情。刚刚发生了什么？”

文章图片
这些Snapchat图标可让用户知道何时拍摄了快照和聊天的屏幕截图。不幸的是, 该图形不能很好地表示屏幕截图, 并且三种颜色变化会造成混淆。
一个隐秘的图标集提供了多个看起来过于紧密相关的选项。
感觉如何：” 这些图标中的哪一个是我想要的？”
隐性图标在文化上令人困惑。
感觉如何：” 哇！我永远不会点击如此丑闻。”
隐秘的图标使用户无法预期的体验。
感觉如何：” 我以为这个应用程序可以帮助我预算我的钱, 但是这些图标看起来很傻。这个产品适合我吗？”
世界一流图标设计的10条指导原则现在, 我们了解了图标的可用性以及图标如何改善或阻碍产品的可用性, 让我们研究一下图标设计师可以用于几乎任何图标设计项目的一组指导原则。
努力理解与图标相关的功能。如果你不理解, 请不要猜测。问。
避免一次设计一个图标。而是将进场图标集作为一个整体。问问自己：” 集合是否具有凝聚力？是否有双重含义的图标或令人困惑的联想？集合是否很好地代表了品牌？”
绕过计算机, 并以简单的草图开始早期的图标构思。

文章图片
手绘的缩略图是探索多个图标设计概念并快速捕捉想法的有效方法。
不要重新发明轮子。旨在获得普遍理解的符号, 不要害怕利用在Font Awesome等网站上广泛使用和可用的现有图标集。
使用股票图标集时, 可以随意自定义品牌对齐方式或添加字符, 但不要牺牲清晰度。
在适当的地方使用文本标签以提高图标的可用性。文本本身是很难单击或点击的目标, 但是与图标结合使用时, 它可以帮助用户消除疑问并避免符号误解。
不要牺牲易用性来设计糖果。
考虑一下图标如何适应界面的设计层次结构, 不要忘记不同的屏幕尺寸可能会因缩放而影响图标的可见性。

文章图片
请注意, 与桌面版本相比, 移动界面中” 搜索” 图标的视觉突出之处。版本之间的实际大小变化很小, 但是移动界面的空间较小, 因此图标突出。
记住5秒规则。创建图标概念时, 请尝试在5秒钟内想到符号关联。否则, 单词, 动作和符号之间的联系可能会很弱。
测试与真实人物的图标。它们可以识别吗？他们难忘吗？如果没有, 继续工作。
总结我们生活在一个充满视觉信息的世界中。我们经常会在短时间内做出多种选择。 “ 我们要去哪里？我们如何到达那里？到达后我们将做什么？” 图标可帮助我们消除混乱, 并迅速确定重要事项。他们使我们能够愉快地使用我们使用的每种产品, 并且当它们运行良好时, 就会提高品牌满意度。

文章图片
Google文档用户界面平衡了易于理解的图标和文本标签的组合, 从而增强了可用性并改善了产品的整体体验。
可悲的是, 图标过于缺乏其潜力。设计不良的图标会阻碍产品可用性, 使用户烦恼并损害品牌忠诚度。对于产品设计师和设计团队来说, 这是一个重大的机会。
当图标增强用户体验而不是使用户感到困惑时, 它们就可以实现任何设计工作的主要目标。他们提高了生活质量。记住, 图标是抽象的, 不是事后的想法。它们旨在快速无缝地关联复杂性, 而无需用户暂停。对于设计师来说, 这可不是一件容易的事, 但是通过精心的计划, 有条不紊的过程以及以人为本的用户测试, 这是可能的。
???
【图标的可用性和设计最佳实践】在srcmini设计博客上进一步阅读：