UI-设计规范大小总结

移动端

• iOS 系统
  • 设计尺寸：iPhone 16 Pro 以 402×874 为标准尺寸；iPhone 14 Pro 屏幕尺寸 6.1 英寸，分辨率 2556×1179 像素；iPhone 14 Pro Max 屏幕尺寸 6.7 英寸，分辨率 2796×1290 像素。
  • 图标尺寸：App Store 中应用图标 1024×1024 像素，设备主屏幕上 180×180 像素（@3x）；系统图标 24×24 像素到 44×44 像素。
  • 状态栏、导航栏和标签栏高度：iPhone 14 Pro 状态栏高度 47 像素，导航栏高度 44 像素，标签栏高度 49 像素。
• Android 系统
  • 设计尺寸：建议使用 Material Design 3 里的 412×958；左右折叠屏用 905×680，常见屏幕分辨率有 720×1280 像素、1080×1920 像素等。
  • 图标尺寸：Google Play 商店建议上传 512×512 像素的应用图标；mdpi 为 48×48 像素，hdpi 为 72×72 像素，xhdpi 为 96×96 像素，xxhdpi 为 144×144 像素，xxxhdpi 为 192×192 像素。
  • 状态栏、导航栏和底部虚拟导航栏高度：状态栏高度通常 24-32 像素，导航栏高度约 48-56 像素，底部虚拟导航栏（若有）高度一般 48 像素。
• 小程序和 H5
  • 小程序：微信官方定义分辨率宽 375，高≥667，通常用 375×812 规格创建画布。
  • H5：可以使用 360×640 或 375×667 等小尺寸画布进行放大适配更大的屏幕，高度相对灵活。

Web 端

• 网页定宽
  • 版心宽度：常见在 1000px 上下和 1200 上下，创建网页画布可用 1280×620 和 1440×800 分辨率，高度可随意修改。
  • 导航栏高度：一般在 60-80 像素，文字大小通常在 14-18 像素。
  • 按钮：最小点击区域尺寸建议为 44x44 像素，文字大小一般在 12-16 像素。
  • 输入框：高度一般在 36-48 像素，宽度根据输入内容而定。
• 响应式网页
  • 画布尺寸：根据断点设置创建画布，通常先从 1280 分辨率开始设计，最小桌面端网页通常是 800px，最大适配不超过 2560px。

其他平台

• 平板电脑
  • Android 平板电脑：有 1200x1920 像素、2048x1536 像素等分辨率规格，图标尺寸在 64x64 像素到 128x128 像素之间。
  • iPad 系列：iPad Pro 12.9 英寸屏幕分辨率 2732x2048 像素，iPad Air 10.9 英寸分辨率 2360x1640 像素，图标尺寸比手机端略大，在 64x64 像素到 128x128 像素之间。
• 智能手表
  • Android Wear：不同型号屏幕尺寸略有差异，总体都较小，设计要注重信息优先级和简洁性。
  • Apple Watch：如 Series 7 为 41 毫米或 45 毫米，表盘界面文字和图标尺寸要很小且清晰可读。