热线电话
13321960829

Website News

网站建设相关文章资讯

您现在的位置:
主页 建站资讯 网站设计百科
UI设计切图注意事项
发布时间:2018-03-06 09:07
   切好图是为了和程序员更好的合作,一个合格的UI设计师,在切图方面应该注意哪些问题呢?

   1.尽量降低图片文件大小,让APP运行速度加快
 
       切图直接影响APP的运行速度,例如,引导页,启动页,广告图......类似这些图片较大的情况下,切图保存的时候尽量压缩一下,图片太大,APP运行速度就慢。

     2.可点击部件应当注意其点击区域不小于88px
 
    如今移动设备尺寸越来越大,手机分辨率大幅提升,iphone7(750*1334)的显示屏下可点击区域变为88px.人机工程学的研究中曾得出结论,认为人类舒适的触击范围需在7-9mm的大小.所以,在IOS官方出现常规88px。菜单栏的高度也都是88px.
    
     3.切图资源尺寸必须为双数
 
     为什么不能为单数,大家可能都不是很了解,只知道这个理。最简单的理解方法就是,1px不能在手机上被分为2份。手机屏幕大小都是双数值。为了保证图片的高清显示,所以当为单数值时,图会被拉伸,不平均,当然会图片模糊,就会影响APP整体效果。


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

    开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。为了适配大分辨率手机(例如iphone 6plus)图标在切图的时候需要输出@2x和@3x的切图,其中@2x的切图可以满足双平台大部分机型的适配要求,@3x是用来适配iphone手机的各种plus版本的手机@3x是@2x尺寸的1.5倍,例如一个图标切图@2x尺寸是44px,那么@3x尺寸是66px。

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


 下面给大家介绍一款切图神器。Cutterman,大家可以直接去官网下载,免费的。

 1.一键切图,真正解放双手
 
Cutterman能够让你只需要点击一个按钮,就自动输出你需要的各种各样的图片,快到没有朋友!





2.支持IOS平台
 
输出支持IOS平台的单倍图、双倍图,支持IPHONE6/6P尺寸比例。





3.支持Android平台
 
输出支持Android平台的各种分辨率大小图片,什么XXHPDI,XHDPI,HDPI啊之类的,通通自动化输出,是不是很方便,很快捷?



 
4.支持各种图片格式输出
 
什么png、jpg、gif通通不在话下,还可以自己缩放、压缩大小呢。



5.多个图层合并、单独输出
 
图层太多,也可以合并,一个一个输出,太方便了。



6.固定尺寸输出
 
想要输出固定尺寸的ICON,也可以做到哦。







好啦!分享是一种美德。以后还有更多神器以及知识点和大家一起分享。一起成长!
 

相关文章

    暂无相关文章

友情链接:上海网站建设公司 | 上海电商开发 |