南京UI培训之UI新手必读：APP切图流程和APP切图命名规范

　　我们都知道一套完整的 App 通常会有很多张切图，不管是 iPhone 需要 1x、2x、3x 图档，Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的切图数量下如何让负责套图的 RD 快速找到所需图档，档名的命令方式就需要双方统一格式方便大家作业。所以，制定一套非常有效而方便的APP切图命名规范非常有用的。

　　下面就跟随南京万和UI培训来详细了解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 的底图都可算在背景范围内。  南京万和UI培训

　　页面背景

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

　　TableView 字段底图

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

　　按钮底图

　　按钮有很多种不同的作法，有的是将整个按钮连带文字一起切图，有的运用在内建按钮上、底图和文字是分开的。在这边指的是底图和文字分开的按钮，这种作法优点在于按钮可随文字长度自行加长缩短，底图也会自行延展，不需将 App 内所有的按钮都切图出来。

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

　　（Android App 按钮就一定要 2 张图，一般状态、点击状态。）

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

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

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

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

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

　　图示：icon-xxx.png。

　　图片：pic-xxx.png 或是 img-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）  南京万和UI培训

　　底图层、高光层会因为 TabBar 个数不同而自动延伸，高度为 49px。icon 需依 Guideline 制作 30x30px。加上选中时 icon 会改变，因此 TabBar 的切图共有 4 个部份：底图、选中时的高光、一般情况下的 icon、被选中时的 icon。

　　以上是南京万和UI培训机构讲师对于UI新手APP切图流程和APP切图命名规范的详解，后续会为大家提供更多的技术讲解。