济南IT培训 > 达内新闻
全面的UI设计切图规范指南你值得拥有
- 发布:互联网
- 来源:互联网
- 时间:2017-04-25 16:30
设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言.合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果.
如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力.
设计切图的原则
设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求.
其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量.济南IT培训
最后,输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度.所以切图输出应当做到切图精准、便与协同和压缩大小.
1. 切图资源尺寸必须为双数
众所周知,智能手机的屏幕大小都是双数值,比如iPhone 7的屏幕分辨率是750*1334 px.切图资源尺寸必须为双数,是为了保证切图资源在工程师开发时是高清显示.因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份.
所以如果是单数切图的话,手机系统就会自动拉伸切图,从而导致切图元素边缘模糊,造成开发出来的APP界面效果与原设计效果差距甚远.
2. 图标切图输出应根据标准尺寸输出,并且考虑手机适配(主要是iPhone 6plus的适配)
在切图资源输出中,图标切图输出是至关重要的部分.在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配.济南IT培训
为了适配大分辨率手机(例如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)普通显示屏下制定出来的,在手机分辨率大幅提升的现在,这个数据自然要与时俱进.济南IT培训
在iPhone7 (750*1334px)的Retina 显示屏下44px点击区域就变为了88px.但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px,换算成物理尺寸后大致是在7mm-9mm之间.
早在人机工程学的研究中曾得出结论,认为人类舒适的触击范围需在7-9mm的大小.所以在iOS官方的空间尺寸也经常出现88px的数值,比如菜单栏的高度便是88px.
5. 可点击部件要把相关状态都切图输出,比如正常状态、点击状态.
在切图过程中,不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图.这个也是设计师经常会出现的失误,比如在按钮切图的过程中可能会忽略点击切图的状态.所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来,避免后期切图的时候遗漏状态.
更多济南IT培训相关资讯,请扫描下方二维码

最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
全面的UI设计切图规范指南你值得拥有
- 发布:互联网
- 来源:互联网
- 时间:2017-04-25 16:30
设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言.合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果.
如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力.
设计切图的原则
设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求.
其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量.济南IT培训
最后,输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度.所以切图输出应当做到切图精准、便与协同和压缩大小.
1. 切图资源尺寸必须为双数
众所周知,智能手机的屏幕大小都是双数值,比如iPhone 7的屏幕分辨率是750*1334 px.切图资源尺寸必须为双数,是为了保证切图资源在工程师开发时是高清显示.因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份.
所以如果是单数切图的话,手机系统就会自动拉伸切图,从而导致切图元素边缘模糊,造成开发出来的APP界面效果与原设计效果差距甚远.
2. 图标切图输出应根据标准尺寸输出,并且考虑手机适配(主要是iPhone 6plus的适配)
在切图资源输出中,图标切图输出是至关重要的部分.在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配.济南IT培训
为了适配大分辨率手机(例如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)普通显示屏下制定出来的,在手机分辨率大幅提升的现在,这个数据自然要与时俱进.济南IT培训
在iPhone7 (750*1334px)的Retina 显示屏下44px点击区域就变为了88px.但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px,换算成物理尺寸后大致是在7mm-9mm之间.
早在人机工程学的研究中曾得出结论,认为人类舒适的触击范围需在7-9mm的大小.所以在iOS官方的空间尺寸也经常出现88px的数值,比如菜单栏的高度便是88px.
5. 可点击部件要把相关状态都切图输出,比如正常状态、点击状态.
在切图过程中,不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图.这个也是设计师经常会出现的失误,比如在按钮切图的过程中可能会忽略点击切图的状态.所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来,避免后期切图的时候遗漏状态.
更多济南IT培训相关资讯,请扫描下方二维码

最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 厦门
- 哈尔滨
- 济南
- 福州
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 大连
- 长沙
- 昆明
- 温州
- 太原
- 南昌
- 无锡
- 石家庄
- 南宁
- 中山
- 兰州
- 佛山
- 珠海
- 宁波
- 贵阳
- 保定
- 呼和浩特
- 东莞
- 洛阳
- 潍坊
- 烟台
- 运城