设计先锋小编今天分享UI设计常用的工具，大家一起来学习吧

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

“你用sketch吗？”“不用”

“你用XD吗？”“不用”

“你用figma吗？”“不用”

“你用invision Studio吗”“啥？”

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

“MMP......”

我们今天所处的环境，互联网飞速发展，新的意识形态不断涌现，工作方式不断发生变化，开放、共享等理念被更多的行业更多的人理解，在这样的环境中效率显得越来越重要。好的工具和工作方式带来的是先进的生产力，比如Figma的异军突起改变了设计师传统的工作方式也正在改变着我们的工作理念，作为互联网设计师我们应该是互联网中的前卫者。

接下来我们看一下UI设计软件的现状和发展，不管有没有去使用它们，但设计师应该认识到我们所处的环境。

大约在90年代以前，我们可以给它起个名称，叫做“软件1.0时代”。“软件1.0时代”软件在自己的专业领域不断的改进，比如Illustrator1.0、Photoshop1.0 ，word1.0、金山的wps1.0 等，此时的软件最求的是功能的完善，系统的稳定等。  

来到2000年左右，我们可以称作“软件2.0时代”。“软件2.0时代”开始最求便捷高效的工作方式，多软件协作，比如2002年Adobe的创意套装Adobe Creative Suite，包括了今天大多数的Adobe软件。

1999年的WPS已经集成了电子表格和多媒体演示，2001年更名为WPS Office。

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

2010年前后我们可以称作“软件3.0时代”。随着技术的发展和普及，这个时代的软件开始加入“云”的理念，云端存储，云端共享，比如2013年Adobe的创意云Adobe Creative Cloud也就是我们熟知的CC系列，一个账号就可以在任意电脑上使用自己的资源。

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

2013年至今，我们可以称作“后软件时代”或者“软件4.0时代”，当然这只是主观的一个叫法，时间节点也未必科学。

2013年

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

    ·为发烧而生的小米销量开始被华为、OPPO、VIVO三家合力围剿；

    ·Papi酱依靠短视频吐槽拍出2200万元“天价”广告位后被逻辑思维撤资；

    ·滴滴与快的、优步之间的烧钱大战打的分外眼红最后也喜结连理；

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

    ·4G拍照正式发放；

     ......

这些和软件并没有太大关系，有些扯远了，跟软件相关的是，2013年ProcessOn在线做图工具的上线（国外同类型的产品出现的更早），ProcessOn是一款在线做图工具，主要用来绘制流程图，思维导图等，团队成员可以实时协作。更重要的是ProcessOn一个web应用，一个浏览器，一个窗口，全部搞定。ProcessOn在0销售成本下用户突破100万。这在一定程度上折射出软件的发展趋势：云端化、去平台化、共享化，传统的软件必将逐步被云应用所替代。

此后，国内的墨刀和摹客2014年上线，国外的Figma 2015年上线，Adobe XD 2016年上线，2017年的国内的xiaopiu上线，2020年9月xiaopiu推出“即时设计”，新版本的墨刀也加入了实时协作功能。看到国内的设计软件越来越优秀，非常的高兴和期待！2020年突如其来的变化，让无数人居家办公，团队协作，远程办公等工具和理念被更多的人注意到......

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

接下来我们看一下“后软件时代”的UI设计软件，今天要说的是目前主流的UI设计软件——Sketch、Figma、Adobe XD、Invision Studio

首先说明一下

1、上面提到的墨刀和摹客也是非常非常优秀的设计软件，功能也非常的完善，甚至一些功能比这些软件的体验还要好，墨刀摹客也是很好的选择。不过我们更习惯把墨刀和摹客看做原型设计工具，所以不在讨论范围。

2、还有一些很好的软件比如Framer、Affinity Designer，也非常优秀，但本人没有深入体验过加之国内使用者较少，所以不在讨论范围。

3、大部分同学依然使用的是PS，但PS算不上正经的UI设计工具(*^▽^*)，虽然它很强大，所以也不在讨论范围。

