在开始着手设计手界时，困扰着新除了不知应该在界放什么以，最突出是不知元素应该使用长宽数值，也是学生问最多问题，所以着手理2篇文章做扫盲，性搞明白，在手界如何设元素尺寸。
一、基础规则
1. 官方规范
对刚开始思考 UI 元素尺寸的新人，通常一反应是去看官方规范，新人以为官方设计规范的用就是告诉你们元素的大小和怎么设置，只要看完就能懂得何设计 iOS 或 Android 应用。而际上，规范并不能帮助你们决个问题，因为设计规范涵盖的内容远远比复。
我们想要搞楚 iOS 和 Android 官元素具体尺寸，最好法是去下载它们官 UI-Kits，如下图安卓组件库所示。
官不会提供个列表，逐罗列个元素长宽和其它参数，所以想弄明白，要自己在这两套素材库选元素查看。如下图这个按钮，我们能看见它参数值。
免获取 → iOS 11设计规范发布了，来载官方源件！
在初期，我们想要设计严格符合官方规范的设计，就可严格照搬官方的元素设置。但是，即使官方的源件包含的元素字体已经非多了，在实际设计过程中，还是会现它们无法覆盖的设计类，需要依靠我们自己设置。
还有如字体的应用，官方源文件使用的语言是英文，光是官方应用的种 SF 字体，就包含了十种字重，所以可以见文字应用面板中密密麻麻的字体类型。在真实的中文计景下，是不可能照搬这种规范的。
新人要，官方的规范，只是一种建议，可以选择遵守也可以选择不遵守。如果一味的照搬这些内容，是无法计出有趣个性化的计的，比如下面这款已经不 「 iOS 计 」的应用。
官方的参数决定计的下限，当你不知道该怎做，或者计的目标就是以系统生的体验和视觉为准，那照搬就行了。后面的文章要说的，就是脱离开这些束缚，正确定义 UI 素的尺寸。
2. 尺寸设置原则
UI 和面不一的地方，就是极其关注素属性的体数值。面的排版无论是海报或画册，使用百比、目测的形式就足以让做出多优秀的作品，无需紧盯着其中出现的每个素的长宽高数值。而 UI 的计中，无论字体、图标还是按钮，都需要严谨地定义它的长宽高，如下图计一个按钮的操作。
这做的因是因为在屏幕中，图像的呈现是由屏幕中的像素点来完成的，像素点是最的显示位，一个点只能显示一个颜色，所以如果置了带有数点的数值，那这个素的边缘就会虚化。所以为了避免这种事情出现，就得用整数来定义素的长和宽。
这当中还涉及不少比较复杂的屏幕显示理问题，尤其是和像素倍率相关的基础知识，会在另外的文章享，后面文章所有的长度位默认以 PT 为准，即 XD 和 Sketch 默认画布的位，PS 中计需要在这个基础上乘以2。
只分隔线，唯一可以不使用整数的例外，因 1pt 的分隔线看起会非常粗，一点也不精致，感趣的同学可以自己 Sketch 或 XD 中画列表然后用 1pt 的线条分隔，再导出到手机里观看效果。即使官方应用，也主使用 0.5pt 的线条分隔。
无论 iOS 或 Android 的规范中，也都提到过使用 8 x 8 的网格辅，这导致网很多片面的文章会反复强调对元素的尺寸使用 8 的倍数。
- iOS：使用 8px 网格系统，网格系统可以让线条和图像内容在所有尺寸上保持清晰，无需多的修饰和锐化。将图形边界对齐网格上，减少按比例缩图像出现的半像素和内容模糊的情况。
- Android：所组件都与间隔 8dp 的基准网格对齐。排版/文字与间隔 4dp 的基准网格对齐。具中的图标同样与间隔 4dp 的基准网格对齐。
实际上，在真实的计环中，建议大家使用 4 的倍数作为一素的尺寸倍率即可，如 8、12、16、20、24等，它的好会在后面的文章中做说。如果发现 4 的倍数无法足某些定的需要，如多 4pt 大，少 4pt ，那就可以使用一的偶数如18、22、26等。
以就我们一始建立的元素尺寸原则，精简完即：
- 使用整数，只有隔线可以使用 0.5 的数；
- 使用 4 的倍数，根据实际况可以切换一般偶数。
有了这的则，并养成习惯，就能在每次计前对素尺寸有个大致判断，然后再根据需要按 4 的倍数调整，如下面计注册登录页面的输入框作为案例。
开始使用 280 宽，44 高的尺寸，但是觉得有点僵硬，正式了。这候反思认为应该是输入框矮导致的，所以高度上改成 44+(4×2)=52 。这候觉得高了，实际输入内容也没那宽，于是再对高减 4，宽减 40，获取最终结果。
所以，因这样的操作原则，决了 UI 元素的尺寸不凭感觉用鼠标拖拽出的（拖动效率太低），元素的属性栏中填入它们的数。UI 的设过程就一不停键入参数调整参数的过程。
3. 总结
以就对与 UI 元素尺寸义的第一部分，因讲清楚需花的篇幅太，所以我会将后面具体的案例讲解拆 4 部分，分别由控件、文字、图标、组件部分组。
二、控件尺寸定义
这里声明，我的语系中，控件指的界面中基本的交互单，如按钮、滑块、关、分页器，复杂的如动态卡片，功能速入口，就归入组件中，便于我们理解。
下面，根据前面定义的规范，分别讲控件应该使用的尺寸范围：
1. 按钮
按钮界面交互操作中使用频繁的元素了，当然按钮呈的形式也多种多样，比如可以文字、图片、图标、卡通形象。这里，我们只聚焦于矩形的基础按钮。
在进具参数的讲前，要先理按钮际上是所有控件中最复的一个，并不是因为在设计样式上的复，而是因为按钮承载最的产品诉求，权重差异极大，例看下面的案例。
在上图中，以点击的东西不少，我们就说外观是标准样式的按钮，就有 9 个。而里面，权重最高的必是 「加购物车」。权重最低的，应该是前往新品页。
定义按钮尺寸，我们首先要知是，按钮在界或个应用权，尺寸和权是成正比关系。然，颜色也是要性表现关键素，不过不在这里展开。
按钮高度
我们设计按钮时，优先要从高度入手，再去定义宽。为了便于新手理解，我首先从高度上来匹配权，分成高、、低三类：
- 高权重：40-56pt
- 权：24-40pt
- 低权重：12-24pt
高权按钮，类似登录页注册、登录，物详情页买，流程页下步，它最小高度应该从 40pt 开始递增，低于这个大小，那么这个按钮很难在这个页起到视觉支撑，为感觉太细了。
权按钮，类似个主页关注、赞、评论按钮等。这个层级按钮依旧有比较高频交互数，我们必须保证它易于击。24pt 是在我经验便于击最小尺寸了。这按钮常是组件部分，不像层级最高按钮常常是处于个孤立空，所以高度如出 40pt，会前模块生观破坏。
低权按钮，类似查看更多、标签、详情等类型，相于按钮交互属性，这类按钮具备更多提示属性，要让用户能看见，又不需要太显眼。尺寸不大于 24pt，能容纳内部文或图形元素即可。
使用上这法，在页根据权定尺寸可以了。需要注意是，不尺寸按钮，高度距不要小于 4 ，否则异太小不仅不开层，容易使视觉感受变。
按钮宽度
主流按钮都是长形，正形也有，是不能变成纵矩形。
按钮宽度主要和内容挂钩，内容数量越多，按钮自然也越宽。唯例，有高权按钮，可以视内容数量。为它们需要更多区域，往往都是撑满屏幕内容区域或全屏，可以特殊处理。
普通按钮，左右间距距离容过多，就会按钮看起来非的协调。我们要根据容来设置按钮左右的宽，最大宽应该小于容距离上的 2 倍。
按钮圆
按钮尺寸有最后个属性，是按钮圆设了。矩形边有三类型，即矩形、圆矩形、半圆矩形。
为矩形设圆，是为了让按钮看起来有定圆润感不会显太尖锐，这圆数值赋予要适，要出了定范畴，会视觉和谐生影响，我习惯称呼为——半圆不圆，如下图右侧误案例。
所以，我们在设计圆过程，定要仔细感受圆在画和谐性。而圆设范围，不大于高度 1/4。例如，个24pt圆矩形，圆尺寸应该不大于 6pt，如上图效。
上就是按钮相尺寸定义的说明，当然，在真实的设计需求中可遇到很多无法满足的情况，这就需要大多做尝试了。
2. 输入框
输入框也是我们比较常用元素，它和按钮有常接近形。最常见是登录页账号密码输入框，以及首页上搜索栏了。
输入框的使尺寸，规在 36-56pt 之间。低于 36pt 时则输入框看起来会非拥挤，如我面生的案例做个演示。
3. 步进器
常见的步进器，就是输框和按钮的结合。左右有两个用来增加数量的按钮，中间是允许我们直接键数字的输框。在尺寸上，它也介两者之间，高度在 28 – 40 之间。下面我用学的业做次演示，当低 28 以，就现在屏幕中的占比在太小。
步进器中常见的错误，是在我们设置圆角外框时，绘左右两个按钮，并没有合理的减去内的圆角，是绝对不应该忽略的细节。
4. 下拉菜单
下拉菜要注包含多种状，默认、展开和选中。默认状输入框类似，主流的高度也使用 36-56pt。但是，当菜展开后，下方多出来的选项菜，就值得注了。
单的宽度常况下与默认状态相同，高度根据里面包含的选项数决。单行选项，高度不于默认的选项框的。新手很易弹出单中设过小的高度，使整控件看起会非常的别扭。
5. 开关
开关也是按钮的一种形式，通常出现在置页的列表中，上方就是它主流的种式。在计开关的候，要先确定一个矩形域，高度使用 24-32pt，宽度则用 1:2 的比例。如高度使用 28pt，那宽大致可以使用 56pt。之后再将细节填入。
6. 滑块
滑形式接开，通在中间有一个操作节点，面有一个来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。
节点如果做的，不仅会显得难，而且会让人觉得难操作。它的直径应该在 16-28pt 之间。而下面的横线，宽度由所在内容域的宽决定，高度一在1-4pt 之间。
7. 指示器
指示器来展示元素序列，虽然在 APP 中没有太重要的作，但既然我们进，就要它看起来和谐。大多数人在定义指示器时，是太大，就是太小，可只从后面供的尺寸中择，就保证指示器的尺寸会错。
指示器主要是圆形和矩形种形式：
- 圆形：8、10、12
- 矩形：14×2、16×2、20×3
8. 提示红点
提示红点也是大数应用使用的一个控件，它的大小应该在 24-32pt 之间。为一个圆形，个控件设计来很容易，但设计师往往忽略一件，就是果中间的数值超 10 变成 2 位以，要怎么处理。
在设计这样元素时，我们要用个矩形元素来表现，即画个正形，然后将圆设成最大，那它看上去是个圆形。那么增加位符，我们需要为这个矩形增加该符宽度，可以用左右距判断。
因为相同字号，同英、数字的宽都是一样的，我们要根据实际输入的容增的宽，增圆点的宽。
9. 分页控件
最一个控件，就是分页控件，安卓中的 Tabs。个元素在设计时也受到排版空间的影响，为宽松的排版风，高度就比大，若拥挤则反之。
下是高度：
- 高权重：40-48
- 低权：28-36
分页控件主要应用在头部和页面中部的组件中，下方的案例：
虽很时分页器是没有背的，但是背矩形是必须画出来的，即隐藏填充和描边，样我们就以通垂直居中的方式，来确定中间文字的位置。
一个完整的分页控件，里面包含两个或以上的选项，所以定义每个选项的宽也是必要的。通常，我们有两种定义方法，一种是选项少时，直接进行均分显示，另一种是选项，采取定宽模式，宽度最小建议在 64pt 以上，才不显得度拥挤。
分页控件选项处选中状态时，有的设计是修改背，有的是修改文字属，但今天最常见的就是加下划。个元素果定义得不，让整个控件看来非常粗糙，它需要在样式中能到画龙点睛的用。
下划分为两种，一种是贴在控件底部的，另一种是在文字下方悬浮的。两种方式条应该使用的高度应该不大 2pt。宽度的定义，一种和每个选项背区域相等，二种则以在 8-16pt 间（小文字总宽）。下面是正确设计效果：
10. 总结
面到了不少元素的尺寸，那么真实应用的效果会如何呢？下面我就用原型的方式，不考虑样式与色彩将它们组合到完整的页面中去。
可以看到，模块小很均衡，看去不会觉得哪些方太或太小，只稍加填充样式，那么就可以变完整的设稿了。
参数虽不能覆盖所有特殊的状况和需求，但至少以证控件不被设计得很奇怪。当你们没有对特殊化风设计的控能力时，就先学正确的使用上面的参数吧。
下篇：《基础普！全 UI 元素尺寸设指南（下）》
注作者的微信公众号：「超人的电话亭」
图片素材作者：Timo Kuilder
浙公网安备33011002017549号