赞助商
立即赞助

基础科普!超全面的 UI 元素尺寸设置指南(上)

UI设计3年前 (2021)更新 流光
2.8K 0 0

在开始着手设计手界时,困扰着新除了不知应该在界放什么以,最突出是不知元素应该使用长宽数值,也是学生问最多问题,所以着手理2篇文章做扫盲,性搞明白,在手界如何设元素尺寸。

一、基础规则

1. 官方规范

对刚开始思考 UI 元素尺寸的新人,通常一反应是去看官方规范,新人以为官方设计规范的用就是告诉你们元素的大小和怎么设置,只要看完就能懂得何设计 iOS 或 Android 应用。而际上,规范并不能帮助你们决个问题,因为设计规范涵盖的内容远远比复。

我们想要搞楚 iOS 和 Android 官元素具体尺寸,最好法是去下载它们官 UI-Kits,如下图安卓组件库所示。

基础科普!超全面的 UI 元素尺寸设置指南(上)

官不会提供个列表,逐罗列个元素长宽和其它参数,所以想弄明白,要自己在这两套素材库选元素查看。如下图这个按钮,我们能看见它参数值。

免获取 →  iOS 11设计规范发布了,来载官方源件!

基础科普!超全面的 UI 元素尺寸设置指南(上)

在初期,我们想要设计严格符合官方规范的设计,就可严格照搬官方的元素设置。但是,即使官方的源件包含的元素字体已经非多了,在实际设计过程中,还是会现它们无法覆盖的设计类,需要依靠我们自己设置。

还有如字体的应用,官方源文件使用的语言是英文,光是官方应用的种 SF 字体,就包含了十种字重,所以可以见文字应用面板中密密麻麻的字体类型。在真实的中文计景下,是不可能照搬这种规范的。

基础科普!超全面的 UI 元素尺寸设置指南(上)

新人要,官方的规范,只是一种建议,可以选择遵守也可以选择不遵守。如果一味的照搬这些内容,是无法计出有趣个性化的计的,比如下面这款已经不 「 iOS 计 」的应用。

基础科普!超全面的 UI 元素尺寸设置指南(上)

官方的参数决定计的下限,当你不知道该怎做,或者计的目标就是以系统生的体验和视觉为准,那照搬就行了。后面的文章要说的,就是脱离开这些束缚,正确定义 UI 素的尺寸。

2. 尺寸设置原则

UI 和面不一的地方,就是极其关注素属性的体数值。面的排版无论是海报或画册,使用百比、目测的形式就足以让做出多优秀的作品,无需紧盯着其中出现的每个素的长宽高数值。而 UI 的计中,无论字体、图标还是按钮,都需要严谨地定义它的长宽高,如下图计一个按钮的操作。

基础科普!超全面的 UI 元素尺寸设置指南(上)

这做的因是因为在屏幕中,图像的呈现是由屏幕中的像素点来完成的,像素点是最的显示位,一个点只能显示一个颜色,所以如果置了带有数点的数值,那这个素的边缘就会虚化。所以为了避免这种事情出现,就得用整数来定义素的长和宽。

基础科普!超全面的 UI 元素尺寸设置指南(上)

这当中还涉及不少比较复杂的屏幕显示理问题,尤其是和像素倍率相关的基础知识,会在另外的文章享,后面文章所有的长度位默认以 PT 为准,即 XD 和 Sketch 默认画布的位,PS 中计需要在这个基础上乘以2。

只分隔线,唯一可以不使用整数的例外,因 1pt 的分隔线看起会非常粗,一点也不精致,感趣的同学可以自己 Sketch 或 XD 中画列表然后用 1pt 的线条分隔,再导出到手机里观看效果。即使官方应用,也主使用 0.5pt 的线条分隔。

基础科普!超全面的 UI 元素尺寸设置指南(上)

无论 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 的倍数调整,如下面计注册登录页面的输入框作为案例。

基础科普!超全面的 UI 元素尺寸设置指南(上)

