UI界面设计工具都在这里了，Sketch、XD、Figma、即时设计哪个好？

好辅助工具让构思很漂亮降落

二十年前，那时候的结构雕塑家还多于PS一类应用软件较旧，而现如今操作形式界面专供的结构设计应用软件已经多到用手掌都数不回来。不论你是将要迈入这个金融行业，或者在结构设计应用领域纵情十多年，介绍捷伊应用软件都能开拓你的潜能，让你的设想和创意设计更融洽的破冰。

那时和他们主要撷取目前极为杰出的应用软件各别的民族特色，以及其适用于的结构设计覆盖范围。所推荐的应用软件整体分成附注：操作形式界面辅助工具（screen design tools）：Sketch、Figma、Invision Studio、Adobe XD、即刻结构设计。

操作形式界面辅助工具20年

当他们迈入第三个创世纪，网络的大潮抹杀了他们的日常生活形式。在此之后，由于网络商品服务于数以千计的客户群，其操作形式新体验的商品质量也显得分外关键，可视化新体验结构雕塑家而此全捷伊业余也继而问世。也是在2003年，Axure RP 的第二个版问世，可视化新体验结构雕塑家也有了自己的劳动生产率辅助工具。2020年，已近愈来愈多的操作形式界面工具陆续出现，并愈来愈成形。上面他们会对每一个结构设计应用软件做详尽的预测和对照，协助他们更快的优先选择适宜你的结构设计应用软件。

这儿也给他们撷取他们相关联的自学中文网站，钟爱的老师可以广度自学。

Figma：https://figmachina.com/；《Figma此基础入门教程》

Sketch：https://oursketch.com/；《UI结构设计技法-Sketch教程》

Adobe XD：https://xd.94xy.com/；《Adobe XD零此基础教程》

01、Sketch

图片编辑应用软件Sketch致力于成为服务UI结构雕塑家的必备辅助工具，瞄准结构设计金融行业内的唯一巨头Adobe，听取用户的意见和建议，反其道而行，放弃了Adobe旗舰商品Illustrator提供的众多功能，主打轻量级、实用，信奉“商品的广度大于广度”。

2008年，荷兰特温特大学计算机专业彼得·欧姆弗利被要求结构设计一个简单的绘图应用。那时候平面结构设计应用软件公司Adobe已经有丰富的结构设计辅助工具，所以彼得准备开发一款又快又轻巧的结构设计辅助工具。Sketch便继而问世，2008年，Sketch推出封闭测试版，自那以后，Sketch聚拢了一批小规模的忠实拥趸。现如今，sketch已经成为炙手可热的UI结构设计辅助工具。

【应用软件优势】

Sketch从一开始就有非常明确的定位，他不像PS或者AI一样提供许许多多的功能，而是只把最此基础常用的功能加入进应用软件中。保证应用软件轻巧的体积，和快速的响应是Sketch的第一竞争力。

除此之外，Sketch另一个特点就是拥有很多改善使用新体验的小结构设计。Sketch最实用和受欢迎的功能之一是伴侣应用Sketch Mirror，用户的移动设备和电脑端Sketch能协同工作。结构雕塑家可以连接iPhone到Mac上，并在移动设备上实时测试自己本地端的结构设计。现在听起来这没什么，但在2010年，这绝对是商品的杀手锏之一。Photoshop和Illustrator也没有类似的功能。对于UI结构雕塑家来说，Mirror节省了许多时间和精力。

Sketch还拥有非常强大的第三方结构设计插件库，各种应用软件本身不具备的功能都可以通过插件自有开拓。自动标注、切图，在线图标库，图表生成器等等，几乎涵盖了所有你想到和想不到的功能。

经过12年的不断迭代，Sketch的功能不断饱满，并且愈来愈偏向操作形式界面。Sketch Cloud能让你轻松的和团队共享结构设计文档，直接在网上查看自动标注和切图；

强大的组件库，为项目制作一套组件库，能极大的方便后续的迭代和修改；

Sketch同样支持自适应规则的编写，你可以设置元素的适配规则，例如最小宽度，两边对齐规则等等；

Sketch还加入了原型制作功能，能直接制作界面的简单跳转；

