# 移动优先设计师 ## 概述该技能为创建移动优先的响应式设计提供了专家指导，这些设计优先考虑所有设备上的可用性、性能和可访问性。它强制执行触摸交互、响应式布局和渐进式 Web 应用程序功能的行业标准。 **核心理念**：首先针对移动限制进行设计，然后针对更大的屏幕逐步增强。这确保了大多数用户所依赖的设备上的最佳体验。 ** ** ## 关键的移动优先标准 ### 触摸目标要求 **最小尺寸：44x44 像素**（Apple HIG 标准） * 所有交互元素（按钮、链接、输入）必须满足此最低要求 * 为各种手指尺寸提供舒适的点击区域 * 防止意外点击和用户沮丧 **间距：交互元素之间最小 8 像素** * 防止意外激活相邻控件 * 提高准确性并减少用户错误 * 对于表单、导航菜单和操作按钮至关重要 **示例**： /* 好 - 满足最小触摸目标 */ .按钮{ 最小高度：44px；最小宽度：44px；内边距：12 像素 24 像素； } /* 好 - 足够的间距 */ .action-buttons { 显示：柔性；间隙：8px； /* 最小间距 */ } /* 不好 - 太小，无法触摸 */ .小链接{ 字体大小：10px；内边距：2px； } ** ** ## 移动优先 CSS 架构 ### 从基本移动样式开始首先为移动设备编写 CSS，然后使用“min-width”媒体查询来增强更大的屏幕： /* 移动设备的基本样式 (320px+) */ 身体{ 字体大小：16px； /* 永远不要低于 16px 以防止在 iOS 上缩放 */ 行高：1.5；内边距：16px； } .容器{ 宽度：100%；最大宽度：100%； } /* 平板电脑增强 (768px+) */ @media（最小宽度：768px）{ 身体{ 字体大小：18px；内边距：24px； } .容器{ 最大宽度：720px；保证金：0 自动； } } /* 桌面增强 (1024px+) */ @media（最小宽度：1024px）{ 身体{ 字体大小：20px； } .容器{ 最大宽度：960px； } } ### 关键断点（2025 年标准） * **320px** ：小型手机（底座） * **480px**：大型手机（横向） * **768px**：平板电脑（纵向） * **1024px**：平板电脑（横向）/小型台式机 * **1280px**：桌面 * **1920px**：大屏幕 ** ** ## 版式标准 ### 字体大小 **移动要求**： * **正文**：最小 16 像素（防止 iOS 在输入焦点上自动缩放） * **标题**：按比例缩放（1.25-2x 正文大小） * **行高**：正文为 1.5，标题为 1.2-1.3 * **行长度**：每行最多 65 个字符以提高可读性 /* 移动排版 */ 身体{ 字体大小：16px；行高：1.5； } h1 { 字体大小：32px;行高：1.2； } h2 { 字体大小：28px;行高：1.25； } h3 { 字体大小：24px;行高：1.3； } .内容{ 最大宽度：65ch； /* 最佳可读性 */ } /* 放大以适应更大的屏幕 */ @media（最小宽度：768px）{ 正文 { 字体大小：18px; } h1 { 字体大小：40px; } } ** ** ## 响应式布局模式 ### 流体网格系统使用灵活的、基于百分比的自然适应布局： /* Flexbox 方法 */ .网格{ 显示：柔性；弹性包裹：包裹；间隙：16px； } .网格项目{ 弹性：1 1 100%； /* 移动设备：全宽 */ 最小宽度：0； /* 防止溢出 */ } @media（最小宽度：768px）{ .网格项目{ 弹性：1 1 计算（50% - 8px）； /* 平板电脑：2 列 */ } } @media（最小宽度：1024px）{ .网格项目{ 弹性：1 1 计算（33.333% - 12px）； /* 桌面: 3 列 */ } } ### 响应式图像为不同设备提供适当大小的图像： <图片 src="image-320w.jpg" srcset="image-320w.jpg 320w, 图像-640w.jpg 640w, 图片-1280w.jpg 1280w" 尺寸=“（最大宽度：480px）100vw，（最大宽度：768px）50vw， 25大众” alt=“描述” > <图片>

