Bitpie最新版app|行业icon是什么意思

百度文库

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设计大家可以一起探讨，把问题说出来一起

logo和icon有什么详细的区别？ - 知乎

logo和icon有什么详细的区别？ - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册平面设计logo和icon有什么详细的区别？关注者15被浏览59,710关注问题​写回答​邀请回答​好问题 1​添加评论​分享​3 个回答默认排序知乎用户Mem0K1​ 关注logo是身份识别，icon是功能识别编辑于 2017-05-02 13:24​赞同 24​​添加评论​分享​收藏​喜欢收起​知乎用户​所有的图标都叫icon,但不是所有的图标都是logologo是一种有特定标识意义的图标,比如说公司的标识,比如说产品的标识，

icon指一个图标，通常是一类文件类型的图标。

logo指一个徽标，通常是一个组织或一个团队或一个网站的标志。虽然大致上都是一个图，但是要表现和表达的东西就完全不是一回事了，LOGO的这个深度和意义要更大一些，一个icon就简单体现出最浅表的意思就够了，比如搜索是放大镜 ，收藏是五角星⭐️，喜欢是爱心❤️等等……发布于 2017-03-10 17:03​赞同 4​​添加评论​分享​收藏​喜欢收起​​

UI设计-Icon基础知识（一） - 知乎

UI设计-Icon基础知识（一） - 知乎首发于设计切换模式写文章登录/注册UI设计-Icon基础知识（一）渔夫​招聘亚马逊运营，欢迎滴滴我只是一个搬运工。。。。。。ICON 的定义 提到 ICON 明确的定义，搜索结果告诉我们，ICON 指有明确含义的图形视觉语言。这告诉我们它的首要目标就是代替文字，用图形化的语言来传达信息。但是这个定义会让我们容易与 LOGO 相混淆，那如何区分 LOGO 和 ICON 呢？他们虽然都是图形化的语言，但是 ICON 重在展示功能，它是功能识别图标，而 LOGO 主要传达的是身份信息属于身份识别图标。应用场景在日常生活中 ICON 的应用应该是非常广泛的，我们随时可以在各个地方看到 ICON 的存在，例如我们熟知的界面设计中，还有日常生活的指示牌上等等，我们可以把这些场景归为三类，图形界面，产品表面和日常交通指示。图形界面，就是我们最熟悉的桌面图标、手机应用图标、APP界面图标等等...产品表面，常见的电器开关按钮、易碎品标识、USB接口图标等。日常交通指示图标包括：地铁交通指示标、卫生间图标、安全出口…想必这些大家应该都很熟悉，在日常生活中我们接触到的 ICON 比比皆是。界面图标界面图标的发展风格可以归纳为从拟物图标过渡到2.5D图标再到扁平图标，到现在的微扁平，微拟物的发展过程。拟物图标由于人们都是通过以往的认知来理解新事物，所以基于这一点，当时应用界面必然要采用拟物风格，以便于人们的理解和操作。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代，2.5D 图标就是在拟物图标和扁平图标中的一个过渡风格。扁平图标2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。扁平图标风格发展到后期也随之带来了一些问题，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。微扁平、轻拟物从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。界面中的图标分类界面中的图标可以分为功能性图标和产品图标两类。产品图标可以体现整个产品的特性和风格，有时通过产品图标我们可以直观的感受到这个产品的主要功能。功能性图标则向我们传达了一定的含义，它代替文字可以让我们看到图标快速反应图标所对应的功能。这次我们主要来分析一下功能性图标。功能图标风格在界面中最常见的功能图标按样式一般分为线性图标和面性图标两大类，在线性和面性图标两类的基础上根据不同设计技法又区分出了更多的分类。线性图标面性图标线性图标线性图标通过线来塑造轮廓。在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。另外苹果iOS11系统倾向于使用剪影图标，所以线性图标风格使用会相对减少。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。线性图标根据样式还可以分为：双色线性图标、线性填充图标、线性渐变图标。面性图标面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。功能性图标位置功能性图标一般在界面中应用于标签栏，导航栏以及金刚区。1. 标签栏标签栏是移动应用中最普遍、最常用的导航模式，也被我们称为 Tab 栏，一般图标有3-5个，应用于信息之间的跳转，提供页面的切换、功能入口以及界面导航的功能。其目的意义在于指示当前页面所处的位置。2. 导航栏导航栏我们称它为 Navigation Bar ，和标签栏本质上其实相似，但是展现形式有很大区别。导航栏一般处于页面的顶部，在使用数量和形式上更加灵活。3. 金刚区金刚区一般位于首图 Banner 之下的，属于页面的核心功能区域，多以宫格的形式排列展现的图标，一般情况一屏5-10个，主要负责着业务导流和功能选择的作用。ICON 中的品牌感传递当我们掌握了图标的基本知识，那么如何设计非常有特色的图标，设计符合产品定位的图标呢，这时候我们需要引入品牌设计的理念。通常意义的品牌包括了理念、视觉、行为三个部分，而我们这里提到的品牌只是视觉表现层面的。品牌基因是一个图形符号，在界面设计中，我们需要将这些基因、灵感可视化，提取出一个或者多个视觉符号传达给用户。怎样在图标中加入品牌感，可以归纳为四个方法：吸取品牌色、提取品牌元素、吉祥物和应用品牌图形。1. 吸取品牌色每个应用都应该有自己独特的品牌色，我们可以直接提取品牌色作为图标设计视觉元素，使用户加深对品牌色的感知，像“闲鱼”Tab 图标使用了品牌色——黄色和黑色。Keep 应用的图标也提取了品牌色——蓝紫色来作为图标的颜色，和品牌传达的感受是一致的。2. 提取品牌元素除了颜色之外，我们还可以抓取品牌元素特征来运用在图标中，例如优酷的图标，除了采用了颜色基因之外，还在 logo 上提取了一个叠层的效果，这样使得整套图标风格十分统一，传达的品牌基调也是十分一致的。Google的图标也是提取了 logo 上的颜色，并且把 Google 的特色融入了其他图标中，一次次加深用户对品牌的认知度。3. 运用吉祥物现在很多品牌都有人们熟知的吉祥物形象，那么在“我”中，美团外卖和站酷都打破了用人物缩影图标的形象来作为 tab 栏图标，而是运用自己的吉祥物的形象，做出了自己产品的独有特色。4. 品牌图形品牌图形的运用，通过对logo或品牌元素提取特定形状的提取来运用在图标上，例如网易云音乐和花瓣的图标就是将 logo 图形直接作为图标运用，网易云的图标不仅提取了品牌图形，而且其余图标也将品牌图形的圆润感运用其中。ICON 的评判标准我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。我们可以从四个方面来检验，分别是：识别性，规范性、整体风格与品牌感。1. 识别性图标就是帮助用户理解信息，所以识别性是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑，识别性可以分为两类，分别是含义识别和视觉识别。含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。2. 规范性规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。a. 视觉大小的一致性：我们在同等尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如同等大小圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中调整适当的距离，使得视觉大小达到统一。b. 饱满度：如何判断图标是否饱满呢？常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加。c. 同种规律：同一套图标必定是以同种风格呈现的，那么我们检验时可以看下自己的图标是否是遵循了同一种规律，如：是否全部使用了圆角或直角的风格，绘制风格是否一致。d. 细节统一：细节问题包括像素是否对齐、圆角、描边粗细是否统一的细节都需要我们在绘制时注意。3. 整体风格整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如一个针对儿童教学类的应用，它的性格就是偏卡通可爱的类型，那么我们的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。4. 品牌感品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。总结在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户情绪和设计感，并且给用户正确和友好的指引，怎样把图标设计做到更好，这就需要我们在平时设计的基础上进行深度的思考，希望我的这篇梳理可以给大家带来帮助。如有遗漏，欢迎大家补充。作者：许了了原文地址：https://www.zcool.com.cn/article/ZODMxNTM2.html编辑于 2019-02-12 15:11设计​赞同 43​​添加评论​分享​喜欢​收藏​申请转载​文章被以下专栏收

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

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

