[quote] P&G副总裁曾经说过：我觉得自己一直都在做相同的事，工作起来很无力。 [/quote] 同样的事物，同样的岗位，不同的时期内容与方向都会改变。举个简单的例子： [list][*]过去，公关负责办活动，记者会、新品发布会等。[*]现在，要做消费者间的口碑传播，让消费者觉得品牌可信。[/list][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-41bae5792821e24a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 两者虽然是同样的岗位，但是所需的能力和要做的事情已经变得不同了。 如果一直用同样的思维来面对自己的工作，而无法跟上外面世界的变化，很容易就被世界抛弃。 同样做UI设计，5年前都是以Photoshop设计和制作为主。现在呢？已经出现了三足鼎立的现象，现在国外流行以Sketch、Adobe XD、Figma这三款软件为主。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-1e52d21f7866af06.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 未来发展会变快，尝试使用数字工具来做事，更有利于让自己继续前进。 [hr/] [size=6][b]UI/UX工具发展趋势[/b][/size] “易用性第一，体验性第二。” 2018年是设计师在设计时考虑到易用性的一年，设计不断适应着用户的新需求，虽然我们不大可能预测太远的未来，但是我们仍然可以对UI/UX的未来几年的发展趋势有一个基本的猜测。 原来单纯以设计用户界面为生的设计师，将会在职责上有所变化。 近期，一位来自谷歌的设计师爆出了一个很惊人的结论，在美国硅谷单纯的UI设计师越来越少了。如果一个视觉设计师不懂产品，不懂交互设计，不懂用户体验设计，基本上就没有出路了。 这从侧面也印证了一点，视觉、原型和交互可能才是UI的真正发展方向和最终形态。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-1bd02e424159cc8d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 今天我们来探讨2018年影响用户体验设计领域走向的重要因素。 简单来说，如上图所述，新一代设计工具应该满足三个特点： [list][*]Design：高保真设计[*]Phototype：低保真原型[*]Handoff：交互流程[/list] 更有大胆预测，到2019年，这部分的工作会被机器人（Ai）替代。 更有大胆预测，到2019年，这部分的工作会被机器人替代这个流程里大部分的工作。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-2bd26f9a832ae537.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [size=6][b]硅谷设计师用什么工具？[/b][/size] 看了很多来自硅谷设计师分享的文章，他们的职责是分析问题，解决问题，并用视觉传达的方式使用户有更好的产品体验。很多UX设计师或UX研究员(UX researcher)都具有心理学、统计学的背景，他们通过定性与定量的分析来规划出一套更好的界面框架。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-83045e1cadd48485.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 所以他们需要三合一的策略，即将原型、高保真设计以及交互流程组合成统一的流程。 如果说具体到什么工具？大致现在流行软件如下。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-cdef9532e453a3b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align][list][*]Figma ：协同交互设计工具[*]Adobe XD：PHOTOSHOP家的轻量级界面设计工具[*]Zeplin：界面交付工具[*]Stage & Gallery：基于安卓Material的设计工具[*]Sketch：界面设计师常用工具[*]Framer：形成带有代码特性的工具[*]ProtoPie：快速生成交互&原型的工具[/list] [size=6][b]中国设计师用什么工具？[/b][/size] 国内的设计环境，特别是专业团队，用的工具，和硅谷并没有多大的差异。但是不同之处在于，由于环境的差异，大部分新入门的朋友，还是以Photoshop入门为主。 其实真正的UI设计，涉及的软件都比较庞杂。基本下面这幅图已经涵盖现阶段能使用的大部分UI/UX工具。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-1fc08fc9d5cd6130.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align][quote] Great for static wireframes：创建线框原型工具 Ideal for click-through prototypes：创建设计视觉稿工具 Interaction and hi-fi tools：交互&高保真效果工具 [/quote] 具体可以查看：[url]http://www.prototypr.io/prototyping-tools/[/url] [size=6][b]未来用什么工具？[/b][/size] [quote] 未來机器人AI会抢走你的工作吗？ [/quote] 相信很多人对上面的问题都有所担心。怎么判断未来这个职位会不会消失呢？ 有个网站，能查出岗位未来的需求量。 打开网站后，输入要查找的职业名称（英文），比如说cashier（收银员）， 网站会显示，有97%机率可能在未来被机器人取代。 每个关键字底下会有说明，为什么这个职业未来可能会面临失业的风险。 输入以下网址查询：[url]https://willrobotstakemyjob.com/[/url] [size=4][b]cashier：收银员[/b][/size] [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-ff901bec602c1205.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [size=4][b]Interior Designers：交互设计师[/b][/size] [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-5401e0be449c02fd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 看到这里，恭喜各位设计师，暂时你们还是相对安全。 [size=6][b]下一代设计工具是什么？[/b][/size] 做设计这一行，需要干到老学到老，姑且不提Photoshop、Illustrator等软件的持续更新，新软件层出不穷的出现。为了提高工作效率，很多知识是需要重新学习和掌握。 留意设计新闻的同学可能注意到，中国时间7月20日，简体中文版Adobe XD CC正式来到我们身边。 简单来说对比其他工具，它的特点： [list][*]完全免费提供[*]兼容Windows和Mac[*]Adobe爸爸全力支持它的发展[/list] 了解这么多，我特意结合UI设计工作中常用的工作习惯，输出简体中文版Adobe XD CC 的使用技巧，掌握这些技巧后，工作也会变得更加轻松。 [size=6][b]现代流程的应用设计流程[/b][/size] [quote] 原型草图——视觉界面——交互流程——设计分享——协同反馈——重复 [/quote] 标准的UI设计过程或多或少都是这样。以往，我们可能需要不同的软件协作才能完成这样的流程，譬如设计工具（Sketch，Photoshop，Illustrator），协同工具、交互工具和反馈工具等。 新一代的界面设计工具，都是将这些功能集合到同一个应用中实现。因为恰逢简体中文版Adobe XD CC发布，我们看看这个版本有没有完全跑通这套流程。一个软件能集中这套流程，就已经是相当大的优势了。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-223b947b50736c97.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 下载免费使用地址： [url=http://adobe.com/cn/products/xd.html?promoid=162BDV93&mv=other%20%20]下载免费的 Adobe XD CC | UX/UI 设计、协作工具[/url] 软件在启动界面就有教程入口。跟着教程做一遍大概需要十分钟时间，就能基本了解操作流程。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-8874d87f2a3152d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 设计和交互模块基本都能在下图顶部标签找到，即设计为视觉稿设定，原型为交互稿设定。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-98f9c5182601187a.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-2d11656102af33f3.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 整体来说入手难度不大，有良好的入门指引。我基本操作了15分钟，基本完成一个界面的设计和交互流程。 [hr/] 如果你还在犹豫，值不值得花时间学习，不妨看看我发的XD黑科技技巧，或许你会对它如何提高效率，帮助你更快更好完成设计有更清楚得认识。效率就是生命，我从来不拒绝能偷懒且提高速度的方法。 [size=5][b]快速复制&粘贴样式[/b][/size] 有时候，频繁的调整是每个设计师的必修课。往往最常用的功能就是，将A的样式复制给B，或者反过来操作。 现在，你只需点击【复制命令】，再点击【粘贴样式命令】即可。当然，你可以根据快捷键快速实现相同的效果。 快捷操作： [quote] 复制 MacOS：⌘+C Win：Ctrl+C 粘贴外观/交互 MacOS：⌥+⌘+V Win：Ctrl+Alt+V [/quote][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-fe3bb72c7207d50a.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [size=5][b]极速生成相同的元素[/b][/size] 我觉得这是XD最重要的功能【重复网格】，只需要3秒，就能快速生成一堆相似的模块。 具体操作很简单，选择一个或多个对象，点击重复网格。神奇的事情出现了，你会看到那个对象的x轴和y轴可以自由调节。一拉一拖，就能生成相同的元素，就这么简单。 快捷操作： [quote] 点击重复网格 MacOS：⌘+R Win：Ctrl R 鼠标拖拽边框 [/quote][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-4c2a4afc1088e588.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 原来我们的工作流程都是需要一个个复制元素，效率实在有点低。这项操作，能够使我们的效率有着极大的提升。如果每个元素都能快速的增加或减少数量，那我们就有更多时间处理别的问题。 原来你只能出一版的设计，现在能出3-4版，这不是显得我们更为高效么？ [size=6][b]快速生成小控件[/b][/size] 控件是每个界面设计师需要常常面对的东西。譬如图片轮换的小按钮，一个为当前高亮状态，其他为置灰状态。 以往，我特别讨厌做这个，因为操作起来很机械，即绘制好高亮和非高亮状态，复制，排列，对齐，调整好位置。虽然都是琐碎的动作，但是当要创建多种控件时，难免让人很麻木。 现在，利用上面说的重复网格，就能做到类似的效果，且创建速度很快，修改调整也很快。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-43ae627bf7c4f0c2.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [size=5][b]快速填充真实数据[/b][/size] 这样的数据结构看起来十分的苍白。如果是以往的工作方式，需要做到真实的效果，要一个个找图和文字，那样效率实在太低了。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-95140b540394b673.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] 怎么办？在其他软件里能通过插件快速实现填充。在XD里，不用通过插件就能快速填充了。 现在这样的填充方式主要有三类： [list][*]简易关键字填充内容（中文版暂时缺失）[*]从网络直接添加（中文版暂时缺失）[*]从文件添加[/list][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-91f2264e508795b8.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-81c17ad99abe8fa1.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/480[/img] [/align] 图片来源于网络 [size=4][b]从文件拖拽填充内容[/b][/size] 将文本文件（.txt）拖放到重复网格中的元素上，既能快速批量替换一大批的文字。唯一可惜，前期你需要整理收集常用的关键字列表，譬如标题、姓名、年龄、摘要等数据。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-8023bd4ae731939a.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [size=5][b]快速将元素放到想要的位置[/b][/size] 基本每个设计师，除了保存命令外，最常用的命令就是复制/粘贴。之前的操作里，有个明显的缺陷是，复制时，我想新创建的元素在所有元素的最上方。这基本很难通过一个命令解决。 现在，Adobe XD有个方法能令我们快速实现将元素放到想要的位置。 1、同一层级复制 快捷操作： [quote] 点击重复命令 MacOS：⌘+D Win：Ctrl+D 按住alt+鼠标拖拽 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-033c5d7dc2ed45f3.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [/quote] 2、复制到所有元素最上层级 快捷操作： [quote] 点击复制命令 MacOS：⌘+C Win：Ctrl+C 点击粘贴命令 MacOS：⌘+V Win：Ctrl+V [/quote][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-4765436049097abc.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [size=5][b]快速生成不同的网格系统[/b][/size] 栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。 在整个设计领域，网格系统的作用很重要。特别对于新手设计师，能帮助其快速创建出符合现代审美标准的设计。 在XD中，你只需要选择画板。点击右侧网格菜单【版面】，即能开启这个重要的功能。 快捷操作： [quote] 栅格 MacOS：⇧+⌘+’ Win：Ctrl Shift ' 网格 MacOS：⌘+’ Win：Ctrl ' [/quote][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-3b7c0c1c39699fb2.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [size=6][b]快速复制和遮罩图片[/b][/size] 图片遮罩，是一个很常用的功能。以往用Adobe的相关软件做类似的操作，效率比较慢。 比较惊喜的是，现在只要将图像直接拖放到XD中对应的图形里，就能完成遮罩填充了。在任何形状里都能完成这样的操作，明显这是一个利好的消息。而且它是非一次性操作，双击图层，还能进行进一步的调整。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-659496f627230a36.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-1cfbb1be54725121.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700[/img] [/align] [size=6][b]快速导出不同的元素[/b][/size] 界面设计跟平面设计有一个很大的不同。就是需要给不同的设备输出不同尺寸的设计。如果你给每一个尺寸都做一个设计的话，那工作量就会显得非常庞大。 这时候，如果有工具能直接在一个操作里输出不同尺寸的素材就显得很棒了。 [list][*]能导出web格式。[*]能导出ios格式素材，1x、2x和3x版本。[*]能导出Android格式素材，ldpi、mdpi、hdpi 、xhdpi、xxhdpi、xxxhdpi版本。[/list][align= center] [img]https://upload-images.jianshu.io/upload_images/4435-2efdff222e44ef3b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/644[/img] [/align] [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-230893106323daa2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/653[/img] [/align] [size=6][b]总结：简体中文版Adobe XD CC，值得一试的三个理由[/b][/size] 恰逢简体中文版Adobe XD CC发布，相对于英文版，它显得还不是那么完美。不过它已经提供一种加快工作思路，以及一些优秀的功能。 如果你想第一时间了解，这款新发布的工具。 免费下载使用地址： [url]http://adobe.com/cn/products/xd.html?promoid=162BDV93&mv=other[/url] 我相信以Adobe的背景，这款工具会变得越来越完美。后续简体中文版的更新，官网介绍可以到其公众号查看最新的教程和更新内容说明。 [align= center] [img]https://upload-images.jianshu.io/upload_images/4435-70d7b9eb7af48a69.GIF?imageMogr2/auto-orient/strip%7CimageView2/2/w/640[/img] [/align] 图片摘自于Adobe官方公众号号 简单来说对比其他工具，它的特点： [list][*]完全免费应用提供给我们[*]可以在Windows 和 Mac 上安装[*]拥有很多独家的功能，特别是重复网格系统[/list] 相关资源： [1] 、20 Free Adobe XD UI Kits for Web & Mobile App Designers [url=https://speckyboy.com/free-adobe-xd-ui-kits/]20 Free Adobe XD UI Kits for Web & Mobile App Designers[/url] [2]、Adobe XD — 30 Tips & Tricks you wish you’d known earlier! [url=https://medium.com/@learnux.io/adobe-xd-30-tips-tricks-you-wish-youd-known-earlier-54bd117b2eb7]Adobe XD — 30 Tips & Tricks you wish you’d known earlier![/url] [3]、Adobe XD: Designing with Real Data [url=https://medium.com/@anirudhs/project-comet-designing-with-real-data-959beccb5c1a]Adobe XD: Designing with Real Data – Anirudh Sasikumar – Medium[/url]