adapt

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

必须完成的准备工作

阅读 frontend-design，并遵循其 Context Gathering Protocol。复用可用的上下文，只针对影响重大的信息缺口提问。此外，还要了解目标平台／设备和使用场景。

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

---

评估适配挑战

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

1. 确定源情境：

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

2. 了解目标情境：

   • 视口／情境：窄屏、中屏、宽屏、电视、嵌入式、打印？

• 输入方式：粗指针、精确指针、键盘、语音、游戏手柄？
  • 屏幕限制：尺寸、分辨率、方向？
  • 连接状况：高速 Wi-Fi、慢速 3G、离线？
  • 使用场景：移动途中还是办公桌前，快速浏览还是专注阅读？
  • 用户预期：用户对这个平台有什么预期？

3. 确定适配挑战：
   • 哪些内容无法放下？（内容、导航、功能）

• 哪些交互无法使用？（仅适用于悬停的状态不适合粗指针，指针目标过小）
  • 哪些设计不合适？（宽屏布局模式用于窄屏布局，在粗指针情境中使用仅适用于悬停的模式）

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

应将紧凑视口视为真实限制，而不是被压缩的宽屏布局。

制定适配策略

制定适合目标情境的策略：

首要原则

• 先缩小画布：从较小的限制条件入手，先在那里解决核心任务
• 将窄屏布局视为独立布局来设计：不要只按比例压缩宽屏布局中的关系
• 保留自然宽度：使用最大宽度和适合内容的宽度，而不是盲目依赖百分比
• 大元素比小元素收缩得更快：不同断点下，元素之间的关系会改变

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

布局策略：

• 使用单列，而非多列
• 使用垂直堆叠，而非并排布局
• 组件应使用实际所需的宽度；有帮助时可以使用全宽，但不要习惯性地这么做
• 使用紧凑型导航，而不是假定顶部或侧边结构始终固定存在

交互策略：

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

内容策略：

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

导航策略：

• 提供清晰的紧凑型导航入口，例如抽屉、折叠面板或精简菜单
• 降低导航复杂度
• 使用粘性页眉以保留上下文
• 在导航流程中提供返回按钮

中等宽度适配

布局策略：

• 双列布局（不采用单列或三列）
• 使用侧边面板展示次要内容
• 主从视图（列表 + 详情）
• 根据方向自适应（纵向与横向）

交互策略：

• 同时支持粗略指针和精确指针
• 保持较大的目标尺寸，同时允许布局比最窄视口更紧凑
• 侧边导航抽屉
• 适当采用多列表单

宽屏布局扩展

布局策略：

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

交互策略：

• 悬停状态用于显示附加信息
• 键盘快捷键
• 右键上下文菜单
• 在适用场景使用拖放
• 使用 Shift/Cmd 进行多选

内容策略：

• 预先展示更多信息（减少渐进式披露）
• 包含多列的数据表
• 更丰富的可视化效果
• 更详细的描述

打印适配（屏幕 → 打印）

布局策略：

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

内容策略：

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

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

布局策略：

• 窄宽度（最大 600px）
• 仅使用单列
• 当宿主环境要求标记自包含时，内联输出与 Tailwind 兼容的实用类
• 使用基于表格的布局（以兼容电子邮件客户端）

交互策略：

• 使用醒目、显眼的 CTA（按钮而非文本链接）
• 不使用悬停状态（不可靠）
• 对复杂交互使用指向 Web 应用的深层链接

实现适配

系统地应用更改：

响应式断点

选择合适的断点：

• 窄屏：320px-767px
• 中等屏幕：768px-1023px
• 宽屏：1024px+
• 或采用内容驱动的断点（设计出现问题的位置）

布局适配技巧

• Tailwind 网格/弹性布局实用类：自动重排布局
• 容器查询：根据容器而非视口进行适配
• clamp()：在最小值和最大值之间流畅调整尺寸
• 媒体查询：针对不同上下文使用不同样式
• Display 属性：根据上下文显示/隐藏元素
• 最大宽度：让表单、文本块和侧边栏保持自然宽度，直到视口迫使其改变

指针适配

• 增大粗略指针的目标尺寸（至少 44x44px）
• 增加交互元素之间的间距
• 移除依赖悬停的交互
• 在有助于提升操作信心时，为粗略指针交互添加操作反馈
• 在紧凑的粗略指针布局中，将常用操作放在易于触及的位置

内容适配

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

导航适配

• 在窄屏布局中，将复杂导航转换为紧凑菜单、抽屉式菜单或折叠面板结构
• 在有助于用户定位的宽视口中，保留常驻侧边导航
• 在较窄的布局中，使用面包屑或紧凑的上下文提示

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

切勿：

• 在窄屏布局中隐藏核心功能（如果功能很重要，就要确保它能正常使用）
• 假设宽视口就意味着设备性能强大（请考虑无障碍需求、较旧的设备和受限的硬件）
• 在不同场景中采用不同的信息架构（这会造成混乱）
• 违背用户对特定输入场景下响应式网页行为的预期
• 忽略窄屏横向布局或中等宽度窗口状态
• 盲目使用通用断点（应根据内容设置断点）
• 忽略宽视口中的粗指针（许多浏览器环境会同时具备宽屏和粗指针输入）
• 按比例缩小宽布局中的元素关系，并将其称为响应式设计
• 让无法从缩放中受益的组件随视口流动

验证适配效果

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

• 真实设备：在实际的粗指针浏览器、精确指针浏览器和相关的受限硬件上测试
• 不同方向：纵向和横向
• 不同浏览器：Safari、Chrome、Firefox、Edge
• 不同操作系统：Windows、macOS、Linux、ChromeOS，以及相关的粗指针浏览器环境
• 不同输入方式：粗指针、精确指针、键盘
• 边缘情况：非常小的屏幕（320px）、非常大的屏幕（4K）
• 慢速连接：在限速网络下测试

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