← 返回多端学习对照表

通用手机端常用组件

移动端通用组件库，按分类组织，共 0 个组件档案。

说明：表格列较多，窄屏可横向滚动；「结构解剖」红线拆解图待后续以配图补充，此处先给出核心构成与间距标注。

一、 导航与布局类 (Navigation & Layout)

用于构建 App 的骨架，帮助用户在不同页面之间穿梭。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
1
状态栏
Status Bar
/ˈsteɪtəs bɑːr/
 屏幕最顶部，展示时间、信号、电量等系统级信息的常驻条。
  • 不要在状态栏区域叠加自定义内容遮挡系统信息。
  • 不要自定义其颜色导致与系统图标对比度不足。
  • 任何 App 首屏必须显示。
  • 全屏视频 / 游戏可临时隐藏。
  • 核心构成：时间文本(左)、系统图标群(右：信号/运营商/Wi-Fi/蓝牙/电池)、刘海/灵动岛区(中)。
间距：iOS 左右各 16px 安全边距；状态栏高度 20px(iOS)/24px(Android)。红线拆解图待补。
 移动端：Default、Hidden(全屏时)、Light/Dark(随背景适配)。
PC：N/A（移动专属）。
  • 默认(深/浅色)
  • 隐藏式
  • 沉浸透明式(视频/地图)
  • 高度：iOS 20px(普通)/44px(含灵动岛区域)；Android 24px。
  • 字号：时间 15–17px。
  • 颜色：随背景深浅切换。
  • 触发：系统级，无用户触发。
  • 反馈：来电/录音时背景变红/蓝并动画。
  • 响应式：横屏时部分图标隐藏。
  • 热区：N/A(系统占用)。
  • 对比度：满足 WCAG 2.1 AA。
  • 开发：系统层(非 <div>)，不可 DOM 操作。
2
顶部导航栏
Navbar / App Bar
/ˈnævˌbɑːr/
 位于状态栏下方，承载页面标题与主要导航/操作入口的横向条。
  • 不要放超过 2 个右侧操作图标(拥挤)。
  • 不要用它做全局 Tab 切换(那是 Tab Bar 职责)。
  • 几乎所有二级页顶部。
  • 需返回、需标题、需右上角操作的页面。
  • 核心构成：左侧返回键(←)、居中/左对齐标题、右侧操作区(图标/文字按钮)、底部分隔线。
间距：左右安全边距 16px；标题与按钮间距 ≥8px；高度 iOS 44px / Android 56px。红线拆解图待补。
 移动端：Default、Pressed(返回键)、Disabled(不可返回时隐藏)、Transparent(透明导航栏)。
PC：N/A。
  • 标准栏
  • 大标题栏(Large Title, iOS)
  • 透明/沉浸式
  • 搜索内嵌式
  • 高度：iOS 44px(内容区)/Android 56px。
  • 字号：标题 17px/Bold。
  • 操作图标：24px。
  • 触发：点击返回(←)或操作图标。
  • 反馈：Android 有涟漪；滚动时大标题收缩为小标题。
  • 响应式：折叠屏展开时两侧留白增加。
  • 热区 ≥44×44pt。
  • 对比度：AA。
  • 开发：语义 <header>+返回用系统导航；Android Toolbar/TopAppBar。
3
底部标签栏
Tab Bar
/tæb bɑːr/
 固定于屏幕底部，承载 App 最顶层全局导航的条形菜单。
  • 不要放非导航功能("发布"应悬浮按钮)。
  • 标签数 ≤5 个。
  • 进入子页不要隐藏它(应保持全局可达)。
 3–5 个平级一级页面的 App(首页/发现/消息/我的)。
  • 核心构成：图标(上)+文字标签(下)的等分项、未选/选中态、顶部分隔线/阴影、底部安全区留白。
间距：图标 24–28px、文字 10–11px；高度 iOS 49px(+安全区)/Android 56–80px。红线拆解图待补。
 移动端：Default、Selected(选中,主色)、Pressed、Badge(带未读数)。
PC：N/A。
  • 纯图标(无文字)
  • 图标+文字
  • 带中间凸起按钮
  • Material 底部导航
  • 高度：iOS 49px(内容)/Android 56px(含安全区更高)。
  • 图标：25px；字号：10–11px。
  • 选中色：品牌主色。
  • 触发：点击切换。
  • 反馈：切换页面+图标变色/微缩放。
  • 响应式：横屏/iPad 可隐藏或转为侧边。
  • 热区 ≥48×48(整项可点)。
  • 对比度：AA。
  • 开发：<nav>+<a>，当前项 aria-current。
4
侧滑抽屉/侧边栏
Drawer / Sidebar
/ˈdrɔːər/
 从屏幕左/右边缘滑出的临时面板，承载次级导航或快捷操作。
  • 不要默认常驻展开遮挡内容。
  • 核心功能不要只放进抽屉(被发现性差)。
  • 滑出后背景需遮罩，不要全不透明。
  • 功能繁多的 App(邮箱/云盘)全局菜单。
  • 筛选/设置入口。
  • 核心构成：遮罩层(Scrim)、面板容器、头部(头像/账号)、导航项列表、分割线、底部操作。
间距：面板宽 75% 屏宽或 280–320px；列表项高 48–56px；左右内边距 16px。红线拆解图待补。
 移动端：Closed、Open、Peeking(边缘露出)、Closing(遮罩渐隐)。
PC：可常驻为 Sidebar(默认展开)。
  • 左侧导航抽屉
  • 右侧筛选抽屉
  • 常驻侧边栏(平板/桌面)
  • 底部 Sheet 抽屉
  • 宽度：移动 280–320px(或 75vw)；桌面 240–280px。
  • 遮罩：40–50% 黑。
  • 滑动：~250–300ms。
  • 触发：边缘滑动/汉堡键/手势。
  • 反馈：随手指跟手滑动，松手吸附开/关；遮罩点击关闭；Esc 关闭(桌面)。
  • 热区 ≥44pt。
  • 焦点陷阱(focus trap)在抽屉内。
  • 对比度：AA。
  • 开发：<aside>+role="dialog"；导航用 nav。
5
分段控制器/标签页
Tabs
/tæbz/
 同一内容层级内，用于横向切换若干平级视图的控件。
  • 不要做跨层级全局导航(那是 Tab Bar)。
  • 选项 ≤5 个(否则用滚动标签)。
  • 不要与导航栏标题混用造成层级混乱。
 同一页内子分类切换(推荐/关注/热门)；设置项分组。
  • 核心构成：标签项(文字)、选中指示条(下划线/填充)、可滚动轨道、左右渐隐边缘。
间距：项间距 24–32px；指示条高 2–3px；高度 48px。红线拆解图待补。
 PC：Default、Hover、Active、Disabled。
移动：Default、Selected、Pressed、Scrollable(边缘露半项)。
  • 等宽标签
  • 滚动标签(超屏宽)
  • 带图标标签
  • 下划线式/填充胶囊式
  • 高度：48px。
  • 字号：14–15px；选中 Medium/Bold。
  • 指示条：2–3px；选中色：主色。
  • 触发：点击/滑动切换。
  • 反馈：内容滑动切换+指示条位移动画(~200ms)；点击标签回顶。
  • 热区 ≥44pt。
  • role="tablist"+aria-selected。
  • 对比度：AA。
  • 开发：role="tab" 的 <button>。
6
搜索栏
Search Bar
/sɜːrtʃ bɑːr/
 带放大镜图标的输入控件，用于关键词检索，常驻顶部或下拉展开。
  • 不要放过长占位提示挤占。
  • 不要默认展开全屏搜索遮挡列表(除非主动触发)。
  • 空结果不要只显示"无"。
  • 内容量大的列表页(商品/通讯录/文章)顶部。
  • 全局搜索入口。
  • 核心构成：搜索图标、输入框(占位文本)、清除按钮(×)、取消/搜索按钮(右)、圆角容器。
间距：高度 36–44px；圆角 8–10px；左右内边距 12px；图标 20px。红线拆解图待补。
 PC：Default、Hover、Focus(高亮+展开)、Disabled。
移动：Default、Focused(键盘/语音)、Active、With-Value(显清除×)。
  • 常驻嵌入式
  • 点击展开式
  • 带筛选按钮
  • 语音搜索式
  • 结果页搜索栏
  • 高度：36–44px。
  • 字号：14–16px；圆角：8–10px。
  • 图标：20px；占位色 #9aa1ab。
  • 触发：点击聚焦/回车搜索。
  • 反馈：聚焦高亮+右侧出取消键；实时联想下拉；清除×一键清空。
  • 热区 ≥44pt。
  • <input type="search">+aria-label。
  • 对比度：AA。
