UI设计新选择，免费ADOBE XD中文版酷炫的技巧大放送
P&G副总裁曾经说过：我觉得自己一直都在做相同的事，工作起来很无力。
同样的事物，同样的岗位，不同的时期内容与方向都会改变。举个简单的例子：
- 过去，公关负责办活动，记者会、新品发布会等。
- 现在，要做消费者间的口碑传播，让消费者觉得品牌可信。
两者虽然是同样的岗位，但是所需的能力和要做的事情已经变得不同了。
如果一直用同样的思维来面对自己的工作，而无法跟上外面世界的变化，很容易就被世界抛弃。
同样做UI设计，5年前都是以Photoshop设计和制作为主。现在呢？已经出现了三足鼎立的现象，现在国外流行以Sketch、Adobe XD、Figma这三款软体为主。
未来发展会变快，尝试使用数字工具来做事，更有利于让自己继续前进。
UI/UX工具发展趋势
「易用性第一，体验性第二。」
2018年是设计师在设计时考虑到易用性的一年，设计不断适应著用户的新需求，虽然我们不大可能预测太远的未来，但是我们仍然可以对UI/UX的未来几年的发展趋势有一个基本的猜测。
原来单纯以设计用户界面为生的设计师，将会在职责上有所变化。
近期，一位来自谷歌的设计师爆出了一个很惊人的结论，在美国矽谷单纯的UI设计师越来越少了。如果一个视觉设计师不懂产品，不懂交互设计，不懂用户体验设计，基本上就没有出路了。
这从侧面也印证了一点，视觉、原型和交互可能才是UI的真正发展方向和最终形态。
今天我们来探讨2018年影响用户体验设计领域走向的重要因素。
简单来说，如上图所述，新一代设计工具应该满足三个特点：
- Design：高保真设计
- Phototype：低保真原型
- Handoff：交互流程
更有大胆预测，到2019年，这部分的工作会被机器人（Ai）替代。
更有大胆预测，到2019年，这部分的工作会被机器人替代这个流程里大部分的工作。
矽谷设计师用什么工具？
看了很多来自矽谷设计师分享的文章，他们的职责是分析问题，解决问题，并用视觉传达的方式使用户有更好的产品体验。很多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发布，我们看看这个版本有没有完全跑通这套流程。一个软体能集中这套流程，就已经是相当大的优势了。
下载免费使用地址：
下载免费的 Adobe XD CC | UX/UI 设计、协作工具软体在启动界面就有教程入口。跟著教程做一遍大概需要十分钟时间，就能基本了解操作流程。
设计和交互模块基本都能在下图顶部标签找到，即设计为视觉稿设定，原型为交互稿设定。
整体来说入手难度不大，有良好的入门指引。我基本操作了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中对应的图形里，就能完成遮罩填充了。在任何形状里都能完成这样的操作，明显这是一个利好的消息。而且它是非一次性操作，双击图层，还能进行进一步的调整。
快速导出不同的元素
界面设计跟平面设计有一个很大的不同。就是需要给不同的设备输出不同尺寸的设计。如果你给每一个尺寸都做一个设计的话，那工作量就会显得非常庞大。
这时候，如果有工具能直接在一个操作里输出不同尺寸的素材就显得很棒了。
- 能导出web格式。
- 能导出ios格式素材，1x、2x和3x版本。
- 能导出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 Designers20 Free Adobe XD UI Kits for Web & Mobile App Designers[2]、Adobe XD — 30 Tips & Tricks you wish you』d known earlier!Adobe XD — 30 Tips & Tricks you wish you』d known earlier![3]、Adobe XD: Designing with Real DataAdobe XD: Designing with Real Data – Anirudh Sasikumar – Medium推荐阅读：
