xd整体来说入手难度不大，有良好的入门指引。我基本操作了15分钟，基本完成一个界面的设计和交互流程。具体......

P&G副总裁曾经说过：我觉得自己一直都在做相同的事，工作起来很无力。

同样的事物，同样的岗位，不同的时期内容与方向都会改变。举个简单的例子：

• 过去，公关负责办活动，记者会、新品发布会等。
• 现在，要做消费者间的口碑传播，让消费者觉得品牌可信。

两者虽然是同样的岗位，但是所需的能力和要做的事情已经变得不同了。

如果一直用同样的思维来面对自己的工作，而无法跟上外面世界的变化，很容易就被世界抛弃。

同样做UI设计，5年前都是以Photoshop设计和制作为主。现在呢？已经出现了三足鼎立的现象，现在国外流行以Sketch、Adobe XD、Figma这三款软件为主。

未来发展会变快，尝试使用数字工具来做事，更有利于让自己继续前进。

UI/UX工具发展趋势

“易用性第一，体验性第二。”

2018年是设计师在设计时考虑到易用性的一年，设计不断适应着用户的新需求，虽然我们不大可能预测太远的未来，但是我们仍然可以对UI/UX的未来几年的发展趋势有一个基本的猜测。

原来单纯以设计用户界面为生的设计师，将会在职责上有所变化。

近期，一位来自谷歌的设计师爆出了一个很惊人的结论，在美国硅谷单纯的UI设计师越来越少了。如果一个视觉设计师不懂产品，不懂交互设计，不懂用户体验设计，基本上就没有出路了。

这从侧面也印证了一点，视觉、原型和交互可能才是UI的真正发展方向和最终形态。

今天我们来探讨2018年影响用户体验设计领域走向的重要因素。

简单来说，如上图所述，新一代设计工具应该满足三个特点：

•  Design：高保真设计
•  Phototype：低保真原型
•  Handoff：交互流程

更有大胆预测，到2019年，这部分的工作会被机器人（Ai）替代。

硅谷设计师用什么工具？

看了很多来自硅谷设计师分享的文章，他们的职责是分析问题，解决问题，并用视觉传达的方式使用户有更好的产品体验。很多UX设计师或UX研究员(UX researcher)都具有心理学、统计学的背景，他们通过定性与定量的分析来规划出一套更好的界面框架。

所以他们需要三合一的策略，即将原型、高保真设计以及交互流程组合成统一的流程。

如果说具体到什么工具？大致现在流行软件如下。

Figma ：协同交互设计工具

Adobe XD：PHOTOSHOP家的轻量级界面设计工具

Zeplin：界面交付工具

Stage & Gallery：基于安卓Material的设计工具

Sketch：界面设计师常用工具

Framer：形成带有代码特性的工具

ProtoPie：快速生成交互&原型的工具

中国设计师用什么工具？

国内的设计环境，特别是专业团队，用的工具，和硅谷并没有多大的差异。但是不同之处在于，由于环境的差异，大部分新入门的朋友，还是以Photoshop入门为主。

其实真正的UI设计，涉及的软件都比较庞杂。基本下面这幅图已经涵盖现阶段能使用的大部分UI/UX工具。

Great for static wireframes：创建线框原型工具

Ideal for click-through prototypes：创建设计视觉稿工具

Interaction and hi-fi tools：交互&高保真效果工具

具体可以查看：http://www.prototypr.io/prototyping-tools/

未来用什么工具？

未來机器人AI会抢走你的工作吗？

相信很多人对上面的问题都有所担心。怎么判断未来这个职位会不会消失呢？

有个网站，能查出岗位未来的需求量。
打开网站后，输入要查找的职业名称（英文），比如说cashier（收银员）， 网站会显示，有97%机率可能在未来被机器人取代。
每个关键字底下会有说明，为什么这个职业未来可能会面临失业的风险。

输入以下网址查询：https://willrobotstakemyjob.com/

cashier：收银员

Interior Designers：交互设计师

看到这里，恭喜各位设计师，暂时你们还是相对安全。

下一代设计工具是什么？

做设计这一行，需要干到老学到老，姑且不提Photoshop、Illustrator等软件的持续更新，新软件层出不穷的出现。为了提高工作效率，很多知识是需要重新学习和掌握。

留意设计新闻的同学可能注意到，中国时间7月20日，简体中文版Adobe XD CC正式来到我们身边。

简单来说对比其他工具，它的特点：

• 完全免费提供
• 兼容Windows和Mac
• Adobe爸爸全力支持它的发展

了解这么多，我特意结合UI设计工作中常用的工作习惯，输出简体中文版Adobe XD CC 的使用技巧，掌握这些技巧后，工作也会变得更加轻松。

现代流程的应用设计流程

原型草图——视觉界面——交互流程——设计分享——协同反馈——重复

标准的UI设计过程或多或少都是这样。以往，我们可能需要不同的软件协作才能完成这样的流程，譬如设计工具（Sketch，Photoshop，Illustrator），协同工具、交互工具和反馈工具等。

新一代的界面设计工具，都是将这些功能集合到同一个应用中实现。因为恰逢简体中文版Adobe XD CC发布，我们看看这个版本有没有完全跑通这套流程。一个软件能集中这套流程，就已经是相当大的优势了。

下载免费使用地址：
http://adobe.com/cn/products/xd.html?promoid=162BDV93&mv=other

软件在启动界面就有教程入口。跟着教程做一遍大概需要十分钟时间，就能基本了解操作流程。

设计和交互模块基本都能在下图顶部标签找到，即设计为视觉稿设定，原型为交互稿设定。

整体来说入手难度不大，有良好的入门指引。我基本操作了15分钟，基本完成一个界面的设计和交互流程。