7
页面指示器/轮播点
Page Controls
/peɪdʒ kənˈtroʊlz/
 一组小圆点，指示轮播/引导页当前所处位置与总数。
  • 不要超过 5–7 个点(过多用数字/进度条)。
  • 不要放在会被内容遮挡的底部(如 Tab Bar 上)。
  • 不要在无滑动场景使用。
  • 引导页(首次启动)。
  • Banner 轮播、图片画廊分页。
  • 核心构成：圆点(未选小/选中大)、间距、容器。
间距：点径 6–8px、选中 8–10px(胶囊)、点间距 8px；常距底部 16–24px。红线拆解图待补。
 移动端：Default(未选)、Current(选中放大/变色)、Compressed(首尾收缩胶囊)。
PC：N/A。
  • 小圆点
  • 拉长胶囊(选中横条)
  • 数字(3/8)
  • 进度条式
  • 可点击跳转
  • 点径：6–8px；选中 8×16px 胶囊。
  • 间距：8px。
  • 颜色：未选 30% 黑/白，选中主色。
  • 触发：滑动内容自动同步。
  • 反馈：点随页码位移动画(弹性)；点击(若可点)跳转。
  • 热区 ≥44pt(整组可点若可跳转)。
  • 对比度：AA。
  • 开发：role="tablist" 或纯装饰时 aria-hidden。
8 首页/当前
面包屑
Breadcrumbs
/ˈbrɛdkrʌmbz/
 以"层级路径"形式展示用户当前位置，支持逐级回退的导航。
  • 不要用于浅层级(≤2 级)页面(多余)。
  • 不要超过 3–4 级(移动端极占地)。
  • 不要用它替代返回键。
  • 电商分类多级钻取。
  • 复杂表单步骤、文件管理层级。
  • 核心构成：层级文本项、分隔符(>/)、当前项(末级,不可点)、可点击前项。
间距：项间距 8px；分隔符 4px；字号 13–14px；常置导航栏下方或内容顶部。红线拆解图待补。
 PC：Default、Hover(可点项变色+下划线)、Active(当前)。
移动：Default、Pressed、Collapsed(超出省略号…)。
  • 全路径式
  • 省略折叠式(首页/…/当前)
  • 带图标式
  • 返回箭头+父级(移动常见)
  • 字号：13–14px。
  • 分隔符："/" 或 ">"。
  • 颜色：前项灰、当前主色/黑。
  • 触发：点击前级项回退。
  • 反馈：点击项变色；长路径折叠为"…"。
  • 热区 ≥44pt。
  • nav aria-label="breadcrumb"+<ol>/<li>，当前项 aria-current="page"。
  • 对比度：AA。

二、 数据录入与表单类 (Data Entry & Forms)

用于收集用户信息、偏好设置，操作需要极其清晰。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
1
输入框
Text Field / Input
/tɛkst fiːld/ /ˈɪnpʊt/
 单行文本输入控件，支持一键清空已输入内容。
  • 不要用占位符替代标签（标签应常驻）。
  • 不要在输入框内放过长提示挤占输入区。
  • 用户名、搜索词、短文本收集。
  • 需明确输入边界的任何单行字段。
  • 核心构成：标签(Label)、输入区(容器)、占位符(Placeholder)、清除按钮(×)、辅助/错误文本、前/后置图标。
间距：高度 36–44px；圆角 8–10px；标签距输入框 4–8px；左右内边距 12px。红线拆解图待补。
 PC：Default、Hover、Focus(高亮边框)、Disabled、Error。
移动：Default、Focused(键盘/语音)、Active、Filled(显清除×)、Error。
  • 带前/后置图标
  • 带清除按钮
  • 带字数计数
  • 报错态(红边+提示)
  • 高度：36–44px。
  • 字号：14–16px；圆角：8–10px。
  • 边框：1px，聚焦主色。
  • 触发：点击聚焦 / 失焦。
  • 反馈：聚焦边框变主色+轻微阴影；清除×点击即清空；实时校验。
  • 热区 ≥44pt(含清除按钮)。
  • <input type="text">+label。
  • 对比度：AA；错误提示不可仅靠颜色。
2
多行文本框
Textarea
/ˈtɛkstɛəriə/
 用于填写长文本、备注的多行输入区域，可纵向滚动或自增高。
  • 不要对超长文本隐藏且不提供展开（应自增高或滚动）。
  • 不要把密码用多行框（无隐藏）。
  • 地址、自我介绍、意见反馈。
  • 任何需要换行/段落的输入。
  • 核心构成：标签、多行输入区、占位符、字数计数(可选)、滚动条/自增高手柄。
间距：高度 80–120px(或自增高)；圆角 8–10px；内边距 12px；计数距右下 8px。红线拆解图待补。
 PC：Default、Focus、Disabled、Resized(可拖拽角)。
移动：Default、Focused、Active、Auto-grow(自增高)。
  • 固定高度+滚动
  • 自增高
  • 带字数上限计数
  • 高度：80–120px 或内容驱动。
  • 字号：14–16px；圆角：8–10px。
  • 行距：1.5。
  • 触发：聚焦输入。
  • 反馈：聚焦高亮；超字数计数变红；自增高平滑。
  • 热区与滚动可触控。
  • <textarea>+label。
  • 对比度：AA。
3
密码输入框
Password Input
/ˈpæswɜːrd ˈɪnpʊt/
 隐藏字符的敏感信息输入，带显示/隐藏切换的眼睛图标。
  • 不要默认明文显示密码。
  • 不要把"显示密码"做成常驻明文无确认。
  • 登录、注册、支付密码。
  • 任何敏感凭证输入。
  • 核心构成：输入区(掩码圆点)、眼睛图标(显隐切换)、标签、错误提示、可选强度计。
间距：同输入框；眼睛图标 20px、距右 12px、热区 ≥44pt。红线拆解图待补。
 PC：Default、Focus、Reveal(睁眼)、Disabled、Error。
移动：Default、Focused、Reveal、Error。
  • 带强度计
  • 带显隐眼睛
  • 带"忘记密码"链接
  • 高度：36–44px；圆角：8–10px。
  • 图标：20px。
  • 掩码：圆点/星号。
  • 触发：点击眼睛切换显隐。
  • 反馈：切换时图标睁/闭；切换瞬间不选中文本。
  • 眼睛热区 ≥44pt。
  • <input type="password">。
  • 切换显隐时勿丢失焦点/内容。
4 中
选择器
Picker
/ˈpɪkər/
 滚轮式（日期/时间/地址）或级联选择，通常从屏幕底部弹出的选择面板。
  • 不要对少于 3 项的选项用 Picker(用 Select/Radio 更直接)。
  • 不要多级级联过深(易迷失)。
  • 生日、城市、时间区间。
  • 地址省/市/区级联。
  • 核心构成：选中高亮带(中央)、滚动列、分隔线、确认/取消工具栏、遮罩。
间距：选中带高 36–44px；列宽均分；工具栏高 44px。红线拆解图待补。
 PC：较少用(多用 Select/日历)。
移动：Default、Scrolling(惯性)、Confirmed(高亮带回弹)。
  • 单列(日期)
  • 多列联动(地址)
  • 时间/日期专用
  • 内联(非弹窗)
  • 行高：36–44px。
  • 字号：17px；选中居中。
  • 动画：惯性滚动 ~300ms。
  • 触发：点击字段弹出底部 Sheet。
  • 反馈：滚轮跟手、松手吸附最近项；确认才写入。
  • 选中项对比度 AA。
  • 滚轮在屏幕阅读器中可操作。
  • 开发：原生 <input type="date"> 或组件库 Picker。
5
下拉选择框
Select / Dropdown
/sɪˈlɛkt ˈdrɒpdaʊn/
 点击弹出选项列表的单选下拉控件，选项较多时优于 Radio。
  • 选项 ≤5 且需对比时优先用 Radio 而非下拉。
  • 不要下拉里再套下拉(层级混乱)。
  • 国家/语言/分类等中长选项列表。
  • 表单中的单一归属字段。
  • 核心构成：触发框(当前值+箭头)、弹出层(选项列表)、搜索(可选)、选中态、遮罩。
间距：触发框高 36–44px；选项高 44–48px；弹出层圆角 8–12px。红线拆解图待补。
 PC：Default、Hover、Open、Focus、Disabled。
