320*480pxIPhone3GS(我没见过3GS实体机,只在网上见过图片,但你需要知道这个尺寸)
640*960pxIPhone4/4s(4拟物化盛行时代的设计尺寸)
640*1136pxIPhone5/5s/5c(5时代的设计尺寸,现在出来6/6plus,很少有人再用这个尺寸设计)
750*1334pxIPhone6(基本上现在做IOS的APP设计,用这个的应该最多)
1242*2208pxPhone6plus(这是标准分辨率,也就是设计需要的尺寸;另外还存在物理分辨率是1080*1920,主要是程序员那边为了匹配不同分辨率视觉一致用的。plus还涉及到横屏,横屏是是没有状态栏的,设计横屏时可以参考IPad的设计模式)
屏幕尺寸:我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,指的是显示屏对角线的长度(diagonal)。
1inch=2.54cm=25.4mm
PPI(PixelPerInchbydiagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目。PPI数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高、颗粒感越弱。
关于字体大小的问题(750*1336为例)
顶部操作栏文字大小34-38px
标题文字大小28-34px
正文文字大小26-30px
辅助性文字大小20-24px
Tabbar文字大小20px
切记,字体大小要用偶数。
最小点击区域问题
IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44point(点),在设备上1point等于1像素,所以转换成像素就是44*44像素,换算成物理尺寸大概是7mm左右吧(人机工效学研究中得出的结论:
用食指操作,触击范围在7mm左右合适;用拇指操作,范围在9mm左右合适)。
据说这个尺寸下,不容易出现误操作,误点击;小于这个尺寸,点击就会变的有些不太准确,一向注重用户体验的苹果公司定义这个最小点击尺寸也不是没根据的……
所以现在做设计,为了图标精致,你可以把图标做的小一些,但是切图输出的时候,要考虑用户点击难易度的问题,
所以,切图的时候,涉及到需要点击的小图标的时候,普通屏幕还是切44px大小,高清屏就需要切88px,不够的地方用透明区域补全,否则用户点击的时候会比较困难,会很不灵敏。
Scale起源
早期的iPhone3GS的屏幕分辨率是320*480(PPI=163),iOS绘制图形(CGPoint/CGSize/CGRect)均以point为单位(measuredinpoints):
1point=1pixel(PointPerInch=PixelPerInch=PPI)
后来在iPhone4中,同样大小(3.5inch)的屏幕采用了Retina显示技术,横、纵向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)=960x640(PPI=326),显像分辨率提升至iPhone3GS的4倍(1个Point被渲染成1个2x2的像素矩阵)。
但是对于开发者来说,iOS绘制图形的API依然沿袭point(pt,注意区分印刷行业的“磅”)为单位。在同样的逻辑坐标系下(320x480):1point=scale*pixel(在iPhone4~6中,缩放因子scale=2;在iPhone6+中,缩放因子scale=3)。
可以理解为:
scale=绝对长度比(point/pixel)=单位长度内的数量比(pixel/point)
切图
切片的命名规则:
切片种类+功能+图片描述(可有可无)+状态.png
名称应使用英文命名,不要以数字或者符号当作开头,使用下划线进行连接。
举个例子:一个首页的处于正常状态的确定按钮
btn_sure_nor.png
btn_sure_nor@2x.png
切片种类是按钮(btn);功能是确定(sure);状态是normal(正常)