小技巧!如何使用切图。


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

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

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

  应尽可能压缩最终输出切割图像,以减小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.可点击部件要把相关状态都切图输出,比如正常状态、点击状态。

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

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

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