由作者授权发布

前几天问一个做了7年UI设计的朋友

“你用吗？”“不用”

“你用XD吗？”“不用”

“你用figma吗？”“不用”

“你用 吗”“啥？”

“挺好的软件，为什么不用用呢”“我用PS，PS最好了！”

“MMP......”

我们如今所处的环境, 互联网正迅猛发展, 新的意识形态持续涌现, 工作方式持续发生改变, 开放、共享等理念被更多行业、更多人所理解, 在这般环境里效率愈发显得重要。好的工具与工作方式带来的是先进的生产力, 比如Figma的突然兴起改变了设计师传统的工作方式, 也正改变着我们的工作理念, 作为互联网设计师我们应当是互联网里的前卫者。

下面, 我们来瞧一瞧UI设计软件的当下情形以及未来走向, 不论是否曾运用过它们, 然而设计师都理应明白我们身处的状况。

首先我们简单的看一下软件的发展：

大约是90年代往前的时候, 那时候, 我们能够给它赋予一个称呼, 将其称作“软件1.0时代”。

在“软件1.0时代”, 软件于自身专业领域持续改进, 像.0、.0 这样, 有word1.0、金山的wps1.0等, 彼时软件追求的是功能完善、系统稳定等。

来到2000年左右ai文件怎么导入sketch，我们可以称作“软件2.0时代”

始于“软件2.0时代初期”积极探寻便捷高效工作模式, 存在多软件协同合作现象, 如2002年Adobe推出的创意套装Adobe Suite, 涵盖当今多数Adobe软件。

WPS在1999年时, 就已经将电子表格以及多媒体演示全面集成了, 到了2001年, 它被重新命名为WPS。

更早一些，在90年代就完成了从单一软件到套装的转变。

伴随技术的发展以及普及, 这个时代的软件开端纳入“云”的理念, 存在云端存储情形, 存在云端共享状况, 举例来说, 在2013年, Adobe推出的创意云Adobe Cloud也就是我們所熟知的CC系列, 依靠一个账号便能在任意一台电脑上运用自身的资源。

2012年, 金山推出了WPS云文档, 2016年, 发布了WPS+云协作, 2018年, 多人实时在线协作的金山文档上线了, 金山软件的发展很好地体现了软件的发展趋势。

2013年

·订阅号从无到有，成为内容创业抢夺的蓝海到市场逐渐饱和；

小米乃是为发烧而生的, 其销量开端被华为、OPPO、VIVO这三家联合起来进行围剿。

Papi酱凭借短视频吐槽拍出了价值2200万元的“天价”广告位, 此后其被逻辑思维进行了撤资。

·滴滴跟快的、优步相互比拼, 烧钱竞争激烈, 彼此间的争斗热烈异常, 最终竟然达成合作, 携手联姻。

·ofo和摩拜平地一声惊雷引发了出行领域的又一轮烧钱大战；

·4G拍照正式发放；

......

这些跟软件关联不大, 有些想法偏离主题了, 与软件相关的情况是, 在2013年有一款在线做图工具上线了, 国外同类型产品出现得更早, 它是一款专门用于绘制流程图、思维导图等的在线做图工具, 团队成员能够进行实时协作。

一个更具重要性之处是, 有一个web应用, 还有一个浏览器, 再加上一个窗口, 所有这些都达成了。在销售成本为零的状况下, 用户数量突破了100万。这在某种程度上反映出软件的发展趋向: 朝着云端化、向着去平台化以及走向共享化发展, 传统的软件必定会逐渐被云应用给取代。

我们可以看到软件的发展大致是这样的线路：

接下来我们看一下“后软件时代”的UI设计软件

现今需阐述的是当下处于主流态势的UI设计软件, 其中包含Figma, 还涵盖Adobe XD。

首先说明一下