移动：Default、Open(底部 Sheet/弹层)、Pressed。
  • 纯文本列表
  • 带搜索
  • 带分组/图标
  • 底部弹层式
  • 高度：36–44px；圆角：8–10px。
  • 选项高：44–48px。
  • 箭头：20px。
  • 触发：点击展开。
  • 反馈：展开动画；选中回填并收起；外部点击关闭。
  • 热区 ≥44pt。
  • <select> 或 role="listbox"。
  • 键盘上下选择 + Enter。
6
复选框
Checkbox
/ˈtʃɛkbɒks/
 在一组选项中进行多选，每个选项独立开关。
  • 不要用复选框做互斥单选(应 Radio)。
  • 不要把"全选"与子项状态逻辑写反。
  • 兴趣标签、协议多选。
  • 批量操作中的多项勾选。
  • 核心构成：方框(未选/选中打勾)、标签文本、组合"全选"、不确定态(indeterminate)。
间距：框 18–24px、标签间距 8px；整项高 ≥44px。红线拆解图待补。
 PC：Unchecked、Checked、Indeterminate、Hover、Disabled。
移动：Unchecked、Checked、Pressed、Disabled。
  • 纯方框
  • 带卡片容器
  • 含全选/半选
  • 框尺寸：18–24px；圆角：4–6px。
  • 字号：14–16px。
  • 选中色：主色。
  • 触发：点击整行切换。
  • 反馈：勾选描边动画；半选横线。
  • 整项热区 ≥44pt。
  • <input type="checkbox">+label。
  • aria-checked 三态。
7
单选框
Radio Button
/ˈreɪdioʊ ˈbʌtən/
 在一组选项中互斥单选，选中其一自动取消其他。
  • 选项 ≥2 且互斥时才用；仅 2 项可改用 Switch。
  • 不要漏设默认选中导致用户困惑。
  • 性别、支付方式、配送方式。
  • 需明确唯一答案的字段。
  • 核心构成：圆点(外环+内点)、标签、分组容器(同 name)、必填标记。
间距：圆 18–24px、标签间距 8px；整项高 ≥44px。红线拆解图待补。
 PC：Unselected、Selected、Hover、Disabled。
移动：Unselected、Selected、Pressed、Disabled。
  • 列表式
  • 卡片式
  • 横向排布
  • 圆尺寸：18–24px。
  • 内点：8–12px。
  • 字号：14–16px。
  • 触发：点击整项选中。
  • 反馈：内点缩放出现；同组自动取消他项。
  • 整项热区 ≥44pt。
  • <input type="radio"> 同 name 分组。
  • 方向键切换选项。
8
开关
Switch / Toggle
/swɪtʃ ˈtɒɡəl/
 即时生效的二元状态切换（如开启推送、夜间模式），无需确认。
  • 不要用于需显式提交才生效的设置(用 Checkbox+保存)。
  • 不要把重要危险操作做成默认开。
  • 通知、Wi-Fi、深色模式。
  • 任何即时二元偏好。
  • 核心构成：轨道(Track)、滑块(Thumb)、标签(左/右)、状态色(开=主色)。
间距：轨道宽 44–52px、高 24–28px；滑块直径 20–24px；标签距 12px。红线拆解图待补。
 PC：Off、On、Disabled(灰)。
移动：Off、On(Pressed 滑块滑动)。
  • 图标开关(太阳/月)
  • 带文字(开/关)
  • 大号(设置页)
  • 轨道：44–52×24–28px。
  • 滑块：20–24px。
  • 开色：主色；关色：灰。
  • 触发：点击立即切换。
  • 反馈：滑块平移+轨道变色(~200ms)；无需二次确认。
  • 热区 ≥44×44pt(整行)。
  • role="switch"+aria-checked。
  • 状态颜色不可是唯一区分(配文字)。
9
滑块
Slider
/ˈslaɪdər/
 通过拖拽连续调节数值（音量、价格区间、亮度）。
  • 不要对离散小范围(如 1–3)用滑块(用 Radio/Stepper)。
  • 双滑块区间不要两拇指出界重叠无提示。
  • 音量、透明度、价格筛选。
  • 需连续感知的取值。
  • 核心构成：轨道(未选/已选)、滑块手柄、数值气泡(拖拽时)、刻度/标签(两端)。
间距：轨道高 4–6px；手柄 20–28px；标签距两端 8px。红线拆解图待补。
 PC：Default、Hover、Active(拖拽)、Focus、Disabled。
移动：Default、Dragging(气泡跟随)、Released。
  • 单滑块
  • 双滑块(区间)
  • 带刻度
  • 带步进刻度点
  • 轨道：高 4–6px。
  • 手柄：20–28px。
  • 字号：气泡 12–14px。
  • 触发：拖拽/点击轨道。
  • 反馈：手柄跟手；气泡实时显示数值；松手定格。
  • 手柄热区 ≥44×44pt。
  • role="slider"+aria-valuenow。
  • 方向键微调节。
10 1
步进器
Stepper
/ˈstɛpər/
 带 +/− 按钮的离散数字增减控件（如购物车数量）。
  • 不要对大范围数值用步进器(应 Input+键盘)。
  • 到边界不要仍显示可点(应 Disabled)。
  • 商品数量、人数、时长。
  • 小步长精确增减。
  • 核心构成：减按钮(−)、数值显示、加按钮(+)、边界禁用态、可选长按连加。
间距：按钮 32–40px 方形；数值区宽 40–56px；高 36–40px。红线拆解图待补。
 PC：Default、Hover、Active(按下)、Disabled(达边界)。
移动：Default、Pressed、Disabled、Long-press(连发)。
  • 方形按钮
  • 圆形按钮
  • 带步长(±5)
  • 内联(无边框)
  • 按钮：32–40px。
  • 数值高：36–40px；字号：16px。
  • 圆角：4–8px。
  • 触发：点击 +/-。
  • 反馈：数值跳动；边界禁用置灰；长按时连续递增。
  • 按钮热区 ≥44pt。
  • 关联 <input type="number"> 可编辑。
  • aria 播报当前值。
11
评分组件
Rating
/ˈreɪtɪŋ/
 星级评价控件，用于商品、服务的打分与反馈。
  • 不要默认预选高星诱导好评。
  • 半星/整星规则要标注清晰。
  • 商品评价、服务打分。
  • 内容满意度反馈。
  • 核心构成：星星(整/半星)、文案(可选：差/好)、可清除(再点取消)、计数(如 4.5)。
间距：星径 24–32px、间距 4–8px；整项高 ≥44px。红线拆解图待补。
 PC：Default、Hover(预览高亮)、Active、ReadOnly。
移动：Default、Pressed、ReadOnly。
  • 5 星整星
  • 支持半星
  • 带表情(1–5)
  • 可清零重评
  • 星径：24–32px。
  • 间距：4–8px。
  • 主色：警示橙/金。
  • 触发：点击/悬停预览。
  • 反馈：悬停时该星及之前全部高亮(PC)；点击定分。
  • 热区 ≥44pt。
  • role="slider" 或 radiogroup。
  • aria 播报分值。
12
上传组件
Uploader
/ʌpˈloʊdər/
 照片/视频/文件的上传区域，含选择、进度与成功/失败状态。
  • 不要限制类型却不提示允许格式。
  • 失败不要只转圈无限等待(给重试)。
  • 头像、证件、附件提交。
  • 任何需要上传媒体的表单。
  • 核心构成：虚线拖拽区/按钮、缩略图网格、进度条、删除(×)、失败重试、计数(3/9)。
间距：上传区高 80–120px；缩略图 64–80px；删除角标 16px。红线拆解图待补。
 移动端：Default、Selected(缩略图)、Uploading(进度)、Success、Error(重试)。
PC：Hover、Dragging(拖入高亮)、同上。
  • 单图
  • 多图网格
  • 拖拽区(PC)
  • 文件列表式
  • 缩略图：64–80px。
  • 进度条：高 4–6px。
  • 圆角：8px。
  • 触发：点击/拖拽选择。
  • 反馈：进度条实时；完成缩略图入场；失败抖动+重试。
  • 热区 ≥44pt。
  • <input type="file"> 隐藏+label 触发。
  • 提示格式/大小限制。
13
表单容器
Form
/fɔːrm/
 管理多个输入项的布局、对齐与统一错误提示的容器。
  • 不要无分组地把几十条字段堆一长列(应分节/分步)。
  • 不要把错误提示放在提交后才一次性全爆。
  • 注册、资料编辑、下单结算。
  • 任何多字段收集场景。
  • 核心构成：分组标题、字段行(标签+控件)、必填标记、行间错误、提交按钮、底部说明。
