2019设计之旅27-设计清单分享

最完整的APP切图流程和切图命名规范详情介绍

设计清单第21期：用时约1分

一套完整的App 会有很多切图，不管是 iPhone 需要 1x、2x、3x 图档，Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。

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

bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。

背景bg-xxx.png，从整个页面的大底图、某个 TableView 的字段底图、Navigation Bar 的底图

页面背景要留意整个画面的高度，大多数的页面需要扣除状态列和Navigation Bar 高度，TableView 字段底图运用在列表。列表字段内容可能包含缩图、说明文字、箭头等。

按钮底图按钮有很多种不同的作法，有的是将整个按钮连带文字一起切图，有的运用在内建按钮上、底图和文字是分开的。

按钮的切图常以btn-xxx.png 来命名 。

App 里的按钮拥有 4 种属性，分別为一般、点击、不能点击、选中

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

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

03不能点击(disabled)：btn-xxx-d.png，代表App有这功能但使用者无法使用。

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