1、先前所说的墨刀以及摹客同样是极其出色的设计软件, 其功能极为完备, 甚至存在一些功能在体验方面超越了这些软件, 并且墨刀与摹客亦是相当不错的选择。然而, 我们更倾向于把墨刀跟摹客视作原型设计工具, 因而不在探讨范畴之内。

2、还有一些堪称很棒的软件, 比如说, 它们也是极为出色的, 然而本人并未进行深入体验, 再加上国内使用这些软件的人比较少, 所以它们不在讨论的范畴当中。

3、多数同学们依旧运用的是PS, 然而PS实难算作正规的UI设计工具, 尽管它具备很强能力, 故而也于讨论范畴之外。

4、因我们所处使用环境受限, 它更近似于一款传统软件, 不过它为维持竞争力持续着手更新迭代, 还能够借由各类插件达成团队特有的工作流。

5、 是众多产品中的一个ai文件怎么导入sketch，包括 Cloud、 、 DSM

“后软件时代”的UI设计软件具备共同特性, 那便是一站式设计, 即从线框开始, 接着是原型, 然后进行设计, 再到动效, 之后展开讨论, 最终实现协作, 一站式达成。

首先我们看一下这几个软件的基本信息：

能够发现这四款软件的定位包括功能基本是一致的。

接下来看一下软件的核心功能

1、基础功能

首先来讲一下基础功能, 所谓基础功能, 乃是本地化设计时常用的, 包括图形绘制, 路径编辑, 布尔运算, 文本设置, 图层样式, 蒙版, 模糊, 页面设置, 栅格等, 这些功能与基本操作, Figma, Adobe XD, 的差异不大, 甚至颇为相似, 相对较为简单, 要是熟悉其中一个, 其他的很容易上手, 此处便不多作介绍了。

2、组件系统

存在著组件系统, 总体而言, 组件系统能够便利设计师对组件做出复用操作, 还能够对样式进行复用, 也能够对颜色予以复用, 并且能够对文本样式进行复用, 而且可以进行统一修改。

近两年, 组件化设计思维愈发受重视, 大厂皆有自身组件系统, 它属于一种高效工作方法以及思维模式。组件化设计思维在此不再详说, 感兴趣同学可查看站酷的这几篇文章。

《组件化设计思维》

《组件化设计思维 – 从规范到工具的构建与探索》

《【滴滴平台体验设计研究】所做设计的“整理术”, 即滴滴表单项目当中的组件化设计思维沉淀》。

它们的组件系统各有千秋，比如

、Figma, 在切换组件之际能够通过下拉的方式去选择切换, 而XD呢, 其切换的做法是直接把组件拖动至原来组件之上进行替换, 并且能够借用斜杠 / 来命名从而对组件开展分组。

Figma的组件能够存在多种状态, 并且能够直接对文件的组件予以识别, XD中的组件也能够出现多种状态, 还能够径直明确文件之际组建。

、 把组件归类到一个单独的页面空间；

Figma、XD的组件更灵活；

.......

当然我们习惯一种就好，关键的是运用到实际工作中！

Adobe XD ↑

Figma ↑

↑

↑

↑

3、团队组件库

凡是提及组件库, 那就必然得讲讲团队组件库, 组件能让设计师用以管理单个文件里的设计资源, 团队组件库则能够让我们整个团队运用同一套规范, 一旦有一个组件出现变动, 所有使用了这个组件的文件都会自行修改, 这对于团队协作而言是极为关键重要的。

的团队组件库

能使用自身所带的, 还能够使用苹果的, 针对蓝湖专门打造的“设计规范云”的使用感受同样是极其出色！

Figma的团队组件库

Figma的团队协作实质是众人一同编辑同一个文件, 免费用户仅能于一个文件里运用组件, 团队项目能够跨设计稿使用, 不过得要是付费的专业版才行。

XD的团队组件库

将设计文件分享予团队之中的各个成员, 团队里的成员能够运用文件里面的那些组件, 而且能够在一起共同去进行编辑。

的团队组件库

