在上篇章《基础科普！超全面的 UI 元素尺寸设置指南（上）》中介绍了设置 UI 元素尺寸的基础规范，及控件尺寸的定义。
篇就要开始介绍前面没有说的文字设置，图标的尺寸，UI 的组件设计了。
一、界面的字号设置秘诀
字的尺寸至重要，但先解了控件再思考字，会更容易一些，它们之间有一些有趣的联系。
而在对控件和文字掌握熟练以，才能进面的组件设计认识。
首先知道，安卓和 iOS 应用的中英文字体各不相同，苹果是用苹方和 San Francisco，安卓使用思源黑体和 Robot。
在后面主要以 iOS 作为说的对象，安卓可以直参照它的字体尺寸置。
1. 英文的字号
在苹果的官方建议中，有罗列比较完整的文字字号建议，但大家一定要谨记，那些就是建议，并不需要在非官方的组件中应用那些字号。下图是苹果默认字体尺寸，详见翻译的 iOS 规范第 124 页。
《iOS 12 设计规范——iOS 文规范更新啦！》
首先我们先划分出一文字字的范围，之后所字体的字设置就那里面挑选。
在 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。
输入框文应用和按钮相，也以上下距作为主要参考。
号选择，除了本身定位（如标题或正文）以，是可以过比较出最优结。要稍微花时，像上案例演示样将设计元素复制排列出来，可以很快选出正确数值。
后，面到的关于文字字的设，结合控件的规范，就能下一节中决组件的设尺寸，缺一不可。
多做针对性练习，升对控件和字的掌握熟练是很有必要的。建议多做一些简单界面的摹，并套前面到的元素尺寸，这样很快就适应这种效规范的方式了。
二、界面图标的尺寸要怎么定？
这一节要讲讲于图标的尺寸，应该是最容易的地方，因为前面的容中，应该已经习惯使 4 的倍数，在图标中同样遵循这样的原则。从相的图标素材载就可发现这种规律，如 iconfont、iconsearch 等等。
1. 图标的权重
在设具体尺寸前，我们是要谈谈权问题。正常 APP，常会含大量图标，而这些图标，大小并不会完全样。如下案例：
所以这些图标大小不样，和它们代表功能和权分不开关系。我们可以简单将应用内会出现图标分成 3 类，代表不级权。
高：页面中重的功能入口
中：底部导航栏用的图标
低：一般的具类图标
当然，这我简化过的逻辑，类似淘宝、京东、携程这类型应用，就还可以划分出细致的权重类型。不同的权重实际就对应了不同尺寸的图标，如果 3 种权重，那么我们设的过程里就会设三种尺寸的图标。
2. 图标的尺寸
首先划重点，图标的尺寸，主指的图标应用中占据的矩形区域，不图标本身图形的区域。
我们设具体图形，先通过确矩形区域的尺寸，再制作参考线然后行设的。不随意设了图标再对应缩到指的置。
例如，设计快速入口，一开始我们定义的这个组件为分割成两行列的卡片，每个入口的实际大小。
，面就是我对矩形尺寸定义的建议：
- ：64、56、48
- 中等：44、36、32
- 最小：28、24、20
根据图标处区域的上间距，从上方挑合尺寸即可，过程与字号设置是一样的，这里就多做演示了。
还需要注意，在一套 App 中，图标出现的尺寸数尽能减少，尤其对新手，只需要应用 2-4 套不同的尺寸即，否则也对视验带来明显的破坏。
三、UI 的组件设计
最，就要说说组件的尺寸是怎么设置。
首先要知道组件是什，它是一个包含了控件、文字、图标的功能集。可以是一个独立的息展示，也可以完成一个复杂的操作流，是学习 App 计中最重要的环节。
1. 组件的尺寸原则
定义组件的长和宽，方式有两种，一种是根据境定，一种是根据内容节。
第一种，即通过外部的素来确定组件的尺寸。例如要计一个头部的幻灯片组件，以左右可以滚动的形式展现。那首先要根据想要幻灯片在屏幕中的占比来制定高度，例如觉得大致要有屏幕 1/3 的比例，那可以定高度为 220pt（664除3），而根据上下对齐的则，左右就由屏幕宽减去左右内边距 16pt 即可。
第二种，是根据面添加的素来确定宽和高。例如在首页幻灯片下方，添加左右滚动的卡片，那先定面的控件和文字尺寸，然后再通过制定内边距的形式确定组件的尺寸。
当然，也有混的定义方式，如一开始订好宽，根据内容定高，像花瓣瀑布流的卡片，或者定义好高来调节宽。体使用什形式，就要因地制宜了。
下会过几个常见组件案例，来演示如何定义它们尺寸。
2. 动态卡片
动态卡片是很常用组件，常以卡片形展现。条动态常占据内容区域列，即左右减去制定好内边距 16pt，那么是 375-32 = 343pt 宽。而高度，要根据里所含元素了，如下图所示。
3. 设置列表
置列表中，由高度相同的列表项组成，它的高和宽应该是根据计的风格一开始就制定好，如比较紧凑的风格采用 48pt 的高，比较宽的风格就采用 64pt 的高。然后再排列内部的素，进行水居中。
4. 班次信息
常见的班次信息，我们在定义它尺寸时，也是根据内容来考虑的。首先确认它是一个撑满屏幕的组件即 375pt 宽，填对应的字段内容。
这候可以将上下的内容拆成3个不同的模块，班次、间、更多操作，班次和更多操作采用固定高度 44pt 的方式，间则根据内容置边距的方式，最后得的高度总和，就是班次息组件的高度。
5. 瓷片区
主流的瓷区，其也由子模块组合而成，而淘宝类有很瓷区并列的状态，我们优先要考虑的，是每个瓷区在屏幕中的占比，也就是先定义瓷区的高度，拆分内容的子模块。
例如划为行的瓷片，总高度为 280pt，上方的模块高度为 180pt，下方的模块高度为 100pt，面的素，再根据这个内容域进行排版。
完成一个完整的组件，是根据它的内容和周围的环决定，只要觉前面个部所说的参数置进行解，就可以轻的定义出组件的实际尺寸。而无论任何组件，它都没有固定的尺寸值，需要大家不断的练习掌握制定的思路。之后再计完整的页面，或整套应用，就能大大提升效率和计质量。
总结
有目的和逻辑性的对参数进行置，是 UI 计中最重要的一环！想要真正掌握它，就一定要多做练习进行巩固。相任何人都可以在这个过程中发现 UI 计的趣。
欢迎关注作者微信公众号：「电话亭」
图片素材作者：Timo Kuilder
浙公网安备33011002017549号