间距：字段行距 16–20px；标签与控件对齐(顶/左)；分组间距 24–32px。红线拆解图待补。
 PC：Default、Inline-error、Submitting、Success/Failed。
移动：同左；常单列堆叠、键盘避让上移。
  • 单列(移动)
  • 双列(桌面)
  • 分步表单(向导)
  • 卡片分组
  • 字段高：44–56px。
  • 标签：13–14px 灰。
  • 错误色：红+图标。
  • 触发：输入即时校验/提交。
  • 反馈：错误就近红框+文案；提交加载；成功跳转。
  • 标签与控件关联 <label for>。
  • 错误文案对比度 AA、非纯色。
  • 焦点顺序符合视觉。

三、 数据展示与容器类 (Data Display & Containers)

高效、美观地呈现信息流和复杂数据。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
22
列表
List / Table View
/lɪst ˈteɪbəl vjuː/
 最基础的垂直图文排列，用于展示同类、可点击的条目集合。
  • 不要列表项混搭无逻辑分组。
  • 不要单行承载过多信息(应拆分或进详情)。
  • 不要列表项无点击反馈。
  • 设置页、消息会话列表。
  • 商品列表、通讯录。
  • 核心构成：容器、列表项(Item)、左媒体(图标/头像/缩略图)、主标题、副标题、右操作(箭头/开关/时间)、分隔线。
间距：项高 ≥48px；左媒体 40–48px；标题/副标题间距 2–4px；左右内边距 16px。红线拆解图待补。
 PC：Default、Hover(整项底色变)、Selected(高亮)、Disabled。
移动：Default、Pressed(整项底色)、Active、Selected。
  • 基础列表
  • 带图标/头像
  • 带右操作(chevron/switch)
  • 分组列表(带 section header)
  • 滑动操作(swipe)
  • 项高：48–56px(紧凑 44px)。
  • 字号：主16/副13–14px。
  • 圆角：0(整行)或卡片式 8–12px。
  • 触发：点击进入详情/选中。
  • 反馈：按压缩放/底色；iOS 右滑操作；分组头吸顶。
  • 热区 ≥44pt。
  • <ul>/<li> 或 role="list"；项用 <button>/<a>。
  • 对比度：AA。
23
卡片
Card
/kɑːrd/
 将图文等信息封装在带阴影/描边的独立区块内，形成可扫描的信息单元。
  • 不要把卡片内塞太多内容(失去聚焦)。
  • 不要卡片内再套整卡(嵌套混乱)。
  • 不要无间距密集堆叠。
  • 信息流、商品卡、文章卡。
  • 个人主页模块。
  • 核心构成：卡片容器(圆角+阴影)、媒体区(图/视频)、标题、正文/描述、操作区、角标(可选)。
间距：圆角 8–16px；阴影 0 1–8px；内边距 16px；图文间距 12px。红线拆解图待补。
 PC：Default、Hover(上浮+阴影加深)、Active。
移动：Default、Pressed(轻微缩放/底色)、Active。
  • 纯文本卡
  • 图文卡
  • 可点击卡
  • 带操作卡
  • 横版卡
  • 圆角：8–16px。
  • 阴影：层级 2–3 级。
  • 内边距：16px。
  • 触发：点击进入详情。
  • 反馈：Hover 上浮 2–4px；Pressed 微缩；入场淡入。
  • 整卡可点则 role="button"。
  • 图片 alt；对比度 AA。
24
网格视图
Grid / Collection View
/ɡrɪd kəˈlɛkʃən vjuː/
 以等宽等高的单元格矩阵排布内容，如相册、商品瀑布流。
  • 不要网格间距不一致。
  • 不要单元内容不对齐(参差错位)。
  • 不要点击态缺失。
  • 相册、商品墙、图标/应用宫格。
  • 素材库。
  • 核心构成：网格容器、单元格(Cell)、缩略图、标题(可选)、角标。
间距：列/行间距 8–12px；单元圆角 8–12px；图片占比 ≥70%。红线拆解图待补。
 PC：Default、Hover(遮罩/放大)、Selected(勾选框)。
移动：Default、Pressed、Selected(多选角标)、Long-press(进入编辑/抖动)。
  • 等宽网格
  • 瀑布流(Masonry)
  • 带文字卡
  • 多选网格
  • 可拖拽重排
  • 列数：手机 2–4 列。
  • 间距：8–12px。
  • 图比：1:1 或 4:3。
  • 触发：点击进入；长按多选。
  • 反馈：点击缩放；选中角标勾；长按抖动+批量栏。
  • 网格 role="grid"；单元可聚焦。
  • 对比度 AA。
25
轮播图
Carousel / Banner
/ˈkærəsəl ˈbænər/
 顶部横向滑动的广告/推荐位，自动或手动切换多张图。
  • 不要自动轮播过快(眩晕)。
  • 不要无分页指示(不知第几张)。
  • 不要轮播里放关键操作(易错过)。
  • 首页 Banner、运营活动、新品推荐。
  • 图片画廊。
  • 核心构成：视口(Viewport)、滑动页(Page)、分页点、左右箭头(桌面)、自动播放计时。
间距：页间距 0(全幅)或 8px(peek)；分页点距底 8–12px；点径 6–8px。红线拆解图待补。
 PC：Default、Hover(暂停自动)、Paused。
移动：Default、Dragging(跟手)、Auto(自动切)。
  • 全幅
  • peek 露出下一张
  • 带文字蒙层
  • 无限循环
  • 卡片式堆叠
  • 高度：120–200px(手机)。
  • 圆角：0–12px。
  • 自动：3–5s；点 6–8px。
  • 触发：滑动/点箭头/点指示点。
  • 反馈：跟手滑动+回弹；自动淡入；Hover 暂停。
  • 自动播放可停；指示点可点。
  • 图片 alt；尊重 prefers-reduced-motion。
26
表格
Table
/ˈteɪbəl/
 以行/列表格展示结构化数据，移动端通常需横向滚动或卡片化。
  • 不要把桌面宽表硬塞手机(挤成一团)。
  • 不要无对齐的数值列(金额右对齐)。
  • 不要冻结错列。
  • 订单明细、账单、数据报表。
  • 参数对比。
  • 核心构成：表头(列名)、数据行、单元格、对齐(文本左/数值右)、冻结首列(可选)、分页。
间距：行高 44–48px；单元格内边距 12px；字号 13–14px。红线拆解图待补。
 PC：Default、Hover(行高亮)、Sorted(箭头)、Zebr(隔行)、Sticky Header。
移动：Default、Scroll-X(横向滚)、Card Mode(转卡片)。
  • 基础表
  • 斑马纹
  • 可排序
  • 固定列
  • 响应式(转卡片)
  • 行高：44–48px。
  • 字号：13–14px。
  • 圆角：0/8px；数值右对齐。
  • 触发：点击列头排序；横向滑看全列。
  • 反馈：排序箭头翻转；行 Hover 高亮。
  • <table> 语义；<th scope>。
  • 横向滚动可触控；对比度 AA。
27
折叠面板
Accordion
/əˈkɔːrdiən/
 点击标题展开/收起内容区，垂直堆叠，节省空间。
  • 不要把高频内容放折叠里(增加操作成本)。
  • 不要同时展开多项却无互斥说明。
  • 不要无动画突兀。
  • FAQ、条款说明、筛选条件。
  • 设置分组。
  • 核心构成：面板头(标题+图标)、内容区、分隔线、展开图标(chevron)。
间距：头高 48–56px；内容内边距 16px；图标 20px 距右 12px。红线拆解图待补。
 PC：Collapsed、Expanded、Hover、Disabled。
移动：Collapsed、Expanded(Pressed)、Animating(高度过渡)。
  • 单开(互斥)
  • 多开
  • 带图标
  • 嵌套折叠
  • 头高：48–56px。
  • 圆角：0/8–12px。
  • 过渡：200–300ms。
  • 触发：点击头部切换。
  • 反馈：图标旋转 180°；高度缓动；内容淡入。
  • <button aria-expanded> 控制 <region>。
  • 键盘可操作；对比度 AA。
28
时间轴
Timeline
/ˈtaɪmlaɪn/
 以时间顺序纵向排列事件，展示物流、审批记录等按时间排序的内容。
  • 不要把无时间属性的列表伪造成时间轴。
  • 不要节点与文字错位。
  • 不要巨长无折叠。
  • 物流轨迹、审批流、版本更新。
  • 个人履历。
  • 核心构成：轴线(Axis)、节点(Node)、时间标签、事件标题、事件描述、连接线。
