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 毫米,表盘界面文字和图标尺寸要很小且清晰可读。
相关推荐
小马哥编程1 天前
【iSAQB软件架构】架构决策记录-ADR
数据库·架构·系统架构·设计规范
UI设计和前端开发从业者2 天前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
共享ui设计和前端开发人才2 天前
UI前端大数据处理安全性保障:数据加密与隐私保护策略
ui
ui设计前端开发老司机2 天前
UI前端大数据处理性能瓶颈突破:分布式计算框架的应用
ui
前端开发与ui设计的老司机2 天前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
UI设计和前端开发从业者3 天前
从UI设计到数字孪生实战应用:构建智慧金融的智能风控平台
ui·金融
ui设计前端开发老司机3 天前
数字孪生技术为UI前端提供全面支持:实现产品的可视化配置与定制
ui
X_StarX3 天前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
Clair-Sean3 天前
【交互设计】UI 与 UX 简介:从核心概念到行业实践
ui·ux
笑衬人心。4 天前
项目中数据库表设计规范与实践(含案例)
服务器·数据库·设计规范