对于每一个UI设计师来说,切图是作品即将完成的标志。设计人员需要将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面。很多参加UI设计培训的人在学习基本的软件之后,都会被要求制作对应的项目设计,需要进行切图,今天小编就来给大家分享一下完成切图应该注意的规范。
1、切图资源尺寸必须为双数。切图资源尺寸必须为双数是为了切图资源在工程师开发时是高清显示,如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊,进而造成开发出来的APP界面效果与原设计效果差距甚远。
2、注意可点击区域不小于88px,把相关状态都切图输出。44px的点击区域数值是在320×480px的普通显示屏下制定出来的,在手机分辨率大幅提升的现在,这个数据自然要与时俱进升至88px。切图过程中不仅要输出正常状态的切图,要注意不要遗漏其他状态的切图。
3、图标切图输出应根据标准尺寸输出并且考虑到手机适配。在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。为了适配大分辨率手机图标在切图的时候需要输出@2x和@3x的切图。
4、尽量降低图片文件大小,以提升APP使用速度。图片切图一般情况下文件大小都是相对较大,不利于用户在使用app过程中加载页面。因此图片切图要尽量压缩图片文件的大小。
设计切图输出的目的是跟下游的工程师团队协同工作,因此UI设计师切图时要做到切图、便与协同和压缩大小。千锋郑州UI设计培训课程涵盖手绘基础、C4D三维设计、H5推广页面设计等知识点;大牛讲师全程护航,面对面学科,分阶段授课,多维度把控;采用真实的商业案例学科,秉承实战为王的超强理念,学员可以掌握新颖、热门的专业技术,满足多口径企业需要。