别再凭感觉画图了！移动端设计参数全汇总

一、全文速览图

正在入门学习 UI 设计的同学应该都发现了，UI 设计和平面最大的差别之一就是需要手动输入和制定元素的参数。而这些参数的设置不能光凭“感觉”，而是要遵循一定的逻辑，也就是说需要我们先学习背后的知识才能做出正确的设置。

但这些参数设置的知识和信息非常分散和碎片化，所以今天我们来做一篇汇总，解释移动端的主要参数制定明细与逻辑。

二、移动端的画布定义

移动端设计面对的第一个参数就是画布的尺寸，毕竟有了画布才能展开后续的设计，而画布的创建一直以来就没有“固定标准”，下面我们总结了最常用的三种类型。

最小画布：375*812

应用逻辑：iPhone8 的古老尺寸，但小程序创建官方规范依旧指定375宽，除此之外还有使用 Flutter 跨平台开发框架的项目，以及一些早期开始的项目形成路径依赖还在使用以前的规则创建画布。

中等画布：390*844

应用逻辑：iPhone13 的尺寸，属于前几年开发项目时创建画布的尺寸继续沿用，才会使用这个参数。

最新画布：402*874

应用逻辑：iPhone17 系列的画布，也是 iOS18/26 官方使用的组件库使用的画布，是创建新项目最合理的画布参数。

小程序项目统一使用375宽，练习/作品集的项目建议使用402宽，而项目中使用的画布尺寸通常由开发决定，需要沟通后创建，外人决定不了。

三、官方组件的尺寸

界面设计中有部分元素是遵循官方组件的设计展开的，我们就需要了解这些常见官方组件的参数才能更好的开展后续的工作。听起来似乎只要背一下就可以，但最大的问题就是不同设备和 iOS 系统版本所应用的官方参数是不同的。

iPhone 生产过的设备包含三种类型：直面屏、刘海屏、挖孔屏，且刘海和挖孔也因为硬件更新有不同的大小（逐渐变小），所以苹果官方会单独给它们定制组件的尺寸，而官方组件库只提供给我们最新系统和硬件的版本，不能直接应用到其它画布中去。

下面我们以 iPhone16pro/17pro 系列机型为准，来解释对应的官方组件参数。

iOS18 的组件尺寸

iOS18的状态栏高：50

设置逻辑：iOS18应用在iPhone16pro上的参数，更早的直面、刘海、挖孔屏建议自己找相应机型截图做测量或引用，不能直接套用该参数。

iOS18的底部指示器高：34

设置逻辑：底部指示器高度这几代没变，但只有刘海屏和挖孔屏有底部指示器，老式设备带Home键的没有。

iOS18顶部标题栏高：44

应用逻辑：基础标题栏尺寸常年保持44基本没有变化，44是早年交互研究中最适合用户点击的尺寸大小。

iOS18 底部导航栏高：83

应用逻辑：iOS18的底部导航栏是连接到屏幕底部的，覆盖了指示器部分，实际可选导航的区域按钮的区域高为 83-44 = 49。

iOS18 普通列表横栏高：44

应用逻辑：基础设置、信息列表中使用的默认单行高度为44，内容超出时可以扩大。

iOS18的按钮小/中/大的高度：28/34/50

应用逻辑：主要使用三种高度的按钮，使用4的小圆角，宽度根据内容决定或通栏展示。

iOS26 的组件尺寸

iOS26 的状态栏高：62

设置逻辑：iOS26中提高了状态栏的高度，iPhone16pro、17、17pro在该系统下都使用这个尺寸。

iOS26 的底部指示器高：34

设置逻辑：底部指示器还是原来的尺寸，但是默认不显示，在界面设计过程中可放可不放。

iOS26 顶部标题栏高：54

应用逻辑：高度增加了10，但往往没有使用背景色。

iOS26 底部导航栏高：95

应用逻辑：iOS26的底部导航完整的区域是95，但因为实际可交互的区域是悬浮的，它的尺寸为62，距离下方21，会和底部指示器有部分区域的重叠。

iOS26 普通列表横栏高：52

应用逻辑：基础设置、信息列表中使用的默认单行高度增加到52。

iOS26 的按钮小/中/大的高度：28/34/50

应用逻辑：按钮大小和逻辑没变，但使用了全圆角模式。

四、自定义组件的尺寸

官方组件的应用只占界面设计的一小部分，更多组件的设计是由设计师自己“原创”的。虽然理论上原创设计没有限制，但参数的应用是有合理性范围的，过大和过小都会导致组件无法被正常使用，所以下面对一些常见控件/组件的参数做对应的说明。

按钮小-大的高度：24-48

应用逻辑：按钮的宽度多由内容或外部环境决定，所以主要以高度作为分水岭，达到44或以上的就是大按钮，44以下就是中、小按钮，尽量以4的倍数进行增加或缩小。

标签小-大的高度：16-44

应用逻辑：标签虽然看起来和按钮很像但权重往往更低，操作性也更弱，所以尺寸通常会小一档。

自定义横栏/标题栏的高度：44-64

应用逻辑：自定义横栏通常从44作为起点，如果想要宽松一点的设计就会大于这个数值。

自定义输入框/下拉菜单：32-56

应用逻辑：输入框也是以44作为标准，小于44的就是小输入框，不小于44就是中等或偏大的尺寸。

图标小-大的尺寸：16-80

应用逻辑：图标的应用有大有小，大图标通常应用在快速入口从40-80不等，常规图标通常在24-36之间，一些小型、细节处的图标则通常在24以下。

需要直接定义尺寸的元素其实并不算多，因为参数就那么点，很多元素的外观也很相似可以共用尺寸参数。在真实设计过程中，更多的组件的尺寸是基于间距进行设置的。

五、移动端的间距应用设置

一个应用内会包含多种间距类型，可以分成页边距、外间距、内边距、元素间距四个大类（不包含文本类间距）。

页边距尺寸：2-24

应用逻辑：官方默认使用16，但根据不同设计风格或场景需要可以增加和缩小页边距。常见的信息流为了获得更大的展示空间，通常会将页间距设置在10以内。

外间距尺寸：8-36

应用逻辑：外间距通常指不同模块、组件之间的间距，要根据亲密性来设置，通常1级组件之间的间距最大，在20-36之间，下级组件之间的间距则较小，在8-16之间。

内间距尺寸：4-20

应用逻辑：内间距就是卡片类组件（按钮也算）内容到外边缘的间距，模块本身级别越高尺寸越大，那么内间距通常也会越大，在12-20之间。级别低尺寸小的通常在4-12之间。

元素间距尺寸：2-16

应用逻辑：元素间距通常是在一个组件内相邻的元素之间的间距，也会受到亲密性影响，关联度越大则间距越小，反之则越大。

间距的参数主要使用4的倍数，在较小的参数下可以使用2、6等偶数（太大的时候没设置非4偶数没区别）。所以间距数值往往就2、4、6、8、12、16、20、24、28、32、36这些选项，使用其中8个以内的参数就足以完成绝大多数页面的设计。

结尾

以上是对常见元素和间距参数的总结，对于文字部分的设置我们会在下篇再做分享。届时会尽可能整理成一份表格，你们有什么其它问题和建议也可以在下方或社群中发出。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」