tokenpocket下载官方app下载|icon的设计理念

作者： tokenpocket下载官方app下载

2024-03-14 13:01:14

ICON 图标设计规范与原则 - 知乎

ICON 图标设计规范与原则 - 知乎切换模式写文章登录/注册ICON 图标设计规范与原则王宇icon承载了App大部分功能的引导入口，是交互设计中是相当重要的一环。icon有一种象征意义或隐喻性，并在日常生活中经常遇到。icon代表了一些行动、事、人、真实的、虚拟的视觉符号。icon不仅是图标这么简单，它承载了文字的含义，将文字图形化，而让人使用最少的时间来理解这个按钮的含义，icon是审美与功能完美融合的元素。一、icon设计原则1，意义明确这个很容易理解，当你要做一套icon时，它首先要有自己明确的含义：这个放在那里？这个是干什么的？这个想要传达什么含义？能否让用户一眼就能看出来表达的含义，这是评判icon好坏的第一标准。2，简洁含义表达清楚了，接下来就是icon的表达形式，因为面积小，所以过于复杂会带有一些不必要的麻烦，比如看不清内容，含义模糊，这就要求设计师在去除冗余的细节的同时，保证icon目的和功能性，并且整体风格要和整体的视觉协调统一。3，可用性可以通过查找性测试和预测性测试来得到icon的可用性。查找性测试：被访者需要按照任务点击图标，后台需要计算被访者在不伴随文本标签的同时，找到正确图标的操作时间，首次点击的正确率。预测性测试：需要被访者推断这个图标所代表的功能，并推测点击后会发生什么。4，一致性当满足以上几条原则后，最后需要注意的就是所有icon的一致性，比如颜色，线条粗细，感情特征，开口等等...只有保持最终的一致性，你的设计才是完整的，如何保持一致性以及一些图标设计的规则，我们后面会详细的展开来说。二、icon设计规则1，基本型画icon和插画一样都是由最基本的形状慢慢组装来的，界面上所有的icon都可以近似成一个基本形状，比如各个方向的长方形、圆、三角形、正方形等。画好你想要的icon，然后用一些基本的图形来组合起来进行布尔运算，就会得到绝大部分你想要的把绘制好的图标模糊后，如果都是黑黑的，大小一致的黑团，那就说明视觉重量是一致的。2，图标的大小图标的大小不只是物理上的大小统一，眼睛在很多情况下都是欺骗你的，眼见未必为实。比如两个物理大小相同的形状，一个圆和一个正方形。正方形总是看起来会大一些，因为填补了更多的空间。所以我们需要把正方形缩小一点，才会让视觉看起来大小相同。3，栅格一般绘制会调出网格系统，我们为了保持图标的一致性，需要设定一些辅助的尺寸来保证视觉大小统一性4，角度大多数情况下，是使用45度角，或者他的倍数。先上图：45度角其他角度锯齿走向大家可以很明显的看出来区别吧，如果是45度角，锯齿的走势是可以接受的，而别的角度锯齿就没有那么整齐了，会有边缘的透明度。5，线的粗细一般来说用2px或者2的倍数，必要的情况下可以用3px。不要介入过多的粗细，因为会破坏一套图标的统一性和凝聚力，并且不太建议用太细的线条，除非你刻意做线性风格图标，比如airbnb的风格。5，尺寸没有太大限制，现在24*24和48*48是目前比较标准icon尺寸。6，工具工具方面推荐使用ai绘制，因为在圆角和形状切割方面有着较大的优势，sketch的简洁方便也是个不错的选择，但是在转为svg格式的时候会产生许多不必要的东西，如多余的图层、纯颜色层、蒙版等等。三、icon设计细节曾看过@菜心设计铺分享的关于图标断线的方法，觉得很不错，分享给大家1，拼接处断线2，复杂处平衡比较后还是觉的方案一舒服多了吧～3，避免中心断线4，一笔画完当然如果实在不能一笔也别勉强。设计图标的时候需要考虑到使用场景及规则，所有的视觉风格应该有相关联的点，比如线条的粗细，圆角的统一，断点的统一等。结语：最后我想啰嗦一句，功能图标和桌面上的应用图标不是一回事，比如应用图标非常需要设计师打造一枚个性十足的icon，来引起用户的注意。而页面的功能icon往往是相对安静的存在，哪怕没有了也是没关系，比如抖音的底部工具栏是用文字来代替图标。关注一波，一起聊设计~ 编辑于 2018-05-23 19:33UI设计师用户界面设计用户体验设计赞同 2464 条评论分享喜欢收藏申请

设计师必看的图标（icon）设计指南 - 知乎

