下载掌阅APP，畅读海量书库
立即打开
在很多设计师中流传着这样一个无法被证实的传说，就是用Photoshop等位图处理工具做UI界面设计，新建画布的时候，要将新建面板中的分辨率一项设置为比默认更高，比如300，这样做出来的UI界面放到手机里预览的时候不虚。看起来是不是还挺有道理的？毕竟手机的精度那么高，如果我使用默认的72或者144作为分辨率，那么在设备中预览的时候，图片就虚啦。
于是这个谜一样的设计传说一传十，十传百，被无数设计师信奉为UI设计定律。但是，作为不一样的设计师，我们怎么能容忍这种未经证实的传言成为人人信奉的真理呢。现在，笔者与大家一起来做个实验，看看在Photoshop中新建画布时设置的分辨率会不会对图片的清晰度产生影响。
不一样的Tips：
在问题得不到正确处理的情况下，设计师可以自己做一些实验来验证观点是否正确，这比只是听信别人总结出的观点要可靠不少。任何事情都没有绝对可言，如果你对本书的某些观点持有异议，也欢迎告诉作者，并分享你的思考方式。
实验，探寻真相的必经之路
首先，我们来准备实验所用材料，安装有Photoshop的电脑一台，任意手机一部。接下来我们打开Photoshop，选择新建文件，此时弹出如图1-43所示的面板。
图1-43
接着，再次建立一个文件。当然，弹出面板是一样的，只不过，这次我们将其中的分辨率一项改为1。对，你没看错，我们改为数字1，其他项目保持默认。此时我们使用Photoshop一共建立了两个文件，尺寸均为750×1 334，分辨率各为144和1。按照传闻中的说法，分辨率为144的肯定会比分辨率为1的更加清楚，真的是这样吗？别着急，接下来我们在这两个新建的画布上分别绘制同样的内容，在电脑上来看，这两张图在100％缩放比例的情况下，显示效果是一模一样的，如下图1-44所示。
图1-44
那么将这两张图分别导出，传输到手机上进行观看，由于我们建立的画布尺寸为750×1 334，所以我们使用iPhone 6预览，结果是怎样的呢？分辨率为1的会比分辨率为144的虚吗？我们的眼睛说明了一切，两者的清晰度完全一样，不存在任何差别。
那么Photoshop中的分辨率的意义是什么呢？我们先从字面意义上来分析。在新建面板中，分辨率的单位为“像素/英寸”或“像素/厘米”，也就是每英寸或者厘米中分布的像素点数量，当我们设定画布尺寸如750×1 334或者640×1 136的时候，像素点的数目已经决定。因此，不管你如何设定Photoshop中的新建画板的分辨率，那么在基于像素显示的数码设备上，比如手机和显示器，总是在横向存在750个像素点，纵向存在1 334个像素点。因此，在任何显示设备上，我们都会得到一样的显示效果。
在这里，我们可以把Photoshop中的这个分辨率当作“打印分辨率”来处理。也就是说，只有当你设定的图片被使用打印机或者其他印刷设备打印出来的时候，此分辨率才会表达出它真正的含义。那么我们可以将两份在手机中看起来一模一样的设计稿打印出来，一份分辨率为144，一份分辨率为1，打印看看。在拉伸模式下，是否分辨率为1的画布打印出的效果比分辨率为144的要虚很多呢。所以，我们可以把这里的分辨率称为“打印分辨率”，打印机会根据此“分辨率”确认打印精度，就像我们做平面设计输出印刷品一样，分辨率越高，打印效果越清晰，反之则越模糊。
但对于数码显示设备而言，此分辨率并不能影响同样“尺寸”（指手机分辨率或者以像素为单位的画布的宽高）显示设备的效果，因为设定这个画布有多少个像素点，那么在任何相同分辨率的显示设备中，它都将被完美显示出来。
所以，从平面设计师转型到UI设计行业的读者，切记不应把两个分辨率的概念弄混淆，Photoshop中的分辨率也叫精度，它只影响通过打印机或其他印刷设备输出的实物的清晰程度。在UI设计过程中，图片输出只取决于像素值的大小，跟Photoshop“新建”面板中的“分辨率”没有任何关系。
不一样的Tips：
在遇到问题的时候，不要轻信别人的说法，自己做个简单的实验，最终得出答案，印象更深刻，且更有说服力。同时，不要死记硬背别人给出的结论，了解原理后，自行验证属于你的正确答案。