📱UI设计稿Sketch尺寸必看指南｜1024x1920全（附适配规则+避坑技巧）
💡简介：刚接触Sketch设计的新手总被尺寸问题搞懵？这篇从0到1手把手教你掌握全平台适配尺寸，附赠微信小程序/APP/网页端设计规范，手残党也能轻松拿捏设计尺寸！
一、设计师必存的全平台尺寸对照表（新版）
1️⃣ 移动端核心尺寸
• 微信小程序：750x1334（1.5倍压图）
• 智能手机：1080x1920（主流机型适配）
• 表情包尺寸：512x512（社交传播友好）
• 刷脸支付：480x480（安全区域规范）
2️⃣ 网页端黄金比例
• 站点首屏：1920x1080（16:9电影级适配）
• PC端安全区：1170x880（排除系统 bars）
• 移动端折叠点：768x1366（适配折叠屏趋势）
3️⃣ 特殊场景尺寸
• 直播间弹幕：400x100（固定高度防遮挡）
• AR试妆框：1080x1350（美颜相机标准）
• 地图导航：600x800（高德/百度官方尺寸）
✅尺寸校验三步法：
① 检查Sketch「信息面板」＞尺寸数值
② 使用「适配检查器」插件自动检测
③ 导出时勾选「Web优化」压缩设置
二、Sketch设计尺寸三大核心规范
1️⃣ 像素密度控制
• 375x812 → iPhone 13 Pro Max
• 414x896 → 三星S23 Ultra
• 320x720 → 中低端机型保底
🔧进阶技巧：
- 使用「@2x」@3x 比例组
- 在「图层样式」中设置「缩放」选项
- 导出时选择「适配屏幕」自动调整
2️⃣ 动态布局规范
• 滚动加载间距：≥300px（防闪屏）
• 列表 item 间距：8-12px（视觉呼吸感）
• 滚动条宽度：10-14px（符合F型浏览习惯）
3️⃣ 多端适配策略
√ 微信小程序：首屏加载≤1.5s
√ H5页面：首屏渲染≤1.2s
√ APP界面：启动时间＜2s（含加载动画）
⚠️常见错误TOP3：
1️⃣ 忽略「安全区域」设计（系统返回顶部/底部区域）
2️⃣ 未考虑深色模式对比度（WCAG 2.1标准）
3️⃣ 动态组件比例未做弹性设计
三、实战案例拆解（附源文件）
📂项目背景：某生鲜APP首页改版
⚙️原始问题：不同机型加载速度差异大
💡解决方案：
1. 在Sketch「自适应布局」中设置3种比例
2. 使用「尺寸变量」统一组件尺寸
3. 导出时添加「WebP格式」压缩
📈优化成果：
• 移动端加载速度提升40%
• 客户端崩溃率下降75%
• 小程序分享率提高28%
四、必备插件清单（最新版）
1️⃣ SizeName Pro：自动生成尺寸命名
2️⃣ Auto Layout：智能对齐神器
3️⃣ Sketch Exporter：批量导出优化
4️⃣ Color Palettes：色值规范管理
5️⃣ Design System：组件库搭建
🎁资源包领取：
关注后回复「尺寸规范」获取：
① 20个主流机型尺寸表
② Sketch适配检查清单
③ 5套免费设计模板
④ 动态布局案例源文件
📝
设计尺寸优化直接影响用户留存率，建议每季度进行一次全平台适配检查。记住「三多原则」：多维度测试、多设备验证、多场景覆盖。附赠自检清单：
□ 是否考虑了折叠屏设备？
□ 安全区域留白是否≥20px？
□ 深色模式对比度达标吗？
□ 动态组件有弹性设置吗？
🔖标签：
UI设计规范 Sketch技巧 设计尺寸 全平台适配 百度优化