提高可用性！6个新人进阶该学的图标设计小技巧

编者按：新人学习图标设计，好看固然要紧，但更关键的是图标的识别性和可用性，今天这篇好文总结了6个提高图标识别性和可用性的技巧，来收。

欢迎关注点融设计中心DDC微信公众号：「微信ID：DR_DDC」

在早期的计算机图形学领域内，图标只能在有限的范围内被使用。从人机交互的角度来说，使用图标比使用文本更具有优势，原因如下：

• 简单、醒目、而且友好，可以取代一段冗长枯燥的描述；
• 随着屏幕尺寸变的越来越小，使用图标可以节省空间，这点是很受欢迎的；
• 使用图标看起来很舒服，并能增加设计的艺术感染力；
•  最后（但同样重要的是），在大多数应用中使用图标，是一种为用户熟知的设计模式。

尽管图标有这些潜在的优点，但如果设计时不考虑其潜在的负面影响，也会常常导致可用性问题这篇文章致力于总结UI中与图标相关的一系列主要问题，并提出一套对这些问题的解决方法。您可以在图标设计中使用这些技巧作为起步，来更好地完成工作。

1. 图标应传达含义

设计师们有时会过于注重形式，忽略了本身的功能，导致图标难以识别，这打破了它最重要的图形意象属性－图标的传达含义功能必须放在首位。按照定义，图标是一个对象或动作的视觉体现。如果对于用户而言，这个对象或行动不明确，该图标就立刻失去它的实用价值，并成为一个视觉干扰。

以下是一些在用户心中享有普遍共识的图标。（首页、打印机、用于搜索的放大镜都是属于这种类型）。

△ 容易辨识的图标

但除了这些例子，对用户而言大部分图标的意思仍旧模棱两可，以为它们还具有不同的含义。例如游戏中心图标，是一组色彩鲜艳玻璃感的圆圈。这代表了什么含义？它与游戏有什么关系？

△ 游戏中心图标无法传达游戏的概念

看看另一个例子︰ 当谷歌决定简化 Gmail 用户界面，把所有功能隐藏在一个抽象的图标之下，他们得到的是一大堆用户的帮助请求，比如“我的谷歌日历在哪里？”

△ 桌面端的GMAIL界面

无论你能理解多少这个图标的含义和代表的功能，对初次看到这个图标的用户来说体验仍旧可能完全不同。假定用户都熟悉这些抽象的图形是一个普遍的错误。

图标的首要任务是引导用户去他们需要去的地方，所以请确保他们能够实现这个目标︰

• 使用 5 秒钟规则︰ 如果花了你超过5 秒考虑一个合适的图标。这个图标不太可能有效地传达含义。
• 选择熟悉的图标：用户对图标的理解往往基于以前的经验。让自己熟悉竞品所使用的图标和常用的目标平台上的图标（现有系统图标），那些是用户最容易辨认的。

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

在大多数情况中，设计图标无需发挥创意。别误会，并不是说创新图标是不好的，但基本功能太花哨的图标可能会对用户体验产生负面影响。如果你想展示你的设计技能，你可以依靠其他设计元素传达你的产品信息，同时保持系统图标的设计简单、现代、友好。

图标设计理念的本质是减到最简形态-简化图标是出于降低学习曲线的需要。设计应确保即使图标在小尺寸更具有可读性和清晰度，所以精心设计的图标应该能够快速辨认，一目了然。

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

良好的用户体验可以定义在很多方面，但衡量标准之一是减少了多少用户思考的成本。清晰是一个 好界面的最重要特征。图标的设计应该帮助用户毫不费力知晓他们要做什么。但是，图标的问题在于用户会基于之前的经验对每个图标联想出不同的含义。假定用户（特别是手机用户）会为了探索每个图标的功能而一一试用是另一个常见的误解。

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

事实上，用户面对不熟悉的界面常常有不安全感，而且并不会到他们的舒适区域之外探索。在一些特殊的上下文环境里，为避免几乎所有图标都可能会产生的歧义，应该在图标周围设计一个文本标签用于清晰表达其含义。为用户在点击前设定清楚的预期。

△ 同样的设计中加入了文本标签的图标，文本标签解释了图标的含义，并提高了可用性

UserTesting（一家为开发者提供测试用户的创业公司）进行了一系列关于是否是要标签的测试，结果发现：

• 对于带有标签的图标，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设计的核心：对于界面的可用性来说，它是一把双刃剑。如同用户体验设计的方方面面，界面中使用的所有图标都应有目的性。当你设计对路的时候，图标能帮助你简单而直观的引导用户。

欢迎关注点融设计中心DDC微信公众号：「微信ID：DR_DDC」

「图标设计进阶必读好文」

1. 图标优化指南丨《顶尖设计师分享的6个图标设计优化指南（上）》
2. 优化指南第二篇丨《顶尖设计师分享的6个图标设计优化指南（下）》
3. 图标评判方法丨《好图标怎么做？教你从四个方面来评价图标设计的质量》

原文地址：BABICH.BIZ

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com