adapt

针对不同情境调整现有设计，使其能够有效适用于不同的屏幕尺寸、设备、平台或使用场景。

必须完成的准备工作

调用 /impeccable — 其中包含设计原则、反模式和 Context Gathering Protocol。继续之前，请遵循该协议；如果尚无设计上下文，必须先运行 /impeccable teach。此外，还需收集目标平台／设备和使用场景。

---

评估适配挑战

了解需要适配的内容及其原因：

1. 确定源情境：

   • 最初是为哪种情境设计的？（桌面网页？移动应用？）
   • 做出了哪些假设？（大屏幕？鼠标输入？高速连接？）
   • 在当前情境下，哪些方面效果良好？

2. 了解目标情境：

   • 设备：手机、平板电脑、桌面设备、电视、手表、印刷品？
   • 输入方式：触控、鼠标、键盘、语音、游戏手柄？
   • 屏幕限制：尺寸、分辨率、方向？
   • 连接：高速 Wi-Fi、缓慢的 3G、离线？
   • 使用场景：移动途中还是办公桌前？快速浏览还是专注阅读？
   • 用户期望：用户对这个平台有什么期望？

3. 确定适配挑战：

   • 哪些内容无法适配？（内容、导航、功能）
   • 哪些功能无法使用？（触控设备上的悬停状态、过小的触控目标）
   • 哪些设计不合适？（移动设备上使用桌面模式、桌面设备上使用移动模式）

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

制定适配策略

制定适合具体情境的策略：

移动设备适配（桌面设备 → 移动设备）

布局策略：

• 使用单列布局，而非多列布局
• 采用垂直堆叠，而非并排布局
• 使用全宽组件，而非固定宽度
• 使用底部导航，而非顶部／侧边导航

交互策略：

• 触控目标最小为 44x44px（不依赖悬停）
• 在合适的情况下使用滑动手势（列表、轮播图）
• 使用底部弹出层，而非下拉菜单
• 优先考虑拇指操作（将控件放在拇指可触及的范围内）
• 扩大点击区域，并增加间距

内容策略：

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

导航策略：

• 使用汉堡菜单或底部导航
• 简化导航结构
• 使用固定页眉，方便用户了解当前情境
• 在导航流程中提供返回按钮

平板电脑适配（混合方案）

布局策略：

• 使用双列布局（而非单列或三列）
• 使用侧边面板展示次要内容
• 使用主从视图（列表 + 详情）
• 根据屏幕方向调整布局（纵向与横向）

交互策略：

• 同时支持触控和指针操作
• 触控目标为 44x44px，但布局可比手机更紧凑
• 使用侧边导航抽屉
• 在合适的情况下使用多列表单

桌面设备适配（移动设备 → 桌面设备）

布局策略：

• 使用多列布局（充分利用水平空间）
• 始终显示侧边导航
• 同时显示多个信息面板
• 使用固定宽度并设置最大宽度限制（不要扩展到 4K 宽度）

交互策略：

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

内容策略：

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

印刷适配（屏幕 → 印刷品）

布局策略：

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

内容策略：

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

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

布局策略：

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

交互策略：

• 使用醒目、易识别的 CTA（按钮，而非文本链接）
• 不使用悬停状态（不可靠）
• 复杂交互通过深层链接跳转到 Web 应用

实施适配

系统地应用更改：

响应式断点

选择合适的断点：

• 移动设备：320px-767px
• 平板设备：768px-1023px
• 桌面设备：1024px 及以上
• 或根据内容选择断点（设计开始失效的位置）

布局适配技巧

• CSS Grid/Flexbox：自动重排布局
• 容器查询：根据容器而非视口进行适配
• clamp()：在最小值和最大值之间流畅调整尺寸
• 媒体查询：针对不同场景应用不同样式
• Display 属性：根据场景显示或隐藏元素

触控适配

• 增大触控目标尺寸（至少 44x44px）
• 增加交互元素之间的间距
• 移除依赖悬停的交互
• 添加触控反馈（涟漪、突出显示）
• 考虑拇指活动范围（底部比顶部更容易触及）

内容适配

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

导航适配

• 在移动设备上将复杂导航转换为汉堡菜单或抽屉式导航
• 移动应用使用底部导航栏
• 桌面设备使用固定侧边导航
• 在小屏幕上使用面包屑提供上下文

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

切勿：

• 在移动设备上隐藏核心功能（如果功能重要，就要确保其可用）
• 假设桌面设备性能强大（应考虑无障碍需求和较旧的设备）
• 在不同场景中使用不同的信息架构（容易造成混淆）
• 违背用户对平台的预期（移动设备用户期待移动端模式）
• 忽略移动设备或平板设备的横屏方向
• 盲目使用通用断点（应根据内容选择断点）
• 忽略桌面设备上的触控操作（许多桌面设备支持触控）

验证适配效果

在各种场景下全面测试：

• 真实设备：在实际手机、平板电脑和桌面设备上测试
• 不同方向：纵向和横向
• 不同浏览器：Safari、Chrome、Firefox、Edge
• 不同操作系统：iOS、Android、Windows、macOS
• 不同输入方式：触控、鼠标、键盘
• 边缘情况：极小屏幕（320px）、超大屏幕（4K）
• 慢速连接：在限速网络下测试

请记住：你是跨平台设计专家。打造适合各类场景、兼具原生体验的交互，同时保持品牌和功能的一致性。主动进行适配，并全面测试。