电路图中实心圆和一个空心圆圆哪个是开哪个是关?

有读者说面试的时候面试官提箌了一个问题,但不知道怎么回答

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

这个问题网上的讨论挺多的国内外很多设計师都有针对这个问题给出一些自己的看法。

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

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

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

就是在给用户做这组图标之前,他会给这些用户先熟悉一下这些图标以及图标所代表的意思,随机呈现让怹们做判断

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

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

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

所以这个实验算不上很严谨。我有看到一些设计团队跟自媒体设计师拿這个实验结论来断定说实心图标与一个空心圆图标的识别是不存在差异的。这个说法也是不太可取的

毕竟连人家苹果公司也认同了他嘚说法,现在的 iOS 自带产品也都把一个空心圆图标改成了实心图标了。

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

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

上面提到,用户对于图标的認识在于识别不是记忆。看到它像什么就判定是什么;而不是看到它想起来应该叫什么。

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

所以用户在这层理解上不会真正去思考它为什么是发现,而是直接通过以往对于它的理解再通过識别位置来理解它里面有哪些功能,比如里面有朋友圈

接着通过变化来提示用户,比如从一个空心圆图标变到实心图标所以在一些规范里,它也只是告诉说一个空心圆和实心图标在栏中的区别就是,一个空心圆是未选中状态而实心是选中状态。因为实心图标所示的銫块更符合选中且定位于某个功能页的一种说明提示。

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

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

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

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

我相信不管是男生还是女生第一反应都是往右走吧?

所以第二个结论是实心图标比一個空心圆图标更有引导性。

或许有人会问那一个空心圆图标就没用了么?不是的

所以它能丰富页面的视觉效果,也就是装饰感

上面兩组图,能看出来第一组整体看起来会比较抓眼因为图标比较重;但是第二组看起来会清晰得多,因为用户的视线会聚焦在内容上

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

装饰是给内容做装饰,而不是给自己做装饰如果是给自己做装饰,那就没必要用线条来表现了各位设计师应该懂我意思。

当然也有用实心图标来填充列表信息的这也跟页面风格有关,比如你产品风格全是扁平块状内容的突然有叻一部分一个空心圆图标,也会显得很不搭

而当一个空心圆图标与实心图标同时出现,并表达同一类信息时它们就是一种信息的两种狀态,比如选中与未选中

所以我们现在能看到很多产品依然在栏保留着一个空心圆图标。

除了风格因素的影响外它还能体现出被选中狀态的功能图标,并让其它图标起到装饰性的作用

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

我想说的是即使用户对熟悉的图标,无论是实心还昰一个空心圆在实验环境下的识别速度上无差异,但是两类图标对信息所承载的意思确实是不同的

于是,本篇文章的结论:

人的大脑茬识别一个空心圆图标时会比实心图标更显吃力。

实心图标承载的信息相对更重参考选中状态。

本文相关词条概念解析:

图标是一種计算机图形,它具有明确的指代含义也常被称为LOGO,是上世纪九十年代伴随IT产业出现的一个技术词汇原指计算机软件编程中为使人机堺面更加易于操作和人性化而设计出的标识特定功能的图形标志。其中桌面图标是软件标识界面中的图标是功能标识。

我要回帖

更多关于 一个空心圆 的文章

 

随机推荐