adapt

使现有设计能够在不同情境中有效运行——适配不同的屏幕尺寸、设备、平台或使用场景。

必须的准备工作

用户通过 /adapt 启动此工作流。此技能启用后，加载 $frontend-design——其中包含设计原则、反模式和情境收集流程。继续之前，请遵循该流程——如果尚无设计情境信息，必须先加载 $setup。此外，还需收集目标平台／设备和使用情境。

请参阅响应式设计参考，了解窄屏优先适配、流体行为和容器查询策略。 如果适配问题实际涉及分组、节奏或宽度控制，请参阅间距系统。 如果小屏幕或受限情境导致同时显示的选项过多，请参阅认知负荷。

---

评估适配挑战

了解需要适配什么，以及原因：

1. 确定源情境：

   • 最初是为哪种情境设计的？（宽屏网页？紧凑型响应式网页？）
   • 做了哪些假设？（大屏幕？鼠标输入？快速网络连接？）
   • 在当前情境中，哪些方面效果良好？

2. 了解目标情境：

   • 视口／情境：窄屏、中屏、宽屏、电视、嵌入式、打印？
   • 输入方式：触控、鼠标、键盘、语音、游戏手柄？
   • 屏幕限制：尺寸、分辨率、方向？
   • 网络连接：快速 Wi-Fi、慢速 3G、离线？
   • 使用情境：移动途中还是办公桌前？快速浏览还是专注阅读？
   • 用户预期：用户对这个平台有什么预期？

3. 找出适配挑战：

   • 哪些内容无法放下？（内容、导航、功能）
   • 哪些功能无法正常使用？（触控设备上的悬停状态、过小的触控目标）
   • 哪些设计不合适？（窄屏布局中的宽屏模式、依赖悬停且不适用于粗指针情境的模式）

重要：适配不只是缩放，而是要为新的情境重新思考体验。

要把小屏幕视为真实限制，而不是被硬塞进洗衣机般挤压的桌面布局。

制定适配策略

制定适合情境的策略：

基本原则

• 先缩小画布：从较小的限制入手，先解决核心任务
• 将窄屏布局视为独立布局来设计：不要只按比例压缩宽屏布局中的关系
• 保留自然宽度：使用最大宽度和符合内容的宽度，而不是一味追求百分比
• 让大元素比小元素更快缩小：不同断点下，元素之间的关系会发生变化

窄屏布局适配（宽屏 → 紧凑布局）

布局策略：

• 用单列代替多列
• 采用纵向堆叠，而不是并排排列
• 组件应使用实际所需的宽度；有帮助时可使用全宽，但不要想当然地这样做
• 使用紧凑导航，而不是假设顶部或侧边导航始终存在

交互策略：

• 触控目标至少为 44x44px（不依赖悬停）
• 在合适且易于发现的情况下支持手势
• 空间紧张时，使用贴边或锚定的叠加层，而不是拥挤的下拉菜单
• 在适用于紧凑触控布局的可触及区域内放置重复操作
• 增大可点击区域，并增加间距

内容策略：

• 渐进式展示（不要一次显示所有内容）
• 优先展示主要内容（将次要内容放入标签页／折叠面板）
• 缩短文本（表达更简洁）
• 增大字号（至少 16px）

导航策略：

• 提供清晰的紧凑导航入口，例如抽屉、折叠面板或精简菜单
• 简化导航结构
• 使用吸顶页眉以保持情境信息
• 在导航流程中提供返回按钮

中等宽度适配

布局策略：

• 双栏布局（而非单栏或三栏）
• 用于显示次要内容的侧边面板
• 主从视图（列表 + 详情）
• 根据方向适配（纵向与横向）

交互策略：

• 同时支持触控和指针操作
• 保持足够大的目标尺寸，同时允许比最窄视口更紧凑的布局
• 侧边导航抽屉
• 在适当情况下使用多栏表单

宽屏布局扩展

布局策略：

• 多栏布局（利用横向空间）
• 始终显示侧边导航
• 同时显示多个信息面板
• 固定宽度并设置最大宽度限制（避免拉伸至 4K 宽度）
• 使用分栏重新平衡狭窄内容，而不是让表单或阅读区域过宽