当下不存在团队组件库, 然而它能够导入源自其他文件的组件, 借助文件传送这种途径, 我们能够间接地达成组件的共享。

↑

Adobe XD ↑

↑

4、智能布局

”后现代设计软件“具备着一项重要功能, 那便是智能布局, 它能够助力我们迅速达成响应式布局。

虽然它们的叫法不一样，但功能基本一致。

称Smart为“聪明布局”, （这般翻译着实显得很别扭, o(*￣︶￣*)o）

Figma叫Auto “智能布局”；

Adobe XD叫-Aware “内容感知布局”；

叫 “响应式布局”；

其中, Figma的Auto, 能够达成更为繁杂的成效, 与此同时, 嵌套逻辑亦更为繁复。

的, 其功能稍微弱些, 仅能够达成某些简单的自适应成效。响应式布局的关键所在是运用百分比的单位。

↑

↑

Figma ↑

↑

5、数据填充

是我们做设计之际常常碰到的问题, 那便是填充诸如头像、图片、文字等这般的模拟数据, 它能够让我们的设计体现出来的效果得以显得更为真实, 代入感变得更强的数据填充。

数据填充可以分为两大类型：

一是随机的数据

随机数据内容不可控，它们都有这样的插件，其中自带这个功能。

二是自定义数据

明确界定自身所期望的文字以及图片, 举例而言, 像是那种同步具备对Figma的支持作用, 还有对Adobe XD的插件支持作用的事物。标点与原句一致。

可以自定义本地的图片和文本或者使用插件如等；

通过插件, Figma能够实现自定义数据。若舍弃这种方式, 还能用其他插件去达成随机数据的目的。

Adobe XD能够直接通过拖动本地的图片来进行填充, 也能够直接拖动本地的文本进行填充, 又或者能够使用其他插件。

可以通过“Data”插件实现随机数据或定义本地数据。

Adobe XD ↑

↑

Figma ↑

6、原型

原型功能, 是一站式设计里, 绝对不能缺少的功能, 在这方面, Figma、Adobe XD 所带来的体验, 是比较统一的。

可以实现不同的交互方式如点击、滑动、长按等等；

可以实现不同的交互效果如缓入、缓出、线性等等；

可以以连接的形式分享给他人；

可以在手机上预览并实际的操作；

仅能够达成简易的跳转以及过渡, 当然啦, 能够凭借它的最适配伙伴达成繁杂的交互动态效果。

在设计工具方面, Figma以及Adobe XD能够达成拥有过渡效果的动效, 此所谓补间动画了, 所以借助其就可以去完成更为真实的交互效果。

的初始功能完备至极, 究其缘由在于其自身乃是同时参照了设计层面与动效层面, 由此能够对动效的关键帧以及动画曲线予以调节。故而能够达成更为繁杂的交互成效。然而 的弹性成效无法如那般能够自行定义张力与摩擦力, 也就是弹性幅度。

↑

↑

Figma ↑

↑

↑

7、实时协作

在团队协作里头, 实时协作可是重要的一种呈现, 它具体指的是好多人同时去编辑同一个文件, 这就跟玩LOL是类似的情况, 它带给我们的, 不单单是工作流程的变更, 更是逐渐地改变了我们思考以及工作的方式。

存在着多种多样的软件, 其发展态势呈现出这样一种情形, 举例来说, 像是各类协作文档, 还有前面业已提及的那些, 另外最新版本的且名为墨刀的软件, 它也增添了具备实时协作特性的功能。可以预期的是, 实时协作这种模式, 将于不久之后的时间段里, 展现出众夺目耀眼的光彩！

提及实时协作, 在这四个软件当中, Figma无疑是最早出现的那个, 并且, Figma极其稳定。

紧随其后的是Adobe XD, 而且Adobe的实时协作体验很棒, 但免费用户仅限两个用户进行编辑。

也增加了实时协作，目前还在测试阶段。

