码迷,mamicode.com
首页 > 移动开发 > 详细

android .9图讲解

时间:2015-09-25 20:28:01      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:

第一部分:下面我们来看看安卓切图前辈的心得:

1、考虑适配Android 各种复杂的分辨率,如主流的1280X720, 800X480, 640X480,480X320,以及各种非主流分辨率。
2、.9神器

3、PNG24+jpg

4、可交互控件尽量不小于最小可操作尺寸:android规范是48dp
5、图片中的可视元素尽量在文件中居中,便于对齐和标注
6、能用代码实现尽量避免用图,如单色色值、渐变、文字、分割线等
7、考虑控件的通用性。

 

第二部分:站在开发者的角度去进行安卓切图

在进行安卓切图之前,APPUI设计师一定要与安卓程序员进行必要的沟通。寻找一种方便的安卓切图规则。当我们能够不用.9png的工具切图的时候,尽量不用。因为“点九”的制作工具为“draw9patch”用起来比较繁琐。新手也未必会切好。

所以,我们尽量在理解了.9png的原理之后,在ps里面直接切就行。然后切好一个页面直接给到程序员实现。如果程序员套切图的时候,发现不对的地方也有及时反馈给你,或者app设计师及时去咨询。

APP设计元素切图示例图:

技术分享

 

在切图的过程中,还会发现不同的情景,要时刻想着你要的结果,通过对此区域的仔细处理,可以更好的为图片上所承载的内容做排版。这样开发同学只要通过一些简单的属性设定,就可以实现效果图上精确的布局。同时减少不必要的开发,精简代码,提高产品的性能,积少成多,带给用户更好的体验感受。

 

第三部分:APP设计师要学会思考,选择更优的安卓切图方式

这个只能具体案例具体分析啦。多动手吧!

下面是3点算是关于安卓android APP切图规范吧。

尽可能的减小资源的大小,切图的时候尽可能减小资源的大小,为产品安装包瘦身。

1.“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的,所以尽量缩小图片的尺寸。

2.当我们遇到有纹理的背景或有纹理的按钮时,切图原则为:找到纹理的规律,用最小的切图去平铺,可以想象中图案叠加的原理。

3、适当压缩图片质量,在单色或没有过多效果时可存储为png8位或索引模式。

 

第四部分:安卓切图进阶部分(.9png制作教程)

1、下载安装工具:  draw9patch.zip 该工具SDK中自带。

首先你需要给自己的电脑安装上java于系统的默认目录下。没有安装java的同学可以在百度搜索:jdk-6u20-windows-i586,安装包大小80M左右。draw9patch下载地址

然后使用andriod模拟器—android-sdk-windows,打开SDK/tools目录下的“draw9patch.bat”文件,出现载入窗口:

 

技术分享

 

2.导入并编辑

将png图片拖拽到该窗口中.  如下图,自动进入编辑界面。图中介绍了每个区域的内容及功能注释。

技术分享

预览右侧的视图发现,图片的边缘处于普通拉伸状态。

3、现在我们在图片边缘点击左键,绘制出黑线,即图片需要被拉伸的部分。如下图,对4条黑线做了注释。

技术分享

如果失误多绘的部分,可按住shift键的同时点击鼠标左键擦除)。

4、如图所见,三种拉伸结果均已完美显示,已实现我们想要的拉伸效果,假设这是一个有显示文字的窗体,那么文字显示的区域,程序也会控制在黑线对应范围。

技术分享

 

解释:           1号黑色条位置向下覆盖的区域表示图片横向拉伸时,只拉伸该区域
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时,只拉伸该区域
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域
没有黑色条的位置覆盖的区域是图片拉伸时保持不变(比如,如果图片的四角为弧形的时候,当图片被任意拉伸时,四角的弧形都不会发生改变)
5、如果失误多选了部分,可按住shift键,点击鼠标左键去掉黑色条

6、右边3个黑色图形区域为显示当前拉伸效果

7、选择好区域后,点击左上file-》save 9-path,保存图片,后缀名为xxx.9.png。

8、解释:我们可以看见图片的周围多了4个黑色条,不要急这个图片还不能用,这就是原始的9.png图片,当我们进行下一步操作后,这个图片就变得正常了。

更多详细的方法点击:http://blog.csdn.net/pugongying1988/article/details/6938972

android .9图讲解

标签:

原文地址:http://my.oschina.net/lhjtianji/blog/511332

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!