Vibe coding需要知道的设计术语——图标符号

经常看到朋友和同事在 Vibe Coding 时吐槽 AI “听不懂人话”: “高级感”、“眼前一亮”，“再改改”，结果页面越改越乱。可能并非 AI 能力不够，更多是因为我们采取了“玄学抽卡”的策略。我们无法将思考外包给模型，但是 AI 时代的学习范式也得改变。

LLM 在 Pre-training 与 RL 阶段均基于海量代码数据训练，对英文专业术语的语义锚点远强于中文（且中文语义信息熵过高，容易产生歧义），怎么和 Agent 对齐很重要，打算长期整理一份术语速查表分享给佬友们，方便查阅

视觉设计篇 roadmap

• Typography / 文字排版 Vibe coding需要知道的设计术语——文字排版


• Color system / 色彩系统 Vibe coding需要知道的设计术语——色彩系统


• Grid & Layout / 栅格与布局 Vibe coding需要知道的设计术语——布局排版


• Iconography / 图标系统


• Spacing & Imagery / 间距与图像


• Motion & Interaction / 动效与交互


• 合订版

---

Iconography 处理界面里的图标表达。图标可以指向对象、动作、状态，也可以作为导航、按钮、提醒和品牌识别的一部分。

一个图标常常只有 16px、20px 或 24px。用户能不能看懂它，要看图形本身，也要看位置、颜色、文字标签、状态反馈和已有经验。

1. 图标基础与类型 (Icon Basics & Types)

Icon (图标)

Icon 是界面里的功能性图形。它可以表示搜索、删除、设置、通知、下载，也可以表示文件、用户、日历、购物车这类对象。

图标常见于按钮、导航、列表、输入框和工具栏。好的图标不需要很复杂，但要让用户在当前界面里快速判断它指向什么。

Symbol (符号)

Symbol 更依赖约定。警告三角、禁止符号、信息 i、收藏星形，不一定描绘真实物体，但用户已经学会了它们的含义。

符号适合表达抽象含义。问题在于，不同产品和文化环境里，同一个符号可能有不同理解。含义不够稳定时，需要文字或上下文补充。

Pictogram (象形图)

Pictogram 更接近公共导视里的象形标识，比如洗手间、出口、无障碍设施。它通常靠接近真实对象或场景的轮廓来识别。

象形图比抽象符号更直观，但细节不能太多。尺寸变小时，轮廓和主体特征比装饰细节更重要。

Object Icon (对象图标)

Object Icon 表示界面里的名词，例如文件、用户、购物车、日历、相机。它告诉用户这里有什么，或当前内容属于哪一类。

对象图标经常和列表、卡片、导航项一起出现。它的重点是识别内容类型，不一定表示可以点击。

Action Icon (动作图标)

Action Icon 表示用户可以做什么，例如新增、删除、下载、分享、复制、刷新。它通常出现在按钮、菜单、工具栏或悬浮操作里。

动作图标要避免歧义。叉号可能是关闭，也可能是删除；箭头可能是返回、跳转、上传或展开。风险较高的动作最好配文字或确认反馈。

Status Icon (状态图标)

Status Icon 表示对象或系统当前处于什么状态，例如成功、错误、同步中、已锁定、在线、离线。

状态图标通常和颜色、文案一起使用。只靠图形很容易误读，尤其是错误、警告、禁用、加载这类状态。

---

2. 识别与语义 (Recognition & Semantics)

Recognition (识别性)

Recognition 看用户第一次看到图标时能不能明白。常用操作通常优先使用成熟约定：放大镜表示搜索，垃圾桶表示删除，齿轮表示设置。

识别性受尺寸、形状、位置、颜色和文字影响。图标越小、越抽象，越需要上下文帮它把含义说清楚。

Memorability (记忆性)

Memorability 看用户用过以后能不能记住。图标的形状、位置和行为稳定，用户才容易形成记忆。

同一个动作不要频繁更换图形。删除一会儿用垃圾桶，一会儿用叉号，用户就要重新判断。

Ambiguity (歧义)

