国内设计环境下,一些公司使用一倍尺寸(如375x667px)进行设计输出,另一些公司使用二倍尺寸(如750x1334px)。但是 Apple、Google 等推行的设计系统都是使用一倍尺寸来构建设计,Sketch、Framer、Principle 等设计工具也都是以一倍尺寸的思路来构建产品的。
前几天在阿里 UCAN 大会上跟 Fusion design 的负责人聊了这个问题,大家对于使用一倍尺寸来构建设计已经有了共识,现在还在使用二倍尺寸的基本上是由于一些历史遗留问题,最开始使用二倍尺寸,随着团队越来越大,设计资产越来越多,导致改变的成本越来越大,加之大家都已经习惯了这种工作模式,也就没有了改变的动力。
那我们为什么要使用一倍尺寸进行设计,下面是几个原因。
设计师在设计中使用的单位一般为 PX,工程师则不同,iOS 工程师使用 PT,安卓工程师使用 DP,若方法得当,则可以统一设计师和工程师的单位,最大化减少协作成本。
PX 为 Pixel(像素点)的缩写,若屏幕分辨率为 750x1334,则屏幕上一共有 750x1334=1000500 个像素点。PT(Point 磅)是 iOS 开发中用到的绝对尺寸单位,DP(Device independent pixels 设备无关像素,也称 DIP) 为安卓的开发单位,1PT=1/72英寸。PPI(Piexls per inch)和 DPI(Dots per inch)为每英寸的像素点数。当 PPI 或 DPI 为 160 的时候,1PX=1PT(DP)。
基于以上定义,当我们使用一倍尺寸(375x667 或 360x640)做设计时,可认为此时 1PX=1PT(DP),这样我们就和工程师使用了一样的单位,工程师就可即取即用。如果我们采用二倍尺寸做设计,工程师取到一个单位之后们还要进行一次除以 2 的计算。
统一设计和开发单位不仅可以提高效率,还可以在增强设计师对开发框架的理解,做出更符合开发逻辑的设计。
Apple 和 Google 系统的设计规范是按照一倍尺寸的思路来搭建的,使用统一的思路可以避免以后推出新的分辨率又要再做一次转换的问题。
二倍尺寸的设计放大了空间感,让设计师以为还有很多空间可以塞下更多元素,造成点击空间缩水,输入空间变小和内容辨认度下降等问题。一倍尺寸作图则可以帮助我们规避这些问题。
若使用二倍尺寸设计,则不可使用奇数数值尺寸,否则开发换算后会出现有小数点的情况,一倍尺寸设计则不会出现这个限制。
二倍尺寸作图在切图的时候需要手动设置导出参数,1 倍切图需命名为 @2x,1.5 倍切图需命名为 @3x。一倍尺寸作图则 2 倍切图命名为 @2x,3 倍切图命名为 @3x,符合常规预期。
使用二倍尺寸做设计,Sketch 文件的大小会比使用一倍尺寸大(尤其是当我们在设计中添加图片时),同时也会占用更多的内存资源,如果电脑配置不是很好的话,会很影响工作情绪和效率。
总的来说,使用一倍尺寸进行设计比二倍尺寸更加科学,在设计系统的创建和维护上有着显而易见的好处。进行相关的设计决策时,免不了会带来一些转换成本,但只要从框架层和长远利益上考虑,短期的阵痛肯定会远远小于这些转变带来的长期优势。