手机UI设计尺寸有哪些? 超全面的UI元素尺寸设置指南

而在对控件和文字都掌握熟练以后，才能进入后面的组件设计认识。

首先我们知道，安卓和 iOS 应用的中英文字体各不相同，苹果是用苹方和 San Francisco，安卓使用思源黑体和 Robot。

在后面我们主要以 iOS 作为说明的对象，安卓可以直接参照它的字体尺寸设置。

1. 英文的字号

在苹果的官方建议中，有罗列比较完整的文字字号建议，但大家一定要谨记，那些就是建议，并不需要在非官方的组件中应用那些字号。

首先我们要先划分出一个文字字号的范围，之后所有字体的字号设置就在那里面挑选。

在 UI 中，最小字号的依据一般有两个，一个是人眼的可见度，另一个是屏幕的显示极限，最小的字号应该在 9pt 。而最大的字号，以 iOS11 的标题字号 34pt 为准即可。

从 9-34，理论上其中每一个整数都可以使用，但我还是建议要应用一定的习惯。下面，就是我在英文应用设计中会使用的字体字号列表，为了便于记忆，我就只拆分成三种类型，初学者在使用时直接照搬就可以。

• 标题：34、28、24、22、20
• 阅读：18、16、14、12
• 注释：11、10、9

在英文应用中，我们应用的字号大小随项目复杂度决定，通常，尺寸会在五种以上，两种标题、两种阅读、一种注释类字号，当然，我们还会通过字重和色彩进一步划分，在这不再赘述。例如下面我使用五种字号尺寸设计出来的原型案例：

在 iOS 中，尺寸小于 20pt 使用 SF Pro Text，大于等于 20pt 时则使用 SF Pro Display 字体，这点大家需要牢记。

数字字体可以等同于英文，但如果有需要展示数据的需求，那么最大尺寸就要靠自己的判断了。

2. 中文字体

中文字体和英文字体的最大差异在于笔画数，很多中文的笔画和结构都异常复杂，如 「嚷」、「饕」、「餐」等，所以，最小的尺寸不可能和英文相等。建议最小中文字号使用 11pt。

至于最大的中文，因为苹方并没有 SF pro 字体那么丰富的字重，字号过大会有正负形失衡的违和感，所以，最大字号的尺寸也应比英文小。

下面是我在中文应用中建议使用的字号：

• 标题：28、24、22、20
• 正文：18、16、14
• 注释：12、11

前面做过的原型，应用的就是这些字号。

中文的字号选择范围是比英文小的，并且，中文字重数远少于英文，我们在做中文的应用排版远远比英文应用容易。很多新手天真的以为英文更容易设计，那都是源自对英文的陌生，只是将字符纯粹的当成有节奏变化的几何形状而不是用来阅读的文本。

3. 文字的边距

前面讲完了字号的选择范围，这里我们就要再来讨论一个问题，就是如何选择。

首先，合理的字号应用是要和环境息息相关的，而这种联系最多体现在文本区域的边距上。能被合理阅读的文本段落，是需要留白的，过于拥挤的文字排列只会造成阅读的不适。

因为前面我们已经说过控件的尺寸如何设置，所以当我们在设置文字时，很多时候是根据控件定义的高度结合边距来选择文字的字号，下面通过一些控件来举例。

例如我们定义了一个 40pt 高的按钮，在设置文字时，尝试将多种文字字号置入，过多的间距和过小的间距都会让按钮看起来不精致。合适的字体大小应该是 16pt。

而如果设置了一个 24pt 按钮，那么得到的结论应该是 12pt。

输入框的文字应用和按钮相同，也以上下间距作为主要参考。

字号的选择，除了本身定位（如标题或正文）以外，是可以通过比较的方式得出最优结果的。只要稍微花一点点时间，像上方案例演示的一样将设计元素复制排列出来，就可以很快选出正确的数值。

最新评论