耍Q
耍出你的范儿_分享你的福利

免费的Adobe XD,你会用了吗?

想必大家都已经Adobe XD了,这是Adobe为UI和UX设计师们打造的一款超实用的免费软件!但是它具体是做什么的,又有哪些特色呢?


今天数艺君就来跟大家唠唠这款软件吧!


1. 为 UI/UX 设计而生

从Adobe XD的软件界面可以看到,该软件摒弃了一切与UI/UX设计无关的功能。在Adobe XD中,有 大量可以极大提升UI/UX 设计工作效率的功能,这些功能在后面的章节中会逐一进行讲解。图所示为Adobe XD的一个重要功能——重复网格。


2. 快速创建可交互原型

在Adobe XD中完成UI界面的设计工作后,可以直接在软件中把这些界面快速链接起来,生成一个可交互的原型文档,并且能简单设置一些跳转效果。


3. 更“现代化”的分享机制

在Adobe XD中,除了能一键导出2×、3×等设计稿外,还采用了一种更“现代化”的方式方便设计师们进行团队协作。


因为Adobe XD制作的是可交互原型,所以纯静态图片已经不能满足团队成 员之间的沟通了,这时,Web实际上是一种更为便捷的方式。使用Adobe XD 设计完后,可以一键生成一个链接,团队成员可以通过该链接查看和评论设计文档,并且可以直接进行界面之间的交互跳转体验。


4. 在移动设备上实时预览

移动UI和UX都是在Mac或者PC桌面端进行设计,但实际上却是在移动设备上使用,很多情况下,在 桌面端看着不错的设计,可能在移动端上并没有达到最好的效果,所以能实时预览移动设备上的效果是非常 必要的。Adobe XD提供了官方的APP,支持设计师在设计的时候实时预览设计效果,包括交互原型的设计效 果,同时支持iOS和Android系统。


5. 多应用的无缝衔接

Adobe XD 提供了完整的设计功能,同时也可以非常方便地和其他设计软件进行无缝衔接。在Adobe XD中, 设计师可以直接导入PSD 和Sketch 的源文件,同时,越来越多的第三方应用开始集成到或者支持Adobe XD,如Dropbox、Zeplin、Avocode、Sympli、ProtoPie 和 Kite Compositor 等。这样可以让设计师最大化利用这些软件, 从而制作出一个最佳的设计文档。图所示为直接用Adobe XD打开一个Sketch文档。


6. 双系统支持

Sketch只支持Mac系统,这让很多Windows 用户非常无奈。但是,Adobe XD针对macOS和Windows进行了原生应用的研发,无论是Mac还是PC用户,都可以无差别地使用Adobe XD,并且不同平台之间的文档都是通用的。


7. 一款与时俱进的软件

Adobe XD 最早在2015年出现,在2016 年发布了Beta版,可以说是一款非常“年轻”的设计软件。Adobe XD从Beta版发布到现在,一直保持每月发布一个新版本的迭代频率,在Adobe XD的官方博客上,可以看到对每个新版本的变更介绍,如图所示。截至目前,Adobe XD的界面和功能基本上已经稳定下来,尽管Adobe保留着每月一更新的频率,但相信本书的内容依然在相当长的时间内适用于Adobe XD的最新版本。


8. 免费

从Adobe XD发布开始,Adobe公司就对其寄予厚望,并且对外宣称 Adobe XD 为其公司的旗舰产品,而 现在,更令人兴奋的是,Adobe XD已经免费了。


免费版的Adobe XD具备完整的产品功能, 并且没有任何时效的限制。对于这样一款功能强大却免费的软件,你有什么理由不来了解一下呢?


 实验器材图标设计


我们用Adobe XD来画一个彩色扁平图标吧!


1.按快捷键E 激活“椭圆”工具,然后按住Shift 键绘制一个500px×500px 的圆,并去掉“边界”,接着 将填充色设置为 #2DC9D0,如图所示。 


2.按快捷键R 激活“矩形”工具,绘制一个80px×10px 的矩形,并去掉“边界”,然后将填充色设置为 #FFFFFF,接着将矩形的圆角半径设置为 5px,最后将其移动至合适的位置,如图所示。


3.按快捷键R激活“矩形”工具,绘制一个50px×120px的矩形,并去掉“边界”,然后将填充色设置为#FFFFFF,接着将其移动至合适的位置,如图所示。


4.按快捷键E激活“椭圆”工具,然后按住Shift键绘制一个 220px×220px 的圆,并去掉“边界”,接着 将填充色设置为#FFFFFF,最后将其移动至合适的位置,如图所示。


5.按快捷键command+D(macOS系统)/Ctrl+D(Windows 系统)复制一个圆,然后将复制的圆的大小调 整为 200px×200px,接着将填充色设置为 #FFCE35,最后使其和底部的圆居中对齐,如图所示。 


6.按快捷键R激活“矩形”工具,绘制一个200px×80px的矩形,然后移动到图所示的位置,确保矩形在黄色圆的上方。


7.选中矩形和下方的黄色圆形,按快捷键option+command+S(macOS 系统)/Ctrl+Alt+S(Windows 系统)对其执行减去顶层布尔运算,如图所示。 


8.按快捷键 E 激活“椭圆”工具,然后按住 Shift 键绘制一个 40px×40px 的圆,并去掉“边界”,接着将 填充色设置为#FFFFFF,最后将其移动至合适的位置,如图所示。


9.采用同样的方式绘制一个16px×16px的圆,并将其移动至合适的位置,如图所示。 


10.按快捷键V激活“选择”工具,然后用“选择”工具选中40px×40px 的圆,并按住option 键(macOS 系统)/Alt 键(Windows 系统)拖曳,可以复制并移动圆形图层,接着将复制的圆形移动至合适的位置,最后 将填充色设置为 #FFCE35,如图所示。


11.用“椭圆”工具绘制或者直接采用拖曳的方式复制一个圆,并将尺寸调整为16px×16px,然后将填充 色设置为#FFCE35,接着将其移动至合适的位置,如图所示。


选中除蓝色底以外的所有图层,然后按快捷键 command+G(macOS)/Ctrl+G(Windows 系统)进行编组, 接着将图层组调整至和底部蓝色圆居中对齐,完成实验器材图标的设计。


延伸阅读

更多内容可以购买《Adobe XD 功能解析与应用》详细阅读哦!

    作者:黄方闻

    出版社:人民邮电出版社

    出版年:2019年5月

    ISBN  :978-7-115-50847-8

长按二维码进入购买页面




加入数艺社交流群


设计素材下载  学习视频资源

读者交流学习  图书售后服务

软件安装指导  读者意见反馈

数艺社QQ群:

PS学习交流群:826043343

手绘学习群:931044260


点击“阅读原文”可以直接购买

《Adobe XD 功能解析与应用》

赞(0) 打赏
转载请注明出处:耍Q-耍出你的范儿_分享你的福利 » 免费的Adobe XD,你会用了吗?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