本专题从图标的基础知识出发，再具体到不同类型的图标设计方法，待你掌握方法后，附上图标检验和优化指南。最后，优质的免费图标下载站合集和图标管理工具，让你更加省时高效！
2021/03/15更新
图标类型千变万化，实际上万变不离「线性、面性、线面结合」3个方面， 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等表达方式设计而成。本文将近 6000 字，一篇就可以了解全部设计风格！
本文从图标的定义及分类、图标的设计规范、图标的性格走向和图标的思考维度等方面，帮你完整掌握图标设计。最后附上超多图标资源打包，快来下载！
图标在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。
最近已经可以在部分大厂APP中看到3D图标了，以后3D图标是否会大行其道？今天我们就来探讨一下新拟物背景下3D与平面的结合设计，能在UI中擦出什么样的火花。
B端图标设计与C端有很大的不同，无论是应用的场景、设计的理念，都有非常大的差异。今天这篇深度聊聊B端图标究竟应该如何设计。
本文主要分享笔者在 QQ 游戏中心改版项目中，制作 3D 图标的方法和流程，以及 2D 与 3D 图形设计中思考的差异性，希望可以给大家一些参考。
这一期真的是掏空了职业经验，总结出一套图标制作与落地方法，内容涵盖真实项目中的大多数坑点。
本文从识别、统一、耐看、风格、品牌5 个维度来打造一份全面可行的图标自检手册，帮助在大家改版、面试等场景进行自检优化。
相信很多人都会留意到 手机QQ 切换底部标签栏时有趣的动画效果，Tab bar 作为整个 APP 的第一触点，该如何做好它的动效设计，有哪些动效设计类型和组合方式？本文腾讯设计师为你全面揭秘！
我们每天都在设计图标，并且保持这样的状态超过15年。身为设计师，想必你已经阅读过很多关于图标设计的文章，但是今天的文章不一样，今天我们的文章不会花费很长时间来单独介绍某一个图标的设计，而是设计任何一套图标应当遵循的基本流程，以及一定要注意的8个关键的注意事项，你可以将这些东西带入到一些现成的案例当中去验证。这个注意事项清单，也可以被视作为给设计师所编写的图标设计指南，即使设计趋势发生变化，这些规则和经验依然适用。
如今的用户界面中，图标绝对是不可或缺的元素。虽然绝大多数的图标都很小，甚至不被人注意到，但是它们帮助设计和用户解决了许多问题。图标是可用性和导航的关键，用户能够感知到图标的功用，但是只有设计师才会明白，想要让图标简约、可用还富有表现力，要耗费多少时间和精力。
编者按：应用图标的设计表现形式很多，本文总结了36种图表设计形式与你分享，希望能够对你有所启发。当我们决定要去App Store、Google Play这样的应用市场下载某个App应用时，首先映入眼帘的便是Icon，即应用图标。一个App应用图标设计的美感与吸引力，决定了用户对产品的第一印象。
编者按：很多学UI 设计的同学掌握PS 和AI ，能临摹图标和界面后，就容易急着上手用研和交互。不过图标设计的学问远远不止于能画出来，比如这篇文章说到的图标绘制规范，就是很多设计师i需要补的一堂课。「搞定图标设计」《从零基础到合格，我总结了这5个图标设计实战方法》《图标｜帮你成就优质APP图标的三个关键点》《值得注意！
画过不少图标，也总结了很多大神的方法，在此归纳一下简单的图标画法，希望对大家有帮助。作为一名 UI 设计师，必须要重视 icon 的作用，首先是需要大量地练习，其次是尽量不要一遇到画图标的时候就随便在网上下载，而是结合产品调性创造属于这套产品的图标。一、图标在 UI 中的应用在本文中所说的图标，是指界面中的 icon。
一、图标的定义1. 什么是图标图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。2. 什么是功能图标功能图标是具有指代意义且具有功能标识的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。
想想图标的绘制也是有历史的，从刚开始 ps 用面切法运用布尔运算去切，有时候线条也是用面切面得到。随着线性图标的火爆和普及，开始放弃面切法，转用钢笔工具直接绘制，还可以很好的控制线的直角和圆角。当你会使用 Ps 绘制图标了，换成 ai 你会发现更加的快捷方便。
文章结合过往案例讲述如何通过设计要点和方法有效系统地进行界面图标设计。作者：KongZhen@腾讯视频TVD欢迎署名和标记来源转载 : )腾讯视频TVD是一个很年轻的团队，组内氛围好，不无聊，欢迎投简历或前来勾搭~「如何绘制优秀的图标」《网易资深设计师：APP应用图标的36个设计方法》《没掌握图标的绘制规范之前，别说自己会画图标了》《为什么我的图标这么酷炫，总监却说不合格？》================明星栏目推荐================优优教程网： UiiiUiii.com 是优设旗下...
编者按：动效未来有多火同学们都感受到了，之前发的AE教程都是实战型，软件得会，思路更不能少。如何做出有意思有趣的动画设计？今天@正越升 以图标动效为例，把高手常用的6种动效设计思路都总结出来，非常值得收藏的干货。
@苏大牙牙牙 ：日常工作中你有没有遇到，自己做的设计很难跟竞品产生差异？只能盲目追逐趋势缺少自己的独立思考？做不出符合自己产品品牌调性且独一无二的设计方案？
图标设计如何具有品牌性？这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性，更不知道如何将品牌性融入到图标当中，不过没关系，看了这篇文章你就不会那么困惑了！
@菜心设计铺 ：菜心的品牌基因法不知道大家有没有忘记，之前有写过两篇，今天来写第三篇——实战篇，根据真实的案例来再次讲述如何运用品牌基因法制作图标！如果你忘记了之前的品牌基因法（升级篇），可以先去回顾一下：《用品牌基因法做图标设计，这是高级UI设计师才会的手法》《用品牌基因法做图标设计，高级UI设计师才会的手法！（升级篇）》我们今天来聊的是一个真实的工作任务，做任务的过程分为以下几个阶段：收到任务找参考根据参考执行感觉没有品牌性根绝品牌基因法提取基因再次执行1. 收到任务我们每天都可能收到不同的设计...
在尺寸有限的移动端界面上，小小的icon可以更加简单高效的表达含义，并且给用户正确和友好的指引。所以对于UI设计师来说，与icon们相爱相杀无疑是每天日常。下面就来总结一下，如何使我们设计的icon表意清晰、符合标准。
@菜心设计铺 ：最近在做图标的优化调整，虽然改动不大，但在复盘的时候还是总结出很多心得，在这里和大家分享一下。图标是界面设计中最重要的元素之一，也是我们 UI设计师必备的技能，日常工作中我们经常会接到含有图标设计、优化的需求。但到底什么样的图标才算是优秀的？
UI的工作曾经被很多人等同于画图标，然而大家真的会画图标么？优质的图标和不够好的图标的区别其实非常小，但是这些细微的差别对于设计质量的影响却是很大。这篇文章分享的是如何用6个步骤来优化图标的设计。
编者按：矢量图标平台 iconfont 一直是国内最良心最受欢迎的人气图标下载平台，这次重大更新，包括全面升级的帮助体系、支持彩色图标上传下载、查看图标详情页、搜人功能、打赏设计师等，亮点多多，值得收藏。阿里妈妈矢量图标平台iconfont经过2年多的发展，网站用户数从最早每天几十个到现在拥有15万忠实用户，共享图标数从最早阿里妈妈UED自己制作的几百个图标到现在用户把70多万的图标共享在iconfont平台上，这两年我们不仅仅看到平台各种数据的增长，也看到了小伙伴们对iconfont平台支持和信任...
今天介绍的IconStore不同于一般的图标素材网站，该网站经过精心挑选，看得出图标都颇有水平，而且大多是矢量格式（AI/SVG/EPS），可以免费商用，无须标注出处。趁着过年，再附上一个超简单的配色网站，来收！顺带一提，该网站也允许使用者自由投稿自行设计的图标素材。
今天推荐的「Iconshock」是一个国外免费图标搜索网站，目前收录超过 200 万个图标！图标素材超过 400+ 以上，涵盖 30 种不同风格类型，从矢量图到平面设计图示甚至是现代化插图应有尽有。使用者可以从 Iconshock 免费下载 72px 以下（包括 24px、32px、48px 和 64px）图标，而且不用注册登入帐户。
@5key ：在过去的日子里我尝试着用Pixa、Ember、Inboard 来管理 icons，结果都不太让人满意。网页截图、apps 截图和 icon 放在一起让人感觉特别奇怪，怎么用都觉得别扭，有段时间我甚至回到用 Finder 来管理。直到前段时间 Iconjar 的推出，我才意识到对于 icon我最需要的其实只是将它与其他类型图片素材分开管理。
徐小马：在互联网产品的设计工作中，无论是参考、拼稿还是搭建中低保真原型，设计师时时刻刻都会用到图标，然而，如果不对不断收集或制作的图标加以管理，那么在查找使用的时候会非常低效。为了解决这个问题，笔者给大家推荐一款图标管理工具 Nucleo。使用 Nucleo 里的图标Nucleo 中最大的图标资源是由其团队自己设计的，超过23000个图标，主题丰富，比如体育、节日、旗帜等。
Svgsus 是刚刚出来的 SVG 图标管理工具，小编第一时间下载体验，它的功能不多，但足够好用，不仅可以作为图标管理，而且能输出不同设备 SVG 代码，这功能实在太好用了。对设计师和前端以及开发人员都是相当方便实用的功能。免费实用的管理工具素材管理：《有图的都交给我！
发表评论
Wo~本文的评论还空着，快来抢沙发
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