2025最新移动端UI尺寸设计规范完整指南

更新时间：2025-09-23 17:09:39

如果你正在做 App 或手机界面设计，大概都遇到过这样的困惑：在设计工具里调好一张漂亮的稿子，结果放到真机上一看，不是按钮太小难以点中，就是文字比例失衡，整套 UI 看起来完全不像自己做的那样精致。不同系统的分辨率、屏幕密度、状态栏高度都不一样，如果没有一套清晰的尺寸标准，设计再好看也难免走形。无论你是初学者还是有经验的设计师，都需要一份能覆盖设计稿基准、系统栏高度、图标大小、栅格间距到文字尺寸的完整指南，让每一次布局都有据可循。本文整理了一份所有与移动端ui尺寸相关规范的超实用清单，帮你快速建立移动端ui尺寸概念，也让老手能对标最新机型。无论是安卓还是苹果，接下来这份完整尺寸攻略，足以让你的移动端ui界面设计少走弯路，轻松上手~

1、设计稿基准——画布尺寸和逻辑像素

1.1 什么是画布基准

画布基准（Artboard / Frame base size）指你在设计工具（如 Figma、Sketch、XD 等）中设定的“参考尺寸”，通常是一个常见机型或者常用宽度。使用基准分辨率意味着你先在这个参考大小上完成 UI 样式、间距、栅格、文字等，再向上或者向下适配其他移动端ui尺寸，这样能保证 UI 在多个设备上的一致性。

1.2 Android 和 iOS 常用逻辑像素

Android 中常用单位是 dp 或 dip（Density-independent Pixel），Android 设计稿一般建议以 360×640 dp 作为基准画布。
iOS 则常以 pt（Point）为单位，早期常见为 375×667 pt（iPhone 6/7/8 系列）作为参考；对较新的 iPhone（如带刘海或者全屏设计的机型）可能使用 375×812 pt 等。

Android 和 iOS 常用像素

1.3 为什么先选小尺寸，再扩展

从 360 或 375 这样的较小宽度出发，能让你更好地判断出哪些 UI 元素、文字、间距是必须的，哪些可以舍弃；而且在小画布上做清楚了，再扩展到更大移动端ui尺寸或不同屏幕比例的时候调整就容易；小尺寸测试还能帮助提前发现触控区太小、文本行长过长、滚动方式差异等等没办法直接发现的问题。

2、常见机型分辨率速查

2.1 安卓常见分辨率

机型／类型	建议设计基准宽度 dp	典型 DPI / 屏幕像素比
Android 中端机（普通屏幕）	360 dp 宽度	mdpi、hdpi、xhdpi、xxhdpi等，比例从 1× 到 3× 不等
Android 高端机、Plus型号（大屏）	~ 412-414 dp 宽	高密度屏幕，比例通常 3×或更高

mdpi、hdpi、xhdpi、xxhdpi 是 Android 系统中表示屏幕密度的标准单位，用于适配不同分辨率的屏幕，其中数字越大代表屏幕密度越高。Android 将设备分组到密度存储桶中，这些屏幕密度决定了设计如何扩展：

MDPI （1x）：~160 PPI
高清（1.5 倍）：~240 PPI
xhdpi （2x）：~320 PPI
xxhdpi （3x）：~480 PPI
xxxhdpi （4x）：~640 PPI

假设我现在设计了一个 24 × 24 dp 图标。在不同的屏幕密度上，它分别呈现为：

MDPI 上 24 像素
HDPI 上的 36 像素
xhdpi 上的 48 像素
xxhdpi 上的 72 像素
xxxhdpi 上的 96 像素

Android 系统屏幕密度标准单位

2.2 苹果／iOS 常见分辨率

代表机型	逻辑分辨率 (pt)	倍率	物理像素 (px)
iPhone SE 3 代	375 × 667	@2×	750 × 1334
iPhone 8/7/6s/6	375 × 667	@2×	750 × 1334
iPhone 8 Plus 系列	414 × 736	@3×	1242 × 2208
iPhone XR / 11	414 × 896	@2×	828 × 1792
iPhone 12 / 13 / 14	390 × 844	@3×	1170 × 2532
iPhone 12 mini / 13 mini	360 × 780	@3×	1080 × 2340
iPhone 12-14 Pro (非 Max)	390 × 844	@3×	1170 × 2532
iPhone 14 Pro / 15 / 15 Pro	393 × 852	@3×	1179 × 2556
iPhone 11 Pro / XS / X	375 × 812	@3×	1125 × 2436
iPhone XS Max / 11 Pro Max	414 × 896	@3×	1242 × 2688
iPhone 12-14 Pro Max / 14 Plus	428 × 926	@3×	1284 × 2778
iPhone 14 Pro Max / 15 Plus / 15 Pro Max	430 × 932	@3×	1290 × 2796

