小技巧!如何使用切图。

2019.06.28

920

设计切出输出的目的是与下游工程师团队合作。

然后在团队合作过程中,首先应确保切出的输出符合工程师设计效果图的高保真恢复要求。

其次,切断输出应尽可能减少工程师的开发工作量,避免切断输出造成的不必要的工作量。

应尽可能压缩最终输出切割图像,以减小APP的总大小,并在用户使用时提高加载速度。

因此,切出输出应该准确,方便和压缩。

1.切图资源尺寸必须为双数

众所周知,智能手机的屏幕尺寸是双倍的值。例如,iphone 7的屏幕分辨率为750 * 1334px。

切出资源的大小必须加倍,以确保在工程师的开发过程中切出的资源以高清晰度显示。因为1px是智能手机可以识别的最小单位,换句话说,智能手机上不能将1个像素分成两个像素。

因此,如果是单切,手机系统将自动拉伸切割图像,这将导致切割图像的边缘模糊,这将导致开发的APP界面效果远离原始设计效果。

2.图标切图输出应根据标准尺寸输出并且考虑到手机适配(主要是iPhone 6plus的适配)

图标切出输出是切出资源输出的重要部分。

因为在开发过程中由于每个型号的屏幕分辨率不同,所以有必要适应一些大屏幕的机型。

为了在剪切图中调整大分辨率手机(如iphone 7plus)图标,需要输出@ 2x和 @ 3x的剪切图,

@ 2x的切割表可以满足双平台大多数型号的适应性要求,@ 3x用于调整iPhone手机的各种加号版本(稍后会有关于改编问题的文章)。

@ 3x是@ 2x尺寸的倍数,例如图标切割图@ 2x尺寸是44px,然后@ 3x尺寸是66px。

3.为了提升APP使用速度,尽量降低图片文件大小

图标剪切输出是剪切资源输出中非常重要的部分,例如新手指南页面,启动页面,默认地图,广告地图等。

在图片剪切的情况下,文件大小相对较大,这不利于用户在使用app的过程中加载页面。

因此,图像剪切图应该尝试压缩图像文件的大小(文本压缩的方法将在本文后面详细说明)。

4.可点击部件应当注意其点击区域不小于88px

44px的单击区域值基于iphone 3(320×480px)通用显示器。现在,当手机的分辨率大大提高时,这些数据自然需要与时俱进。

在iphone7(750 * 1334px)Retina显示屏中,44px命中区域变为88px。但无论是320 * 480px尺寸下的44px还是750 * 1334px尺寸下的88px,转换成物理尺寸后大致在7mm-9mm之间。

早在人体工程学的研究中,人们就得出结论,人类舒适的中风范围需要为7-9mm。

因此,ios的官方空间大小也经常出现88px的值,比如菜单栏的高度是88px。

5.可点击部件要把相关状态都切图输出,比如正常状态、点击状态。

在切割过程中,不仅应省略正常状态的切割图,还应省略其他状态的切割表。

这也是设计师经常犯的错误。例如,在按钮切割过程中,可以忽略点击和切割的状态。

因此,设计师最好使用设计图来显示页面中出现的各种状态,以避免在地图稍后时遗漏状态。


最新案例

联系电话 400-6065-301

微信咨询 寒总监