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 毫米,表盘界面文字和图标尺寸要很小且清晰可读。
相关推荐
ZC跨境爬虫5 小时前
跟着 MDN 学 HTML day_12:(HTML网页图片嵌入)
前端·javascript·css·ui·html
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_11:(语义化容器全站重构+独立CSS拆分+字体合规引入)
前端·css·ui·重构·html·edge浏览器
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_10:(超链接核心语法+路径规则)
前端·css·笔记·ui·html·edge浏览器
ZC跨境爬虫18 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
Avalon7121 天前
Unity3D响应式渲染UI框架UniVue
游戏·ui·unity·c#·游戏引擎
qq_454245031 天前
从 UI 操作到环境交互:一种通用元命令自动化协议的设计与意义
人工智能·ui·自动化·交互
CappuccinoRose1 天前
数据设计 - 软考备战(五十)
软考·设计规范·er图·数据设计·规范化理论
格林威1 天前
工业视觉检测:提供可视化UI调试工具的实现方式是什么?
开发语言·人工智能·数码相机·ui·计算机视觉·视觉检测·工业相机
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_8:(高级文本语义标签+适配核心功底)
前端·css·笔记·ui·html
橙子199110162 天前
UI 绘制相关
ui