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 毫米,表盘界面文字和图标尺寸要很小且清晰可读。
相关推荐
微祎_12 分钟前
构建一个 Flutter 点击速度测试器:深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
AAA阿giao34 分钟前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
晚霞的不甘1 小时前
Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析
flutter·ui·前端框架·交互·鸿蒙
百思可瑞教育1 小时前
构建自己的Vue UI组件库:从设计到发布
前端·javascript·vue.js·ui·百思可瑞教育·北京百思教育
XPii13 小时前
Photoshop应用——将图片变为水墨画效果
ui·photoshop
AC梦16 小时前
unity中如何将UI上的字高清显示
ui·unity
LeoZY_19 小时前
开源项目精选:Dear ImGui —— 轻量高效的 C++ 即时模式 GUI 框架
开发语言·c++·ui·开源·开源软件
Betelgeuse7619 小时前
【Flutter For OpenHarmony】TechHub技术资讯界面开发
flutter·ui·华为·交互·harmonyos
小湘西1 天前
UML 用例图图中包含和扩展区别
uml·设计规范·设计语言
止观止1 天前
TypeScript 5.9 终极实战:构建一个类型安全的 UI 组件库 (含多态组件实现)
ui·typescript