赞助商
立即赞助

这个面试问题你会吗:实心图标与空心图标有何区别?

UI设计3年前 (2021)更新 流光
2.4K 0 0

@Daidai丶呆 :有读者说,试时候试官提到了个问题,不知怎么回答。

这个问题是:实心图标空心图标的区别是什么?

这个问题网上讨论多,国内很多设计师都有针这个问题出些自己看法。

最早是 2013 年,设计师 Aubrey Johnson 在 Medium 上吐槽了一于 iOS 7 标签栏图标的问题。说 iOS 大范围使线性/空心图标来户辨别产功,会户在认知解上更为。

这个面试问题你会吗:实心图标与空心图标有何区别?

他给了这样一张图,来说明人脑对于图形的认知负荷要来自于图形的线性结构。我查了一这位设计师的背景,看到他除了是设计师,同时还是一名开发者,而且有认知心的习经历。肯定这个论点是有一定道的。

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

我仔细翻阅了这实验的所资料参考文献,并对这设师提出的很多参考了阅读。过程中,我发这实验一细节问题。

就是,在给用户做组图标测试之前,他给用户先熟悉一下图标,以及图标所代表的意思,随机呈现让他们做判断。

这个面试问题你会吗:实心图标与空心图标有何区别?

里的问题是,果样来分析,它的验条件就不仅仅是具备识别要求,还要具备忆要求。

有些图标比较具象,传递意思很晰,不需要记忆,看知。哦,这是「钥匙」。而有些图标没那么容易理解,在看到那瞬是判定不出来是什么,所以要想下,刚才记图标里有什么,然后才想起来,哦,它是「标签」。

情况可是,户在判断过程中,因为忘了这个图标表达的意思,于是想了一,那识别速肯定就慢了,无论是实心还是空心。

所以这个实验算不上严谨。有一些计队跟媒体计拿这个实验结论来断定说,实心图标空心图标的识别是不存在差异的。这个说法也是不可取的。

这问题,可以 Aubrey Johnson 通过设原则以及认知理得出的图形识别理论,站得住脚的。也就,空图标,用户的认知理解需调动多神元行识别。简单,就识别起比实图标费力。

毕竟连人家苹果司也认同他的说法,现在的 iOS 系统自带产品,也把空心图标改成心图标。

这个面试问题你会吗:实心图标与空心图标有何区别?

在梳理完资料,我想,图标除让用户道它是什么之外,还有什么用呢?

于是延伸出了个新理解,实心图标比空心图标更具定位与引导作用。

上面到,户对于图标的认识在于识别,是记忆。看到它像么,就判定是么,而是看到它想起来应该叫么。

所以识别图标除了知道它所表达的是什思之外,还要知道它在引导着什。

比如,标签栏图标就那么 2-5 ,用户使用 App 的过程中,不需强行记忆或特去识别,只点击的时候眼睛一扫过,判断自己入哪功能页。这时候,它给用户引导用的。

我相信现在在看文章的你,一下子也想不来微信底部四个图标的样子吧?或者对微信的「现」页,也不能理为什么要用样一个图标来表示吧?

是你看到它,并知它在底部第三个位,击后,看到了里有朋友圈,知它代表是什么意思了。

这个面试问题你会吗:实心图标与空心图标有何区别?

所以用户在这层理解上,不会真正去思考它为什么是「发现」,而是接过以往于它理解,再过识位来理解它里有哪些功能,比如里有「朋友圈」。

接着通过变来示户,如从空心图标变到实心图标。在一些规范里,它只是告诉你,空心和实心图标在标签栏中的区别就是,空心是未中状态,而实心是中状态。因为实心图标示的色,更符合中且定位于某个功页的一种说明示。

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

视觉领域里法,色块比形状易抓人眼球。再就具纹理的色块,比纯色块吸引眼球。

空心图标就是形状,心图标就是块。

这个面试问题你会吗:实心图标与空心图标有何区别?

所以用户在看到图标的时,不仅仅以道它所表达的意思,还能道自己目前所处的位置。么相比来,块当比形状更有优势。

好像在商场里,突然想去洗手,看到这样厕所指示,你怎么想?

这个面试问题你会吗:实心图标与空心图标有何区别?

我相信不管是男生是女生,第反应都是往右走吧?

第二个结论是,实心图标空心图标更有引导性。

或许有人会问,那空心图标就没用了?不是的。

其实面提到,空图标相比实图标难识别,那么人就需调动多神对空图标行确认。所以它能丰富页面的视觉效果,也就装饰感。

举个例子:

这个面试问题你会吗:实心图标与空心图标有何区别?

上面两组图,一组整看来比抓眼,因为图标比重;但是二组看来清晰得,因为用户的视聚焦在内容上。

在这个例子,图标作为装饰类信息,不应该抢了内容风头,它在这里是增加了排版基调与内容分层作用。而设计师应该在这里引导用户去看内容本身,而不是去看图标。

是给容做,而是给自己做,如果是给自己做,那就没必要线条来表现了。

当然也有用实心图标来填充列表息的,这也跟页面风格有关,比如你的产品风格全是扁块状内容的,突然有了一部空心图标,也会显得不搭。

我只这里用这例子明,空图标的引导性实图标强,所以多会被用当装饰品。

而当空心图标与心图标同时出现,并表达同一类信息时,它们就是一种信息的两种状态,比选中与未选中。

所以我们现在能看到很多品依然在标签栏保留着空心图标。

这个面试问题你会吗:实心图标与空心图标有何区别?

除了风格素影响,它能体现出被选状态功能图标,并让其它图标起到装饰性作用。

从后面延伸的两个点来说,图标的作还是很明显的。我这里只探讨了两类图标的分区别,并着重讲解了实心图标的作。它们之间还是有很多它容可深究的。

想说的是,即使用户对熟悉的图标,无论是实心还是空心,在实验环下的识别速度上无差异,但是类图标对息所承载的思确实是不同的。

于,本篇文章的结论:

  • 人的大脑在识别空心图标,会比实心图标更显吃力;
  • 实图标的引导性强于空图标;
  • 空心图标的装饰更强;
  • 实心图标承载信息相更,参考选状态。

参考资料:

  • Aubrey Johnson 论点:
    https://medium.com/@aub/hollow-icons-a93647e5a44b
  • Curt Arledge 实验:
    https://www.viget.com/articles/are-hollow-icons-really-harder-to-recognize-a-research-study/

欢迎关注作者的公众号:「呆呆U理」

这个面试问题你会吗:实心图标与空心图标有何区别?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:本文高达一万字,从图标的起源、定义到基础的设计方法总结无一不包,还有大量的案例帮你理解布尔运算,是新人设计师...
图标设计
本文我们开始讲解最后一种类型的图标 ── 启动图标。在第一章我们已经对启动图标有了基础的认识,所以下图再简单回顾一遍。 ...
入门
编者按:本文高达一万字,从图标的起源、定义到基础的设计方法总结无一不包,还有大量的案例帮你理解布尔运算,是新人设计师...
图标设计
知名的免费图标网站 Iconfinder 要和大家一起对抗新冠病毒,和图标设计师联手推出一系列「防疫免费图标集」(Coronavirus awa...
免费图标
对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响...
App图标
找图标这个事情,对于设计师而言,其实都不是太大的问题了。不仅有大把的网站提供免费的图标下载,而且设计师自己改和设计都...
ICON
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪。今天分享的是几个常见小问题,看看大家有没有遇到过。 1. 为什么你做的投...
ui设计
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了! 亲密性 排版有四大原则,其中有...
ui设计