iOS app 切图

iOS 切图尺寸规则

目前iPhone有10种型号，5种屏幕尺寸，再加上6plus的“降采样”（Downsampling）（1080-1920），还有iPhone6和6+上的放大模式（1125-2001）和默认模式（1242-2208），是否是感受好恐怖？可是不用怕，我分享一套超简单的适配方法，看完你都不信有这么简单~

美工交付给开发的资料有:
　　一、  标注图（以640为宽度尺寸为基准标注）
　　二、  2x切图（以640为宽度尺寸为基准切图）
　　三、  3x切图（以1280为宽度尺寸为基准切图）

开发看到这份标注图，能够本身用上面的数字，乘以1.5得出3X的数字。

 

1.为何3x切图要以1280来为宽度？
　　其实iPhone6+的尺寸1242*2208做为3X，怎么算都又难记又不能整除，咱们直接640*2获得1280跟1242相差也没几十个像素，最重要的是不虚边啊，放在真机上看（处女座除外）看不出差异的。

2.为何只设宽度？
　　为了保持长宽比例。iPhone的这几个尺寸不是正好的，宽度放大后高度总差那么几个像素，这没关系，千万别去改高度，手机屏幕是能够上下滑动的嘛。不能够滑动必须保证一屏显示的除外，手动去调整好了。

3.为何开发不是乘以2而是乘以1.5来算尺寸和字号？

由于大屏手机就是要显示更多内容而存在的。纯等比放大界面看起来傻大傻大的，实验证实1.5倍是正好的.

 

APP 切图命名规则:

基本上 App 的切图可分为下面几大类：

背景、按钮、图示、图片、照片、TabBar icon 等。

为了让切图便於管理，一般会依图片性质命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。当图档要作给 Retina 萤幕使用时，只要在副档名前加上「@2x」就能够了。如bg-xxx@2x.png、btn-xxx@2x.png 、icon-xxx@2x.png。在命名时 bg-xxx.png 中间的 – 能够改成 _ 。

iOS HIG 上写著 Desktop icon 档案命名使用 -，若是切图只给 iOS 使用，能够和 iOS 采用相同的命名方式。请注意 Android 不支援 – 的命名方式，若是图档要运用在 Android 上，请把全部的 – 改为 _ 底线。最好不要把数字或符号当成档名的开头，如 3-icon.png 、+abc.png之类。

 

背景
bg-xxx.png，从整个页面的大底图、某个 TableView 的字段底图、Navigation Bar 的底图均可算在背景范围内。

 

页面背景
要留意整个画面的高度，大多数的页面须要扣除状态列和 Navigation Bar 高度，若是画面上有 Tab Bar 的话，底图尺寸会更小。

TableView 字段底图
运用在列表。列表字段内容可能包含缩图、说明文字、箭头等。为了美感或是加快开发效率，有时会将缩图和箭头等直接作在底图上，遇到这种情形请先向 RD 讨论确认单一字段内拥有哪些元素、又有哪些元素要直接作在底图上。

 

按钮底图
按钮有不少种不一样的做法，有的是将整个按钮连带文字一块儿切图，有的运用在内建按钮上、底图和文字是分开的。在这边指的是底图和文字分开的按钮，这种做法优势在于按钮可随文字长度自行加长缩短，底图也会自行延展，不需将 App 内全部的按钮都切图出来。

按钮的切图常以 btn-xxx.png 来命名 。App 里的按钮拥有 4 种属性，分別为通常、点击、不能点击、选中。但不追求精致与完整度的话，只出通常属性按钮图档就能够了，在 iOS 上 RD 能在使用者点击按钮时将原图档变暗作为点击提示。

（Android App 按钮就必定要 2 张图，通常状态、点击状态。）

 

通常（normal）：btn-xxx-n.png，最基本的按钮外观。

点击（highlight）：btn-xxx-h.png，使用者触摸萤幕碰到按钮，为了告知使用者有点击到而出现的回应提示。

不能点击(disabled)：btn-xxx-d.png，表明App有这功能但使用者没法使用。例如如安装在iPod上的App有播打电话功能时。既然不能被点击干脆直接隐藏的做法也是有的。要直接将按钮隐藏或是以不能被点击的状态呈现需视状况决定。

选中(selected)：btn-xxx-s.png，选中出如今有复数选项时，但一般不会把按钮拿去作复数选项控件，这种按钮状态出现的机会不高。

此外，图示、图片、照片我也习惯有固定的命名方式。主要是让 RD 可以快速套图，并无硬性规定该如何将图档分类命名。

图示：icon-xxx.png。

图片：pic-xxx.png 或是 img-xxx.png。
照片：pho-xxx.png。

PS.若是是流水号的话，要从 0 开始编号喔！

TabBar 上的 icon 做法较特殊，虽然它是 icon，但我不会以 icon-xxx.png 来命名。为了和其余 icon 做区隔，我会使用 tab-xxx.png 来表示。（App：App Store）

若使用 iOS 内建的 TabBar，则 icon 尺寸、制图方式都需依照规范。在 iOS5 以后 TabBar 能够变动 底图和 icon 图，不受黑底白 icon 的限制。TabBar 可分红三层：底图层、选中时的高光层、icon层。（App：Find my friends）

底图层、高光层会由于 TabBar 个数不一样而自动延伸，高度为 49px。icon 需依 Guideline 制做 30x30px。加上选中时 icon 会改变，所以 TabBar 的切图共有 4 个部份：底图、选中时的高光、通常状况下的 icon、被选中时的 icon。

 

APP各模块命名规范：

 

 

 

 

 

 

以上为逍遥乐根据网络现有资料进行整理概括，版权不归逍遥乐全部！逍遥乐在概括时作了删减修正添加处理！