设计师必看的图标（icon）设计指南 - 知乎切换模式写文章登录/注册设计师必看的图标（icon）设计指南扬扬图标设计是UI设计中非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。本文尽量将图标进行系统一些的介绍说明，当然仅一篇文章是不可能面面俱到包含所有知识点。内容比较基础，主要以设计概念和设计思路为主，对图标相关的内容进行组织梳理和分类，便于小伙伴们建立图标的概念体系。过程中也有针对几种典型的图标结构进行实操代练，想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。1.1 图标的定义图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。它的本质是一种符号，它采用对这个世界的隐喻，来指代功能，含义，用途等。图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。如果粗浅划分的话，UI设计中常见的图标大致分为2大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。1.2 图标的重要性对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处：全球通用：Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样；节约空间：如果在一个图标能够表述清楚含义的时候，比如用一个叉就可以不用写「关闭」；快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能；上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了。1.3 发展历程如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识。随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路。20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而Xerox Alto 对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows 对抗 Macintosh。当然这都是后话。来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升。从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计，但由于它们的表现形式太过于抽象，缺乏情感的传递，并没有获得用户的青睐。在此之后，越来越多的图标开始借由灵活而强大的数字技术而诞生，并且基于不同的需求而演化出不同的分支和风格。许多操作系统和工具开始预制一些成体系的图标，诞生基于种种需求，越来越多的自制的、重设计的图标，逐步进入了我们的视野。图标类型很多，我们可以用不同的方式来划分它们。图标的类型2.1 拟物图标由于人们都是通过以往的认知来理解新事物，所以基于这一点，早期应用界面必然要采用拟物风格，以便于人们的理解和操作。是一个由实物 → 符号的发展历程。例如「保存」图标就是将「软盘」符号化之后形成的图形，「软盘」是「保存」图标的实体。但随着时间的推移，人们逐渐将长期接触的符号本身作为一种新的实体，在大家的眼里，它不再是一个具象事物的抽象符号，而是直接当成一个实体来使用，甚至这个符号的实体已经淡出历史，但人们还在习惯性使用这个符号。更具体点来说，拟物设计就是追求模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现（也可适当程度变形和夸张）；扁平化设计就是摒弃以上对效果（尤其是高光、阴影等能造成透视感的效果）的追求，转而通过抽象、简化、符号化的设计元素来表现。你还记得曾经熬夜画写实图标的日子嘛～上千个图层不在话下有木有！但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代。2.2 扁平图标区别于拟物化更加接近于真实的实物，扁平化则是简化真实的物体，进行平面化的表现。2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。扁平图标风格发展的后期，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。也许当满世界都是扁平化后，拟物化的设计却又变得更显眼了呢？最近流行的新拟物风格就是最好的证明。2.3 微扁平、轻拟物从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。2.4 线性图标线性图标是由直线、曲线、点在内等元素组合而成的图标样式，通过线来塑造轮廓。线性图标具有辨识度高，清晰，简约易识别等优点，线性图标不会对页面造成太多的视觉干扰。缺点是：线性图标的创作空间较少，太复杂的线性图标对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。直角线条的icon显得专业严谨，圆角粗线条的 ICON 显得饱满而可爱。2.5 面性图标面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面形图标具有表意能力强，细节丰富，情绪感强，视觉突出，创作空间大等优点。面性图标可以让用户迅速定位图标位置，预知点击后的状态。但是面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。2.5 文字图标文字图标是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号，英文的首字母或者词语关键字本身也具备很强的信息浓缩性，因此在某些场景下，采用文字或字符作为图标，是一种很不错的表现手法。比如「提示」图标，使用一个圆圈包裹一个英文字母「i」，表示 information，表示「注释信息」的含义；比如停车场直接使用「Parking」中的首字母「P」，这些都是比较约定俗称的使用方式。还有一些场景，很难用象形或者表意的方式进行表达，那么就很适合使用文字符号，例如京东/天猫某些商品具备「正品保证」的标识，这个概念太抽象了，很难用象形去概括，创造新的表意符号又很难被大众接受，这时「正」字就很适合作为这个场景特定的图标符号，作为针对中国用户群体的产品图标，简单粗暴且有效。如果可能的话，尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字图标(例如货币符号等等)，那么请你自己绘制，而不是直接使用字体。2.6 " 新拟物 "风格图标苹果在 WWDC20 搞了个大新闻：macOS 将与 iOS 统一步调，从X86 平台迁移至ARM 平台，并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur。macOS Big Sur是第一个将 " 新拟物 " 设计投入大规模商用的操作系统，这可视为 " 新拟物 "在实用化道路上的首次胜利。值得一提的是，在 Big Sur 的 " 外观 " 设置里，多了一项名为" 自适应强调色 "的选项。苹果将主题色的指定权留给开发者，这是否暗示新一代 App 在光影上会有更丰富的效果？" 新拟物 " 设计的精髓在于对光线的绝妙运用。它把光效拿捏在 " 扁平 " 与 " 拟物 " 之间，进而打造一种全新的视觉体验。不同于传统的拟物，" 新拟物 "虽然将符合物理规律的光影效果引入界面，但它所模拟的材质是自然界不存在的。换句话说，" 新拟物 " 是将真实光线用于虚拟对象，而 " 拟物 " 是还原实际物品在特定光照下的效果；由于整个设计界将不得不考虑新拟物风格，围绕该风格的可能性将会有爆炸性的发展，并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。产品应用图标有不同的风格，这些风格有可能偏拟物，也有可能很扁平，有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要，将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。3.1 中文文字图标中文是我们的母语，每一个汉字都令人记忆深刻，文字也是最直白的信息，而且不容易被曲解，所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计，提取应用名称中的一个或多个汉字，进行设计变形，变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。3.1.1 单字提取产品名称中最具代表性的文字，通过对笔画及整体骨架进行字体设计，以达到符合产品特性和视觉差异化的目的。其优点是可以直截了当的传递产品信息，识别性强。3.1.2 多字多字图标设计要注意的是整体的协调性和可读性，一般为2-3个字，最多两行（四个字）排列。其优点是更加直接的告诉用户产品名称，达到品牌推广的目的，减轻用户记忆成本。其缺点是如果图标上的文字和下面的辅助文字完全一样，会显得重复啰嗦，像介绍了两遍自己一样。3.1.3 字加图形组合文字加辅助图形的组合，也是常见的产品图标设计方法，相比纯文字图标，显得更加丰富有独特的产品的气质和属性。需要注意的是做好文字和辅助图形间的平衡。3.2 英文字母图标英文设计与中文设计的设计模式相似，通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工，新的字母图形依旧保持本身的识别性。3.2.1 单字母通常提取英文首字母进行设计，由于英文字母本身结构简洁，稍加改动就很容易达到设计感于识别性兼备的产品图标。需要注意的是英文字母本来就少，都用字母很容易创意雷同，难以形成差异化。3.2.2 多字母提取产品全称或几个单词的首字母组合而成，形成独有的产品简称，方便用户记忆。3.2.3 字母加图形组合字母加图形组合的设计形式比较广泛，图形分为几何图形和通过提炼的图形。通过字母与图形进行创意加工，可以使应用图标视觉表现更加饱满。3.3 数字图标直接用数字做应用图标的相对较少，但是数字识别性强，易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。3.4 特殊符号图标由于符号本身的含义会对产品属性有一定限制，所以特殊符号在应用图标的设计案例中相对较少。如“$”符号可代表与金钱有关联性的产品，无法运用在与此属性无关的产品上。不过也正是由于自身属性强的特点，可以很好的诠释关联的产品属性。除了中英文图标，还有图形类图标比较常见。这种类型的设计模式的优点就是直观醒目和简洁大方，视觉冲击力强。常见的有以下几种：3.5 几何图形几何图形的设计模式给人简约、现代、个性等视觉感受，从单个具象图形到复杂的空间感营造，几何图形的表现形式非常丰富。不同的形状给人的情感表达不同，如三角形给人传达个性、稳定、现代、时尚等，添加圆角后又会更加亲民、可爱。我们可以结合产品特征，合理的选择适合的形状图形进行创意。此类型较考验设计师的图形创意能力。3.6 单双形/剪影单双形是指应用图标只展示单个或两个的剪影图形。通常有两种设计方式，在深色背板上使图形反白，背景可以是单色也可以是渐变色；在浅色的背板上让图形填充颜色，图形可以是单色也可以是渐变色。这种设计模式的优点是简洁明确，易于用户在众多的应用图标阵列中快速找到目标。3.7 线形线形的设计模式分为两种设计方式，在深色的背板上让图标反白，背景可以是单色也可以是渐变色；在浅色的背板上让图标填充颜色，图标可以是单色也可以是渐变色，或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质，适合于文艺、清新的应用，在界面设计时保持这种干净明快的风格，才能与应用图标设计表里如一。线性风格一定注意不可太细，如果做得太细，在手机上看会非常尖锐，显得不易点击。例如airbnb，它的背景是一个微渐变，线性风格曲线组成“A”，同时是一个小蜜蜂。3.8 动物图形/剪影动物作为图标设计元素是比较常见的方式之一，通过提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色，简洁明了。动物给人的印象比较可爱，有助于加深用户对产品的印象。常见的表现形式有剪影、线性描边风格、面性风格等。3.9 卡通形象卡通风格的产品图标会让用户更有好感，一个可爱的卡通形象有助于加深用户对产品的印象。很多决策者会认为卡通是一种低龄的审美，这种想法其实是错误的。卡通可以说是一种各年龄层都能接受的风格，如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。3.10 正负形以正形为底突出负形特征，以负形表达产品属性，传递产品信息。例如NPR One，图标中的负形图形是对话气泡，告诉我们这是一个媒体或社交的应用，而正形图形强调产品气质。3.11 白色渐变白色渐变的设计模式与透明白色相似，都是通过白色不透明度来构建出图形的立体控件感，它比单纯的剪影图形更加具有质感，这种质感带给了我们视觉上的享受。例如印象笔记·圈点，它是一只白色的鹅毛形象，垂直的线型渐变使鹅毛富有了生命力一般，显得更加轻柔。3.12 彩色渐变色彩比任何图形都更能抓住用户的注意力，同时色彩更加具有情绪，能传递出应用的产品气质。比起白色渐变图形，彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比，营造空间感。应用图标的背景和图形的色彩要拉开对比，一般为白色或浅色背景。3.13 无无，即没有设计。除了背板什么也没有。虽然这类设计模式比较独特，但我们并不鼓励，因为用户很难从一个颜色上得到有用的信息。例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。应用图标尺寸规格4.1 iOS应用图标iOS6及之前的版本，应用图标的圆角半径都可以通过1/4圆绘制出来，即绘制标准的圆角矩形即可，主屏幕应用图标为114*114px，使用20px圆角半径，App store应用图标为512*512px，使用90px圆角半径等。从iOS7开始，主屏幕应用图标调整为120*120px，并且不再是标准的圆角矩形，而是某种连续曲线，接近于26-27px圆角半径。我们把两个圆角曲线放大重叠后进行对比，其中灰色线框为标准圆角矩形绘制的圆角，红色为iOS平滑圆角，它与圆角矩形拥有相同的对角线锚点，区别在于其曲线稍微向中心收紧。事实上，我们很难在Retina屏幕上区分这么席位的差别，因此设计师在绘制iOS应用图标时不必过分纠结它的圆角，直接绘制成直角矩形交给开发同学即可，如果应用图标需用于展示，可以绘制120*120px圆角矩形、27px圆角半径代替。4.2 安卓应用图标安卓应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。4.3 iOS应用图标设计流程在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。4.3.1 寻找隐喻隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影，马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩作为产品图标的主要造型。4.3.2 竞品分析应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异，避免创意撞车，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心里预期。4.3.3 提取关键词根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”，相机中的“快门”“信号灯”“开关机”，并依次将关键词描绘成下列图形。4.3.4 抽象图形确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，即完成初步设想。4.3.5 图标栅格线使用iOS应用图标栅格线作为设计一句有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。4.3.6 丰富细节通过上面图形组合已基本完成应用图标的设计，接下来我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。“影记”作为摄影师分享佳作平台，摄影师们用的器材颜色大多以黑色为主，因此酷酷的黑色更适合作为应用的主色。然后，白色的信号灯过于普通，使用相机本身发出的橘红色灯光作为信号灯的颜色，使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。4.3.7 多场景测试将120*120px应用图标设计稿放大至1024*1024px，交付开发提交至App Store上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。△ 注：上图非实际大小，仅表明不同分辨率下的比例关系此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone 8plus上需@3x的图，即将120px的图标放大至1.5倍；而在iPhone7的设置页需要58px的图，就需要将120px的图缩小。将大图缩小成小图时，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行席位调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。APP中的功能图标除了产品图标，还有一种图标被称为功能（或系统）图标，功能图标指的是担负一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂，如微信底部四个系统图标就使用了比较简洁的线性风格。功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，其作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来了良好一致的使用体验。在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有：1px 、1.5px、2px、3px，1.5的粗细常用于高倍屏，如近几年旗舰机的手机屏幕或者 retina电脑屏，否则像素渲染会比较模糊。5.1 图标栅格图标栅格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统，令所有的设计保持协调、一致和美学的视觉特征。5.1.1 像素栅格基于像素划分的像素栅格是最基础的栅格系统。在绘制图标时，我们总是希望将对象对齐到每一个像素，特别是直线。因为像素对齐不仅仅可以更好地渲染，还能让图标更加整洁、舒服。下图展示了Sketch 中像素对齐和没对齐图标之间的差异：左：像素不对齐右：像素对齐可以在绘制图标之前就先设置好栅格，在Sketch和Figma中都有相似的设置。Material Design官网给出了图标的辅助网格，为设计师绘制小图标提供一致的标准。图标网格通常包含三部分内容：活动区域，修饰区域，关键线形状。我们以此为例进行介绍。活动区域：是指图标主要内容的绘制区域，通常而言图标图形的主体都在该区域内。修饰区域：是指用于承载部分图标的一些出格图形，某些视觉占比较小的图形可以延伸到修饰区域，但不能超出网格范围。关键线形状：关键线形状是网格的基础。有4种关键线形状，利用这些核心形状作为向导，你可以在产品图标的设计中保持一致的视觉比例。如 Material Deisgn 的图标网格中，活动区域宽度为 20dp，修饰区域宽度为 2dp，4 种关键形状分别对齐于 20pd和 18dp 和 16dp的边缘，对齐于像素。上图为基于网格和关键线形状绘制图标的示例：如左侧「剪切板」图标，整体核心图形部分以网格中的正方矩形为模板，顶部的挂钩图形视觉面积较小，部分内容伸入修饰区域。右侧「相机」图标以长方矩形为模板。5.1.2 视觉栅格除了像素栅格，还有视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里，以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器，这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡，避免以后开发时还需要重新调整。5.1.3 视觉重量绘制图标不光要满足物理上大小统一，还要实现视觉上大小统一。设计师要懂得调节图标大小以避开视觉上的觉错。UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。如果把它们做成高斯模糊效果，你就会发现它们具有相同的视觉重量，因为它们变成或多或少相同的斑点效果。根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。5.2 图标绘制细节清晰是图标的基本要素，在sketch中，参数不要有小数点，让图标占满像素网格。因为计算机不能识别小数点，导出图标时计算机会把不能识别参数的部分拉伸填满像素网格，导致图标出现虚边。如果为图标设置1像素的边框，边框应该使用外部或内部的描边样式，但是不建议居中描边样式，居中描边的1px边框，虽然在放大它们的时候，它们看起来很清晰。但在100%比例大小显示的时候，它们会模糊，如下图：根据像素的网格线来设置一条线的起点和终点，会让你的图标看起来更清晰。通常情况下，线的倾斜角度在45°，30°，60°的时候，清晰度会比一些不常见的角度效果会更好，比如13.7°，81°等等。所以，尽量避免用这些奇怪的数值。从一套图标中最复杂的那个开始来设计通常是最有效的，因为它会帮助我们定义相同的视觉重量，让所有的图标视觉重量保持一致。因为当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。5.3 图标的基本元素5.3.1 大小一致性是设计图标的关键，在绘制时，一定要确保所有的图标都相同大小。在UI界面设计中，网格的大小必须要是4或12的倍数。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、48*48px。通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的产品图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。5.3.2 描边和填充没有什么比看到一个填充图标和一个线性图标放在一起更让人抓狂的了。确保你的图标风格一致是非常非常重要的。比如你想用填充图标来表示选中状态，那么请一定要确保你的其他图标风格一致，只有少量的变化。通常，填充图标具有更高的可识别性，而描边图标更方便添加细节。并且在选择你哪种风格更合适的时候，也别忘了考虑品牌定位和风格。如果你要绘制描边图标，那么需要保证所有的笔画都是相同的粗细，并且笔画之间的间距不要比笔画本身更细。当我们绘制线性图标的填充版本时，首先需要考虑如何简化线条。理想情况下，填充图标类似于阴影，而不是直接翻转颜色。绘制填充图标的描边版本，需要确定好线条的粗细，以及在保证清晰度的情况下可以添加多少细节。5.3.3 颜色如果是功能图标，那么最好只使用一种颜色:黑色。否则你的组件可能变得过于复杂，不利于和其他设计师协作。而对于营销图标，出于品牌宣传的目的，你可能会想要使用两种颜色，个人认为图标最好是单一颜色的，3种或3种以上颜色的东西都是插图，而不是图标。5.4 功能图标的风格常见的功能性图标风格大致有三种：线性图标、面形图标和扁平化图标。但其实我们可以将「扁平化图标」可以看作是「线性图标」和「面型图标」的一种组合形式，所以归根到底，基础的图标风格有两大类：「线性图标」和「面型图标」；5.4.1 线性图标线性图标是通过线条来表现物体的轮廓，它比面形图标更能塑造优美的外观，且作为贯穿图标绘制的线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。例如twitter和微信底部的tab图标等。在一个场景下的几个同等重要的图标，如果线条粗细不一致，会给人一种权重上存在差异的感觉。所以，在绘制线型图标时，通常会使用统一粗细的线条。常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。线性图标根据样式还可以分为：双色线性图标、线面填充图标、线性渐变图标。5.4.2 面形图标面形图标是以面为主要表现形式的图标。在「微信」底部标签栏中，为选中的图标是线性图标，而选中的图标则是面形图标，同时颜色会变成微信的品牌绿色再次暗示用户选中状态。面形图标占用的面积要比线性图标多，所以更加显眼。实际上，苹果在新的设计规范中也建议开发者在APP底部标签栏中全部使用面形图标，是否处于点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。基于最基本的「线性图标」和「面型图标」，通过不同的形态和风格的组合，再结合丰富的表现手法，就可以设计出形形色色的图标风格了。比如：不同粗细线条线性图标的组合，或者面面组合，或者线面组合。大家在设计图标的时候，需要根据自己的产品特征、受众和使用场景，去选择适合自己的表现形式。6.1 图标绘制方法图标的绘制方式主要有两种：布尔运算和贝塞尔曲线。6.1.1 布尔运算布尔指的是乔治·布尔，19世纪的一位数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以将这种运算称为布尔运算。布尔运算听起来比较难，但其实非常简单，布尔运算采用的数字逻辑推演法，主要有数字逻辑的联合、相交、相减。设计师在使用软件过程中引用了这种逻辑运算方法，对应到设计软件中，就有：合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。例如两个圆形相减可以得到一个月亮的造型，这就是布尔运算。合并形状：将两个形状合并为一个，取的是交集；减去顶层形状：用底层图形减去顶层图形所得最终图形；与形状区域相交：得到的形状是两个图形重叠的部分，取的是交集；排除重叠形状：简单理解就是减去两个图形重叠的部分，与「与形状区域相交」相反；基本上通过布尔运算，我们能绘制出常见的大部分图标了，但有时我们需要针对某些线条进行单独的调整，又或者我们需要打造一套手绘风的矢量图标，这个时候就需要用到贝塞尔曲线了。6.1.2 贝塞尔曲线贝塞尔曲线适用于二维图形绘制的数学曲线。1962年法国工程师皮埃尔·贝塞尔（Pierre Bézier）所发表。他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线是绘制矢量图形时的重要工具，使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。贝塞尔曲线包括：节点、控制点、控制线、曲线这几个基本概念。矢量图形便是由这几个基本概念构成的。图形由基础节点作为支撑构成，控制点和节点之间的线段称为控制线，控制线就像皮筋一样，调整控制点的位置，可以改变曲线的形状，就像被皮筋（控制线）拉扯一样。节点包括 4 种基础属性类型，一种是没有控制点和控制线的「直线节点」；另一种是「镜像关联节点」，这种节点控制其中一侧的控制点，另一侧的控制点会发生镜像变化，适合绘制对称结构的曲线；再有一种是「无关联节点」，即节点两侧的控制点可以各自自由控制它们那一侧的曲线而不互相影响；最后一种是「不对称关联节点」，这种类型下，节点两侧的控制点和节点会永远保持在同一条直线上，但是却不会对称控制线的长度。在 Sketch 中，我们可以在选中节点后通过快捷键 1 / 2 / 3 / 4 来快速切换当前节点的类型，加快绘制效率。6.1.3 钢笔工具绘制自由贝塞尔曲线常用的工具便是钢笔工具，钢笔工具也是所有矢量软件的核心工具。它的使用对于新手可能稍微薇有点复杂，但是一但上手，会非常方便。The Bézier Game 这个是一个非常不错的练习钢笔工具的网站，以游戏的形式练习钢笔工具，通关的时候你对钢笔工具就已经轻车熟路了。绘制实战这里选择了几个比较典型的图标，简单演示下绘制方法和各自的绘制思路：6.1.4 面性眼睛：布尔运算相交 / 相减 / 合并形状绘制一个正圆，然后复制这个正圆形，通过布尔运算「与形状区域相交」得到眼睛外轮廓，再绘制两个圆通过「相减」与合并形状得到眼睛造型。位置定位：旋转 / 相减这个图标由两个大小圆形相减，得到环形，再绘制一个和大圆半径相等的正方形，和圆环左、下对齐，最后逆时针旋转45度完成。WIFI：相加 / 相减 / 旋转绘制多个圆通过布尔运算的相加减得出三个圆圈嵌套“靶子造型，再绘制一个正三角形，和靶子图形相交得到Wi-Fi图标。齿轮：旋转 / 相减通过两个图形的布尔运算得到环形，然后绘制一个梯形，复制一个镜像，将其对齐环形两端，复制梯形编组并旋转复制三次（45度），最后合并全部形状完成。铃铛：相加 / 相减由3个矩形组成铃铛主体，铃铛顶部圆顶结构通过设置全圆角所得，铃铛底部的半圆使用圆形和矩形进行布尔运算，完成。6.1.5 线性放大镜：旋转 / 相加绘制一个正圆和一条线，用对齐工具将其居中对齐，编组后逆时针旋转45度即可。时钟：钢笔 / 剪刀工具绘制一个正圆和一个矩形，使圆形的左下角对齐圆形中心，用钢笔工具在矩形左边和下边增加两个锚点，再用剪刀工具减去多余的线条即可。注意指针的长短关系。雨伞：相减 / 剪刀工具绘制一个正圆，再绘制一个矩形与其相减得到伞顶，然后绘制一个矩形，通过剪刀工具减去多余部分，得到伞架，完成。相机：合并绘制一个矩形和一个梯形，通过合并得到相机主体，再绘制一个正圆完成相机镜头部分，完成。爱心：相加 / 旋转绘制两个正圆和一个直径与圆形等宽的正方形，然后逆时针旋转45度所得。6.2 制定规范无规矩不成方圆，规矩的出现可以让一切杂乱的东西变得合理，统一起来。在设计上也是如此，规范具有统一输出，指引细节、便于查看的好处，规范就是一组图标中的规矩，所有图标的绘制都按照规矩来，最终的成品就会显得井然有序。小小的图标是由很多图形元素组成的，在这些图标中，元素的一致性是建立一个共同视觉于洋的关键。熟悉这些元素可以更容易地理解每个图标和他们之间细微的差异，也将帮助我们学会图标设计的底层结构，依次是笔画末端、圆角、留白、笔触、内部角、禁绘区。在制定规范时，我们通常先绘制出一个符合业务风格的图标，然后根据这一个图标定制后续的图标规范，依次按照上述图标元素进行规范。如果是渐变填充图标还要规定它的渐变角度，光影角度等。在一组中的图标需要在这些图形属性中进行统一，这样的图标虽然形状不一样但是在视觉上看起来是属于同一系列的。制定规范的三个过程：拆分细节：将图标中的细节元素（圆角、笔画末端等）进行分解，并在规范中制定细节元素的使用法则。风格定位：根据产品调性，业务属性在规范中制定相应的色彩、质感风格。功能划分：不同功能（金刚区和标签栏等）的图标要区分开来，功能相近的包括色彩、质感应该采取相近性。图标设计规范6.3 图标管理和交付完成图标后需要进行视觉检视，避免任何多余的线条或形状，保证尽可能整洁。检查所有线条是否都在标准框架内，让其他人帮忙来检查你的图标是否整洁是非常有必要的。对图标精心设计评审，合格后再加入资源库，这样避免多人同时修改而造成混乱。文件格式是导出图标的关键。不同的人需要的文件格式也不同，如果你为外部合伙人提供图标，那么可能会提供1x、2x和3x.的png文件，以适应多种设备。而对于开发和其他设计人员，则通常需要导出.svg文件，这些文件可以在设计程序中编辑，并且可以通过代码在应用程序或浏览器中绘制。当导出SVG时，代码应该尽可能简洁。选择Figma的另一个重要原因是它有超小的SVG导出，并且还能自动优化。图标资源管理工具：Nucleo或许你能做出完美无瑕的图标，但如果不能让它们产品中发挥作用的话，那将毫无意义。所以在你开始设计之前，可以和开发人员谈谈，他们能告诉你图标交付的要求，这将改变你的一些选择，比如图标的粗细或大小。问问其他设计师过去做过什么，以确保你们没有重复工作。你还可以和市场运营人员聊一下，看看他们在日常物料中缺少什么。总之，多向别人寻求反馈、建议和帮助。他们会激励你发现更好的想法，并让你了解自己应该做什么。一套完整的图标设计规范是有必要的。6.4 线性or面性设计中，我们应该是用「线性图标」还是「面性图标」呢？其实二者没有太明显的选择优劣，很多场景下已经越来越模糊，但总的来说，还是有一些法则可以作为参考：常用的手法：在App的底部导航栏，选中状态使用面型图标，而非选中状态使用线性图标；16px左右的小图标慎用线性图标，线性图标在16px下，可排布像素的区域较小，这个时候线性图标不容易设计；面型图标比起线性图标，除装饰性外具备更强的视觉信息层次感，更具引导性，比如金刚区功能图标、IOS设置界面，使用面型图标；车载等系统界面，更适合用面型图标，面型图标的视觉面积较大，短时间内更加容易识别；线性图标看起来通常会更加细腻精致，适合比较精致简洁的设计或者女性化产品设计；功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页、或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，起作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时，设计精美、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来良好一致的使用体验。7.1 线性图标使用场景在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计，很多APP产品的标签栏都选择用线性风格的图标设计。无疑，线性图标可以减少视觉干扰，让用户集中在产品核心功能上，同时轻量化的视觉语言也与扁平化的设计风格更为融合。它比面形图标更能塑造优美的外观，且线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。通常，在UI设计中，线性图标很少和背板同时存在，因为线条的图形视觉表现力较弱，容易埋没在背景色中，但也不是必须的，如果掌握好一定的规则，一些简单的线性图标和背板的组合也会很协调。7.2 面形图标使用场景面形图标具有广泛适用性，通常在运动、时尚类应用的标签栏出现。由于面形图标的视觉占比最大化，具有强烈的视觉表现力，一般用于应用界面的主要功能入口，以方便用户快速寻找。功能入口的面形图标通常分为反白和正形两种类型。反白即在彩色背板上显示白色的图标，正形即图标直接填充色彩且无背板。在带有背板的图标设计时要注意图标与背板的尺寸比例，虽没有严格的绘制标准，但从整体视觉效果上考虑，图标尺寸最好不低于背板直径但1/2，最大不超过背板直径的0.618(黄金比例)，同时还要考虑所有图标的视差一致。7.3 扁平图标的使用场景扁平化图标实际上是线性图标和面形图标的一种组合形式，这种类似插画感觉的图形一开始多用于引导页、空状态也的情感化设计，后来逐渐在标签栏、首页主要功能入口也出现了扁平化图标的身影。精致的扁平化图标令人赏心悦目，拉近了与用户之间的距离，从而建立起良好的用户印象。我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。我们可以从以下五个方面来检验，分别是：识别性，规范性、统一性、呼吸感与品牌感。8.1 识别性图标就是帮助用户理解信息，所以识别性（也可以说是可访问性）是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑。我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比，不论是黑色还是白色的背景都可以看清图标的全部细节，还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿到强光下进行观察，在强光下是否可以看清图标的主题结构，图标是否有足够的辨识度。图标识别性可以分为两类，分别是含义识别和视觉识别。含义识别：是视觉语言是否可替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。视觉识别：图标的大小，颜色，线条的粗细，这些影响视觉识别的因素识别性是否高。8.2 规范性规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。视觉大小的一致性：在相同尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如一样尺寸大小的圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中适当调整，使得视觉大小达到统一；饱满度：常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加；相同规律：同一套图标必须是以同种风格呈现的，例如是否全部使用了圆角或直角的风格，圆角大小、绘制风格是否一致；细节统一：包括像素是否对齐、圆角、描边粗细是否统一的问题；8.3 统一性在绘制多个类型相同的图标时，我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中，会有很多种图标，但是图标的功能不一样，所表达的内容也不同。这时，图标一致性的意义就体现出来了，根据格式塔原理中的相似性原则：人们会将如元素彼此相似的东西感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素，则应在视觉上保持统一匹配。图标内容的统一会让用户明白相似的图标所代表的的功能也相同，而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重，边角的大小，配色方案，细节层次和设计元素在整个合集中是否是不变且一致的。8.4 呼吸感呼吸感的意思就是适当留白。不管是图标还是界面，适当的留白可以突出主体内容，让内容具备易看性。在图标的绘制过程中，我们应该注意图标元素之间的间距不宜过近，元素也不宜过多。图标是一个物体的简略缩影，目的是为了表达内容，让用户快速理解，太过复杂的细节会影响图标的识别速度。因此在图标的绘制过程中应该删除所有无法传达图标意义的元素，避免使图标变得太过复杂难以识别。8.5 品牌感品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。那么，该如何提升品牌感，打造属于自己App的独特风格呢？品牌基因为我们提供了一些线索，这是近年来非常流行的一种趋势。我们都知道图标在APP设计中的重要性，但是打开许多APP你会发现他们的图标设计都非常普通，似乎是在图标网站上下载的素材。虽然一些优秀的设计师在进行图标设计师加入一些诸如圆角、断线等设计语言，但是仍逃脱不了与其他APP设计雷同、毫无个性的通病，使得UI看上去普通、不精致，缺少产品气质。那么，该如何打造属于自己APP的独特风格呢？品牌基因为我们提供了一些线索。它是由平面设计中的VIS（视觉识别系统）引入的一种设计策略，通过对品牌形象进行延生设计形成一套完整的视觉符号。每一个APP都有其品牌形象，代表了与众不同的气质。接下来，我们就来学习如何利用品牌基因进行图标设计。9.1 提取品牌图形通常一个App的第一个tab是首页，是用户进入App后看到的第一个页面，最常见的图标设计是一个小房子的图形。首页是App中最重要的页面，承载了整个产品的核心功能，是用户浏览最多的地方，因此使用一个让人印象深刻的品牌图形作为“首页”图标是必要的，不但使App内外形成了视觉联系，同时也二次传递了品牌形象，加强了用户对App的良好印象。例如网易云音乐的首页标签就直接使用了它的品牌图形，其优点不言而喻。但是请注意，这种设计策略并不适合于所有的App，当第一个tab被赋予特定功能，就不可使用品牌图形，否则用户会难以理解。例如微信第一个tab是聊天列表，此时使用气泡就比品牌图形更加合适。还有另外一种情况。通常一个App的最后一个tab是个人中心，即“我的”。如果App的品牌图形是动物图形，也可以使用其整体或局部图形来作为「个人中心」的入口图标。9.2 提取品牌色彩色彩也是图标设计中重要的构成元素之一，合理协调的色彩搭配让用户在浏览页面时感觉舒服。从品牌形象中提取色彩作为图标设计的依据，可以给用户带来由内而外一致的视觉体验。在设计时提取品牌色彩可适当调整色彩的饱和度，明度，既可以将图形整体填充色彩（例如微信），也可以局部填充色彩，还可以填充为图标背景色，使图标之间形成色彩上的关联。直播应用Bigo Live的品牌色是青蓝色，在标签栏的图标设计上（选中态）将图形局部元素填充青蓝渐变色，活泼清爽的搭配带给用户轻快的感觉，与整体品牌调性高度一致。9.3 提取设计语言在VI设计中通常提取辅助图形作为设计元素，这在图标设计中同样适用，当所有的图标都具备了相同的设计元素，他们就构成了一套完整的视觉符号。例如飞猪的品牌图形就很特别，猪的头部轮廓是由大写字母F演变成的翅膀造型，因此可以看到“我的”小人图标的也使用了类似的轮廓，这样他们就形成了某种视觉联系。9.4 提取产品气质品牌形象决定了产品的气质，而产品的气质决定了吸引什么样的用户。就如当我们第一次看到一个人的时候，往往会根据他的外貌形象特征，产生一个大致的印象，这就是一个人的气质。APP也同样，例如传递传统手工艺人社交的「东家」，其产品流淌着古朴、温润、精致的人文气息，它将宋体汉字的笔画进行拆解组合，创造出具有东方韵味且极具形式感的图标设计。9.5 拆分品牌名称App标签栏图标最常见的形式是图形加文字的组合，由于文字本身就能传达最直接的含义，因此图形的识别性并不那么重要了，我们就可以在其视觉表现形式上赋予更多创意和个性。MONO是一款阅读类App，它的标签栏图标直接将品牌名称中的4个字母拆分成4个图形。虽然每个字母与其对应的功能模块本身并没有直接联系，但加上标签文字的辅助也不会造成阅读困难，而且产品本身的用户人群就是比较能接受新鲜事物的年轻人，因此这样的创意反而给App设计加分了。9.6 展开形象联想我们日常使用的众多App大多数都有着相同的功能模块：首页、发现、动态、我的等，因此也就出现了很多雷同的图标设计。比如“首页”是尖顶房子，“发现”是眼睛，“动态”是气泡，如果有差别也只是设计风格的差异，有的直角有的圆角，有的线性有的面形。这样的设计没有品牌归属感，试一下将这些图标单独拿出来就无法判断它是谁，它从哪儿来？优秀的设计师不仅要具备将图标绘制精美的能力，还要具备丰富的设计想象力，不拘泥于设计规范的条条框框，有时候打破规则才能设计出优秀的图标。“首页”除了小房子我们还可以想到什么？马蜂窝的做法就很巧妙，“首页”图标是“蜂巢”，而蜂巢是马蜂的房子，这样的设计与品牌形象紧密相连，简直完美！不过最新的改版好像已经改没了。总之，要想在绘制整套图标时建立统一风格，就要从外观和颜色上确立主风格，在局部寻求个性特征，将两者结合，并融合产品属性和符合用户定位，先在脑海中构思出清晰的概念，然后在稿纸上绘制草图，最后确立一个最佳方案上机完成，只有不断地思考和打磨才能创作出最佳的设计方案。写在最后图标设计是UI设计中非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户正确和友好的指引。建议每位UI设计师在平时做大量的练习尝试各种不同的风格，以满足不同的业务需求。OK，图标设计指南就分享到这里，希望对大家有所帮助。因为篇幅较长，几经修改，有细节不严谨的地方，欢迎斧正，感谢阅读。编辑于 2021-10-04 11:53UI设计师设计图标设计赞同 39添加评论分享喜欢收藏申请

