兰亭妙微ui设计公司分享：从 1973 年第一代图形用户界面诞生至今，GUI 已经走过半个世纪。UI 设计这一职业，也伴随着图标一同起源发展，时至今日，图标依旧是 UI 体系里举足轻重的视觉元素。下面我们就完整走进图标的世界，拆解图标设计的完整知识体系。

一、图标的起源

早期计算机采用命令行交互，使用者必须记忆大量指令参数，上手门槛极高。为了降低使用门槛，工程师创造出图形符号来指代操作与文件，图标就此诞生，初衷就是帮助普通用户无需记忆复杂命令，即可完成文件管理、任务执行。

1. 施乐公司：图标概念的开创者 1973 年施乐推出 Xerox Alto，这是世界上第一批具备图形用户界面的个人电脑。整机仅量产约 2000 台，却奠定 GUI 发展根基。界面中已经出现垃圾桶、文件夹、打印机等初代图标，成为后世图标设计的原型蓝本。

   

2. 苹果公司：推动图标走向大众 1979 年乔布斯参观施乐原型设备后，受到极大启发，着手自研图形界面电脑。1983 年苹果发布 Apple Lisa，也是苹果首款图形界面计算机。 有着 “现代图标设计之母” 称号的苏珊・卡尔担任创意总监，她设计的像素图标平衡简洁、辨识度高，放到现在依旧生动有趣。

   

3. 微软：让图标设计普及开来 1985 年微软发布 Windows 1.0，正式入局图形用户界面。系统图标借鉴部分苹果设计思路，同时发展出自家特征。随着 Windows 系统大规模普及，图标彻底成为界面设计不可缺少的组成部分。

   

二、图标设计是什么

图标设计，即创造用来指代实物、行为、抽象概念的图形符号。 它的核心特质是简洁直观，做到一眼识别。例如微信 App 图标，只用两个对话气泡，就能代表社交聊天的产品属性。图标广泛应用于软件、网页、移动端产品，承担视觉引导，简化用户操作的作用。

三、图标的分类

图标是界面的点睛之笔，缺少图标会让页面枯燥乏味；但全部使用同一种图标样式，又容易产生审美疲劳。我们可以从视觉表现和功能用途两个维度划分图标类型。

1. 按视觉表现划分（12 类）

毛玻璃图标、面性图标、线性图标、MBE 图标、扁平化图标、立体图标、轻拟物图标、写实风格图标、新拟态图标、主题图标、古风手绘图标、插画图标。

2. 按功能用途划分（6 类）

① 工具图标：B 端产品高频使用，重在承载功能，装饰属性弱。代表案例：腾讯文档工具栏编辑图标。

② 装饰图标：侧重品牌表达与情感化设计，大量使用 3D 效果提升页面质感。代表案例：腾讯电脑管家界面 IP 与装饰图形。

③ 启动图标：常结合品牌 LOGO，可搭配动态效果，传递品牌理念。代表案例：联想电脑管家动态启动页图标。

④ 进程提示图标：反馈正在进行的操作状态。代表案例：腾讯电脑管家垃圾清理转动风扇图标。

⑤ 状态提示图标：处理异常场景，如 404、空数据、页面建设中，缓解用户使用时的负面情绪。 

⑥ 趣味动效图标：依靠动态效果增添交互惊喜感，缓解等待焦虑。代表案例：联想电脑管家火箭加载动效。

四、图标设计八大核心原则

即便 AI 可以快速生成酷炫图标，设计师依旧需要掌握专业原则，用于校验、修改 AI 输出的结果，做出成套、精致的图标。

1. 大小统一 成套图标视觉体量要均衡。注意几何图形会产生视觉偏差，并非像素尺寸相等，看上去就一样大，需要依靠视觉感受做微调。

   

2. 圆角统一 同一套图标中，同类造型元素的圆角曲率必须保持一致，避免出现圆角大小不一，显得粗糙不专业。

   

3. 风格统一 同一场景、同一功能组别的图标，材质、表现手法要统一，例如整套全部采用磨砂玻璃质感。

   

4. 角度统一 扁平化、2.5D 图标，重复元素的倾斜、叠加角度需要保持一致，强化系列感。

   