这种实时协作, 并非是大家一起去编辑设计稿, 而是在设计稿之上, 大家实时来进行那种类似涂鸦样式的讨论。

Adobe XD ↑

Figma ↑

Figma ↑

8、工作交接

工作交接可以分为三个方面

一是设计分享，他人或者团队成员可以通过链接看到你的设计稿。

二是开展设计讨论, 就是如蓝湖那般, 实施打点的评论, @团队成员, 做出回复等等。

三是交付前端，就像蓝湖、一样，查看代码信息下载切图

Figma 与 Adobe XD在工作交接方面带给人的体验是一样的, 其设计讨论更为灵活, 能够开展多人同时进行的实时讨论。

进而增添了如此这般的功能, 然而鉴于我们所处的使用环境以及诸般问题, 我们通常依旧惯于借助蓝湖这类第三方软件来达成这般工作交接。

蓝湖也支持Adobe XD。

Figma ↑

↑

Figma ↑

↑

Figma ↑

↑

9、插件

插件将软件的功能予以极大丰富, 同时也使软件之间的协作得以显著提升, 因此他们都大力倡导更多人投入到插件的开发之中。

提及插件, 不能不讲到, 鉴于用户基础广泛, 故而它拥有极为完备的插件生态, 并且还吸引了众多开发者去创作插件。

就算Figma它起步比较晚, 就算Adobe XD它起步也比较晚, 然而它们的插件数量, 也在以很快的速度增加着。

里非常优秀的craft插件，就是团队开发的。

↑

Figma ↑

Adobe XD ↑

↑

10、资源

这里说的资源包括：设计文件、作品、第三方控件、教程等。

其中的资源是最为丰富的状况, 鉴于其出现时间比较早, 历经了多年的发展历程, 在互联网上已然存在相当多的与之相关的资源, 但是大部分都聚焦于第三方网站, 而官方所拥有的资源相对较少。

提及资源, 就不能不讲到Figma社区, Figma的社区汇聚了绝大多数的资源, 涵盖作品、控件、插件等诸多方面, 再加上Figma自身云端的特性, 运用起来极为便利, 像插件, 只需点击一下安装按钮就行。

Adobe XD存在着属于它自身的社区, 当然啦, 此社区并非仅仅局限于XD, 而是涵盖了Adobe的诸多软件, 当你把Cloud打开之后, 于一栏之处便能够看见与之相关的内容。

在国内, 因使用者相对数量少, 故而资源也相对少些, 尤其是中文资源, 其资源能直接于它的官网去查找。它自带的App Store尚处在bate版本, 然而已收集了几十套的文件资源以及插件。

↑

Figma ↑

Adobe XD ↑

↑

接下来总结一下

如果分别用一句话总结他们的核心特点，那就是：

群众基础强大，“功能不够，插件来凑”，Mac独宠

Figma云端软件，协作无敌

Adobe XD 大厂软件，多软件协作便捷

设计与动效融为一体

关于

它是一款最早在UI设计师当中流行起来的软件, 只是它只能在mac电脑上得以使用, 如此一来便将好多人阻挡在了门外。它受到了后起之秀Figma、Adobe XD相当大的冲击, 不过这也推动了其朝着更好的方向去发展, 像是它也着手开始加入实时协作的功能。然而不可否认的是它当前仍然在UI设计工具里占据首位。

由于要实施付费使用, 再加上我们所处的使用环境, 它自身所带的诸多功能, 我们要么用不上, 要么不好用, 我们能够借助插件来达成。其插件系统相当强大, 众多工具都有针对开发插件之举, 诸如蓝湖设计规范云、墨刀、摹客等。

关于Figma

云端特点, 让Figma能在短时间内被行业追捧, 社区作用及其协作特性同样如此, 而作为典型代表的它, 是“后软件时代”的存在, 不管你认与不认这种趋势, 它就在那。

但就我们国内的使用环境，还存在一些不好的体验：

