Adobe XD 高效设计技巧总结
越来越多的设计师开始放弃photoshop而选择Adobe xd,本文总结汇总了Adobe XD的冷门但高效的操作技巧,希望能帮助到大家
Adobe XD是一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是一款结合设计与建立原型功能,并同时提供工业级性能的跨平台设计产品。设计师使用Adobe XD可以高效准确的完成静态编译或者框架图到交互原型的转变。
对于本人来说,Adobe XD相比Photoshop的三大优点:
一个文件多画布
一个项目通常情况下都有很多页面,一旦需要修改某项内容、将设计稿导出成图片、切图、预览等,在Photoshop里,都需要一张张打开,然后进行相应操作,而且多数情况下,Photoshop同时打开多个文件时,软件便会卡死。然而,Adobe XD一个文件就包含了本项目的所有画板,所有设计稿一目了然。而且可以直接设置交付逻辑,并预览。

重复网格
重复网格功能,相信所有用过Aodbe XD的都深受其益。然后再配合txt文本以及图片一起使用的让设计师的效率简直是质的飞跃。
资源
资源这个功能就有点类似PPT或Axure里面的母版,只要修母版内容便可以同步修改所有被引用处。只是Adobe XD里的资源可以细到文字、颜色,也可以大到组件甚至子页面等。
以上功能在Adobe XD官网都能找到详细的视频演示,此处就不再重复累赘,本文主要收集汇总了一些比较冷门但非常实用的操作技巧。
(一)常用快捷键
说到高效操作技巧,当然首当其冲的就是软件的快捷键,经常用到的快捷键如下:

更详细的快捷键请查看官网发布的:
https://helpx.adobe.com/cn/xd/help/keyboard-shortcuts.html
(二)修改重复网格中的单个元素其他元素不重复
如上所述,网格是Adobe XD一大功能亮点,相信大部分设计师都惊叹过这个功能的便捷,然而,大家是否遇到这样的场景:使用网格创建列表时,需要修改其中某些列表的局部样式,但是大部分样式均保持一致的情况?如下左图中,需要将前3名的数字编号的背景色块加以区分,而其他样式均保持一致。

可能多数设计师的做法是:先取消重复网格--》修改个别样式。但是这样一来,如果后期需要对整个列表进行统一的样式调整,就需要全部重新创建重复网格。笔者曾经就是这么操作,直到无意中发现了可以将重复网格中的其中一个元素设置为其他元素的父级,则其他元素便可以随意修改样式,如果需要修改所有列表样式,只需要修改这个父级样式,具体操作如下:

(三) 通过“ctrl+shift”跨组连续选择多个元素
当我们在未创建资源的情况下,想修改如下红色框内的所有标题样式时,想一次选中所有标题然后进行样式调整,但因为所有标题都与各自模块内容进行了分组,此时就没法一次性同时选中所有标题,只能一个个修改,或者解除所有分组后,同时选择,修改完后再重新编组,这样的效率是非常低下的。
其实,我们可以通过“ctrl+shift”来实现跨组选择元素。

(四) “alt”键妙用
双击锚点可在曲线和角度之间切换,按ALT同时拖动曲线手柄可使手柄独立。双击可再返回。

按住Alt可调整单个角

绘制形状时,按住Alt可从中心点而不是默认的左上角绘

(五)快捷键“Ctrl +C”--“Ctrl+Alt+V” 粘贴样式 
(六)间距快速调整
文字的行距调整,按上下调整1PX,按shift+上下调整10PX,按0会给出默认行距,大小、方位、角度等同理

按上下左右箭头移动1PX,按shift+上下左右移动10PX

宽高,坐标可按+-/*符号进行计算

(七)做好交互后,点击预览,按键盘上的window+G,可录制交互视频

写在最后:
还有一些高效操作技巧就需要结合Adobe XD的相关插件了,这块可以从以下网站下载安装: https://xd.94xy.com/adobe-xd-plugin.html。
强烈推荐一个设计师朋友自己开发的拉框助手,可以在Adobe XD输入数值 自动生成各种类型的图表,再也不用闭只眼,睁只眼地检查图表形状是否符合数值大小了,尤其是拯救了我等对数据不敏感的设计师。https://mp.weixin.qq.com/s/9VwEHU4L3LQkKUbpC-wN2A


















































