图标设计详解（一）——图标初识 - 知乎

图标设计详解（一）——图标初识 - 知乎首发于9号自习室切换模式写文章登录/注册图标设计详解（一）——图标初识查无此人图标一直是UI设计中很重要的部分，工作中我们经常需要思考怎么做出好看、差异化的图标。图标为什么这么重要？图标怎么做的好看？怎么针对不同的产品做出图标的差异性？将最近自己研究的关于图标的理解以及工作中遇到的问题思考，梳理输出分享给大家，希望能对大家在工作中遇到的关于图标的问题有所帮助。图标作为一种视觉语言，广义上指具有指代意义的图形符号，具有高浓度并快捷传达信息、便于记忆的特性。常见的如，交通标志、男女卫生间的标志等等。而UI图标大致可以分成两大类：标志性图标及功能性图标。标志性图标，即手机桌面应用图标的启动入口，这里是用户接触到产品的第一印象，决定了用户的去留，同时也是品牌传播的重要渠道；另一个是功能图标，出现在app或网站中，用于功能性性引导用户进行各种操作的图像。相对说明的长文字来说，图标只需占用一个字符的位置就可以传递给用户操作信息。比如在个人中心页，我们经常看到的客服功能，用文案表示需要“联系客服”四个字（当然英文或其他语言可能更长），而用可以传达信息的图标代替只需要占据一个字符的位置。各个国家和地区都有自己的语言和文字，因此当某一应用在其他地区使用时需要进行本地适配。图标却不同，经过不同平台应用长时间的培养，很多图标已经能够被大多数用户快速识别，甚至成为国际通用的图标，比如放大镜图标意味着搜索，齿轮图标意味设置。图标的使用打破了语言的地域限制，在完全不用懂应用文字意思的前提下，也不妨碍图标意思的理解，以及应用的相应功能操作。比如，instagram上tab bar及主要操作都是直接使用图标表示并且没有文字备注，并不影响用户理解及操作。人类的左右脑分工是不同的，左脑主要从事逻辑思维，比如语言、数据、逻辑推理等；右脑主要从事形象思维，比如音乐、绘画、空间几何、想象等；而右脑处理图形图像的速度是左脑处理文字速度的60万倍。根据美国国家生物技术信息中心（National Center for Biotechnology Information）的数据显示，人类的平均注意力跨度已经从2000年的12秒下降到2013年的8秒。人类大脑对图形图像的记忆也远胜于对文字的记忆，人类会记住80%看过的东西，20%阅读过的内容和10%听过的东西。文字图像化，引导用户快速接收信息进行操作，减少用户的思考时间。好的一套图标能够从图标的独特性、象征性、记忆性、应用性、组合性、变化性上打动人心，从而激发人们点击欲望。同时，图标集的统一性，一致性也会使的整个应用给用户传递视觉感受是统一、愉悦的，提升整个应用的视觉体验。下图为马蜂窝推出V9改版视觉升级中的品类图标优化方案。如果要追溯图标的历史，可以追溯到史前时代。在当代由于图标高度浓缩信息、快速传达信息、便于记忆等优势，在其他方面的应用范围也极为广泛，比如国家的图标国徽，商品的品牌注册商标，app饮用的启动图标等等。关于GUI的图标史要从80年代第一台桌面比拟电脑施乐奥托（Xerox Alto）开始。1973年，Xerox的帕罗奥多研究中心（Xerox PARC）为了方便新用户快速理解与掌握，首度公开了第一台使用桌面比拟的电脑施乐奥托（Xerox Alto），它是最早使用图形用户界面（GUI）的电脑之一。后来安迪·贝托尔斯海姆设计出的SUN工作站；苹果公司的麦金塔电脑，最初都是参考了Xerox Alto的设计。可以看到当时的用户界面只有应用程序本身的显示图标及数据程序的启动图标。直到1981年数学家戴维·史密斯（David Smith）博士和艺术家诺尔姆·考克斯（Nor Cox）结合艺术和技术，由考克斯设计、史密斯发明了一套图标用于Alto的继承者Star的图形用户界面。此时对图标的定义是“计算机系统中数据或进程的象形表示，用来取代命令和菜单，作为计算机支持与最终用户对话的手段”。可以看到这套图标都是方形的线性图标，具备简单的外观和一致的设计风格。1983年史蒂夫·乔布斯推出了一款面向广泛商业用户的个人计算机，并以自己的女儿“Lisa”命名。当时的Lisa系统界面十分简陋，并没有给大众留下太深刻的印象。次年乔布斯雇佣了Susan Kare为苹果设计一套特有的图标和字体，应用在1984年发布的麦金塔电脑中。麦金塔的图形界面虽然不是第一个界面设计，但却定义了之后绝大多数图标的外形，比如用来放置删除文件的废纸篓，表示保存的磁盘，以及苹果键盘上的功能键「command」，这套图标不但个性而且经典，这也Susan Kare为什么会被称为图标设计之母。（没有物理感知的同学，建议配合B站up主“老师好我叫何同学”2020年11月发布的《80年代的电脑能做什么？》一起服用）。在这之后的图标演化，经历了微软的第一套电脑系统界面Windows 1.0的多色显示；走极简风格的ATARI TOS折叠式图标，这套图标的等距特点也成为电脑系统的标准之一；有四种颜色的AMIGA WORKBENCH用户定制化图标；GEOS的轮廓着色图标；APPLE GS/OS的“文件夹绘画“图标。这个阶段的图标外型没有太大，只是由于技术的不断更新使图标开始出现颜色。直到1989年，当时的史蒂夫·乔布斯已经离开了苹果并创立了NeXTSTEP，这时的NeXTSTEP图标开始出现阴影和高度，向我们展示了一种全新的图标设计方法。NeXTSTEP的图标也是第一个被认为拟态的图标，图标开始进入拟态时代。80年代末，图标已经由最初简单的线性图标演变出颜色，以及3个基本尺寸。基本的常用图标外形也被确定，比如文件、计算机、铅笔和垃圾桶。此时图标也开始进入拟物时代。WINDOWS 3.0时，微软请来了Susan Kare为他设计桌面图标，我们可以看到和之前的图标有很多相似之处。苹果的MACINTOSH SYSTEM 7.0也开始出现了灰色的阴影，这个时候的图标基本趋向雷同。Geoworks在相同中采用靛蓝色的边缘以区分。BeOS则使用出现与现在2.5d类似的设计风格。IRIX使用阴影将图标漂浮起来。苹果在RHAPSODY DR2的应用界面中使用等轴测图结合透明遮罩，以及新技术的支持，这版图标设计更加细腻、细节更加丰富。AMIGA OS 3.5则还是保持粗的像素颗粒感。90年代时期的图标都是现实主义的等轴测拟物化图标，但受限于技术此时的图标像素的质感还很强，图标使用投影增加空间感。到了2000年，技术的革新带来新的图标设计风格，这时的图标开始具有超高的抛光度、层次感、透明光泽、多阴影、模糊、柔化等等。这时候的苹果和Windows界面出现了我们熟悉的样子，图标类似照片的质感，使得图标不再只是单纯的符号。07年Windows的Windows AERO「Authentic（真实）、Energetic（动感）、Reflective（反射）及Open（开阔）」透明玻璃质感是这种轻快、精致、细腻“图标洛可可风格”的重要代表。现在依然有很多人喜欢这套闪闪发光的界面。到这时，图标还是指计算机数据或进程的象形表示。2007年，苹果发布第一代iPhone以及iOS系统，在iPhone 1代前，人们与手机的交互方式主要是键盘和手写笔，电容屏支持多点触控技术使用iPhone用户可以用手指直接与屏幕进行交互。iOS的操作界空间也相对更大，因此系统桌面依然延续了写实的图标风格，甚至可以更精致。（2009年，从iOS 3版本开始，苹果开始采用拟物化设计风格）Google在2007年年底才与HTC、LG、摩托罗拉和三星一同推出以Android为主要操作系统的手持设备联盟。为了协调不同厂商Google一开始采用开放的组件系统，使得各家厂商可以修改底层文件，应用各放异彩的同时也是使得Android手机应用界面设计也越来越碎片化，使得后期Google为了统一设计风格不得不推出基于物理世界的Material Design设计风格，当然这是后话。这时的Android手机界面也在追求极致的拟物化。2001年乔布斯提出电脑是数码生活的中枢，但从2007年苹果推出一代iPhone开始，由于手机的便携、快速、方便，手机的使用场景不断占据人类生活场景，从这个时候开始图标更多指的是移动端手机应用的启动图标和应用内部的功能性图标。这个时候界面都使用极致拟物化图标，此时的用户经过多年的使用，已经不需要通过与现实同样的物理视觉来解决所谓“学习成本”的问题。2010年微软为了打通多设备的联通，保证手机、电脑、平板多设备有一致的体验，发布了带有明显磁贴风格（又称Metro风格）的windows phone 7系统，图标开始变得扁平统一的白色面性图标，也就是扁平风格的开端。（没错扁平设计风格并不是苹果提出的）磁贴设计最适合的是触摸的交互方式，微软桌面系统也采用了移动端的设计语言，完全有悖于之前用户的操作习惯，Win8口碑大滑坡加上微软系统升级的骚操作，导致微软的Metro风格犹如昙花一现，并没有成为真正的流行。苹果紧接着发布的iOS7，与iOS6相比一改之前的极度拟物化，也并没有像windows phone 7绝对的白色和面性图标，而是在之前图标的基础上减少了底纹与质感，苹果尝试在拟物和扁平之间找到了平衡，这样的结果少不了Jonathan Ive的设计加持以及推动。因为风格的差异化太大，直到现在还有很多人在争论拟物风和扁平风的苹果那个更好看。由于扁平风格的持续流行，图标也延续着扁平风格，中间也偶尔有出现类似锤子手机的拟物风图标，引起整个设计圈一阵讨论，但整体趋势还是扁平风大行其道。2020年WWDC20苹果发布macOS Big Sur，这次苹果对设计进行了大幅度的修改，相较于之前的扁平风格以及不规则的外形，这次更新所有图标外形统一为圆角方形，靠近iOS系统。而整体质感则是在扁平的基础上增加些许质感。macOS Big Sur不止图标更新外形与iOS相似，很多交互方式也与iPad端靠近，比如三端都有的组件话系统。前面我们说到windows phone 7系统的目标是打通多设备的联通，保证手机端、电脑端、平板多设备的一致体验，而当时面对刚迁移手机端的用户来说，有点过于操之过急，但这一想法并不是天方夜谭。这次macOS Big Sur的视觉更新更像是为打通iPhone、ipad与MAC的整个苹果内部系统的基础设施建设。当时很多设计师觉得有点不伦不类，外形虽然统一，但很多图标却也丑的很别致，比如被吐槽最多的QuickTime Player。并纷纷晒出自己对苹果的Big Sur图标的Redesign。GUI的图标历史算来也有40多年。80年代以施乐奥托为开始，Susan Kare第一次明确经过设计的麦金塔电脑界面图标，明确了基础图标外形样式和简单的线性样式。90年代图标开始变成立体图标增加纹理、描边、模糊、层次越来越写实，但远远没有达到拟物的状态。2000年后，屏幕技术的发展，同时随着photoshop修图软件的出现，图标设计可以添加越来越多质感的，Windows、苹果图标拟物化出现，这时图标还是指的计算机数据或进程的象形。07年电容屏支持多点触控技术被乔布斯使用在iPhone一代，移动端开始越来越多占据我们的生活，iOS 3开始图标越来越拟物化。2010年人们身边充斥着各种电子设备，不再需要通过与物理感知一样的图标来理解背后的意义及交互方式，微软为了实现多设备一致的体验，推出Metro风格。iOS 7苹果设计师Jonathan Ive极力推动扁平图标的应用，当时充满争议。但之后极简、扁平、去除视觉噪音成为主流，扁平风格火了十年。而当时提出扁平风格的微软Windows 10 mobile 因为多端适配、7.5无法升级等问题，被用户诟病，2019年已经停止更新。2020年苹果Big Sur图标之前，扁平的图标减少视觉噪音方便用户快速识别等优点外，也限制着设计师的发挥，可以看到Dribbble上众多设计对于图标设计都有自己的尝试。图标的发展一直是技术、承载设备、设计师共同推动的结果，图标的发明是为了降低电子设备用户的理解成本，快速的传递信息，到现在无论如何发展信息传递依然是图标的核心。历史终于写完了，找资料找的头秃，尽～力～了～。如有出入，欢迎指正，peace&love。图标绘制是将语义元素转变为视觉元素的过程，以达到传递信息的目的。所以图标的建立，首先应该确定图标的隐喻，也就是型的确定。（因为所有图标都是在功能型图标基础上进行的设计变形或设计细节添加，因此之后文章除非特别说明，举例都会以功能型图标为主）图标按图像隐喻分类可分为实物图标、象形图标、表意图标、文字图标、创造图标、组合图标。实物性图标就是将真实的物品作为符号引导用户点击，一般用在表示新鲜的生鲜类应用，比如：如盒马生鲜，叮咚买菜。或具有品牌效应的电商类应用，比如：得物、识货。还有些没有办法符号化的物品，比如美团买药、聚美。象形图标是最常见的图标绘制方式，即通过对一个物理物体的再现或参照来表达意义，表示单词或短语的图像符号。GUI刚出现时，用户并不知道怎么进行操作，因此对绝大需要传递的信息，都尽量模范现实生活中的实际物体，比如：代表删除的垃圾桶，以及当时电子软盘表示保存。这类图标由于长时间的使用，如果改变外形可能误导用户，外形无法做过多的变化。表意图标是将没有具象物体、比较抽象的概念，在发展的过程中创作并成为一种约定俗成的图标用来表达某些含义或操作，比如点赞图标，设置图标，音符图标代表音乐，+号代表增加。有些词或操作没办法用任何图形进行表现，这时会使用相关的文字进行表现。文字本身就是一种演化而来的符号，比如返利。返利是最近才出现的名词，没有更好的图形可以进行表现，一般会使用“返”字作为视觉表现。另一种情况是在某些特定节日会使用文字宣传作为图标，比如双十一、618各大电商运营活动。创造类图标的设计和功能并没有直接关联，本身是不具备传递功能的含义，一般是伴随着业务的出现，用户在长时间使用过程中习惯熟悉图标传递的含义，有时会伴随文字一起出现，经典的比如苹果的command键、蓝牙图标，最近的小程序图标。组合图标指将前面几类任意组合后产出的新图标，用来表达更为复杂的意思或操作行为，比如添加新用户、微博的找人等等。以上是图标设计详解的第一篇——图标初始。当然图标还有很多课题可以研究，比如图标的大小、图标的设计属性、图标的原则、图标的设计流程以及关于图标可用测试等等，这些会在之后的更新中写到的，敬请期待。资料来源：图像学的简要历史UI设计师想做好图标设计？请问图标历史了解过吗？微软设计语言-磁铁设计风格（Fluent Design）主流界面设计语言的变革谷歌 vs 苹果，到底哪家的设计更好？学图标设计？这篇就够了编辑于 2021-06-24 14:49用户界面设计图标图标制作赞同 6添加评论分享喜欢收藏申请转载文章被以下专栏收录9号自习室勤学似春起之苗，不见其增，日

