一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

编辑导读:图标是用户使用产品的第一印象,饱满的图标会在视觉上给人舒适感。如何画一个饱满的图标呢?本文将从四个方面展开分析,希望对你有帮助。

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

Hello~大家好,这次跟大家分享一个非常实用的设计方法:饱满性应用。

先说下我是怎么认识到图标的“饱满性”的。

默画人家icon时候发现的:为什么按我记忆中默画出来的别家产品图标,系统图标都没有原版好看?在比对自己的默画与原作细节之后我发现一个非常重要,区别开“嗯这个是个图标”和“哇这个图标像样”之间的关键因素:让你“哇”出来的图标,一般都比较饱满。

一、啥是饱满?

为啥大家喜欢饱满?我们先来感性的认识一下,啥是饱满。

根据牛津词典的解释,饱满有两层意思,分别是充实;丰满,「籽粒 饱满」;以及充沛,旺盛。

这就很好理解了,饱满,是果实成熟的象征。我们的祖先还在野外打食儿的时代,在环境复杂的丛林里,他们通过辨识果实饱满的形状将其跟周围粗糙,纤细,扁平的树枝树叶区分开,达到快速找到食物的目的。因此,饱满意味着食物,这奠定了我们人眼对饱满形态的偏好。

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

无论果实的颜色,我们都能通过对饱满形态的识别快速将果实从周别环境中识别出来 。

相近的,提到饱满的设计第一个闯入我脑海的就是保时捷。每次我经过保时捷,哦不,有保时捷经过我时,都被它那饱满的形态,流畅的造型吸引

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

据说保时捷的设计师考虑的不是线条而是曲面,我们看到的外轮廓形态是曲面转折的二维投影。

那么是不是说,只有圆形才算饱满,难道以后我的icon都长圆形才讨喜了?

也不是那么回事,虽然iPhone做过通过给拨号键盘的数字加圆底儿的方式增加用户好感度,但这也不是说只有圆形才能让人喜欢。

另外一个例子就是舞蹈中常说的“框架”

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

May j lee 舞蹈《worth it》截图

这是我在一个舞蹈视频中随机截下的几张图,已知中间的舞者最受欢迎,求她为啥受欢迎?

当然颜值很重要,但是颜值之外呢?何况头发已经把脸挡住,为我们排除了影响因素。

在这儿我抛砖引玉的分析了下中间舞者的肢体动作,可以看到区别于其他舞者的明显特征,是她的手脚会同时达到动作的最大值,在一群舞者中制造出了最为舒展的轮廓,也就是所谓的动作饱满,因此最为悦目。

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

May j lee 舞蹈《worth it》截图画线分析

善用框架这一点,我们也能从Material design 的 “Icon grid and keyline shapes”中略窥一二:

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes

其中给出了能够利用好框架的四个基本形态,能够帮助设计师制作出统一,饱满的icon系列。

二、饱满性在当下流行产品图标中的运用

如果只是单纯的罗列,这个图标哪里圆润,哪里饱满,哪里框架搭的到位可能还不足以生动说明设计的亮点,在此分享一些流行APP的icon VS 鹿也默画这些icon的草图。

1. 微信读书

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

在第一次默画时,我记忆中的微信头像是个椭圆,微信头像的眼间距也没有多想按感觉画上了,画完跟原设计对比时发现,椭圆其实很饱满没有那么扁,眼间距也相对近一些,颇有睿智的感觉。除了饱满性,微信图标的设计也十分贴合业务:

  1. 蓝色区域取翻开的书,微信的对话气泡意像合二为一。
  2. 大块的淡蓝色,宁静,沉稳的色彩,既区别于市场其他图标的蓝色,易于找到,又渲染了使用时的气氛。
  3. 大块无内容区域,让人联想到主体是里面的无限书籍。
  4. 符合基本的图形设计准则,微信小头偏圆,饱满讨喜;小头在蓝色区域右下方四分之一的区域内居中;书的尖角延伸至书的二分之一处等等。

2. Duolingo

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

Duolingo是一款学习语言的应用,寓教于乐,是我非常喜欢的一个APP。

从第一次默画到第四次默画,可以清楚地看到饱满性的运用对作品讨喜程度的提升。

对比01-04,可以看到虽然猫头鹰眼睛面积相似,但04中眼睛长宽比更接近,更饱满。

喙的形态也是,虽然给人印象中面积不大,然而弧度非常大的上沿曲线,喙上的高光和圆角的处理都使喙的形态非常饱满。

不可忽视的是眼睛和喙的位置关系,紧凑适当,能够撑起整个面部。眼睛上方羽毛的形状也不是干瘪的样子,这些细节都帮助使icon看起来更丰满,富有回味的乐趣。