间距：节点径 10–12px；轴距左 16–24px；项间距 16–20px。红线拆解图待补。
 PC：Default、Current(高亮当前)、Done(已完成)、Pending(待处理)。
移动：Default、Active(当前放大)、Pressed。
  • 左轴/右轴/居中
  • 水平时间轴
  • 带图标节点
  • 节点：10–12px。
  • 轴线：2px。
  • 字号：时间12/标题14/描述13。
  • 触发：点击节点看详情(可选)。
  • 反馈：当前节点脉冲/放大；滚动轴可吸顶。
  • 有序列表 <ol>；节点状态用文字/图标非纯色。
  • 对比度 AA。
29
头像
Avatar
/ˈævətɑːr/
 用户或群组的身份标识，可为图片、首字母或图标，支持组合。
  • 不要把头像做太小(看不清)。
  • 不要组合头像超过 3 个(拥挤)。
  • 不要无加载失败兜底。
  • 通讯录、评论区、群组。
  • 消息发件人。
  • 核心构成：圆形/方形象容器、图片/首字母/图标、状态点(可选)、组合重叠层、边框。
间距：直径 24/32/40/48px；组合重叠 -8px；状态点占 1/3 边缘。红线拆解图待补。
 PC：Default、Hover(放大/边框)、Active、Group(重叠)。
移动：Default、Pressed、Loading(骨架)、Error(首字母兜底)。
  • 图片/文字(首字母)/图标
  • 状态点
  • 组合头像
  • 方形圆角
  • 直径：24/32/40/48px。
  • 圆角：50%(圆)或 8px(方)。
  • 重叠：-8px。
  • 触发：点击进个人页。
  • 反馈：Hover 描边/缩放；加载失败显首字母。
  • alt/aria-label 含姓名。
  • 组合用 aria-label；对比度 AA。
30 NEW
标签
Tag / Chip
/tæɡ tʃɪp/
 用于标注属性、分类或筛选条件的紧凑小标签，如"包邮"、"新品"。
  • 不要把标签当按钮用(语义混淆)。
  • 不要同屏过多标签(信息噪音)。
  • 不要标签文案过长。
  • 商品属性、文章分类、筛选条件。
  • 状态标记。
  • 核心构成：胶囊容器、文字、前/后置图标(可选)、关闭×(可删标签)。
间距：高 20–28px；圆角全(999px)或 4–8px；内边距 4–12px；字号 12px。红线拆解图待补。
 PC：Default、Hover、Selected(实心)、Disabled。
移动：Default、Pressed、Selected、Removable(×)。
  • 描边/实心/浅底
  • 可关闭
  • 带图标
  • 筛选(可选中)
  • 高：20–28px。
  • 字号：12px。
  • 圆角：999px 或 4–8px。
  • 触发：点击(筛选/跳转)或×删除。
  • 反馈：选中变实心；删除淡出；Hover 底色。
  • 可点用 <button>；可删有 aria-label。
  • 对比度 AA(浅底深字)。
31 3
徽标/角标
Badge
/bædʒ/
 附着在主元素右上角的红点或数字，提示未读/数量/状态。
  • 不要数字过长(用 99+ 截断)。
  • 不要过度使用(视觉噪音)。
  • 不要红点遮挡关键操作。
  • Tab 未读、消息数、购物车件数。
  • 更新提示。
  • 核心构成：主元素(图标/头像)、徽标容器(圆点/胶囊)、数字文本、定位(右上角偏移)。
间距：点径 8px；数字高 16–20px；偏移 -4~-6px 于右上角。红线拆解图待补。
 PC：Default(显示)、Dot(纯点)、Count(数字)、Hidden。
移动：Default、Pulse(呼吸)、Overflow(99+)。
  • 小红点
  • 数字胶囊
  • 文字徽标(如 NEW)
  • 位置(右上/右下)
  • 点：8px；数字高：16–20px。
  • 圆角：999px；偏移：-4~-6px。
  • 触发：点击主元素(角标随状态消失)。
  • 反馈：出现缩放弹入；未读变已读淡出；99+ 截断。
  • 用 aria-label/文本而非纯色点。
  • 屏幕阅读器播报数量；对比度 AA。
32
骨架屏
Skeleton
/ˈskɛlɪtən/
 内容加载完成前展示的灰色占位块，模拟最终布局，缓解等待焦虑。
  • 不要骨架形态与真实内容差异过大(误导)。
  • 不要无限加载不超时(应给失败态)。
  • 不要动画过炫。
  • 列表/卡片加载、页面初始化。
  • 下拉刷新占位。
  • 核心构成：占位块(矩形/圆形,灰)、微光动画(Shimmer)、布局骨架(与真内容同构)。
间距：同真实内容占位；圆角与真实一致(8–12px)；块高 12–20px。红线拆解图待补。
 PC：Loading(微光扫过)、Fade(淡出显真)、Error(转错误态)。
移动：Loading、Shimmer、Timeout(超时提示)。
  • 纯灰块
  • 带 Shimmer 流光
  • 骨架卡片
  • 骨架列表
  • 底色：#eee/#f0f1f3。
  • 圆角：同真内容。
  • 动画：1.2–1.5s 循环。
  • 触发：自动(数据到达替换)。
  • 反馈：Shimmer 左→右流光；加载完整体淡出。
  • aria-busy="true"+aria-live。
  • 尊重 prefers-reduced-motion；颜色非唯一信息。
33
空状态
Empty State
/ˈɛmpti steɪt/
 无数据/无结果时展示的插画与引导文案，告诉用户下一步。
  • 不要只写"暂无数据"无引导(用户茫然)。
  • 不要插画与场景无关。
  • 不要无操作入口。
  • 搜索无结果、列表为空、未登录。
  • 功能未启用。
  • 核心构成：插画/图标(线框风)、主文案(原因)、次文案(怎么办)、操作按钮(Cta)。
间距：插画 80–120px；文案距插画 16–24px；按钮距文案 16px；居中布局。红线拆解图待补。
 PC：Default、WithAction(有按钮)、Error(异常态)。
移动：Default、Pressed(按钮)、Loading(转骨架)。
  • 纯插画
  • 带操作
  • 错误/网络断
  • 搜索无果
  • 引导开通
  • 插画：80–120px。
  • 主文案：15–16px 居中。
  • 次文案：13px 灰；按钮主色。
  • 触发：点击 Cta(去添加/重试)。
  • 反馈：按钮 Hover/Pressed；进场淡入+轻浮。
  • 插画 role="img"+alt；文案语义清晰。
  • 按钮可聚焦；对比度 AA。
34 或
分割线
Divider
/dɪˈvaɪdər/
 用一条线或留白区分不同模块/内容边界，提升可读性。
  • 不要满屏都是分割线(割裂感)。
  • 不要线与模块间距不一致。
  • 不要装饰过度。
  • 列表项分隔、区块边界、表单分段。
  • 卡片内分组。
  • 核心构成：分隔线(1px)、可选文字/图标(居中)、上下留白。
间距：线高 1px；上下外边距 8–16px；带文字时左右留白 16px。红线拆解图待补。
 PC：Default、Inset(左缩进)、With-Text(带标签)。
移动：Default、Full/Inset。
  • 全宽线
  • 左缩进线
  • 带文字
  • 虚线
  • 垂直分割
  • 线：1px；色 #e8eaee。
  • 上下边距：8–16px。
  • 带字：字号 12px。
  • 通常无交互；带文字分割可作小标题。
  • 纯装饰线 aria-hidden。
  • 带文字用 <hr> 或语义分隔；勿仅靠线表意。

四、 操作与交互类 (Actions & Interactions)

承载即时操作与移动端特有手势（滑动、长按、下拉、上拉），替代 PC 的点击/右键。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
35 确定
按钮
Button
/ˈbʌtən/
 触发即时操作的核心控件，按层级分为主/次/文本/图标四种形态。
  • 不要一屏放多个同级主按钮（主次不清）。
  • 不要把纯文字链接伪装成按钮（或反之）造成语义混乱。
  • 不要按钮文案与动作不符（如"确定"却取消）。
  • 提交表单、确认弹窗、发起核心动作。
  • 工具栏图标按钮（分享/收藏）。
  • 核心构成：容器（背景/边框）、标签文字（或图标）、内边距、圆角、最小热区。
间距：高度 36–48px；主按钮实心、次按钮描边、文本按钮无框；圆角 8–24px；水平内边距 16–24px。红线拆解图待补。
 PC：Default、Hover、Active（按下）、Disabled、Focus。