首页

培训课程

名师辅导课

产品经理入门实战班

90天B端产品实战班

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

查看更多

个人自学课

互联网运营能力进阶

业务产品经理能力进阶

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

查看更多

企业内训课

数字化产品经理课

商业化产品实战课

数字化营销体系课

B端运营实战课

私域流量实战课

数据分析体系课

查看更多

分类浏览

业界动态

28001篇文章

产品设计

18087篇文章

产品运营

14490篇文章

产品经理

9484篇文章

职场攻略

4968篇文章

营销推广

4495篇文章

交互体验

3734篇文章

分析评测

3254篇文章

创业学院

2119篇文章

用户研究

1756篇文章

数据分析

1724篇文章

原型设计

1422篇文章

活动讲座

问答

企业培训

摸鱼

快讯

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

{{ userInfo.member ? '查看权益' : '开通会员' }}

发布

注册 | 登录

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

关注优质作者

收藏优质内容

查阅浏览足迹

免费发布作品

参与提问答疑

交流互动学习

立即登录

首次使用？

点我注册

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

见贤设计笔记

2022-01-25

6 评论

16752 浏览

71 收藏

27 分钟

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

00:00

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 篇文章15604 人已学习

见贤设计笔记

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

9篇作品

63163总阅读量

为你推荐

让Threads沦为昙花一现，Remini靠“炒冷饭”登顶美榜？

07-155807 浏览

判断需求优先级的新视角！

09-181502 浏览

