前言：用Photoshop做UI设计多年来，让我们困惑的地方在于画板太多的情况下，Photoshop的源文件会非常大，占用电脑的资源的同时会对电脑的配置要求也高，容易卡崩溃。自从Adobe XD的面世，让UI设计师在做APPWEB小程序等的设计时，在没有sketch的情况下，使用Adobe XD，会大大地减少电脑占用的资源和PS源文件过大导致的顿卡问题。下面我们先看看两个相同的源文件在Photoshop和XD中各占的资源大小。
首先是Photoshop：
请看底部左下角的体积大小
这是一套简单的公众号页面，体积高达580MB。
接下来看看页面更多的XD版APP界面：
它的体积变为339kb,没错，是KB。
对于这样的源文件体积大小对比下，用电脑操作起来的顺畅度不是一般的高。Adobe被誉为提高设计5倍效率的工具。但是也不是完全可以代替PS的存在。在做banner和图片合成的时候还是需要依赖Photoshop来完成，目前XD的功能还在不断完善更新中，比如渐变的话，XD里面仅能实现两个颜色的渐变效果，而PS中的渐变效果是多种颜色组合的。
下面详述一些XD在实际UI设计中的基本功能。
1. 图标：
在浏览器中打开https://axhub.im/icons/安装
浏览器会出现A的标识，这时点击一下。
点击iconfont,就会跳转到阿里巴巴图标库。
（以前在使用PS的时候，在阿里取图标，是需要下载png或者AI文件，然后只能修改颜色或者在AI中修改，然后复制到PS中，这是比较麻烦的。当安装了Axhub icons+adobe XD之后，这样的操作会显得简单得多。）
选择一个图标，鼠标移上去：
提示成功后，即可回到XD里面，ctrl+V粘贴了。
图标就会以编组的形状图层的方式出现在画布里。
这时如果不按shift键，修改图标，只会修改图标编组中的图层自适应位置
如果选择图标组并按住shift拖动，就可以把图标的大小进行缩放。
而通过Axhub icons复制过来的图标，既然是一个形状图层的编组，那么我们可以选择形状图层去修改颜色和其他属性。
以上方法使用XD来实现是比PS要方便得多。
2.重复网格：
重复网格的使用有利于列表排版的准确性。
首先我们在XD中新建一个列表并且编组：
然后点击右上角的【重复网格】
当出现绿色线的时候，我们把它拖动下拉。
就会生成列表，这时，如果要单独修改某个项里面的文字位置，就要取消【重复网格】。取消之后会生成多个列表项，也就是编组。
3.重复网格中填充数据。
我们在PS中要填写每一列的假数据，需要一个个地去填充，是非常浪费时间的。这时，我们就要用到XD中重复网格后，利用TXT文件拖进去一下生成所有类真实数据。
https://xd.94xy.com/repeat-grid.html
我选择的是段落，下载到桌面，拖动txt文件到设计稿里面的文字区域
就会一下子填充需要填充的数据。
4. 共享问题
设计稿做完之后，想把交互共享出去，发现出错。
如果一定要用XD去共享，目前解决办法只能通过重新注册一个Adobe账号，地点选外国，年龄18岁以上，才能用的到共享功能。其实习惯使用蓝湖的，也可以上传到蓝湖做交互。
5. 切图
PS的cutterman本地切图我就不多说了，PS的蓝湖切图的话，就要选中图层，点击蓝湖插件中的切图按钮来标注为切图。而XD中上传蓝湖的切图就很简单了。
选中图标或图标组，点击右边的属性栏【添加导出标记】。
然后画布上传到蓝湖，就可以供前端下载图标了。
选中对应的蓝湖项目，利用蓝湖XD桌面软件，选中画布，点击上传，就可以了。
今天XD教程分享到这里，明天继续，如有问题需要咨询，请留言或私信。
来源：暴鬼九剑
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！