移动：Default、Pressed、Disabled、Loading（加载中）。
  • 主按钮（实心）
  • 次按钮（描边）
  • 文本按钮（无背景）
  • 图标按钮（仅图标）
  • 高度：36–48px；字号：14–16px Bold。
  • 圆角：8–24px；主色：实心填充。
  • 热区：≥44×44pt。
  • 触发：点击。
  • 反馈：Hover 抬升/变色；Pressed 轻微缩放/下沉；Loading 内转圈并禁用。
  • 用 <button> 语义元素；<button disabled> 禁用。
  • 图标按钮需 aria-label 描述动作；对比度 AA；焦点环可见。
36
悬浮操作按钮
FAB / Floating Action Button
/ˈfloʊtɪŋ ˈækʃən ˈbʌtən/
 固定于屏幕（通常右下）的圆形按钮，承载页面最高频的单一操作（如发布/客服）。
  • 不要放超过 1 个常规 FAB（多操作改用 Speed Dial 展开）。
  • 不要浮在 Tab Bar 上方造成冲突（应留安全区）。
  • 不要放低频操作（违背"最高频"原则）。
  • 发布动态、新建内容、唤起客服。
  • 列表页的高频正向操作。
  • 核心构成：圆形容器（主色）、中央图标、阴影、安全区偏移、可选标签/扩展。
间距：直径 56–64px；图标 24px；距底边+安全区 ≥16–24px；右间距 16–24px。红线拆解图待补。
 移动：Default、Pressed（下沉）、Expanded（展开菜单）、Hidden（滚动时隐藏）。
PC：较少用（改为常规按钮）。
  • 标准圆形 FAB
  • 带标签 FAB（扩展药丸）
  • 迷你 FAB（Mini）
  • Speed Dial（多操作展开）
  • 直径：56–64px；图标：24px。
  • 阴影：0 6–12px；主色：实心填充。
  • 热区：≥48×48pt。
  • 触发：点击（或滚动隐藏/出现）。
  • 反馈：Pressed 缩放；展开子项扇形/纵向动画；下滑隐藏、上滑出现。
  • <button>+aria-expanded（若展开）。
  • 位置 fixed 避开安全区；对比度 AA；Loading 时禁用。
37 删除
左滑操作
Swipe Actions
/swaɪp ˈækʃənz/
 在列表项上横向滑动（通常左滑）露出隐藏操作（删除/置顶/收藏）。
  • 不要露出过多操作（2–3 个为宜，否则进详情）。
  • 不要左滑露出的都是"次要"操作而重要操作藏得深。
  • 不要无"右滑还原/取消"兜底（易误删）。
  • 邮件/消息列表删除、置顶、标已读。
  • 购物车项删除/收藏。
  • 核心构成：列表项（前景）、背景操作按钮组（右对齐）、图标+文字、危险操作红底、分隔。
间距：操作按钮宽 64–80px；图标 20px；滑动阈值 30–50% 宽度吸附；项高同列表。红线拆解图待补。
 移动：Closed、Opening（跟手）、Open（吸顶露出）、Closing、Confirm（删除二次确认）。
PC：右键菜单替代（无滑动）。
  • 左滑单操作（删除）
  • 左滑多操作（删除+置顶）
  • 左滑+右滑（双侧）
  • 全展（露出全部按钮）
  • 按钮宽：64–80px；图标：20–24px。
  • 吸附阈值：30–50%；动画：~200–250ms。
  • 触发：横向拖拽列表项。
  • 反馈：跟手滑动；越阈值吸附全开；点击操作执行；轻点别处回弹。
  • 滑动手势需有等效点击入口（非触屏可达）。
  • 操作按钮 <button>+aria-label；危险操作二次确认；对比度 AA。
38
长按菜单
Context Menu / Long Press
/ˈkɒntɛkst ˈmɛnjuː/
 长按某元素弹出的快捷操作浮层，移动端替代 PC 右键菜单。
  • 不要长按与文本选择/拖拽等时长冲突。
  • 不要菜单项过多（应 ≤6 项）。
  • 不要无震动/视觉反馈让用户不知是否触发。
  • 列表项快捷操作（转发/复制/删除）。
  • 图片/文字选择后弹出操作。
  • 核心构成：触发元素、浮层菜单（圆角卡片）、菜单项（图标+文字）、分隔线、遮罩、锚定箭头。
间距：菜单项高 44–48px；圆角 12px；距触发点 8px；遮罩 40% 黑。红线拆解图待补。
 移动：Idle、Pressing（震动+高亮）、Open、ItemSelected、Closed。
PC：右键触发（同 Context Menu）/ Hover 预览。
  • 底部 Action Sheet
  • 锚定浮层（靠近触发点）
  • 图标网格菜单
  • 带危险项（红字）
  • 项高：44–48px；字号：14–16px。
  • 圆角：12px；图标：20px；触发：400–500ms 长按。
  • 触发：长按 400–500ms / 右键。
  • 反馈：轻微震动+源高亮；菜单缩放淡入；点击外部/上滑取消。
  • 长按需有替代入口（如 ⠿ 按钮 / 右键）。
  • role="menu"+menuitem；Esc 关闭；焦点进入菜单。
39
下拉刷新
Pull to Refresh
/pʊl tuː rɪˈfrɛʃ/
 在列表顶部向下拉触发刷新的手势机制，替代 PC 的刷新按钮。
  • 不要下拉阈值过高（难触发）或过低（误触）。
  • 不要刷新后不回弹/无成功反馈。
  • 不要在含横向滚动的容器误触下拉。
  • 信息流、消息、邮件列表刷新。
  • 任何需手动获取最新内容的列表。
  • 核心构成：刷新指示器（转圈/箭头）、提示文案（下拉/释放/刷新中）、内容跟随位移、阈值线。
间距：触发位移 60–80px；指示器 24px；文案 12–13px；回弹 ~300ms。红线拆解图待补。
 移动：Idle、Pulling（跟手位移）、Armed（达阈值释放即刷）、Refreshing（转圈）、Success（完成回弹）。
PC：刷新按钮/快捷键替代。
  • 转圈式
  • 箭头翻转式
  • 顶部细进度条
  • 自定义插画
  • 阈值：60–80px；指示器：24px。
  • 动画：200–300ms；尊重 reduced-motion。
  • 触发：顶部下拉超过阈值。
  • 反馈：跟手位移+指示器旋转；释放回弹转圈；完成收缩回顶。
  • 提供等效刷新按钮（非触屏/无障碍）。
  • aria-live 播报"刷新中/完成"；动画不眩晕。
40
上拉加载更多
Infinite Scroll
/ˈɪnfɪnət skroʊl/
 滚动到列表底部自动加载下一页内容，无需点击"加载更多"。
  • 不要无加载失败兜底（应给重试）。
  • 不要到底无"已到底"提示（用户不知结束）。
  • 不要加载时阻塞整页滚动。
  • 信息流、商品列表、搜索结果（长列表）。
  • 任何分页数据持续加载。
  • 核心构成：底部加载区（转圈+文案）、哨兵元素（Sentinel）、错误重试、已到底提示。
间距：加载区高 48–56px；转圈 20–24px；距底 16px；文案 12–13px。红线拆解图待补。
 移动：Idle（未触底）、Loading（转圈）、Error（重试）、End（已无更多）、Empty（无数据）。
PC：同（滚轮触底）。
  • 自动加载（触底即加载）
  • 手动"加载更多"按钮
  • 骨架占位续接
  • 分页（1/10）
  • 提前量：200–400px（提前请求）。
  • 转圈：20–24px；缓冲提示：灰色。
  • 触发：滚动接近底部（IntersectionObserver 哨兵）。
  • 反馈：底部转圈；失败显重试；到底淡入"没有更多了"。
  • 用 IntersectionObserver 哨兵；保留"加载更多"按钮兜底。
  • aria-live 播报状态；失败可聚焦重试。

五、 反馈与浮层类 (Feedback & Overlays)

用于提示信息、阻断操作或进行二次确认，覆盖非阻断提示到强制弹窗的完整反馈链路。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
41 已保存
轻提示
Toast / Snackbar
/toʊst/
 屏幕中央或底部的短提示，自动消失，不打断当前操作。
  • 不要堆叠过多 Toast（应合并/排队）。
  • 不要用 Toast 承载需"确认"的关键操作（改用 Dialog）。
  • 不要关键提示停留过短（重要信息需更长或手动关闭）。
  • "已保存""已复制""网络已连接"等状态反馈。
  • 非阻断的轻量操作结果提示。
  • 核心构成：提示容器（深/浅色胶囊）、文案（可选图标）、出现/消失动画、停留计时、锚定位置（顶/底/居中）。
