Adobe XD从入门到精通(上)

Adobe XD是一款免费的轻量级的原型制作软件,功能大致分为“设计”(静态界面设计)和“原型”(实现动态交互),他最大的优点是快速制作和展示。目前来看虽然和其他交互专业的原型制作软件相比它的功能比较有限,但是满足基本的操作是没问题的,如果想要制作出复杂的交互原型需要和Ai,Ps配合使用。这篇文章马克笔设计留学的MUzi老师主要介绍 “设计”部分的功能使用

首先双手奉上Adobe爸爸官方的快捷键大全。

XD在兼容这一块非常友好,可以兼容Ps,Ai,Sketch,Zeplin,Protopie文件。

但是这里要注意的是如果直接将文件拖入XD是没有反应的,正确的打开方式为选中元素在软件中复制Cmd+C / Ctrl+C,然后进入XD中黏贴Cmd+V / Ctrl+V。


XD中的矩形和椭圆是比较简单的功能,矩形圆角可以每个角分别设置圆度,如图:


XD的直线工具提供对直线的粗细,端点,描边方式的设置。端点有平头、端点圆头端点和矩形端点;描边方式有中心描边,外部描边和内部描边。

此外还有虚线设置选项,可以设置虚线的密度(在XD中叫做虚线)和间隙。


XD的钢笔工具比较基础,可以用来绘制简单的图案和icon,需要注意的是XD没有描点选择工具,需要双击路径后才能编辑。


XD的文本工具可以说是简单好用,简单是说它的字符面板非常简单,相比Ai中的字符面板,只能设置字符间距,行距,段落间距;好用是指段落文本可以随时在点文本和区域文本之间随时切换。


画板工具,快捷键A。选中画板工具后点击空白处即可新建画板,也可以选中已有画板复制黏贴。

每个画板的名字可以通过双击来修改,单击画板名称或者全选画板可以拖动画板。

是XD独有的功能,它是用来横向或纵向复制内容的工具,一般用来填充制作列表,卡片类的页面。此外还可以拖动调整填充的间距。


XD中的剪切蒙版共有两种方法,第一种是全选图片和图形,右键选择创建剪切蒙版,或者使用快捷键cmd+shift+M / ctrl+shift+M。这种方法创建的剪切蒙版不保留图案的边框,可以修改可以撤销。

第二种方法是直接将图片拖进图形中,这种方法得到的剪切蒙版会保留图形的边框,需要手动去除,可以编辑但是不能撤销。

XD的模糊工具有两种选项,背景模糊和对象模糊。其中背景模糊是将图片或图案变成一个遮罩,作用于它下面的图片,相当于制作一个毛玻璃用来罩在图片上。

对象模糊是直接对图片进行模糊,类似于Ps中的高斯模糊。

XD中提供了贴心的网格工具,分为方形网格和版面网格两种。

方形网格工具可以定义方格的大小和方格的颜色。

版面网格工具可以设置列数间距,列宽和颜色,是一个可以极大提高效率的工具。

文章作者:MUzi
南安普敦大学交互设计硕士
擅长交互设计与用户体验相关专业辅导和课程知识体系建立

任何关于院校和作品集的问题
欢迎随时和马克君沟通
知无不言,言无不尽

欢迎关注公众号:马克笔设计留学,更多院校信息以及作品集攻略都在这里哦!

Join the discussion One Comment

Leave a Reply