适配设计 (adapt)

适配设计（adapt）

概述

adapt 是让设计适配不同场景的技能。它的核心是：让设计在各种设备、屏幕尺寸和使用场景下都能良好工作。

作为设计师/开发者，你可能遇到过：

“移动端显示不对”
“不同屏幕大小布局乱了”
“平板和桌面体验不一样”

adapt 就是解决这些的。

为什么需要适配

1. 设备多样化

用户使用的设备：

- 手机（320px-428px）
- 平板（768px-1024px）
- 笔记本（1366px-1440px）
- 桌面（1920px+）

适配 = 让所有设备都能用

2. 使用场景多样

同一个应用，不同场景：

- 移动端：随时随地
- 桌面端：专注工作
- 平板端：灵活使用

适配 = 场景化体验

3. 用户期望

用户期望：

✅ 正确：
- 移动端能用
- 布局合理
- 交互友好

❌ 错误：
- 只考虑桌面
- 移动端体验差
- 需要缩放

适配维度

1. 响应式布局

断点设计：

/* 移动端优先 */

/* Small (手机竖屏) */
@media (min-width: 640px) { }

/* Medium (手机横屏/小平板) */
@media (min-width: 768px) { }

/* Large (平板/小桌面) */
@media (min-width: 1024px) { }

/* XLarge (桌面) */
@media (min-width: 1280px) { }

布局策略：

┌─────────────────────────────────┐
│          单栏布局 (移动)           │
├─────────────────┬─────────────────┤
│                 │                  │
│     双栏布局     │      (平板)       │
│                 │                  │
├─────────────────┴─────────────────┤
│                                       │
│           多栏布局 (桌面)               │
│                                       │
└───────────────────────────────────────┘

2. 触摸适配

触摸目标：

/* 最小触摸目标 44x44px */

.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

手势支持：

常用手势：
- 点击：选择/确认
- 长按：显示更多选项
- 滑动：切换/删除
- 捏合：缩放

3. 内容适配

图片响应式：

<img
  srcset="img-320.jpg 320w,
          img-640.jpg 640w,
          img-1024.jpg 1024w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="img-640.jpg"
  alt="描述"
>

文字响应式：

/* 流动字号 */
.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

4. 性能适配

移动端优化：

考虑因素：
- 网络：移动网络较慢
- CPU：性能较弱
- 内存：限制较多

优化策略：
- 延迟加载
- 简化动画
- 压缩资源

适配策略

1. 移动优先

策略：

1. 先设计移动端
2. 再扩展到桌面

好处：
- 核心功能优先
- 性能优先
- 渐进增强

2. 渐进增强

层级：

Level 1：基础体验
- 核心功能
- 基础布局
- 简单交互

Level 2：增强体验
- 更好布局
- 更好交互

Level 3：完整体验
- 全部功能
- 全部动画

3. 特性检测

// 检测特性而非设备
if ('ontouchstart' in window) {
  // 触摸设备
}

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // 暗色模式
}

常见适配问题

1. 布局问题

问题	原因	解决方案
水平滚动	固定宽度	百分比/弹性
内容溢出	未考虑换行	flex/grid
元素重叠	绝对定位	相对定位

2. 交互问题

问题	原因	解决方案
点击太小	触摸目标不足	44x44px
悬停无效	触摸设备	触摸替代
双击缩放	未禁用	user-scalable=no

3. 性能问题

问题	原因	解决方案
加载慢	大图/多图	响应式图片
卡顿	复杂动画	简化/禁用
内存溢出	大资源	懒加载

适配清单

布局

断点设置合理？
布局在各个断点都正常？
没有水平滚动？

触摸

触摸目标 >= 44px？
手势操作正常？
没有依赖悬停的交互？

内容

图片响应式？
文字可读？
视频自适应？

性能

移动端资源优化？
动画性能良好？
首屏加载快？

测试

真机测试？
各种尺寸测试？
弱网络测试？

实践案例

案例 1：导航适配

桌面端：

┌────────────────────────────────────────┐
│ Logo    导航链接1  导航链接2  导航链接3 │
└────────────────────────────────────────┘

移动端：

┌────────────────────────────────────────┐
│ Logo                          汉堡菜单 │
├────────────────────────────────────────┤
│ 导航链接1                              │
│ 导航链接2                              │
│ 导航链接3                              │
└────────────────────────────────────────┘

案例 2：卡片适配

桌面端：

┌──────────┬──────────┬──────────┐
│  卡片1   │  卡片2   │  卡片3   │
└──────────┴──────────┴──────────┘

平板端：

┌──────────┬──────────┐
│  卡片1   │  卡片2   │
├──────────┼──────────┤
│  卡片3   │          │
└──────────┴──────────┘

移动端：

┌──────────┐
│  卡片1   │
├──────────┤
│  卡片2   │
├──────────┤
│  卡片3   │
└──────────┘

案例 3：表单适配

桌面端：

┌────────────────────────────────────────┐
│ 标签: [输入框...................]      │
│ 标签: [输入框...................]      │
│         [提交按钮]                    │
└────────────────────────────────────────┘

移动端：

┌────────────────────────────────────────┐
│ 标签:                                 │
│ [输入框...............................] │
│ 标签:                                 │
│ [输入框...............................] │
│ [提交按钮............................]  │
└────────────────────────────────────────┘

工具推荐

测试工具

工具	用途
Chrome DevTools	模拟设备
BrowserStack	真机测试
LambdaTest	跨浏览器测试

设计工具

工具	用途
Figma	响应式设计
Sketch	自适应组件

速查卡片

适配维度

响应式布局
触摸适配
内容适配
性能适配

断点

640px
768px
1024px
1280px

触摸

目标 >= 44px
手势支持
无悬停依赖

测试

真机测试
多尺寸测试
弱网络测试

与其他技能

polish - 打磨
optimize - 性能优化
normalize - 规范化

查看源文件: GitHub原始文件