前端UI基础组件p1 | 学习AI开发第一步系列

前端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打交道的人。觉得有用欢迎收藏转发有问题欢迎评论区交流。