长城上的猫
小编:很多新手设计师听到点9图还是很懵逼,尤其是怎么切点9更是没什么概念~今天小编带大家来看看关于点9图的基本原理以及最重要的怎么操作。好了,话不多说赶紧来学习吧!超级简单!

 

前言

两年前我写了一篇关于点9图的原理科普文,后面说写一篇怎么切气泡框的,但一直迟迟没写,恰逢近期收UI中国邀请写一篇关于点9的知识点,所以加点案例,再梳理一遍!

 

大纲如下:

  • 什么是点九图
  • 点九图的作用是什么
  • 点九图的原理
  • 案例1
  • 案例2
 

1.什么是点9图  

点九图其实就是安卓系统中特有的一种图片格式,为了让大家更好的记住,我们只要知道,后缀名是“.9.png”的图片,就是点九图。

 

 2.点9图的作用是什么

每个事物都有其存在的价值,所以先弄清楚点九图能为我们解决什么问题,这样后面理解起来就会容易很多。
其实点九图的用处就是帮助我们拉伸切图的,比如这个切图:

如果它需要纵向拉伸,直接拉会变成下面这个样子:

而用了点九图就可以让切图局部拉伸,而不是整体拉伸,这样就可以把容易变形的地方保护起来:

是不是拉伸的很完美!有黑线不用怕,那只是告诉安卓系统:“嘿,大兄弟,这是张点九图,特殊对待一下!”

 

3.点9图的原理  

点九图最大的原则就是系统只认#000000的纯黑线或者点,还有就是四个边的四条线,左上两条线掌管可拉伸区域,右下两条线掌管内容显示区:

先说左上两条线,因为两条线原理是一样的,所以我们单独拿左边这条线来举例吧,当我们没有左边那条黑线时,纵向拉伸是这样的:

圆角是不是变形了,如果左边加一条黑线,就相当于把原来的图形分为三个部分:

当再次纵向拉伸的时候,只有标记了黑线的部分可以被拉伸,而上下两部分是完好无损的,想象一下,无论你拉伸到多高,是不是都不会变形了:

当然,你左边画一个点也可以起到相同的效果:

左边这条线是控制纵向拉伸的,所以上面那条黑线就是控制横向拉伸的,原理是一样的!

接下来我们来说右下两条线,是控制内容区域的,单独拿右边那条线来举例,如果没有右边那条黑线,在这个切图上输入内容,比如文字,是没有限制的,内容会撑满整个背景图:

当有了右边那条黑线后,切图相当于在纵向上又被分开了:

而这次是右边有黑线哦,别忘了右边的黑线是控制显示区域的,所以只有带黑线的部分才可以显示内容

当然,文字不会这样被切断一半显示的,这里只是方便大家观看哪里可以显示内容!

同样的原理,当我下面也画一条线后,横向上也是只有带黑线的部分可以显示内容(红线是辅助示意的哈):

这就是点九的基本原理了!

然后有几点需要强调一下:

  • ·每条边画满黑线=没画黑线,就相当于没有起到保护作用。
  • ·黑线或黑点一定是纯黑#000000
  • ·左上两条线控制拉伸区,右下两条线控制内容区。
  • ·输出的图片后缀必须是「.9.png」。

 

4.案例1  

拿最近的一汽比赛为例,找到其中一个界面:

我们来切上面的进度条:

先来分析一下, 首先这个进度条内不会放置文字,所以对于右测和下方就不用管了(因为他们是控制显示内容的),其次这个进度条会发生的情况就是横向拉伸,但是如果我们不用点9,直接横向拉伸,就会导致结果如下:

圆角变形,没有被保护好,所以现在我们就需要利用点9来保护横向拉伸时的圆角,也就是在非圆角处画黑线,所以这个切图样式如下:

这样就可以保证横向拉伸不变形了。

 

5.案例2 

第二个案例就是很久之前答应大家要写的例子了,也是我们平时最常用到点9切图的案例——气泡框。

如下面这个气泡框:

还是先来分析,我们先分析拉伸问题,这个气泡框纵向和横向都需要拉伸,如果直接拉伸,效果如下:

所以我们会发现,气泡框拉伸的时候,不仅要保护圆角,还要保护冒出来的“尖角”,所以在左边和上面画黑线时,一定要把圆角和三角的区域空出来:

这样圆角和小尖角就被保护了。

然后我们来分析内容区域,其实就是绿色为显示区域:

所以把显示区域画上黑线,注意画在下面和右面哦,因为右侧和下侧是掌管显示区域的,最后切图如下:

好了,以上就是目前对于点9的总结啦。

最后友情提醒下,对于新手,分析怎么切点9的时候,一定要把“拉伸”和“显示”两个分开来思考,这样可以保证思路清晰,不容易混乱。

 

原文地址:菜心设计铺(公众号)

作者:菜心设计铺

转载请注明:学UI网 » 这篇“点9”文,欠大家两年了!

登录收藏
 
你可能喜欢的:
深耕“用户界面”(上篇)- 界面表现层自查深耕“用户界面”(上篇)- 界面表现层自查
设计前必须和客户确认的20个问题设计前必须和客户确认的20个问题
PRD分享:「网易云音乐-登录/注册模块」产品需求文档PRD分享:「网易云音乐-登录/注册模块」产品需求文档
行为召唤:终极生存指南行为召唤:终极生存指南
触摸键盘的设计解析 | 智能化工具产品触摸键盘的设计解析 | 智能化工具产品
这4个配色技巧,解决你80%色彩问题这4个配色技巧,解决你80%色彩问题
十万个为什么设计系列02-内容个性化十万个为什么设计系列02-内容个性化
腾讯动漫8.0——用户为本腾讯动漫8.0——用户为本
苹果绝对不会告诉你表单设计原则:我研究3年后才发现苹果绝对不会告诉你表单设计原则:我研究3年后才发现
从4款主流产品中掌握登录注册流程从4款主流产品中掌握登录注册流程