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

2022-08-14 分类：网站建设

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

一：什么是切图？

切图就是把一张大界面里小元素单独保存成小图的过程。

这张大界面需要动动刀

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

第二：UI设计师为什么要切图？

单纯靠代码实现不了

UI设计师的产出物只是普通的图片或者是PSD，是用于观看预览的演示稿设计稿，真正的APP应用还必须通过代码的编写，数据的储存和系统的配合才能完成，所以界面的元素都需要通过代码写入实现。

但是有些内容是代码也实现不了的，例如设计师设计的图标，背景图片等等，这些就需要通过图片的方式存在，所以设计师要把这些内容切成一张张的小图，给到程序进行代码的制作。

（代码实现不了的图标）

需要适配不同的屏幕

目前手机市场设备种类繁多，即使是iPhone也有3种不同的屏幕分辨率，这就要求了同样的界面元素需要有不同的尺寸。

第三：如何切图？

一种是利用PS自身的切图功能，“导出为”（这个功能只有更新到PS最新版本才有）在想要切出来的图层或者图层组上，选中并右键，会有一个导出为，点击导出为就可以看到下面的界面。

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

按上面的参数可知，直接可以切除安卓、苹果和pc端的尺寸，下面可以设置画布大小，选择需要的分辨率，然后在导出之前需要先选择导出的位置，之后直接单击导出选中图层按设置键，按照自己设计出来的界面尺寸，填写参数即可。

第四：切图的技巧

切图的时候并不是直接把小图保存就可以了，其中还有些小技巧，能够帮助程序猿更方便地进行页面编写：

1.相同位置相同功能的图标尺寸应该保持一致

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

第五：如何标注？

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

标注软件——markman

步骤：

打开马克鳗，会要求我们先拖进一张图片，如下图：

拖进一张图，我们即可看到下面图中红色框的小图标，再进行操作。

选择标图工具，比如一个长度标记，找到想要标出的位置，然后按住鼠标并拖动到自己想要的位置，就能得到想要的间距了，选择颜色标记工具，在想标记的位置直接单击，就会出现颜色值，还有一些不能标出的，可以用说明工具去单击，然后直接手动输入即可。

利用标注插件——Assistor PS

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容