DAY.56“记录本周美好”——浅谈图标设计规范与注意事项

新知榜官方账号

2023-10-07 23:42:45

DAY.56“记录本周美好”——浅谈图标设计规范与注意事项

本文简要介绍了图标的类型、风格和设计规范，并提供了一些图标命名和使用的建议。此外，还提供了一些图标设计注意事项和推荐的图标网站。

1、认识图标

图标就是一个符号，一个代表某个对象的符号，一个象征性的符号。在设计心理学中描述图标是一个意符：指的是能告诉人们正确操作方式的任何可感知的标记或声音。简单来说比如电梯的上下按键，又或是推拉门的Push（推）/Pull（拉）指示标识都属于图标的范围。

2、图标的类型

图标类型不管是什么风格也好都逃不过三类：线性、面性、线面结合。三类风格所传达的语言也是有所不同。以下是市场普遍的图标设计类型：

线性：主要是通过元素“线“去延伸，基于线的粗细大小、端点类型、圆角、描边、颜色等基础属性塑造成型。常用于调性简洁的产品设计。
面性：相比较线性图标应用场景更加丰富，视觉表现力更强、更突出，常用于主要功能图标。
线面结合：线和面相结合而成的一种类型图标，这种图标的比较难驾驭，一般产品的主要功能设计都会比较克制。市面上这种类型图标的应用比较少。这种图标的设计也是非常考验设计师的设计功底。

3、图标的设计风格

类型是通过结构去定义的，风格却是通过技法去实现的，所以图标设计风格可以说是非常之广泛，都是需要设计师不断的去创造，这东西是没有上限的。以下是市场流行的风格参考，大概有扁平化、2.5D、毛玻璃、插画、手绘、拟物、以及最新的新拟态等等...

4、图标的设计规范

对于新人设计师来讲，建议先练习创建一个图标设计网格，这个网格将会陪伴你UI生涯。这有助于保持图标大小的一致性，常用的有：16、24、36、48、64、128、512、1024。建议从你项目所需要的最大图标尺寸开始设计。某大厂就是如此。依次绘制小一点的，因为删除和简化细节要比添加容易的多，也能最大程度的保留图标原始状态，可以按照业内MaterialDesign规范来网址如下https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes不想自己动手的，可以关注公众号回复「图标网格」直接下载就好了，准备了好几个尺寸版本，直接用就好

5、图标的命名

图标命名需要规范化，因为最终都需要提供技术人员合进代码中，代码中一般基本全是英文命名，所以在命名前最好和技术人员统一规范，规范的图标命名可以提高团队的协作效率。一般命名为：图标__模块_子模块_图标名称_大小_状态ic_HMS_GPS_According_24px_normal

6、图标的使用

图标的使用有很多种，如底部标签栏设计、入口图标等等。在使用时需要根据项目去定义使用的图标风格。比如从页面的整体风格去定义、或项目业务、以及项目面对的年龄层，以及图标所应用的场景。最重要的是注意整体画面的协调。

7、图标设计注意事项

像素完美。让图标踩在每个像素点上，确保清晰不模糊。
视觉重量。用斜视的方法来感知图标，看看成套的图标是否都具有相同的大小。斜视、调整、再看、再调整，直至均匀理想。
几何图形。尽量使用简单坚实的几何形状来绘制所有必要的线条，它们会让你的图标显得更加牢固可靠，具有吸引力和说服力。
清晰简洁。删除所有无法传达图标概念的细节，避免让图标显得沉重而复杂。
足够的空间。确保图标内每个细节和元素都有足够的空间，不会显得过于拥挤或者空旷。
对比度。在黑色和白色的背景上检查图标的全部细节，看看是否其中的每种颜色都是可见的，以及元素之间的对比是否足够。
视觉统一。检查线条的粗细重量，边角的大小，配色方案，细节层次和设计元素在整个合集中是否是不变且一致的。
图层排序。确保图标中图层顺序清晰而规整。这是一种良好的习惯和专业的精神。

寻求报道，请

关键词

分享至微信：

相关工具

Giiso写作机器人，内容创作AI辅助工具

Cohesive

人工智能文案内容创作和编辑工具

Grammarly

AI英语语法和拼写检查写作助手

Spell.tools

高颜值AI内容营销创作工具

HeyFriday

国内团队推出的智能AI写作工具

HyperWrite

AI写作助手帮助你创作内容更自信

三个国外专业免费的调色网站

三个国外专业免费的调色网站无论制作视频、编辑图片，合适的色彩会让你的作品增加视觉冲击力，所以专业的调色技术价值非凡，一部电影或一部好的视频、图片海报，专业调色耗费少则上万，多则上百万，只是大家对专业调色这个行业知之甚少，今天网玩君就为大家分享三个国外专业免费的调色网站，记得收藏好，以后编辑视频、图片

分类标签调色网站免费

04-18 16:42

