6个提高图标识别性和可用性的技巧

6个提⾼图标识别性和可⽤性的技巧

新⼈学习图标设计，好看固然要紧，但更关键的是图标的识别性和可⽤性，今天这篇好⽂总结了6个提⾼图标识别性和可⽤性

的技巧，来收。

在早期的计算机图形学领域内，图标只能在有限的范围内被使⽤。从⼈机交互的⾓度来说，使⽤图标⽐使⽤⽂本更具有优势，

原因如下：

简单、醒⽬、⽽且友好，可以取代⼀段冗长枯燥的描述;

随着屏幕尺⼨变的越来越⼩，使⽤图标可以节省空间，这点是很受欢迎的;

使⽤图标看起来很舒服，并能增加设计的艺术感染⼒;

最后(但同样重要的是)，在⼤多数应⽤中使⽤图标，是⼀种为⽤户熟知的设计模式。

尽管图标有这些潜在的优点，但如果设计时不考虑其潜在的负⾯影响，也会常常导致可⽤性问题这篇⽂章致⼒于总结UI中与图

标相关的⼀系列主要问题，并提出⼀套对这些问题的解决⽅法。您可以在图标设计中使⽤这些技巧作为起步，来更好地完成⼯

作。

1. 图标应传达含义

设计师们有时会过于注重形式，忽略了本⾝的功能，导致图标难以识别，这打破了它最重要的图形意象属性-图标的传达含义

功能必须放在⾸位。按照定义，图标是⼀个对象或动作的视觉体现。如果对于⽤户⽽⾔，这个对象或⾏动不明确，该图标就⽴

刻失去它的实⽤价值，并成为⼀个视觉⼲扰。

以下是⼀些在⽤户⼼中享有普遍共识的图标。(⾸页、打印机、⽤于搜索的放⼤镜都是属于这种类型)。

△ 容易辨识的图标

但除了这些例⼦，对⽤户⽽⾔⼤部分图标的意思仍旧模棱两可，以为它们还具有不同的含义。例如游戏中⼼图标，是⼀组⾊彩

鲜艳玻璃感的圆圈。这代表了什么含义?它与游戏有什么关系?

△ 游戏中⼼图标⽆法传达游戏的概念

看看另⼀个例⼦︰ 当⾕歌决定简化 Gmail ⽤户界⾯，把所有功能隐藏在⼀个抽象的图标之下，他们得到的是⼀⼤堆⽤户的帮

助请求，⽐如“我的⾕歌⽇历在哪⾥?”

△ 桌⾯端的GMAIL界⾯

⽆论你能理解多少这个图标的含义和代表的功能，对初次看到这个图标的⽤户来说体验仍旧可能完全不同。假定⽤户都熟悉这

些抽象的图形是⼀个普遍的错误。

图标的⾸要任务是引导⽤户去他们需要去的地⽅，所以请确保他们能够实现这个⽬标︰

使⽤ 5 秒钟规则︰ 如果花了你超过5 秒考虑⼀个合适的图标。这个图标不太可能有效地传达含义。

选择熟悉的图标：⽤户对图标的理解往往基于以前的经验。让⾃⼰熟悉竞品所使⽤的图标和常⽤的⽬标平台上的图标(现有系

统图标)，那些是⽤户最容易辨认的。

2. 保持图标的简单和⽰意

在⼤多数情况中，设计图标⽆需发挥创意。别误会，并不是说创新图标是不好的，但基本功能太花哨的图标可能会对⽤户体验

产⽣负⾯影响。如果你想展⽰你的设计技能，你可以依靠其他设计元素传达你的产品信息，同时保持系统图标的设计简单、现

代、友好。

图标设计理念的本质是减到最简形态-简化图标是出于降低学习曲线的需要。设计应确保即使图标在⼩尺⼨更具有可读性和清

晰度，所以精⼼设计的图标应该能够快速辨认，⼀⽬了然。

3. 包含清晰可见的⽂本标签

良好的⽤户体验可以定义在很多⽅⾯，但衡量标准之⼀是减少了多少⽤户思考的成本。清晰是⼀个 好界⾯的最重要特征。图

标的设计应该帮助⽤户毫不费⼒知晓他们要做什么。但是，图标的问题在于⽤户会基于之前的经验对每个图标联想出不同的含

义。假定⽤户(特别是⼿机⽤户)会为了探索每个图标的功能⽽⼀⼀试⽤是另⼀个常见的误解。

△ 苹果邮箱的标准化屏幕。你能准确的定义每个图标表达的含义吗?

事实上，⽤户⾯对不熟悉的界⾯常常有不安全感，⽽且并不会到他们的舒适区域之外探索。在⼀些特殊的上下⽂环境⾥，为避

免⼏乎所有图标都可能会产⽣的歧义，应该在图标周围设计⼀个⽂本标签⽤于清晰表达其含义。为⽤户在点击前设定清楚的预

