照猫画虎不可取
——为什么要使用一倍图做设计

刚接触UI设计的初学者大都会有这样的疑问，使用多大的画布（画板）做设计最合适，为什么Sketch中默认的画板尺寸比实际分辨率要小一半或者更多呢。比如iPhone 6的真实分辨率是750×1 334，但Sketch中创建的尺寸却是375×667。同样其他预置机型的尺寸也不对，难道是哪里出错了吗？其实只是我们理解事情的方式不同，Sketch使用了手机开发过程中经常用到的逻辑尺寸，而我们设计师眼中则只存在真实的分辨率。

逻辑分辨率与真实分辨率

这里涉及两个名词，一个是逻辑分辨率，一个是真实分辨率。真实分辨率很好理解，即我们平时最常接触到的参数，比如说一台手机的分辨率为1 920×1 080，或者750×1 334；Macbook Pro Retina的显示屏分辨率为2 880×1 800。如果我们把显示屏的纵向和横向理解为一个个“点（簇）”话，那么如2 880×1 800分辨率就代表着，这个显示屏横向有2 880个点，纵向有1 800个点。那么将它们相乘，显示器中点的个数为2 880×1 800=5 184 000。在相同物理尺寸的屏幕中，分辨率越高，则表示这个屏幕的显示效果越精细，反之则越粗糙。而表示精细度的单位就是PPI或者DPI（Pixels Per Inch或Dots Per Inch），这个值越大，屏幕精细度越高，显示效果越好，或者能显示更多的内容。

在iPhone 3GS时代，分辨率只有320×480，物理尺寸为3.5英寸，因此计算出PPI的数值约为160。iOS工程师定义此尺寸下的素材图片为一倍图，也就是@1x（当然，输出素材时，@1x这个文件名后缀会被省略掉）。当手机屏幕进化到iPhone 4至iPhone 6时代，技术进步，PPI数值也进一步提高，计算后约为320左右。因此，在320分辨率下输出的图片素材应用于更高密度的手机屏幕时会变虚，此时需要进一步扩大输出图片素材的尺寸。因此，我们将640×1 136或750×1 334分辨率下输出的图片素材定义为@2x，也就是二倍图。这时你可能会问，为什么iPhone 5、iPhone 4和iPhone 6的分辨率不一样，但是都使用二倍图呢。其实原因很简单，计算一下PPI，会发现它们的数值大致相同。因此，我们要确定使用什么尺寸的输出素材的时候，是根据手机屏幕的密度，也就是PPI或者DPI来考量的。同理，Android设备也有类似的设定，只不过Android的图片素材依据文件夹来分类，如Mdpi、Hdpi、Xhdpi、XXhdpi等。但是，相同点都是一样的，在160DPI的时候，输出的图片素材对应Mdpi，也就是对应iOS的一倍图。

理解到此，我们就知道了第一个原因，原来一倍图是有缘由的。它将设备精度和分辨率、尺寸对应起来，形成了一个有机联系的整体，而衡量使用哪种图片尺寸的标准，不是分辨率，而是屏幕密度，如图1-41所示。

随着手机分辨率和精度的提升，一倍尺寸增长为二倍尺寸、三倍尺寸甚至更高。但是开发工程师的习惯却因此保留下来，面对多种多样的分辨率和精度，只有以不变应万变，才是最好的选择，因此，无论设计师以怎样的分辨率和尺寸来作图，开发工程师眼中只有唯“一”的分辨率，这就是一倍分辨率，这种分辨率就成为逻辑分辨率。当我们打开Xcode新建Storyboard时，就可以明确地体验逻辑分辨率的精髓。如图1-42所示，在右侧属性检查器中，选择4.7英寸的iPhone时，右下角的尺寸为375×667。

我们现在理解了一倍图，也就是逻辑分辨率的概念。在此总结一下，在160PPI屏幕精度下，典型分辨率为320×480时，此时输出的素材或者设计稿为一倍图。那么对于设计师来说，为什么一定要选用这种画布尺寸来做设计稿呢？其实并不是不可以选择其他的，最根本的原因就是换算方便。

如果使用640宽或者750宽为基准作图，当然不是不可以，只不过我们在输出@3x图的时候，是不是要乘以1.5呢？如果你一定要用@3x三倍图的分辨率作图，那么最终要生成二倍图的时候，是不是要把输出尺寸乘以2/3呢？如果是1.5还好，那么2/3如何缩放呢？0.666 666 6？有强迫症的设计师真的看得过去吗？但是，如果我们使用一倍图设计，那么1×2=@2x、1×3=@3x，简单方便又容易理解。数学不好的小伙伴也可以很容易做换算。加上Sketch是全矢量绘图软件，不管你怎么放大缩小，导出的位图也是不会虚的。也就是说，以一倍基准尺寸作图，要输出二倍或者三倍时，只需要简单地把图片的宽和高各放大二倍和三倍即可，没有小数倍数，可以最大限度地保证输出位图中不出现亚像素，避免图片模糊的情况发生。

除了设计师输出素材的便利之外，对于开发工程师来说，也免去了复杂的换算环节。在开发工程师眼中，如果使用640的分辨率作图，那么按原大小标注设计稿中的尺寸的话，他们同样在开发环境中是要换算为一倍尺寸的。比如你标注了字号为40px，那么最终开发工程师写在代码里的就是20pt，除以2的关系。如果你一定要拿三倍尺寸作图，那么最终的字号、尺寸，需要除以3，在这个工程中换算会越来越不方便。但是呢，如果使用一倍基准分辨率作图，那么就不用除以2或者3啦，所有尺寸开发工程师直接拿过去随取随用，多么方便简单。

回到我们的主题，为什么会提到“照猫画虎”呢？在网络中有很多教程文章，我们可以轻松拿到作者在其中阐述的结论来用，比如大家知道320×568可以用来做一倍图尺寸，但是一旦情况发生变化，比如375×667是几倍图呢？要如何输出素材呢？很多读者可能又不懂了。最根本的原因就是，知其然不知其所以然。一旦设计条件发生变化，很多人又会不知所措。那么为什么不采取一种以不变应万变的方式呢？了解背后的设计原理，不管你使用怎样的画布尺寸，都可以轻松输出适合开发工程师使用的图片素材和标注。照猫画虎不可取，了解背后的原因更重要。

Sketch作为一款纯矢量的移动端UI设计软件，不管是从设计还是到后期与开发工程师的配合方面，都严格遵从开发原理，这种设计方法可以最大限度保证设计稿的复现，同时也可以减小文件体积和系统资源消耗，不管是从哪个方面看，都是设计师制作UI界面的明智之选。

最后总结一下原因，设计师使用一倍基准尺寸作图，主要是方便，单位转换方便，输出切图方便，理解简单。对于工程师，他们不用再进行复杂的换算，有助于完美复现设计稿。因此，不管是国内还是国外，越来越多的设计师开始使用一倍基准尺寸设计移动界面。还在犹豫？就差你了。 5+l+7FgP8XGUSQd3w9VXnr/AG8It3PVzJ7Nl4gAe5wfMb80PhHgNzRtbPmHOIWT9