本篇继续讲解文字、图标、组件的规范建议

一、界面的字号设置秘诀

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

1. 英文的字号

首先我们要先划分出一个文字字号的范围，之后所有字体的字号设置就在那里面挑选。在 UI 中，最小字号的依据一般有两个，一个是人眼的可见度，另一个是屏幕的显示极限，最小的字号应该在 9pt 。而最大的字号，以 iOS11 的标题字号 34pt 为准即可。

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

标题：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。

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

二、界面图标的尺寸要怎么定？

这一节要讲讲关于图标的尺寸，应该是最容易的地方，因为前面的内容中，应该已经习惯使用 4 的倍数，在图标中同样遵循这样的原则。从相关的图标素材下载网站就可以发现这种规律，如 iconfont、iconsearch 等等。

1. 图标的权重

在设置具体的尺寸前，我们还是要谈谈权重的问题。正常的 APP，通常会包含大量的图标，而这些图标，大小并不会完全一样。如下面的案例：

之所以这些图标的大小不一样，和它们代表的功能和权重分不开关系。我们可以简单将应用内会出现的图标分成 3 类，代表不同级别的权重：

最高：页面中重要的功能入口

中等：底部导航栏用的图标

最低：一般的工具类图标

当然，这是我简化过的逻辑，类似淘宝、京东、携程这类大型应用，就还可以划分出更细致的权重类型。而不同的权重实际上就对应了不同尺寸的图标，如果有 3 种权重，那么我们在设计的过程里就会设计三种尺寸的图标。

2. 图标的尺寸

首先划重点，图标的尺寸，主要指的是图标在应用中占据的矩形区域，而不是图标本身图形的区域。

我们在设计具体图形前，是先通过确定矩形区域的尺寸，再制作参考线然后进行设计的。而不是随意设计了图标再对应缩放到指定的位置。

例如，设计快速入口，一开始我们定义出的这个组件为分割成两行四列的卡片，每个入口的实际大小。

所以，下面就是我对矩形尺寸定义的建议：

最大：64、56、48

中等：44、36、32

最小：28、24、20

2. 设置列表

设置列表中，由高度相同的列表项组成，它们的高和宽应该是根据设计的风格一开始就制定好，如比较紧凑的风格我们采用 48pt 的高，比较宽松的风格就采用 64pt 的高。然后我们再排列内部的元素，进行水平居中。

3. 班次信息

可以将上下的内容拆分成3个不同的子模块，班次、时间、更多操作，班次和更多操作采用固定高度 44pt 的方式，时间则根据内容设置边距的方式，最后得到的高度总和，就是班次信息组件的高度。

4. 瓷片区

主流的瓷片区，其实也由子模块组合而成，而如淘宝这类会有很多瓷片区并列的状态，我们优先要考虑的，是每个瓷片区在屏幕中的占比，也就是先定义好瓷片区的高度，再拆分内容的子模块。

例如划分为两行的瓷片区，总高度为 280pt，上方的模块高度为 180pt，下方的模块高度为 100pt，里面的元素，再根据这个内容区域进行排版：

完成一个完整的组件，是根据它的内容和周围的环境决定，我们只要感觉前面几个部分所说的参数设置进行分解，就可以很轻松的定义出组件的实际尺寸。而无论任何组件，它们都没有固定的尺寸值，需要大家不断的练习掌握制定的思路。之后再设计完整的页面，或整套应用时，就能大大提升效率和设计质量。

好了，app中遇到的元素尺寸问题基本就说完了，小本本有没有记下来呢 ;)

最后贴一个我的公众号给大家， 里面有干货、教程、个人VLOG生活分享。说不定关注了，哪天会有惊喜给你哦～