美文网首页
【UI】关于点9切图

【UI】关于点9切图

作者: 静哥哥的蓉儿 | 来源:发表于2017-10-10 13:56 被阅读0次

什么是点9?


点9即 .9 ,是Andriod平台的应用软件开发里的一种特殊的图片形式,可自适应调节图片大小,常用于对话框背景图片中,背景随着聊天对话文字的多少进行横向,纵向,横纵向拉伸。文件扩展名为:.9.png,是一种特殊的文件格式。在UI切图过程中,UI设计师往往需要切.9.png格式的图片给开发人员,下面具体介绍如何制作点9切图。

为什么叫点9?


相当于把一张png图分成了9个部分(九宫格),分别为4个角,4条边,以及一个中间区域。具体如下图:上方2区域表示横向拉伸的区域,左边4区域表示纵向拉伸的区域,下方8区域表示横向显示内容的区域,右方区域6表示纵向显示内容的区域。区域1,3,7,9代表不被拉伸的区域。

如何制作点9?


制作点9切图的方法有很多种,在这里具体介绍两个工具。一个是手机软件NinePng九图神器,另一个则是电脑软件draw9patch。个人觉得NinePng使用起来更加方便,具体使用方法将以一个例子进行说明。如下......

实例详解


以聊天背景为例,如下图


作为聊天背景图,要保证四个圆角及右边三角形不变。横向拉伸时,保证四个圆角不变即可,所以只需标注圆角以外的区域。纵向拉伸时,要保证三角区域及圆角不变,所以需要在除三角区域及圆角区域以外进行标注。内容显示区域,横向显示需具体标注效果如上图;具体效果见下图

以上......

相关文章

  • 【UI】关于点9切图

    什么是点9? 点9即 .9 ,是Andriod平台的应用软件开发里的一种特殊的图片形式,可自适应调节图片大小,常用...

  • 关于.9图的那些事

    UI在APP设计切图的时候,总是会遇到开发要求切.9图,可是什么是.9图,.0图用来干什么,什么时候该切.9图以及...

  • 关于ui界面切图

    前言 很多圈友最近围在一圈讨论一个话题——切图。那什么是切图?切图对美术和程序有什么关系?怎么切图?切图有哪些方法...

  • 点九切图你知道怎么切吗?

    最近很多人在微信群问我点9图怎么切的问题,今天u妹把工作中积累的关于点9切图的经验分享给大家,希望大家可以掌握这些...

  • 【UI常用】关于切图命名规范

    相信很多小伙伴们,设计很多图标,却不知道怎么规范命名,这样子既方便自己又方便开发人员。 所以说,我们在工作中对于图...

  • UI设计规范整理一iOS字体和切图及规范

    UI设计规范整理一iOS字体和切图及规范 UI设计规范整理一iOS字体和切图及规范

  • Android .9图的问题

    关于点9图的错误 更改办法:在dramble里保存好用.9图制作好的图,后缀名以.9图结尾,在代码里把.9图的后缀...

  • 第七天,学习切图,顺带复习标注

    不忘初心,方得始终!加油,abby!欢迎大家来评论,点赞和鼓励! 切图: 这种切图方式你会吗?简单6步帮UI设计师...

  • Android中的点9切图法

    点9切图法,又名九宫格切图法,是界面开发与屏幕适配不可或缺的一部分。本文简答介绍了点9切图法的使用,完整代码见:点...

  • UI切图命名

    2017-3-04 UI文件命名规范常用字 正常:normal 选中:selected ...

网友评论

      本文标题:【UI】关于点9切图

      本文链接:https://www.haomeiwen.com/subject/gcamyxtx.html