在之前相当长的一段时间里， 小P都是一位相当出色的网页设计师， 优秀的设计功底加上良好的沟通 能力让小P在公司乃至整个设计圈中都小有名气。直到有一天， 领导把他叫到办公室。

“小P啊，由于公司业务调整，我们需要为现有的产品设计一套手机上可以使用的APP,你的工作能力突出，这个任务就交给你来完成吧。

“没问题，这个不在话下，手机端比Web网页结构要简单多了，小意思。”

于是小P就开始手机APP的设计了。“不就是把Web页面放小到手机吗，看起来很简单的样子。” 打开拿手的Photoshop,小P犯难了，我要建多大的画布呢?设计稿里的文字用多大字号合适呢?字体还是用宋体吗?切图要怎么切? HTML?如此多的疑问让小P无从下手。硬着头皮用网页设计的经验做 了一版，好像感觉完全不对嘛。看着空空如也的计算机屏幕，小P感慨，网页设计原来跟APP的界面设计差别如此之大。

操作平台上，毫无疑问，Androld与iOS占据几乎全部市场份 额，1OS设备以iPhone 4S. iPhone 5S为主，由于Phone设备更新 稳定，分辨率变化不大，但最新的IPhone 6及Plus设备也必须在设计 上加以考虑了; Androld系统的手机品牌数不胜数，但占据前几位的 依然是三星、小米、华为、联想、OPPO等有影响力的厂商。在设计 及开发APP时，除了市场占有率因素，应用自身的定位所带来的品牌 占有率的偏差也必须考虑进去。例如，在使用某奢侈品电商APP的用 户中，iPhone及 三星占据较大份额。但在手机阅读类软件(网络文 学)用户中，较低端的Android型号更为普遍。 这点需要区别对待， 在设计时有所偏向。

接着说分辨率，分辨率是我们在设计APP界面的时候第一要考 虑的事情，手机分辨率干差万别，我们不可能针对每一种分辨率单 独来做设计，所以使用哪种分辨率来设计最合适，这是设计师必须 要做出的选择。

在假设手机ppi(精度)-致的情况下，用哪种分辨率作为设计稿的标准尺寸?

那我们选择哪种画布尺寸来开始设计工作呢?

这里有几个原则:

1.手头有哪些手机可以选择，或者具体为哪种手机( Android、 iOS或者都有)设计界面。

2.最方便、最有效率地适配各种尺寸和型号的手机(图片处理起 来最方便、最省时间，同时保证效果最好)。

3.保证屏幕中的U元素显示效果最佳，不出现虚边、模糊等现象。

4.确保可以适配当今主流机型，同时兼顾手机日新月异的进化 势(设计稿是否可以快速适配越来越大的分辨率)。
了解这几个原则后，分析上文提到的分辨率，我们发现720x 1 280、640x960、480x800、640x 1136、加上最新 iPhone 6及Plus的750x1 334、1 080x 1920等几种分辨率最 常见。另外，联想一下网页的浏览习惯，APP的浏览习惯和前者 点相似，上下滚动最为主流，也就是说整个内容中，高度是一I 为不固定的因素。现在进一步简化上边提到的几个分辨率，将1 省去后得到几个数字: 480、640、720、750、1 080。请注 间一个数字720，480的1.5倍即为720，720的1 .5倍为1080 时再次将数值简化为480、720、 1 080。有读者可能会有疑问。

640、750、1 242几个宽度为什么要省去呢。由于现在手机ppi普遍大于300，已经高于人眼可以识别的范畴，所以几十个像素的差别可以忽略不计(我们可以拿一-张640宽的图片分 别放在iPhone 4S与iPhone 6上，将宽度撑满进行观察，虚吗?抛开设计师的“ 像素眼”，一般人看来区别很小)。另一个原因，在iOS与Android的图像处理机制的设计中，为了便于快速适配，工程师将不同大小的素材区分为几个不同等级。也就是我们平时会接触到的iOS素材中的以@2x和@3x结尾的图片，Android图片素材中放入hdpi、xhdpi、xxhdpi中的素材。程序在不同ppi的手机设备上运行的时候，会根据某种算法来判断读取哪个文件夹或者哪个后缀的图片文件，确保图片素材在不同手机上呈现-致的设计效果。

当你为iOS设计时,需要准备两套素材，分别对应iPhone 4、 iPhone 4S、iPhone 5、iPhone 5S、iPhone 6的@2x图片，以及 为iPhone 6 Plus设计的@3x倍图片。当你为Android设备设计时，至少需准备对应1 080p分辨率(放 在xxhdpi文件夹中)的素材，还需要一套对应720p分辨率 (放在 xhdpi文件夹)的素材。如果你追求完美，甚至需要设计针对480p分 辦率(放在hdpi文件夹)的素材，当然不放也没有关系，Android大 部分情况下会自动将图片进行缩小或者放大处理，所以选择一套缩放 不虚的图，也就是对应1 080p分辨率的图即可。
唠叨了那么多，我们到底用哪种分辨率作为基准分辨率更合适 呢?在这里推荐720宽的分辨率，它的突出特点是能上能下，设计稿 直接切图即为@2x图或者对应xhdp的素材，图片放大1.5倍即为@3x 或者对应xhdp的素材。
到这里原理解释完毕，但有人会问，可是我没有iPhone 6或者这 个分辨率的Android手机怎么办呢?没关系，可以根据自己手头的设 备，选择合适的分辨率即可，最后无非是根据宽度进行等比放大长宽 的操作。继续举例，如果用320 x 480的分辨率做设计稿，那么只需 要把素材尺寸宽高等比放大2倍、3倍即可。这里为什么强调要根据手 头的手机来设定尺寸呢，毕竟我们要做的是移动设备UI,在显示器查 看设计稿的感觉与在手机上查看差别很大，建议大家最好将设计稿导 入手机进行查看，最好是手头设备分辨率与设计稿完全对应，在手机 上可以点对点地显示，这时你会看到最接近于开发后的效果。Sketch 为我们提供了非常方便的预览软件Mirror,在计算机中完成的设 高，通过无线网络连接，可随时在手机中查看，非常方便，此功能将 会在随后的章节中讲解。