提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
桌面图标切图输出
App的桌面图标会被运用在很多不同的地方展示,比如手机桌面、APP store、手机的设置列表,所以app桌面图标需要很多个不同尺寸的切图输出。两个平台对相应桌面图标设计输出尺寸也不尽相同,在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。
一套图适配双平台:
iOS平台(iPhone 6plus版本除外)和安卓平台公用44*44px切图素材,即可实现一套切图适配两个平台的开发。
适配大屏幕:
为了适配iPhone 6plus、iPhone 7plus,单独切一套比原有44*44px切图大1.5倍的切图,即66*66px大小的切图。
图片类切图输出
图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。
同一类型的图片切图,一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大,在切图过程中需要控制切图文件的大小。
全屏切图类:
局部切图类:
空白页提示案例图:
动效元素切图输出:
动效元素切图一般是指在app中加载动效所需要的切图元素,比如QQ 的下拉加载动效就是由若干张切图连续播放形成的。
这些图片按照序号排序播放我们页把他们叫做序列切图。序列切图是在做UI设计的过程中必然会遇到的问题,这种切图要求要保证动效播放时的流畅自然,是需要设计师仔细斟酌的。
序列图切图:
序列图实现效果:
可拉伸元素切图输出
可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。这些元素通过瘦身压缩,可以极大地见效图片的大小提升用户在使用app中的加载速度。在iOS中这种切图方式叫做平铺切图,在安卓中这种切图方式叫做点九切图法。
横向拉伸切图:
竖向拉伸切图:
无需切图的部分
再设计切图输出中很多元素是不需要输出的,直接使用系统原生的设计元素修改参数即可。
作为设计师需要知道哪些元素是需要切图,哪些元素是使用系统自带的避免不必要的切图。比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的。
例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可,工程师会根据设计效果通过代码实现这种效果。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册