编辑指南:图标是用户使用产品的第一印象，全图标会给人视觉上的舒适感。如何画一个完整的图标？本文将从四个方面进行分析，希望对你有所帮助。

大家好~大家好，这次我给大家分享一个很实用的设计方法:饱满度应用。

先说我是怎么体会到图标的丰满的。

默默画别人图标的时候发现的:凭记忆里默默画的其他产品的图标，为什么系统图标没有原来的好？对比了一下我的无声画和原画的细节，我发现了一个非常重要的关键因素，来区分“嗯，这是一个图标”和“哇，这个图标不错”:让你“哇”的图标一般都是满的。

一、什么是满？

人为什么喜欢丰满？让我们了解什么是充实。

根据牛津词典，丰满有两个意思，即丰满；满，“满粮”；而且丰富旺盛。

很容易理解，饱满是果实成熟的象征。我们的祖先仍在野外狩猎。在环境复杂的丛林中，他们将丰满的果实与周围粗糙细长扁平的枝叶区分开来，迅速寻找食物。因此，饱胀意味着食物，它建立了我们眼睛对饱胀的偏好。

不管水果的颜色如何，我们都可以通过识别完整的形状，从周围的环境中快速识别水果。

同样，说到全设计，首先想到的是保时捷。每次路过保时捷，哦不，一辆保时捷经过我身边，我就被它饱满的造型和流畅的造型所吸引

据说保时捷设计师考虑的不是线条而是曲面，我们看到的轮廓是曲面车削的二维投影。

那么，是不是意味着只有圆是满的，我的图标只有圆了才会可爱呢？

情况也不是这样。虽然iPhone通过把拨号盘上的数字四舍五入，增加了用户的好感度，但并不意味着只有一个圆圈能让人喜欢。

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

梅·j·李舞蹈《值得》截图

这是一些从舞蹈视频中随机截取的图片。我知道中间那个舞者最受欢迎。她为什么受欢迎？

当然，面值很重要，但是面值呢？更何况头发已经把脸挡住了，给我们排除了影响因素。

这里我抛砖引玉来分析下中舞者的身体动作，可以看到与其他舞者不同的明显特征，就是她的手脚会同时达到动作的最大值，在一群舞者中营造出最舒展的轮廓，也就是所谓的全动作，所以最赏心悦目。

五月j·李舞蹈《值得》截图线描分析

充分利用框架，我们还可以从材料设计的图标网格和关键线形状中瞥见一两个:

https://material . io/design/icon graphics/system-icons . html # grid-and-key line-shapes

给出了可以很好利用框架的四种基本形式，可以帮助设计师做出统一完整的图标系列。

第二，丰满度在当前流行产品图标中的应用

如果简单罗列，图标哪里圆，哪里满，框架在哪里，可能都不足以形象地说明设计的亮点。图标VS鹿在这里分享一些流行的应用程序，也默默地画出这些图标的草图。

1.微信阅读

第一次默默画画的时候，我对微信头像的记忆是一个椭圆，微信头像的眼间距并没有根据感觉去多想画画。与原设计相比，我发现椭圆其实很饱满，没有那么平，眼间距也比较近，挺明智的。除了丰满，微信图标的设计也很适合商务:

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

2.多林戈语

Duolingo是一个语言学习应用程序，它既有趣又有趣。是我很喜欢的一款app。

从第一幅无声画到第四幅无声画，可以清楚地看到饱满度的运用提高了作品的赏心悦目程度。

对比01-04可以看出，虽然猫头鹰眼睛的面积差不多，但是04中猫头鹰眼睛的长宽比更近更饱满。

喙的形状是一样的。面积虽小，但弧度很大的上曲线，喙上的高光，圆角的处理，让喙形非常饱满。

不能忽略的是眼睛和喙的位置关系，紧凑合适，可以支撑整个脸。眼睛上方的羽毛不干燥，这些细节有助于使图标看起来更饱满，回味无穷。

除了以上，在无声绘画的过程中，我们还可以体会到原作的几个美:

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

3.盒子马先声

优势分析:

作为新新零售市场的领军人物，Box Horse的APP视觉风格加强了商业调性。

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

当我默默地画下这个箱马镇的图标时，我更真切地体会到了丰满的道理:

我印象中的荷花是三瓣面积相同、形状对称的花瓣，见第一幅无声画。

但是和原来相比，发现这朵莲花的三片花瓣实在是太饱满了，简直就是按照圆形的轮廓。

对比第二幅无声画和第一幅无声画，我们可以看到原作的一些美:

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

三、如何用丰满度来指导图标设计的修改

Luye工作中的一个APP项目Hello U，已经在北美上线了。

APP的主要内容是摩托罗拉原创内容+用户喜爱内容的新闻流。

第一版上线时使用的系统图标都是材质设计的原生图标。

1.任务分析

如前所述，hello U包含摩托罗拉原创内容，如手机提示、线下活动新闻、产品优惠等。；还包括用户根据喜好订阅的新闻内容，如体育、八卦、科技等。内容来源很丰富，希望这种多样性能体现在图标的修改设计上。

在用户访谈中，我们发现我们的用户认为hello U的新闻来源更可信、更健康。确实如此。hello U有一套不良内容过滤机制和摩托罗拉品牌代言，深受用户信赖。我们可以在设计中加强这种信任。

最初的图标很棒，但我们也希望通过一套独特的图标来建立一个独特而友好的品牌形象。

任务分解:

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

2.从纸张到软件

弗林特的设计师彼得·诺埃尔在一篇关于他对纸张设计和软件设计的看法的文章中写道:

用笔在纸上画画，是激发和创造可能性的舞台，是加法。

倒草图/ai，这是一个关于生产效率和设计精度的阶段，而且是减法。

以下是Deer重新设计hello U系统图标时的论文/软件设计流程:素描注重演绎，倾注到软件后更注重图形是否流畅，图标的形状是否一致。

我们将重新设计的图标与原生图标进行比较:

你可以看到修改后的设计有一个独特的风格:

主页图标:

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

游戏图标:

游戏机右侧的三个小按钮排列成三角形，与左侧的大按钮很好的平衡。

3.设计验证回归

修订前与修订后

仅更新系统图标时，应用程序的视觉体验会发生如下变化:

结合自身业务特点，得出服务产品独特的设计语言，有助于树立品牌形象，半着色的选择处理方式，在渲染友好氛围的同时，可以减轻系统工具图标的权重，让用户更加关注内容本身。

图标使用饱满度原则，当图标大小相同时，更清晰、更友好、更易读。

四.摘要

稍加观察，从图标到汽车，我们身边有很多利用丰满原则增加吸引力的设计例子。

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

一个元素“够饱”吗？如果更饱满，是否能让设计更赏心悦目？

元素之间的位置关系形成的框架是否与元素的饱满度一致？

更深层次的，是思考视觉设计如何结合商业场景来强化产品，为产品开发独特的设计语言。