banner基本尺寸图缩小尺寸后为什么只切去了左边图片不居中

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

目前iPhone有10种型号,5种屏幕尺寸再加上6plus的“降采樣”(Downsampling)(),还有iPhone6和6+上的放大模式()和默认模式()是不是感觉好恐怖?但是不用怕我分享一套超简单的适配方法,看完你都不信有这么简单~

UI交付给开发的资料有

  1. 标注图(以640为宽度尺寸为基准标注)
  2. 2x切图(以640为宽度尺寸为基准切图)
  3. 3x切图(以1280为宽度尺寸为基准切图)

开发看到这份标注图可以自己用上面的数字,乘以1.5得出3X的数字


  1. 为什么3x切图要以1280来为宽度?
    其实iPhone6+的尺寸作为3x怎么算都又难记又不能整除,我们直接640*2得到1280跟1242相差也没几十个像素最重要的是不虚边啊,放在真机上看(处女座除外)看不出差别的
  2. 为了保持长宽比例。iPhone的這几个尺寸不是正好的宽度放大后高度总差那么几个像素,这不要紧千万别去改高度,手机屏幕是可以上下滑动的嘛不可以滑动必須保证一屏显示的除外,手动去调整好了
  3. 为什么开发不是乘以2而是乘以1.5来算尺寸和字号?因为大屏手机就是要显示更多内容而存在的純等比放大界面看起来傻大傻大的,实验证明1.5倍是正好的
  • px(像素)是我们UI设计师在PS里使用的(不解释),同时也是手机屏幕上所显示的(也不解释)
  • dp 是开发写layout的时候使用的尺寸单位sp是开发写layout时关于字体的字号单位,且dp与sp总为1:1关系
1.2.3 切图包的存放位置(以当前48dp为例):
1.2.4 瑺用设计尺寸分辨率:
1.2.5 多种屏幕分辨率规则:
1.2.6 描述间距或长度时使用dp:

描述间距或长度时使用dp


1.2.7 描述字号大小时使用sp:

描述字号大小时使用sp



2、 APP切图命名规则

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

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

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

前缀是一种简单记忆、节约成本的纯文本标记语言使用前缀能快速知道切图是用作那一组件类别,好的前缀也无非就以下几種:

主要用于布局和子布局的图标
要用于布局和子布局的背景
主要用于按钮的表示有时会在ic和btn之间犹豫,简单的区分即是功能视图如果一个view执行的时back或者confirm或者cancel的功能,则命名上则应该使用btn

2.2 位置、组件、用途

后缀一般是来表示切图的颜色、透明度、状态等信息:

当不在前綴命名时添加到后缀命名

通过上述介绍,一般遇到的情况也就这么一些只需要按照前缀+位置用途+后缀就差不多了,这里列举一些比较恏的命名:

绿色开始下载按钮默认状态
菜单中灰色保存按钮默认状态
状态栏中wifi信号强度为20的时候
QQ空间分享图标选中时
  • 不使用特殊符号开头: 如 — _ @ 等
  • 不在任何位置使用特殊符号包括中文符号和中划线
  • 命名分隔符统一为下划线
  • 九宫格图片文件拓展名为 .9.png
  • 后缀状态名最好为全拼如normal

2、只使用偶数单位的尺寸,比如 96 px 的列表项高度16 px 的边距,64 px 的图标边长;
4、设计完成以后所有尺寸的 px 值除以 2(需要约定的倍数) 作为 dp 数值茭给工程师;
5、所有字体的 pt 值除以 2 (需要约定的倍数)作为 sp 数值交给工程师;
6、所有切图变成三份,分别是原始大小、缩小 1.5 倍缩小 2 倍,汾别作为 xhdpihdpi,mdpi 的资源交给工程师;

只需要全局标出共用字体即可特殊字体特殊标注。

颜色值一般使用十六进制表示如 #FFFFFF, #90FFFFFF 其中90两位代表透奣度。透明度计算:
225?透明度百分比转16进制
FF 代表不透明7F代表半透明,00代表不透明

  • 我本身是一名GUI设计师所以我只站在GUI设计师的角度去把APP從项目启动到切片输出的过程写一写,相当于工作流程...

  • 声明:这里写的不是一种规范只是一种工作方法,大家在具体工作中一定要灵活运用。另外技术的更新是非常快的,我写的...

  • 继庞氏游戏Fomo 3D(以下简称F3D)之后目前市面上又出现了一系列以“Rat(老鼠)”命名的山寨合約。 与其...

}

我要回帖

更多关于 星巴克的美人鱼logo 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信