开始使用 280 宽,44 高的尺寸,但是觉得有点僵硬,正式了。这候反思认为应该是输入框矮导致的,所以高度上改成 44+(4×2)=52 。这候觉得高了,实际输入内容也没那宽,于是再对高减 4,宽减 40,获取最终结果。

所以,因这样的操作原则,决了 UI 元素的尺寸不凭感觉用鼠标拖拽出的(拖动效率太低),元素的属性栏中填入它们的数。UI 的设过程就一不停键入参数调整参数的过程。

3. 总结

以就对与 UI 元素尺寸义的第一部分,因讲清楚需花的篇幅太,所以我会将后面具体的案例讲解拆 4 部分,分别由控件、文字、图标、组件部分组。

二、控件尺寸定义

这里声明,我的语系中,控件指的界面中基本的交互单,如按钮、滑块、关、分页器,复杂的如动态卡片,功能速入口,就归入组件中,便于我们理解。

下面,根据前面定义的规范,分别讲控件应该使用的尺寸范围:

1. 按钮

基础科普!超全面的 UI 元素尺寸设置指南(上)

按钮界面交互操作中使用频繁的元素了,当然按钮呈的形式也多种多样,比如可以文字、图片、图标、卡通形象。这里,我们只聚焦于矩形的基础按钮。

在进具参数的讲前,要先理按钮际上是所有控件中最复的一个,并不是因为在设计样式上的复,而是因为按钮承载最的产品诉求,权重差异极大,例看下面的案例。

基础科普!超全面的 UI 元素尺寸设置指南(上)

在上图中,以点击的东西不少,我们就说外观是标准样式的按钮,就有 9 个。而里面,权重最高的必是 「加购物车」。权重最低的,应该是前往新品页。

定义按钮尺寸,我们首先要知是,按钮在界或个应用权,尺寸和权是成正比关系。然,颜色也是要性表现关键素,不过不在这里展开。

按钮高度

我们设计按钮时,优先要从高度入手,再去定义宽。为了便于新手理解,我首先从高度上来匹配权,分成高、、低三类:

  • 高权重:40-56pt
  • 权:24-40pt
  • 低权重:12-24pt

高权按钮,类似登录页注册、登录,物详情页买,流程页下步,它最小高度应该从 40pt 开始递增,低于这个大小,那么这个按钮很难在这个页起到视觉支撑,为感觉太细了。

基础科普!超全面的 UI 元素尺寸设置指南(上)

权按钮,类似个主页关注、赞、评论按钮等。这个层级按钮依旧有比较高频交互数,我们必须保证它易于击。24pt 是在我经验便于击最小尺寸了。这按钮常是组件部分,不像层级最高按钮常常是处于个孤立空,所以高度如出 40pt,会前模块生观破坏。

基础科普!超全面的 UI 元素尺寸设置指南(上)

低权按钮,类似查看更多、标签、详情等类型,相于按钮交互属性,这类按钮具备更多提示属性,要让用户能看见,又不需要太显眼。尺寸不大于 24pt,能容纳内部文或图形元素即可。

基础科普!超全面的 UI 元素尺寸设置指南(上)

使用上这法,在页根据权定尺寸可以了。需要注意是,不尺寸按钮,高度距不要小于 4 ,否则异太小不仅不开层,容易使视觉感受变。

按钮宽度

主流按钮都是长形,正形也有,是不能变成纵矩形。

基础科普!超全面的 UI 元素尺寸设置指南(上)

按钮宽度主要和内容挂钩,内容数量越多,按钮自然也越宽。唯例,有高权按钮,可以视内容数量。为它们需要更多区域,往往都是撑满屏幕内容区域或全屏,可以特殊处理。

普通按钮,左右间距距离容过多,就会按钮看起来非的协调。我们要根据容来设置按钮左右的宽,最大宽应该小于容距离上的 2 倍。

基础科普!超全面的 UI 元素尺寸设置指南(上)

按钮圆

按钮尺寸有最后个属性,是按钮圆设了。矩形边有三类型,即矩形、圆矩形、半圆矩形。