期。

△ 同样的设计中加⼊了⽂本标签的图标，⽂本标签解释了图标的含义，并提⾼了可⽤性

UrTesting(⼀家为开发者提供测试⽤户的创业公司)进⾏了⼀系列关于是否是要标签的测试，结果发现：

对于带有标签的图标，88%的情况下，⽤户轻点图标时可以准确地预测接下来会发⽣什么。

对于没有标签的图标，这个数字下降到60%。对于那些特殊的图标，这个数字只有34%。

这⾥有三个重要的情境需要考虑：

对于更多复杂且抽象的功能来说，图形化的表达具有局限性。所以他们应该使⽤合适的⽂本标签来展⽰。

⽂本标签应该始终保持可见，不应让⽤户进⾏任何交互才能看见。有的设计师发现⽂本标签破坏了他们使⽤图标想达到的效果

并且使界⾯变的散乱，往往会在图标旁添加教程、引导遮罩、弹出提⽰框。但是⽤户会跳过这些教程并很快忘记他们刚刚学习

到的。同样不要想着依赖⿏标悬浮现实⽂本标签：不仅是因为这样需要额外操作，在触屏上也不太适⽤。

△ SWARM 应⽤为了教育⽤户使⽤了弹出框提⽰

⽂本标签和图形结合在⼀起⽐单独使⽤其中之⼀效果更好。但是，如果仅能使⽤其⼀⽂本⽐单使⽤图形要好。在表达清晰度这

⼀点上，⽂本标签总是更胜⼀筹。

4. 使图标的触控体验更佳（⼿机应⽤）

⼈们使⽤⼿指与基于触控的界⾯进⾏交互。较⼩的⽬标和错误的⾏为会使⽤户沮丧，所以UI控件要⾜够⼤才能承载⼿指尖的动

作。下图显⽰成⼈⼿指的平均宽度⼤约在11mm，婴⼉的是8mm，⽽⼀些篮球运动员竟会具有超过19mm的宽度!

△ ⼈们常常谴责⾃⼰具有“胖⼿指”。但是即使是婴⼉的⼿指也会⽐多数点击⽬标要宽。

触屏对象的推荐点击⽬标尺⼨⼤约是7-10mm。以下是苹果和⾕歌平台的规范(iOS⼈机界⾯规范和material 设计)：

苹果推荐的最⼩点击⽬标尺⼨为44×44像素。由于物理像素的尺⼨会随着屏幕分辨率发⽣变化，在3.5⼨的屏幕上，苹果推荐

的尺⼨是320*480。

⾕歌则推荐触控⽬标的尺⼨⾄少为48x48dp。多数情况下，这些触控⽬标应使⽤⾄少8dp的空间分隔来确保信息密度的平衡性

与可⽤性。⽆论屏幕尺⼨有多⼤，⼀个48x48dp的触控⽬标需要9mm的物理尺⼨。触控⽬标包括响应⽤户输⼊的区域。触控

⽬标的⾯积往往超过⼀个元素的可视区域：⽐如⼀个图标形状是24x24dp，但是加上周围的间距，共同组成了48x48dp的触控

⾯积。

△ 图标尺⼨：24DP 触控⾯积：48DP

需要考虑的重要情境：

触控⽬标之间的有效间距。设置触控⽬标间的最⼩距离是为了防⽌⽤户引起错误的操作。这在两个相邻操作互斥时尤为重要：

⽐如“保存”和“取消”图标并列存在时使⽤⾄少2mm的间距。

5. 不要跨平台使⽤图标

当你在设计Android/iOS应⽤时，不要使⽤其他平台特定的UI元素。各平台为某些常⽤功能使⽤⼀套典型的图标，⽐如分享、

新建和删除。当你转换应⽤到另⼀个平台时，你应替换掉相对应的图标。

Android(上)和iOS(下)的常⽤功能的图标

6. 测试你的图标

图标的使⽤应极尽⼩⼼：始终进⾏可⽤性测试。⼀旦你已经熟悉⼀个界⾯，很难再使⽤全新的眼光审视它并使⽤直观的感觉分

辨它。所以，观察⼀个新⽤户如何与UI交互很重要，因为他可以帮助你判断图标是否⾜够清晰。

测试图标的可识别性。询问⽤户期望图标可以代表哪些功能。避免设计⼀些⽤户看到后不知道他们该做什么的图标，因为没⼈

会想玩捉迷藏。

测试图标的可记忆性。难以记忆的图标常常使⽤低效。告诉⼀组⽤户图标代表的含义，⼏个星期后再询问他们是否还记得。

⼩结

图标图形学是UI设计的核⼼：对于界⾯的可⽤性来说，它是⼀把双刃剑。如同⽤户体验设计的⽅⽅⾯⾯，界⾯中使⽤的所有图

标都应有⽬的性。当你设计对路的时候，图标能帮助你简单⽽直观的引导⽤户。