在 UI 设计中,应将空心图标和实心图标应用于哪种情况?一些人认为,空心图标在视觉上比实心图标复杂,而实心图标实际上更易于识别。
image.png
设计师对此主题的看法各不相同。一些设计师牛逼 hink,空心图标由线制成,其结果是,他们是认识更加困难。但是,它们给用户带来轻松和精致的感觉。其他人认为,可识别性与该主题无关,而是取决于图标的形状,颜色和其他因素。

1.图标功能。

首先,本主题着重于一种特定类型的图标:功能性图标。让我们看一下这种图标的基本功能。

功能性图标在生活中很常见,通常在机场,车站,酒店,购物中心和其他大型公共场所中看到,为人们提供指导,如下所示:

空心图标与实心图标:哪个更易于识别? | 作者:Trista liu | 中等的 - 图2

In UI design, icons are one of the most common elements. The use of the icon originated in the Macintosh 1.0, even in the earlier Xerox graphical interface began. They are often given functions like action, description and so on.

空心图标与实心图标:哪个更易于识别? | 作者:Trista liu | 中等的 - 图3

Since the release of the smart phone system so far, the style of graphical interface has completed the transformation from the material design to the flat design evolution. With the introduction of ios7, almost all of the icons in Apps are becoming more and more flat and slim. The reason of it is that the over-eye-catching icons usually reduce the readability of the contents.

In general, the most basic function of the icons is to convey the information quickly.

在当今的设计工作中,图标和文本的匹配已达到令人痴迷的程度。实际上,用文本表达一些抽象概念就足够了。实际上,将图标放在一边并不能帮助用户在图标与其功能之间建立连接。

空心图标与实心图标:哪个更易于识别? | 作者:Trista liu | 中等的 - 图4

尽管如此,图标仍然相对重要。图标的功能远不止“告诉用户第一个标志的含义”。此外,还有许多重要功能,例如即时定位,内容层区分和界面节奏增加。

以Mockplus上的原型为例,如果您只看到没有文字的图标,它们的含义就很模糊了。但是,图标的功能远不止这些。原型中的图标是稳定的。图标和文本共同形成一个整体,其中图标起着对齐的作用。如果删除图标,则列表中的信息将无法区分,并且视觉上会造成混淆。当专注于一条线上的选项时,用户将面临更多的困难。

2.是否更容易识别实心图标?

鉴于您被大自然的召唤所吸引,便冲进大商场寻找休息室。实心图标还是空心图标?哪个可以更快地被识别?

空心图标与实心图标:哪个更易于识别? | 作者:Trista liu | 中等的 - 图5

从视觉吸引力的角度来看,实心图标确实更容易辨认。下图显示了对人眼有吸引力的元素的影响(从左到右排序):

空心图标与实心图标:哪个更易于识别? | 作者:Trista liu | 中等的 - 图6

空心图标的形状吸引眼球,而实心的图标则通过颜色吸引眼球。结果,更难以识别空心图标。

早在引入iOS7系统时,就已有关于此主题的一些讨论。毕业于Viget的经验丰富的设计师Curt Arledge专门编写了一个APP,并针对实心和空心图标进行了1260次识别测试[1],看一下测试结果:

空心图标与实心图标:哪个更易于识别? | 作者:Trista liu | 中等的 - 图7

结果发现,识别这两种图标的速度之差仅为0.1秒。

空心图标与实心图标:哪个更易于识别? | 作者:Trista liu | 中等的 - 图8

在第一组中,实心图标获胜。这些图标源于生活,这些图标保留了其原始含义。识别速度取决于颜色和形状吸引眼球的程度。因此,实心图标更易于识别。

空心图标与实心图标:哪个更易于识别? | 作者:Trista liu | 中等的 - 图9

值得注意的是,在第二组中三个空心图标更容易识别。

这三个图标是从现实生活中的主题中抽象出来的,其中根本没有气泡。设计师在图形界面中创建此图标并赋予其含义;垃圾桶和钥匙的形式在生活中是多种多样的,因此它们的图标是它们的抽象摘要。在这种情况下,图标的形状允许用户快速识别图标的含义,而颜色已成为干扰因素。

因此,对于表达与原始主题相同含义的图标,更容易识别。对于具有抽象含义的图标,空心图标会更好。
https://medium.com/@tristaljing/hollow-icon-vs-solid-icon-which-is-more-friendly-for-recognizing-3cf032849263