APP切图流程和APP切图命名规范详细完整版

转自:http://www.25xt.com/appdesign/7339.html

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

下面就跟随25学堂的小编来详细了解APP切图命名的流程和命名规范。

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

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

为了让切图便於管理,通常会依图片性质命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。当图档要做给 Retina 萤幕使用时,只要在副档名前加上「@2x」就可以了。如[email protected]、[email protected] 、[email protected]。在命名时 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。

下面25学堂在附上一些大神分享的APP切图命名规范。

原文地址:https://www.cnblogs.com/cheng2015/p/8317364.html

时间: 2024-10-23 07:04:34

APP切图流程和APP切图命名规范详细完整版的相关文章

Android 性感美图在线浏览APP

周末无聊,遂整理了下近来经常使用的几个开源库,无意间又发现了一些开放接口,于是乎决定融合在一起,做个简单的"性感美图"浏览的APP,名字呢,就叫"性感沙滩",效果例如以下.(相信一些屌丝男士对改名字不会陌生) 该项目还是比較简单的,代码也不复杂,此处做些简要的介绍. 1. 图片开放接口: http://www.tngou.net/doc/gallery/28 2. 相关的类库: · 下拉刷新列表组件:https://github.com/chrisbanes/And

js实现QQ跳转到支付宝APP并领取红包!附:动图demo

前天我在sg开源了js实现微信跳转到支付宝并领红包的代码.https://segmentfault.com/a/11...于是朋友圈开始刷屏,各种套路,各种标题,再附上短链接,引起了很多人的好奇,然后大家开始接单制作这种链接.5-200元一个链接,真的有些人赚到了一点钱. 但是今天(2018-1-6)12点半的时候有很多说,安卓是跳不了了,不是域名被屏蔽,估计是微信做了一些防护措施导致的. 而且还有人问,有没有QQ的,其实QQ也有,我就简简单单做了个demo,QQ现在应该很少人用来做营销做推广了

移动应用/APP的测试流程及方法

1. APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间.正式测试前先向主管确认项目排期. 1.3测试资源 测试任务开始前,检查各项测试资源. --产品功能需求文档: --产品原型图: --产品效果图: --行为统计分析定义文档: --测试设备(ios3.1.3-ios5.0.1:Android1.6-Android4.0:Winphone7.1及以上:Symbian

Xcode7.1环境下上架iOS App到AppStore 流程 (Part 三)

前言部分 part三 部分主要讲解 Xcode关联绑定发布证书的配置.创建App信息.使用Application Loader上传.ipa文件到AppStore 一.Xcode配置发布证书信息 1)给应用绑定App ID并添加Team账号 如图1 [图1] 注意:图中黄色警告处Fix Issue 可修复部分问题,但请勿轻易点击此按钮,如果该账号下存在多个证书他会自动删除 之前的证书信息. 2)给应用选择关联安装好的发布证书 如图2/3 [图2] [图3] 3)打包我们的应用程序 如图4 [图4]

Xcode7.1环境下上架iOS App到AppStore 流程 转

来自:http://www.cnblogs.com/ChinaKingKong/p/4957682.html 前言部分 之前App要上架遇到些问题到网上搜上架教程发现都是一些老的版本的教程 ,目前iTunesConnect 都已经迭代好几个版本了和之前的 界面风格还是有很大的差别的,后面自己折腾了好久才终于把自己的App上架,所以一直想写个最新(Xcode7.1~OS X 10.10.5)的 App上架教程,但由于上班忙等各种原因拖拖拉拉终于写好了此文,刚好有个朋友的App让我帮他上架就拿这个做

APP软件开发流程并不复杂

APP软件开发流程并不复杂,为什么这么说呢?只要我们知道都需要什么角色就知道是什么流程了.一般开发都离不开UI设计师.前端开发.后端开发.测试专员.产品经理等,利用他们不同的工作性质,我们可以将流程转化为项目开发阶段.这样可以把复杂的流程简化,更加容易理解了. 一.需求阶段 1.需求讨论:这是我们APP开发重要一环,前期需要和产品经理沟通,我们的APP做成什么样子的?要实现的效果是什么?设计界面如何呈现?等等这些都要提前做好需求文档,但是需求要根据市场调研来做,切不能自己想做什么就做什么. 2.

Hbuilder用自有证书打包 ios App上架AppStore流程

最近在用Hbuilder做跨平台开发,经过一番研究终于在苹果商店上架成功了一款产品!这款产品就很简单,直接用hbuilder打包好,然后上传到商店即可.这里参照ios app提交应用商店 这篇文章结合hbuilder,从应用打包,到提交到苹果商店的流程详细介绍一下,希望对有需要的哥哥姐姐们有帮助. 一.打包: 应用写好了之后就可以打包了,hbuilder云打包很简单,但是你想要发布到应用商店的话是需要自有证书的, 选择"使用苹果证书" 1.  前期工作 这里就需要用到 AppId,描述

Xcode7.1环境下上架iOS App到AppStore 流程 (Part 一)

前言部分 之前App要上架遇到些问题到网上搜上架教程发现都是一些老的版本的教程 ,目前iTunesConnect 都已经迭代好几个版本了和之前的 界面风格还是有很大的差别的,后面自己折腾了好久才终于把自己的App上架,所以一直想写个最新(Xcode7.1~OS X 10.10.5)的 App上架教程,但由于上班忙等各种原因拖拖拉拉终于写好了此文,刚好有个朋友的App让我帮他上架就拿这个做例子来讲解好了, 顺便帮他新开发的App做个广告;嘿嘿! 之前的SVN教程由于截图太多无奈分成了好几个部分提交

App最新上架流程梳理

一个app从研发到提测最后到上架这是一个完整的产品周期,需要一套与之相对应的流程来保证质量,前面2个按下不提,今天就来梳理上架的流程. 众所周知,应用渠道分为App Store和安卓2个,咱们就这2个渠道的上架情况分别来梳理下. 一.App Store 1.开通iOS的开发者账号 进入https://developer.apple.com/programs/ios/开通,$99/year费用不便宜,用信用卡付的话需要visa卡,具体注册流程这里不细说(注册步骤http://blog.csdn.n