注意不要忘了 iPad，如果 App 要兼容 iPad 或横屏模式，需要考虑不同的画布宽度如 768 pt 或更宽。其实光是看这些数字，很难直接记住，在具体实操的时候总是来回查阅也浪费时间，即时设计就提供了预设的标准画布模板，内含常用的 Android／iOS 基准画布。用这些模板起手，你就省掉了每次设置基础移动端ui尺寸的时间。

点击下面图片👇，即可体验即时设计提供的最新手机ui尺寸预设画布包~

2.3 市场热度与流行尺寸

根据最新统计，2025 年移动端中较流行的屏幕宽度包括：360×800 px、390×844 px、393×873 px、412×915 px、375×812 px、393×852 px 等。在设计移动端ui尺寸时，这些尺寸可以作为参考目标机型，确保覆盖大部分用户。

3、系统栏高度

iOS 状态栏 & 安全区
- 基本状态栏高度：旧款 iPhone 为 20 pt，高端全屏刘海机型通常为 44 pt。
- 安全区：底部、顶部的刘海、圆角等需要保留安全间隔，UI 元素不能贴边。
Android 状态栏 & 导航栏
- Android 的状态栏高度大致在 24 -32 px 区间，具体取决于屏幕密度与系统版本。
- 状态栏、导航栏：如果有底部导航栏或系统手势反馈区，需要预留与之对应的空间；当然也有全屏模式时可以隐藏这些栏。

图片来源：Linkedin

4、可点触区域尺寸

最小触控尺寸标准

iOS 系统建议的最小触控目标的尺寸（tap target）为约 44×44 pt；在Android 中则通常是 48×48 dp。

可点触区域与屏幕边距

当 UI 元素靠近屏幕边缘时，触控的体验会变差。通常建议给边缘元素留出一定空间（如 16 dp 或 pt），避免用户误点。在导航按钮、选项卡等常用交互元素的位置，不能让它们因为边缘弯曲、圆角或者刘海遮挡而难以操作。

多点触控 / 手势交互区

如果界面中含有滑动手势、拖拽、长按、滑块等，需要的触控大小可能比最小点击区域大。滑块把手、拖拽柄等可视触控区及效果区通畅，要保证手指操作舒适。

5、栅格与间距

5.1 栅格系统是什么

栅格（Grid）是帮助元素对齐、布局整齐、视觉一致的重要工具。通常栅格宽度以基础间距为单位，例如 8 dp / pt 的倍数，许多设计系统一般推荐 8pt 栅格。

5.2 间距与边距建议

外边距 / 边缘边距：16 dp 或 pt 是常见尺寸起点；在小屏设备上也可能用 12 或 8。
不同组件之间的间隔：建议使用一致的系数，如 8、16、24、32 dp／pt 的阶梯，以便设计稿简单且整洁。

5.3 自动响应式布局与弹性间距

注意需要使用自动布局、约束或百分比布局以适应不同设备的宽度和高度。另外，在界面宽度变化不大时，元素间距可以保持，但如果宽度增大很多，间距按比例或阶梯升级。

在栅格与间距、文字大小阶梯等规范中，即时设计常自带布局组件模板，你可以直接拖拽和复用已经标准化的栅格系统、按钮与图标组，这样移动端ui设计尺寸里的间距、文本、图标等就基本符合规范，不用每次重新测算。

👇点击下方图片，免费使用规范栅格组件，包含各个移动端ui尺寸哦~

6、文字大小尺寸阶梯

基础文字级别

在移动端设计中，sp 通常指的是 Scale-independent Pixels（缩放无关像素），这是 Android 系统里用来定义 文字大小 的单位。与前文的dp相比，可以简单理解为：

dp = 不随用户字体缩放变化，只随屏幕密度变化
sp = 随屏幕密度变化 + 随用户字体偏好变化

用途	iOS pt / Android sp 建议大小
正文主文字	14-16 pt / sp
副标题／小段落	12-14 pt / sp
标题／页面标题	20-24 pt 或以上视机型而定

