俗话说万事开头难,最初在接触APP设计的时候,我也曾经为各种规范和屏幕分辨率纠结过,为追寻一种高效的工作流到处寻觅,各种尝试,走过一些弯路,梳理出来,以纪念那些纠结的日子。
用什么软件?
最初我用的是Photoshop,使用PS play上屏。画布尺寸是5S(640px*1136px,72PPI).为什么呢?为什么是5s呢,原因有二:1,我的测试机也就是我的手机是5s的。2.当时6和6P还没出来。
具体方法:用PS建立640*1136的画布,通过PS play实际看手机上的效果,当时对苹果对规范也不是很熟悉,基本都是通过眼看来把握,当时感觉还不错。后来有段时间,规范了解多了,反而有点束手束脚了。
就这样,我摸索着,做着,我在不断进步中也迎来了6和6P。问题就来了,我手工把PS做的5s放大至6和和6P,这个过程让我很痛苦。因为PS的图层样式不会随着一起缩放。所以第二个问题就来了。
以什么为基准?
关于这个问题,有两篇文章对我帮助很大:
iPhone 6 / 6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸?
这是知乎上来自手机淘宝团队的协作模式,结论是
只交付一套设计稿,默认用什么规则来适配?
前文提到适配策略是先选择iPhone 6作为基准设计尺寸,然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话:文字流式,控件弹性,图片等比缩放。所以,iPhone6的750x1334是最适合基准尺寸。
这是来自Bjango的Marc,他建议以1倍图作为基准开始做设计,如320*568pointes.(在Retina下,一个点等于2个像素。)如此可以避免2倍图必须是偶数的计算问题,计算对于设计师来说,有点费脑子。
I always start with a non-Retina, 1× document size.
For an iPad app, it’s 1024×768. For an Android app, it’s a common device size, in mdpi or dp (density-independent pixels). For a Mac app, it’s often 1280×768 (a frankenstein combination of the 13-inch MacBook Pro resolution horizontally, and the 11-inch MacBook Air resolution vertically, ensuring the app will fit on the smallest current Mac displays). For an iPhone app, it’s 320×568, or one of the sizes below.
这期间,我因为更换苹果电脑,开始使用Retina屏做设计,PPI和DPI曾经一度让我很纠结,同时也我开始尝试使用sketch做APP设计。
关于PPI和DPI的纠结,同样是Marc他的另一篇文章给了设计师一个很好的解释:
Pixels per inch is just a tag
It is for these reasons I assign 72PPI to all my design documents, and I recommend you do the same. To change the pixel density of your Photoshop document without resizing the image data, open the Image Size dialogue, uncheck Resize Image and type in the desired pixel density.
他认为用什么单位都一样啦,设计师不用纠结。至于屏幕分辨率他依然建议使用72PPI.我实际上测试过,如果你按Retina来设立分辨率,会存在各种素材因为历史原因都是72PPI,拖入你的工程时需要手工缩放,弊大于利,不可取。
所以,结论就是
最终你使用PS来做设计的话,可以使用6的一倍图来建立画布,即375*667Points,屏幕分辨率为72PPI.输出2倍图为6,3倍图为6P,输出1.7约等于5和5s.
这么做的好处有:
1.一倍图方便输出各种倍数。
2.一倍图方便设计师跟开发人员沟通,不需要进行单位换算。1px=1points
3.一倍图可以减少设计软件的运算量,降低对硬件如内存的要求。
当然如果你使用sketch代替photoshop的话,一切就会更加容易,因为sketch3已经把模版统统更新为1倍图。