Ambiguity 指图标可能被理解成多个意思。锁可以表示安全设置，也可以表示内容已锁定；云可以表示云端空间，也可以表示上传或同步。

降低歧义通常比追求特别更重要。低频功能、风险操作和抽象概念更需要文字标签、tooltip 或明确反馈。

Metaphor (隐喻)

Metaphor 用间接图形表达抽象概念。闪电表示速度，盾牌表示安全，星形可以表示收藏或推荐。

隐喻有表现力，也容易误读。越抽象的功能，越不能只靠图标本身承担全部含义。

Convention (约定)

Convention 是用户已经熟悉的一套图形习惯。例如放大镜表示搜索，齿轮表示设置，垃圾桶表示删除，铃铛表示通知。

约定会随平台和产品类型变化。移动端、桌面端、后台系统、内容产品里的图标习惯不完全一样。

Literalness (直观表达)

Literalness 指图标直接画出对象或场景。相机、文件夹、购物车、日历、洗手间这类对象都适合直观表达。

直观表达适合具体名词。抽象概念很难完全画出来，这时通常要依赖约定、文案或图标组合。

---

3. 图标风格 (Icon Style)

Outline Icon (线性图标)

Outline Icon 主要靠描边形成轮廓，视觉重量比较轻。工具栏、列表操作、默认状态和密集界面里常见这种风格。

线性图标要控制线宽。线太细，小尺寸会虚；线太粗，内部空间会被挤掉。

Filled Icon (面性图标)

Filled Icon 用填充面形成形状，通常比线性图标更醒目。选中态、强调态、底部导航和主要入口经常使用面性图标。

面性图标的视觉重量更大。同一组图标里，如果有的全填充、有的只描边，界面会显得轻重不一。

Two-tone Icon (双色图标)

Two-tone Icon 用两种颜色或两级明暗区分主结构和辅助结构。它可以增加层次，但也更容易变乱。

双色图标适合需要表达层级或状态的场景。普通工具栏里如果每个图标都有多层颜色，扫描效率反而会下降。

Stroke (描边)

Stroke 决定线条粗细、端点样式和连接方式。线性图标的清晰度很大程度取决于描边。

同一套图标要有稳定的描边规则。线宽忽粗忽细，图标放在一起会显得散。

Fill (填充)

Fill 决定图标的块面重量。填充面积越大，图标越容易吸引注意。

填充图标适合强调，但要和文本、按钮、背景保持平衡。所有图标都很重时，界面会显得吵。

Corner Radius (圆角)

Corner Radius 会改变图标气质。尖角更硬朗，圆角更柔和。

圆角需要成套控制。同一组图标里，圆角一会儿很圆、一会儿很尖，会破坏风格稳定性。

Visual Weight (视觉重量)

Visual Weight 指图标看起来有多重。同样是 24px，实心圆会比空心方框重，齿轮会比简单箭头更抢眼。

视觉重量不等于像素面积。图标是否抢眼，还和形状复杂度、填充比例、线宽和颜色有关。

Optical Balance (视觉平衡)

Optical Balance 是让不同形状看起来同样稳定。数学上居中，不一定看起来居中。

三角形、箭头、播放按钮、定位图标这类不对称形状，经常需要略微偏移。这样放进按钮或导航时才像真正居中。

---

4. 界面用法 (Interface Usage)

Icon Button (图标按钮)

Icon Button 是只用图标表达操作的按钮，例如关闭、返回、搜索、更多操作。

图标按钮节省空间，但最依赖用户理解。高风险、低频或容易误操作的功能，不适合只靠一个图标表达。

Leading Icon (前置图标)

Leading Icon 放在文字前面，帮助用户快速识别入口、内容类型或操作对象。

前置图标通常是辅助扫描的线索。文字才是主要含义时，图标不应该比文字更抢眼。

Trailing Icon (后置图标)

Trailing Icon 放在文字后面，常见于跳转、展开、状态和次要操作。

后置图标要避免和主要动作混淆。比如右箭头可以表示进入详情，向下箭头可以表示展开菜单。

