服务热线:18609840880

建站知识

建站知识

您当前位置:首页 > 建站知识

为什么说UI设计师有一把手术刀?

发布时间:2018-10-11

 现在的手机有不同的型号,同时也有不同的屏幕分辨率。比方上图中不同分辨率的手机需要不同大小的图标设计,所以就需要切图。把同一个图标为了能在不同型号的手机上清晰的显示出来,就需要切成不同尺寸和分辨率的图标,这个就是切图的原因。

 
先进:什么是切图?
切图就是把一张大界面里小元素单独保存成小图的过程。

这张大界面需要动动刀

把图标切成不同尺寸单独保存

 
第二:UI设计师为什么要切图?
 
单纯靠代码实现不了
UI设计师的产出物只是普通的图片或者是PSD,是用于观看预览的演示稿设计稿,真正的APP应用还必须通过代码的编写,数据的储存和系统的配合才能完成,所以界面的元素都需要通过代码写入实现。
 
但是有些内容是代码也实现不了的,例如设计师设计的图标,背景图片等等,这些就需要通过图片的方式存在,所以设计师要把这些内容切成一张张的小图,给到程序进行代码的制作。

(代码实现不了的图标)
 
需要适配不同的屏幕
目前手机市场设备种类繁多,即使是iPhone也有3种不同的屏幕分辨率,这就要求了同样的界面元素需要有不同的尺寸。

第三:如何切图?
 
先进种是利用PS自身的切图功能,“导出为”(这个功能只有更新到PS新版本才有)在想要切出来的图层或者图层组上,选中并右键,会有一个导出为,点击导出为就可以看到下面的界面。

第二种利用PS插件cutterman,直接安装在PS里面,然后在窗口-拓展功能里面可以找到,界面如下:

按上面的参数可知,直接可以切除安卓、苹果和pc端的尺寸,下面可以设置画布大小,选择需要的分辨率,然后在导出之前需要先选择导出的位置,之后直接单击导出选中图层按设置键,按照自己设计出来的界面尺寸,填写参数即可。
 
第四:切图的技巧
 
切图的时候并不是直接把小图保存就可以了,其中还有些小技巧,能够帮助程序猿更方便地进行页面编写:
 
1.相同位置相同功能的图标尺寸应该保持一致

2.保证图标的可点击区域大小

第五:如何标注?
标注也有相应的方法,傻瓜的就是在元素旁边写上需要标注的信息,但是这种方法又慢又麻烦,页面多起来还会让设计师崩溃,所以我们又要用插件了:
 
标注软件——markman

步骤:
打开马克鳗,会要求我们先拖进一张图片,如下图:

拖进一张图,我们即可看到下面图中红色框的小图标,再进行操作。
 
选择标图工具,比如先进个长度标记,找到想要标出的位置,然后按住鼠标并拖动到自己想要的位置,就能得到想要的间距了,选择颜色标记工具,在想标记的位置直接单击,就会出现颜色值,还有一些不能标出的,可以用说明工具去单击,然后直接手动输入即可。

利用标注插件——Assistor PS


大连新图闻科技有限公司是一家品牌设计服务提供商,企业网络服务品牌,也是企业邮箱“盈世”的大连地区代理商。公司服务项目包括网站建设、平面设计、网络营销推广、商业摄影、企业邮箱等,帮助客户提高企业综合竞争能力。

18609840880(微信同步)

市场部 : 8001@newtwowin.com
业务联系,业务需求请发到此邮箱.

QQ咨询: 94091176
客服部:xxz@newtwowin.com
地址:大连市西安路罗斯福B座3109