02 · 信息架构、布局与排版

适用：页面骨架、导航、内容密度和多设备适配。先用真实内容布局，避免拿相同长度的占位文字判断设计。

IA-01 · 按用户对象与任务组织信息

导航使用用户理解的业务对象，如“项目、成员、账单”，避免直接暴露接口名、数据库表名或内部服务边界。详情页应回答对象是什么、当前状态、可以做什么。

层级稳定时用面包屑；任务频繁切换时用持久导航；流程的阶段用步骤指示。步骤不一定可点击，应明确哪些阶段允许返回。不要把流程步骤误当导航 Tab。

IA-02 · 页面状态决定能否返回原处

需要分享、刷新或返回的筛选、分页、选中对象适合放 URL。临时展开和未提交草稿适合组件状态或明确的草稿存储。敏感值不应直接进入 URL。

列表进入详情后返回，尽可能恢复筛选和滚动位置。深链接直接进入详情时，提供“返回项目列表”等可靠入口，不能只依赖浏览历史。

LAY-01 · 用少量尺度形成节奏

建议起点：间距 4、8、12、16、24、32、48px；正文从 1rem 开始，移动端控件区域以舒适点击为目标；标题按层级控制差异，不逐段发明字号。

这些数值属于示例 token。编辑器、医疗设备、儿童产品或大屏可采用不同尺度。设计系统一旦已有定义，优先复用。

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: var(--ui-space-6);
}
.workspace > * { min-inline-size: 0; }
.prose { max-inline-size: 68ch; line-height: 1.75; }
@media (max-width: 52rem) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
}

ch 适合提供相对行宽起点，中文并不是一字等于一 ch，应使用实际字体与内容检查。断点应在内容放不下时设置，不必照搬某一款手机的宽度。

LAY-02 · 密度由任务决定

表格、地图、画布可以需要二维操作；长文章通常不应让用户左右滚动阅读每一行。Web 重排的规范目标与例外见 WCAG 1.4.10。

TYPE-01 · 排版传达结构

正文使用可读字体与合理行高；金额、数量、计时可使用 font-variant-numeric: tabular-nums。标题层级与文档语义一致，不能只靠字号模拟标题。

中文避免用过重字距做正文装饰。数字带单位；状态用用户语言；日期注明必要的时区或语境。长 URL、订单号、连续英文要能换行，按钮标签不要随意截断。

.long-value { overflow-wrap: anywhere; }
.amount { font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

省略号适合列表预览，关键差异、操作对象和错误原因应能完整获取。Tooltip 不能成为触屏用户查看完整标题的唯一方式。

字段长度规则、编辑预算与字号分开维护，不按字符串长度自动缩小字体。提示、计数和校验共用规则，具体策略见文案容量。

LAY-03 · 适配意味着重新安排优先级

窄屏可以把侧栏变成可关闭抽屉，把次要字段移到详情，把工具条换行。不要仅把桌面网格缩小到手机。固定底部操作区必须考虑安全区、软键盘、内容遮挡和焦点滚动。

检查：320px 宽重排、常见手机宽度、宽桌面、大字号、横屏；中文长标题、连续英文、零值、负值、大金额、缺图、多语言。局部表格允许滚动时，应有可发现的滚动区域，不能靠全页横向溢出来解决。