电影制作中的纹理技术

纹理在电影制作中的重要性纹理是指将详细的表面特征应用于3D模型或视觉效果元素，使其看起来更逼真。纹理对于创建视觉上引人入胜且可信的电影场景至关重要，尤其是涉及CGI、动画或特效的场景。纹理还支持叙事和讲故事，可以通过纹理设置年龄大小等属性，为故事奠定基础。纹理技术的发展历程自胶片问世以来，电影制作人

分类标签纹理电影制作CGI视觉效果微缩模型UV映射

04-18 16:42

UnrealSynth虚幻合成数据生成器-NSDT

UnrealSynth虚幻合成数据生成器-NSDTUnrealSynth基于UE5虚幻引擎开发，可用于生成合成数据集，包括图像和标注数据。可用于各种行业细分场景中目标识别任务的实施效率提高。UnrealSynth合成数据工具包内容UnrealSynth基于UE5虚幻引擎开发，目前支持YOLO系列模型

分类标签 UnrealSynth虚幻引擎数据合成YOLO模型深度学习训练数据

04-18 16:42

人工智能与音乐：谷歌的Project Magenta

谷歌的Project Magenta利用人工智能技术生成音乐和其他艺术形式，如素描、视频和笑话。该项目的目标是为人们创造新的交流方式。本文介绍了该项目的背景、发展历程和应用。在上世纪90年代中期，谷歌研究院的Douglas Eck就开始了他的人生目标：融合人工智能与音乐。二十年后，他与一支谷歌研究团

分类标签人工智能音乐谷歌

04-18 16:42

如何做好SEO优化？

如何做好SEO优化？想要做好SEO优化，得从站内优化和站外优化两个方面入手。一、站内优化1.关键词定位和分析关键词整理是SEO优化中的核心工作，一旦定下来就不建议再次去更改。站长始终要记住关键词一定要和行业、产品、领域息息相关，同时还可以参考竞争对手所做的关键词，可以利用站长工具、5118、爱站网、

分类标签 SEO优化关键词定位网站架构布局

12-11 08:19

万兴科技：营收实现稳健增长，拥抱AIGC新机遇

万兴科技：营收实现稳健增长，拥抱AIGC新机遇国元证券股份有限公司耿军军近期对万兴科技进行研究并发布了研究报告《2022年年度报告点评：营收实现稳健增长，拥抱AIGC新机遇》，本报告对万兴科技给出买入评级，当前股价为75.24元。万兴科技(300624)事件：公司于2023年4月7日收盘后发布《20

分类标签万兴科技营收增长AIGC

12-11 02:11

AI分身市场潜力巨大，万兴科技、京东等已率先布局

“AI孙燕姿”和“CarynAI”引爆市场最近，“AI孙燕姿”和“CarynAI”以以假乱真的程度引爆市场，都是通过采集本人的语音、文字、图像等素材，并通过开源的生成式训练模型进行训练而成。其中，“CarynAI”成功地借助AI技术，打造了自己的AI分身，通过付费的方式，跟AI版的自己进行交往，预计

分类标签 AI孙燕姿CarynAIAI分身AIGC技术虚拟主播数字人

12-11 02:10

万兴科技推出名师必备讲演神器“万兴智演”

万兴科技推出名师必备讲演神器“万兴智演”9月8日，万兴科技面向泛知识领域，推出名师必备讲演神器“万兴智演”。该款AI演示新品集成强大的AIGC能力、精美的行业课程模板以及动画特效素材，大大简化课件制作过程。同时，产品内置强大的录制、直播功能，通过真人实拍与演示内容相结合的形式，实现人景融合的实时演示

分类标签万兴科技万兴智演AI演示

12-11 02:09

万兴科技创始人吴太兵在2023互联网岳麓峰会上的主题演讲

万兴科技创始人吴太兵在2023互联网岳麓峰会上的主题演讲2023互联网岳麓峰会论坛上，万兴科技创始人、董事长兼总裁吴太兵进行主题演讲。红网时刻新闻记者郭雅倩甘红长沙报道十届、十年，岳麓峰会从2014年的“湖湘汇”到如今云集万人的盛会，积攒了巨大的关注度和影响力。6月19日，2023互联网岳麓峰会在长

分类标签万兴科技吴太兵岳麓峰会

12-11 02:05

樟宜机场：通过科技改变旅客体验

樟宜机场：通过科技改变旅客体验樟宜机场在智能手机上移动的小红点代表了在机场上空飞行的飞机，通过传感器的追踪获取了相关飞行轨迹。机场通过人工智能、面部识别和数据分析等技术的应用，不断提高机场运营效率，保持创新，致力于成为一个旅客体验更佳、充满活力的目的地。人工智能优化机场运营效率樟宜机场在2017年共

分类标签樟宜机场科技旅客体验

12-10 22:16

DAY.56“记录本周美好”——浅谈图标设计规范与注意事项