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 毫米,表盘界面文字和图标尺寸要很小且清晰可读。
相关推荐
小小工匠11 小时前
LLM - awesome-design-md 从 DESIGN.md 到“可对话的设计系统”:用纯文本驱动 AI 生成一致 UI 的新范式
人工智能·ui
Ulyanov15 小时前
基于ttk的现代化Python音视频播放器:UI设计与可视化技术深度解析
python·ui·音视频
UXbot17 小时前
2026年AI全链路产品开发工具对比:5款从创意到上线一站式平台深度解析
前端·ui·kotlin·软件构建·swift·原型模式
ai_coder_ai18 小时前
自动化脚本ui开发基础入门
ui·autojs·自动化脚本·冰狐智能辅助·easyclick
sg_knight2 天前
设计模式实战:状态模式(State)
python·ui·设计模式·状态模式·state
黄思搏2 天前
基于标注平台数据的 Unity UI 自动化构建工作流设计与工程实践
ui·unity·蓝湖·vectoui
小樱花的樱花2 天前
1 项目概述
开发语言·c++·qt·ui
2301_822703202 天前
开源鸿蒙跨平台Flutter开发:跨端图形渲染引擎的类型边界与命名空间陷阱:以多维雷达图绘制中的 dart:ui 及 StrokeJoin 异常为例
算法·flutter·ui·开源·图形渲染·harmonyos·鸿蒙
极梦网络无忧2 天前
Windows UI Automation实现抖音直播间监控(桌面端场控助手核心方案)
windows·ui
newbe365242 天前
Design.md:让 AI 一致性进行前端 UI 设计的解决方案
前端·人工智能·ui