在最捷伊68版中，更是加入了文字样式和图层样式库，结构雕塑家可以直接保存自己制作的样式，然后在其他控件上直接复用；

Sketch好用的功能还有很多，但到目前为止制作团队还没有开发Windows版的计划，所以想要新体验它的高效与便捷，你需要先拥有一台Mac电脑。Sketch的定位12年都未曾改变，它就是一款专门用来做操作形式界面的应用软件。它开创和建立了而此全捷伊辅助工具类别，也是后起之秀不断模仿的标杆。

02、Figma

Figma是一个非常年轻的商品，它在Sketch开始流行的时候才正式问世。所以，它几乎继承了Sketch所有的此基础功能，很多初次接触的结构雕塑家都会认为它只是Sketch的网页版。

Figma的创始人相关联用软件一直秉持的理念，就是应用软件都应该是在线的。从前的应用软件因为浏览器和 Web 技术的瓶颈无法在这方面取得飞跃，但现如今 WebGL、 WebAssembly 等新兴 Web 技术的出现，一切都变了，利用这些技术可以在浏览器中构建出快速稳定高效的应用软件。

也就是说你可以在你的ipad、手机、甚至智能电视（只要你愿意）上修改你的结构设计文档，听着就很有魅力。

【应用软件优势】

Figma的核心优势便是来自于Web开发的好处。在线编辑能让你的文件再也不怕丢失，能非常好的管理你的文件版。其次，它解决了传统结构设计团队中最麻烦的多人协作问题。就像当你第一次接触Google Doc时感受到的那股魔力，沟通和协作的成本大大降低了。最后，基于web的开发也让应用软件的运行效率突破了硬件性能的限制。

Figma可以说是站在了Sketch的肩膀上，这让它显得更加杰出：

1.随时随地跨设备启动工作

2.结构雕塑家、非结构雕塑家之间的实时协作

3.响应速度远超 Sketch

4.拥有一套覆盖整个结构设计流程所必须的功能

5.集中的结构设计资产的管理和共享，可以单独更新

6.基于 Web 的插件生态

Selection Colors的功能，无论要一次更换大量颜色或更改相同颜色都很方便，在Color styles可以建立自己的颜色系統。

Figma在此基础功能上和Sketch区别很小，在一些辅助工具（比如钢笔辅助工具）上做了一些优化创新。所以在使用新体验上基本还原了Sketch。

03、Invision Studio

Invision Studio是起步较晚的结构设计辅助工具，它的前身是一个Sketch的外动效编辑器。

他们都知道Sketch只支持Mac OS，而Figma却又无法保存本地文件，Invision Studio同时弥补了这两大问题，它同时支持Mac和Windows系统，甚至可以直接打开Sketch的文件。

【应用软件优势】

从2018年初才开始测试上线的Invision Studio目前才到1.28的版，基本与初始版没有太多的改变。应用软件主打的几个民族特色功能包括：

2.结构设计共享系统，可以理解为Sketch“组件“功能的2.0版，能独立管理

3.快速原型制作，这个本来就是 InVision 的拿手好戏，他们只是把原有的潜能融进了新商品，解决了整个结构设计流程的一些必要环节的痛点，例如结构设计评审、用户测试。

4.可视化动效调节，新辅助工具中不但实现了界面跳转，还可以做出花式跳转，这个也是原本 InVision 的功能。

5.协作结构设计，这个概念不同于Figma的在线多人编辑，它只是在线的浏览和展示结构设计稿，然后其他的职能可以进行批注和讨论。

Invision Studio初次上线之时一度被结构雕塑家们誉为“来自未来的结构设计辅助工具”“最好用的操作形式界面辅助工具”。从它涵盖的功能来看，他们可以发现它的聚焦点与Figma完全不同，它是在向操作形式界面的下游开拓。这也是操作形式界面应用软件近几年所呈现的一类趋势，“全链路”、“全栈式”。Invision Studio不光能让结构雕塑家完成操作形式界面这一环节，还能直接制作原型和丰富的可视化动效。

但是Invision Studio的更新速度和用户量并没有像众人所期待的那样一路高歌猛进，“全链路”的功能是否真的适宜大多数的结构设计者，也值得大Invision Studio家去思考。

04、Adobe XD

