UI设计中不同手机尺寸和模板大合集!

更新时间:2024-04-30 11:25:10

对于一名 UI 设计师来说,了解尺寸规范是必不可少的。精确掌握和应用各种尺寸规范确实是关键的一环,因为这影响到用户界面的功能性、美观性和用户体验。不同手机尺寸一般是多少?今天本文就为大家带来了 UI 设计中不同手机尺寸和模板大合集!iPhone 手机 UI 设计尺寸、Android 手机 UI 设计尺寸、iPad UI 设计尺寸和 UI 界面设计字体规范,文中还附有免费使用的设计模板链接,赶紧往下看吧!

点击图片,免费使用同款设计模板👇

手机尺寸一般是多少

1、iPhone 手机 UI 设计尺寸

  • iPhone X (@2x)

分辨率:750 × 1624(PX)

状态栏:88(PX)

导航栏:88(PX)

标签栏:98(PX)+68(PX)

  • iPhone 6/7/8

分辨率:750 × 1334(PX)

状态栏:40(PX)

导航栏:88(PX)

标签栏:98(PX)

  • iPhone X/XS

分辨率:1125 × 2436(PX)

状态栏:132(PX)

导航栏:132(PX)

标签栏:147(PX)

点击图片,免费使用同款设计模板👇

UI设计中不同手机尺寸

  • iPhone 5/5S/5C

分辨率:640 x 1136 (PX)

状态栏:40(PX)

导航栏:88(PX)

标签栏:98(PX)

  • iPhone 6P/7P/8P

分辨率:1242 x 2208(PX)

状态栏:60(PX)

导航栏:132(PX)

标签栏:147(PX)

  • iPhone 4/4S

分辨率:640 x 960(PX)

状态栏:40(PX)

导航栏:88(PX)

标签栏:98(PX)

  • 应用图标尺寸输出

1024x1024 (PX) 180x180 (PX) 120x120 (PX) 87x87 (PX)

80x80 (PX) 60x60 (PX) 58x58 (PX) 40x40 (PX) 29x29(PX)

不同手机尺寸

2、Android 手机 UI 设计尺寸

  • Android 1

分辨率:320 × 480(PX)

状态栏:40(PX)

导航栏:88(PX)

标签栏:98(PX)

  • Android 2

分辨率:480 × 800(PX)

状态栏:40(PX)

导航栏:88(PX)

标签栏:98(PX)

  • Android 3

分辨率:540×960(PX)

状态栏:40(PX)

导航栏:88(PX)

标签栏:98(PX)

  • Android 4

分辨率:720 × 1280(PX)

状态栏:50(PX)

导航栏:96(PX)

标签栏:96(PX)

  • Android 5

分辨率:1080 × 1920(PX)

状态栏:75(PX)

导航栏:144(PX)

标签栏:144(PX)

  • Android 6

分辨率:1140 × 2560(PX)

状态栏:100(PX)

导航栏:192(PX)

标签栏:192 (PX)

  • 应用图标尺寸输出

192 × 192 (PX) 144 × 144 (PX) 96 × 96 (PX) 72 × 72 (PX) 48 × 48 (PX)

3、iPad UI 设计尺寸

  • iPad 3/4/5/6/Air/mini2

分辨率:2048 x 1536(PX)

状态栏:40(PX)

导航栏:88(PX)

标签栏:98(PX)

分辨率:264(PPI)

  • iPad Mini

分辨率:1024 × 768 (PX)

状态栏:20(PX)

导航栏:44(PX)

标签栏:49(PX)

分辨率:163(PPI)

  • iPad 1/2

分辨率:1024 × 768(PX)

状态栏:20(PX)

导航栏:44(PX)

标签栏:49(PX)

分辨率:132(PPI)

  • 应用图标尺寸输出

167 × 167 (PX)

152 × 152 (PX)

76 × 76 (PX)

4、UI 界面设计字体规范

  • IOS 字体

中文:苹方

英文:San Francisco Pro

  • Android 字体

5.0 以上版本:思源黑体/NotoSansHan

5.0 以下版本:Droid SansFallback

英文/数字:Roboto

  • 字体大小

导航栏:32-36(PX)

标签栏:20(PX)

内容:2-6(PX)的阶梯

5、最后

以上就是今天本文和大家分享的 UI 设计中不同手机尺寸和模板大合集,掌握这些尺寸规范不仅能帮助设计师创建更有效的设计,也有助于提升设计的专业性和实用性,最终提升用户的满意度和使用效率。在日常工作中,UI 设计师需要通过持续学习、实践和测试,来不断完善自己对尺寸规范的理解和应用。即时设计作为国产优秀的 UI 设计工具,内置的设计模板和强大的设计功能,都能帮助设计师更加快速的完成工作!

点击图片,立即体验即时设计社区👇