这份是 2026 年最新 Web 移动端设计标准，包含画布、栅格、间距、字体、颜色、组件、交互、性能、无障碍、深色模式、响应式与适配，全部可直接用于 Figma 与前端开发。
一、核心设计原则（2026 强制）
- Mobile-First 优先：从最小屏幕开始设计，再向上扩展
- 组件驱动 + 容器查询：替代传统页面级媒体查询
- 性能优先：Core Web Vitals 与 INP 纳入 SEO 权重
- 无障碍合规：WCAG 2.2 AA 为最低标准
- 深色模式标配：支持系统级自动切换
- 触控友好：所有可点击区域 ≥ 44×44px
二、画布与栅格（2026 最新）
- 设计画布尺寸（逻辑像素）
- 主流基准：390×844px（i电话 16/17 标准版）
- Pro 机型：402×874px（i电话 16/17 Pro）
- 最小安全宽度：320px（兼容旧设备）
- Viewport 设置
- html
- 预览
- 栅格系统（2026 标准）
- 基础单位：4px 网格（所有间距 / 尺寸为 4 的倍数）
- 页面边距：16px（左右），12px（上下模块间距）
- 列数：4 列 / 6 列（移动端），8 列 / 12 列（平板 / 桌面）
- ** gutter（列间距）**：8px/12px
- 安全区域：顶部 44px（状态栏），底部 34px（首页 Indicator）
三、间距规范（2026 统一体系）
- 间距层级（4px 基准）
表格
| 级别 | 尺寸 | 适用场景 |
| XXS | 4px | 图标与文字、元素内紧凑间距 |
| XS | 8px | 相关元素、列表项内边距 |
| S | 12px | 按钮内边距、卡片内边距 |
| M | 16px | 页面边距、模块内边距 |
| L | 24px | 区块间距、卡片外边距 |
| XL | 32px | 大区块、页面顶部间距 |
| XXL | 48px | 页面底部、超大留白 |
- 排版规则
- 行高：正文 1.5，标题 1.2–1.3
- 字间距：默认，标题可微调至 0.2px
- 段落间距：16px（正文段落）
- 最多使用 3–4 种字号，保持克制
五、颜色规范（2026 通用体系）
- 主色（示例，可替换）
- 主色：
#1677FF（品牌蓝） - 主色浅：
#E8F3FF - 主色深：
#0E5ABD
- 中性色（浅色模式）
- 背景：
#FFFFFF - 卡片 / 容器：
#F5F7FA - 分割线：
#E5E6EB - 次要文字：
#86909C - 主要文字：
#1D2129 - 边框：
#C9CDD4
- 功能色
- 成功：
#00B42A - 警告：
#FF7D00 - 危险 / 错误：
#F53F3F - 信息：
#1677FF
- 对比度标准（WCAG 2.2 AA）
- 正文：≥ 4.5:1
- 大文字（≥18pt）：≥ 3:1
- 图标 / 按钮：≥ 3:1
六、核心组件规范（2026 可直接落地）
- 按钮（Button）
- 最小触控：44×44px
- 圆角：8px/12px（统一）
- 内边距：12px × 24px（中号）
- 状态：默认 /hover/active /disabled/focus
- 类型：主按钮、次按钮、文字按钮、幽灵按钮
- 输入框（Input）
- 高度：48px（中号）
- 内边距：12px × 16px
- 边框：1px
#E5E6EB，聚焦#1677FF - 状态：默认 / 聚焦 / 错误 / 成功 / 禁用
- 支持：左右图标、清除按钮、字数提示
- 图标（Icon）
- 尺寸：24px（通用）、32px（大图标）
- 描边：2px（线性图标）
- 库：优先 SF Symbols / Material Icons 交集
- 颜色：主色 / 中性色，状态色
- 卡片（Card）
- 圆角：12px
- 内边距：16px
- 阴影：
0 2px 8px rgba(0,0,0,0.08)（浅色） - 间距：上下 12px，左右 16px
- 导航（Navbar/Tabbar）
- 顶部导航：高度 44px + 状态栏
- 底部标签栏：高度 50px + 安全区
- 图标：24px，文字：10px
七、交互与体验（2026 新标准）
- 触控规范
- 最小点击目标：44×44px
- 点击区域间距：≥ 8px（防误触）
- 反馈：点击有状态变化（颜色 / 阴影 / 缩放）
- 手势：支持左滑返回、下拉刷新、上滑加载
- 动效规范
- 时长：200–300ms（过渡）
- 缓动：
ease-in-out或cubic-bezier(0.4, 0, 0.2, 1) - 原则：适度、有意义，提供 “减少动效” 开关
- 禁用：自动播放视频、闪烁元素
- 性能指标（2026 强制）
- LCP（最大内容绘制）：< 2.5s
- INP（交互响应）：< 200ms（SEO 权重）
- CLS（布局偏移）：< 0.1
- 页面加载：< 3s（3G 环境）
八、无障碍（A11y）2026 标准
- 支持屏幕阅读器：正确使用
aria-label、role - 键盘导航：所有可交互元素可通过 Tab 访问
- 文字缩放：支持 200% 缩放不溢出
- 颜色不唯一传达信息：搭配图标 / 文字
- 表单：明确标签、错误提示、必填标记
九、深色模式（2026 标配）
- 深色配色
- 背景：
#1A1D24 - 卡片：
#272E3B - 分割线：
#2E323E - 文字：
#F5F7FA（主）、#86909C（次） - 主色：保持
#1677FF
- 实现方式
- CSS
prefers-color-scheme - 使用
light-dark()函数自动切换 - 提供手动切换开关
十、响应式与适配（2026 最新）
- 断点（Breakpoints）
- 手机：≤ 767px
- 平板：768px–1199px
- 桌面：≥ 1200px
- 适配技术
- 相对单位：
rem/em/%，少用固定px - 弹性布局：
Flexbox/CSS Grid - 容器查询：
@container（组件级适配） - 图片：
srcset+sizes+ WebP 格式
- 折叠屏适配
- 展开：分栏布局（左侧导航 + 右侧内容）
- 折叠：单列流式布局
- 最小宽度：320px（折叠状态）
十一、2026 新增趋势与要求
- 多模态交互：支持语音、手写笔、手势
- AI 适配：动态内容、个性化布局、智能推荐
- 可持续设计：低饱和度配色、节能模式、懒加载
- 本地 SEO 优化：地址、电话、地图一键调用
- 隐私合规：GDPR / 国内隐私政策， consent 管理
十二、快速落地清单（直接检查）
- 画布：390×844px，Viewport 正确
- 栅格：4px 基准，边距 16px
- 字体：正文 16px/1.5，3–4 种字号
- 颜色：对比度达标，深色模式可用
- 组件：按钮 ≥44px，状态完整
- 性能：LCP<2.5s，INP<200ms，CLS<0.1
- 无障碍：WCAG 2.2 AA，键盘导航
- 响应式：容器查询，多断点适配
发表回复