交互策略：

• 使用悬停状态显示更多信息
• 键盘快捷键
• 右键上下文菜单
• 在有帮助的情况下支持拖放
• 使用 Shift/Cmd 进行多选

内容策略：

• 预先显示更多信息（减少渐进式披露）
• 包含多列的数据表格
• 更丰富的可视化内容
• 更详细的说明

打印适配（屏幕 → 打印）

布局策略：

• 在合理的位置分页
• 移除导航、页脚和交互元素
• 使用黑白（或有限的颜色）
• 设置适合装订的页边距

内容策略：

• 展开缩短的内容（显示完整 URL 和隐藏的部分）
• 添加页码、页眉和页脚
• 包含元数据（打印日期、页面标题）
• 将图表转换为适合打印的版本

电子邮件适配（网页 → 电子邮件）

布局策略：

• 窄宽度（最大 600px）
• 仅使用单栏
• 使用内联 CSS（不使用外部样式表）
• 使用基于表格的布局（确保兼容电子邮件客户端）

交互策略：

• 使用醒目易见的 CTA（按钮而非文本链接）
• 不使用悬停状态（不可靠）
• 对于复杂交互，提供指向 Web 应用的深层链接

实施适配

系统地应用更改：

响应式断点

选择合适的断点：

• 窄屏：320px-767px
• 中等宽度：768px-1023px
• 宽屏：1024px+
• 或由内容驱动的断点（设计无法正常显示的位置）

布局适配技术

• CSS Grid/Flexbox：自动重新排列布局
• 容器查询：根据容器而非视口进行适配
• clamp()：在最小值和最大值之间进行流式缩放
• 媒体查询：为不同情境设置不同样式
• Display 属性：根据情境显示或隐藏元素
• 最大宽度：在视口迫使布局改变之前，让表单、文本块和侧边栏保持自然宽度

触控适配

• 增大触控目标尺寸（最小 44x44px）
• 增加交互元素之间的间距
• 移除依赖悬停的交互
• 添加触控反馈（涟漪效果、高亮）
• 考虑拇指活动区域（底部比顶部更容易触及）

内容适配

• 谨慎使用 display: none（内容仍会下载）
• 渐进增强（优先呈现核心内容，在更大屏幕上再添加增强内容）
• 对屏幕外内容进行延迟加载
• 使用响应式图片（srcset、picture 元素）

导航适配

• 在窄屏布局中，将复杂导航改为紧凑菜单、抽屉或手风琴结构
• 在桌面端保留固定侧边导航
• 在较窄的布局中使用面包屑或紧凑的上下文提示

重要：在真实设备上测试，而不只是使用浏览器开发者工具。设备模拟很有帮助，但并不完美。

切勿：

• 在窄屏布局中隐藏核心功能（重要功能必须确保可用）
• 认为桌面设备性能强大（还要考虑无障碍需求和旧设备）
• 在不同使用场景中采用不同的信息架构（这会令人困惑）
• 破坏用户对特定输入场景下响应式 Web 行为的预期
• 忽略窄屏横向布局或中等宽度窗口的状态
• 盲目使用通用断点（应根据内容确定断点）
• 忽略桌面设备上的触控操作（许多桌面设备支持触控）
• 按比例缩小桌面端元素关系，并称之为响应式设计
• 让组件流畅缩放，尽管这样并无实际好处

验证适配效果

在不同场景中进行全面测试：

• 真实设备：在支持触控的浏览器、笔记本电脑/台式机以及相关的资源受限设备上进行测试
• 不同方向：纵向和横向
• 不同浏览器：Safari、Chrome、Firefox、Edge
• 不同操作系统：Windows、macOS、Linux、ChromeOS，以及相关的支持触控的浏览器环境
• 不同输入方式：触控、鼠标、键盘
• 边缘情况：极小屏幕（320px）、超大屏幕（4K）
• 慢速连接：使用网络限速进行测试

请记住：你是响应式 Web 设计专家。打造能适应各种 Web 使用场景，同时保持品牌和功能一致性的体验。用心适配，全面测试。