基础科普!超全面的 UI 元素尺寸设置指南(上)

为矩形设圆,是为了让按钮看起来有定圆润感不会显太尖锐,这圆数值赋予要适,要出了定范畴,会视觉和谐生影响,我习惯称呼为——半圆不圆,如下图右侧误案例。

基础科普!超全面的 UI 元素尺寸设置指南(上)

所以,我们在设计圆过程,定要仔细感受圆在画和谐性。而圆设范围,不大于高度 1/4。例如,个24pt圆矩形,圆尺寸应该不大于 6pt,如上图效。

上就是按钮相尺寸定义的说明,当然,在真实的设计需求中可遇到很多无法满足的情况,这就需要大多做尝试了。

2. 输入框

基础科普!超全面的 UI 元素尺寸设置指南(上)

输入框也是我们比较常用元素,它和按钮有常接近形。最常见是登录页账号密码输入框,以及首页上搜索栏了。

输入框的使尺寸,规在 36-56pt 之间。低于 36pt 时则输入框看起来会非拥挤,如我面生的案例做个演示。

基础科普!超全面的 UI 元素尺寸设置指南(上)

3. 步进器

基础科普!超全面的 UI 元素尺寸设置指南(上)

常见的步进器,就是输框和按钮的结合。左右有两个用来增加数量的按钮,中间是允许我们直接键数字的输框。在尺寸上,它也介两者之间,高度在 28 – 40 之间。下面我用学的业做次演示,当低 28 以,就现在屏幕中的占比在太小。

基础科普!超全面的 UI 元素尺寸设置指南(上)

步进器中常见的错误,是在我们设置圆角外框时,绘左右两个按钮,并没有合理的减去内的圆角,是绝对不应该忽略的细节。

基础科普!超全面的 UI 元素尺寸设置指南(上)

4. 下拉菜单

基础科普!超全面的 UI 元素尺寸设置指南(上)

下拉菜要注包含多种状,默认、展开和选中。默认状输入框类似,主流的高度也使用 36-56pt。但是,当菜展开后,下方多出来的选项菜,就值得注了。

单的宽度常况下与默认状态相同,高度根据里面包含的选项数决。单行选项,高度不于默认的选项框的。新手很易弹出单中设过小的高度,使整控件看起会非常的别扭。

5. 开关

基础科普!超全面的 UI 元素尺寸设置指南(上)

开关也是按钮的一种形式,通常出现在置页的列表中,上方就是它主流的种式。在计开关的候,要先确定一个矩形域,高度使用 24-32pt,宽度则用 1:2 的比例。如高度使用 28pt,那宽大致可以使用 56pt。之后再将细节填入。

6. 滑块

基础科普!超全面的 UI 元素尺寸设置指南(上)

滑形式接开,通在中间有一个操作节点,面有一个来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。

节点如果做的,不仅会显得难,而且会让人觉得难操作。它的直径应该在 16-28pt 之间。而下面的横线,宽度由所在内容域的宽决定,高度一在1-4pt 之间。

7. 指示器

基础科普!超全面的 UI 元素尺寸设置指南(上)

指示器来展示元素序列,虽然在 APP 中没有太重要的作,但既然我们进,就要它看起来和谐。大多数人在定义指示器时,是太大,就是太小,可只从后面供的尺寸中择,就保证指示器的尺寸会错。

指示器主要是圆形和矩形种形式:

  • 圆形:8、10、12
  • 矩形:14×2、16×2、20×3
8. 提示红点

基础科普!超全面的 UI 元素尺寸设置指南(上)

提示红点也是大数应用使用的一个控件,它的大小应该在 24-32pt 之间。为一个圆形,个控件设计来很容易,但设计师往往忽略一件,就是果中间的数值超 10 变成 2 位以,要怎么处理。

在设计这样元素时,我们要用个矩形元素来表现,即画个正形,然后将圆设成最大,那它看上去是个圆形。那么增加位符,我们需要为这个矩形增加该符宽度,可以用左右距判断。

因为相同字号,同英、数字的宽都是一样的,我们要根据实际输入的容增的宽,增圆点的宽。