用正确姿势确定产品关键角色，资源投入更高效

11-222436 浏览

女网红靠GPT-4交1000+男友，聊天按分钟收费，一周收入50万

05-154422 浏览

心理学在设计应用：创造人性化的用户体验

05-295452 浏览

评论

评论请登录

King

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

最近

来自北京 回复

见贤设计笔记

作者 回复King

一起进步，加油

最近

来自广东 回复

程某人

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

最近

来自山东 回复

三个年糕

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

最近

来自北京 回复

小豆腐

写得挺不错的，点赞收藏

最近

来自广东 回复

李三万Elena

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

最近

来自广东 回复

为你推荐

奢望AI写作文？先把校对干好再说

06-105954 浏览

APaaS产品设计之数据模型（表单设计器）

07-213853 浏览

Axure高保真教程：滑动内容选择器

11-172089 浏览

快讯

查看更多

热门文章

设计+开发一个VisionOS空间应用的全流程、工具操作及细节，看他是如何做的？

03-14

在产品规划中，如何做好成本控制和营收利润

03-11

客服视角下的产品创新与优化，实现产品价值最大化

03-12

社区需要轻社交

03-04

美团短视频增设剧场频道，但下饭暂时还有点难

03-07

如何搭建数据监控体系及实践

03-07

文章导航

一、图标的基本认识

二、图标的历史

三、图标的分类

四、图标的优势

五、图标的绘制流程

六、绘制中需要注意的点

七、图标验证

八、图标可用性测试

九、图标的交付

关于

人人都是产品经理（woshipm.com）是以产品经理、运营为核心的学习、交流、分享平台，集媒体、培训、社群为一体，全方位服务产品人和运营人，成立12年举办在线讲座1000+期，线下分享会500+场，产品经理大会、运营大会50+场，覆盖北上广深杭成都等20个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里与你一起成长。

合作伙伴

链接

隐私政策

投稿须知

意见反馈

帮助中心

公众号

视频号

友情链接

PM265

产品经理导航

起点课堂

猪八戒网

人才热线

伙伴云表格

网易易盾

个推

友盟+

粮仓

创业邦

每日报告

鸟哥笔记

慕课网

旗下品牌: 起点课堂 | 运营派 | 粮仓企微管家

©2010-2024 - 人人都是产品经理 - 粤ICP备14037330号-粤公网安备 44030502001309号

广播电视节目制作经营许可证（粤）字第03109号 版权所有 © 深圳聚力创想信息科技有限公司

都是图形，“做logo”和“画icon”到底有哪些差别？ - 知乎

