iPhone 6/Plus 的适配

Author : luckyGirl

最近用上高大上的iPhone6了,可是体验并不怎么理想,尤其是常用的APP:新浪微博和微信,字体大、图片模糊,与iPhone精致的调调一点不相配,归根结底就是一个问题 — 适配!今天Cicy就来初探下如何进行适配。

一、基本概念

首先我们先来了解下一些术语的基本概念:

  • px:像素,屏幕上显示数据的最基本点
  • pt:point,印刷单位,1/72英寸,是个绝对单位
  • ppi:密度单位,图像分辨率,每英寸所包含的像素数目
  • dpi:密度单位,打印分辨率,每英寸能打印的点数
  • Retina:超高分辨率屏幕技术,iPhone从4就已开始应用

二、iPhone的复杂尺寸

iPhone越来越复杂的尺寸

之前基本按照宽度为640px为基准的视觉稿,基本连iPhone6都不能很好满足(怪不得在我手机上显示的图片好糊T_T)

三、手机淘宝的适配协作

看一下手机淘宝团队是如何协作的吧
手机淘宝团队协作图
第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。

第二步,输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。

第三步,开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。

第四步,适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配

 

参考:知乎

standard

Have your say