增加图标亮点，5个辅助图形设计技巧
source link: https://www.shejidaren.com/tubiao-fu-zhu-tuxing-sheji-jiqiao.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
增加图标亮点，5个辅助图形设计技巧
图标是 UI 设计的重点之一，既有按钮作用，也有意义的象征。但图标也需要契合产品的整个设计风格，让图标有特点的同时，也需要注意图标在设计中的次要地位，而不是喧宾夺主。本文将为大家带来图标中的辅助图形设计思路，帮助设计师在辅助图形上花心思，设计出更具亮点的图标。
什么是图标辅助图形？
很多人知道品牌设计中有辅助图形的概念，辅助图形对于品牌识别体系非常重要，但其实在图标设计时，也会经常用到辅助图形。图标中的辅助图形，简单理解就是图标的装饰元素，它能让图标设计有更多的细节和特点，强化图标识别性，同时还能让图标更具视觉表现力。
举个例子，像下面这套图标中的浅色部分和噪点就是图标中的辅助图形，去掉这些辅助图形不大会影响图标的识别性，但增加这些辅助图形后，图标变得更有特点，更容易被记住。
https://dribbble.com/shots/14490441-Feature-Icons
如何用好图标辅助图形？
善用辅助图形为图标增强表现力是图标设计中的一个秘密武器，彩云在工作中总结了一些经验，大概有以下5点：
1）尽量让辅助图形有意义
《简约至上》这本书中提到过一个删除原则：删除是将不必要的元素都剔除掉，直到不能再删除为止。那么在图标设计中，这一点尤为重要，因为图标本身就浓缩了大量的信息，所以要让用到的辅助图形有它存在的价值，不加多余的元素。
比如下面这个案例，容易看出其中的辅助图形是绿色部分。在图标中它们代表的是行动或者结果，作为事物主体的补充，可以理解为主语和宾语的关系。因为有了这样的辅助图形存在，强化了图标的识别性，这就能让图标增色不少。
https://dribbble.com/shots/14374503-Covid-19-Back-to-Work
下面这个案例是星球中一位同学的练习，整体来说还是不错的，但就辅助图形的使用上看就有些小问题了。淡黄色的辅助图形圆形跟主体图形没有太大的关联，也没有太多实际意义，可以理解为强行为了统一而统一。图标主体已经做了双色设计，增加这些圆形后让图标变得比较复杂且删除对图标意义的表达也没影响，所以这里的辅助图形的使用稍显多余。
2）结合品牌色
在配色上，辅助图形还可以结合品牌色彩。用品牌色的主色作为主体颜色，辅助色作为辅助图形的颜色，或者直接用品牌主色调作为辅助图形的配色都可以作为图标设计的亮点。
品牌色的加入，能够让图标配色的使用找到立足的理由，马上就能加分。
比如大家经常在画图标的时候，图标主体通常以单色为主，但此时可以尝试加入以品牌色装饰元素作为点缀，立马就能提升图标细节。下面这个案例是爱奇艺的首页图标设计，能看出来它的辅助图形设计配色上是按品牌绿色来设计的。
3）避免太过一致
在使用辅助图形的时候，尤其是对于多图标体系来说，完全一致的辅助图形就显得比较呆板，缺乏细节。再拿上面那个星球同学的练习来看，不看辅助图形的具体含义和复杂度，在整体上看起来也缺乏变化，圆形都在同一个位置，保持着同一个大小和颜色。
辅助图形的使用想要有更好的效果，尽量在一定的范围能多一些变化。
比如下面这个例子，虽然图形的位置和大小都一样，但在颜色上做了不同的变化，整体看来细节度还是不错的。
https://dribbble.com/shots/14728145-Project-icon
再比如下面这个案例，辅助图形的使用有丰富的变化，使得图标的细节满满。
https://dribbble.com/shots/3861669-Australia-Post-Iconography
另外值得注意的是，变化应该在一定的范围，不可以变化太大。
比如星球中另一位同学的练习，她在图标的底部用了浅色的蓝色填充作为辅助图形，但这3个之间的辅助图形差异太大，前面2个还能理解是一套，但对于第三个图标来说，辅助图形的比例明显大于前2个图标，显得不够统一。
而对于下面这组图标来说，蓝色的辅助图形的面积变化相对一致，显得更为统一。
https://dribbble.com/shots/3817782-Gretchen-Rubin-Icons
4）不要喧宾夺主
虽然使用图标辅助图形会让图标显得更加有特点，但也要分清主次，不应该超过图标本身的核心意义，不能太抢用户的注意力而影响识别性。
比如下面的案例，图标主体特征一眼就能识别出来，辅助图形的加入并不会影响主次关系。
https://dribbble.com/shots/3235311-Clearly-Eyewear-Iconography
星球中的一位同学做的练习，这里的辅助图形有些太过于抢眼，且盖在图标上面影响了一定的图标识别性。修改方向是如果能把辅助图形的玻璃质感做一个强化，增加一些透明度，把主体元素凸显出来就会好很多。
这是另一位同学的练习，也是同样的问题，辅助图形抢了主体元素的风头。修改方向是把辅助图形改小一些就会好很多。
她画这个图标是临摹了原作的效果，能看到原作中的星星辅助图形小一些会好很多。
5）风格保持一致
图标辅助图形也是图标的一部分，从整体上也需要遵循图标本身的风格体系。
这是星球中一位同学的练习，辅助图形用星星是没问题的，但这里星星的尖角相对于主图形的圆角来说就显得风格不够统一，把星星的尖角改为圆角就会好很多。
这位同学的作品也是临摹了原作的效果，能看到在原作中辅助图形都是以同样的圆润图形为主的，这里就体现了风格的一致性。
比如对照看看MBE的图标风格，他的辅助图形跟主图形一样，都是比较圆润可爱的，这样看起来整体的风格更加统一和谐。
以上这5点就是彩云关于图标辅助图形的一些个人经验总结，不一定适用于所有场景，仅供参考。
对于图标来说，辅助图形经常不被重视，以为只是为了让图标看起来不单调就加一些效果堆上去，其实这里面也有很多规律和要注意的细节。希望大家能够合理善用辅助图形，关注细节，让自己设计的图标更具亮点。
作者 | 彩云Sky
原文网址：https://www.zcool.com.cn/article/ZMTI2NDEyNA==.html
赞助商链接
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
Recommend
-
9
[译]5个技巧：避免React Hooks 常见问题[译]5个技巧：避免React Hooks 常见问题原文： https://kentcdodds.com/blog/react-hooks-pitf...
-
5
像每一篇文章一样，我会重复几行。我在我的Core i3 CPU、4GB主内存和Windows 7平台上测试了以下代码。如果你在不同的硬件配置或使用不同的平台，那么你的输出可能会随着我的输出屏幕而变化，并且输出可能会根据当前运行的进程而变化。由于...
-
3
2020.03.29 – 图形设计是真爱（之一） March 30, 2020March 30, 2020 我的大学专业是，平面设计。不过，刚入学的时候，专业名称叫：平面装潢。那是 2001 年。而「视觉传达」这个词...
-
7
产品经理：提高情商的5个技巧 产品侠 2021-06-07 0 评论...
-
8
产品经理提高情商的5个小技巧（四） ...
-
2
图形设计重要吗？很重要！ 10月 7, 2021 发表于: 网页设计 & 灵感. 评论...
-
12
沃尔玛CTO：零售巨头的5个数字化创新亮点 来源：至顶网CIO与CTO频道 2021-11-03 09:48:38关键字： 数字化转型
-
5
为 Finder 工具栏增加文件夹和应用图标 众所周知，去年的 macOS Big Sur 再一次更新了视觉设计风格，其中一项改动就是「焕然一新」的工具栏。至于焕然一新在哪……最明显的地方就是更大的额头。 这样的设计好不好...
-
4
优秀设计资源 » 强大的网络和移动用户界面图形设计系统
-
3
2023-06-09 03:16 Adobe 升级免费图形设计工具 Express，集成 Firefly AI 技术 巴比特讯，6 月 9 日，Adobe 宣布通过集成 Firefly AI 技术升级免费图形设计工具 Adobe Express。Express 用户可通过输入文本提示，利用 AI 改进...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK