状态：D05-L01—L05 的布局、密度、几何与 RTL 设计目标由代理依用户授权采用，可按真实任务修订；沿用已确认的六条设计原则。平台实现验收尚未完成，命中区域、键盘、触控、软键盘与 RTL 的真实运行测试均未执行。 更新：2026-10-19（UTC），含官方资料核查；既有引用与补充来源的读取范围分别记录。 所属章节：视觉与语义基础
1. 区分布局、响应式与密度
布局决定内容关系和阅读路径；响应式决定可用空间变化时如何重新组织；密度决定同一组织方式中的空间用量。三个决定相关，但不能互相替代。
宽屏可以使用舒适密度，窄窗口也可能由键盘用户使用。不能把“桌面=紧凑”“移动=少功能”写成固定规则。输入方式、任务风险、文字尺度和当前空间应一起决定适配方式。
2. 分组与空间角色
空间至少区分：控件内部、同组元素、相关字段组、不同内容区、页面边距。相近内容使用较近距离，组间距离体现关系；不要给所有间隙相同数值后再用大量边框补救。
初始间距采用 D05-L01 阶梯与下表的用途映射。它不是所有尺寸都必须为 4 倍数的网格；文字行高、图标笔画、真实安全区、焦点和命中要求优先。固定 12 列与全局媒体断点未被采用；框宽及画布见 D05-L04。
正文与表单宽度以阅读和输入任务为依据，不能因为有大屏就无限拉长。对比任务优先保留并列比较，录入任务优先维持标签与字段关系。布局用稳定区域表达全局导航、当前对象、工作内容和操作范围，避免用浮动卡片堆砌替代关系。
2.1 D05-L01：间距与单位（代理初始采用）
间距采用 4、8、12、16、24、32 阶梯。Web 间距对应 0.25、0.5、0.75、1、1.5、2rem，仅在根字号为 16px 时对应表列的 CSS px；原生分别用 pt／dp／vp。相同数字不宣称相同物理尺寸。这是可逆设计参数，不是全局强制的 4 倍数网格；字形行高、系统安全区、焦点和有效命中优先。
| 用途 | 标准 | 紧凑精确指针 | 约束 |
|---|---|---|---|
| 同行内容间距 | 8 | 8 | 相邻目标有效区域不能重叠 |
| 相关字段间距 | 16 | 12 | 标签／错误增长时增大 |
| 不同内容区间距 | 32 | 24 | 不用每段套卡片代替层级 |
| 内容容器内边距 | 16 | 12 | 轮廓不被裁切 |
| 对话框内容内边距 | 24 | 16 | LP 焦点／滚动／模态契约仍适用 |
| 页面外边距 | 宽 Web 32；窄 Web／原生 16 | 同左 | 另加真实平台安全区，不猜系统栏高度 |
2.2 D05-L03：圆角、边框和视觉层级
圆角初始值为控件 6、内容表面 8、tooltip 4、menu 8、dialog／sheet 12、全屏 0，分别使用各端逻辑几何单位（Web 为 CSS px）。采用原生系统承载时可以按平台几何适配并记录原因；不为凑像素外形破坏原生返回／焦点语义。药丸形只在组件语义确有需要时另行说明，不将所有按钮默认拉成胶囊。
边框初始宽 1 个各端逻辑单位，不声称等于一个物理像素。必要边界用 neutral-600，悬浮边界用 neutral-700；neutral-500 仅用于装饰分隔。Web 焦点宽 2 CSS px、间隔 2 CSS px，颜色与直接邻接严格按 色彩语义与可辨状态 的 D01 构造；原生采用经验证的系统焦点或等效呈现，目前未验证。页面、表面、主按钮不靠额外阴影或透明材质来通过识别，先用职责正确的稳定颜色、分组和必要边界。
这些是几何参数，不生成新的公共颜色别名、第四字体角色或具体组件包 API。
3. 密度策略
D05-L02 已采用标准和紧凑两种初始密度，默认标准；是否扩展档位按真实需求变更。紧凑减少非必要空白和装饰，不降低文字档位、必要说明或命中范围。
| 可调整 | 需要条件 | 不可作为紧凑手段 |
|---|---|---|
| 组内间距、面板内边距 | 关系仍清楚、焦点不被裁切 | 删除单位、风险和错误 |
| 表格行内空白 | 内容和操作区域完整 | 强制所有内容单行裁切 |
| 工具栏排列 | 名称及作用范围仍可发现 | 只剩难懂图标 |
| 辅助内容展开方式 | 有清楚入口且不影响当前判断 | 把必要比较信息藏到多次跳转后 |
| 表格列的初始显示 | 保留关键辨识字段和明确列管理 | 静默删除记录或改变计算范围 |
用户选择的密度应在适当范围内记住。密度设置不能覆盖系统文字放大或导致触控误触。切换时保留当前输入、筛选、选中对象和焦点；如果布局变化使原位置不可用，应转到符合任务上下文的位置。
3.1 D05-L02：两密度与最小几何
默认标准密度，提供紧凑作为明确偏好。窗口宽窄不自动改变密度；切换时保留草稿、选择、范围和焦点。紧凑减少空白，不自动降低字体档位；所有高度都是最小值，文字或多行内容增长时允许扩大。
| 配置 | 控件最小可见高度 | 记录／表格行最小高度 | 命中约束 |
|---|---|---|---|
| Web 标准精确指针 | 40 CSS px | 48 CSS px | 所有目标仍按 D05 指针目标规则；字形／操作需要时增高 |
| Web 紧凑精确指针 | 32 CSS px | 40 CSS px | 不当成触控默认；无覆盖相邻目标的透明热区 |
| Web 触控 | 44 CSS px | 56 CSS px | 非行内目标有效宽高至少 44 CSS px；行内文本按适用条款另核 |
| iOS／iPadOS 触控 | 44pt | 56pt | 目标有效宽高至少 44pt |
| Android 触控 | 48dp | 56dp | 目标有效宽高至少 48dp |
| HarmonyOS 触控 | 48vp | 56vp | 目标有效宽高至少 48vp，仍需核对父级裁剪与实际机制 |
原生紧凑只减少非必要的组间空白，保持同一触控命中与文字尺度。图标按钮按方形有效目标处理，不把图标尺寸当作命中尺寸。混合输入按同时可用的安全路径处理，不能因为有鼠标而让触控用户误点。标准／紧凑密度不是两套 27 档文字表。
4. 空间不足时的处理方式
空间不足时，根据任务选择或组合以下处理方式：
- 减少无意义装饰和过宽留白。
- 让标签、说明和工具栏合理换行。
- 将并排区域改为有明确标题的顺序区域，保持阅读与焦点顺序一致。
- 将低频辅助区折叠到可发现入口，显示当前状态或已应用条件摘要。
- 对需要二维关系的数据表保留局部横向滚动、固定关键标识或提供另一种任务视图。
- 当多列比较无法完整呈现时，提供逐项对比、选择比较字段或其他等效路径，并明确能力边界。
把表格转换为卡片并非自动正确。卡片必须保留行与列的语义、字段名、单位、状态和操作对象。对于需要跨行精确比较的任务，卡片可能比局部横向滚动更差，应以任务验证决定。
5. 重排与二维内容
D05 的 Web 设计验收目标采用 WCAG 2.2 SC 1.4.10：纵向阅读内容在相当于 320 CSS px 宽度、横向阅读内容在相当于 256 CSS px 高度时，应无需双向滚动且不丢内容或功能；本质上需要二维布局的内容有条款例外。例外作用于必要部分，不自动覆盖整页工具栏、筛选器或表格单元中的所有文字。Reflow 官方说明
复杂表格采用局部滚动时，要让用户知道哪里可滚动、列标题与行身份是什么、键盘如何进入和离开。固定列与表头不能遮住正在编辑的单元格，也不能让用户为离开区域反复尝试。详细行为见 数据表与交互网格契约。
5.1 D05-L04：可直接绘制的画布与内容框宽
| 端 | 首个设计视窗 | 同批必备空间变体 | 解释 |
|---|---|---|---|
| Web | 1440×960 CSS px | 1024×768、390×844、320×800 CSS px | 画布样例，不是全局媒体查询断点 |
| iOS／iPadOS | 390×844pt | 同任务窄窗／大字重排 | 设计视窗，无指定机型或最低 OS 承诺 |
| Android | 412×915dp | 同任务窄窗／大字重排 | 设计视窗，无指定机型或最低 OS 承诺 |
| HarmonyOS | 360×800vp | 同任务窄窗／大字重排 | 设计视窗，无指定机型或最低 SDK 承诺 |
Stitch 画布以其工具单位绘制时，标出目标原生单位；画布像素本身不能证明原生物理尺寸。表中高度仅用于评审视窗，不固定内容容器高度。系统栏、刘海、软键盘与底部保留区采用实际宿主数据，不凭空添加设备尺寸事实。
Web 常规内容初始最大宽 1280 CSS px；持续阅读最大 72ch；单列表单最大 40rem。侧导航初始宽 256 CSS px，辅助面板 360 CSS px，对话框初始宽 560 CSS px。对话框最大宽不超过可用视窗减去起止各 16 逻辑单位，再考虑真实安全区；高度、滚动、焦点和关闭遵循 LP 契约。并排空间不足时，按内容实际需要重排或切换到 SIDE／LP 已定义的承载，不能仅凭窄宽度偷偷变成模态。内容宽度不是强迫任何任务填满；二维数据的局部滚动仍受原契约约束。
6. 点击范围、焦点与固定区域
可见图标大小与可点击区域分开定义。小图标不必对应小点击目标；扩大透明点击区域时不得与相邻控件重叠或产生错误归属。危险操作与高频主操作需要足够区分，不能靠极小间隙避免误触。
WCAG 2.2 SC 2.5.8（AA）要求指针目标至少 24×24 CSS px，或符合间距、等效控件、行内、用户代理控制、必要性等例外。间距例外要求：以尺寸不足目标的包围框中心放置直径 24 CSS px 的圆，该圆不与另一目标区域相交，也不与另一尺寸不足目标的同类圆相交。24 不是推荐的触控舒适值，也不自动适用于所有原生单位。YUDS D05 已采用更易操作的初始目标，例外逐项记录。Target Size (Minimum) 官方说明
固定顶栏、底栏、抽屉和通知都要检查焦点遮挡。SC 2.4.11（AA）要求键盘获得焦点的组件不被作者创建的内容完全遮住；YUDS 建议在任务验证中进一步检查必要内容和操作是否可见，不把“露出一角”当作良好体验。Focus Not Obscured (Minimum) 官方说明
FND-L01：各平台命中区与密度边界
| 范围 | 已核实官方事实（2026-10-19 读取） | YUDS 应用与限制 |
|---|---|---|
| iOS／iPadOS | Apple 当前 HIG 表列默认控件 44×44pt、最小 28×28pt，并要求考虑间距 | D05 企业触控设计门槛采用至少 44×44pt 有效命中区；这是更保守的 YUDS 代理决定，不写“Apple 一律最低 44pt”，不借 28pt 自动缩小企业高风险目标 |
| Android 触控 | Android 推荐每个交互元素的触控目标至少 48×48dp；精确指针输入另有区分 | D05 触控设计配置沿用 48×48dp；不换算成所有平台统一 48px，混合输入设备不能只按鼠标条件缩小 |
| Web 指针 | 第 6 节 WCAG 2.5.8 的 24 CSS px 及例外 | 是适用标准下限，不是触控舒适值；触控尺寸按 D05 自定的 44×44 CSS px 设计目标，不把 pt／dp 原数复制为 CSS px |
| HarmonyOS | 官方 FAQ 与 API 已核实：显式热区取代默认区域；Rectangle 位置可用 vp，宽高百分比相对组件自身，父级裁剪可能限制子热区 | D05 自定 48×48vp 初始设计目标，不宣称官方通用 48vp 下限；锁定 SDK、组件和输入类型后记录真实区域，至少覆盖边缘与相邻目标测试。设备默认值不代替企业触控政策 |
来源：Apple Accessibility、Android Make apps more accessible。以上官方事实与 D05 代理设计决定分别记录；真实平台配置与运行仍需评审。
命中区扩大后，逐个记录矩形／路径和相邻对象；区域不能重叠，也不能把相邻目标的点击抢走。不能只增加透明覆盖层而不更新辅助技术可访问区域。若紧凑布局容不下，优先增加行高、留间距或重排操作，不缩减危险操作的命中区；支持指针和触控的同一会话，以当前可用输入与安全路径一起验证。
FND-L01-H：HarmonyOS 来源与文档夹具 L01-H
如何查看触摸热区范围（页面更新 2026-06-26）、触摸热区设置（页面更新 2026-09-17）、Length（页面更新 2026-09-09）于 2026-10-19 通过官方网页正文核实。responseRegion 的 Rectangle 数字位置／长度按 Length 单位解释，百分比相对组件自身；它不是在默认区域上简单叠加。responseRegionList 从 API22 起提供，使用时原 responseRegion／mouseResponseRegion 不再生效，映射必须记录所选机制。
夹具设可见按钮宽 100vp、高 40vp，显式区域 x=0、y=0、宽 50%、高 100%。预期有效区域宽 50vp、高 40vp；点左半部触发，点右半部不触发。这是机制反例，不是推荐按钮尺寸，也不是只覆盖半个按钮的产品方案。增加区域或切换输入类型后，重新检查相邻目标；父级启用裁剪时还需检查父热区边界，不能仅凭子区域数值判定通过。
官方当前多版本汇总页还注明：部分组件在 API26.0.0 下未显式配置时，最小命中高度由 28vp 改为 32vp。这仅适用于其列明的 Button、Button 型 Toggle、Select、Chip、ChipGroup 条件，不是所有控件的最低宽高，也不说明目标产品已使用该版本。D05 企业初始命中值已决定；实际 SDK 绑定、有效区域与运行命中测试仍未执行。
FND-L02：键盘、输入法与替代路径
顺序按任务阅读关系进入，Tab／反向 Tab 能到达和离开每个操作区域；组合控件的内部方向键行为由组件契约规定，不用任意正数顺序把视觉布局补成另一条路径。系统、浏览器和辅助技术快捷键优先，冲突的应用快捷键须可关闭或重映射；没有快捷键也能通过可见入口完成同一动作。
输入法组合期间，Enter 用于候选字确认时不得触发提交；方向键不能同时移动数据行；Escape 先交给输入法处理组合，再由活动弹层契约处理。多行文本中 Enter 换行；快捷提交须明确标注，且不得绕过校验或二次确认。拖动、悬浮、长按及多指动作不能是普通业务任务的唯一操作，分别提供移动按钮／键盘步骤、可点击详情、可见菜单或单指替代。
这里要求操作区域可进入、可离开，不要求四端逐项使用相同的 Tab 序列：Web 按组件键盘模型；iPadOS 按系统焦点组和用户键盘辅助设置区分 Tab 跨组与方向键组内行为；其他原生端按 平台适配、国际化与输入能力 的 140100.P04 及具体组件映射核验。来源：平台来源 P05。
FND-L03：安全区、软键盘和窗口变化
可用区域以当前窗口、系统保留区域与软键盘遮挡计算，不以屏幕物理宽高代替。软键盘出现时，保持活动字段、其错误和下一步可滚动到达；必要时把固定操作栏移入滚动布局。不会因自动滚动把焦点转走，也不强制锁住用户滚动。收起键盘后恢复合理的阅读位置，不重置草稿。切换分屏、折叠状态或大字时，沿对象身份保留选择和编辑状态，而不是沿像素位置保留。
| 文档夹具 | 输入与动作 | 正常预期 | 失败注入与判定 |
|---|---|---|---|
| L01 紧凑混合输入 | 相邻“查看”“作废”图标；切换到紧凑后分别触控和键盘激活 | 目标不交叠；可见／可访问名称及对象一致；危险操作仍有后果确认 | 扩大“查看”命中区后点到“作废”区域：失败，不得解释为用户误触 |
| L02 中文组合 | 表单姓名输入“张”；候选尚未确认时按 Enter | 仅完成输入法候选，业务提交次数为 0；随后显式提交才开始校验 | 组合结束事件和 Enter 重复提交：失败 |
| L03 窄屏大字 | 编辑最后一行金额并弹出软键盘，再放大文字 | 金额、单位、错误与提交入口可到达；焦点／草稿保留 | 底栏完全遮挡当前字段、不能退出局部滚动：失败 |
以上为规范走查夹具；目标区域、键盘和触控运行测试均未执行。
PLAT-INSETS：避让所有权与键盘形态
安全区、系统栏、窗口标题栏、手势保留区与输入法遮挡不是同一个常量。布局记录哪个容器负责消费哪一类区域，以及子容器已继承的避让量；同一遮挡不重复累加。背景可延伸到系统区，不代表关键文字、命中目标或应用手势也应置于该区。Android 可按所选技术栈检查 systemBars、captionBar、displayCutout、ime、systemGestures 等对应能力；Compose inset 消费机制只在项目选用该栈时适用，不把固定 padding 当作通用替代。[A02/A03]
iOS／iPadOS 分别覆盖停靠、浮动／分离键盘、外接键盘及其快捷栏。不能把浮动键盘等同于底部高度；使用 UIKit keyboard layout guide 时还须核实是否跟随 undocked 键盘。输入附件与页面固定动作条分别登记所有者、位置和任务含义，避免重复占位。没有输入附件并非缺陷，但已有附件必须随当前编辑任务保持一致。[P03/P04]
候选夹具：同一末行字段在目标窗口中显示键盘，移动浮动键盘（仅支持环境），切换导航模式／窗口标题栏（仅支持环境），再收起键盘。预期原文／选择保持，当前插入点、错误、退出与下一步可到达；重复避让、被系统手势抢走或把收起键盘当作提交，均判失败。每个子轮绑定真实环境，未运行不填通过。
来源 ID 与读取边界见 平台补充来源。这些条件不升级历史候选环境、不指定框架、不新增最低支持版本；文档用例仍未执行。
7. RTL 与方向敏感布局
7.1 D05-L05：RTL 是四端设计目标，尚未证明支持
四端均设计逻辑起始／结束方向。阅读相关的导航位置、内边距、边框、披露方向及布局按逻辑轴适配，结构／焦点顺序仍依任务。只镜像方向敏感的导航／披露图标；不整体翻转字符、数字、logo、代码、图表、地图或领域坐标。
混合方向记录中的 ID、金额与币种保持原值，通过实际平台的文本方向机制隔离，不反转字符串。首批设计夹具同时包含阿拉伯语／希伯来语标签与拉丁 ID／带负号金额，检查起始侧导航、披露、标题／字段关联、窄窗大字、原顺序图轴／机器 ID、输入法与辅助技术读序。这里只选定设计覆盖目标；真实翻译、字体连接／回退、目标 SDK 机制、读屏与视觉运行全部未执行，不列“RTL 已支持”。
导航、表单标签、面包屑、列表缩进、展开指示和固定列都参与检查。文字方向、数字方向与表格列顺序分别验证；领域时间序列、地图、图纸及坐标遵循内容约定并清楚标识。图标的具体方向性登记见 图标、层级与动态反馈。
8. 企业场景正反例
- 合适： 审核工作台在宽窗口并排显示清单与合同详情，窄窗口改为“清单→详情”路径，返回后保留筛选和位置；每一处仍显示合同身份、审核状态和本次操作对象。
- 不合适： 为保持并排布局将详情缩到一条狭缝，并用页面级横向滚动查看提交按钮；键盘焦点被固定底栏遮住。
- 合适： 紧凑表格减少行内空白，异常说明按需展开但有直接状态摘要；数字大小和焦点清晰度不降级。
- 不合适： 紧凑模式只显示数字而删除“预测”“部分数据”和币种，用户看到更多行却更容易误判。
9. 验收矩阵
至少以同一真实流程测试：宽窗口、窄窗口、分屏、文字放大、长翻译、键盘、指针及拟支持的触控条件；在拟支持的标准、紧凑密度下分别验证。不以截屏尺寸代替实际可用视窗，也不以一组断点测试替代内容增长。
记录关键任务能否完成、信息是否完整、焦点是否可见、选择范围是否不变、横向滚动是否局限于必要区域、点击是否误命中，以及模式切换是否丢失上下文。D05 几何是现行初始设计值；以上真实测试均未执行，不据此承诺任何支持版本。