实心图标与空心图标的区别

有读者说，面试的时候面试官提到了一个问题，但不知道怎么回答。这个问题是：实心图标和空心图标的区别是什么？这个问题网上的讨论挺多的，国内外很多设计师都有针对这个问题给出一些自己的看法。

本篇文章的结论：

人的大脑在识别空心图标时，会比实心图标更显吃力；
实心图标的引导性要强于空心图标；
空心图标的装饰性会更强；
实心图标承载的信息相对更重，参考选中状态。

01.

最早是 2013 年，设计师 Aubrey Johnson 在 Medium 上吐槽了一段关于 iOS 7 标签栏图标的问题。说是 iOS 大范围使用线性/空心图标来让用户辨别产品功能，会让用户在认知理解上更为费力。

他给出了这样一张图，来说明人脑对于图形的认知负荷主要来自于图形的线性结构。我查了一下这位设计师的背景，看到他除了是设计师，同时还是一名开发者，而且有认知心理学的学习经历。所以能承认这个论点是有一定道理的。

于是另一位设计师 Curt Arledge, 在 2014 年，专门为这个「假说」做了一次实验。实验的内容是将一组相同图标，分为实心和空心，给用户做测试。结论是相同一组图标，用户平均识别实心图标的速度比识别空心图标的速度要快上 0.1 秒，但是其中有个别空心图标的识别速度比实心图标更快一些。

我仔细翻阅了这个实验的所有资料和参考文献，并对这名设计师提出的很多参考做了阅读，过程中，我发现这个实验有一个细节问题。在给用户做这组图标测试之前，他会给这些用户先熟悉一下这些图标，以及图标所代表的意思，然后随机呈现让他们做判断。

这里的问题是，如果这样来分析，它的实验条件就不仅仅是具备识别要求，还要具备记忆要求。

有些图标比较具象，传递的意思很清晰，不需要记忆，一看就知道，哦，这是「钥匙」；而有些图标就没那么容易理解，在看到的那一瞬间是判定不出来是什么的，所以要想一下，刚才记的图标里有什么，然后才想起来，哦，它是「标签」。

所以情况可能是，用户在判断过程中，因为忘了这个图标所表达的意思，于是想了一下，那识别速度肯定就慢了，无论是实心还是空心。

所以这个实验算不上很严谨。我有看到一些设计团队跟自媒体设计师拿这个实验结论来断定说，实心图标与空心图标的识别是不存在差异的。这个说法也是不太可取的。毕竟连人家苹果公司也认同了他的说法，现在的 iOS 系统自带产品，也都把空心图标改成了实心图标了。

02.

我在梳理完这些资料后，在想，图标除了让用户知道它是什么之外，还有什么作用呢？

于是延伸出了一个新的理解，就是，实心图标比空心图标更具定位与引导的作用。

上面提到，用户对于图标的认识在于识别，不是记忆。看到它像什么，就判定是什么；而不是看到它想起来应该叫什么。所以识别图标除了知道它所表达的是什么意思之外，还要知道它在引导着什么。

比如，标签栏图标就那么 2-5 个，用户在使用 App 的过程中，不需要强行记忆或特地去识别，只是点击的时候眼睛一扫而过，来判断自己要进入哪个功能页。这时候，它是给用户做定位引导用的。

但是当你看到它，并知道它在底部第三个位置，点击之后，还看到了里面有朋友圈，就知道它代表的是什么意思了。

所以用户在这层理解上，不会真正去思考它为什么是「发现」，而是直接通过以往对于它的理解，再通过识别位置来理解它里面有哪些功能，比如里面有「朋友圈」。接着通过变化来提示用户，比如从空心图标变到实心图标。所以在一些规范里，它也只是告诉说，空心和实心图标在标签栏中的区别就是，空心是未选中状态，而实心是选中状态。因为实心图标所示的色块，更符合选中且定位于某个功能页的一种说明提示。

再用颜色把选中的图标凸显出来，让人在视觉上更聚焦，让用户知道自己目前选择的是它。

在视觉领域里有个说法是，色块比形状更容易抓人眼球。再是具有纹理的色块，比纯色块更吸引眼球。

空心图标就是形状，实心图标就是色块。

所以用户在看到图标的时候，不仅仅可以知道它所表达的意思，还能知道自己目前所处的位置。那么相比起来，色块当然会比形状更有优势。

就好像在商场里，突然尿急，看到这样的厕所指示牌，你怎么想？