当前位置: 首页 >> APP设计教程_APPUI设计教程_UI设计教程_网页设计师加油站 >> 阅读正文

安卓android APP切图规范和.9png制作教程

我们都知道android平台有多种不同的分辨率,很多控件的切图文件在被放大拉伸后,边角会模糊失真。

而且在整个android开发的过程中,经常会因为没有处理好切图文件,使整个APPUI界面看起来很变扭,因为很多图片都被拉伸和压缩,比例极不协调!

一般负责的安卓程序员会想在drawable-hdpi,ldpi,mdpi下放不同分辨率的图片,这样虽然可以有效避免图片失真,但是这样一是麻烦而是图片资源似的整个项目太大。所以有时候我们想要是有些图片可以拉伸而不失真多好啊,这时候我们就要想起android安卓为我们提供的9.png格式的图片。

9.png格式的图片是安卓平台上新创的一种被拉伸却不失真的好办法。也是解决Android平台多种分辨率适配的最佳方案。

我们通俗点来解读下 什么是“.9png” 中文名字“点九” 哈哈 之前25学堂也有介绍《APP设计和切图基本知识点

.9PNG,其实相当于把一张png图分成了9个部分(九宫格),分别为4个角,4条边,以及一个中间区域,4个角是不做拉升的,所以还能一直保持圆角的清晰状态,而2条水 平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,只有中间用黑线指定的区域做拉伸。这样的处理的界面显示结果才是最完美的。使用9.png图片的时候,你还会惊奇的发现一个几KB或者几十KB的图片,变得非常的小,一般只有几百个字节那么大, 让安卓系统加载起来当然会更加的流畅。

总的来说:.9png它可以将图片横向和纵向随意进行拉伸,而保留像素精细度、渐变质感和圆角的原大小,实现多分辨率下的完美显示效果,同时减少不必要的图片资源,可谓切图利器。

.9png tu

 

 

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

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

3、PNG24+jpg

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

 

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

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

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

APP设计元素切图示例图:

093459t1aqwelt116ds21k

 

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

 

第三部分: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”文件,出现载入窗口:

 

安卓切图.9png工具

 

2.导入并编辑

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

安卓切图.9png工具2

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

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

安卓切图.9png工具3

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

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

安卓切图.9png工具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 APP切图规范和.9png制作教程

本文地址:http://www.25xt.com/allcode/6370.html

本文关键词: , , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。