Adobe XD是Adobe家族当中的一款UI/UX设计软件。
我们能够利用它绘制出我们产品的UI模型。
Adobe XD的安装
与Sketch(另一款UI设计软件)不同的是,Adobe XD支持Mac和Win双平台。
但AdobeXD对于系统有着较高的要求:Windows 10 1703(内部版本 10.0.15063)或更高版本macOS 10.12 或更高版本
并且只能通过Adobe Creative Cloud进行软件安装,没有exe的安装包。
初识XD
打开Adobe XD之后,我们能够选择新建的大小,以及打开最近的项目。
我们看到左侧,有「附加设备」,通过其我们就能下载到:插件、组件库等等(基本上大厂的组件库都能下载到)
在接下来的内容中我们着重讲一下XD当中的特色功能。
重复网格
XD中的重复网格能做出我们软件中常用的ListView(列表)效果。
点击页面右上角的重复网格,进行形状上下左右拖动,即可完成重复效果。
我们可以直接拖入txt文件 / 多张图片文件,一键修改众多内容。
效果:
响应式调整大小
在XD当中有响应式布局,它能帮助我们自动调整图片的宽度,一般会开成自动的,这样能防止图片被拉伸。
资源
资源库能够集中管理项目中的资源,并能在项目中重复使用(屏幕左下方)
Ps:组件直接拖就可以使用了。
原型
通过原型,我们能够添加各种点击事件,并且能够设置动画。
通过右侧可以修改动画。
在这里推荐一下「酸梅干超人」在知乎上的回答/question/279726706/answer/579351762
在里面大家能够直观地看到XD原型中各式各样的动画效果。
导出
点击左上角的「汉堡按钮」-「导出」就能对文件进行导出
在这里我们选的是「所有画板」,在对话框中我们可以根据自己的需求来进行进行切图工作。