除了以上,在默画过程中还能体会到原作的几点妙处:

  1. 使用了博学的猫头鹰这个形象。
  2. 上喙的三角形,喙跟眼睛形成的三角形,以及头顶羽毛的三角形相似相等,形成一种积极向上的动势。同时三角形也带有稳定感,象征着持之以恒,贴合业务语义。

3. 盒马鲜生

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

优点分析:

盒马作为生鲜新零售市场的头部玩家,其APP的视觉风格很好的强化了业务调性。

  1. icon使用线框风格,且线框内大面积留白,图标内的元素用尽可能简洁的圆头短线条表现,打造出轻盈的感觉,与“生鲜”的自身业务相符,配合浅蓝色的高亮色,感觉干净清新,让人联想到食材的品质。
  2. 图标内元素大致遵循着三分法,即识别性元素占图标整体位置的三分之一左右。
  3. 因为图标本身是小东西,所以图标内的线条尽可能的少,如待收货小卡车图标的简洁。

在默画这个盒马小镇的icon时,我更为真切地体会到了饱满性原则:

印象中的这朵荷花是面积相等的三片花瓣形态左右对称,见第一次默画。

然而与原作对比时发现,这朵荷花的三片花瓣竟然如此饱满,干脆贴着圆形的轮廓走线。

第二次默画与第一次默画相比,可以看出原作的一些妙处:

  • 更饱满 – 饱满来自于对框架的利用
  • 更富于层次/大小对比 – 这和盒马的其他icon富于戏剧性的对比的手法一致
  • 元素只有一个完全相同的花瓣,重复使用,创造出简洁又丰富的形态

三、如何运用饱满性去指导图标设计改版

hello U 是鹿也工作中的一个APP项目,现已在北美地区上线。

APP的主要内容是Motorola原创内容+用户喜好内容的新闻流。

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

初版上线时使用的 system icon 都是 Material design 的原生icon。

1. 任务分析

前面提到过,hello U里包含了motorola的原创内容, 比如手机使用的tips线下活动新闻,产品优惠等等;也包含用户根据喜好订阅的新闻内容,如体育,八卦,科技等等。内容的来源十分丰富,在icon改版设计中希望能够体现出这种多样性。

在用户访谈中发现,我们的用户认为hello U的新闻来源更为可信,健康。事实也确实如此,hello U有一套不良内容过滤机制,再加上Motorola品牌背书,颇得用户信任,在设计中我们可以强化这种信任感。

原生的icon固然棒,但我们也希望通过一套独有的icon建立独特且友好的品牌形象。

任务拆解:

  1. 在icon中使用多种形状来暗喻内容的多样性。
  2. 使用三角形去强化可信赖的感觉。
  3. 设计饱满讨喜的icon,传递出友好的品牌信息。

2. 从纸面到软件

Flinto 的设计师Peter Nowell在一篇文章中写到他对纸面设计和在软件里设计的看法:

用笔在纸上画,这是一个激发灵感,创造可能的阶段,是加法。

倒入sketch/ai ,这是一个有关生产效率和设计精准的阶段,是减法。

以下是鹿也在重新设计 hello U 系统icon时的纸面/软件设计过程:草图注重推演,倒入软件后更关注图形是否光滑,icon之间的形态是否一致。

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

我们把重新设计后的icon与原生icon进行对比:

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

可以看到改版后的设计有了独特风格:

Home icon:

  • 更圆润的图标增加了友好的感觉,同时提升了可识别性;
  • 选中状态使用半填充状态,增加了图标的维度。

Game icon:

游戏机右侧三个小按键呈三角形排列,并很好地与左侧大按键平衡。

3. 设计验证回归

一个 Tip 让你的 icon 更讨喜:流行 icon 分析总结与运用

改版前 vs 改版后

在只更新系统图标的情况下,app的视觉感受发生了如下变化:

结合自身业务特色得到了服务产品的独特设计语言,有助于建立品牌形象,半填色的选中处理方式,在渲染友好气氛的同时减弱系统工具图标的重量,让用户更专注于内容本身。

在图标同样大小情况下,使用了饱满性原则的icon更加清晰,友好,可读性强。

四、总结

只要稍加观察,小到图标,大到汽车,我们身边的设计不乏运用饱满性原则增加吸引力的例子。

我们在设计时不妨问自己几个问题:

某个元素是否“足够”饱满?如果更饱满,能否让设计更讨喜?

元素间的位置关系构成的框架是否与其中元素的饱满度相符?

而更深层的,则是思考视觉设计该如何强化产品,结合业务场景为产品发展出独具自身特色的设计语言。

共勉之。

 

题图来自 Unsplash,基于 CC0 协议

本文由 @锤子 发布于 职涯宝 ,未经作者许可,禁止转载,欢迎您分享文章

发表评论

登录后才能评论
小程序
小程序
微信客服
微信客服
QQ客服 建站服务
分享本页
返回顶部