icon设计全面分析指南 - 知乎

icon设计全面分析指南 - 知乎首发于UI设计切换模式写文章登录/注册icon设计全面分析指南无感互联网UI设计中，icon是重要组成部分，相对于使用文字，icon表达会让效果更清晰，对于信息传播和视觉效果表达都有重要意义。icon分类图标应用广泛，单一从风格分类是无法做到全面了解的，广度和深度也达不到全面认识，概念也不清晰。针对这一问题，我以广度为横轴，将它分为功和设计风格两大类，逐个纵向挖深。功能分类按功能分类：交互性图标，装饰性图标和说明性图标。1.交互性图标具有双向信息传递能力，不仅可以向用户传递某种信息，引导帮助用户执行特定操作，同时也允许用户向程序传递控制信息，从功能重要程度来讲，它的重要性是最高的。比如：登陆注册按钮，开关按钮，数量按钮，点赞，转发分享等都属于交互性图标。2.装饰性图标主要为了提高页面设计性，加深个性化设计风格，与此同时，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。常见的比如：符合节日需求时，线上活动呼应，图标个性化。比如：页面升级，空页面，奖励，用户等级等都属于装饰性图标。3.说明性图标阐明信息图标类型，区分不同功能或内容的视觉标记；简单的说，就是对功能的解释说明。常见的比如：表现行业特性时，金刚区或个别功能区icon设计；面向不同用户群体时，选择风格设计，早教类APP与健康类APP对比就很明显。首页图标也都属于，以美团为例子，它结合了线性图标，渐变面形图标，将金刚区分为三部分，增强页面的层次感和识别度。设计风格分类按设计风格分类：面性图标，线性图标，扁平图标，拟物图标，2.5D图标和桌面应用图标1.面性图标使用范围最广，稳定性强，区分页面层次感更高。设计UI页面时，使用也要从页面层级关系和产品功能角度考虑具体运用。面性图标的分类也有很多，不仅仅只有常规的，还有多色，渐变，不透明叠加，插画，扁平投影等等。2.线性图标使用感更轻盈，精致度更高，简约风格页面使用最多，也是当下流行的风格之一。除了常见的纯色线状图标之外，还分双色或多色，多种粗细结合，缺口型，渐变，描边不透明叠加等等。3.扁平图标其实就是线+面，面+面。变现方式多样，拓展性强，更个性化，年轻化一些，相同，同样设计风格的icon，在更换颜色后就能体现和传达不一样的信息。4.拟物图标，2.5D图标和桌面应用图标图标绘制需要有一个从简单到复杂的是凡事要经历的过程。在布尔运算支撑下，绘制也分为三个主要原则：风格一致，大小一致，透视一致。紧扣三原则绘制，特殊情况判断后处理，就是一个规范化图标。画图标-绘制三步法：以信息为例子1.图标大小，运用辅助线帮助绘制，对齐像素格，保证导出图标边缘清晰2.长度，粗细，圆角，颜色统一，调整好即可3.布尔运算图标绘制的特殊处理：1.同一大小的图标，因为形状不同，视觉效果会不同，如下图，同样都是100px·100px的圆形和正方形，但从视觉上却上完全不同的，这时需要，抛去参考线束缚，使图标视觉上大小统一，根据图标删格系统绘制。2.图形叠加中心对齐时，视觉效果出现偏移，应该以视觉效果为主，强制对齐，反而会使页面效果重心偏移。运用场景与选择图标运用场景的选择一定是在设计风格确定后，进行选择使用的，不能把icon运用场景和设计风格下的图标概念混淆（你细品）。使用图标的前提一定是风格类型一致，判断风格一致的方法就是看图标设计风格分类和绘制原则。主要运用的场景分为5种：顶部导航栏，底部标签栏，金刚区，交互区，分类列表1.顶部导航栏UI页面顶部主要以轻便为主，不宜过重，图标使用也以简单简洁为主，不能太抢眼，起到便捷引导作用，准确表达，一般使用单图标，不结合文字。2.底部标签栏位于主页页面底部，利于用户页面切换，图标数量一般控制在3～5个为宜，采用图标结合文字的方式体现产品功能。3.金刚区之所以称之为金刚区，是因为它一般位于主页中部位置，在banner或搜索栏之下，是产品主要功能区的核心集中位置，为子板块做引流，用户流量40%～58%都是来自于金刚区，它占用首屏位置大概在22%～25%之间，采用图标结合文字的方式体现产品功能。4.分类列表一般都是瀑布流排列，宫格排列，色块排列，统一页面风格，准确表达，利用用户定位功能模块。5.交互功能区这就是交互性图标使用最多的地方，收藏，点赞，刷新，搜索等等。总结1.图标的使用同样需要前期思考：分析用户，功能信息，竞品分析和行业经验。（和个人中心设计原则是一样的思维模式）2. 图标设计需要在遵循原则的情况下进行个性化创作，与辨识度和适用性相结合，不断提升用户使用体验感和信息感知速度，准确传达信息。3.多分析思考，积累知识，提高自己对运用的敏感性，一起加油吧～相关推荐：发布于 2020-08-25 10:50用户界面设计视觉设计图标设计赞同 19添加评论分享喜欢收藏申请转载文章被以下专栏收录UI设计大家可以一起探讨，把问题说出来一起

设计师必看图标（icon）指南 | 人人都是产品经理

首页

培训课程

名师辅导课

产品经理入门实战班

90天B端产品实战班

AI重塑职场竞争力实战行动营

个人自学课

互联网运营能力进阶

业务产品经理能力进阶

电商产品经理从入门到进阶

企业内训课

数字化产品经理课

商业化产品实战课

数字化营销体系课

B端运营实战课

私域流量实战课

数据分析体系课

分类浏览

业界动态

27992篇文章

产品设计

18085篇文章

产品运营

14485篇文章

产品经理

9484篇文章

职场攻略

4968篇文章

营销推广

4494篇文章

交互体验

3734篇文章

分析评测

3254篇文章

创业学院

2119篇文章

用户研究

1756篇文章

数据分析

1722篇文章

原型设计

1420篇文章

活动讲座

问答

企业培训

摸鱼

快讯

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

登录人人都是产品经理即可获得以下权益

关注优质作者

收藏优质内容

查阅浏览足迹

免费发布作品

参与提问答疑

交流互动学习

立即登录

首次使用？

点我注册

设计师必看图标（icon）指南

见贤设计笔记

2022-01-25

6 评论

16729 浏览

71 收藏

27 分钟

释放双眼，带上耳机，听听看~！

00:00

在产品页面中，图标只是一个相对较小的设计元素，但是其重要性不可忽略，好的图标设计有助于在使用流程中从体验、美感等方面提升用户的好感度。本篇文章里，作者总结了如何设计出好图标的设计指南，一起来看一下。

一、图标的基本认识

图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号。对于UI而言，主要针对的就是狭义的概念，它是UI界面视觉组成的关键元素之一。我们通过图标看到的不仅仅是图标本身，而是它所代表的内在含义。

色彩 color、文字 Font、图标 icon、图形 shape、图片 image、空间 space，是我们做平面设计中非常重要的 6 个元素，而对于 UI 设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。

二、图标的历史

显然，图标不是由界面设计师发明的。作为一种交流的对象，它们有着悠久而多样的历史，根植于古代。它们出现在地图、标志、方案、手册和许多其他信息来源中。然而，随着新技术和图形化用户界面的出现，图标经历了新的转折进步。

从历史上看，施乐公司在20世纪70年代初的时候，在功劳中提到了第一个图形化用户界面的图标：图标是在一台名为Xerox Alto的机器上实现的，这台机器非常昂贵，并没有真正普及到广大的用户。然而，这只是一个漫长的故事的开始：1981年，Xerox Star（施乐之星）发布了，它被称为第一台将图标作为界面的一部分的消费类计算机。特别是，它应用了至今为止的文件夹和垃圾箱的图标。下面是图标从80年代。

三、图标的分类

1. 图标基于功能类型的分类

（1）表意图标（又称解释性图标）

表意符号是指原本不存在实物的符号，是在发展过程中创造的一种符号，用于表达某些特定的含义或操作行为。而且在发展过程中，这些符号逐渐继承了一些象形符号的特性，将符号本身作为「实物」并且不断演化。例如「箭头」从最初的「弓箭」已经逐步衍生为一种特定的表意符号。

（2）交互图标

具有双向信息传递能力，不仅可以向用户传递某种信息，引导帮助用户执行特定操作，同时也允许用户向程序传递控制信息，从功能重要程度来讲，它的重要性是最高的。比如：登陆注册按钮，开关按钮，数量按钮，点赞，转发分享等都属于交互性图标。