Label (标签)

Label 是界面上可见的文字说明。它能直接解释图标含义，尤其适合低频功能、风险操作和抽象概念。

图标和文字配在一起时，文字承担主要含义。很多情况下，用户真正读的是 label，图标只是帮助定位。

Hit Area (点击热区)

Hit Area 是用户实际可点击或可触摸的区域。它通常应该大于图标本身。

视觉上 16px 或 20px 的图标，不代表交互区域也只有这么大。移动端和高频操作尤其需要稳定的点击热区。

Tooltip (提示)

Tooltip 是悬停或聚焦时出现的补充提示。它常用于解释纯图标按钮、工具栏操作或不常见功能。

Tooltip 不能替代可见文字，也不能替代无障碍名称。移动端没有稳定的 hover 行为，不能只靠 tooltip 解释重要操作。

Accessible Name (无障碍名称)

Accessible Name 是屏幕阅读器读取的名称。纯图标按钮如果没有可读名称，辅助技术用户可能只听到“按钮”。

装饰性图标可以隐藏。表达操作或状态的图标需要正确语义，尤其是关闭、删除、提交、错误这类图标。

Badge (徽标)

Badge 常附着在入口、头像或图标旁，用来显示数量、提醒或状态标记。

Badge 要控制尺寸、数量显示和优先级。所有入口都挂提醒，用户很快就会忽略它们。

Motion Feedback (动效反馈)

Motion Feedback 用动效表达加载、同步、展开、收藏、成功或失败等状态变化。

动效应该帮助用户理解变化。加载和状态变化类图标还要考虑减少动效偏好，避免让反馈变成干扰。

---

5. 图标系统与前端实现 (Icon System & Front-end Engineering)

Icon Set (图标集)

Icon Set 是一套被管理起来的图标资产。它需要稳定的风格、尺寸、命名、语义和使用方式。

图标系统越大，越不能靠记忆维护。命名混乱，设计和开发会找不到图标；同一个语义出现多个图标，用户也会困惑。

Keyline (关键线)

Keyline 是图标网格里的形状参考线，用来约束圆形、方形、横向图标和纵向图标的大致比例。

不同形状如果都贴满外框，看起来并不会一样大。关键线可以帮助它们保持接近的视觉尺寸。

Bounding Box (外框)

Bounding Box 是图标导出或组件占用的外框。它决定图标在按钮、列表项、导航项里的占位尺寸。

外框不稳定时，图标对齐会变得很难。即使图形本身大小不同，组件占位也应该有清楚规则。

Pixel Grid (像素网格)

Pixel Grid 决定线条和边缘是否落在清晰的像素位置上。小尺寸图标尤其依赖像素级对齐。

半像素位置可能让描边发虚。16px、20px 这类尺寸里，清晰轮廓往往比细节更重要。

SVG (可缩放矢量图形)

SVG 是现代界面图标最常用的格式。它适合线性图标、面性图标和可缩放的矢量图形。

普通 UI 图标通常优先用 SVG。它清晰，能跟随主题颜色，也方便封装成前端组件。

Icon Font (图标字体)

Icon Font 把图标当作字体字形使用，曾经常见于批量加载图标。

它在语义、对齐、渲染和无障碍上都有局限。现在很多项目会用 SVG 或组件图标替代它。

Raster Icon (位图图标)

Raster Icon 是位图图标，适合细节较多的插画、品牌图形或带纹理的图形。

普通 UI 操作图标很少优先用位图。高分辨率屏幕、多尺寸适配和主题变化都会增加维护成本。

Component Icon (组件图标)

Component Icon 是把图标封装成前端组件。组件可以统一名称、尺寸、颜色、无障碍属性和状态。

大型图标库通常需要组件化管理。这样图标才能被检索、复用、替换和主题化。

Inline SVG (内联 SVG)

Inline SVG 是把 SVG 直接写进 DOM。它可以被 CSS、属性和脚本细致控制。

需要变色、动画或局部样式的图标适合内联 SVG。代价是 DOM 会更重，也要注意重复代码。