App中使用图标的小窍门

dalemuxi_3021 2016-11-12

展开全文

自计算机图形学早期，图标就在一定范围内有所使用。与文字相比，图标在人机交互中或许更具优势，原因如下：

简单醒目而又友好，能够替代大段的（通常也是枯燥的）描述性文字。
屏幕越来越小，而它们可以为屏幕节省空间，这一点十分受欢迎。
视觉上赏心悦目，可以提升设计的审美情趣。
最后一点也很重要，大部分应用都会在设计时使用图标，这已成为增强用户熟悉感的一个模式。

1. 图标需要传达意义

UI设计师有时候隐藏了图标传达的功能性含义，这些图标的确非常漂亮可是很难识别。这破坏了图标最重要的属性–图标必须首先能传达含义。从字面意义上来看，图标是一个对象或者一个动作的可视化表现。如果这个对象动作对用户来说意义不是那么清楚，那图标直接就失去了它的实用价值并且成为视觉噪音。

很多图标都获得了用户的广泛共识 (比如主页图标，打印图标，以及代表搜索的放大镜图标)：

容易理解的图标。图标来源： icons8

但除了这些图标外，大部分图标仍然让用户感到意义模糊，因为它们可以表示不同的意义。比如游戏中心的图标是一组颜色各异的、玻璃状的圆圈。游戏中心是什么意思呢？这个图标与游戏如何联系呢？

游戏中心的图标未能传达出游戏的概念。

再举一个例子：当谷歌决定简化Gmail界面设计，把所有东西都隐藏到一个抽象的图标后，他们显然收到了一系列的支持请求，比如：“我的谷歌日历哪儿去了?”

Gmail 用户桌面界面不论一个你知道它应该代表着什么的图标的意义多大，对于一个初始使用者它都可以是一个完全不同的体验。你的用户们熟知抽象的象形图也是一个常见的错误假设。你的图标的首要任务是要引导你的用户去他们需要去的地方，所以确保他们能够到达这个目标：

运用5秒规则：如果你需要花费超过5秒钟的时间去为某件事思考合适的图标，那么很可能这个图标并不能很有效地传达你的想法。
选择熟悉的图标：用户对于一个图标的认知是基于先前的经验。让你自己去熟悉你的竞争对手所使用的，以及那些经常被使用在你接触的平台上（现有系统图标）的图标，因为那些图标会是你的用户们最能识别出来的。

2. 使图标保持简洁并具有图解性

在大部分案例中，图标不是个需要创造力的地方。不要误解 — 我不是说有创意不好，但对于基础功能来说，太过新奇的图标可能对用户体验产生负面影响。如果你想展示自己高超的设计技巧，你可以依靠其他设计元素传达产品信息，同时还保证图标简洁、现代和友好。

每个图标都应该达到最简形式，将思想精华融入其中——简化的图标是为了削减学习曲线的要求。设计精良的图标可以让你在一瞥之间领会它的含义，因为设计确保了可读性，而且即便尺寸很小也依然清晰。

3. 包括一个可见的文本标签

好的用户体验可以以多种方式进行定义，但是有一种衡量方式使减少用户思考花费的能力。清晰性是优秀接口最重要的特征。图标需要帮助用户不需要思考就能做他们想做的。然而，图标的问题是用户会根据他们以往的经验将图标与每个事件相关联。另一个常见的误解是假想用户（特别是移动端用户）为了发现每个图标的功能，把所有的图标都尝试点击一遍。

苹果的电子邮件定制界面. 你能正确的区分出每个图标是干嘛的吗? 图片来源: ia实际上，用户们经常对不熟悉的接口界面产生恐慌（我次奥这是什么这样？），他们也不愿意探索已经熟悉的事物之外的东西（不好奇就不害死猫咪）. 为了帮助他们认清每个长得都差不多的图标,大多数情况下图标下都跟随着一个文本标签用来告诉你“我”是干什么的. 用户点击图标的时候你的图标必须设计的尽量符合预期（不然就是WTF!!!）.

还有一种图标加标签文本的方法. 用标签来解释图标的用途（提高可用性）. 图片来源: ia

我们针对“使用或者不使用标签”进行了一系列的用户测试，然后我们发现发现

使用图标和标签, 88% 的用户能够正确的预测出点击图标之后将会发生什么.
只使用图标, 如果只使用图标的话，这个数字就不是88%，而是降到了 60%. 并且对于特定的app里面那些没有标签说明的图标, 只有 34% 的人能够正确的预测点击图标后会发生什么.

关于这个，可以使用以下三点考虑:

在app中使用弹出提示引导用户.

对于一些稍微复杂或者抽象的功能，只使用文字表述其功能是有一定局限的. 因此在展示这些功能时要始终记得配合一个合适的文本标签来展示.
图标标签应该在任何时候都是可见的, 而不需使用来自用户的任何交互. 一些设计师认为，使用标签损害了图标所要展示的用途，并且弄乱了他们的界面. 为了避免使用标签，他们会加入一些教程、弹出提示等功能让用户明白图标是干嘛的. 但用户可能直接跳过教程，或者看完教程马上就忘了（梗：目前为止，上帝是赢得）. 同样也不要指望用悬停功能来显示文本标签内容: 而且这样的话用户需要多操作一步，并且这样的功能在触摸屏中也无法很好的得到转换（悬停提示在触摸屏中不好实现体验也不好）.

使用标签+图片是更好的方法（肯定比单独只是用文字或图片要更好）. 当然, 如果使用文字就能表达清楚的话，不用图片的话更好，因为图标和标签的争议中，使用图标总是得胜 .

4. 保持图标具有良好的触摸目标 (移动应用)

人们使用手指在触摸式用户界面进行交互。所以UI控件必须要足够大能捕捉指尖动作，图标不能太小，不要存在太多的错误操作令用户沮丧。下图显示了成年人手指的平均宽度大约是11毫米，婴儿大约是8毫米宽，一些篮球运动员的手指甚至要19mm多宽。

人们经常抱怨他们自己的粗手指。但即便是婴儿的手指，也要比大多数触摸目标要宽。图像信息：微软

触屏推荐目标大小为7–10mm。下面是为苹果和谷歌平台推荐的指南(iOS 人机界面指南与材料设计)：间隙区域。图标:24dp

推荐苹果使用的触屏目标最小尺寸为宽44像素，高44像素。由于物理像素的大小可能随着屏幕密度变化，Apple像素规格最适用于 320 x 480像素， 3.5英寸的显示屏。
推荐谷歌使用的触屏目标尺寸如下 —至少48 x 48dp。大多数案例中，还需要余出8dp或更多的空间以确保信息密度平衡和适用。一个48 x 48dp的触屏目标，若不考虑屏幕尺寸，那么它的物理尺寸约为9mm。触摸目标包括响应用户输入的区域。触摸目标超出元素的视觉范围：图标这样的元素可能看起来是24 x 24dp，但加上其周围的填充区，整个触屏目标的尺寸为48 x 48dp。
应加以考虑的重要时刻：
触屏目标间有足够的间距。确保触屏目标的最小间距，主要是为了防止用户触摸目标时触发了错误动作。这一点在某些场景中尤为重要，比如“保存”与旁边的“取消”。在目标间余留至少2 mm的填充区非常重要。