都是图形，“做logo”和“画icon”到底有哪些差别？ - 知乎切换模式写文章登录/注册都是图形，“做logo”和“画icon”到底有哪些差别？花瑶从事设计，尤其是互联网设计师，logo和icon一定是你平日里出现最高频的词语之一。我们在日常的工作中可能会有这样的经历比如：周三我有一组icon要画完。或是，下周我有一个logo要做。… …都是图形化的设计工作，为何我们经常会说“做logo”,而不是“画logo”，而对icon却说“画icon”而不是”做icon”?这个细微的洞察你也许从来没关注过，但这一字之差却能说明这两类图形最底层属性上的差别。首先，我在百度百科里查了下logo的官方定义：logo是logotype的简称，在以前指的是一家公司的签名或符号。该词起源于希腊语：logos，意思是“文字”。 在图片设计的语境中来说，文字符号通常用来指公司的名称。如果标志没有文字，我们称其为“象征图案”（symbols），但用来沟通的象征图案（如交通标志或指示牌）实际上是一种“象形符号”（pictographs） 如果一个标志仅由字体组成，他们可以称为字母标（ lettermarks）、文字标（ wordmarks），或者称为字母组合标志（ monograms），通常这些文字标志是采用首字母或缩写的形式来表现，当然，也可以用公司全称。当象征图案及文字标志结合在一起，就是我们所说的“混合标志”（ combination marks）。百度百科的解释略有复杂，我按我的理解来翻译一下就是：logo是公司（或是企业）的一个传播符号。在营销或是传播领域里，我们会对某个企业有自己的认知和理解，这是观念意识层面。视觉层面的“符号具象化”大多就是这个logo。或者说logo是视觉符号里最重要的一部分。在来看下百度百科里对icon的解释：icon是上世纪九十年代伴随IT产业出现的一个技术词汇，原指计算机软件编程中为使人机界面更加易于操作和人性化而设计出的标识特定功能的图形标志。这个解释不难理解，icon的起源来自IT业，为了在图形界面里易于操作而诞生。其实，读到这里你应该能多少感觉到logo和icon所承载的功能和意义本质上不太一样。即便有些设计产出logo和icon看起来十分相似。所以，这篇文章我就来聊聊logo和icon的差别。1.logo的外延信息多logo是企业的符号，是企业的“视觉名片”。但也不单单只有名片的价值。它有一部分要承载企业价值观的使命。不能说所有的企业都把自己的价值观融入到logo中，但全球很多大企业的logo如果追本溯源，都能从logo里找到很多企业使命的故事。举几个例子，比如： 亚马逊的logo代表了希望客户在体验了一次亚马逊购物之旅之后会是微笑的、满意的。logo上面的黄色曲线和单词里面的“a”字母组成了一个笑脸。这个黄色曲线也是一个箭头，从字母“a”一直跨越到 字母“z”。这个意味着在亚马逊的产品是多样性的，从“a”到“z”的产品都有，并且还意指到亚马逊公司本身也是多样化的公司。 阿迪达斯三条纹logo早年由阿迪达斯的创办人阿迪·达斯勒设计，因三条纹看起来像一座山，象征着希望人们需要去克服的困难、成就将来和继续完成目标的愿望（也有说早年这三条线没有意义，后来企业发展壮大了又将其赋予山的意义）。 讴歌（本田汽车的高端品牌）用一把专门用于精确测量的卡钳为LOGO的原型，由本田创始人和精神领袖本田宗一郎在两个钳把之间加入了一个小横杠，由此用象形的大写字母“A”来代表这一品牌。不论是拉丁语原意还是作为标志原型的卡钳，都寓意着Acura（讴歌）这一代表着最高造车水平品牌的核心价值：精确、精密、精致。logo就好比我们每个个体的名字，在出生的那一刻起，父母给我们起名的时候就会在仅有的两三个字的组合中赋予很多个对未来的成长和期盼。在做logo的时候，也是企业“出生”的时候，设计师会高度提炼图形，将其符号化之后赋予很多意义。所以，logo大多简洁而抽象，因为抽象可以更有想象力，可以扩展的信息也就越多。反过来说，icon具象，更在意图形的识别性，也就是说，设计者更在意不同人看到这个图形之后理解是否一致。越趋同，icon的的价值也就越大。2.logo服务与品牌和传播，icon服务与操作都是图形，但在设计那一刻起，两个图形的使命和意义注定不一样。品牌在找到自身差异化之后需要有视觉符号般的锤子将自己的产品定位植入目标消费者的脑海里，logo天然具有这样的使用场景和理由。而icon服务于产品，它存在的价值是让用户在使用或浏览的时候更易于理解和操作。举个现实中我们都见过的“icon”： 男女厕所这类公共标识根本不用语言文字，在全球范围内也能达到信息价值的准确传递。这就是icon价值。如果logo是一百个人看完有一百个理解，那icon的设计者更希望这一百个人看完都有同样的理解。3.logo在乎使用不同场景的可延展性，icon在乎整体的统一性一个简单的logo，除了会在产品、官网等载体上出现，还可能会被制作成不同材质的模型、刺绣在衣服上、喷涂在车体上、用不同工艺的印刷，在极其少见的场景里甚至会做成烟花打在天空中。 logo是一个图形在多维度的使用场景下的考虑，而icon是多个图形在同一个使用场景下的考虑（希望没绕晕你）。所以，icon大多不是单个图形的设计，而是一组设计。 变相来说，像公共指示、交通指示符号这类都属于“识别优先”的实体icon。设计者更在意不同人在看到之后的理解一致，设计者不希望每个人有每个人的理解，而是每个人看到后都明白是什么意思，不需要解释，甚至不需有文化。 因为icon承载的信息单一，所以在不同场景中需要有不同的icon来传递信息，但在同样的环境里不同icon需要有一致的风格，让在此情景中的人可以理解此类icon的发布者是从属于同一个发布机构。这样既容易与观看者建立信任，也能减轻设计难度。 最后回到开始提到的问题，为何我们总爱说“做logo”，“画icon”？前面铺垫了这么多，最后从执行的角度来说，就是“做”这个字赋予的信息复杂程度高。它可以包含沟通、设计、测试、打磨、优化、解决等一些列工作的总和。”做”让设计过程更有想象力和延展性。相比于“做”，“画”这个动作的信息结构就相对单一许多。它是把具体的信息形象化的“落实”出来，而且是越具体、越直接越好。所以“画画“是个具象化的过程，跟icon本身的需求属性较为匹配。任何小问题，如果深入思考都有很多值得我们去挖掘的信息。说回来，对事物敏感也是设计师最重要的特质之一。对身边习以为常的事情高度敏感，才有可能发现别人看不到的问题。下次把这个问题试着问问身边的设计是朋友，听听他们的理解和回答吧：）转自： 搜狐UI中国UI中国主页：http://i.ui.cn/ucenter/104875.html发布于 2021-08-03 14:36吉利ICON​赞同​​添加评论​分享​喜欢​收藏​申请

百度文库