1.选择一个尺寸作为设计和开发;的基准
2.定义一组适配规则,自动适配其余两种尺寸;
3.特殊的改编效果赋予了设计效果。先来看看我们采用的合作模式,然后慢慢解释整个故事。
为数不多步,在视觉设计阶段,设计师根据宽度(iPhone6)制作设计稿,除了图片以外的所有设计元素都采用矢量路径制作。设计定稿后,在设计稿上标注,并输出标注的图纸。同时放大1.5倍生成一个宽度的设计稿,在稿中剪切图片。
第二步,另一个是宽度的设计图。
第三步是完成iPhone6的界面开发()。在这个阶段,我们不能使用固定宽度的开发接口,而是使用自动布局,以方便后续适应其他尺寸。
第四步:自适应调试阶段,基于iPhone6的界面效果,分别上下调试()和()以下的界面效果。从而完成大、中、小屏幕适配。
为什么选择iPhone6作为基准尺寸?
面对三种需要适配的屏幕时,很容易想到先做一个屏幕,再适配剩下的两个屏幕。为数不多个决定是哪个屏幕应该作为设计和开发的基准尺寸我们选择中型iPhone(/)作为基准有几个原因:
1.从中间尺寸上下拟合时,界面调整的范围小。在设计效果下的适应性和偏差不会太大。假设为基准做了一个非常优雅的设计,可能元素之间的比例就不是这样了,比如图片和文字之间的视觉比例可能会失衡。
2.有两种显示模式,标准模式分辨率为,放大模式分辨率为(即iPhone6的1.5倍)。可以看出,在官方系统中,iPhone6与分辨率之间存在1.5倍的放大关系。在许多情况下,这两种尺寸可以以1.5倍的直接等比例匹配。
3.这个奇妙的数值是苹果官方不愿意公开宣传的分辨率,而且不方便记忆和计算网格。虽然是广泛使用的分辨率,但在大屏时代用小尺寸作为设计基准显然已经过时,设计师也会停留在小屏的角度来设计。
【急】基于手机APP产品的UI设计打开报告