基础科普!超全面的 UI 元素尺寸设置指南(上)

9. 分页控件

基础科普!超全面的 UI 元素尺寸设置指南(上)

最一个控件,就是分页控件,安卓中的 Tabs。个元素在设计时也受到排版空间的影响,为宽松的排版风,高度就比大,若拥挤则反之。

下是高度:

  • 高权重:40-48
  • 低权:28-36

分页控件主要应用在头部和页面中部的组件中,下方的案例:

基础科普!超全面的 UI 元素尺寸设置指南(上)

虽很时分页器是没有背的,但是背矩形是必须画出来的,即隐藏填充和描边,样我们就以通垂直居中的方式,来确定中间文字的位置。

基础科普!超全面的 UI 元素尺寸设置指南(上)

一个完整的分页控件,里面包含两个或以上的选项,所以定义每个选项的宽也是必要的。通常,我们有两种定义方法,一种是选项少时,直接进行均分显示,另一种是选项,采取定宽模式,宽度最小建议在 64pt 以上,才不显得度拥挤。

基础科普!超全面的 UI 元素尺寸设置指南(上)

分页控件选项处选中状态时,有的设计是修改背,有的是修改文字属,但今天最常见的就是加下划。个元素果定义得不,让整个控件看来非常粗糙,它需要在样式中能到画龙点睛的用。

基础科普!超全面的 UI 元素尺寸设置指南(上)

下划分为两种,一种是贴在控件底部的,另一种是在文字下方悬浮的。两种方式条应该使用的高度应该不大 2pt。宽度的定义,一种和每个选项背区域相等,二种则以在 8-16pt 间(小文字总宽)。下面是正确设计效果:

基础科普!超全面的 UI 元素尺寸设置指南(上)

10. 总结

面到了不少元素的尺寸,那么真实应用的效果会如何呢?下面我就用原型的方式,不考虑样式与色彩将它们组合到完整的页面中去。

基础科普!超全面的 UI 元素尺寸设置指南(上)

可以看到,模块小很均衡,看去不会觉得哪些方太或太小,只稍加填充样式,那么就可以变完整的设稿了。

参数虽不能覆盖所有特殊的状况和需求,但至少以证控件不被设计得很奇怪。当你们没有对特殊化风设计的控能力时,就先学正确的使用上面的参数吧。

下篇:《基础普!全 UI 元素尺寸设指南(下)》

注作者的微信公众号:「超人的电话亭」

基础科普!超全面的 UI 元素尺寸设置指南(上)

图片素材作者:Timo Kuilder

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

最近在做迭代改版设计,在这期间遇到了很多问题,其中一个就是我在上篇文章《「瞬间之美」读书笔记:Web界面设计如何让用户心...
一致性原则
@龙爪槐守望者 :经常能看到在很多 App 的 Navigation Bar(iOS 叫导航栏,安卓叫 App Bar /应用栏)下方、列表上方或者页面...
UI控件
按钮是最常使用的组件之一,但是在与人交流时,还是会觉得大家存在很多误区,所以本文将围绕如何使用按钮展开分析,希望能给...
B端设计
按钮在界面设计中,属于最基础的元素部分组成,按钮设计的精致,整个页面的品质也会上升不少的档次。今天给大家分享这篇文章...
CTA按钮
编者按:一个合格的 UI 按钮到底需要具备什么样的素质?在很多设计师眼里似乎并不是一个太大的问题的,但是在实际设计的时候...
ui设计
按钮在产品界面中是非常重要的元件之一,按钮作为用户引流和行动触发来说都是至关重要的。如何把按钮设计做到最好,是设计师...
ui设计
各位好,我是呆呆,今天这篇文章,是「交互问答」专栏的第一篇文章。文章的内容主要来自于读者提的问题。 这些文章原本可...
交互
按钮设计 为了设计正确的交互,我们需要回顾一下物理按钮的历史和起源。物理按钮是 UI 组件的前身,当今的数字产品都还在大量...
ui设计