ui设计尺寸
-
2023年3月18日发(作者：天华中学)⼿机UI设计尺⼨有哪些？超全⾯的UI元素尺⼨设置指南
对于刚⼊⾏的UI设计师，往往会遇到⼀个基础问题，就是设计移动APP时，是⽤什么尺⼨或者⽤哪种屏幕的尺⼨是适当的？有的同学花了很
长时间也不知道怎么做，困扰着新⼈的除了不知道应该在界⾯中放什么以外，最突出的就是不知道元素应该使⽤的长宽数值，也是学⽣问得最
多的问题，所以着⼿整理了这篇篇⽂章做扫盲，⼀次性搞明⽩，在⼿机的界⾯中如何设置元素的尺⼨。
⼀、基础规则1.官⽅规范
对于刚开始思考UI元素尺⼨的新⼈，通常第⼀反应都是去看官⽅规范，新⼈都以为官⽅设计规范的作⽤就是告诉你们元素的⼤⼩和怎么设
置，只要看完了就能懂得如何设计iOS或Android应⽤。⽽实际上，这些规范并不能帮助你们解决这个问题，因为设计规范涵盖的内容远远
⽐这些复杂。
我们想要搞清楚iOS和Android官⽅元素的具体尺⼨，最好的⽅法就是去下载它们的官⽅UI-Kits，如下图的安卓组件库所⽰。
UIkit中⽂帮助⽂档pdf格式
类型：⽹页制作
⼤⼩：5.7MB
语⾔：简体中⽂
时间：2016-07-28
查看详情
官⽅不会提供⼀个列表，逐⼀罗列每个元素的长宽和其它参数，所以想弄明⽩，要⾃⼰在这两套素材库中选中元素查看。如下图这个按钮，我
们就能看见它的参数值。
在初期，我们想要设计出严格符合官⽅规范的设计，就可以严格照搬官⽅的元素设置。但是，即使官⽅的源⽂件包含的元素字体已经⾮常多
了，在实际设计过程中，还是会出现它们⽆法覆盖的设计类型，需要依靠我们⾃⼰设置。
还有如字体的应⽤，官⽅源⽂件使⽤的语⾔是英⽂，光是官⽅应⽤的两种SF字体，就包含了⼗⼏种字重，所以我们可以看见⽂字应⽤⾯板中
密密⿇⿇的字体类型。在真实的中⽂设计场景下，我们是不可能照搬这种规范的。
新⼈要明⽩，官⽅的规范，只是⼀种建议，我们可以选择遵守也可以选择不遵守。如果⼀味的照搬这些内容，我们是⽆法设计出有趣个性化的
设计的，⽐如下⾯这⼏款已经看不到「iOS设计」的应⽤。
官⽅的参数决定我们设计的下限，当你不知道该怎么做，或者设计的⽬标就是以系统原⽣的体验和视觉为准，那么照搬就⾏了。后⾯的⽂章要
说的，就是脱离开这些束缚，正确⾃定义UI元素的尺⼨。
2.尺⼨设置原则
UI和平⾯不⼀样的地⽅，就是极其关注元素属性的具体数值。平⾯的排版⽆论是海报或画册，使⽤百分⽐、⽬测的形式就⾜以让我们做出很
多优秀的作品，⽆需紧盯着其中出现的每个元素的长宽⾼数值。⽽UI的设计中，⽆论字体、图标还是按钮，都需要我们严谨地定义它们的长
宽⾼，如下图设计⼀个按钮的操作。
这么做的原因是因为在电⼦屏幕中，图像的呈现是由屏幕中的像素点来完成的，像素点是最⼩的显⽰单位，⼀个点只能显⽰⼀个颜⾊，所以如
果设置了带有⼩数点的数值，那么这个元素的边缘就会虚化。所以为了避免这种事情出现，我们就得⽤整数来定义元素的长和宽。
这当中还涉及到不少⽐较复杂的屏幕显⽰原理问题，尤其是和像素倍率相关的基础知识，我会在另外的⽂章⾥分享，后⾯⽂章所有的长度单位
默认以PT为准，即XD和Sketch默认画布的单位，PS中设计需要在这个基础上乘以2。
只有分隔线，是唯⼀可以不使⽤整数的例外，因为1pt的分隔线看起来会⾮常粗，⼀点也不精致，感兴趣的同学可以⾃⼰在Sketch或XD中
画个列表然后⽤1pt的线条做分隔，再导出到⼿机⾥观看效果。即使是官⽅应⽤，也主要使⽤0.5pt的线条做分隔。
⽆论在iOS或Android的规范中，也都提到过使⽤8x8的⽹格做辅助，这导致⽹上有很多⽚⾯的⽂章会反复强调对元素的尺⼨使⽤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元素尺⼨的基础规范，及控件尺⼨的定义。下⾯我们就来介绍⽂字设置，图标的尺⼨，UI的组件设计了。
三、界⾯的字号设置秘诀
⽂字的尺⼨⾄关重要，但先理解了控件再思考⽂字，会更容易⼀些，它们之间也有⼀些有趣的联系。
⽽在对控件和⽂字都掌握熟练以后，才能进⼊后⾯的组件设计认识。
⾸先我们知道，安卓和iOS应⽤的中英⽂字体各不相同，苹果是⽤苹⽅和SanFrancisco，安卓使⽤思源⿊体和Robot。
在后⾯我们主要以iOS作为说明的对象，安卓可以直接参照它的字体尺⼨设置。
1.英⽂的字号
在苹果的官⽅建议中，有罗列⽐较完整的⽂字字号建议，但⼤家⼀定要谨记，那些就是建议，并不需要在⾮官⽅的组件中应⽤那些字号。
⾸先我们要先划分出⼀个⽂字字号的范围，之后所有字体的字号设置就在那⾥⾯挑选。
在UI中，最⼩字号的依据⼀般有两个，⼀个是⼈眼的可见度，另⼀个是屏幕的显⽰极限，最⼩的字号应该在9pt。⽽最⼤的字号，以iOS11
的标题字号34pt为准即可。
从9-34，理论上其中每⼀个整数都可以使⽤，但我还是建议要应⽤⼀定的习惯。下⾯，就是我在英⽂应⽤设计中会使⽤的字体字号列表，为
了便于记忆，我就只拆分成三种类型，初学者在使⽤时直接照搬就可以。
标题：34、28、24、22、20
阅读：18、16、14、12
注释：11、10、9
在英⽂应⽤中，我们应⽤的字号⼤⼩随项⽬复杂度决定，通常，尺⼨会在五种以上，两种标题、两种阅读、⼀种注释类字号，当然，我们还会
通过字重和⾊彩进⼀步划分，在这不再赘述。例如下⾯我使⽤五种字号尺⼨设计出来的原型案例：
在iOS中，尺⼨⼩于20pt使⽤SFProText，⼤于等于20pt时则使⽤SFProDisplay字体，这点⼤家需要牢记。
数字字体可以等同于英⽂，但如果有需要展⽰数据的需求，那么最⼤尺⼨就要靠⾃⼰的判断了。
2.中⽂字体
中⽂字体和英⽂字体的最⼤差异在于笔画数，很多中⽂的笔画和结构都异常复杂，如「嚷」、「饕」、「餐」等，所以，最⼩的尺⼨不可能
和英⽂相等。建议最⼩中⽂字号使⽤11pt。
⾄于最⼤的中⽂，因为苹⽅并没有SFpro字体那么丰富的字重，字号过⼤会有正负形失衡的违和感，所以，最⼤字号的尺⼨也应⽐英⽂⼩。
下⾯是我在中⽂应⽤中建议使⽤的字号：
标题：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设计的乐趣。
图⽚素材作者：TimoKuilder
以上就是我们汇总的超全⾯的UI元素尺⼨设置指南，希望⼤家喜欢，请继续关注。