组件Component
“两处都出现询盘卡，怎样改一次就同步？
界面组件术语
从重复界面、状态变化到反馈，把页面要求说得清楚而具体。 本页完整展示这一领域的全部词条。
组件与责任
把重复出现且能独立维护的界面责任收在一起。
状态与变化
说明界面在等待、成功、失败和不可操作时的样子。
反馈与兜底
让用户知道刚刚发生了什么，以及下一步能做什么。
输入与表单
让用户填写、选择、上传和提交信息的基础控件。
按钮Button
“添加一行和提交表单，怎样让按钮各自做对？
链接Link
“教程入口能否复制地址、键盘打开并正确到达？
单行输入框Input
“产品编号的前导零，为什么不能像数量一样去掉？
多行输入框Textarea
“三行需求怎样保留换行、上下文与失败后的输入？
数字输入框Number Input
“它是数字，还满足单位、范围和整数规则吗？
单选框Radio
“同一个问题的多个选项，为什么只能保留一项？
复选框Checkbox
“选了两项、剩下一项，全选该显示什么状态？
开关Switch
“名称不变，开启和关闭怎样表达当前设置？
滑块Slider
“拖动很快，但怎样准确调到目标数值？
评分Rate
“未评价、个人评分与汇总结果，应该怎样分开？
下拉选择Select
“显示名称与保存值，为什么不应等于列表位置？
自动完成Autocomplete
“输入文字、候选和已选身份，为什么不能混存？
级联选择Cascader
“上一级变了，怎样避免拼出无效的型号路径？
树形选择Tree Select
“展开一整个分支，为什么不等于选中了全部节点？
日期选择器Date Picker
“交货日期与全球同一瞬间，为什么不能混存？
时间选择器Time Picker
“只有 09:30，还缺哪些信息才能约好海外会议？
文件上传Upload
“文件名显示出来，是已经选择还是已经送达？
表单Form
“表单要帮助客户把资料交清楚，也要说明哪里填错、正在处理什么、提交后发生了什么。
颜色选择器Color Picker
“选出色值以后，还需要在什么背景下检查？
字段标签Label
“填完以后，怎样仍然看得懂每一格的含义？
占位提示Placeholder
“灰色示例地址存在，为什么实际值仍是空的？
搜索Search
“没有结果，是内容不存在，还是查询范围不对？
范围Range
“每格都是数字，上下界放在一起也有效吗？
分类体系Taxonomy
“多个查找入口怎样指向同一个稳定对象？
日历Calendar
“翻月份、选日期和建立事件，各改变什么？
时区Time Zone
“地区时间规则随日期变化，怎么避免写死时差？
色板Color Palette
“正文、背景、行动和错误，怎样各用其色？
辅助说明Helper Text
“哪些说明应该在用户填写之前就看得到？
内容与数据
把列表、详情、媒体、筛选与统计呈现得清楚可比较。
表格Table
“同一列混入不同单位，为什么就不能直接比较？
列表List
“筛选以后，怎样确保行上的操作仍对应原来的对象？
卡片Card
“一张卡片的内容与多个动作，怎样保持清楚关系？
标签Tag
“移除标签，为什么不是删除资料？
徽标Badge
“99+、真实零与未取得计数，怎样分别显示？
头像Avatar
“头像或首字母相同，为什么不能据此确认身份？
描述列表Descriptions
“只读详情中的未知、不适用和零，怎样区别？
统计数值Statistic
“两组样本大小不同，整体比例应该怎样计算？
标签页Tabs
“移动焦点与激活内容，什么时候是两步操作？
分段控制Segmented Control
“切换视图，为什么不应该丢掉筛选和所选对象？
折叠面板Collapse
“收起说明以后，内容权限有没有发生变化？
时间线Timeline
“计划、已发生和当前阶段，怎样不画混？
树形结构Tree
“两个不同目录下的配件，怎样用路径和 ID 区分？
轮播Carousel
“怎样让读者知道看到了哪里，并自己控制切换？
图片Image
“图中独有的信息，看不到图时还能怎样读懂？
文件File
“两份同名文件，为什么内容和适用版本可能不同？
图标Icon
“向下箭头是下载还是展开，怎样让用户不用猜？
引用Quote
“删掉原话的限定条件，会改变什么判断？
视频Video
“静音或无法播放时，怎样保留关键操作信息？
聊天界面Chat UI
“聊天记录里怎样区分模型建议和真实执行结果？
筛选Filter
“同组 OR、跨组 AND，实际会留下哪些记录？
图表Chart
“数据未知与真实为零，在图上为什么不能一样？
应用图标App Icon
“标签页、安装入口和分享图，为什么需要分别检查？
排序Sort
“数字排序、文字排序和筛选，各改变什么？
状态标识Status
“一项业务状态，需要什么事实才能成立？
资料档案Profile
“资料从哪里来，同名客户是否真是同一个主体？
评论与备注Comment
“内部备注和对外回复，怎样明确可见与发送范围？
导航Navigation
“从搜索进入深页，怎样知道位置并找到返回路径？
手风琴Accordion
“单项与多项展开，分别适合怎样的阅读任务？
下载Download
“开始下载以后，网页实际知道多少保存结果？
文档对象Document
“最新上传和当前有效的文档，是同一个概念吗？
引用与出处Citation
“来源真实可访问，就足够支持当前这句话吗？
消息Message
“回执超时后，怎样核对而不是盲目重复发送？
优先级Priority
“排在第一位的事情，有哪些可说明和复核的理由？
提示与反馈
在成功、等待、风险与失败时让用户知道真实状态。
警告提示Alert
“把重要事情写在能看见的位置，不必每次都跳出来拦住人。紧急程度不同，提醒方式也应不同。
轻提示Toast
“做成一件小事，可以轻轻报一声。需要人处理的问题，得留下来看得见、找得到。
通知Notification
“通知只是告诉你有事发生。看见提醒和把事情办完，是两步。
模态框Modal
“临时把一件事放到面前处理，但要留出口。关掉后，人应该回到刚才的位置。
抽屉Drawer
“像在桌边拉出一格资料，主列表还在。要不要暂停桌上的其他操作，要另外决定。
二次确认Popconfirm
“第一次点只是在提出动作，第二次明确答应才执行。反悔就该真的不动。
浮层说明Popover
“点一下旁边的小入口，展开一小块能阅读、能操作的补充信息。办完就收起，不必把整个页面锁住。
工具提示Tooltip
“不熟悉的词旁边补一句解释。真正决定怎么填写、怎么买的条件，仍应直接放在能看到的地方。
进度Progress
“先说清在数哪一步。文件传完，只是文件到达，后面可能还要校验、解析或人工查看。
骨架屏Skeleton
“先把座位排好，让人知道等来的内容放哪。客人没到不等于一定会到，更不能永远摆空椅子不解释。
结果页Result
“结束一段操作后，把办成什么、没办成什么、接下来怎么走放在一起。别让一个绿色对勾替你承诺更多。
加载指示Spinner
“转圈只能说“还在等”。进度多少、等谁处理、能否取消，需要另外说明。
详情区Details
“列表让你认出哪件事，详情把这件事展开讲完整。先对准同一个对象，再补资料。
加载状态Loading State
“告诉人现在在等什么。手里已有资料就标明它还是旧的，别一等新数据就把能看的东西全遮掉。
页面模块
首屏、品牌、案例、问答与行动入口的常用页面结构。
首屏Hero Section
“用户刚进来时，先让他知道你是谁、这页解决什么、下一步点哪里。
行动号召Call to Action
“别只介绍，明确告诉用户下一步该做什么。
用户原声User Voice
“让客户自己说出问题和结果，比自夸更有说服力。
页头Header
“每页顶部那条稳定的导航和品牌区域。
标志Logo
“让用户知道这是谁的网站，也让他下次能认出来。
导航栏Navigation Bar
“把最重要的去处放在每页都找得到的位置。
页脚Footer
“页面收尾处留给客户确认你是谁、怎么联系和还能去哪。
常见问题FAQ
“把大家都会问的问题提前说清，减少犹豫和重复沟通。
定价信息Pricing
“即使不能直接报死价，也要让客户知道价格怎样形成。
社会证明Social Proof
“让客户看到已有谁相信你、为什么相信你。
联系模块Contact
“让有意向的人知道找谁、用什么方式、多快会收到回应。
隐私说明Privacy
“客户把资料交给你前，先说清会怎么用、谁能看、怎样删除。
案例研究Case Study
“别只说做得好，把当时的问题、怎么做和结果拿出来。
布局与空间
用网格、弹性布局、定位与间距安排信息关系。
顶部导航布局Top Navigation Layout
“菜单在上面，主要内容在下面，是最常见的网站结构。
侧边栏布局Sidebar Layout
“左边负责找路，右边负责认真看内容。
单页布局Single Page Layout
“所有内容在一页里顺着读，需要时用锚点跳转。
文档布局Documentation Layout
“左边找章节，中间读内容，必要时旁边放补充。
卡片网格布局Card Grid Layout
“很多同类内容并排出现，方便扫一眼比较。
居中布局Centered Layout
“把注意力收在中间，不让长行文字把人拉散。
瀑布流布局Masonry Layout
“高矮不同的卡片像砌墙一样自然往下排。
分屏布局Split Screen Layout
“一边看，一边做，两个重点并排出现。
间距Spacing
“留白不是浪费，是告诉人哪些内容应该一起看。
外边距Margin
“一个区块和外面其他内容之间隔多远。
内边距Padding
“一张卡里面的文字离边框要留多少呼吸空间。
弹性布局Flexbox
“让一排东西自动对齐、分开或换行。
网格布局CSS Grid
“先划好行和列，再把内容放进对应格子。
层级Z-index
“页面上两样东西压在一起时，谁该在最上面。
吸顶Sticky Position
“往下滚时，重要导航仍留在你手边。
定位CSS Position
“决定一个元素是老老实实排队，还是相对某个位置浮出来。
居中Centering
“把该在中间的东西真正放稳，不只是数字上居中。
盒模型Box Model
“每个网页元素都像一个盒子，里面装内容，外面还有边框和留白。
溢出Overflow
“东西装不下时，是露出来、被裁掉还是允许滚动。
预览Preview
“先看成品会长什么样，再决定要不要真的发出去。
对齐Alignment
“该在一条线上的内容排齐，眼睛就更容易比较。
滚动Scroll
“屏幕装不下时，页面允许你沿内容继续走。
视觉与动效
排版、对比、令牌和动效共同决定页面是否清晰可信。
排版Typography
“文字怎样长、怎样排，决定人能不能看懂和先看哪里。
衬线与无衬线Serif / Sans-serif
“一种有笔画收尾，另一种更干净利落；选哪种要服务阅读。
文本截断Text Truncation
“一行放不下时，先收住，但别让用户以为内容本来就只有这么多。
分隔线Divider
“告诉读者：上一组讲完了，下一组开始。
圆角Border Radius
“方框的角是硬还是柔，会直接影响页面气质。
阴影Shadow
“给需要浮起来的内容一点层次，不是所有东西都要有影子。
透明度Opacity
“让某个内容更淡，但仍然看得见。
渐变Gradient
“颜色从这一边慢慢过渡到另一边。
圆角气质Corner Feel
“页面的边角是利落、柔和还是工具感强，要始终统一。
背景模糊Backdrop Blur
“浮在内容上面的菜单能看见后面，但不会被后面文字干扰。
深色模式Dark Mode
“不是把白底反相，而是整套颜色都重新为暗环境调过。
设计令牌Design Token
“把常用设计规则存成统一字典，改一次就能全站同步。
对比度Contrast
“重点要够明显，文字也要看得清。
视觉层级Visual Hierarchy
“页面不能让所有东西抢同样的注意力。
过渡Transition
“状态变化别突然跳，给人一点可理解的过程。
动画Animation
“通过运动告诉用户发生了什么，但不能为了炫而分散注意力。
缓动Easing
“动画不是匀速走，起停节奏决定它像不像真实动作。
弹簧动效Spring Animation
“像东西被轻推后有一点回弹再停住。
淡入淡出Fade
“内容不是突然冒出来，而是轻轻显现或离开。
悬停Hover
“鼠标放上去时，告诉用户这里能点或还能看到什么。
字体Font
“同一套字的形状和粗细，决定文字看起来像谁、读起来累不累。
遮罩层Overlay
“临时把背景压暗，让人先处理眼前这件事。
背景Background
“先铺好内容站立的底面，再保证文字和操作看得清。
主题Theme
“同一套内容换一整组协调外观，而不是逐个组件重新改色。
“参数待工程师确认。”
关联询盘 D01，没有发给客户