智能手机屏幕大小都是双数值,例如iPhone7的屏幕分辨率为750×1334px。为了以为保证工程师在开发时切图资源高清显示,切图资源的尺寸必须为双数。智能手机能识别的最小单位为1px,1px在智能手机中不能被分为两份,所以如果为单数切图的话,手机系统会自动拉伸切图从而导致切图元素边缘模糊,造成开发出来的APP界面效果与原稿效果差距甚远。
二、图标切图输出应根据标准尺寸输出且考虑手机适配
在切图资源输出中,图标切图输出是非常重要的一个部分。在开发中,各机型的屏幕分辨率都不一样,这就需要我们针对一些大屏机型进行适配。
为了适配大分辨率手机,例如iPhone7plus,在切图时,图标需要输出@2x和@3x的切图,其中@2x的切图能满足双平台大部分机型的适配要求,@3x是用来适配iPhone手机的各种plus版本的手机。
@3x是@2x尺寸的1.5倍,比如一个图标切图@2x尺寸为44px,那么@3x尺寸是66px。
三、尽量降低图片文件大小,提升APP使用速度
图片切图通常情况下,文件大小都是相对较大的,不利于用于在使用APP过程中加载页面。所以尽量压缩图片文件大小。
四、可点击部件应当注意其点击区域不小于88px
在iPhone3(320×480px)普通显示屏下,制定了点击区域数值为44px;在iPhone7(750×1334px)的Retina显示屏下点击区域变成了88px;不管是320×480px尺寸下的44px,还是750×1344px尺寸下的88px,换算成物理尺寸后大致在7mm-9mm之间。
早在人机工程学研究中得出结论,认为人类舒适的触及范围需要在7-9mm,所以iOS官方空间尺寸经常是88px的数值,例如菜单栏的高度就是88px。
在切图时,不能只输出正常状态,还要注意不能遗漏其他状态的切图。这个也是新人经常会出现的失误。
切图输出类型
1、桌面图标切图输出
APP的桌面图标会在不同地方展示,例如:手机桌面、appstore、手机设置列表,所以APP桌面图标要有多种不同尺寸的切图输出。
两个平台对应桌面图标设计输出尺寸也不一样,在输出时要将双平台的尺寸全部输出切图。桌面图标切图只要提供直角的图标切图,手机系统会自动生成圆角效果。
系统图标切图输出
一套图适配双平台
iOS平台(iPhone6plus除外)与安卓平台公用44×44px切图素材,即可实现一套切图适配两个平台开发。
适配大屏幕
为了适配iPhone6plus、iPhone7plus,需要单独切一套比原有44×44px大1.5倍的切图,即66×66px大小的切图。
图片类切图输出
同一类的图片切图,通常要保持同样大小尺寸便于工程师开发使用。另外一般这些切图文件大小,在切图过程中要控制切图文件的大小。
局部切图类:
全屏切图:
空白页提示:
动效元素切图输出
这些图片按序号排列播放称为序列切图。序列切图是在做UI设计过程中一定会遇到的,要保证动效播放时的流畅自然。
序列图切图:
序列图实现效果:
可拉伸元素切图输出
通常指输入框、按钮等切图过程中能对切图进行瘦身压缩的元素。这些元素通过瘦身压缩,能极大有效的提升用户在使用APP加载速度。在iOS中这种方式被称为平铺切图,在安卓中叫做点九切图法。
竖向拉伸切图:
横向拉伸切图:
无需切图部分
在设计切图输出时,有很多元素可以直接使用系统原生的设计元素修改参数即可,不需要进行输出。
所以你需要知道哪些是需要切图,哪些可以使用系统自带的元素。例如:卡片背景、线条、文字以及一些标准的集合图形是不需要提供切图的。
比如搜索框,你只需要标注尺寸大小、圆角大小、色值、描边粗细,开发就能通过代码实现。
降低切图大小的方法
1、点九切图法
点九切图是安卓平台独有的图片处理方式,因为文件扩展名为.png所以被称为点九切图法。点九切图的作用主要是为了适配安卓多种多样的手机机型适配,这种方法可以将图片进行横向和竖向的随意拉伸,并且不会损坏图片效果。另一个重要的作用就是可以减少不必要的图片文件大小,极大提升页面加载速度。是安卓平台重要的切图方法。
制作点九的软件是“DRAW9PATCH”可以很方便的制作点九图并且可以预览切图后的开发效果十分方便。设计师的话也可以在PS中用铅笔工具绘制点就图。
例如:横向拉伸只需要在可拉伸区内做黑色标记,外围投影标记黑色线即可:
横向竖向拉伸只要在可拉伸区域内做黑色标记即可,外围投影标记黑色线:
Tingpng
利用“Tinypng”智能png和jpg在线压缩工具,将较大的图片切图在不影响图片质量的情况下压缩。Tinypng在线压缩工具可以在图片质量和文件大小上找到一个完美的平衡,基本不会降低图片视觉质量但却会极大的压缩图片切图大小。Tinypng是非常值得推荐的图片压缩利器,也是现在被运用最广广泛的在线压缩工具。
一张透明png图片原大小57kb在经过压缩后变为15kb,图片大小直接减少74%,但是图片效果用肉眼基本分辨不出区别。不得不说Tinypng的智能压缩效果是如此神奇。
使用方法简述
1、在红色框内点击去本地选择你想要压缩的图片文件,每次最多上传20张图片,每张图片总大小不超过5mb
2、点击红框内的下载按钮下载单个已经压缩过的图片,如果你有上传多张图片你可以选择点击全部下载按钮一次性下载所有压缩的图片。在下方现实的是本次压缩的大小占比,你就可以很明确的知道它的作用了。
3.恭喜,你已经完成压缩了。
Cutterman是现在最主流的设计师切图利器,能够自动将你需要的切图进行输出。极大的减轻了设计师的工作量,提升了切图效率。它支持各种图片格式、尺寸、形态输出,兼容安卓、iOS、WEB各种系统的一键输出。以下是Cutterman的使用方法简介。
Cutterman能够让你只需要点击一个按钮,就自动输出你需要的各种各样的图片,快到没有朋友!
2.支持iOS平台
输出支持IOS平台的单倍图、双倍图,支持iPhone6/6P尺寸比例。
3.支持Android平台
3.支持各种图片格式输出
什么png、jpg、gif通通不在话下,还可以自己缩放、压缩大小呢。从此,就告别那个所谓的“存储为web所用格式”的功能啦~~
4.多个图层合并、单独输出
图层太多?木关系!可以多选嘛!支持选中多个图层合并输出,也可以逐一输出的哦,简直方便到爆!
5.固定尺寸输出
想要输出固定尺寸的ICON,多种姿势让你选择,秒秒钟的事情~~