兰亭妙微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。

让“认识附近的人”，先变成看得见的生活场景。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Momento，一组围绕附近发现与即时分享展开的社交 App 设计。照片、头像与活动把抽象的社交功能变成具体体验。

一、项目背景：让初次进入的用户理解连接的价值
附近的人、在线状态、生活分享和本地活动，各自承载不同期待。Momento 用连续的新手引导逐一介绍这些场景，让开始使用之前的认知过程保持轻松。

图 1  发现身边朋友的引导

照片拼贴先建立真实的社交情境，标题再点出附近发现的价值。深色空间里，人物与蓝色按钮形成清晰焦点，顶部进度与跳过入口则保留轻松进入的余地。

图 2  在线与距离的关系展示

中心头像与周围节点把附近关系画成空间图形，距离与在线的概念因此更有画面感。文字、按钮与进度延续上一屏的位置，场景在变，浏览节奏保持熟悉。

二、设计策略：用稳定框架呈现不同社交情绪
①信息架构：每屏聚焦一种行为，从发现走向分享，再过渡到活动与登录。②视觉语言：黑色与深蓝衬托人物摄影，明亮蓝色标记主动作；圆角、头像与节点图形形成一致的视觉节奏。

Momento Social | 界面细节与设计启发    

图 3  分享生活的内容预告

节点与头像继续作为主要图形，围绕分享生活展开新的叙事。与前一屏相近的构图让引导保持连贯，不同标题则为相似画面赋予清楚的功能含义。

图 4  本地活动与登录衔接

活动卡片预告进入产品后可以探索的内容，底部动作转向登录，并保留注册入口。前面的社交想象在这一屏落到开始使用，图片与动作之间的过渡十分自然。

③场景化交互：进度、跳过与下一步的位置持续出现，主要变化集中在图片和场景说明。最后一屏转入登录与注册，让前面的价值介绍接上实际入口，整段引导有明确的推进关系。

三、设计启发：新手引导也可以是一段有节奏的产品叙事
每一屏给出新的社交理由，同时保留熟悉的按钮和版式。摄影负责建立情绪，短标题负责解释用途。做社区或社交产品时，这种把功能讲成生活场景的表达，比逐项罗列模块更有画面感。

如有社交、兴趣社区类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

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

本文属于反主流视角的译文复盘，直指 UX 行业的诸多现实弊病，提醒从业者不要迷信流程、术语与数据，回归设计的本质。

本文辨析服务设计和用户体验设计的概念边界、工作范畴、工具方法，同时对比产品与服务的差异，帮助设计师理解两种学科的分工与重叠。

统一网格能让网站清楚可靠，但品牌表达也可以保留一点变化。Brecht De Ruyte近期用CSS random()探索了字体和卡片的趣味表现。兰亭妙微借这一主题，讨论高端网站设计中哪些地方适合变化、哪些地方需要稳定。配图为AI概念示意，不是原文演示截图或已上线网站。

同一组组件，有人叫“提示”，有人叫“通知”，研发又使用第三种名称，协作时就容易发生偏差。Vitaly Friedman的新文章汇集了命名资源与案例。兰亭妙微围绕B端界面设计，给出一套可从小范围开始执行的命名建议；下文示例是说明方法，不是通用强制标准。

AI生成速度越来越快，团队却未必因此减少了全部工作。NN/g近期对521名UX从业者的调查提到，受访者感受到提速，同时也担心输出可靠性等问题。以下是兰亭妙微据此提出的工作流建议：把核查、修改和交付一起计算，而不是只记录第一版生成用了多久。

设备屏幕上的界面，最终要在具体硬件和真实操作环境里工作。Qt 于10月27日介绍了面向嵌入式与HMI设计的 Clate Beta，并说明其QML交付方向。兰亭妙微结合这一动态，提出以下设计交付检查建议。文中配图为AI概念示意，不是Clate截图，也不是本司客户项目。

折叠菜单看起来只是标题旁的一枚小图标，却同时承担了告知状态、提示动作和组织内容的任务。Vitaly Friedman 的新文章讨论了不同图标与分离点击行为带来的理解差异。兰亭妙微借这一问题，整理一套面向企业官网和业务后台的评审方法；下面的场景为应用建议，并非原作者对这些产品的测试结论。

