1
什么是ui切图
切图严格来说并不是Ui设计师的工作,而是前端工程师的工作,指的是将设计师的设计转化为网页,是一种将设计师的“理想”转化为“现实”的工作,将psd进行切片重组 利用div+css js等等前端开发代码来生成网页的一种技术。
什么是ui切图_安卓切图命名规范,设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该确保切图输出能够满足工程师设计效果图的高保真还原需求。其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量。后,输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。
2
安卓切图命名规范
所有命名全部为小写英文字母:这一点的理由很简单,我们的目标是让开发直接拿我们的切图进行使用,不能够随意修改名称,但是我们要知道,开发的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的。所以命名全部用小写的英文字母是基本的规则。
命名格式:众所周知,一个大型项目会分很多模块,每个模块由不同的设计师来独立完成,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型的切图,还有一种就是各个模块特有的切图。
什么是ui切图_安卓切图命名规范,通用切片命名格式:
组件_类别_功能_状态@2x.png
举例:tabbar_icon_home_default@2x.png(对应中文:标签栏_图标_主页_默认@2x.png)
模块特有切图命名规则:模块_类别_功能_状态@2x.png
举例:mail_icon_search_pressed@2x.png(对应的中文为:邮件_图标_搜索_ 默认@2x.png)
当然这两个例子都是比较基本的情况,有很多时候可能一个单词并不能清楚的描述功能,比如有两个名字相同的搜索图标,大小不一,那这种情况你就可以这样命名:mail_icon_search_big_default@2x.png,我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。
4
安卓切图切几套
需要了解IPhone各个版本的手机屏幕密度: IPhone 4/4s/5/5s/5c/6 ≈320dpi
你会发现单从屏幕密度来说,IPhone可以算是超高密度了。
下面来说说这几个密度:
LDPI 120dpi 低密度 不考虑这个了,消失了
MDPI 160dpi 中密度 这个目前少见
HDPI 240dpi 高密度 常见
xHDPI 320dpi 超高密度 常见
xxHDPI 480dpi 超超高密度 常见
xxxHDPI 640dpi 超超高密度 Android4.3推出了对此密度的支持,也就是平板电视的4K分辨率
你的切图会根据这几个密度来决定输出多少套。理论状态下,如果你想兼顾到目前还存在的各个机型,应该为不同的密度提供不同尺寸大小的切图。但这无疑提升了巨大的工作量,而且还可能浪费很大的资源空间,实际上,很多机型已经不占有主流市场了,所以具体输出几套需要看公司的产品需求而定。
选取大尺寸提供一套切片资源,交给工程师处理,适配到各个屏幕密度。这里要注意,这个“大尺寸”,指的并不是目前市面上Android手机出现过的大尺寸,而是指目前流行的主流机型中的大尺寸,这样可节省很大的资源控件。关于大尺寸选取多少,你需要和你们的安卓工程师沟通,每个安卓工程师对这个问题的结论并不同。