打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
免费的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 系统)进行编组, 接着将图层组调整至和底部蓝色圆居中对齐,完成实验器材图标的设计。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
带你了解adobe xd 是个什么软件
零基础转行UI设计行业学习指南(全面学习地图)
YES SHARE|10个用户体验最佳设计工具,让你的设计生活更轻松!!
在 Adobe MAX 深入研究 UI/UX 设计
教你用Xd做网页
首个Adobe XD教程丨如何用Adobe XD快速设计图标
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服