认识达内从这里开始

认真做教育专心促就业

UI设计切图规范（下）

发布：达内培训
来源：互联网
时间：2018-07-20 14:31

    3.图片类切图输出-达内培训负责整理
    图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片.同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用.另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小.
    4.动效元素切图输出
    动效元素切图一般是指在app中加载动效所需要的切图元素,比如qq的下拉加载动效就是由若干张切图连续播放形成的动画效果.这些图片按照序号排序播放我们页把他们叫做序列切图.序列切图是在做UI设计的过程中必然会遇到的问题,这种切图要求要保证动效播放时的流畅自然,是需要设计师仔细斟酌的.
    5.可拉伸元素切图输出
    可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素.这些元素通过瘦身压缩可以极大地见效图片的大小提升用户在使用app中的加载速度.在ios中这种切图方式叫做平铺切图,在安卓中这种切图方式叫做点九切图法.
    6.无需切图的部分
    再设计切图输出中很多元素是不需要输出的,直接使用系统原生的设计元素修改参数即可.作为设计师需要知道哪些元素是需要切图,哪些元素是使用系统自带的避免不必要的切图.比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的.例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可,工程师会根据设计效果通过代码实现这种效果.
    1.点九切图法

点九切图是安卓平台独有的图片处理方式,因为文件扩展名问.png所以被称为点九切图法.点九切图的作用主要是为了适配安卓多种多样的手机机型适配,这种方法可以将图片进行横向和竖向的随意拉伸,并且不会损坏图片效果.另一个重要的作用就是可以减少不必要的图片文件大小,极大提升页面加载速度.是安卓平台重要的切图方法.

达内培训

    制作点九的软件是"DRAW9PATCH"可以很方便的制作点九图并且可以预览切图后的开发效果十分方便.设计师的话也可以在Ps中用铅笔工具绘制点就图.
    详细切图方法网址:#/home/detail?id=96
    2.在线压缩图片工具"Tinypng"
    利用"Tinypng"智能png和jpg在线压缩工具,将较大的图片切图在不影响图片质量的情况下压缩.Tinypng在线压缩工具可以在图片质量和文件大小上找到一个完美的平衡,基本不会降低图片视觉质量但却会极大的压缩图片切图大小.Tinypng是非常值得推荐的图片压缩利器,也是现在被运用最广广泛的在线压缩工具.
    Tinypng网址: #/
    一张透明png图片原大小57kb在经过压缩后变为15kb,图片大小直接减少74%,但是图片效果用肉眼基本分辨不出区别.不得不说Tinypng的智能压缩效果是如此神奇.
    3.恭喜你你已经完成压缩了
    切图神器Cutterman介绍
    Cutterman是现在最主流的设计师切图利器,能够自动将你需要的切图进行输出.极大的减轻了设计师的工作量,提升了切图效率.它支持各种图片格式,尺寸,形态输出, 兼容安卓,iOS,WEB各种系统的一键输出.以下是Cutterman的使用方法简介.
    Cutterman下载网址: #/home/nav?id=6
    1.一键切图,真正解放双手
    Cutterman能够让你只需要点击一个按钮,就自动输出你需要的各种各样的图片,快到没有朋友!
    2.支持IOS平台
    输出支持IOS平台的单倍图、双倍图,支持IPHONE6/6P尺寸比例.
    3.支持Android平台
    输出支持Android平台的各种分辨率大小图片,什么XXHPDI,XHDPI,HDPI啊之类的,通通自动化输出,为你节省出更多的时间陪小伙伴好好玩耍.
    4.支持各种图片格式输出
    什么png、jpg、gif通通不在话下,还可以自己缩放、压缩大小呢.从此,就告别那个所谓的"存储为web所用格式"的功能啦~~
    4.多个图层合并、单独输出
    图层太多?木关系!可以多选嘛!支持选中多个图层合并输出,也可以逐一输出的哦,简直方便到爆!
    5.固定尺寸输出
    想要输出固定尺寸的ICON,多种姿势让你选择,秒秒钟的事情~~
    以上就是达内培训给大家做的内容详解,更多关于IT的学习,请继续关注达内培训

< 上一篇：UI设计切图规范（上）

下一篇：童程童美中国少儿编程节发布：佟大为出席助力中国编程教育 >