前端UI基础组件图鉴：8个原子组件，认全它们看任何设计稿都不发怵
按钮、标签、徽标、头像……这些每天都见的小东西，但当你开始用AI开发时，你是否准确地叫得出它们的名字、说得出用法，知道怎么跟AI描述吗？这篇文章把8个最基础的UI组件掰开揉碎讲清楚，附AI沟通话术和常见误区。
写在前面
几乎所有界面都会出现的原子组件，先认全它们，看任何设计稿都不发怵。
这篇文章面向三类读者：刚开始用AI写代码、但没系统学过前端的新手；前端零基础、看到设计稿叫不出组件名字的爱好者；以及有开发经验、但不太会向AI精准描述前端需求的开发者。
每个组件都会讲清楚：叫什么、长什么样、什么时候用、怎么跟AI描述（附好/坏话术对比）、常见误区是什么。看完这一篇，下次看设计稿、跟开发沟通、给AI提需求，你都能精准叫出名字、说清要求。
1. 按钮（Button）
别名：主要按钮、次要按钮、幽灵按钮
这是什么
触发一次动作的点击控件；按优先级分主/次/幽灵/危险等变体。
按钮是全站出现率最高的控件，准确的指令词能让 AI 一次生成对的视觉层级：主按钮 primary（页面核心动作，通常唯一）、次按钮 default、幽灵按钮 ghost（低强调）、危险按钮 danger（删除类）、文字链接按钮 link。
沟通要点三件套：按钮文案、点击后的行为、加载/禁用状态。比如「提交按钮点击后调接口，请求中变为 loading 防重复提交」——如果不交代状态，AI 生成的按钮连防连点都没有。
触发一个立即动作的可点击块。一个区域通常只有一个主按钮（实心强调色），其余用次要（描边）或幽灵（无框）按钮弱化层级。
打个比方
按钮像电梯呼叫键：文案是乘客意图，按完灯亮/梯动就是状态反馈——没人会按完不看灯。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：做一个主按钮「保存」，点击后校验表单并调接口，请求期间按钮置 loading 且禁用，成功后跳详情页。
❌ 避免：搞个好看点的按钮 —— 缺文案、优先级与点击行为，AI 只能猜一个带样式的空壳。
常见误区
- 主按钮可以随便放多个？每屏主导动作应唯一，多个主按钮会稀释视觉引导。
实战要点
触发一个立即动作的可点击块。
一个区域通常只有一个主按钮（实心强调色），其余用次要（描边）或幽灵（无框）按钮弱化层级。
2. 图标按钮（Icon Button）
别名：方形按钮、工具按钮
这是什么
只有图标的按钮：省空间，但必须配可读名称（aria-label）。
图标按钮把文字压缩成一个图形，常用于操作密集区（表格行内编辑/删除、导航栏）。代价是含义依赖用户识字库——同一个垃圾桶图标，对某些用户可能是「删除」，对另一些可能就是「回收站」。
工程硬规矩：图标必须带 title 或 aria-label，否则屏幕阅读器读不出来，AI 审查也容易漏；触控目标建议不小于 32px 以免手机误触。给 AI 的格式：「行内放三个图标按钮：编辑、删除（danger）、更多，均需 aria-label」。
只放图标不放文字的按钮，常用于工具栏：搜索、刷新、更多。必须配 title 或 aria-label 说明用途。
打个比方
图标按钮像机场卫生间标志：不识字也懂，但少个「女」字（无障碍标签）就会有人走错门。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：表格操作列用三个 icon-button，均带 aria-label；删除用红色图标并接二次确认。
❌ 避免：就放个小图标就行 —— 没说含义与无障碍标注，AI 产出无标签纯图形按钮，点进去才知道是什么。
常见误区
- 图标按钮好看就够了？可访问性与触控尺寸是硬约束，纯装饰的图标按钮是可用性事故。
实战要点
只放图标不放文字的按钮，常用于工具栏：搜索、刷新、更多。
必须配 title 或 aria-label 说明用途。
3. 悬浮按钮（Floating Action Button）
别名：FAB、浮动按钮、悬浮操作按钮
这是什么？
悬浮在内容之上、常驻屏幕右下角的圆形主操作按钮，App 里多代表「新建」。一屏只放一个；它是动作不是导航，别拿来当返回或菜单用。
实战要点
悬浮在内容之上、常驻屏幕右下角的圆形主操作按钮，App 里多代表「新建」。
一屏只放一个；它是动作不是导航，别拿来当返回或菜单用。
4. 标签（Tag / Chip）
别名：Chip、标签纸
这是什么？
小尺寸类别标记：可着色表状态、可关闭、可点击筛选。
Tag/Chip 用一句话标记对象的类别或状态：订单状态、文章分类、技能标签。与徽标的区别：Tag 是静态分类信息，Chip 更强调可交互（点击筛选、右上角关闭移除）。
高频用法与细节：不同状态配不同语义色（成功绿/警告橙/危险红/信息蓝）；可关闭的 Tag 关闭后要回调父级更新；可点击筛选的 Chip 要体现选中态。嵌在输入框里的形态叫输入型 Chip（标签输入框）：回车固化、× 移除，收件人与筛选条件回显都是它。给 AI 的句式：「订单状态列渲染成 Tag：待支付橙、已支付蓝、已发货紫、已完成绿、已取消灰，可点击按状态筛选」。
标记内容属性的小色块，如分类、状态、关键词。可点击筛选，可带 × 删除；胶囊形是常见变体。
打个比方
标签像超市货架的分类牌：告诉你这是什么类（状态）；点牌子就只看这一类（筛选），拆掉牌子（关闭）则货品不再属于该类。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：多选筛选用 Chip：选中标签高亮并显示勾号，右上角小叉可单独移除，底部显示已选条件可一键清空。
❌ 避免：给状态加个标签 —— 颜色语义与是否可交互未定，AI 生成清一色灰 Tag，状态一眼分不出来。
常见误区
- 标签颜色随便配？状态色需全站统一语义（成功/警告/危险），换项目也要沿用约定。
实战要点
标记内容属性的小色块，如分类、状态、关键词。
可点击筛选，可带 × 删除；胶囊形是常见变体。
5. 徽标（Badge）
别名：红点、角标、计数徽标
这是什么
附在图标/文本上的计数或红点：未读、通知、状态量的视觉提示。
徽标是「提示有新内容」的微型元件：数字徽标（未读 99+）、圆点徽标（仅表示有）、状态徽标（线上/离线带色点）。关键参数：数量上限（99+ 而非 1000）、独立或包裹子元素（小方块挂图标角上）。
与 Tag 的分工要分清：Badge 是「数量/状态点」，Tag 是「分类标签」。给 AI 的句式：「侧边栏消息图标右上角未读徽标：数量超过 99 显示 99+，无未读时隐藏；hover 标题显示完整数字」。
附着在图标或按钮角上的小指示物：红点表示「有新内容」，数字表示未读数量，99+ 是溢出显示约定。
打个比方
徽标像 App 角标：红点告诉你「有新消息」，数字告诉你「具体几条」，超过两位数就显示省略（99+）。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：消息 Tab 右上角未读徽标：0 时隐藏，1~99 显示数字，超过 99 显示 99+；点开会话后对应徽标清零。
❌ 避免：加个小红点就行 —— 什么条件出现、数量上限、点击后如何清零都没定义，红点会成为永不消失的谜。
常见误区
- 徽标越大越醒目越好？超过两个活跃徽标区域会互相打架，视觉层级反而崩坏。
实战要点
- 附着在图标或按钮角上的小指示物：红点表示「有新内容」，数字表示未读数量，99+ 是溢出显示约定。
6. 头像（Avatar）
别名：用户图、首字母头像
这是什么
展示人/实体的图形：图片、首字、图标三级方案与统一尺寸。
头像标准化地表达「这是谁」：图片头像、字母/汉字占位头像（未设置或加载失败时）、图标头像（品牌/机器人）。企业应用里要有统一的尺寸阶梯与在线状态点。
细节坑：图片加载失败要优雅降级为首字头像而非破图；群头像（多人拼接 4 宫格）；隐私考虑。给 AI 描述：「成员列表头像：有头像显示图片，无头像显示姓名末两字，右侧带在线状态绿点，点击放大预览」。
代表用户或团队的圆形/圆角方图。没有图片时用首字母或图标兜底；多头像可叠放，常配在线状态点。
打个比方
头像像门禁照片：认得出是谁（身份），没有照片就登记名字（首字占位），加个「在岗」灯（状态点）让同事知道你在不在。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：用户头像组件：优先图片，加载失败或为空时按 name 生成首字头像并随机柔和底色，尺寸支持 sm/md/lg。
❌ 避免：放个头像就行 —— 失败降级、尺寸体系、状态点都没说，AI 会做出一堆破图时碎裂的头像。
常见误区
- 头像必须是图片？现代组件库普遍内置「图片→首字→图标」三级降级，这才是健壮做法。
实战要点
代表用户或团队的圆形/圆角方图。
没有图片时用首字母或图标兜底；多头像可叠放，常配在线状态点。
7. 分割线（Divider）
别名：分隔线、区隔线
这是什么
水平/垂直细分区域的分隔线：可带标题文字，别用 border 硬凑。
分割线把内容按逻辑分区：设置项之间的细分、列表分组、侧边栏标题分割。形态：水平线、垂直线、带文字（标题在线上居中或左侧）。
与间距的取舍：简单的视觉分离优先用间距（留白），语义分界才用分割线——线用多了画面会碎。给 AI 的句式：「设置页用带标题的水平分割线：每段标题（通用/通知/隐私）置于线左，线颜色用弱化色，段间再加 24px 间距」。
划分内容区域的细分隔：实线、虚线，或带文字的标题分割线。能留白解决的别加线。
打个比方
分割线像文档里的小节线：正文留白够用就不用画线，需要强调「这是一节」才画条线再配个小标题。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：评论区每条留言之间用 1px 浅色分割线，删除按钮 hover 才出现，线宽与全站 line token 一致。
❌ 避免：感觉有点乱加几条线吧 —— 无目的加线会制造视觉噪音；先判断是信息分组问题还是间距问题，再决定用线还是留白。
常见误区
- 分割线必须完整贯穿？「虚线」「短实线」「带字分割」都是合法形态，按内容层级选即可。
实战要点
划分内容区域的细分隔：实线、虚线，或带文字的标题分割线。
能留白解决的别加线。
8. 折叠面板（Accordion / Collapse）
别名：手风琴、折叠
这是什么
标题栏点击展开/收起内容区：FAQ、分组表单、层级精简的利器。
折叠面板把「占地方」的内容压成一行标题，点击展开：FAQ 问答、筛选条件分组、设置项分组。要点：同时展开多个还是只能一个（手风琴模式）、默认展开哪个、展开动画与图标旋转。
与 Tabs 的分工：内容是并列排布且希望同时可见一部分时用折叠；严格互斥时用 Tab。给 AI 的句式：「FAQ 列表用折叠面板：每次只展开一项（手风琴），其余自动收起，展开箭头旋转 180 度，默认展开第一项」。
点击标题展开/收起内容的面板组，用于把长内容收进短版面，如 FAQ、设置分组。同一时刻展开一项还是多项要约定。
打个比方
折叠面板像行李箱的夹层拉链：平时贴着不占地方（收起），要拿哪层的东西拉开哪层（展开），同时拉两层互相挤着也不方便（互斥模式）。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：高级筛选用折叠面板：默认收起只显示「更多筛选」按钮，展开后多行条件分组，收起时保留已选条件。
❌ 避免：做几个能展开的块 —— 互斥还是多开、默认态、内容结构都没说，AI 只能做无状态的展开动画。
常见误区
- 折叠面板只能手风琴式（同时开一个）？「同时可开多个」也是合法模式，取决于内容是否互斥。
实战要点
点击标题展开/收起内容的面板组，用于把长内容收进短版面，如 FAQ、设置分组。
同一时刻展开一项还是多项要约定。
小结
这8个基础组件是UI的原子单位。它们的共同设计原则是：层级分明（一个区域一个主按钮）、状态完整（hover/active/disabled都要有）、语义清晰（颜色和图标不能乱选）、可访问性到位（图标按钮必须有文字替代）。把这些基础打牢，后面的表单、导航、数据展示都是它们的组合与延伸。跟AI沟通时，记住「组件名+优先级+点击行为+状态」四要素，AI一次就能生成对的结果。
本文基于「浆果 · 标准术语网」整理，适合前端开发、UI设计、产品经理以及所有需要跟界面和AI打交道的人。觉得有用欢迎收藏转发，有问题欢迎评论区交流。