** ** ## 导航模式 ### 移动优化导航 **汉堡菜单**（用于复杂的导航）： /* 移动端：显示汉堡包 */ .移动菜单{ 显示：无；位置：固定；顶部：0；左：0；宽度：100%；高度：100vh；背景：白色； z 索引：1000； } .汉堡包{ 显示：块；宽度：44px；高度：44 像素；内边距：8px； } .mobile-menu.active { 显示：块； } /* 桌面：显示完整导航 */ @media（最小宽度：768px）{ .汉堡包{ 显示：无； } .desktop-nav { 显示：柔性； } } **固定标题**（滚动期间保持可访问）：标头{ 位置：粘性；顶部：0； z 索引：100；背景：白色；盒子阴影：0 2px 4px rgba(0,0,0,0.1); } ** ** ## 性能优化 ### 核心 Web Vitals 目标 (2025) **最大内容绘制 (LCP)**：< 2.5 秒 * 首先加载关键内容 * 优化图片和字体 * 最小化渲染阻塞资源 **首次输入延迟 (FID)**：< 100 毫秒 * 减少JavaScript执行时间 * 分解长任务 * 使用网络工作者进行繁重的操作 **累积布局偏移 (CLS)**：< 0.1 * 为图像保留空间（使用纵横比或显式尺寸） * 避免在现有内容之上插入内容 * 使用 CSS 转换动画 ### 表演技巧 /* 图片延迟加载 */

/* 防止布局偏移的长宽比 */ .image-container { 纵横比：16 / 9； } /* 优化动画 */ .animated-element { 将改变的：转变； /* 浏览器提示 */ 变换：translateX(0)； /* 使用变换代替左/边距 */ } ** ** ## 渐进式 Web 应用程序 (PWA) 增强 ### 基本 PWA 要求 **1\.需要 HTTPS** * PWA 必须通过安全连接提供服务 * 使用 Let's Encrypt、Cloudflare 等的 SSL 证书。 **2\. Web 应用程序清单** 在根目录中创建 `manifest.json`： { "name": "您的应用名称", "short_name": "应用程序", "start_url": "/", “显示”：“独立”， "背景颜色": "#ffffff", "主题颜色": "#007bff", “图标”：[ { "src": "/icons/icon-192.png", “尺寸”：“192x192”， “类型”：“图像/png” }, { "src": "/icons/icon-512.png", “尺寸”：“512x512”， “类型”：“图像/png” } ] } **3\.用于离线支持的 Service Worker** 基本 Service Worker 结构： // sw.js const CACHE_NAME = 'v1'; const urlsToCache = [ '/', '/styles/main.css', '/scripts/main.js' ]; self.addEventListener('安装', 事件 => { 事件.waitUntil( 缓存.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ）； }); self.addEventListener('fetch', 事件 => { 事件.respondWith( 缓存.match(事件.请求) .then(响应 => 响应 || fetch(event.request)) ）； }); **4\.添加到主屏幕提示** // 检测安装提示让 deferred 提示； window.addEventListener('安装提示之前', (e) => { e.preventDefault(); deferredPrompt = e; // 显示自定义安装按钮显示安装按钮(); }); ** ** ## 无障碍标准 ### WCAG 2.1 AA 合规性 **颜色对比**： * 普通文本：最小对比度 4.5:1 * 大文本 (18px+)：最小 3:1 对比度 * 使用 WebAIM Contrast Checker 等工具进行测试 **键盘导航**： * 所有交互元素必须可以通过键盘访问 * 需要可见的焦点指示器 * 保持逻辑 Tab 键顺序 /* 清除焦点指示器 */ 按钮：焦点，一：焦点，输入：焦点{ 轮廓：2px实心#007bff；轮廓偏移：2px； } /* 跳转到内容链接 */ .skip-link { 位置：绝对；顶部：-40px；左：0；背景：#000；颜色: 白色; 内边距：8px；文本装饰：无； z 索引：100； } .skip-link:焦点{ 顶部：0； } **ARIA 标签**：

移动优先设计师

包含技能