控件尺⼨规范_UI元素尺⼨应该这么定——1·基础规则
在开始着⼿设计⼿机界⾯时，困扰着新⼈的除了不知道应该在界⾯中放什么以外，最突出的就是不知道元素应该使⽤的长宽数值。即使在课程中也是学⽣问得最多的问题，所以着⼿整理⼏篇⽂章做扫盲，⼀次性搞明⽩，在⼿机的界⾯中如何设置元素的尺⼨。
ui素材网站
官⽅规范
对于刚开始思考 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 篇，分别由控件、⽂字、图标、组件部分组成。
其中在我的语⾔体系下，具体定义了控件和组件的区别，后⾯⽂章会提到，还有这个顺序制定也是有原因的，为了让你们从简单到复杂能平滑过渡，建议按顺序观看。
未完待续……

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。