（3）装饰和娱乐用图标

通常是用来提升整个界面的美感，加深个性化设计风格，并不具备明显的功能性。这类图标迎合了目标受众的偏好与期望，具备有特定的风格的外观，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。装饰性图标通常呈现出季节性和周期性的特征。例如线上活动、用户等级、空页面等

（4）应用图标

不同数字产品在各个操作系统平台上的入口和品牌展示用的标识，它是这个数字产品的身份象征。在绝大多数的情况下，它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采用吉祥物和企业视觉识别色的组合。真正优秀的应用图标设计，其实是结合市场调研和品牌设计的组合，它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。

2. 基于表现形式分类

（1）象形图标

ios相当长一段时间流行 “Skeumorphic设计理念”，属于超写实设计。并且认为只要有可能，在应用上增加现实的、物理的纬度，与现实越相像，操作越相同，就越容易使用户理解运作模式，接受度就越高。例如日本鼎鼎有名的富士山图标，由此说明好的设计不仅美观度高，功能性同样十分重要，特别是与旅游相关的设计，需要让人跨越语言的障碍。

一个比较有意思的日本图标网站

（2）隐喻图标

icon 中的隐喻元素很重要，它可以让我们一看到这个 icon 就知道是什么意思。比如，一个房子代表首页，一个叉叉代表出错或关闭。当我缩小一个 icon 时，我都会保留隐喻元素，来保证 icon 仍然可以准确传达信息。

（3）工具图标

主要以行业类别为分类，使用范围广泛，大众或行内人士识别度高，且被长期使用。比如：建筑行业，医疗行业，化工行业等等。

（4）混合图标

也就是前三种的结合，目的在于达到不同的视觉效果和应用结构。前段时间追波很流行的MBE粗描边风格icon就是综合图标的产物，多表达设计师个人设计风格或适用某类设计感较强的软件。

3. 基于视觉特性的分类

（1）字符图标

字符图标“Glyph”一词是源自于排版领域，现在已经随着数字设计而逐步在数字设计领域扎根了，它源自于希腊语，含义为“雕刻”。在排版领域当中，符号图标通常是包含特定的含义、特定功能、可表意也可书写的类文字系统，它可以是字母，也可以是图形，有的时候甚至是两者的组合。

在这类图标设计中，比较典型的当属天气类图标了。从单个图标到组合图标，都能充分体现出来。

（2）扁平图标

扁平图标包含线性、面型、线+面，面+面，变现方式多样，拓展性强，更个性化，年轻化一些，相同，同样设计风格的icon，在更换颜色后就能体现和传达不一样的信息。

（3）拟物化图标

拟物化图标是扁平化图标的对立面，正如同当初拟物化图标设计师常说的，它就是“抄现实”，尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计，拟真是它的特点。拟物化图标这一设计趋势几乎是跟随着Macintosh的诞生和进化一步一步走过来，走到极致，然后从UI设计领域开始，被扁平化设计所替代。不过，拟物化图标现在依然广泛地运用在不同领域，尤其是游戏设计和游戏类产品的图标设计当中。2.5D图标和桌面应用图标。

四、图标的优势

1. 全球通用

Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样。很多图标已经能够被大多数用户快速识别，甚至成为国际通用的图标。例如Windows UI

2. 节约空间

一个图标能够表述清楚含义的时候，只需占用一个字符的位置就可以传递给用户操作信息。例如扫一扫、邮件发送成功，用文案表示需要3-4个字，英文或其它语言可能更长，而用图标代替只需要一个字符位置

支付宝右上角 + 表示更多功能，此时一个字符位置解释清楚其含义；微信下一个类似声波图标表示语音，直观易理解

3. 快速定位

进入碎片化时代和进入读图时代，几乎是相同的节奏。图片内容能在短时间内产生更大的影响力，研究表明，大脑处理图片内容的速度比文字内容快60000倍，人类大脑对图形图像的记忆也远胜于对文字的记忆。所以，在推广品牌时，图片内容可以说是一图胜千言。使用图标通过视觉引导帮助用户快速识别信息。

Tik Tok和ins没有任何文字说明情况下，我们就知道第5个标签就是个人中心

4. 可识别，易记忆

科学证明，在大脑中相对于其他感觉来说与视觉信息处理相关的脑区占统治地位，人脑对于图像的记忆远远高于文字。图标多采用几何图形，并以对称、一致的设计目标来进行设计，由于其高度浓缩的特性，图标具有更加简洁的特性，更加便于记忆。

五、图标的绘制流程

图标最底层逻辑：线性图标、面型图标、线+面型图标、面+面型图标、2.5D图标、拟物图标。网上五花八门的图标是在这些基础上进行视觉区分，而当我们设计图标时候需要思考：

产品视觉风格定位（行业领域）

图标具体应用的界面

产品面相的用户人群是怎样的？

先看一组不用风格的图标，由上面不同APP图标可以看出不同行业、不同场景、不同用户，图标的设计和表达方式是不一样的，所以设计前需要思考，你需要表达的设计思路和产品的定位。

1. 设计执行

（1）拆解关键词及关键词联想

将需求信息中的关键词进行拆解及发散，转化为生活中常见的事物，释放它所代表的内在含义。关键词的同义词、近义词、形状相关或相关联想的物体

例如说到荣誉，马上就能想到奖杯、奖状、金牌、皇冠等。然后通过这些词联想，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩做为产品图标的主要造型

（2）根据关键词联想输出图形

根据上一步拆解的词语或物体，通过简单基本形状转为生活中常见图形。常用的2中方法是用AI钢笔工具（sketch贝塞尔工具）或者布尔运算进行绘制

（3）根据场景输出

这里的场景可能是实际应用的场景，比如大众点评tab标签栏、功能区（品类区）、运营类图标等这些图标需要引导用户去点击，所以在视觉上更加丰富一些；而个人中心、分类区、详情页更多侧重功能上的引导，相对来说较简洁，属于二级使用场景，线型图标居多。

六、绘制中需要注意的点

我们常见各个图标文章分析应该注意十几点，而这些没有规律和逻辑难以记忆，一时记住了也容易忘记。这些总结其实是从Material Design或者iOS规范中得来的。认真研究这些细节，图标制作就不难了

1. 端点统一

图标端点分为直角和圆角，我们在设计过程中要统一图标端点，保持一致的设计语言

2. 角度统一

（1）拐角

相对于其他图形，人类的眼睛更容易识别圆角矩形而不是直角矩形，因为人在眼睛的生理构造上中央凹(fovea centralis），是视网膜中视觉最敏锐的区域)在处理圆形时最快，而处理矩形边缘则需要涉及大脑中更多的“神经影像工具”。所以，人眼处理圆角更容易，因为它们看起来比普通矩形更接近于圆。

圆角自身的圆形属性会给人圆润、可爱，更加安全、亲密的感觉。因此社交、娱乐、直播、美食等图标多会使用圆角图标。

直角则会给人一种尖锐、具有攻击性的感觉，图标整体细节更多，通常出现在金融等商务属性比较强的产品。比如：36氪、金融类产品等。

（2）倾斜角度统一

3. 内部空间比例统一

内部空间比例的不一致易导致图标视觉重点不统一。如下图左第二个图标重偏下，第四个图标重心偏上，右边是早期PP助手的标签栏图标，图标内部挖空面积占比率相同，整体视觉和谐统一。

4. 描边风格统一

在绘制描边图标时，要时刻注意图标的描边粗细是否统一。在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有：1px、1.5px、2px、3px，1.5的粗细对显示屏要求比较高（半个单位的路径会导致图标在最终显示时边缘模糊，不清晰）

细描边给人视觉感更加精致，粗描边相对更加粗犷，由于目前流行趋势的发展，常常也有粗描边和细描边结合的设计风格

5. 内边距

除了保持相同的视觉权重，图标的描线宽度也应该保持一致，达到像素级统一。元素之间的最小间距，应该大于或等于描边的宽度。

6. 安全边距

苹果、谷歌、IBM，国内的阿里Ant Design都出过相关的图标网格规范，这里以谷歌的Material System 图标网格来进行说明。在24*24px图标尺寸，上下左右安全边距是2px，关键形状的四个基本形状为圆形20*20px、正方形18*18px、纵向矩形和横向矩形20*16px。通过关键形状的规则统一图标大小及位置，达到视觉的平衡

（1）对齐像素点

清晰度（像素完美对齐）为了避免使图标失真，可以通过将X轴和Y轴坐标设置为整数来将图标定位在像素上。在使用软件AI或者sketch的时候绘制基础图形不要出现小数点和奇数，多用偶数

七、图标验证

我们了解了 icon 的基本知识，怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。检验标准也是基于我们绘制的标准，分别是：识别性，规范性、整体风格与品牌感。

1. 识别性（表意准确）

判断事物的价值在于它的用途是什么，图标的用途是帮助用户理解信息，所以表意准确（清晰准确的传达信息）就是图标最重要、最底层的价值，如果你设计的图标用户看不懂，即使视觉再美观也没有任何价值可言。

含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。常见的就标签栏指南针表示发现，房子表示首页等

视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。

花瓣和 V LIVE 标签栏没有文字说明，这时候其含义识别非常重要

2. 规范性

我们要保证图标在视觉大小的一致性，图标饱满度（正负形）、遵循同一种规律，细节统一性。这里的4点在前面绘制过程中已经写的非常详细了。

3. 整体风格

整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如腾讯动漫，它的性格就是偏卡通可爱的类型，那么的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。一个广告语：复杂世界里，一个就够了，整个APP从启动图标到整体调性都是简洁干净，克制的色彩运用传达产品调性。

4. 品牌感

品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。下面几款产品从产品名到启动图标设计高度融合。

八、图标可用性测试

图标可用性测试是基本规则是根据图标验证推导的

1. 识别度

用户是否能够理解图标的含义？

是否是用户熟悉的图标？

是否与其他图标含义冲突？

是否能通过5秒原则？

图标的可扩展性怎么样？

是否需要增加文字标签？

2. 设计是否统一

视觉语言是否统一？

图标的设计复杂程度是否统一？

整体设计是否协调、统一、视觉体系高度集中？

图标整体配色是否统一？

3. 品牌信息

图标是否独特性、能否传递品牌信息？

九、图标的交付

一般情况下有JPG、PNG、GIF、SVG四种交付格式（jpg比较少用），其中JPG、PNG、GIF为位图，受图片本身的分辨率大小限制，无法灵活的修改尺寸。而SVG为矢量格式，支撑无损缩放。

在没有SVG前因为要考虑到适配高清设备，需要切各种倍数的图标进行适配。不过现在的开发软件及插件都自带切多倍图的功能，比如蓝湖。另外交付方式是将SVG格式时，图标上传至类似iconfont的网站后，完成图标的交付。需要注意的是：

SVG不支持渐变颜色填充

SVG不支持描边，需要将描边转化为闭合图像

图标的大小相同时，需要在图标下方增加一个相同尺寸的透明方形，同图标一起导出上传

而iconfont对于图标制作要求严格，上传时需要注意查看自己的图标是否符合要求。

资料来源：

图像学的简要历史

主流界面设计语言的变革

《Icon Design Guide》

《Icon Utopia》

《the Ultimate Guide to an Interface Icon Set》

《svg图标库以及与icon font对比》

Icon Grids Keylines Demystified

本文由 @见贤原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

本文由 @见贤设计笔记原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

收藏已收藏{{ postmeta.bookmark }}

点赞已赞{{ postmeta.postlike }}

更多精彩内容，请关注人人都是产品经理微信公众号或下载App

2年初级图标指南

图标设计指南文章被收录于该专栏

共 14 篇文章15601 人已学习

见贤设计笔记

微信公众号【见贤设计笔记】

9篇作品

63079总阅读量

为你推荐

互联网三十而立，元宇宙洗牌接盘

02-282764 浏览

酒仙网启示录：垂直电商的出路，是戒掉做平台的野心

12-011201 浏览

从图文到短视频与直播，支付宝做内容之心依旧

11-092704 浏览

Axure教程-横向动态堆叠图（中继器）

05-233217 浏览

挑战美团？又一巨头入局本地生活

07-211565 浏览

评论请登录

King

从图标历史到分类很详细行业外的人也深有收获

最近

来自北京回复

见贤设计笔记

作者回复King

一起进步，加油

最近

来自广东回复

程某人

小小的图标的背后还有这么大的

最近

来自山东回复

三个年糕

还真的挺实用的，有时候不知道缺啥就找图标。这些小细节很重要，值得收藏

最近

来自北京回复

小豆腐

写得挺不错的，点赞收藏

最近

来自广东回复

李三万Elena

作者对于图标设计的类型和方法都非常详细全面，只想说受教了！

最近

来自广东回复

为你推荐

小红书闯入本地生活，决赛圈难进？

05-102513 浏览

药店论语——连锁药店销售额下降解决方向（商品、服务）

09-04835 浏览

Duolingo（多邻国）如何将用户从免费转化成付费模式

07-116554 浏览

快讯

UI 中的图标设计原则

限时开放企业版试用，支持企业资源库、权限管理等多种企业协作及管理能力申请试用

AI 绘画

产品

Pixso 设计

Pixso 白板

Pixso 原型

产品

Pixso 设计

Pixso 原型

Pixso 白板

资源社区

设计素材

优质设计作品免费获取

组件资源

大厂组件资源即调即用

插件广场

用插件扩展设计的无限可能

热门精选

Pixso抠图

设计技巧

专题活动

进行中

9999+

热门精选

资源社区

设计素材

组件资源

活动专栏

插件广场

会员

下载

帮助中心

企业服务

金融政企

互联网

查看客户案例

汽车制造

智能制造

智慧交通

物联网

客户案例

覆盖各个行业和领域

提高产设研团队生产效能

查看案例

企业咨询

企业版

私有化部署

向团队介绍

教育免费

加入用户交流群

支持

企业咨询

企业版

私有化部署

向团队介绍

教育免费

用户群交流

免费使用

进入工作台

万兴科技（300624.SZ）生态成员

UI 中的图标设计原则

在线使用Pixso

UI 中的图标设计原则

作为一名UI设计师需要会的基础操作是什么，那必定是进行图标设计

用Pixso，让设计效率飞起来

在用户界面中，图标绝对是不可或缺的元素。虽然绝大多数的图标都很小，甚至不被人注意到，但是它们帮助设计和用户解决了许多问题。作为一名UI设计师需要会的基础操作是什么，那必定是进行图标设计。而图标设计原则是一切基础中的基础，不但可以帮助设计师快速定位，还能让图标更具有生命力。

图标的定义及作用

图标是具有指代性的计算机图形，具有高度浓缩并快速传达信息和便于记忆的特点。图标的应用范围非常广泛，从各种软硬件到现实生活到处都可以看到各种图标的影子，可以说我们的生活离不开图标。

作为UI界面设计的关键部分，图标在UI交互设计中无处不在。一套成功的图标设计不仅需要质感精美、引人眼球，更重要的是具有良好的可用性。一般来讲，具有强烈质感的图标可以为网页增添亮点，给浏览者留下深刻的印象。

图标设计原则

对于应用型图标设计，原则有三个：可识别性、差异性、还有要使用栅格线。

•识别性：是图标设计的首要原则，是指设计的图标能准确地表达出所代表的隐喻，能让用户第一眼识别出它所代表的含义，从中获得相关信息。

•差异性：则是指不能让图标千篇一律，要突出产品核心同时具有新意。让用户瞬间抓住重心，给用户留下深刻的印象。

•栅格线：类似于练字用的格子，可让图标与系统保持和谐统一，更好地彼此匹配。

除了应用型图标设计，还有功能性图标设计。主要原则有：表意准确、轮廓清晰、一致性等。

•表意准确：如同字面意义，要把核心思想表达清楚。如果用户看到你的图标一脸懵，那么这个设计无疑是失败的。

•轮廓清晰：在设计图标时，最忌边角不分明，还有发虚的像素。用户用起来还以为自己眼睛花了，或者手机出了问题。

•一致性：当你的设计中需要设计多个图标时，那么这些图标一定要保持一致。如果每个图标的风格颜色各不相同，用户不但会眼花缭乱无法集中，还容易头脑负荷。

