UI 工作流程指南:切图标注
返回本版】  【发表帖子】  【回复帖子 浏览量  1515      回帖数 0
lanlan123    等级  

楼主 发表于  2019/9/28 9:25:28    编 辑   

当界面设计定稿之后,设计师需要对图标进行切片,提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求,直接影响到工程师对设计效果的还原度,并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图,起到事半功倍的效果。
通常我们只需要对 icon 与图片进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。
切图基本规范
1.切图的尺寸必须为偶数;
2.同一模块内,切图大小应保持一致;
3.如果有背景,尽量用平铺的背景图案来设计(减少程序体积);
4.可点击的部件要把相关状态都切图输出,比如:正常状态、点击状态、不可点击状态;
5.输出的切图应当尽可能的压缩大小,以降低 APP 的总大小,提升用户使用时的加载速度;
6.所有的变形字体把它当成 icon 来切;
7.切图输出格式:png-24;
8.重复的东西只切一个。
切图输出类型
1.图标切图输出
桌面图标切图输出
App 的桌面图标会被运用在很多不同的地方,比如手机桌面、APP store、手机的设置列表,所以 app 桌面图标需要很多个不同尺寸的切图输出。两个平台对应的桌面图标设计输出尺寸也不尽相同,在输出的时候要把双平台的尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。
系统图标切图输出
一套图适配双平台:iOS平台(iPhone 6plus版本除外)和安卓平台公用 44*44px 切图素材,即可实现一套切图适配两个平台的开发。
APP内功能图标
图标是可以有留白区域的,建议图标尺寸尽量不要过多。
2. 图片类切图输出
图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的尺寸大小,以便于工程师开发使用。另外一般这些切图的文件较大,在切图过程中需要控制切图文件的大小。
局部类切图
3. 动效元素切图
动效元素切图一般是指在 app 中加载动效所需要的切图元素。
gif 动图切图一般分为三种:
一是只需要给到 gif 图动效的部分即可。
二是,导出序列图片压缩打包给开发人员。
三是导出 json 。
关于竞品分析,设计师会转载或原创一篇自己欣赏的文章,更多文章就在蓝蓝设计每日一贴。您可以直接联系优秀的软件ui设计提供者北京蓝蓝设计,北京蓝蓝设计为您提供最好的设计服务。
欢迎访问,开始愉快的合作!
网站:www.lanlanwork.com
全国统一客服热线:400-608-6026
公司邮箱:weibaobei@163.com 
1
表情
所有内容均为会员自愿发表,并不代表本站立场.