间距：高度 40–48px；圆角 8–20px；停留 2–4s；底部距 24px。红线拆解图待补。
 移动：Show（滑入）、Visible、Dismiss（滑出）、Queue（排队）。
PC：同（常居顶/右下）。
  • 纯文字 Toast
  • 带图标 Toast（成功/失败）
  • 顶部 Banner 式 Toast
  • Snackbar（带操作按钮）
  • 高度：40–48px；字号：13–14px。
  • 停留：2–4s；底部距：24px。
  • 触发：系统/动作事件。
  • 反馈：滑入（上/下）；停留计时；到点滑出；可上滑关闭。
  • role="status" aria-live="polite" 播报（非打断）。
  • 不抢焦点；reduced-motion 下淡入淡出。
42
对话框
Dialog / Alert
/ˈdaɪəlɒg/
 屏幕正中的弹窗，阻断当前操作，强制用户确认或告知关键结果。
  • 不要滥用 Alert 打断流程（非关键不弹）。
  • 不要"确定/取消"语义颠倒（主操作在右）。
  • 不要遮挡后用户不知如何退出（须有取消/关闭）。
  • "确认退出登录？""删除后不可恢复"。
  • 权限申请、关键结果告知。
  • 核心构成：遮罩（半透明）、卡片（标题+正文+操作区）、主/次按钮、关闭键、锚定。
间距：卡片宽 ≤320px（手机）；圆角 12–16px；按钮高 44px；遮罩 40–50% 黑。红线拆解图待补。
 移动：Closed、Opening（缩放淡入）、Open、Confirmed、Cancelled。
PC：同（可居中/锚定）。
  • 警告 Alert（单确认）
  • 确认 Dialog（双按钮）
  • 输入 Dialog（含表单）
  • 全屏 Dialog（手机）
  • 卡片宽：≤320–400px；圆角：12–16px。
  • 按钮高：44px；遮罩：40–50%。
  • 触发：关键动作/系统事件。
  • 反馈：遮罩淡入+卡片缩放；点外部（可选）关闭；按钮执行；Esc 关闭。
  • role="dialog" aria-modal="true"；焦点陷阱（trap）。
  • Esc/关闭键；aria-labelledby 标题；恢复焦点到触发源。
43
底部动作面板
Action Sheet / Bottom Sheet
/ˈækʃən ʃiːt/
 从底部滑出的菜单/面板，承载多个并列操作（如分享、选择照片）。
  • 不要项过多无滚动（应限高+内部滚动）。
  • 不要与 Dialog 混淆（面板偏"选择"，Dialog 偏"确认"）。
  • 不要无顶部抓手条（grabber）让人不知可下滑关闭。
  • 分享面板、选择照片来源、排序/筛选。
  • 移动端多操作入口（替代右键）。
  • 核心构成：遮罩、面板（圆角顶）、抓手条、标题、操作项（图标+文字）、取消按钮、安全区。
间距：圆角顶 16–20px；抓手宽 36px 高 4px；项高 48–56px；底部安全区。红线拆解图待补。
 移动：Closed、Sliding（上滑）、Open、ItemPicked、Closing（下滑）。
PC：居中卡片/抽屉替代。
  • 标准 Action Sheet（列表项）
  • Bottom Sheet（可展开内容）
  • 带取消按钮
  • 含图标网格
  • 顶圆角：16–20px；抓手：36×4px。
  • 项高：48–56px；最大高：90vh。
  • 触发：动作事件。
  • 反馈：遮罩淡入+面板上滑；点击项执行；下滑/点遮罩关闭。
  • role="dialog" aria-modal；焦点进入面板首项。
  • 抓手可聚焦（aria-label）；Esc/下滑关闭；恢复焦点。
44
气泡提示
Popover / Tooltip
/ˈpɒpəʊvə/
 长按或新手引导时浮出的气泡说明，指向特定元素。
  • 不要无箭头指向（用户不知说的是哪）。
  • 不要遮挡被说明元素本身。
  • 不要移动端用 hover 触发（无 hover，用长按/点击）。
  • 新手引导、功能解释、图标含义。
  • 表单字段说明。
  • 核心构成：气泡卡片（文案）、箭头（指向锚点）、触发元素、可选图/链接、关闭。
间距：气泡圆角 8–12px；箭头 8–10px；距元素 8px；字号 12–13px。红线拆解图待补。
 移动：Hidden、Show（长按/点击）、Visible、Dismiss。
PC：Hover/Focus 触发（同 Tooltip）。
  • 纯文字 Tooltip
  • 带图/链接 Popover
  • 新手引导步进
  • 富文本卡片
  • 圆角：8–12px；箭头：8–10px。
  • 距元素：8px；字号：12–13px。
  • 触发：长按/点击（移动）、Hover/Focus（PC）。
  • 反馈：淡入+轻微缩放；点外部/再次点击关闭；引导步进推进。
  • role="tooltip" 关联 aria-describedby。
  • 可聚焦触发；Esc 关闭；不抢焦点。
45
通知横幅
Notification Banner
/ˌnəʊtɪfɪˈkeɪʃən ˈbænə/
 顶部滑出的横幅通知，承载系统消息/推送，可点击进入详情。
  • 不要频繁弹出打断（应聚合/折叠）。
  • 不要横幅永久占顶不消失（需自动收起）。
  • 不要无点击目标（通知应可进入详情）。
  • 新消息/系统公告/版本更新提示。
  • 后台任务完成提醒。
  • 核心构成：横幅容器（品牌色/中性）、图标、标题+摘要、关闭键、点击热区、滑入动画。
间距：高度 56–72px；圆角 0/8px；停留 4–6s；距顶安全区。红线拆解图待补。
 移动：Hidden、SlidingIn（下滑）、Visible、Tapped、AutoDismiss。
PC：同（常居右上通知区）。
  • 系统通知横幅
  • 推送通知（带图标）
  • 静默横幅
  • 可操作横幅（带按钮）
  • 高度：56–72px；字号：13–14px。
  • 停留：4–6s；顶部：安全区。
  • 触发：推送/系统事件。
  • 反馈：顶部下滑进入；点击进入；到点/关闭上滑收起。
  • role="status"/alert；aria-live 播报。
  • 可关闭（aria-label）；点击目标足够大；不抢焦点输入。
46
加载指示器
Loading / Spinner
/ˈləʊdɪŋ ˈspɪnə/
 加载中的转圈动画，表示系统正在处理（无确定进度）。
  • 不要无限转圈无超时（应给超时/失败）。
  • 不要遮挡整个内容无骨架（长加载用骨架屏）。
  • 不要与 Progress Bar 混用（有进度用后者）。
  • 按钮提交、局部刷新、拉取数据。
  • 无法确定耗时的等待。
  • 核心构成：旋转弧线（主色）、中心留白、可选文案、容器（可选遮罩）。
间距：直径 20–24px（内联）/36–48px（整页）；线宽 2–3px；转速 0.6–1s/圈。红线拆解图待补。
 移动：Idle、Loading（旋转）、Timeout（转超时）、Error（失败）。
PC：同。
  • 环形 Spinner
  • 点阵跳动
  • 骨架占位（内容级）
  • 品牌动效
  • 直径：20–48px；线宽：2–3px。
  • 转速：0.6–1s/圈；主色：填充。
  • 触发：请求开始。
  • 反馈：持续旋转；完成停止；失败转错误态/重试。
  • aria-busy="true"；aria-live 播报"加载中"。
  • reduced-motion 下用静态+文案替代旋转。
47
进度条
Progress Bar
/ˈprəʊɡrɛs bɑː/
 下载、上传等任务的进度展示，有明确百分比。
  • 不要用假进度（不确定时改用 Spinner）。
  • 不要进度卡 99% 不结束（应真实或转不确定态）。
  • 不要无百分比/剩余时间（用户不知还要多久）。
  • 文件上传/下载、安装、表单多步。
  • 任何可量化进度的任务。
  • 核心构成：轨道（灰）、填充（主色）、百分比文案、可选剩余时间、可暂停/取消。
间距：高度 4–8px；圆角满；填充按百分比；文案 12–13px。红线拆解图待补。
 移动：Idle、Active（前进）、Paused、Complete、Error（可重试）。