图标的分类

基于功能性图标来划分

•交互性图标：

具有双向信息传递能力。不仅可以向用户传递某种信息，引导帮助用户执行特定操作，同时也允许用户向程序传递控制信息。从功能重要程度来讲，它的重要性是最高的。例如：登陆注册按钮、开关按钮、数量按钮、点赞、转发分享等都属于交互性图标。

•装饰性图标：

主要为了提高页面设计性，加深个性化设计风格。同时，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。例如：页面升级、空页面、奖励、用户等级等都属于装饰性图标。

•说明性图标：

阐明信息图标类型，区分不同功能或内容的视觉标记。简单的说，就是对功能的解释说明。例如：表现行业特性时，金刚区或个别功能区icon设计。面向不同用户群体时，选择风格设计：早教类APP与健康类APP对比就很明显。目的是为了增强页面的层次感和识别度。

基于表现形式图标来划分

•象形图标：

象形图形是最基本、最典型的处理方式。图标与其所传达的含义有直接的、对应的关系。在表现名词性程序图标和功能语义时，采用象形图形是最直接有效的手段。例如表示日历、时间、天气等名词性程序的图标。

•隐喻图标：

两种不相关但却有着某种相似特质的事物用icon的方式链接起来，达到记忆和使用目的。例如：设置与工具、云端与云，购物与袋子、会员与钻石、皇冠等等。

•工具图标：

主要以行业类别为分类，使用范围广泛，大众或行内人士识别度高，且被长期使用。例如：建筑行业、医疗行业、化工行业等等。

•混合图标：

前三种图标的结合，目的在于达到不同的视觉效果和应用结构，多表达设计师个人设计风格或适用某类设计感较强的软件。

基于设计风格进行分类

•面性图标：

使用范围最广、稳定性强、区分页面层次感更高。设计UI页面时，要从页面层级关系和产品功能角度考虑具体运用。面性图标的分类也有很多，不仅仅只有常规的，还有多色、渐变、不透明叠加、插画、扁平投影等等。

•线性图标：

使用感更轻盈、精致度更高，简约风格页面使用最多，也是当下流行的风格之一。除了常见的纯色线状图标之外，还分双色或多色、多种粗细结合、缺口型、渐变、描边不透明叠加等等。

•扁平化图标：

扁平化图标设计是去掉多余的装饰效果，让“对象”本身作为核心被凸显出来。在设计元素上强调抽象、极简、符号化。

•拟物化图标：

拟物化图标设计是追求模拟现实物品的外形和质感，通过叠加高光、纹理、材质、阴影等图层样式对事物进行再现。

•2.5D图标：

2.5D图标设计是区别于拟物化图标和扁平化图标之间的一种图标设计风格，没有拟物化那么复杂，又比扁平化更立体。

图标的分类远不止如此，但是万变不离其宗，都是“线性、面性、线面结合”再结合透明度、渐变、颜色叠加、质感、多维空间等表达方式设计出来的。我们除了需要掌握这些内容之外，更需要日积月累的练习和思考，从量到质的变化，根据不同的场景设计出最合适的图标。

在进行UI图标设计的时候，可以根据自己喜欢的造型参照物去进行分析。先抓取到参照物的关键节点，几何绘制出来一个相似的基本图形，这样就形成了一个骨架。接下来我们要做的就是要让图标有血有肉，内容逐渐丰富起来，最终通过不停地修改，成为我们心中最完美的图标造型。

设计分享

几种常见的iOS导航模式，看这篇文章就够了！

不同的iOS导航模式可以用于不同的应用场景，开发者需要根据应用程序的需求，选择合适的导航模式

了解更多

设计分享

Sketch是什么软件？软件介绍及使用技巧！

Sketch软件提供了许多有用的功能，如矢量工具、网格、样式库、切片和导出等

了解更多

设计分享

AI绘画软件哪个好？7大软件效果比拼！

不同的AI绘画软件有着不同的功能和特点，选择软件需要从自己的需求出发

了解更多

设计分享

7款AI绘画生成软件推荐，从入门级到专业级！

随着人工智能技术的不断发展，越来越多的AI绘画生成软件涌现出来

了解更多

文章目录

图标的定义及作用

图标设计原则

图标的分类

解决方案

UI设计

UX设计

原型设计

私有化部署

客户案例

探索

设计工具

设计技巧

图标设计 - 知乎

图标设计 - 知乎首页知乎知学堂发现等你来答切换模式登录/注册图标设计图标是人机交互界面的重要组成部分，是介于用户与计算机等交互界面之间的独特载体，具有显著的视觉化和形象化特征。建立起计算机世界与真实世界的一种隐喻或映射关系。而图标设计是设计图像符号的过程，以此来表…查看全部内容关注话题管理分享百科讨论精华视频等待回答详细内容图标是人机交互界面的重要组成部分，是介于用户与计算机等交互界面之间的独特载体，具有显著的视觉化和形象化特征。建立起计算机世界与真实世界的一种隐喻或映射关系。而图标设计是设计图像符号的过程，以此来表现或具象或抽象的主题、实体或动作。图标所传达的含义并不是视觉化的形象本身，而是其背后可以链接而至的文件、网页、程序等，因此，它承载着向用户传递交互信息的任务，促使用户正确认知从而实现正确的操作。功能型分类启动图标启动图标是手机或者电脑的主界面和启动窗口的图标，是在主屏幕和主菜单窗口展现应用的方式。例如在手机和电脑上的各类应用程序图标，就是启动图标。操作工具图标操作工具图标所指示的内容是各种交互功能、步骤等，操作工具图标可以帮助用户实现一些确定的通用操作，如返回、编辑、删除、分享等等。例如各类应用软件的工具栏中的图标均属于操作工具。导航图标导航图标会指引用户如何进入应用软件或系统的不同区域。通常，这类图标都隐含一个链接，当你点击后，它能打开进入另一个子界面。例如点击下面的“模板”就会链接到各类具体模板列表。状态图标这类图标显示系统中某些特定变量的状态，用于表达各种应用提醒的图标。例如电池、音量、等图标。风格型分类立体型图标扁平型图标iPhone的立体风图标和扁平风图标在图标风格上大致可以分为扁平风格和立体风格。扁平风格的图标通常较为简约，而立体风格通常写实逼真。图标的写实程度会影响用户对图标的关注度和图标的信息传达。越是立体、写实、细节饱满的图标越是能引起用户的注意，激发用户的使用兴趣；但同时，越是立体写实的图标识别效率越低，在传递信息方面效率越是低下。反之，越是简洁的图标，越容易让人识别和记忆，也越是能高效地传达信息。因此，图标设计需要结合图标的放置环境与功能，正确的选择风格。作用提高识别效率图标具有图形化和直观性的特点，图标设计时一般选用与表达概念和实际内容想接近的图案，因此用户只需要通过图标就可以感受或者想象图标所代表的内容，完成认知识别。例如电脑界面中用现实生活中的文件夹的形式表示系统“文件夹”的方式，简单直观增强用户的记忆视觉形象是记忆的中心，相比较于文字，图标在用户脑海中是以图形、文字、视觉、语言等多种形式复合呈现的，因此图标更容易被用户记忆。而且，图标比文字简单易懂，可以被不同层次、年龄段和不同国籍的用户接受。提高界面通用程度常见的软件、界面通常会制作多国语言版本，在开发的过程中，如果大量使用文字，则需要大量时间做界面文字的翻译工作，而不恰当的翻译甚至会引起误解。而图标则不需要翻译，可以被不同国家的用户理解，增强界面的通用性。但是由于不同生活和文化背景的用户对相同的事物理解程度不同，图标有时也会引起歧义。因此图标设计时需要慎重决策。简化交互步骤现如今，用户只需要通过点击目标图像，而不是输入文本语言命令，即可完成交互任务。美化界面布局不管是手机界面还是电脑界面，为了要保留大部分屏幕给任务操作区域，而图标则成了控制界面排版需要的工具，保证布局美观。设计原则易识别性原则图标设计的目的不仅仅是为了美观，更重要的是要让图标能够被户正确、简单、快捷地认识，以便用户可以明确做出正确选择判断，以及明白接下来的操作步骤。例如这个音乐界面的三个图标，可以让用户轻易辨别出哪一个是“播放”按钮，哪一个是“前一首”按钮和“后一首”按钮因此在图标设计完成后，可以通过“脱离情境的测试（out-of-context testing）”和“情境之中的测试（in-context testing）”来判断图标是否符合易识别性原则。首先将图标单独呈现给用户，让用户和判断该图标是否可以看懂图标表达的涵义，并推断出这个图标所代表的功能；可以将图标放置于真实完整的界面之中呈现给用户，看用户是否会忽视图标，或是需要花较长的时间去区分它们。一致性原则图标设计的一致性是指所设计的图标要保证其表现手法（色彩、表现形态、结构特征、光源、阴影、透视等多方面）、形态（平面还是立体）、整体风格以及图标大小要形成一致。如果图标之间缺乏一致性，则可能视觉混乱，使用户难以快速辨别图标。而整体性强的图标则会创造视觉和谐感，也使图标看起来更加有品质，易于理解，甚至可以带动用户对品牌的共鸣。差异性原则图标设计过程中既要保证图标易读易懂易识别，还需要保证图标的创造性原则。这就要求图标与图标之间保持差异性。而差异性具体是指两个方面：一是不同软件、不同背景中的图标之间需要保持一定的差异，不同软件和应用背景中的图标需要拥有自己的风格；另一方面，在同一套图标设计中，要尽量放大图标之间的差异性，减弱图标之间的相似性。隐喻合理原则图标设计中的隐喻关系是指用户是怎么通过一个图标去联想其所代表的功能，例如当用户看见一个音符，这个音符就会映射到用户头脑，由音符联想到音乐，进而可以判断这个图标所代表的功能是听歌。构建图标与现实世界适当合理的隐喻关系，要准确了解用户需要，通过概括、归纳、想象建立事物之间的联系然后针对这些联系来寻找所设计图标在现实世界中的隐喻对象。同时要注意，约定俗成的隐喻元素尽量不要轻易改变，诸如相机（照相机）、音符（音乐）、对话框或信封（短信）等这些已经被人们广泛认可的隐喻。工具绘制图标的工具可以分为两类：一类是图标编辑器，常用的图标编辑器有：Iconworkshop，IconXP，Microangelo Studio等。另一类是借助第三方辅助软件，常用的有：矢量绘图工具Illustrator，Freehand，Coreldraw；点阵绘图工具Photoshop，Frieworks，Canvas，Lightwave，Cinema4d等。最后提醒：图标本身是一种有版权的产品，在未获得图标的授权下，不得使用他人或者公司已有图标或标志呀。参考文献刘伟元. 用户界面中的图标设计原则[J]. 包装工程, 2013(8):94-97.张振中. 图形化用户界面图标设计原则[J]. 设计艺术研究, 2015(1):45-50.毛珊珊. 手机图形界面的图标设计风格研究[D]. 北京服装学院, 2012.https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/百科摘录1UI图标设计的心得分享下的内容摘录freedomer.yu我思故我在图标设计是UI设计师在进行移动端界面设计的重点内容。拟物化图标与实物相近，形象逼真。而扁平化图标清晰明了，直观且容易辨识。各种图标设计都有不同的规范和设计原则。因为最近一直在进行UI图标的设计，今天小雨就献丑跟大家分享一下UI图标设计的一些心得体会。知乎小知摘录于 2020-04-24浏览量5514 万讨论量2.5 万帮助中心知乎隐私保护指引申请开通机构号联系我们举报中心涉未成年举报网络谣言举报涉企侵权举报更多关于知乎下载知乎知乎招聘知乎指南知乎协议更多京 ICP 证 110745 号 · 京 ICP 备 13052560 号 - 1 · 京公网安备 11010802020088 号 · 京网文[2022]2674-081 号 · 药品医疗器械网络信息服务备案（京）网药械信息备字（2022）第00334号 · 广播电视节目制作经营许可证:（京）字第06591号 · 服务热线：400-919-0001 · Investor Relations · © 2024 知乎北京智者天下科技有限公司版权所有 · 违法和不良信息举报：010-82716601 · 举报邮箱：jubao@zhihu.

6大章节！图标设计基础知识全方位入门指南 - 优设网 - 学设计上优设

菜单

优设网uisdc.com

优设网 - 学设计上优设

首页

设计文章

热门频道

设计导航

培训课程

教程与灵感

设计服务

联系优设

关于我们

文章投稿

铁粉权益

字体授权

意见反馈

广告商务

尊享

加入【优设领航者俱乐部】

尊享全年高价值服务加速收益

大咖指引职场加薪大咖领航新机会新收入AIGC实战加速受益大厂AIGC实战经验分享优质链接人脉链接企业/达人/设友线下链接流量赋能名利双收1000W+流量助力影响力提升

加入领航者俱乐部

领取更多高价值实用特权

投稿

搜索

您还未登录

登录后即可体验更多功能

立即登录

文章收藏资源下载提问答疑我要投稿

6大章节！图标设计基础知识全方位入门指南

2022/02/07

推荐：大漠飞鹰CYSJ阅读 6.7w 评论有奖阅读本文需 15 分钟

收藏 400 点赞 83

UI设计图标图标设计

本文收录于专题

图标设计

共收录39篇

1如何绘制功能性图标？来看资深设计师的全面总结！功能图标23D图标越来越流行，UI设计领域要变天了？3好图标的秘密！顶尖设计师分享的6个图标设计优化指南（上）图标优化

查看本专题

首页设计文章 UI 详情

前言

做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。不同位置的图标在界面中所起到的作用不同、风格也不同、其设计思路更是有所区别，例如金刚区、分类、标签栏、服务工具等。

用图标准确的表达出实际含义，仅仅学其「形」是不够的，需要对图标有较为全面、系统的认识，了解图标的相关概念、正确的绘制方法及处理好一系列的细节，本篇文章将介绍图标设计的具体方法及要点，帮你规避掉一些常见的问题，让图标设计有理有据。

本期大纲

图标的定义

常见的图标风格

性格与气质

设计规范与流程

常见问题及注意事项

图标资源

总结

图标的定义

1. 什么是图标？

图标是一种具有高度概括性的图形化标识，在界面中与文案相互支撑、搭配使用，隐晦或直白的表达内容的具体含义、属性特征、形象气质等丰富的视觉信息。

从概念上来讲，图标可分为广义、狭义两种，广义指的是现实世界中的图形符号、且有明确指向的含义，而狭义的图标指的设备界面中的符号，这些设备泛指承载互联网产品的载体，如手机、电脑、iPad...等。在 UI 设计中主要具是针对狭义的概念。

图标设计是一门学问，在我们的认知中，通常将图标理解为某个概念的抽象图形，通过设计清晰易懂的图形传达出比文字更高效率的信息，同时提升界面的美观程度。想要将图标设计的更加出色，则需要频繁练习、不断试错、持续探究并尝试新的风格，所以很值得我们花费大量的时间去钻研练习。

2. 图标的基本特征

一个界面是由文字、图标、几何图形、图片（音频、视频）组成，从 UI 设计师的角度，相对来说，其他三种元素大多运用到的是排版技巧，而图标则是需要绘制、创作的元素，在没有图标的情况下，纯文字也可以代替，可为什么贵还要费力费时的设计图标呢？原因主要有两点：

首先，图标作为一种图形符号的存在，跟文字的复杂程度相比，在识别效率上有着先天的优势，因文字需根据语种、长短的不同，所占用的界面空间资源就不同，在文字较多的情况下，大大减低了用户浏览速度及信息传达的效率，固图标将文字信息进行了浓缩。好的图标不仅易于识别、效率更高，且让界面更加简洁，所以我们常见的图文结合界面，绝大多数都是图标在上、文字在下，或者图标在左、文字在右，这些设计足以说明图标视觉传达的优先级高于文字。

其次，不同风格、样式的图标能让界面看起来更美观，提高用户的视觉舒适度。设想一下，如果界面没有任何图标的点缀，即便用户也能使用，但看多来多少都有些枯燥无味，全部用文字来理解内容还容易引起视觉疲劳。

