name: 移动优先设计 description: 优先为移动设备设计，然后扩展到更大的屏幕。创建能够在所有设备尺寸上无缝工作的响应式界面。
移动优先设计
概览
移动优先设计将小屏幕作为起点，确保核心功能在所有设备上都能工作，同时利用更大的屏幕提供增强的体验。
何时使用
- 网络应用设计
- 响应式网站创建
- 功能优先级
- 性能优化
- 渐进增强
- 跨设备体验设计
指令
1. 移动优先原则
移动优先方法：
步骤 1：为移动设备设计 (320px - 480px)
- 有限的空间迫使优先级
- 关注核心内容和操作
- 单列布局
- 触摸友好的交互元素
步骤 2：为平板增强 (768px - 1024px)
- 添加次要内容
- 可能的多列布局
- 优化间距和可读性
- 利用悬停状态
步骤 3：为桌面优化 (1200px+)
- 全功能体验
- 高级布局
- 丰富的交互
- 多列和侧边栏
---
## 响应式断点：
移动：320px - 480px
- iPhone SE, 旧手机
- 严格的空间限制
- 仅限触摸交互
平板：481px - 768px
- iPad mini, 平板电脑
- 更多空间可用
- 触摸 + 键盘/鼠标
大平板/小桌面：769px - 1024px
- iPad Pro, 小型笔记本电脑
- 过渡断点
- 触摸和指针
桌面：1025px - 1440px
- 标准笔记本电脑
- 全功能设置
- 启用悬停状态
大桌面：1441px+
- 超宽显示器
- 考虑最大宽度容器
- 避免拉伸过宽
---
## 移动设计模式：
导航：
移动：汉堡菜单，底部标签
平板：侧边抽屉
桌面：水平菜单栏
表单：
移动：单列，大触摸目标 (48px)
平板：如果空间允许则为2列
桌面：多列，标签并排
内容布局：
移动：全宽，单列
平板：1-2列
桌面：多列，侧边栏
图片：
移动：全宽
平板：全宽或受限宽度
桌面：受限宽度，可能使用列
2. 响应式设计实现
# 实现响应式CSS和布局
class ResponsiveDesign:
def create_responsive_grid(self, mobile_cols=1):
"""CSS Grid响应式结构"""
return {
'mobile': {
'columns': 1,
'gap': '16px',
'breakpoint': 'max-width: 480px'
},
'tablet': {
'columns': 2,
'gap': '24px',
'breakpoint': '481px - 768px'
},
'desktop': {
'columns': 3,
'gap': '32px',
'breakpoint': 'min-width: 769px'
}
}
def responsive_typography(self):
"""流体字体大小"""
return {
'h1': {
'mobile': '24px',
'tablet': '32px',
'desktop': '48px',
'line_height': {
'mobile': '1.2',
'desktop': '1.3'
}
},
'body': {
'mobile': '14px',
'tablet': '16px',
'desktop': '16px',
'line_height': '1.6'
}
}
def responsive_spacing(self):
"""自适应填充和边距"""
return {
'container_padding': {
'mobile': '16px',
'tablet': '24px',
'desktop': '32px'
},
'section_margin': {
'mobile': '24px',
'desktop': '48px'
},
'touch_target_size': '44px最小值（苹果）'
}
def touch_friendly_design(self):
"""移动交互优化"""
return {
'button_size': '44px x 44px最小值',
'touch_target_spacing': '8px最小值之间',
'form_input_height': '44px + 16px填充',
'scrolling_area': '全宽滑动友好',
'modal_height': '最大85vh，可滚动',
'keyboard_awareness': '考虑软件键盘'
}
3. 移动性能
移动性能优化：
图片优化：
- 响应式图片(srcset, picture元素)
- WebP格式带有回退
- 懒加载低于折叠部分
- 无情压缩
- 提供适当大小的图片
指标目标：
- 移动：<3秒首次内容绘制
- 移动：<4秒最大内容绘制
- 移动：<100累积布局偏移
捆绑包大小：
- 移动：<100KB JavaScript (gzip)
- 移动：<50KB CSS (gzip)
- 内联关键CSS
网络：
- 最小化请求（合并文件）
- 启用gzip压缩
- 使用CDN进行资产
- 积极缓存
---
测试设备：
实体设备：
- iPhone SE (320px基线)
- iPhone 13 Pro (390px)
- Samsung S21 (360px)
- iPad (768px)
仿真：
- Chrome DevTools设备模式
- 响应式设计模式
- 测试方向变化
真实设备测试：
- 在实际设备上测试
- 检查触摸交互
- 验证性能
- 测试慢速网络
4. 渐进增强
渐进增强策略：
层 1：核心内容 (HTML)
- 语义HTML
- 无需CSS或JavaScript即可工作
- 文本内容可读
- 表单功能
层 2：增强 (CSS)
- 视觉设计
- 布局和间距
- 颜色和排版
- 响应式设计
层 3：交互 (JavaScript)
- 渐进加载
- 表单增强
- 平滑交互
- 离线功能
- 推送通知
回退方法：
- 输入：范围滑块 → 文本输入回退
- 视频：HTML5视频 → 下载链接
- 地图：交互式地图 → 静态图片链接
- 单页应用 → 服务器端渲染
---
测试策略：
1. 禁用JavaScript
- 核心内容仍然可访问
- 表单仍然提交
- 链接工作
2. 慢速3G网络
- 页面加载
- 关键内容可见
- 非关键懒加载
3. 无样式 (CSS禁用)
- 内容可读
- 文本大小适当
- 对比度足够
最佳实践
✅ 做
- 为最小屏幕设计
- 在真实移动设备上测试
- 使用响应式图片
- 为移动性能优化
- 使触摸目标44x44px最小
- 在移动设备上垂直堆叠内容
- 在移动设备上使用汉堡菜单
- 在移动设备上隐藏非必要内容
- 用慢速网络测试
- 渐进增强方法
❌ 不做
- 假设所有移动用户都有快速网络
- 在移动设备上使用仅限桌面的模式
- 忽略触摸交互需求
- 制作按钮太小
- 忘记横向方向
- 过度复杂化移动布局
- 忽略移动性能
- 假设没有键盘（iPad用户）
- 跳过移动用户测试
- 忘记凹槽和安全区域
移动优先设计提示
- 使用最大宽度容器（通常最大1200px）
- 测试最旧的iPhone SE (320px)作为基线
- 实施触摸友好间距（最小48px）
- 使用灵活布局而不是固定宽度
- 用慢速3G网络模拟测试