用 Sketch 做 iOS 设计时,一般选用哪个尺寸?

用 Sketch 的同学们,请教个问题,做 iOS 时,一般选哪个尺寸做?为什么?我直接用 iPhone 6 Plus 的尺寸做行吗?是不是导出图片时命名要改?
关注者
618
被浏览
46452

17 个回答

童鞋,你这个问题问的不专业啊,尺寸什么的是要看具体项目,要和开发人员一同制定一个标准。

都用Sketch了,当然导出的时候选下2x 或者 3x咯。
Sketch自带IOS UI KIT,是基于IP6分辨率的
(连Material Design都有,看看这template良心大大滴,控件都做成symbol了)



输出的时候X2就是IP6的像素尺寸了,装个他家的Mirror 预览妥妥的。
团队目前默认使用 iPhone 61x 尺寸来做设计。



主要原因如下:
  1. 1x 尺寸下做设计,输出方便,直接输出 2x 资源给 iPhone 5 和 iPhone 6 用,输出 3x 资源给到 iPhone 6 Plus 用。
  2. 选择的 iPhone 61x 尺寸,向上适配 6P 向下适配 5 会比较方便。
    我们看下下图,这是 3 个屏幕实际像素尺寸的对比,如果要在这个尺寸下作适配,因为尺寸差异大,导致不够直观。需要把同样的原件 (图标文字这些)放大后才可以去做适配,相对麻烦。

    再来看看看 1x 资源来做设计的效果。几个尺寸比较接近,用相同尺寸的原件。原件可以在几个界面之间直接拖动,调整间距就好。


-----------------------------------------------------------------------------------
一个用 375x667做的设计稿 用Sketch Mirror在不同机型上预览效果。
白色区域为可以看到的设计稿区域。



-----------------------------------------------------------------------------------
注意的细节:
  1. 界面中需要用到位图的时候,比如头像,商品图。这些图片为了保证输出和预览的时候清晰,需要用 3X 的位图,缩小后用。
  2. 清晰的适配规范,标注规范,需要和开发同学一起达成共识。
    1. 适配一般情况下,图片等比拉伸。比如 Banner 图片
    2. 导航和菜单中的图标常规下都是固定尺寸。
    3. 文字区域一般都是自适应。