UI元素尺寸应该这么定——1·基本端正

在开头动手计划手机界面时，困扰着新人的除了不晓得应该在界面中放什么以外，最突出的就是不晓得元素应该使用的长宽数值。即使在课程中也是学生问得最多的成绩，以是动手整理几篇文章做扫盲，一次性搞明白，在手机的界面中怎样设置元素的尺寸。

官方标准

关于刚开头思索 UI 元素尺寸的新人，通常第一反响都是去看官方标准，新人都以为官方计划标准的作用就是报告你们元素的轻重和怎样设置，只需看完了就能明白怎样计划 iOS 或 Android 使用。而实践上，这些标准并不克不及协助你们处理这个成绩，由于计划标准涵盖的内容远远比这些繁复，好比我们之前翻译过的 iOS 标准。

iOS 12 计划标准——iOS 中文标准更新啦！

标准链接

我们想要搞清晰 iOS 和 Android 官方元素的具体尺寸，最好的办法就是去下载它们的官方 UI-Kits，如下图的安卓组件库所示。

官方不会提供一个列表，逐一摆列每个元素的长宽和别的参数，以是想弄明白，要本人在这两套素材库中选中元素查察。如下图这个按钮，我们就能望见它的XXXX

由于 iOS 组件库下载下去的 Windows 用户很多人都不晓得怎样掀开，以是我分版本都整理清晰了。直接在我的群众号“超人的电话亭”里回复 UIKits 就可以。

在初期，我们想要计划出严厉切合官方标准的计划，就可以严厉照搬官方的元素设置。但是，即使官方的源文件包含的元素字体以前十分多了，在实践计划历程中，照旧会显现它们无法掩盖的计划典范，必要依托我们本人设置。

另有如字体的使用，官方源文件使用的言语是英文，光是官方使用的两种 SF 字体，就包含了十几种字重，以是我们可以望见笔墨使用面板中密密层层的字体典范。在真实的中文计划场景下，我们是不成能照搬这种标准的！

新人要明白，官方的标准，只是一种发起，我们可以选择恪守也可以选择不恪守。假如一味的照搬这些内容，我们是无法计划出幽默天性化的计划的，好比底下这几款以前看不到 “ iOS 计划 ”的使用。

官方的参数决定我们计划的底限的，当你不晓得该怎样做，大概计划的目标就是以体系原生的体验和视觉为准，那么照搬就行了！后方的文章要说的，就是脱分开这些束缚，准确自界说 UI 元素的尺寸。

尺寸设置准则

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 (4x2)=52 。这时分又以为太高了，实践输入内容也没那么宽，于是再对高减 4，宽减 40，获取终极后果。

以是，由于如此的利用准则，决定了 UI 元素的尺寸不是凭以为用鼠标拖拽出来的（拖动听从太低），而是在元素的属性栏中填入它们的数值。UI 的计划历程就是一个不休键入参数和调停参数的历程。

开头

以上就是对与 UI 元素尺寸界说的第一章，由于要讲清晰必要花的篇幅太长，基本没办法一口吻写完，以是我会将后方具体的案例解说拆成 4 篇，分散由控件、笔墨、图标、组件局部构成。

此中在我的言语体系下，具体界说了控件和组件的区别，后方文章会提到，另有这个排序订定也是有缘故的，为了让你们从简便到繁复能平滑过渡，发起按排序观看。

未完待续……