4、Sketch由于我们的使用环境所限，更像是一个传统软件，但它也为了保持竞争力不断地更新迭代，也可以通过各种插件实现团队特有的工作流。

5、Invision Studio是Invision众多产品中的一个，Invision包括Invision Cloud、Invision Studio、Invision DSM

“后软件时代”的UI设计软件具有共同的特点就是一站式设计——从线框、原型、设计、动效、讨论到协作一站式完成。

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

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

1、基础功能

首先说一下基础功能，所谓的基础功能就是本地化设计常用的，图形绘制、路径编辑、布尔运算、文本设置、图层样式、蒙版、模糊、页面设置、栅格等，这些功能和基本的操作Sketch、Figma、Adobe XD、Invision Studio的差别不大，甚至很像，相对比较简单，如果熟悉其中的一个其他的很容易上手，这里就不多做介绍。

2、组件系统

组件系统，概况来说组件系统就是方便设计师对组件、样式、颜色、文本样式复用，可以统一修改。

最近几年组件化设计思维越来越被重视，各大厂都有自己的组件系统，它是一种高效的工作方法及思维模式。

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

· Sketch、Figma、Invision Studio切换组件时可以下拉选择切换，XD的切换是直接拖动组件到原来组件上替换，可以用斜杠 / 命名对组件进行分组；

· Figma、XD的组件可以有多种状态，并且可以直接识别到sketch文件的组件；

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

· Figma、XD的组件更灵活；

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

Adobe XD ↑

Figma ↑

Invision Studio ↑

Sketch ↑

Sketch ↑

3、团队组件库

说到组件库就不得不说团队组件库，组件可以使设计师管理单个文件的设计资源，而团队组件库可以使我们整个团队使用同一套规范，一个组件有所改动，所有用到这个组件的文件都会自动修改，这对于团队协作是至关重要的。

Sketch的团队组件库

可以使用自带的Sketch Libraries，也可以使用苹果的iCloud ，蓝湖为Sketch量身打造的“设计规范云”使用体验也是超级棒！

Figma的团队组件库

Figma的团队协作本身就是大家共同编辑同一个文件，免费用户只能在一个文件里面使用组件，团队项目可夸设计稿使用，但需要是付费的专业版。

XD的团队组件库

把设计文件共享给团队成员，团队成员即可使用文件中的组件，并且可以共同编辑。

Invision Studio的团队组件库

Invision Studio暂时没有团队组件库，但它可以导入其他文件的组件，我们可以通过文件传送的方式间接实现组件的共享。

Invision Studio ↑

Adobe XD ↑

Sketch ↑

4、智能布局

智能布局是“后现代设计软件”的重要功能之一，它可以帮我们快速实现响应式布局。

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

· Sketch叫Smart Layout “聪明布局”；（这翻译好别扭o(*￣︶￣*)o）

· Figma叫Auto Layout“智能布局”；

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

· Invision Studio叫Responsive Layouts“响应式布局”；

其中Figma的Auto Layout可以实现更为复杂的效果，同时嵌套逻辑也更复杂。Invision Studio的Responsive Layouts的功能稍弱，只能实现一些简单的自适应效果。Invision Studio响应式布局的核心是使用百分比的单位。

Invision Studio ↑

Sketch ↑

Figma ↑

Sketch ↑

5、数据填充

数据填充是我们做设计的时候经常遇到的问题，就是填充一些头像、图片、文字等模拟的数据，它可以使我们的设计效果看起来更真实，代入感更强。数据填充可以分为两大类型：

一是随机的数据

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

二是自定义数据

定义自己想要的文字和图片。比如同时支持Figma、Adobe XD的Google Sheets插件。

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

· Figma可以通过Google Sheets插件实现自定义数据，或者用其他插件进行随机数据；

· Adobe XD可以直接拖动本地的图片和文本进行填充，或者使用其他插件；

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

Adobe XD ↑

Sketch ↑

Figma ↑