可以拿来就用的元素的尺寸

官网规范是基础

做一个苹果或安卓APP却不了解尺寸一定会觉得无从下手，直接应用 IOS 和 Android 官方元素的尺寸，可以帮我们快速建立APP规范。最好去下载它们的官方 UI-Kits，如下图的安卓组件库所示。

在IOS和Android的官方规范中，我们可以参考元素的设置。有时候我们的设计也会在规范之外。

尺寸的设置

屏幕中的图像是通过像素点来显示的，像素点是最小的显示单位。如果设置了带有小数点的数值，元素的边缘会虚化。为了避免虚化，UI设计中，元素的尺寸需要取整。

XD 和 Sketch 默认画布的单位是pt。1pt 的分隔线看起来会非常粗，所以分割线是一个例外，即使是官方应用，也主要使用 0.5pt 的线条做分隔。

现在基本都是一稿适配多端，所以首先需要确定设计的基准尺寸。以iPhone8为例，基准尺寸是375*667，单位为pt。可以根据需求建立横向栅格系统，如下的4栅格、3栅格、2栅格。

也可以通过网格系统来适配。网格系统需要设定最小单位。假如最小单位是4，排版时横向和纵向的间距都是4的倍数。

UI组件布局

设计APP应用一定会遇到交互控件的设计，基于组件的设计就是基于控件的设计。控件指的是在界面中最基本的交互单位，如按钮、滑块、开关、分页器等，更复杂的如动态卡片，功能快速入口等。

以iPhone8为例，各组件高度可设置如下：

状态栏：20pt

导航栏：44pt

标签栏：49pt

按钮：高权重：40-56pt 中权重：24-40pt 低权重：12-24pt

           高权重的按钮，类似登录页的注册、登录，购物详情页的购买，流程页中的下一步
           中权重的按钮，类似个人主页的关注、点赞、评论按钮等
           低权重的按钮，就类似查看更多、标签、详情等提示，需要让用户看见，但是又不太明显

输入框：36-56pt

计步器：28-40pt

常见的步进器，就是输入框和按钮的结合。左右有两个用来减少和增加数量的按钮，中间是允
许我们直接键入数字的输入框，常见于编辑购物车中某一件商品的数量。

下拉菜单：36-56pt

开关： 24-32pt

宽度则用 1:2 的比例。如高度使用 28pt，那么宽大致可以使用 56pt。

滑块：它的直径应该在 16-28pt 之间，而下面的横线，宽度由所在内容区域的宽决定，高度一般在1-4pt 之间。

圆形指示器：8、10、12pt

矩形指示器：14*2、16*2、20*3pt

指示器常用于轮播图切换

提示红点：24-32pt

分页控件：高权重：40-48 pt 低权重：28-36 pt

选项较少的时候，可以选择均分现实，选项较多的时候，可以选择定宽模式，宽度最小在64pt 以上，才不会
显得过度拥挤。下划线贴在控件底部，或是在文字下方悬浮，宽度和每个选项背景区域相等或在8-16pt之间。

使用以上参数可以帮助快速出稿哦！

字体

我们知道，安卓和 iOS 应用的中英文字体各不相同，苹果是用苹方和 San Francisco，安卓使用思源黑体和 Robot。

英文

标题：34、28、24、22、20

阅读：18、16、14、12

注释：11、10、9

中文

标题：28、24、22、20

正文：18、16、14

注释：12、11

图标

为了更好的显示，在图标下载网站上看到的图标尺寸，一般都是4的倍数，16*16起。

图标的尺寸，不是图形的区域，是图标在应用中占据的矩形区域。

备选的图标尺寸

最大：64、56、48

中等：44、36、32

最小：28、24、20

动态卡片

动态卡片是很常用的组件，通常以卡片的形式展现。每条动态通常占据内容区域的整列，即左右减去制定好的内边距 16pt，那么就是 375-32 = 343pt 的宽。而高度，就要根据里面所包含的元素了。

瓷片区

如淘宝这类会有很多瓷片区并列的状态，我们优先要考虑的，是每个瓷片区在屏幕中的占比，也就是先定义好瓷片区的高度，再拆分内容的子模块。例如划分为两行的瓷片区，总高度为 280pt，上方的模块高度为 180pt，下方的模块高度为 100pt，里面的元素，再根据这个内容区域进行排版。

设置列表

设置列表由高度相同的列表项组成，如果是比较紧凑的风格可以采用 48pt 的高，比较宽松的风格就采用 64pt 的高。然后再排列内部的元素，水平居中。

组件没有固定的尺寸值，设计完组件后再设计完整的页面，或整套应用时，就能大大提升效率和设计质量！