专业的短链接生成工具
链接域名
短网址有效期
什么是图标，7步然你轻松完成图标设计、理解图标
更新时间：2025-5-6 01:40:19 作者：爱短链
图标在UI在设计师的眼中，就像螺丝钉一样，用小身体连接产品的各种功能和界面，使整个功能过程顺利进行。
这些图标是如何工作的？我们应该如何使它美丽耐用？让我们在文章中看看。
什么是图标？ 要做好图标，首先要知道什么是图标。
在一般认知中，图标可以定义为图形符号或标志，帮助我们理解一些复杂的功能或操作，特别是在数字领域。
可视化图形符号更有利于高效显示信息，引导人机操作交互。
也有人称之为icon或eikan。
1. 图标发展史 图标的历史可以追溯到人类文明起源的开始。
最早的象形文洞穴壁画可以被视为一种图标，这对我们的后代研究人类文明具有宝贵的历史意义。
但今天我们研究的图标主要是基于计算机系统发明，看看图标在短短几十年内是如何发展的。
●80年代初的图标是黑白单色 ●上世纪90年代，颜色越来越多，形状也越来越丰富 ●到2000年，随着显示技术的发展，图标越来越生动 ●图为iOS1-8图标变化 从最早的Xerox Sta最新的系统Mac os10.到目前为止，每个阶段都有自己独特的图标风格。
2010年已经到了智能移动时代，拥有最著名的iOS从图标的变化来看，系统的每个阶段都经历了拟物-扁平-微纹理的几个阶段。
二、图标分类 由于其良好的识别性和无障碍沟通特性，图标被广泛应用于各种场景中。
同样，由于使用场景的不同，图标的意义也不同。
1. 应用图标 ●iOS14桌面应用图标 应用图标是指设备界面上的应用入口，通常具有较强的品牌特性，可能性和logo与其核心功能一致， 如instagram 这是一个简化的相机正视图，亚马逊是一个购物车形象，许多国内产品直接使用代表产品的文本。
需要注意的是，界面图标必须遵循相应系统下的尺寸规格。
●华为EMUI 10应用图标 2. 功能图标 与应用图标不同，它主要作为界面中的功能入口，通常是简单易识别的符号。
根据不同产品的调性，图标风格也可以多种多样，不必强制成为标准形状。
异形图标可以使界面更加生动，整体风格有更多的发挥空间。
3. 辅助图标 辅助图标通常存在于文本较长时，搭配作为辅助说明UI在中国，它也可能起到一定的情感作用，在提高用户接收信息效率的同时安抚用户情绪；因此，可能需要更多的细节作为图片补充的一部分。
●例如：缺失图标 4. 与logo的区别 虽然两者的特点非常相似，都是图形符号，但logo它服务于整个品牌，具有其独特的专利特点，甚至可以IP形象或文字；两者的关系可以理解为父子关系。
●图中的图标很容易继承logo特点和风格 ●但有些只是普通的界面辅助，风格和风格不一致 三、绘制图标 每一个都能画出高质量的图标UI设计师的必要能力，这次我们以功能图标为例，向您展示具体的绘制步骤和要点，希望帮助您避免一些影响图标细节的小细节。
第一步：建立图标网格： 由于功能图标的形式和结构不同，不可避免地会有不同的尺寸。
必须考虑其整体视觉的协调。
最好的方法是建立图标网格，也可以称为图标盒。
当图标形式分别为长、方形和圆时，有合理的比例限制。
●图标盒中常见的图标形图标形式 当然，网格不是绝对的。
我们应该学会灵活使用它。
当它不能与个别图标形式完美匹配时，我们不必拘泥于它。
一切都是视觉和谐的首要任务。
我通常在图标网格周围预留一个安全区域，以避免不完整的切图。
第二步：具体功能 有了网格，我们需要根据功能找到相应的物理图像；如笔记本是记录，电话是电话，时钟代表时间，日历代表日期等。
这些功能在现实中相对容易找到实物。
如果它们是抽象的功能呢？我们需要发散思维，找到类似含义的东西。
例如，隐私功能没有实物，但我们可以通过隐私一词延伸：不公开、隐藏、锁定、受保护的，并继续根据这些词延伸：可能是密码、盾牌、锁、遮眼等。
永远记住：用公众能理解的物体图像来表达它。
如果用户看到一个图标太复杂，需要反复思考它所代表的含义，并且无法预测点击后的结果，那么图标就会失去效率。
第三步：简化结构 有了功能的具体形象，下一步就是思考如何使图标更容易识别。
●公牛毕加索 毕加索创作《公牛》时，从初稿到最终成品经历了11个版本，最后只勾勒出几行，但我们仍然一眼就能认出牛的形式。
绘制图标也是如此。
我们需要思考如何省略无用的细节，简化复杂性，提取它们的主要特征。
第四步：善用布尔运算 有了简化的图标形象，我们应该考虑如何使图标更加标准化和耐用。
●桃心图标由两个简单的圆角矩形组成 ●桃心图标也可以更圆 ●在布尔运算的不同组合下，图标形态特征也会有所不同 这一步的诀窍是尽可能使用基本图形来组合拼贴，使图标不容易拉伸变形，特别是在适应不同尺寸的切割图时。
第五步：处理细节 统一性 ●风格：线性、面性统一 ●断点细节一致：平角、圆角 ●图标气质一致：圆润还是尖锐、坚韧 随着功能界面的不断复杂化，人们对同一产品或同一界面中的单一表面或线性图标不再满意，而是便于分层。
因此，只考虑图标在同一级别下的统一性。
视觉平衡 如图所示，当三角形位于中间位置时，视觉重量会偏向左侧。
在此基础上，我们需要做出适当的调整，以实现视觉重量的平衡。
一致的视角 当你想让你的图标更出彩，采用不同于正视图的结构时，你必须确保这些图标的视角至少在同一水平上是一致的。
第六步:做出差异化 融入品牌DNA ●韩国购物App 11 street，整合品牌很好logo的箭头符号 由于功能图标简单通俗，容易出现严重的市场同质化现象，所以很多App选择将品牌基因融入图标，不仅可以产生差异，还可以提高品牌调性。
跟风创新 通过对图标风格纹理的创新表达，让人眼前一亮。
这样，您需要更多地了解当前的流行趋势和技术，并根据产品的风格调性量身定制图标。
图标微动效 随着5G随着时代的到来，微动效应早已出现在公众的视野中。
基于图标的微动效应表达，用户可以更快地注意到某个功能并点击它。
如果你的动态效果只是有趣和美丽，它可以让用户感到快乐。
更常见的loading和tab切换给了我们足够的发挥空间。
第七步:完善图标库 一个产品通常有几十个甚至几百个功能图标。
如何保证这些图标的统一需要提前规划。
绘制的最后一步是在完成部分图标后及时排列和比较，以确保整体视觉效果的统一；如果条件允许，可以生成图标库，以促进后续的团队合作。
●Apple发布的SF Symbols中图标分为9个宽度和3个比例 有了图标库，合作设计师可以直接调用共享功能；大大提高自己和团队的效率，保持整体规范的一致性。
四、最后 图标画似乎很简单，但要做好并不容易；UI到处都是细节。
如果你想让你的界面更精致，不要忽视每一个可以改进的点。
我希望今天的文章能对你有所帮助。
Sky，微信公众号：我们的设计日记（ID：helloskys），原支付宝体验设计专家、阿里巴巴天猫设计专家；10年知名互联网公司设计经验，在0-1、品牌定位、金融产品、设计规范、运营规范、推广等方面有丰富的实践经验。
特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。
本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
这些图标是如何工作的？我们应该如何使它美丽耐用？让我们在文章中看看。
什么是图标？ 要做好图标，首先要知道什么是图标。
在一般认知中，图标可以定义为图形符号或标志，帮助我们理解一些复杂的功能或操作，特别是在数字领域。
可视化图形符号更有利于高效显示信息，引导人机操作交互。
也有人称之为icon或eikan。
1. 图标发展史 图标的历史可以追溯到人类文明起源的开始。
最早的象形文洞穴壁画可以被视为一种图标，这对我们的后代研究人类文明具有宝贵的历史意义。
但今天我们研究的图标主要是基于计算机系统发明，看看图标在短短几十年内是如何发展的。
●80年代初的图标是黑白单色 ●上世纪90年代，颜色越来越多，形状也越来越丰富 ●到2000年，随着显示技术的发展，图标越来越生动 ●图为iOS1-8图标变化 从最早的Xerox Sta最新的系统Mac os10.到目前为止，每个阶段都有自己独特的图标风格。
2010年已经到了智能移动时代，拥有最著名的iOS从图标的变化来看，系统的每个阶段都经历了拟物-扁平-微纹理的几个阶段。
二、图标分类 由于其良好的识别性和无障碍沟通特性，图标被广泛应用于各种场景中。
同样，由于使用场景的不同，图标的意义也不同。
1. 应用图标 ●iOS14桌面应用图标 应用图标是指设备界面上的应用入口，通常具有较强的品牌特性，可能性和logo与其核心功能一致， 如instagram 这是一个简化的相机正视图，亚马逊是一个购物车形象，许多国内产品直接使用代表产品的文本。
需要注意的是，界面图标必须遵循相应系统下的尺寸规格。
●华为EMUI 10应用图标 2. 功能图标 与应用图标不同，它主要作为界面中的功能入口，通常是简单易识别的符号。
根据不同产品的调性，图标风格也可以多种多样，不必强制成为标准形状。
异形图标可以使界面更加生动，整体风格有更多的发挥空间。
3. 辅助图标 辅助图标通常存在于文本较长时，搭配作为辅助说明UI在中国，它也可能起到一定的情感作用，在提高用户接收信息效率的同时安抚用户情绪；因此，可能需要更多的细节作为图片补充的一部分。
●例如：缺失图标 4. 与logo的区别 虽然两者的特点非常相似，都是图形符号，但logo它服务于整个品牌，具有其独特的专利特点，甚至可以IP形象或文字；两者的关系可以理解为父子关系。
●图中的图标很容易继承logo特点和风格 ●但有些只是普通的界面辅助，风格和风格不一致 三、绘制图标 每一个都能画出高质量的图标UI设计师的必要能力，这次我们以功能图标为例，向您展示具体的绘制步骤和要点，希望帮助您避免一些影响图标细节的小细节。
第一步：建立图标网格： 由于功能图标的形式和结构不同，不可避免地会有不同的尺寸。
必须考虑其整体视觉的协调。
最好的方法是建立图标网格，也可以称为图标盒。
当图标形式分别为长、方形和圆时，有合理的比例限制。
●图标盒中常见的图标形图标形式 当然，网格不是绝对的。
我们应该学会灵活使用它。
当它不能与个别图标形式完美匹配时，我们不必拘泥于它。
一切都是视觉和谐的首要任务。
我通常在图标网格周围预留一个安全区域，以避免不完整的切图。
第二步：具体功能 有了网格，我们需要根据功能找到相应的物理图像；如笔记本是记录，电话是电话，时钟代表时间，日历代表日期等。
这些功能在现实中相对容易找到实物。
如果它们是抽象的功能呢？我们需要发散思维，找到类似含义的东西。
例如，隐私功能没有实物，但我们可以通过隐私一词延伸：不公开、隐藏、锁定、受保护的，并继续根据这些词延伸：可能是密码、盾牌、锁、遮眼等。
永远记住：用公众能理解的物体图像来表达它。
如果用户看到一个图标太复杂，需要反复思考它所代表的含义，并且无法预测点击后的结果，那么图标就会失去效率。
第三步：简化结构 有了功能的具体形象，下一步就是思考如何使图标更容易识别。
●公牛毕加索 毕加索创作《公牛》时，从初稿到最终成品经历了11个版本，最后只勾勒出几行，但我们仍然一眼就能认出牛的形式。
绘制图标也是如此。
我们需要思考如何省略无用的细节，简化复杂性，提取它们的主要特征。
第四步：善用布尔运算 有了简化的图标形象，我们应该考虑如何使图标更加标准化和耐用。
●桃心图标由两个简单的圆角矩形组成 ●桃心图标也可以更圆 ●在布尔运算的不同组合下，图标形态特征也会有所不同 这一步的诀窍是尽可能使用基本图形来组合拼贴，使图标不容易拉伸变形，特别是在适应不同尺寸的切割图时。
第五步：处理细节 统一性 ●风格：线性、面性统一 ●断点细节一致：平角、圆角 ●图标气质一致：圆润还是尖锐、坚韧 随着功能界面的不断复杂化，人们对同一产品或同一界面中的单一表面或线性图标不再满意，而是便于分层。
因此，只考虑图标在同一级别下的统一性。
视觉平衡 如图所示，当三角形位于中间位置时，视觉重量会偏向左侧。
在此基础上，我们需要做出适当的调整，以实现视觉重量的平衡。
一致的视角 当你想让你的图标更出彩，采用不同于正视图的结构时，你必须确保这些图标的视角至少在同一水平上是一致的。
第六步:做出差异化 融入品牌DNA ●韩国购物App 11 street，整合品牌很好logo的箭头符号 由于功能图标简单通俗，容易出现严重的市场同质化现象，所以很多App选择将品牌基因融入图标，不仅可以产生差异，还可以提高品牌调性。
跟风创新 通过对图标风格纹理的创新表达，让人眼前一亮。
这样，您需要更多地了解当前的流行趋势和技术，并根据产品的风格调性量身定制图标。
图标微动效 随着5G随着时代的到来，微动效应早已出现在公众的视野中。
基于图标的微动效应表达，用户可以更快地注意到某个功能并点击它。
如果你的动态效果只是有趣和美丽，它可以让用户感到快乐。
更常见的loading和tab切换给了我们足够的发挥空间。
第七步:完善图标库 一个产品通常有几十个甚至几百个功能图标。
如何保证这些图标的统一需要提前规划。
绘制的最后一步是在完成部分图标后及时排列和比较，以确保整体视觉效果的统一；如果条件允许，可以生成图标库，以促进后续的团队合作。
●Apple发布的SF Symbols中图标分为9个宽度和3个比例 有了图标库，合作设计师可以直接调用共享功能；大大提高自己和团队的效率，保持整体规范的一致性。
四、最后 图标画似乎很简单，但要做好并不容易；UI到处都是细节。
如果你想让你的界面更精致，不要忽视每一个可以改进的点。
我希望今天的文章能对你有所帮助。
Sky，微信公众号：我们的设计日记（ID：helloskys），原支付宝体验设计专家、阿里巴巴天猫设计专家；10年知名互联网公司设计经验，在0-1、品牌定位、金融产品、设计规范、运营规范、推广等方面有丰富的实践经验。
特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。
本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
