切图规范

2015-08-12  本文已影响216人  liu_bo

今天整理了下,资料,发现有些东西没归档,丢掉又太可惜了,记下吧

规则:

所有图片都有 @2x ,@3x

一。

搞一个整体的文件夹,区分业务类型

登陆,注册,组网,主页,控制灯,设备管理,语音消息,个人消息

公用:导航,导航的按钮

二.基本上 App 的切图可分为下面几大类:

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

为了让切图便於管理,通常会依图片性质命名,控件类型 _控件名字_状态(可选)

例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png

1.背景

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

页面背景

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

2.按钮的切图常以 btn-xxx.png 来命名 。App 里的按钮拥有 4 种属性,

分別为一般、点击、不能点击、选中。

一般(normal):btn-xxx-n.png,最基本的按钮外观。

点击(highlight):btn_xxx_h.png,使用者触摸萤幕碰到按钮,为了告知使用者有点击到而出现的回应提示。

不能点击(disabled):btn_xxx_d.png,代表App有这功能但使用者无法使用。例如如安装在iPod上的App有播打电话功能时。

既然不能被点击干脆直接隐藏的作法也是有的。要直接将按钮隐藏或是以不能被点击的状态呈现需视情况决定。

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

图片:pic_xxx.png 或是 img_xxx.png。

照片:pho_xxx.png。

图标: icon_xxx.png

PS.如果是流水号的话,要从 0 开始编号喔!

pho_xxx_0.png  pho_xxx_2.png

TabBar 上的 icon 作法较特殊,虽然它是 icon,

已tab_xxx.png 来表示。

上一篇 下一篇

猜你喜欢

热点阅读