行距与字行长度

行距一般设置为文字大小的 1.2-1.5 倍，以增强可读性，小屏幕上行距可以稍松，减少视觉压迫。移动端界面中，字行长度（每行字符数），每行控制在 30-40 个字符以内更好，过宽会使用户眼睛跳跃困难。

特殊文字／辅助文字

辅助文字、小标签、提示文字等建议不低于 11-12 sp／pt，以便阅读，标签、按钮文字要与触控区相匹配，不能因为文字太小而让按钮看起来失衡。

7、图标与图片尺寸

7.1 图标尺寸和多倍图

App Icon：iOS 通常有 @2x、@3x 版本，具体如 180×180 px 等。 Android 的 launcher icon、通知图标等有对应多个密度版本。
应用内图标（Toolbar / Tab bar）：一般为 24×24 dp / pt 或 32×32 ，视具体设计密度而定，并且需要提供多个分辨率输出。

对于图标与图片，不论你是在导出 @2x、@3x 还是不同屏幕密度版本，即时设计支持多倍图输出，一键导出多尺寸资源，这样你在做手机ui尺寸资源时不会因为忘了导出高密度版本导致真机模糊或图标失真。

👇 点击图片，立即体验多倍图导出，让移动端ui尺寸适配不再麻烦

7.2 图片分辨率与屏幕密度

高清图片或背景图在高密度屏幕上如果只用低分辨率，会变模糊。所以一般提供 1×、2×、3× 等多个版本来适应不同屏幕密度。我们可以优先选择用矢量图形（SVG 或向量格式），在缩放时能保留清晰度，非常适用于图标、图形元素，但复杂背景或照片类素材仍需高分辨率版本。

7.3 图像裁剪、安全区与比例

确保图片内容在裁剪或拉伸时不丢失重要部分，同时屏幕比例不同（例如宽高比为 19.5:9，20:9 等等）也可能会导致顶部／底部被“掐掉”。对横屏或翻转屏模式也要测试图片显示，部分 Full-screen+ 内容可能被状态栏或导航栏遮挡。

8、易忽略的细节

圆角、刘海、屏幕凹槽

新款 iPhone 有刘海、圆角，需要在设计稿中预留安全区，不要让 UI 元素贴到曲线边缘或被遮挡；Android 的某些旗舰也有屏幕凹槽、打孔摄像头，需要类似处理。

字体缩放／无障碍模式

用户可能开启系统字体放大和缩小模式，在这些情况下应保证文字和布局依然可读、不重叠；确认触控元素在放大后的版本中仍然可点按，不被其他元素遮挡。

横竖屏适配与屏幕旋转

如果你的 App 可能支持横屏模式，要考虑横屏下的 UI 尺寸、导航栏位置、工具栏高度等变化。同时也要测试横屏时 UI 元素是否过宽、文本是否需要调整行长、图片是否失衡。

视图切换动画与过渡效果中的尺寸变动

弹窗、模态框、底部弹出层等元素进入和退出时，尺寸过渡要自然，不应突然跳跃。也应该关注在动画开始与结束状态下尺寸与边距一致，避免视觉闪烁，影响用户体验感受。

如果你现在还是新手，刚开始做移动端ui界面设计，别担心，即时设计中有现成的移动端组件能够直接给你复用，你也可以在资源广场中寻找其他你喜欢的模板进行套用和学习。

👇点击下图，免费使用IOS和Android规范设计组件

写在最后

总结下来，移动端ui尺寸并不是一堆冰冷的参数，而是一套能让界面更顺眼、更好用的底层逻辑。从设计稿基准、常见机型分辨率，到系统栏高度、可点触区域、栅格间距、文字阶梯、图标与图片，再到那些容易被忽略的小细节，这些规范都能让你的作品在各种真机上都能稳定呈现。掌握并灵活运用这些规则，能避免因尺寸不当造成的误触或视觉疲劳，让用户的操作体验更自然流畅。真心建议你在项目中多在实机中验证，结合官方的 Android、iOS 指南或社区经验，不断微调与优化自己的尺寸策略，多对比、多试错，才能找到最适合产品调性的平衡点。如果你想节省摸索的时间，也可以试试即时设计的模板和资源库，有兴趣的话欢迎注册即时设计账号，里面有不少已经过验证的移动端ui尺寸和规范，可以直接套用或参考，让你的设计流程更高效、交付更顺畅。

👇推荐阅读