如果你还在犹豫，值不值得花时间学习，不妨看看我发的XD黑科技技巧，或许你会对它如何提高效率，帮助你更快更好完成设计有更清楚得认识。效率就是生命，我从来不拒绝能偷懒且提高速度的方法。

快速复制&粘贴样式

有时候，频繁的调整是每个设计师的必修课。往往最常用的功能就是，将A的样式复制给B，或者反过来操作。

现在，你只需点击【复制命令】，再点击【粘贴样式命令】即可。当然，你可以根据快捷键快速实现相同的效果。

快捷操作：

复制 MacOS：⌘+C Win：Ctrl+C
粘贴外观/交互 MacOS：⌥+⌘+V Win：Ctrl+Alt+V

极速生成相同的元素

我觉得这是XD最重要的功能【重复网格】，只需要3秒，就能快速生成一堆相似的模块。

具体操作很简单，选择一个或多个对象，点击重复网格。神奇的事情出现了，你会看到那个对象的x轴和y轴可以自由调节。一拉一拖，就能生成相同的元素，就这么简单。

快捷操作：

点击重复网格 MacOS：⌘+R Win：Ctrl R
鼠标拖拽边框

原来我们的工作流程都是需要一个个复制元素，效率实在有点低。这项操作，能够使我们的效率有着极大的提升。如果每个元素都能快速的增加或减少数量，那我们就有更多时间处理别的问题。

原来你只能出一版的设计，现在能出3-4版，这不是显得我们更为高效么？

快速生成小控件

控件是每个界面设计师需要常常面对的东西。譬如图片轮换的小按钮，一个为当前高亮状态，其他为置灰状态。

以往，我特别讨厌做这个，因为操作起来很机械，即绘制好高亮和非高亮状态，复制，排列，对齐，调整好位置。虽然都是琐碎的动作，但是当要创建多种控件时，难免让人很麻木。

现在，利用上面说的重复网格，就能做到类似的效果，且创建速度很快，修改调整也很快。

快速填充真实数据

这样的数据结构看起来十分的苍白。如果是以往的工作方式，需要做到真实的效果，要一个个找图和文字，那样效率实在太低了。

怎么办？在其他软件里能通过插件快速实现填充。在XD里，不用通过插件就能快速填充了。

现在这样的填充方式主要有三类：

简易关键字填充内容（中文版暂时缺失）

从网络直接添加（中文版暂时缺失）

从文件添加

图片来源于网络

从文件拖拽填充内容

将文本文件（.txt）拖放到重复网格中的元素上，既能快速批量替换一大批的文字。唯一可惜，前期你需要整理收集常用的关键字列表，譬如标题、姓名、年龄、摘要等数据。

快速将元素放到想要的位置

基本每个设计师，除了保存命令外，最常用的命令就是复制/粘贴。之前的操作里，有个明显的缺陷是，复制时，我想新创建的元素在所有元素的最上方。这基本很难通过一个命令解决。

现在，Adobe XD有个方法能令我们快速实现将元素放到想要的位置。

1、同一层级复制

快捷操作：

点击重复命令 MacOS：⌘+D Win：Ctrl+D
按住alt+鼠标拖拽

2、复制到所有元素最上层级

快捷操作：

点击复制命令 MacOS：⌘+C Win：Ctrl+C
点击粘贴命令 MacOS：⌘+V Win：Ctrl+V

快速生成不同的网格系统

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

在整个设计领域，网格系统的作用很重要。特别对于新手设计师，能帮助其快速创建出符合现代审美标准的设计。

在XD中，你只需要选择画板。点击右侧网格菜单【版面】，即能开启这个重要的功能。

快捷操作：

栅格 MacOS：⇧+⌘+’ Win：Ctrl Shift '
网格 MacOS：⌘+’ Win：Ctrl '

快速复制和遮罩图片

图片遮罩，是一个很常用的功能。以往用Adobe的相关软件做类似的操作，效率比较慢。

比较惊喜的是，现在只要将图像直接拖放到XD中对应的图形里，就能完成遮罩填充了。在任何形状里都能完成这样的操作，明显这是一个利好的消息。而且它是非一次性操作，双击图层，还能进行进一步的调整。

快速导出不同的元素

界面设计跟平面设计有一个很大的不同。就是需要给不同的设备输出不同尺寸的设计。如果你给每一个尺寸都做一个设计的话，那工作量就会显得非常庞大。

这时候，如果有工具能直接在一个操作里输出不同尺寸的素材就显得很棒了。

1. 能导出web格式。
2. 能导出ios格式素材，1x、2x和3x版本。
3. 能导出Android格式素材，ldpi、mdpi、hdpi 、xhdpi、xxhdpi、xxxhdpi版本。

总结：简体中文版Adobe XD CC，值得一试的三个理由

恰逢简体中文版Adobe XD CC发布，相对于英文版，它显得还不是那么完美。不过它已经提供一种加快工作思路，以及一些优秀的功能。

如果你想第一时间了解，这款新发布的工具。

免费下载使用地址：
http://adobe.com/cn/products/xd.html?promoid=162BDV93&mv=other

我相信以Adobe的背景，这款工具会变得越来越完美。后续简体中文版的更新，官网介绍可以到其公众号查看最新的教程和更新内容说明。

图片摘自于Adobe官方公众号号

简单来说对比其他工具，它的特点：

完全免费应用提供给我们

可以在Windows 和 Mac 上安装

拥有很多独家的功能，特别是重复网格系统

相关资源：

[1] 、20 Free Adobe XD UI Kits for Web & Mobile App Designers
[2]、Adobe XD — 30 Tips & Tricks you wish you’d known earlier!
[3]、Adobe XD: Designing with Real Data