全国咨询热线:

0371-65852003

郑州UI设计培训班介绍UI设计切图原则

发布日期:2020/02/06 17:43:08 浏览次数:67

    切图是设计师在完成视觉设计,设计稿定稿后,将视觉稿切成一张张小块图片给前端工程师实现页面的工作流程。下面红狐郑州UI设计培训班小编就为大家介绍一下设计切图的原则:


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


    众所周知智能手机的屏幕大小都是双数值,比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊,进而造成开发出来的APP界面效果与原设计效果差距甚远。


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


    在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。为了适配大分辨率手机(例如iphone 7plus)图标在切图的时候需要输出@2x和@3x的切图,其中@2x的切图可以满足双平台大部分机型的适配要求,@3x是用来适配iphone手机的各种plus版本的手机(后边会有文章专门讲解关于适配的问题)。@3x是@2x尺寸的1.5倍,例如一个图标切图@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.可点击部件要把相关状态都切图输出,比如正常状态、点击状态。


    在切图过程中不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图。这个也是设计师经常会出现的失误,比如在按钮切图的过程中可能会忽略点击切图的状态。所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来,避免后期切图的时候遗漏状态。


    红狐企业网通过完善的服务体系全面帮助企业迅速推行客户战略,我们的产品及服务定位于中国企业的互联网+应用。通过我们多年对企业信息化开发及应用服务的经验,我们已在互联网研究、设计、推广、市场营销、咨询服务等方面都具有卓越能力。现红狐推出了郑州UI设计培训班,面向全国招生,可以让学员边工作边学习,毕业既有工作经验。各位想要参加培训的学生可以直接拨打公司客服电话报名哦!



  1. 上一篇:郑州UI设计培训班介绍UI中的基本动效
  2. 下一篇:郑州UI设计培训班介绍基本的APP界面类型

红狐企业网-专注于IT行业服务教育—您成功路上的垫脚石!

15年企业IT行业服务,值得信赖/15 years of enterprise IT industry service, trustworthy

河南省郑州市金水区农业路东1号(豫博大厦西塔511室)

0371-65852003/66110309 13526898517

123434446@qq.com

扫一扫加关注,获得更多资讯

Copyright©2018-2019 红狐企业网IT培训中心 www.xxxxxxx.edu.cn 版权所有 All Rights Reserved 豫ICP备16004903号-5