状态:本页是文档层面的选型建议;设计暂停。表中各端“默认”都是 YUDS 建议的初始呈现,HarmonyOS 列均为运行未执行的 H 候选。平台实现与运行未验证;运行、实机与视觉验证全部未执行,目前只有文档建议和来源核查。 更新:2026-10-20(官方来源核查日期)。 所属章节:跨平台与智能交互
本页说明“同一组件在不同平台选什么呈现”,不是 SDK 选定清单,也不是把 SAP、Apple 或 Android 建议升级为所有平台的强制规则。组件的值、权限、事件、层与恢复契约仍由各自主档唯一维护。
入口:组件行为见基础组件与交互契约;平台目标、国际化与能力证据见平台适配、国际化与输入能力;贯穿任务见接入示例:共享资料清单。
1. 使用方法与优先级
- 先定任务:是触发动作、选择候选、浏览对象还是长时间编辑?不是所有可点击集合都叫菜单。
- 再定能力:输入值、原始稿、允许范围、原生控件能力、可访问性及服务是否匹配?原生控件不能无损表达时不可静默截断或改义。
- 再定容器:依当前可用内容空间、键盘、文字增长、并列参照需要与任务长度选内联、popover、sheet 或完整页,不只按设备名称。
- 最后核对生命周期:模态性、背景可达性、关闭意图、焦点/导航返回、权限与异步结果必须有明确拥有者。
发生冲突时,先守住授权、数据与交互契约,再选择另一个适配呈现;不要为了复刻平台外观改写“取消”“接受”“保存”。无法实现等价任务时声明受限/未提供并给真实替代,不宣称跨端完成。
共同基础固定:七角色+固定 step 沿 Token 契约、主题与状态,文字三角色九档沿排版层级与文字可读性,命中与布局沿布局、响应式与信息密度。平台调用语法可不同;不新增颜色别名、不引入平台样式值作为第二份公共 token 真源。
1.1 如何读四端表
- 表中“默认”均指 YUDS 建议的初始呈现,仍受组件主档、任务与目标环境制约;不是某平台禁止其他控件。
- “原生”指选定框架中语义与能力匹配的候选,必须登记具体控件、OS/框架版本并验证。名称出现不等于 API 和可访问性已经证实。
- H 候选:HarmonyOS 暂以完整页面、内联内容和显式按钮作为概念设计候选;没有证实对应原生组件/API、默认样式、返回处理或辅助技术行为。所有 H 候选运行未执行。此标记不表示实现受支持,更不授权照搬 Android 行为。
- 同组列出多个组件时,每个组件继承同一呈现选择,但各自状态/事件仍独立;表不新增组件编号,也不改变目录登记。
2. 容器选择:不是“移动端一律 sheet”
| 任务与条件 | YUDS 默认 | 可改用 | 不适用与保守替代 |
|---|---|---|---|
| 持续阅读、编辑或查看错误 | 页面内联 | 宽窗非模态侧区 | 不用会轻易消失的 popover 承载唯一错误/风险 |
| 短而相关的临时选择,仍需感知原对象 | 独立选择层 | iOS sheet;Android 模态 bottom sheet;宽窗锚定 popover | 内容增长、键盘或多层导航超过容器能力时用完整选择页 |
| 简短、必须立即回答的确认 | 对话框/原生 alert 候选 | 信息复杂时用明确确认页 | 不将长表单装进警告框;无真实后果不滥用阻断 |
| 长编辑、多步骤或需大量参照 | 完整页面/工作空间 | 宽窗主从区;平台合适的全屏任务呈现 | 不因入口来自按钮就强制 popover 或半高 sheet |
| 暂时参考且需操作父任务 | 非模态侧区 | 能完整满足合同的平台非模态 sheet 候选 | 不把“看见背景”误作“可操作背景”;能力不符用独立参照页 |
Apple 官方 HIG 区分 sheet 的相关短任务与复杂流程替代,iOS/iPadOS 可有模态和非模态 sheet;popover 应承载少量相关功能,紧凑视图宜改用充分利用空间的呈现。这里不据此规定所有 iOS sheet 都是模态。[P09][P10]
Android Compose 官方提供 ModalBottomSheet 及其显示/隐藏状态机制;这证明一个可选实现入口,不证明所有筛选、菜单或编辑都应该使用 bottom sheet,也不证明其他技术栈的等价行为。[A12]
2.1 切换容器时必须迁移什么
保持当前会话、对象与范围、父原稿/子原稿、基准及权限代次、已发任务身份和当前可访问定位。popover 变 sheet 不接受候选、不提交、不取消远端请求。模态性变化必须采用浮层组件:对话框、抽屉与提示的 CMP-LAYER-RESP;旧触发器已不存在时按 LP-G05 选择有效返回位置,不盲目恢复焦点。
原生自动关闭与 YUDS 显式接受不兼容时,选择能保留原稿且显式接受的容器;不要把平台“保存工作”的建议解释成允许发远端业务写入。iOS 原生 popover 的自动关闭建议与 YUDS 草稿事务必须在实例中协调,必要时改 sheet/完整页。[P10]
3. 动作、输入与选择
完整行为分别见操作组件:按钮与动作入口、输入组件:文本、结构化编辑与专用输入、选择组件:值、范围与层级。
| 组件/任务 | Web 默认 | iOS/iPadOS 默认 | Android 默认 | HarmonyOS 候选 | 换型条件与禁止替代 |
|---|---|---|---|---|---|
| CMP-01 普通按钮 | 语义按钮 | 原生动作按钮候选 | 原生动作按钮候选 | H 候选:显式动作按钮 | 链接目标用链接;样式不改变主操作数量 |
| CMP-02 图标按钮 | 有名图标按钮 | 可访问名称明确的原生按钮 | 同左,避免重复读图标 | H 候选:图标+可得名称 | 关键动作含义不清改文字按钮;不靠悬浮认动作 |
| CMP-03 切换按钮、B2-FAVORITE | 有明确选中状态按钮 | 原生切换意图+可感知状态 | 同左 | H 候选:有状态显式按钮 | 远端收藏结果未知不得仅翻图标当确认;二元设置不等于所有 toggle |
| CMP-04 拆分按钮 | 主动作+分离菜单入口 | 默认明确主动作+独立更多入口 | 默认明确主动作+独立更多入口 | H 候选:分开的两个入口 | 原生拆分能力未经证实不硬造;两入口不是两个主操作 |
| CMP-05 命令菜单 | 命令菜单,复杂层级另选页 | 简短原生命令菜单候选 | 简短原生菜单候选 | H 候选:命令列表页 | 多字段筛选不是菜单;层级过深转任务页,不移植 Web 级联键位 |
| CMP-06 单行输入 | 有持续标签的输入 | 原生文本字段 | 原生文本字段 | H 候选:有标签单行字段 | 数字标识符仍是文本;占位不替代标签 |
| CMP-07 多行文本 | 文本区域 | 原生多行编辑 | 原生多行编辑 | H 候选:多行编辑页 | 长编辑改完整页;键盘换行不提交 |
| CMP-08 查询输入 | 查询框+已应用范围 | 搜索输入+明确范围 | 搜索输入+明确范围 | H 候选:查询输入与应用入口 | 查询草稿与应用时机沿主档;无查询能力不画搜索 |
| CMP-09 数值/步进 | 精确输入,步进为可选辅助 | 原生文本输入+适当键盘候选 | 同左 | H 候选:精确输入 | 键盘类型不保证输入合法;步进/滑块不替代精确值输入 |
| CMP-10 日期、CMP-11 区间 | 可输入的日期字段+日历候选 | 能保持日期语义的原生日期选择候选 | 同左 | H 候选:带格式说明的字段/选择页 | 不支持范围、历法或原始稿时改契约化选择页;不将纯日期变时区瞬时 |
| INP-T 时间/日期时间 | 明确时区和格式的字段/选择 | 能保留值模型的原生候选 | 同左 | H 候选:明确字段 | 不支持时区或精度时不能偷偷降精度;完整编辑页是容器替代而非值转换 |
| INP-M 掩码 | 提示格式并保留原稿 | 原生输入+适配格式 | 同左 | H 候选:可修正文本 | 格式化不是有效性或真实性证明 |
| CMP-12 上传 | 显式文件选择;拖放仅增强 | 原生文件/媒体入口依授权候选 | 同左 | H 候选:文件入口待核实 | 不能读取/上传则说明限制;“手填文件名”不等价上传 |
| CMP-13 复选框 | 原生 checkbox 优先 | 可访问多选行/选择控件候选 | 复选选择控件候选 | H 候选:有状态多选行 | 集合选择不映射立即生效 switch;打开行与勾选分开 |
| CMP-14 单选组 | 原生 radio 组优先 | 短互斥选项组/单选列表候选 | 原生单选组候选 | H 候选:互斥选择列表 | 长集合改选择页;不伪装可多选 |
| CMP-15 开关 | 二元设置 switch | 原生开关候选 | 原生开关候选 | H 候选:二元设置入口 | 生效时机沿任务合同;需要父保存就明示,不能假装即时远端生效 |
| CMP-16/17 单选与组合框 | 简单 select;需输入检索才用 combobox | 简短原生选择;需搜索用 sheet/选择页 | 简短原生选择;复杂用选择页 | H 候选:带查询的单选页 | 原生候选不支持复杂行/原稿时改页,不塞进命令菜单 |
| CMP-18 多选 | 显式候选+已选集合 | sheet 或完整多选页 | bottom sheet 或完整多选页 | H 候选:多选页 | 长候选/复杂过滤用完整页;取消与接受不靠点击背景猜测 |
| CMP-19 树 | 真层级才用 tree | 层级浏览与明确选择,默认逐层页 | 同左 | H 候选:逐层页 | 展开不代表选中;无需层级则普通列表,不强求原生端 Web 方向键模型 |
| INP-S 滑块/范围 | 同一值模型的精确字段(范围型为上下限编辑入口)+可选滑块+可读值 | 同一值模型的精确字段(范围型为上下限编辑入口)+可选原生滑块+可读值 | 同一值模型的精确字段(范围型为上下限编辑入口)+可选原生滑块+可读值 | H 候选:同一值模型的精确字段(范围型为上下限编辑入口)+可读值;滑块仅能力核实后作为可选辅助 | 无连续范围或精度不足不用滑块;可读值不能替代精确输入,不以拖拽为唯一输入;沿 INP-S01 |
| INP-R 评分 | 有名离散选项 | 离散可访问选项候选 | 同左 | H 候选:离散选项 | 无真实评价任务不放评分;0 分与未评分区分 |
| INP-E 分段控件 | 少量同层互斥切换 | 原生分段候选 | 同层分段选择候选 | H 候选:明确互斥切换 | 长名称/过多项转选择列表;导航目的地不偷换字段值 |
| SEL-HELP 值帮助 | 独立对话框或完整查找页 | 短任务 sheet,复杂完整页 | 短任务 bottom sheet,复杂完整页 | H 候选:完整查找页 | 并列比较、长表单、深层浏览不用小 popover;接受只更新约定目标 |
不把 iOS 的复选语义强制绘制成 Web 方框,也不把 Android 的菜单样式直接当 HarmonyOS 原生标准。表内没有要求所有平台具有同名组件 API。
4. 导航、浮层与内容容器
主档:导航组件:位置、切换与返回、浮层组件:对话框、抽屉与提示、容器组件:分组、展开与工作区组织、数据表与交互网格契约。
| 组件/任务 | Web 默认 | iOS/iPadOS 默认 | Android 默认 | HarmonyOS 候选 | 换型条件与不适用 |
|---|---|---|---|---|---|
| B1-SHELL 壳/范围 | 明确范围入口+应用导航 | 原生导航结构候选,范围显式 | 同左 | H 候选:页面导航与范围入口 | 不机械复制桌面侧栏;范围切换不是仅换标题 |
| CMP-20 链接 | 原生链接语义 | 可辨目标的导航入口 | 同左 | H 候选:目标明确入口 | 写动作不用链接假装导航;外部跳转另明示 |
| CMP-21 面包屑 | 有真实层级时提供 | 默认标题+返回;宽窗必要时层级路径 | 同左 | H 候选:标题+返回 | 没有层级不编造;路径不是历史记录 |
| CMP-22 标签页 | 同层分区 tab | 原生同层分区候选 | 同左 | H 候选:明确分区入口 | 字段选择不冒充 tab;过多/长标签改可达分区导航 |
| CMP-23 侧边导航 | 宽窗常驻,窄窗可收纳 | 宽窗侧栏候选;窄窗合适原生导航 | 宽窗导航区;窄窗导航入口 | H 候选:按空间独立导航页 | 本地分区不滥用全局导航;保持当前位置和返回 |
| CMP-24 分页 | 真实页码/前后页依服务 | 前后/加载更多依服务 | 同左 | H 候选:显式分页入口 | 仅游标服务不捏造总页;滚动位置不能代替查询身份 |
| CMP-25 工具栏 | 本任务动作+溢出菜单 | 原生工具栏候选 | 原生工具栏候选 | H 候选:动作区 | 关键风险不藏溢出;固定区遮挡时改流式,不缩字 |
| CMP-26 对话框 | 明确模态 dialog | 短确认 alert 候选,较长独立任务 sheet/页 | 短确认 dialog,较长任务完整页 | H 候选:确认页,原生框待核实 | 长编辑不用 alert;所有关闭入口受相同离开仲裁 |
| CMP-27 抽屉 | 侧区;模态性明确 | 默认参照侧区或独立页,短相关任务可 sheet | 侧区或独立页;合适短任务可 bottom sheet | H 候选:侧区/独立页 | 原生 sheet 并非 Web 抽屉同义词;父可操作需求不可强改为阻断 |
| CMP-28 popover | 短锚定面板 | 宽内容区锚定 popover;紧凑区 sheet/页 | 简短锚定面板候选;增长改 sheet/页 | H 候选:独立短选择页 | 锚点失效或键盘/增长装不下时换型;不放完整长表单 |
| CMP-29 tooltip | hover/focus 补充说明 | 关键内容直显,补充帮助显式打开 | 同左 | H 候选:直显或帮助页 | 触控不靠悬浮;交互帮助不用 tooltip |
| B2-PREVIEW 快速预览 | 短预览层/侧区+详情入口 | 短相关 sheet 或详情页 | 短相关 sheet 或详情页 | H 候选:预览页 | 不把预览当编辑;长内容转详情,权限与来源仍可辨 |
| CMP-36 卡片 | 内容分组+明确动作 | 原生内容分组候选 | 同左 | H 候选:内容分组 | 不为每卡增加主操作;需横向比较用数据表/比较页 |
| CMP-37/38 分区/折叠 | 语义分区+展开按钮 | 原生分区/披露候选 | 同左 | H 候选:可展开分区 | 隐藏错误先提供定位/展开;折叠不销毁受保护编辑宿主 |
| CMP-39 可调分隔 | 支持拖拽与替代调节时启用 | 宽窗且能力证实时启用,否则固定分区 | 同左 | H 候选:固定分区/顺序页 | 无可靠替代输入不用仅拖拽;不捏造窗口能力 |
| B1-SIDE 侧内容 | 非模态参照区域 | 宽窗侧区,窄窗参照页 | 同左 | H 候选:侧区/参照页 | 必要比较无法成立则专门比较页;不能让用户凭记忆做高后果决定 |
| CT-LIST/CMP-40 记录列表 | 语义列表+明确行操作 | 原生列表候选 | 原生列表候选 | H 候选:记录列表 | 点击查看、勾选、焦点分开;卡片化不能删除身份和关键状态 |
| CMP-41 描述列表 | 名称—值关系 | 原生可读名称—值分组 | 同左 | H 候选:名称—值分组 | 不伪装禁用表单;空值不当零 |
| 数据表/交互网格 | 读取表格优先;真单元操作才 grid | 简单任务列表/详情;比较保留关系 | 同左 | H 候选:列表/明确比较页 | 不强压多列成小字;必要二维关系不可卡片化后消失 |
Android 的列表—详情官方布局支持按空间呈现不同数量的面板;表中“宽窗双区、窄窗顺序”为 YUDS 选型推导,不指定库版本、最低宽度或保证自动状态恢复。[A13]
5. 反馈与专业能力的降级
主档:反馈组件:让状态和结果可理解及所列专业组件所属章节。纯展示组件不因跨端表而获得写事务。
| 组件 | 四端呈现选择 | 不适用/替代边界 |
|---|---|---|
| CMP-30 横幅 | Web 任务区域内持续信息;iOS/Android 采用可访问的内联信息区;H 候选同一信息职责 | 系统推送不是横幅替代;受限信息不跨账户继续显示 |
| CMP-31 字段错误/错误摘要 | 四端字段关联错误+可定位摘要;各自原生语义另映射 | snackbar/toast 不能是唯一错误;纯展示内容无字段校验则不适用 |
| CMP-32 短暂通知 | Web 非模态通知;iOS/Android 采用任务内短暂反馈候选;H 候选为内联结果优先 | 不强求每端存在同名 toast;重要结果始终有持续可查位置 |
| CMP-33 忙碌/进度 | 四端在真实忙碌区域表达;原生进度控件须匹配确定/不确定进度 | 没有可信比例不画百分比;忙碌不隐含禁止退出或请求已取消 |
| CMP-34 骨架 | 四端只为尚待读取的结构占位,不创建假内容/可访问假行 | 已有可披露内容刷新不默认全替骨架;无价值时用明确加载文字 |
| CMP-35 空状态 | 四端在对应区域说明空的原因和真实动作 | 空数据、筛选无结果、失败、无权限不合并成同一空白 |
| DSP-LABEL 状态标识 | 四端文字+一致语义,必要时图形辅助 | 不使用平台颜色代替七角色/step,不把标签做未声明按钮 |
| FB-LIVE 通告 | Web 按语义通告;iOS/Android 采用对应原生辅助通知能力;HarmonyOS 机制待核实 | 不复制 ARIA 属性到原生;未获机制证据不能声明读屏已通知 |
| DSP-NOTIFICATION 通知中心 | 四端独立可返回列表/详情,打开与已读/任务完成分离 | 无通知服务不造收件箱;系统通知授权不从应用内列表推导 |
| B2-HEADER/B2-BANNER | 四端按空间选静态/可收缩标题、内容横幅 | 正在编辑/IME/子层占用时不重建宿主;无需宣传横幅则不放 |
| DSP-AVATAR/DSP-IMAGE | 四端按内容语义提供名称/说明和缺失替代;长预览用独立页 | 不把装饰图重复朗读;撤权清理包括应用可控图像与描述 |
| B3-CAROUSEL | 四端默认可明确上一项/下一项的顺序浏览 | 不需要轮播则静态列表;自动播放另按主档,不因平台动画能力自动启用 |
| B3-EXPR/B3-RICH | Web 完整编辑区域;iOS/Android 长编辑页;H 候选完整页,实际编辑能力待核实 | 受限能力保留不支持内容并说明,不能静默扁平化;没有可安全编辑路径可只读 |
| B3-COLOR | 四端以主档值模型决定原生选择器是否可用 | 原生不支持透明度/色域/无颜色/原稿往返时改契约化字段;不是修改 YUDS 品牌色入口 |
| B3-CLOUDFILE | Web 浏览器式选择任务;iOS/Android 可用文件服务入口须核实引用与版本能力;H 候选待核实 | 本地上传不等价云引用;没有来源能力则不提供,不能伪造固定版本 |
| B3-SCAN/SUP-HANDWRITING | 四端仅能力证实后提供采集面;手工输入按主档作为可行替代 | 摄像头/笔不保证识别能力;手输不等价法律签名或身份验证 |
| C1-TRANSLATE/AI | 四端明确建议、来源与接受边界;长对照用完整页 | 无模型/传输授权/安全服务则不提供;本地手改不宣称翻译服务成功 |
这些扩展只是索引性选型,不宣布专业族实现完备。每个实例仍需查各主档的非用途、数据安全及能力门槛。
6. 三个容易选错的组合
- 筛选不是命令菜单:分类只有少量互斥值可直接单选;搜索、日期区间、多选组合属于筛选任务。窄窗改 sheet/完整筛选页,保留原稿、应用和清除边界;关闭不偷偷应用。
- 值帮助不是详情页缩略版:用户要选择候选时保留候选身份与接受语义;需要深入核查则进入明确详情再回选择会话。打开详情不能自动接受候选。
- 保存失败不是更强的模态需求:先在当前表单保持输入、错误与真实恢复;只有必须决定的独立冲突/离开任务才阻断。不要在每个网络错误上叠 alert 遮住错误字段。
对照装配与完整回程:接入示例:共享资料清单。
7. 选型记录与验证门槛
每个实例记录:组件主档/任务、平台与版本、呈现候选、为何不用其他呈现、原生能力缺口、背景可达性、显式与手势关闭、值/草稿所有者、焦点或导航返回、增长与键盘、权限变化、真实回执、替代路径及证据状态。
以下检查应分别报告,不互相换算:
- 文档一致性:采用主档术语且没有改变事件、颜色与文字职责。
- 结构验证:实际框架的名称、角色、值、选中、错误与层身份。
- 任务验证:普通输入和辅助技术都能完成打开、选择、接受/取消、保存、结果与返回。
- 变化验证:窗口变化、最大目标字号、IME、后台恢复、撤权、未知结果和迟到回执。
- 不适用:写明哪项任务不存在或能力未提供、为何、替代是否等价;不能用“不适用”掩盖承诺任务不可达。
当前上述运行、实机与视觉验证全部未执行;只存在文档建议和来源核查。
8. 官方依据与采用边界
既有平台来源详见平台补充来源。P01—P08、A01—A11 仍按原记录的读取范围使用;H01—H03 未验证,不能推导华为平台默认。下列来源于 2026-10-20 核查,不新增最低 OS 或 SDK 版本承诺。
- P09 Apple Sheets:官方 HIG。HTML 为 JS 壳,随后获取并读取其官方 Markdown 正文。采用相关短任务/复杂任务替代与模态区别;不照抄外观、尺寸或示例保存语义。
- P10 Apple Popovers:官方 HIG。HTML 为 JS 壳,官方 Markdown 正文已读。采用小范围功能、紧凑视图替代、避免嵌套与意外关闭保护;YUDS 显式接受和远端写入边界优先,不将自动关闭等同保存请求。
- A12 Android Compose Bottom sheets:官方组件指南。正文已读,包含 ModalBottomSheet 与 SheetState;仅作为 Compose 候选,未验证项目采用版本或默认无障碍行为。
- A13 Android Build a list-detail layout:官方布局指南。官方正文已读取;用作空间适配的列表详情组织参考,不将代码示例视为 YUDS 任务状态恢复或返回契约的实现证据。
- S01 SAP Page Layouts and Floorplans v1-136:官方页面。已读取正文。借鉴布局与任务模板分层,不采用 SAP 组件的尺寸/品牌/业务规则,不宣称版本为全站最新。
上表的逐组件默认是结合 YUDS 已有合同的编辑决策,不逐行归因于这些官方文件。官方未覆盖的细节按 YUDS 建议标注,并等待真实平台证据。
相关页面:质量基线、门禁与验收证据。