当前位置: 首页 > article >正文

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 毫米,表盘界面文字和图标尺寸要很小且清晰可读。

http://www.kler.cn/a/542975.html

相关文章:

  • 网络分析工具—WireShark的安装及使用
  • 使用 Go 语言调用 SiliconFlow 语音生成 API 的脚本,用于将文本转换为 MP3 格式的语音文件。
  • vue 主子表加校验问题
  • WPS中如何批量上下居中对齐word表格中的所有文字
  • JavaScript 在 VSCode 中的优势与应用
  • 如何使用DeepSeek帮助自己的工作?
  • 4G/5G路由器链路检查作业指导
  • 14.1 AutoGPT 项目深度解析:为什么它能掀起自主智能体开发革命?
  • 安防机器人电源解决方案
  • 网络在线考试|基于vue的网络在线考试系统的设计与实现(源码+数据库+文档)
  • Python自动化办公之批量重命名
  • MySQL 动态分区管理:自动化与优化实践
  • PortSwigger——WebSockets vulnerabilities
  • 【GeeRPC】Day5:支持 HTTP 协议
  • 浙江大华社招面试
  • PyTorch 中 `torch.cuda.amp` 相关警告的解决方法
  • 手撕Transformer编码器:从Self-Attention到Positional Encoding的PyTorch逐行实现
  • MySQL主从复制过程,延迟高,解决应对策略
  • MS08067练武场--WP
  • IntelliJ IDEA Console控制台输出成json的配置方式
  • 4、k8s的pod详解
  • 公开免费的API集合
  • 嵌入式音视频开发(零)移植ffmpeg及推流测试
  • Spring Boot 配置 Mybatis 读写分离
  • 【机器学习案列】车辆二氧化碳排放量预测
  • Redis哨兵模式相关问题及解决方案