一 先确定这一行到底执行什么动作

先把菜单项分成两类：进入页面，或展开内容。应用建议是让同一行的文字与图标表达同一个动作。如果“产品服务”文字进入介绍页，而右侧小箭头展开下级列表，用户就必须在很近的两个目标之间做判断。评审时应把两种点击分别写进交互说明，而不是只画一个静态展开态。

图1 原文引用的 DHL 移动导航示例。图片来源：Smashing Magazine；界面版权归相关权利人。

例如企业官网需要保留栏目总览时，可以在展开后的列表里设置明确的“查看全部服务”链接。这样既能继续浏览子项，也能知道如何到达汇总页。是否采用这一结构，仍应结合具体导航层级和用户任务验证。

二 用状态变化帮助用户理解结果

图标之外，还要检查内容出现的位置、标题样式与展开状态是否同步。应用建议：点开费用说明后，正文紧接标题出现，图标和辅助技术状态一起变化；收起时返回可预期的位置。若用户需要滚动查找刚出现的内容，即使图标正确，反馈也可能不足。

对多级菜单，应明确哪些层级可以同时打开。不要在用户进入第三层时悄悄收起仍需要参考的上层信息。复杂后台中的分组筛选，还要检查关闭面板后是否保留已选条件。

三 把点击范围与键盘操作一起检查

应用建议：在触摸设备上，以整行作为清晰的操作目标，并预留稳定的间距；在桌面上，检查键盘是否能进入、展开和离开该区域。图标只是提示，真正的操作控件仍需要可理解的名称、焦点样式和状态描述。

图2 原文展示的 Lens.org 折叠内容示例。图片来源：Smashing Magazine。

寻找交互设计公司或进行方案验收时，可以要求现场演示“展开、选择、返回、再次展开”四个步骤。观察内容和焦点是否留在合理位置，比仅比较箭头的线条粗细更能发现问题。

菜单设计的验收，应同时覆盖动作含义、状态反馈与操作路径。把这三件事写清楚，后续的视觉设计和开发协作才有共同依据。

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

兰亭妙微ui设计公司分享：在团队协同设计中，图标常常出现风格混乱、圆角与断点规则不统一的问题。不仅拉低产品界面质感，还会削弱品牌专业视觉形象。如果你正苦于缺少一套可落地的图标设计规范，本文可以提供完整的实战解决方案。

一、统一图标规范的价值

1. 强化品牌识别与记忆

图标是品牌视觉体系的关键组成。一套辨识度高、特征鲜明的图标，可以快速抓住用户视线，长期使用后会沉淀为用户对品牌的视觉记忆符号。

2. 传递品牌气质与价值取向

图标不只是简单图形，线条、圆角、重量感都会传递品牌气质：粗线条厚重醒目，细线条精致轻盈；大圆角柔和亲和，尖角干练锐利，借由视觉语言向用户传递品牌理念，提升用户认同感。

3. 提升品牌专业权威性

一套严谨统一的图标体系，能够直观体现产品的设计品质，建立用户信任感，在同类产品竞争中建立更好的品牌印象。

二、项目里常见的图标乱象

没有成文规范约束时，多人协作很容易产出五花八门的图标，主要有四类典型问题：

1. 图形形状不统一 含义相近的图标采用完全不同的基础造型，同类功能图标元素杂乱，界面缺乏整体协调性，直接影响用户对产品的第一印象。

   

2. 复杂度差异过大 部分图标元素繁琐，部分过于简约。复杂度失衡既破坏界面审美，小尺寸场景下还会降低图标的识别效率。

   

3. 圆角规则混乱 同类基础图形（如矩形）混用多种圆角数值，界面观感杂乱，给用户带来不必要的视觉负担，降低使用体验。

   

4. 断点、内部间隙不统一 断点有无、内部元素间隙数值随意，会破坏视觉稳定性，削弱品牌视觉的专业度。

   

乱象带来的负面影响

• 对用户：视觉体验割裂，识别成本上升；
• 对品牌：视觉输出不稳定，削弱市场竞争力；
• 对设计师：图标维护成本高，团队协作效率低下。