常见的图标风格

1. 扁平风格

扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义，并通过不同的色彩体现出不同的视觉效果，最常见配色有以下几种：

单色：简洁、清晰视觉效果，常见于基础功能图标。例如：B端功能入口，移动端个人中心、二/三级页面的工具栏等，也有很多app的金刚区利用底色块衬托反白的图标。

双色：是很常见的功能性图标，至少由两个以上的元素组成，在单色的基础上加以色彩点缀，让本身就不是很突出的元素不再单调，如果融入品牌色，能提升整个界面品牌调性，适用场景跟单色图标相比则范围更广。

多色：至少由三种或以上的形状、颜色组合而成，常用于金刚区、产品分类列表、定制化菜单等。

渐变：渐变色的图标显得较年轻化，可以是单元素的渐变或多元素的渐变组合，能映射出一种活泼、热烈的氛围。例如：视频、直播等娱乐类型的APP，或车载UI等。

不透明度：调整图标中某个元素的不透明度，可在不变换色系的情况下丰富配色细节，还能与底色融合的更加细腻，解决多色渐变视觉跳跃的问题。

另外，在 UI 界面中，扁平化风格图标使用最多的当属线性、面性、线面结合这三种类型。

线性

线性图标主要是通过线条描边勾勒出来的图形，在界面中的尺寸普遍偏小，其线条不能过于复杂，否则将会影响辨识度，看似不多的简单线条搭配不同的色彩，则有很大的调整空间。

面性

面性图标主要通过剪影的形式来制作抽象的形体，相比线性图标则面积更大、视觉层级更高且更有体积感。通过不同色彩填充、切割手法塑造不同的设计感，以达到多种视觉表现的效果。

线面结合

线面结合的图标既有线段或轮廓、又有填充的色块，相比纯线/面性单一样式的图标则细节更加丰富，如果把控到位，会有更好的视觉效果及信息传达的效率，也不失趣味性。

2. 拟物化风格

拟物风格的图标主要通过细节和光影、根据现实世界中的物品塑形打造出图形立体效果，非常考验设计师的造型绘制、技法表现能力。这种风格的图标有着极强的代入感，能让用户快速领会图标所传达出的意图及气质。

因为拟物化图标信息元素的高复杂度及突出的视觉效果非常抢眼，在页面中频繁出现会成为干扰其他信息的存在，游戏类应用中使用的非常普遍（不过多赘述）。在其他类型的应用中，大部分出现在营销类型的界面，例如专题页、成就榜、会员中心等。

3. 轻质感风格

跟拟物化图标相比，轻质感就不会有太多复杂的元素，主要通过各种色彩渐变、发光、投影等图层样式体现出非常柔和的立体感，整体风格偏年轻化，给人轻盈、简洁及精致的感觉。在设计过程中，请使用干净且和谐的配色，主要使用在界面较大区域的位置。

4. 磨砂玻璃风格

不仅仅是页面背景有毛玻璃风格，图标的毛玻璃风格也很出彩，主要通过背景模糊、叠加、剪切图层来实现（网上很多教程）。轻量渐变搭配毛玻璃的朦胧感，可以体现出图标的质感与神秘感。

实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 >

除上述这几种风格的图标之外，还有例如 2.5D、3D、像素风、新拟态...等，但在 UI 设计中并不常用，就不一一举例说明了。

性格与气质

1. 性格走向（描边/拐角）

力量型：粗线条、直角拐点，给人一种力量、狂野的感觉，常用于体育、健身、机械类型的产品；

可爱型：粗线条、圆角设计，看起来活泼可爱，给人舒适、饱满的感觉，在儿童、教育类产品中很常见；

严谨型：细线条、直角拐点，看起来工整、严谨，中规中矩，适合政府、法律类型的产品；

精致型：细线条、圆润的拐角，柔和、干净、纤细且精致的感觉，很适合极简风格的设计，在艺术、金融、珠宝等奢华类产品中比较常见。

2. 动态效果

如果想要突出金刚区、工具列表中的某个功能入口，将图标设计成动态效果，既能保持整体图标风格的统一、又能单独突出功能的重要性，起到强调的作用，用来吸引用户的注意力，引导用户操作，提升其点击率。切记动效图标不能过多，当什么都突出了等于什么都没有突出。

其次，在年轻化、娱乐类型的产品 Tab 栏中的图标切换时，加入动态效果，可起到画龙点睛的作用，还能通过动效表达出不同的情绪，降低切换时的枯燥感，好的 Tab 动效能传达出整个产品的气质。

超全面！大厂都在用的 Tab Bar 图标动效设计类型总结Tab bar 作为整个 APP 的第一触点，给用户传递的理念及信息在整个 APP 中具有不可替代的重要性。阅读文章 >

最后，如果有类似运营或短期内的活动，需要吸引用户注意但又不适合固定在界面中的某个位置，这时可以设计一个动态图标悬浮在设备某个位置（注意用户体验及交互原则），既不过多的占用页面资源，还能同时显示在多个界面，一举多得。

动效图标：@墨染 ART 授权

设计规范与流程

遵循图标设计规范有利于设计师之间的合作及接下来的设计，以及产品整体图标风格的统一性，起到约束的作用，即便在更换设计师的情况下，也不至于出现较大的问题。在制定合理的设计规范前需要先了解图标到底有哪些规范，应从哪些方面入手，以便接下来的图标设计顺利进行。

1. 网格尺寸比例

为了保持图标元素的平衡，尺寸大小需要保持一致，通常我们会建立基础网格尺寸进行图标的绘制，常见的网格尺寸有 16、24、36、48、64、128、512、1024，这些网格尺寸并非固定，也会根据设计中的特殊尺寸而变化。

一个图标系统包括网格尺寸和图标元素两部分，设定好网格尺寸后，就需要用 keyline 来约束图标形状的长、宽比例了。最终设计的图标大小并不是跟随网格尺寸，而是根据不同的形状占比受制于图标 keyline，最终形成统一的视觉大小。

从上图中可以看出，相同尺寸的图标在真实的视觉中相差很大，这就好比一个 100 像素的圆形、跟 100 像素的方形相比，站在逻辑角度，大小是相同的，但在视觉上，一定是方形显得更大。所以我们常说的图标大小相同，并非真实尺寸，而是视觉感受。

2. 图标 keyline

为保持图标视觉上的一致性和平衡感，需要先绘制 keyline 用来指导、规范图标设计。keyline 由圆形、正方形、长方形-横、长方形-竖、三角形和对角线组成，网格的大小需保持 4 的倍数，便于不同尺寸的图标都能适配，可使用 24*24px 的网格尺寸为基准，其他尺寸的图标可通过增加倍数以此类推，如 48*48px、72*72px......

下图是以 24px 尺寸的网格参考基准示例（出血为 2px）：

3. 确定图标风格

根据产品属性及目标用户并结合应用场景，找到最符合自身产品性格、气质的图标设计风格，例如健身应用属力量、粗犷类型，圆角、曲线适合女性产品等，在前面的「性格与气质」中有举例说明。

4. 图标绘制

经过图标风格的确定，图标细节便是接下来绘制过程的核心部分，对线性图标来说，注重的是线条的粗心，而面性图标则注重各小图形之间的距离，所以在绘制时，需要保持线条、间距的统一，方便后期的图标更新迭代。

线性描边粗细

我们以 iOS@2x 为基准（避免@1x 的 3px 描边变成 1.5px，小数点），可适配最 2px、3px、4px 最常用的描边粗细，4px 视觉较重，用于优先级较高区域的功能性图标，2px 看起来会显得更加精致，在设计中，还需根据产品的行业属性及调性来确定描边的粗细，并统一起来。

面性正负形间距

面性图标需要确保每个单独的形状之间有足够的间距，以 24px 大小的形状为例，其间距不能小于 1px，以此类推，虽然未规定上限，但间距也不宜太大，否则无法相互组合关联，以实际视觉的舒适度为准。

5. 创意提取

根据行业类型及风格进行创意设计，如线性统一断点、融入品牌基因、单个元素倾斜、节日氛围烘托、修饰元素等，为图标塑造灵魂或传递更多信息而进行的二次创作。

如何强化图标设计的品牌基因？我总结了12个方法！随着互联网产品的不断发展，产品设计越来越成熟多样，而同质化的设计也变得越来越严重。阅读文章 >

常见问题及注意事项

1. 识别性

图标存在的意义，主要是为了快速传递信息，不能让其成了无用的装饰品。随着互联网的普及、时间的积累，人们对一些线上图标信息的隐喻已根深蒂固，早就形成了惯性思维，所以我们设计的图标必须要符合用户的认知，能让用户快速理解，即便出现个别特殊情况，也要用文字清楚的标注说明，否则一旦让用户产生疑惑，图标就起了负面作用，在很大程度上影响使用体验。符合认知的图标能让用户下意识的理解且接近心理预期，减少学习成本，提升使用效率。

2. 简洁美观

图标是将现实世界中的事件/事务用抽象的图形表现出来，如果过于追求完美而设计的太复杂，还不如直接上图片来的快，所以不能过于展现真实物品的细节，最终设计出正确而不失真的图标尤为重要，这样既能用于传递信息，又便于用户快速且清晰感知。

3. 视觉对齐

为确保视觉平衡，异形元素在使用系统自动对齐后，会有一定的偏差，需手动微调进行视觉对齐。

为什么你的图标看着不舒服？如何打造视觉平衡：正确的尺寸+视觉对齐+完美的圆角修饰。阅读文章 >

4. 保持一致

针对大型项目，要想整个家族的图标更加和谐，保持相同的样式及设计原则着实不易，尤其是在多人完成设计的情况下，事先有一个清晰的设计原则和规范是必不可少的。图标都有着对应的视觉重量，例如描边粗细、填充模式、繁简程度等属性，需要做的就是控制好这些关键因素，让整体看起来视觉重量相同且能相互关联组合到一起，保持所有图标的一致性。

5. 最小间隙

单个图标的各元素之间要有呼吸感，需要适当的留白，如果描边过大，整个条看起来感觉像糊成一团或臃肿不堪，如果存在类似问题，可通过减小描边值或降低图标的复杂程度来解决。

6. 使用 2 的倍数

以偶数为单位的设计便于数据的计算（2 的倍数），例如正负形间距、描边值等，在 iOS@2x 设计下，@1x 也不会出现小数点。在移动端设计中，最小的图标为 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的数值，因此，可灵活的等比缩放。

7. 延展性

即便做好了前面的一切，图标设计工作也并未完成，需要做的是持续测试图标的可用性，做好后续的完善与优化，没有最好、只有更好，以确保上线后的效果和后续的迭代。

图标资源库

阿里巴巴矢量图标库： https://www.iconfont.cn/ ，90%以上常见的矢量图标下载；

飞书官方图标库： https://iconpark.oceanengine.com/official ，海量资源可在线修改，调整描边、填充、单/双/多色、端点后下载 SVG 格式图标。

虽然上述图标资源基本能满足我们的日常设计所需，但仅仅只能是作为参考而已，一味的图方便、投机取巧只会毁了自己的动手、创新能力。

结语

图标设计是一个非常庞大的版块，且有很多个分支，例如：金刚区、标签栏、应用图标...等，每个分支都有自己的一套设计法则，我们需要在不断的学习与创新中获得更多经验。一篇文章不足以道出图标设计的精髓，但可以在不断沉淀、相互探讨、持续的学习中一起进步。

下篇「图片」文章再见。

欢迎关注作者微信公众号：「能量眼球」

大漠飞鹰CYSJ

文章 55

人气 152.7w

UI设计师

+关注作者

收藏 400 点赞 83

复制本文链接

文章为作者独立观点不代表优设网立场，未经允许不得转载。

继续阅读本文相关话题

UI设计图标图标设计

全部AIGCUI网页平面手绘电商交互产品下载神器职场学AIAI导航

大漠飞鹰CYSJ

152.7w人气

55文章

+关注

查看主页

1 用超多案例，帮你掌握设计师必知的希克定律2 用超多案例，帮你掌握设计师必知的奥卡姆剃刀原则

本文3套知识9图

1/98 个实用动效网站推荐，提升设计效率小秘诀！ AE动效1/243D 图标设计！24 组 Midjourney 礼物图标案例大赏！ 3D图标1/9Bento UI Style！苹果发布会便当风格设计精选合集 Bento box

文章目录

你即将学会 B端的知识掌握表格设计，就掌握 B 端设计的半壁江山！（5000字完整版）10.7w 人阅读上一篇你即将学会产品设计的知识陌陌改版案例！一个产品设计的完整推导流程是怎样的？5.2w 人阅读下一篇

发评论！每天赢奖品

点击登录后，在评论区留言，系统会随机派送奖品

2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助联系我们

本期奖品

优设私房课无门槛优惠券

已累计诞生 492 位幸运星

查看获奖名单

发表评论

已发布2条

以上留言仅代表用户个人观点，不代表优设立场

评论就这些咯，让大家也知道你的独特见解

立即评论

阅读相关文章

土拨鼠

2020/03/06阅读 3.2w

为什么你的图标看着不舒服？

图标虽小，但作用却不容忽视，如何才能设计出让人感觉舒服的图标？本文教你从这 3 个角度出发，打造完美视觉平衡的图标设计。

UI图标 12分钟阅读

黑马青年

2021/04/14阅读 4.9w

图标设计

如何强化图标设计的品牌基因？我总结了12个方法！

同质化的设计也变得越来越严重，如何定制化设计拉开差异化是设计师不断探索的方向。那么如何将品牌融入到产品设计中呢？

品牌基因品牌设计 8分钟阅读

2019/07/08阅读 8.3w

超全面！大厂都在用的 Tab Bar 图标动效设计类型总结

相信很多人都会留意到手机QQ 切换底部标签栏时有趣的动画效果，Tab bar 作为整个 APP 的第一触点，该如何做好它的动效设计，有哪些动效设计类型和组合方式？本文腾讯...

IDfor动效设计 7分钟阅读

黑马青年

2022/05/05阅读 2.0w

用户体验

10个产品细节剖析，看看大厂是如何做设计的！

UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。

UI设计UX设计 7分钟阅读

陈子木

2023/06/26阅读 2.6w

高手总结！UI 界面底部弹出框设计指南

本文详细总结了底部弹出框控件的设计原则和常见的问题，并且结合实际案例梳理了设计过程中的注意事项。

UI控件UI设计 8分钟阅读

优设推荐官精选热门话题App设计文章 277视觉设计文章 268酷站文章 641求职面试文章 204

学AIAI导航

取消

最新趋势入站必看设计入门进阶提升热门资源Midjourney会上瘾的AI绘画工具AI智能绘画让AI助你一臂之力300个AI工具实用AI智能神器大全Blender称心如意的3D设计法宝Figma令设计师爱不释手HMI设计指南车载设计教科书直播间设计生意都在直播间啦Stable Diffusion最强开源AI绘画工具优设热榜每日必读的行业消息教你做字库每个公司都可有字库设计服务一站式数字创意服务平台求职面试为你用心整理的技巧B端设计开始探索B端设计3D设计技巧与工具全揭秘520个必看设计网站精选全球设计站点9图！入站必刷优设重磅设计知识频道AI自学网专业全面的AI平台热门产品揭秘60秒学1个热门产品亮点免费图库高质量的免费可商用图片私单报价谢绝帮个忙优设年度榜单全年好内容一网打尽每日一问你的问题这里有答案自学就上优优网优设旗下自学网站优设主编人气好文设计风向标设计师书单2023年设计书籍推荐最新免费字体最值得收藏的频道活动大赛这个奖杯等你来拿推荐！设计专题相见恨晚的宝藏专题设计软件自学免费自学就上优优网200篇自学文章设计自学有关的一切经验设计师禁忌不可抄袭！注重版权平面设计入门指南和经验技巧配色技巧看完这里成高手Behance学设计离不开的网站设计神器推荐！超人气分类作品集包装请重视你的敲门砖IP设计人人都想做IP设计方法论开始加速成长吧设计心理学助你做更好的设计灵感及审美提升让创意如万斛泉源设计模型你离总监又近了一步掌握设计流程重要的事情说3遍设计规范条条框框的大学问改版设计实战案例和方法大揭秘设计趋势不落窠臼之法设计评审教你应对设计评审述职报告工作总结是一门学问设计思维成长从转变思维开始职业晋升方法加薪晋级看这里AI绘画课优设爆款课程零基础3D角色建模完整建模全流程Blender 3D建模课快速掌握3D建模优设课堂火什么看这里AIGC创意视觉班优设顶尖名师亲授UI设计实战班全能UI必修设计课程3D高阶提升大师班涨薪必备技能AIGC干货AI的热门资源都在这优设标题黑全网下载高达590W次配色神器不用为配色发愁9G素材大礼包优优教程网倾情整理配色导航人气很高的配色导航175款国潮插画笔刷PS与iPad都能使用作品集封面帮你掌握作品集封面设计免费字体导航全是可商用的字体设计师下载频道今年这里会好好运营样机素材高品质样机素材Similarsites大名鼎鼎的找相似网站短视频短视频资源神器设计插件设计师必备法宝年度AIGC工具推荐超级创作者觉醒继续阅读

