APP设计体系之尺寸布局

UI设计以用户和界面为准可分成四类：PC端UI设计、移动端UI设计、游戏UI设计、其它UI设计。

该设计体系是针对移动端UI设计，也就是手机界面。

学习任何知识，都应建立属于自己的知识体系，这样才会更牢固。

1、使用软件

实际工作中使用的基础软件有Photoshop（PS）、Adobe Illustrator（AI）、Sketch、Adobe XD，Sketch和Adobe XD的用途一致，Sketch只能在Mac系统下使用，两者择其一学习即可。以上提到的软件是最基础的，必须要学会的。

2、设计尺寸

移动端操作系统有iOS和Android，分辨率多达好几十种，该以什么尺寸作为设计稿尺寸呢？

2.1 分辨率

分辨率(resolution)就是屏幕图像的精密度，是指显示器所能显示的像素的多少。

2.2 设计稿尺寸

选择750x1334(iOS)和1080x1920(Android)分别作为两个系统的设计稿尺寸，理由是从中间尺寸向上和向下适配，界面调整的幅度最小，最方便适配。

使用Sketch，设计稿尺寸应为375x667(iOS)、360x640(android)；使用PS，设计稿尺寸保持750x1334(iOS)、1080x1920(Android)。

根据产品特性，状态栏、导航栏、底部标签栏可以隐藏。

3、倍率

iOS和Android分别根据屏幕像素密度的不同，定义了不同倍率的屏幕。

iOS倍率=物理分辨率/逻辑分辨率,比如iPhone6的倍率=750/375=2，用@2x表示，也称之为2倍图；@3x(3倍图)是2倍图的1.5倍，界面中各个元素的尺寸都以此比例进行换算。

安卓定义Mdpi为基准倍率(1倍图)，而我们设计稿的尺寸是1080*1920(XXhdpi)，是3倍图，XXhdpi是Mdpi的3倍，界面中各个元素的尺寸都以此比例进行换算。

倍率用于不同尺寸之间的单位换算，也会在切图中使用，后面文章会介绍。