问题根源：缺少清晰可执行的图标设计文档，新增、修改图标时没有统一参照标准，多人输出就容易出现 “十个设计师十种图标风格”。

三、图标设计核心原则：5 秒识别原则

用户应当在 5 秒内读懂图标代表的功能含义，以此为核心延伸出 5 个设计要点：

1. 直观性：图形表意直白，无需额外文字解释，例如放大镜代表搜索；
2. 简洁性：剔除冗余细节，保障小尺寸下依旧清晰可读；
3. 一致性：同类功能使用相似图形语言，帮助用户建立图标‑功能的记忆联想；
4. 可识别性：在不同背景、不同使用场景中，都可以被快速分辨；
5. 反馈性：交互状态要有图形变化反馈，例如线性切换面性，提示用户操作生效。

四、图标规范实战探索与设定

1. 圆角体系设计

• 先确定整体视觉风格：本案例选择中性柔和的圆角语言，避开尖角的硬朗感，同时拒绝超大圆角带来的过度活泼，追求精致平衡的气质。

  

• 建立数值规则：采用倍增的理性数值体系（1‑2‑4‑8‑16‑32），用数学严谨性约束圆角，同时剔除多余的圆角档位。

  

• 严格保持全局一致：整套图标体系中圆角大小、形态统一；迭代过程持续收敛，特殊场景才允许例外。

  

2. 断点规则

断点风格要做到 “要么全部断点，要么全部不断点”。 本次方案最终放弃断点式图标：尽管设置拐点圆角、端点直角可以优化封闭图形观感，但图标表意形态丰富，断点位置、间隔很难做到全局统一，落地维护难度高。

3. 元素大小与视觉平衡

图标评判优先看视觉大小，而非画布物理尺寸。 先以物理网格对齐，出现视觉偏差时，可以适度调整图形形态补偿视觉错觉，实现视觉重量均衡；叠加附属小元素（加号、标签等），也要收敛统一尺寸档位。

4. 形意统一优化

• 表意同类，外形同源：含义相近的图标复用同一套基础图形框架再做延展，例如文档类、用户类图标，多版本迭代对比选出和整体风格适配的方案。
• 迭代优化图形：针对识别弱、观感差的图标做多版方案对比，兼顾美观与识别效率。

  

五、落地输出规范

1. 栅格与关键线 Key‑line

• 基础画布：24×24px 栅格；

  

• 安全容错区：主体图形控制在 23×23px，特殊图形可突破；

  

• 关键线：定义矩形、圆形、三角形等基础形状的参考边界，图标路径对齐关键线，采用居中描边绘制。

  

2. 常用尺寸档位

优先推荐：36px、24px、12px；备选补充：32px、20px、16px、8px，适配不同业务场景。

3. 线段、端点、间距规则

1. 拐点与端点：拐点圆角，端点直角；特殊圆点端点，圆点直径略大于线宽，优先 3px，特殊场景使用 2.5/3.5/4.5px，尽量少用。

   

2. 内部间距底线：图标内部元素间隙不小于基础线宽 2px，避免图形拥挤粘连。

   

   

3. 圆角档位映射

   

   • 直角：R0 → 外圆角 2x，内圆角 1x
   • 弱圆角：R1 → 外圆角 4x，内圆角 1x
   • 标准圆角：R3 → 外圆角 8x，内圆角 4x
4. 封闭与非封闭图形：闭合曲线图标可直接填充转换为面性图标；非闭合图形做面态时，附属小元素需要增加圆形底，保证显示效果。

   

4. 文件命名规范

• 线性图标：含义_状态(_circle)
• 面性填充图标：含义_状态(_circle)_filled

六、总结：规范不是一成不变的死文档

1. 重视团队协作：图标规范推导收敛是复杂工作，设计师既要严格遵循现有规则，遇到不适配业务的场景，也要主动反馈，持续完善文档。
2. 保持迭代意识：规范需要随业务持续迭代，在项目实践中验证、调整、补充。
3. 细节服务一致性：圆角、断点、间距、栅格等细节规则，最终目的都是为整套图标体系实现视觉统一。

转载：优设

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