为什么你的图标看着不舒服？

5000+干货！从4个方面掌握图标设计的基础知识 - 优设网 - 学设计上优设

菜单

优设网uisdc.com

优设网 - 学设计上优设

首页

设计文章

热门频道

设计导航

培训课程

教程与灵感

设计服务

联系优设

关于我们

文章投稿

铁粉权益

字体授权

意见反馈

广告商务

尊享

加入【优设领航者俱乐部】

尊享全年高价值服务加速收益

加入领航者俱乐部

领取更多高价值实用特权

投稿

搜索

您还未登录

登录后即可体验更多功能

立即登录

文章收藏资源下载提问答疑我要投稿

5000+干货！从4个方面掌握图标设计的基础知识

2022/01/14

推荐：阅读 5.9w 评论有奖阅读本文需 16 分钟

收藏 526 点赞 114

ICON UI设计图标设计设计规范

本文收录于专题

图标设计

共收录39篇

13D图标越来越流行，UI设计领域要变天了？215年图标设计经验，总结出1套专业流程和8个注意事项设计流程3超过200万个高质量的图标素材免费下载，还可以自定义配色和大小！图标素材

查看本专题

首页设计文章图标设计详情

热评

Loic

这篇文章也太牛了...说真的图标设计看这一篇就够了，受益匪浅收藏了，细节和案例都很好。服了

Hi，小伙伴们，Q 什伍最近花了两周时间，整理了这篇关于图标设计的文章解析，分享给大家。

图标是 UI 视觉体系中最基础的部分，它在 UI 设计师的日常工作中应用非常广泛。一个好图标已经足够让设计师呈现他的价值。了解清楚图标的设计分类，设计应用，正确的设计方法，才能将图标设计稳稳的拿捏，提升自己。关于图标设计的文章网上已经有很多。他们也是通过无数的实践和理解将设计知识总结出来给大家。但读文章仅限于“读”，更多是需要自己补充总结再写出来，完善自己的设计体系。这篇文章主要讲一下图标的设计要点和设计方法，帮助“入门级设计师”能更规范地上手图标设计。

本文主要围绕四个方面进行讲解：

图标的设计分类

1. 图标类型

从微观角度来看，图标的主要组成元素包括线、面、颜色、文字等，元素可以组合的常见图标类型共分为线性、面性、线面结合、文字四种。

线性图标

主要是通过元素“线“去延伸，基于线的粗细大小、端点类型、圆角、描边、颜色等基础属性塑造成型。常用于调性简洁的产品设计，如移动端的标题栏、页面的次要功能设计；B 端后台业务类产品。细分有“单色、多色、渐变色、透明度/叠加、断点”五种类型。

面性图标

相比较线性图标应用场景更加丰富，视觉表现力更强、更突出，常用于主要功能图标，细分“单色、多色、渐变色、透明度/叠加”四种类型。

线面图标

线和面相结合而成的一种类型图标，这种图标的比较难驾驭，一般产品的主要功能设计都会比较克制。市面上这种类型图标的应用比较少。这种图标的设计也是非常考验设计师的设计功底，细分“单色、多色、渐变色、透明度/叠加”四种类型。

文字图标

通过文字表达图标语义的一种设计类型。常用语学习类，工具类和语义特殊难表达的功能。

2. 图标风格

可以基于图标类型，通过设计技法、软件等创新设计出不同风格的图标

毛玻璃效果

通过元素叠加背景虚化的方式形成的玻璃模糊质感，毛玻璃风格图标层次丰富、通透感强。

Just a moment...

a moment...Enable JavaScript and cookies to conti

ICON设计法则之菱形法则 | 人人都是产品经理

首页

培训课程

名师辅导课

产品经理入门实战班

90天B端产品实战班

AI重塑职场竞争力实战行动营

个人自学课

互联网运营能力进阶

业务产品经理能力进阶

电商产品经理从入门到进阶

企业内训课

数字化产品经理课

商业化产品实战课

数字化营销体系课

B端运营实战课

私域流量实战课

数据分析体系课

分类浏览

业界动态

27992篇文章

产品设计

18085篇文章

产品运营

14485篇文章

产品经理

9484篇文章

职场攻略

4968篇文章

营销推广

4494篇文章

交互体验

3734篇文章

分析评测

3254篇文章

创业学院

2119篇文章

用户研究

1756篇文章

数据分析

1722篇文章

原型设计

1420篇文章

活动讲座

问答

企业培训

摸鱼

快讯

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

登录人人都是产品经理即可获得以下权益

关注优质作者

收藏优质内容

查阅浏览足迹

免费发布作品

参与提问答疑

交流互动学习

立即登录

首次使用？

点我注册

ICON设计法则之菱形法则

亮king

2019-01-31

1 评论

9678 浏览

79 收藏

13 分钟

释放双眼，带上耳机，听听看~！

00:00

本文将从语意、层级、设计形式、风格、一致性、范围来对Icon设计法则进行详细地介绍，希望能够帮助到有需要的小伙伴。

网络上有很多关于Icon设计的文章，一些文章从部分维度切入讲述Icon的设计理念，但大部分缺乏整体性。所以我尝试把自己的思考方式结合其他人的设计理念整理了一个完整的Icon设计法则，通过简单易懂的描述语言，并且结合设计案例呈现出来，希望能够对大家有所帮助。

文章使用的案例只代表个人观点，并不代表相关产品。本文重点讲述Icon设计思维，关于Icon的具体定义以及具体的制作过程就不再赘述，网络上有很多相关文章都有讲述。

从不同维度对Icon设计进行解析，整理一整套Icon的设计法则。每一个产品中都有不同类型的Icon，产品通过Icon可以快速的向用户传递语意，通过独特的设计语言让用户形成对于产品的认知心智。Icon的重要性就不言而喻了。

ICON的设计法则-菱形设计法则，主要包括语意、层级、设计形式、风格、一致性、范围。

而其他的设计思考也是这个设计法则的变体，中心思想没有发生变化。通过对以上设计思考点的聚合，来设计能够传递Icon语意，并且能够清晰展现产品结构和信息层级的Icon系统，通过差异化的设计形式展现产品设计的独特风格，让具有一致性的设计语言传递信息，和用户形成共鸣。

层级

第一层级Icon；

第二级别Icon；

第三层级Icon。

第一层级的Icon一般指首页的井字入口Icon，让用户快速获取入口信息，完成对产品流量的分流，让用户快速完成自己的任务。

这种类型的Icon是级别最高的，无论是面积、形式感、视觉冲击力都应该是最突出的。

这种高层级的Icon可以简单通过一下三种方法表现：

拟物化的设计方式增加视觉重心和吸引力；

通过细节的增加呈现Icon设计的复杂形式感；

采用冲击力强的色彩对比，抓住用户的关注点；

除此之外具体的思考过程，后文也会详细讲述。

下图分别是“自如” “每日优鲜” “大众点评”的首页入口Icon，分别采用了拟物化设计，细节添加，色彩对比的设计方法。

第二级Icon归纳为导航类型的Icon，引导用户操作产品，完成用户的任务，同时传递品牌特色。

这种Icon类似真实街道中的指向标。第二层级的Icon不需要做的视觉重点非常重，能够让用户认知到，并且了解Icon传递的信息，在操作行为上产生预期就可以。

通常的设计样式是线型Icon或者是面型Icon。下图分别是“自如” “每日优鲜” “大众点评”的二级Icon系统。

第三类Icon是语意型Icon，主要是向用户传递信息，烘托信息氛围，并且引导用户浏览信息。

这种类型的Icon视觉相对较轻，且不可点击，具体的设计思考在后续的内容展开。

下图分别是“自如” “每日优鲜” “大众点评”的三级Icon系统：

以上三级的划分并不是说Icon只有这几种类型，这样划分是从功能和视觉上进行区分便于设计同学理解，当然在具体的设计过程中也可以对Icon进行更细化的区分，最主要根据具体的需求去定义Icon的层级，然后再采用对应层级的设计语言。

语意

Icon背后的语意(Icon的特性归纳）；

Icon的可识别性(Icon的特点表现)。

Icon的重要意义是抓住用户能够通过图像式的语言快速获取产品信息。

所以在Icon的设计之前，需要思考Icon背后传递的文字语意，理解语意，构建对于语意的多维拆解（比如沙发是由靠背、两个扶手、四条腿构成，重心要稳，和床有哪些区别等等）。

同时还需要思考Icon图形化之后的可识别性，基于对用户认知的了解，归纳Icon设计中需要具体表达的几个关键特点，迎合用户的认知心里。

帮助用户快速的获取Icon想要传递的信息，如果不能快速的获取，反而增加了用户获取信息的成本，那就本末倒置，削弱了用户的使用体验。

例：下图是“大众点评”二级Icon设计的语意表现思考方法。

设计形式

外形；

表达方式；

色彩组合；

Icon特色。

外形是Icon 的基本形态，不同的形态传递不同的视觉感受，构建不同的心智。同时Icon的外形决定了内部元素的设计。

Icon的表达方式主要两种，分别是线型Icon，面型Icon。线型Icon形式抽象、简洁，便于用户识别，用户认知成本较低，缺点是Icon容易极简，造成了似是而非，可识别性降低。面性Icon相对线型Icon视觉重心更突出，便于用户聚焦，设计表现形式会更丰富，缺点是可能会过于复杂，造成信息层级混乱，增加了用户的认知成本。

色彩组合，就是Icon中的色彩语言，在设计Icon的过程中通常包括单色系的Icon和色彩组合系列的Icon。通过不同颜色的组合传递产品的品牌形象和产品特质，在设计Icon的过程中，尤其是导航Icon的过程中不建议使用超过两种颜色的Icon，这样容易使用户视觉疲劳。

Icon特色是Icon在设计过程中的细节，这些细节是体现Icon自身精致的部分，同时也会影响用户对于产品和品牌的认知联系。影响产品的感性认知触达用户内心。

例：下图以“大众点评”中的“拍视频”icon做举例说明。

风格

品牌理念；

产品特色；

视觉特色。

品牌理念是是指产品背后的定义和想要传递的价值。通过简介的符号、文字传递给用户的认知、理解、印象、感受。通过塑造品牌理念的塑造，和用户在感性层面形成共鸣。

融入品牌基因的Icon系统具有更好的辨识性和认同感。这需要设计师和业务团队一起沟通产品，深入理解业务，总结出关键词语表达品牌，最终和业务团队达成统一共识。

产品特色指产品在同行业中的定位差异，核型竞争力。通过简洁的视觉语言进行表现。通常的产品特色体现在业务范围、用户群体，使用场景，产品功能等。在这四个维度中总结归纳成可落地的具体的表达关键词，进一步具象化。

视觉特色指在竞品分析中，总结得到在视觉层面其他产品中可以借鉴的感性共性和自己产品定位差异性的结合。通过可借鉴的共性传递行业的特点，而差异化的视觉表现可突出自己产品的特色和竞争力。

例：继续以“拍视频”Icon为例子进一步解释说明。

一致性

一致性的综合表现在圆角、透明度、线条粗细、间距、颜色、层级、渐变、特色细节。

Icon的一致性有利于降低用户的认知成本，便于品牌传递，而Icon的非一致性会增加用户的跳出感，降低用户对于产品专业度的认可。通常情况下可以通过以上8个维度进行分析和提炼。前七个维度大家比较好理解。

重点解释一下第八个维度“特色细节”，特色细节是设计师通过对于产品和业务的理解主观加入的一些关键性视觉表现的点，增加产品一致性的基因，可能是断线，尖角，原点等等标志性元素。

例：下图通过对“大众点评”Icon做拆解进一步从六个维度说明Icon系统的一致性（并不是说每一个icon的设计必须包含八个维度）

范围

视觉范围和热区范围

随着Sketch的普及，更多的设计师开始采用一倍的设计画布输出设计方案，但在设计的过程中需要注意视觉面积和物理面积，两个Icon的物理尺寸大小是一样的，视觉感性的面积偶尔会变化。所以需要在设计完Icon之后，对Icon进行排列，进行视觉对比，发现视觉的不一致性。

热区范围是代码定义的用户可操作的交互面积，视觉是感知不到的。热区范围的确定有利于开发工程师和设计师达成视觉方案的一致。避免后期由于大家对于方案设计、开发理解的不同，增加后续沟通的成本。通常情况下会出现的问题就是：

界面开发的还原度低；

热区范围过小，用户无法点击；

Icon的热区范围不一致。

总结

在设计的过程中，Icon的样式可以借鉴，但要根据自己的产品做形式上的调整，具体可以通过上述谈到的几个维度作为切入点调整Icon。

同时在设计的过程中避免无穷的细化，因为有些细节用户根本不会观察到，这样做只能是设计师的自嗨。

设计师容易漏掉的是热区范围的确定，尽管Ios平台和Android平台都有对于Icon范围的定义，但针对产品的icon热区范围调整还是要有设计师自己的想法。这样才能增加Icon设计的思考价值，也更符合产品自身的特色。

作者：亮king，高级设计师，微信公众号：体验设计说

本文由 @亮kingking 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

收藏已收藏{{ postmeta.bookmark }}

点赞已赞{{ postmeta.postlike }}

更多精彩内容，请关注人人都是产品经理微信公众号或下载App

2年icon设计中级

亮king

贝壳资深体验设计师公众号:体验设计说

7篇作品

48117总阅读量

为你推荐

一条视频创收200W，但UP主难做内容付费

12-262474 浏览

回顾2022，展望2023，关于写作、工作、学习和生活的计划

02-038778 浏览

针对 0-1 新产品的可用性测试方法：The Wizard of Oz Test！

10-23689 浏览

在线音频江湖：内容大战、场景之争、AI博弈

03-234454 浏览

手把手教你做客服产品——（四）体量阶段判判断

03-243745 浏览

评论请登录

Wpositive

666

最近

来自北京回复

为你推荐

重启天涯直播：最高观看不到1000人，情怀难抵现实，关键是重启后怎么办？

05-302563 浏览

刚刚！公众号能修改图片了！

08-164913 浏览

限时秒杀 | 详细实例设计

04-275895 浏览

快讯

Follow

tokenpocket下载官方app下载|icon的设计理念

tokenpocket下载官方app下载|icon的设计理念

ICON 图标设计规范与原则 - 知乎

设计师必看的图标（icon）设计指南 - 知乎

图标设计详解（一）——图标初识 - 知乎

icon设计全面分析指南 - 知乎

设计师必看图标（icon）指南 | 人人都是产品经理

UI 中的图标设计原则

图标设计 - 知乎

6大章节！图标设计基础知识全方位入门指南 - 优设网 - 学设计上优设

5000+干货！从4个方面掌握图标设计的基础知识 - 优设网 - 学设计上优设

Just a moment...

ICON设计法则之菱形法则 | 人人都是产品经理

最近的新闻

您可能喜欢的文章

tokenpocket钱包app官网|屎币发展历史

比特派官网公告最新版下载|iconfont图标

比特派硬钱包怎么看真假

比特派要实名吗怎么弄

比特派怎么一键买卖视频

比特派怎么转账到支付宝

比特派上的美金怎么提现