PC：同（可含取消按钮）。
  • 线性进度条
  • 环形进度（下载圈）
  • 不确定态（来回滑动）
  • 分步进度（1/3）
  • 高度：4–8px；圆角：满；填充：≥0%。
  • 文案：12–13px；主色：填充。
  • 触发：任务开始。
  • 反馈：填充平滑增长；完成填满；失败转红+重试；不确定态来回滑动。
  • role="progressbar"+aria-valuenow/min/max。
  • 动态更新数值；aria-live 播报关键节点。

六、 系统与业务特有组件 (System & Business)

与硬件能力或特定行业强绑定的组件，覆盖输入、导航、识别与内容创作链路。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
48
虚拟键盘
Keyboard
/ˈkiːbɔːd/
 系统弹出软键盘，按场景切换数字/安全/拼音等布局。
  • 不要输入时键盘遮挡输入框（须自动滚动到可见）。
  • 不要用明文键盘输密码（须安全键盘+防截屏）。
  • 不要无"完成/收起"键（用户不知如何关闭）。
  • 登录输密码、填金额、搜索输入。
  • 评论/发帖文字录入。
  • 核心构成：键盘面板、字符键区、功能键（删除/回车/切换）、候选条（拼音）、系统栏（收起）。
间距：键高 44–48px；数字键宽自适应；候选条高 36–44px；贴底+安全区。红线拆解图待补。
 移动：Hidden、Showing（上滑）、Shown、Switching（布局切换）、Hiding。
PC：物理键盘为主（少用）。
  • 全键盘（QWERTY）
  • 数字键盘
  • 安全键盘（防截屏）
  • 拼音键盘（候选条）
  • 键高：44–48px；候选条：36–44px。
  • 布局：贴底+安全区；强调键：主色。
  • 触发：输入框聚焦。
  • 反馈：贴底上滑出现；点击键高亮+震动；回车提交；收起下滑。
  • input 设正确 type/inputmode 唤起对应键盘。
  • 密码框启用安全键盘；监听键盘高度避免遮挡。
49
安全区指示条
Home Indicator
/hoʊm ˈɪndɪkeɪtə/
 全面屏底部横条，上滑回桌面；同时作为防误触安全区下边界。
  • 不要把可点击元素放在指示条正下方（易误触/难点）。
  • 不要隐藏/替换指示条（系统级，App 不可改）。
  • 不要在指示条区放全宽滑动手势冲突（返回/切后台）。
  • 全面屏 iPhone/安卓手势导航设备。
  • 任何需预留底部安全区的界面。
  • 核心构成：横条（系统绘制）、底部安全区（Insets）、内容避让留白。
间距：横条宽 ~134pt 高 ~5pt；距底 ~8pt；安全区下 ~34pt。红线拆解图待补。
 移动：Visible（常驻）、Dim（隐藏内容时变淡）、Hidden（全屏视频/游戏）。
PC：无（无指示条）。
  • 默认横条
  • 全屏隐藏态
  • 浅色/深色自适应
  • 横条：宽 ~134pt；安全区下：~34pt。
  • 特性：常驻不可交互（系统级）。
  • 触发：系统级（非 App 可控）。
  • 反馈：上滑回桌面；内容需避让留出安全区。
  • 用 env(safe-area-inset-bottom) 预留；勿覆盖。
  • 指示条不可点击/不可隐藏（系统行为）。
50
扫码组件
QR Scanner
/kjuː ɑːr ˈskænə/
 调用相机实时识别二维码/条码的扫一扫能力。
  • 不要无权限申请说明（用户不知为何开相机）。
  • 不要无手电筒/缩放（暗光或远距离难扫）。
  • 不要识别后无反馈（成功震动/跳转）。
  • 加好友、付钱、登录 PC 端。
  • 商品条码比价、活动核销。
  • 核心构成：取景框（四角）、扫描线/动画、权限引导、手电筒键、相册识别、结果提示。
间距：取景框 ~60% 屏宽；角标 16–20px；扫描线居中；底部操作条。红线拆解图待补。
 移动：Idle（取景）、Scanning（识别）、Granted（已授权）、Denied（去设置）、Success（跳转）。
PC：极少（用摄像头/上传图）。
  • 二维码扫描
  • 条码扫描
  • 相册识别（从图库）
  • 连续扫描（批量）
  • 取景框：~60% 屏宽；角标：16–20px。
  • 能力：支持手电筒；底部安全区。
  • 触发：进入扫码页/点击扫码。
  • 反馈：取景框扫描线循环；识别成功震动+高亮；失败提示重试。
  • 相机权限按需申请+说明；拒绝引导去设置。
  • 提供"从相册选择"兜底；结果可朗读。
51
地图组件
Map
/mæp/
 展示地理位置、标注与路线规划的地图视图。
  • 不要默认拉到极大缩放（看不清周边）。
  • 不要无"回到我的位置"键（用户易迷失）。
  • 不要 Marker 过密重叠（应聚合）。
  • 门店导航、外卖配送、打车。
  • 位置打卡、附近的人。
  • 核心构成：地图底图、Marker（标注）、路线折线、定位蓝点、缩放控件、搜索框、信息卡。
间距：Marker 尺寸 24–36px；蓝点 16–20px；路线宽 4–6px；控件距边 12–16px。红线拆解图待补。
 移动：Loading（底图）、Locating（定位中）、Located、Dragging、Selected（信息卡）。
PC：同（滚轮缩放）。
  • 标准地图
  • 卫星图
  • 路线规划（驾车/步行）
  • 聚合 Marker
  • Marker：24–36px；路线宽：4–6px。
  • 控件：距边 12–16px；支持手势缩放。
  • 触发：手势（双指缩放/拖动）。
  • 反馈：定位蓝点脉冲；点击 Marker 弹信息卡；路线绘制动画。
  • Marker/控件可聚焦朗读；尊重 reduced-motion。
  • 地图为图像需文本替代（地点名/坐标可朗读）。
52
播放器
Media Player
/ˈmiːdiə ˈpleɪə/
 音视频播放控件，支持悬浮小窗与全屏播放。
  • 不要无进度/暂停控制（用户无法操控）。
  • 不要小窗遮挡关键内容（应可拖拽/收起）。
  • 不要后台播放无通知栏控制（锁屏/通知需可控）。
  • 短视频、课程、直播回放。
  • 音乐/播客后台播放。
  • 核心构成：画面区、播放/暂停、进度条+时间、音量、全屏键、小窗拖拽手柄、倍速。
间距：控制条高 36–44px；按钮 24–28px；小窗 120–180px；距边安全区。红线拆解图待补。
 移动：Idle、Playing、Paused、Buffering、Pip（小窗）、Fullscreen、Ended。
PC：同（可画中画）。
  • 全屏播放器
  • 悬浮小窗（PiP）
  • 音频播放条
  • 直播播放器
  • 控制条：高 36–44px；按钮：24–28px。
  • 小窗：120–180px；支持手势（双击暂停）。
  • 触发：点击播放/进度条。
  • 反馈：播放/暂停图标切换；进度平滑；小窗拖拽跟手；全屏旋转。
  • 控件可键盘操作；aria-label 描述（播放/暂停）。
  • 提供字幕/转写；锁屏媒体控制。
53
富文本编辑器
Rich Text Editor
/rɪtʃ tɛkst ˈɛdɪtə/
 发帖、记笔记的图文混排编辑工具，支持样式与媒体插入。
  • 不要无自动保存（丢失内容难恢复）。
  • 不要工具栏全展开挤占编辑区（应折叠/滚动）。
  • 不要插入图片无压缩/尺寸限制（易卡顿）。
  • 社区发帖、长文笔记、评论带图。
  • 邮件正文编辑。
  • 核心构成：编辑区（可编辑）、工具栏（加粗/标题/列表/图片）、占位提示、字数统计、插入媒体入口。
间距：工具栏高 40–48px；编辑区最小高 200px；图片缩略 80–120px；底部安全区。红线拆解图待补。
 移动：Empty（占位）、Editing（聚焦）、Inserting（图片/视频）、Saving、Saved、Error。
PC：同（快捷键丰富）。
  • 轻量（仅图文）
  • 完整（标题/列表/引用）
  • Markdown 编辑器
  • 协同编辑（多人）
  • 工具栏：高 40–48px；编辑区：最小高 200px。
  • 图片缩略：80–120px；能力：自动保存。
  • 触发：点击编辑区聚焦。
  • 反馈：工具栏随选择出现（选区工具）；插入图片预览；保存态提示。
  • contenteditable 需 aria-label；工具栏按钮语义化。
  • 自动保存防丢失；图片 alt 文本可填。

移动端组件的核心设计法则

贯穿前述六大类的通用原则，作为组件设计与评审的底线。