Adobe想必他们都非常熟悉，是结构设计应用领域的辅助工具老大哥，有无数的结构设计创意设计辅助工具。但不知为何，在操作形式界面发展了十十多年时间里，Adobe就没有为操作形式界面提供相关的辅助工具。直到Sketch拥有了数千万的用户之后，Adobe才后知后觉，开始了操作形式界面辅助工具的研发。

Adobe XD在2017年十月第一次和他们见面，并宣布同时拥有Mac和Windows两个版。XD在界面布局上不再使用自家（PS）的传统布局，而是沿用了Sketch的轻量化布局。XD的迭代速度非常快，每个月都会推出捷伊功能。

【应用软件优势】

Adobe XD大有要干掉Sketch的趋势，虽说此基础功能都抄自Sketch，但是通过多次的迭代，Adobe XD已经拥有了众多令人喜爱的民族特色功能，并让人赞叹。看起来它的发展速度远大于现在的Sketch。

Adobe XD 民族特色功能列举：

1、Repeat Grid

许多界面都有重复的元素出现，像是文章、撷取按钮等等，要逐一复制粘贴非常麻烦，不过透过Adobe XD 内的Repeat Grid，他们可以轻易制造到重复元素。而在Repeat Grid 内，元素的间隔都是一致的，可以自行调整间隔来呈现最合适的界面。

2、互动：Auto-Animate

在网页中，界面互动有时会用到CSS3 的Transition 效果来制造滑动的动画效果，例如是选单收合等。在Adobe XD，他们的互动类型可以使用Auto-Animate 来模拟效果。

使用Auto-Animate 有几个注意事项。首先，元件必须在两个Artboard 出现，并要同一名字；第二，两个元件必须先建立Interaction 并设定成Auto-Animate，这样当元件移出Artboard 覆盖范围时才不会被当成Pasteboard；第三，除了相同元件要设定Auto-Animate 之外，触发事件的元件也要设定成Auto-Animate。

3、与PS互通

现在你可以直接用XD打开PS文件，也可以从XD中优先选择内容使用PS打开并编辑；这样就可以在辅助工具之间无缝衔接而不需要反复的导入导出。

4、不一样的组件库

组件库想必他们都很熟悉，大多数的应用软件逻辑是，当你修改一个组件时，所有相同的组件都会被修改；而在XD中，组件被加入了父子集的概念；当你修改组件库中的组件时，你的每一个操作形式会影响每一个组件；但是如果你修改的是一个复制而来组件，你的修改只会对这个实例产生影响，并且这个影响会覆盖主组件的原本样式。这让组件库不再死板，能很好的适配多个尺寸；

这种组件的管理逻辑可以说比Figma的自由度还要高，鼓励结构设计者将所有的结构设计进行模块化管理。模块化的好处是当你下次做其他项目时，仍然可以使用，可以极大的提升你的结构设计积累。

5、间距管理

当他们做结构设计的时候，一个很强迫症的事情就是如何对齐，以及我的间距尺寸是不是都统一了。Adobe XD就提供了这样一个专门管理间距的组件；你只需要把元素都放入一个组中，就可以整体调整这个组内的间距，应用软件会自动识别他们之间的对齐关系；这个功能极大的节省了结构雕塑家的时间，同时让你的结构设计稿有更强的规范意识。

05、即刻结构设计

前面说到的那些应用软件，虽然各有民族特色，但毕竟都是老外开发的应用软件，来到中国的市场后，或多或少有些水土不服。比如 Figma 服务器在国外，启动应用软件时加载就会很慢。所以真正更加介绍中国UI结构设计师，更适应中国网络环境的UI结构设计应用软件，还是要数国产的UI结构设计应用软件，而【即刻结构设计】就是这样一款UI结构设计应用软件。

新体验地址：http://www.xxriji.cn/tool/jike

这款软件，可以说是后来居上的典范，其上线于2020年，萌生于UI结构设计应用软件群雄逐鹿的2016年（前身为：即刻原型），其融合了XD、Sketch、Figma应用软件的优点。就单说其支持云端素材库这功能，就和前辈们XD、Figma、Sketch等应用软件拉开了差距。