5. 粗细统一 线性图标线条粗细规则统一，比如外框统一 3px，内部线条统一 2px，保证整套精致协调。

   

6. 疏密统一 成套图标图形繁简程度接近，不能一个元素饱满复杂，另一个极度简约，保证画面感受一致。

   

7. 透视统一 针对立体、2.5D 图标，整套必须使用同一套透视逻辑，避免透视混乱。

   

8. 高识别度 图标第一要务是表意清晰，用户可以快速读懂图形含义，再追求视觉美化。

   

五、图标在界面中的六大价值

图标遍布导航栏、工具栏、首页、个人中心等页面，相比纯文字，传递信息更高效，同时丰富视觉体验。

1. 提升操作效率 图形便于记忆识别，用户不用阅读大段文字，就可以快速定位功能，缩短寻找信息的时间。参考案例：华为云产品列表页面。

   

2. 提高用户满意度 精致、配色舒适，甚至带有动效的图标，能够带来良好视觉体验，优化整体产品体感。

   

3. 降低认知成本 图标大多取材于生活中熟悉的事物，不受语言、地域限制，用户理解门槛低，更容易产生共鸣。

   

4. 强化品牌形象 将品牌 LOGO 元素融入图标设计，在各个页面反复露出，持续加强品牌曝光。参考案例：腾讯云业务 banner 图标。

   

5. 丰富页面层次 大小图标搭配使用，打破纯文字页面的单调，让信息分区更清晰，页面层次更加丰满。参考案例：360AI 办公后台界面。

   

6. 消解页面枯燥感 多彩、造型生动的图标，调剂满屏文字带来的沉闷，提升浏览愉悦感。参考案例：佐糖图片工具功能面板。

   

六、图标能力提升 4 个实操技巧

1. 临摹练习，循序渐进

新手入门最有效的方式就是临摹。从简单图标开始练习，逐步提升临摹难度，在实操中积累绘制手感。

2. 持续收集优质参考

多看优秀作品，建立个人图标素材库。接到新需求的时候，就不会没有思路，快速打开创作方向。

3. 学会拆解分析作品

看到优秀图标不要只保存，要主动拆解：层次光影、叠加关系、色彩对比、质感表现分别是怎么做的。吸收别人的设计思路，转化为自己原创的能力。

4. 明确产品目标与受众

不同用户群体，适配完全不一样的图标语言。 儿童产品图标：造型圆润、色彩丰富活泼； B 端企业产品图标：配色克制，造型简洁理性，减少夸张卡通元素。

七、5 个实用图标资源网站

1. Iconfont（阿里图标库） 网址：https://www.iconfont.cn/ 国内设计师使用最多的图标平台，海量图标素材，极大提升日常工作效率。支持图标、插画、3D 资源、动效资源下载。

   

2. IconPark（字节跳动） 网址：https://iconpark.oceanengine.com/ 可以在线切换图标风格，支持调整线条粗细，一键切换线性、面性、双色样式。

   

3. Ikonate 网址：https://ikonate.com/ 在线自定义编辑线性图标，自由调整线条粗细、圆角、颜色，导出 SVG 矢量文件。

   

4. Iconfinder 网址：https://www.iconfinder.com 图标造型种类丰富，免费 / 付费资源齐全，适合找脑洞创意类图形。

   

5. Iconduck 网址：https://iconduck.com/ 拥有几十万免费图标与插画素材，资源储备量大，可商用素材较多。

   

八、图标文件命名规范

图标常见四种状态： normal (nor) 正常、highlight (hig) 高亮、selected (sel) 选中、disable (dis) 不可用。

规范命名可以方便团队协作，便于前端开发调用。 推荐命名格式：模块‑类别‑功能‑状态 示例：Nav_button_message_sel（导航‑按钮‑消息‑选中态）

附常用英文关键词参考：登录 login、加载 loading、搜索 search、导航 nav、按钮 btn、标签 tab、侧边栏 sidebar 等。

写在最后

读完这套完整的图标知识，我们可以根据不同业务场景，选对图标风格，合理运用图标设计原则。图标看似基础，但想要做好依旧需要不断复盘、积累练习。希望本篇内容可以帮到正在学习 UI、图标设计的你。

 

转载：优设

 

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。