用途:将已有设计适配到不同屏幕尺寸、设备、平台或使用场景,重点不是简单缩放,而是针对新上下文重新思考体验。
前置要求:必须先调用 /impeccable 获取设计原则、反模式与上下文收集协议;如尚无设计上下文,必须先运行 /impeccable teach。另需收集目标平台/设备与使用上下文。
主要流程:一、评估适配挑战,明确原设计语境(桌面网页或移动应用等)、隐含假设(大屏、鼠标、快网络等),以及目标设备、输入方式、屏幕限制、网络状况、使用场景与用户预期;识别哪些内容装不下、哪些交互不可用、哪些模式不恰当。二、制定适配策略:
- 桌面转移动:单列布局、纵向堆叠、全宽组件、底部导航;触控目标至少 44x44px、不依赖悬停、支持滑动、底部弹出层、拇指优先;渐进披露、优先主内容、文字更简短且不小于 16px。
- 平板:双列布局、侧栏放次要内容、主从视图、随横竖屏自适应,同时支持触控与指针。
- 移动转桌面:多列布局、常驻侧边导航、多信息面板、固定宽度并设 max-width;悬停补充信息、键盘快捷键、右键菜单、拖拽、多选。
- 打印:逻辑分页、去导航与交互元素、黑白或限色、装订边距、展开完整 URL 与隐藏内容、加页码页眉页脚与元数据。
- 邮件:最宽 600px、单列、内联 CSS、表格布局;大而明显的 CTA、不使用悬停、复杂交互跳转网页应用。
三、实施适配:断点可采用移动 320px-767px、平板 768px-1023px、桌面 1024px+,或按内容决定断点;使用 CSS Grid/Flexbox、Container Queries、clamp()、媒体查询与显示属性。注意 display:none 仍会下载,慎用;采用渐进增强、懒加载与响应式图片。
限制与禁止:不得在移动端隐藏核心功能;不能假定桌面即高性能设备;不同上下文不应使用不同信息架构;不能违背平台用户预期;不能忽略移动端横屏;不能盲目套用通用断点;不能忽略桌面触控。必须在真实设备上测试,覆盖横竖屏、不同浏览器、操作系统、输入方式、320px 与 4K 极端尺寸及限速网络,设备模拟并不完美。