0文章
0评论
0获赞

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

858 0

01.

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

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

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

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

我仔细翻阅了这个实验的所有资料和参考文献,并对这名设计师提出的很多参考做了阅读,过程中,我发现这个实验有一个细节问题。

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

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

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

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

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

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

在这个问题上,可以说 Aubrey Johnson 通过设计原则以及认知心理得出的图形识别理论,是更站得住脚的。也就是,空心图标,在用户的认知理解上需要调动更多神经元来进行识别。用人话说,就是识别起来比实心图标费力。

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

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

02.

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

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

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

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

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

我相信现在在看文章的你,一下子也想不起来微信底部四个图标的样子吧?或者对于微信的「发现」页,也不能理解为什么要用那样一个图标来表示。

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

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

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

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

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

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

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

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

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

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

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

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

所以第二个结论是,心图标比空心图标更有引导性。

03.

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

其实上面有提到,空心图标相比实心图标更难识别,那么人就需要调动更多神经来对空心图标进行确认。所以它能丰富页面的视觉效果,也就是装饰感。

举个例子:

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

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

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

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

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

我只是在这里用这个例子来说明,空心图标的引导性没有实心图标强,所以更多会被用来当做装饰品。

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

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

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

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

04.

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

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

于是,本篇文章的结论:

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

这就是本篇文章的所有内容了,谢谢阅读:)

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理(公众号)

作者:呆呆本人

实心图标与空心图标的区别?
实心图标与空心图标的区别?
评论 (0)
请登录以参与评论。
立即登录

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

7,827 0

互联网的产品视觉设计师又分为界面视觉设计师和运营视觉设计师,那么,这两者有何区别呢?

随着时代进步,互联网的发展让我们的生活越来越便利。用户在追求产品功能便利的同时,对界面品质的追求也越来越高。视觉设计从传统行业走向互联网时代,互联网产品的视觉设计既是对互联网产品的包装,也是对互联网产品的一种解释。越来越多的人对界面的视觉设计产生浓厚的兴趣,想进一步了解什么是互联网的视觉设计。

一、互联网产品视觉设计师有几类

  • 第一类:界面视觉设计师——产品功能方向的视觉设计师
  • 第二类:运营视觉设计师——运营方向的视觉设计师
第一类:界面视觉设计师

产品功能方向的设计师,从设计的出发点来说,核心以产品功能和服务设计为主,更关注产品以怎样的界面呈现。 负责产品或网站的图形、图标、色彩、视觉风格等,决定营造出什么样的视觉体验。

从视觉层面把控产品界面设计,在分析产品逻辑和交互逻辑后,负责简洁而优雅的传达有效信息,并通过视觉设计制造出愉悦的用户体验,好的 UI设计师肯定要对交互有自己的理解,能提出更优于交互设计稿的布局方案。

其实互联网领域中,UI 和 UX 设计师的界限相当模糊,在很多创业公司,这两个设计角色是合二为一的。

1. 界面视觉设计师的工作职责和内容

  • 为产品进行前期的视觉推导并完成设计方案。
  • 负责为互联网新产品与新功能提供创意策划并提供用户界面的设计方案。
  • 负责参与前瞻性产品的创意设计和动态DEMO 的实现。

2. 界面视觉设计师软件

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

第二类:运营视觉设计师

运营方向设计师设计的出发点以产品活动设计为主,设计活动专题界面,如天猫双十一、京东618等。这类营销类型的设计是为了吸引用户参加对应的活动,或加深用户对互联网产品的印象,产生参与行为。

运营视觉设计师不同于 UI 和交互设计师,运营视觉设计师的工作要求他们更加注重视觉丰富性的表现,更好的表达交互逻辑,优秀的体验需要视觉与交互兼顾。

1. 运营方向视觉设计师的工作职责和内容

  • 基于对运营设计需求的良好理解能力完成需要的视觉设计提案。
  • 团队协作设定整体活动界面视觉风格与创意规划。
  • 配合团队高效地开展系统化的详细视觉设计。
  • 制定 UI设计规范和建立组件库。

2. 运营视觉设计师软件

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

二、界面视觉设计与运营视觉设计最大的区别

界面视觉设计师最关心的是产品是否富有舒适的界面、用户体验和实用能力。

运营视觉设计师最关心的是视觉冲击力和美观度。

1. 色彩

界面设计:会用醒目的颜色来更好的吸引人的注意力。第一级别的操作常用颜色作为行为召唤,比如:按钮。

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

△ 图片来源 Google Material Design

鲜艳的强调色用于你的主要操作按钮以及组件,如开关或滑片。左对齐的部分图标或章节标题也可以使用强调色。

运营设计:颜色作为情感表达重要途径,会最大化的利用色彩、图片和文字信息来提高转化率。颜色能对用户产生情感影响,将用户带到下一步行动中。

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

△ 图片来源 Material.io

  • 绿色:健康、重生、干净;
  • 红色:热情、爱恋、愤怒、危险;
  • 黄色:正能量、快乐、希望、美食。
2. 层级

界面设计:背景层、内容层、操作层、状态层。使用清晰视觉层级,通过视觉差异将信息分类,让界面设计,更加透气简洁。

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

△ 图中信息层次很分明 | 图片来源 学UI网

运营设计:运用良好的视觉层级呈现给用户,提高识别效率、激发用户兴趣、延迟用户在页面停留时间、减少用户流失。

3. 字体

界面设计:字体、字号的运用不同,可以给页面带来不同的气质和页面关系。

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

△ 「主体(Body)」样式的例子 | 图片来源 Google Material Design

运营设计:字体很重要,好的字体设计能给页面加分。不同的字体给用户带来不同的用户情感,并且增强排版的节奏感、突出主题,比如:活动标题。

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

充分利用春节的元素,进行字体设计,节日的气氛也到位了。

4. 图标

界面设计:多应用于标签、标题、按钮、导航、信息提示等。图标精致、细致会使整个设计感观提升,让设计的档次得到提高。

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

图片来源 Google Material Design

运营设计:富有统领和引导作用,让画面看起来更活泼、有活力。

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

图标精确的表述,让画面看上去更加丰富了。

5. 设计风格

界面设计:通过研究分析、设计草案、设计辩证、设计提案后,得出一套完整的 UI界面,使用户的实际需求成为产品设计的导向,使产品更符合用户的习惯、经验和期待。

运营设计:根据目标用户分析、素材收集整理后,在设计前初步的设定设计理念。设计理念是设计师在构思过程中所确立的主导思想,它赋予设计内涵和风格特点。

参考文献:

  • 《视觉链》,互联网产品的视觉设计理念与规范/吴佳敏著,北京机械工业出版社
  • 《视觉设计师进阶所需的17条思考维度》@iYoko0509(爱奇艺无线UED资深视觉设计师)

欢迎关注点融设计中心DDC微信公众号:「ID:DR_DDC」

介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!
介面视觉设计与运营视觉设计有什么不同? 这篇科普让你轻松看懂!

图片素材作者:Manoj Rajput

评论 (0)
请登录以参与评论。
立即登录