uiimg

作品

  • 作品
  • 文章
  • 素材
  • 欣赏
  • 设计师
登录 注册
首页推荐

uiimg编辑

106粉丝 / 8关注
  发私信

关闭

还能输入140个字 

详细讲解APP切图流程和APP切图命名规范

文章分类:  设计规范/资料      发布时间:2016-06-22

5184 0 2 © 版权     原作者:Akane Lee   原文地址    举报

请输入举报理由



一个 App 通常会有很多张切图,不管是 iPhone 需要 1x、2x 图档,Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的切图数量下如何让负责套图的 RD 快速找到所需图档,档名的命令方式就需要双方统一格式方便大家作业。


补充:图中出现的 AAA-1.png 之类命名方式是错误示范,早期不懂事,请用「图片类型_分类_用途_状态.png」这种方式命名。


基本上 App 的切图可分為数大类:背景、按钮、图示、图片、照片、TabBar icon 等。為了让切图便于管理,通常会依图片性质命名。

例如 bg-xxx.pngbtn-xxx.pngimg-xxx.pngtab-xxx.png当图档要做给 Retina 萤幕使用时,只要在副档名前加上「@2x」就可以了。如 bg-xxx@2x.pngbtn-xxx@2x.pngicon-xxx@2x.png。在命名时 bg-xxx.png 中间的 - 可以改為 _ 。


iOS HIG 上写著 Desktop icon 档案命名使用 -,如果切图只给 iOS 使用,可以和 iOS 採用相同的命名方式。请注意 Android 不支援 - 的命名方式,如果图档要运用在 Android 上,请把所有的 - 改成 _ 底线。最好不要把数字或符号当成档名的开头,如 3-icon.png+abc.png 之类。


以下由「微波效应」这个(年代久远)的 iPhone App 為范例。


背景 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,我会在命名时多一层区隔,註明这张图是用在什麼地方,比如 icon-side-setup.png,从档名就能大概猜出这张 icon 图应该是用在 Side Menu 。以上命名方式是我惯用的,每位 UI 习惯的命名方式都不太一样,没有标準格式。总而言之,档名这回事也是 RD 说好就好,不确定要怎麼做的话,就去问他们吧。



2

其他文章
查看全部

已有 0 人评论

你需要登录后才可以评论!

立即登录   还没账号?立即注册

文章打赏

uiimg编辑

微信 扫码打赏任意金额~感谢您的支持!