首先, 存在一个被众多人指责的依赖网络的状况, 即便处于有网络的情形下, 也存在加载进程较缓慢的可能性, 并且或许还需要更为合理的上网手段。这一体验着实欠佳, 然而却不会对其正常运用产生阻碍。可是, 身为UI设计师, 难道不去频繁察看一些设计网站应当吗, 科学的上网方式难道不该属于我们UI设计师的一项基础技能吗?

一个情况是前端交付方面存在问题, 这个问题表现为它对蓝湖不予以支持, 换个说法就是蓝湖对Figma不提供支持, 而在我们国内呀, 有好多团队都在使用蓝湖这件事, 致使它迁移成本变得比较高。

Figma较为知名的是其具备的实时协作功能, 存在多个人能够同时针对一个文件展开编辑的情况, 如此这般的体验着实是很棒的。

关于Adobe XD

Adobe XD在路径编辑方面表现得很薄弱, 就连轮廓化描边这一操作都得借助插件才行, 向Adobe官方进行询问, 得到的回答是后续有可能会增添这样的功能, 当下建议从AI导入, 或者借助Astui插件来实现, 好吧, 毕竟人家是行业大佬, 一切都由人家说了算。

Adobe XD的实时协作需要软件版本一致。

Adobe XD的重复网格+自定义数据填充很方便。

还有一显著特点的Adobe XD, 它属于Adobe系列, 多软件协作是特别方便的, 像是直接于ps之中编辑位图, 直接导入AI文件, 直接导出到AE去做交互动效。

Adobe XD 的组件没法用, 同时共享也不行, 不过这个问题解决起来并不困难, 在我的教程当中是会阐述到的。

关于

最大的特点就是直接做动效，就像是+的合体。

响应式布局的核心是用百分比的单位；

目前没有多人实时编辑，但有多人实时讨论；

是众多产品中的一个，包括 Cloud、 、 DSM。

当中的DSM的服务目标对象到底是啥, 简略点表达恰如蓝湖提供的助力打造的设计规范云这种情况。又要不然是不是该说设计规范云跟DSM相近仿佛。

Cloud当中包含了Craft插件, Craft插件是运用在ps之上的插件。

如何选择

只要不是用ps就是进步

1、根据团队使用情况选择

2、如果是萌新用户建议选择Figma或Adobe XD

3、如果网络不允许可以选择Adobe XD或

4、如果想探索更多的不同可以选择

5、软件不是最纠结的，最主要是适合自己的

他们之中, 每一个都有着存在体验欠佳之处的情况, 然而呢，他们无一不是处于快速地进行更新的状态, 这样的情形, 很好地展现出了那种彰显快速迭代特征的产品思维。

后记

上面所提及的软件功能, 数量诸多大多经过亲自予以测试, 然而不可避免会存在错误以及不足之处, 在此欢迎大家前来予以指正！

我的这篇文章正在撰写的同一时刻, Adobe于10月20日举办了一年一度的Adobe MAX大会, 大会的主要涵盖内容是: 新的应用, 新的功能以及速度更快、更为轻松的协作方式, 有兴趣的同学可以观看一下这个时长为60秒的短片, 点击进行查看。

也是在10月20日, Adobe XD发布了34版本, 此版本有新增功能, 包括3D变换, 还有组件嵌套, 以及用于团队协作的Cloud库, 并且增强了智能布局, 共同编辑从bate版变为正式版, 还有更多的插件。

3D变换, 做带透视设计之外, 还能结合Adobe XD的自动动画, 做出更多效果, 以下是我的一些简单尝试, 期待大家创作出更多脑洞大开的效果。

於10月之際, 亦進行了69版本之更新, 增添了助手功能, 增添了字體嵌入功能, 增添了組件管理功能。

Figma近来实施的变化里, 涵盖了诸多功能迭代, 像是组件调用运作方面的优化, 还有原型环节的强化等, 并且其作出预期规划, 将在11月把Auto功能予以更新。

如有侵权请联系删除！