现在App应用软件都有的：日间模式、夜间模式，即可结构设计这款UI结构设计应用软件，也是安排上了的。然后UI结构雕塑家用了这款应用软件，可以一站式交付给开发工程师，不像sketch、XD这些传统UI结构设计辅助工具，还需要借助第三方辅助工具来标注、切图，这无疑是大大提高了团队协作效率。

【应用软件优势】

① 金融行业趋势：各大公司都在改用在线结构设计辅助工具，提高效率，其中很多都用即时结构设计；

② 全平台：不受电脑系统的限制，不用下载，打开浏览器就能用；

③ 功能全：结构设计功能丰富且强大，可高效满足各种矢量结构设计需求；

④ 易上手：操作形式简单，有 PS、Sketch 等应用软件此基础可直接上手；

⑤ 资源多：资源广场中的大量免费结构设计素材，一键保存使用；

⑥ 服务好：客服响应快，加入客户群，任何问题实时反馈解决；

⑦ 免费用：所有已经开放的功能，都能永久免费使用。

相比Figma、Sketch、AD的具体优势我就不一一细说，他们点击放大图片一看便知！

现在我要做个界面、或者网页结构设计，基本上都是直接用即刻结构设计，打开浏览器就能开工，省去了应用软件安装时间，文件自动保存云端。即便是换了一台电脑，登录账号又可以接着工作，真的太爽了！我强烈所推荐他们使用！点击下方卡片，注册账号即可使用。

温馨提示：这款UI应用软件的此基础功能，是完全免费的。收费项目仅限于权限管理、数据安全等服务。应用软件无文件数量、容量限制、无团队协作人数限制，妥妥的国产良心。

总结

以上就是对目前已近的主流操作形式界面辅助工具的不完全介绍。从10年前Sketch挑战PS、AI，树立操作形式界面辅助工具而此崭新品类，到现如今捷伊结构设计辅助工具不断出现，试图挑战Sketch的江湖位置。辅助工具应用软件的不断更新，也在倒逼结构雕塑家们去自学捷伊技术，以及产出更严格的结构设计稿。

如何去挑选适宜自己工作的结构设计辅助工具，我在这儿谈谈我的一些看法。首先，目前这四款软件的此基础功能差别并不是很大，都可以满足基本的工作需求。

如果你是喜欢尝试新鲜事物，自己做出判断的话，可以都使用并介绍后再做出优先选择。那要注意的是，目前Sketch只支持Mac系统，而其他应用软件都有双系统的版本可以优先选择。

如果你处在项目团队中，并且非常注重项目文件管理，那我所推荐Figma；Figma所有内容都是实时在线编辑，且有很好的版管理系统，能很轻松的实现大规模系统的多人协作结构设计。

如果你对协作的需求没有那么高，往往是独立完成结构设计，那Sketch和XD都可以。Sketch的优势在于它本身功能非常干净，且有极其丰富的可开拓性，所以你可以自己将其定制成你想要的样子。但Sketch终究是小作坊的商品，所以随着体量的逐步上升，也开始出现应用软件卡顿，优化不到位的情况。而Adobe XD由于背靠大厂，发展非常迅速，并且加入了很多实用功能，虽然现阶段插件数量和功能不如Sketch丰富，但未来大有会超越的势头。对我来说这两者最大的新体验不同其实来自操作形式习惯，所以你可以两者都尝试，然后根据你的使用习惯来做优先选择。

最后，最不所推荐的可能就是Invision Studio；虽然它有着很强的原型制作功能，也拥有所有的结构设计辅助工具该有的功能，但是常年不更新，少有新功能加入，逐步让人对它未来的发展失去了信心。而且在原型制作方面也存在大量可替代的应用软件。如果你在工作中经常需要结构设计概念稿，需要从可视化线框稿到高保证UI界面的一整套工作流，这倒是个不错的优先选择。

最后一点，目前除了Sketch是收费应用软件之外，其他都采取订阅收费制。也就是多于当你用到多人协作或者多文档在线共享时（企业模式）才会收费。

—

以上就是常见UI结构设计应用软件Sketch、XD、Figma、Invision Studio的大致介绍，如需系统自学更多专业UI知识，请参考：www.ui100.top/163

参考资料

网易雷火UX用户新体验中心，地址：https://mp.weixin.qq.com/s/HaQQSPCbByo1R9Zh6J336Q

（完）