UI设计新选择,免费ADOBE XD中文版8大酷炫的技巧大放送

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 Designers
20 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 Data
Adobe XD: Designing with Real Data – Anirudh Sasikumar – Medium

推荐阅读更多精彩内容