有一些平面设计转UI设计，或者有软件基础想做UI的童鞋，不知道如何开始做移动UI界面。经常会有困惑，比如：
“手机设备这么多，我该怎么做？”
“一个UI界面有哪些主要的组成部分？”
“这些组成部分又有什么基础规范？”
......
毕竟平面设计只是一张图，而UI设计是要开发到硬件设备上的。所以我们不仅需要根据硬件设备尺寸设计视觉稿，同时还要符合一定的设计规范、用户使用习惯和考虑开发后的实现效果。万里长征第一步，只有弄清楚了这些基础入门知识，才能开始真正的UI设计之旅。这系列文章将从界面设计尺寸、布局、字体、图片、图标等几个方面来具体阐述UI设计的入门基础知识，使新手可以快速的上手。此篇文章先来具体说明一下界面设计尺寸
界面设计尺寸
由于android手机尺寸非常多，无法使所有的设备完美呈现效果，所以一般以iOS手机尺寸来设计，前端会自动适配至其他机型，所以这里不详细探讨。
目前主流的 iOS 设备主要有 iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸）。“英寸”是手机屏幕的物理尺寸，做设计的时候我们更多的是以像素分辨率来绘制的。所以需要了解一下iOS的不同手机的分辨率。见下图：
上图中屏幕尺寸和屏幕密度了解一下就好，我们主要关注的是像素尺寸和倍图，虽然不同iphone型号的手机像素不同，但在前端那里，只有三种尺寸：1倍图、2倍图和3倍图。（@1x、@2x和@3x是切图命名的后缀，代表设计稿是以哪个倍图来设计的。如：icon@1x、icon@2x、icon@3x。）
我们可以使用1倍图来做设计，即使用320*480的像素尺寸；
也可以使用2倍图来做设计，即使用640*960 或 640*1136 或 750*1334 的像素尺寸；
也可以使用3倍图来做设计，即使用1242*2280 或 1125*2436 的像素尺寸；
选择以上3种倍图中的一种像素尺寸来做设计稿即可，前端会根据不同倍数进行适配。适配的原则是：如果是1倍图的设计稿，2倍图里面的所有元素都是1倍图里面元素的2倍，3倍图里面的所有元素都是1倍图里面元素的3倍。
你可以选择自己手机对应的像素尺寸进行设计，这样便于随时放入手机中查看效果。我们公司设计师普遍使用2倍图进行设计，因为2倍图手机尺寸的用户数比较多，需要注意的是2倍图里面的元素尺寸必须是偶数，这样元素尺寸除以2适配1倍图时可以整除。由于我使用的是iphone6s的手机，所以我一般会使用750*1334px的像素尺寸进行设计。（1334px是iphone6s屏幕的首屏高度，有时候一个页面不止1334px这么高，但是我们要参考首屏的高度，使重要的内容能在首屏中展示，得到更多的曝光。）
下期我们将继续探讨移动UI设计规范的布局、字体、图片、图标等～
