4.7 KiB
布局与视口
先定空间责任
明确首屏重点、内容的伸缩方式、滚动区域与主要操作的位置。任务型界面减少无意义滚动；叙事型页面允许有意的长度与节奏。不能为了单屏把文字和控件缩小到难以使用。
区分全幅背景、限宽正文、弹性区域和固定规格控件。布局由内容、父容器、比例与上下限共同决定，不把整张设计图按比例缩成网页。
宽屏可并列需要同时参考的信息，窄屏按任务顺序重排。是否分栏取决于内容关系，不默认所有页面都是左文右图。
内容与伸缩
- 文字与可变数据采用内容驱动尺寸。固定规格用于图标、点击区域、媒体比例或稳定几何，不用于让当前截图刚好装下。
- 让长名称和宽内容能够合理收缩、换行或局部滚动。网页中的 Flex/Grid 子项必要时设置收缩边界，不用全页裁切掩盖溢出。
- 图像明确尺寸、裁切与主体安全区；异步内容预留合适空间，避免加载后挤走操作。
- 把真实组件或页面放进固定大小的缩略窗口（组件目录、模板墙、样张）时，按内容的自然尺寸缩放进窗口，不要居中后让上下两头一起被裁掉。先保证宽度放得下；太高的内容缩到还能读的比例后顶端对齐，底部渐隐。随容器伸缩的组件在缩略窗口里没有自然宽度，会被挤成一列竖排字，要按真实使用时的宽度渲染再缩放。
- 响应式验证覆盖项目支持的代表性宽度，断点由内容失效的位置决定。不同视口允许重排，不强求像素比例一致。
滚动由谁负责
每个表面只有一个主滚动区：应用外壳固定时，主内容区滚动；弹窗只有正文滚动；表格只在自身容器里横向滚动。确实需要分别浏览的面板才有自己的滚动，并且要有明确的尺寸和任务边界。
- Flex 和 Grid 的子项要允许收缩（最小宽高设为 0），否则长内容会撑破父容器，出现整页横向滚动。
- 不让页面、内容区和弹窗同时滚动；不为溢出随手加
overflow: auto；不做没有独立任务边界的多层嵌套滚动。
选择承载方式
| 任务 | 承载 | 要点 |
|---|---|---|
| 短而自包含：确认、简短表单、预览加配置 | 弹窗 | 宽度随内容：确认用窄的，表单用中等，预览加配置用宽的或双栏 |
| 需要保持底层列表、表格或画布可见 | 侧面板 | 从当前对象出发的查看或编辑；关闭后回到原对象 |
| 多步骤、复杂创作、大量媒体，或需要两个以上主滚动区 | 完整页面 | 任务本身就是目的地，不是某页的附属动作 |
不在弹窗上再叠弹窗，需要第二层完整任务时升级为侧面板或页面。沿用项目已有的表面组件，不为一次需求另建一套。
弹窗固定分三段：
- 标题栏固定在顶部：标题、必要的对象身份和关闭入口。
- 正文占剩余空间，是唯一的滚动区。
- 操作栏固定在底部，跨满弹窗宽度：主操作在右，取消紧挨着它，危险确认单独隔开；计数或校验摘要放在左侧。
弹窗高度用“内容上限 + 动态视口高度”约束，不用固定高度。纯阅读的弹窗只留关闭入口。关闭或返回后，回到原来的位置和对象。
菜单与浮层
浮层贴着触发器出现，空间不足时翻转或平移，保留视口安全边距。它要渲染在能脱离裁切的层上，不被表格、弹窗或滚动容器截掉；页面滚动、容器滚动和窗口缩放后重新定位；触发器消失时关闭。长名称按对象身份的规则截断，不撑大浮层；内容超出下拉能清楚承载的范围时，改用弹窗或完整页面。单选选完即关，多选在点“完成”或点击外部时关闭。关闭后不留下遮罩、滚动锁或看不见的点击层。
精准还原
先记录参考图的逻辑视口或已知像素尺寸、完整范围和固定区域。图像像素不等于逻辑视口；无法确定时说明假设。
测量主区域比例、共享对齐线、文字尺度、图片裁切与间距关系。先对齐整体几何与字体，再处理边框、阴影和细节；不因还原任务重新探索风格。
用与参考相当的视口和内容检查差异。参考没有展示的窄屏与状态根据内容约束补充，并区分“参考还原”与“合理延展”。
验证重点
实际检查长内容、空内容和当前改动相关状态。移动端注意视口变化、输入面板与安全边距，主操作不能被键盘或固定区域遮挡。
检查页面是否意外横向溢出、滚动是否发生在预期区域、焦点与菜单是否可见，以及缩放或重排后阅读和操作顺序是否仍然清楚。