【UI】关于点9切图

什么是点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使用起来更加方便,具体使用方法将以一个例子进行说明。如下......



实例详解


以聊天背景为例,如下图



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


以上......

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近很多人在微信群问我点9图怎么切的问题,今天u妹把工作中积累的关于点9切图的经验分享给大家,希望大家可以掌握这些...
    UI严选设计阅读 19,142评论 3 64
  • 本文以微信社交对话框为例进行说明如何切点九图,其原则如下: 1.保留对话框周边四个圆角; 2.保留对话框右边的指向...
    monica_jia阅读 30,303评论 7 20
  • 声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,我写的...
    白屏阅读 9,524评论 20 100
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,295评论 4 61
  • 1.倒计时按钮封装 使用场景:注册1页点击获取验证码按钮,push到注册2页。界面如下“注册2-1页”所示,导航栏...
    WeiHing阅读 1,009评论 2 4