正文共：字13图
预估阅读时间：10分钟
成为UI设计师之前，得先学会哪个设计软件？
Sketch多年来都是UI（使用者界面设计）设计师主要使用的设计软体，再配合AdobeAi以及Ps进行制图，但Adobe推出了自家专用于UI/UX设计的软体「AdobeXd（ExperienceDesign）」之后，设计师们从此有了新的选择
今天这篇AdobeXd以及Sketch比较，我想在刚踏入UI领域学习时，不少同学都会有这样的犹豫，而这也是设计师上常见的问题，而很多人也为此要去买新电脑。但若已经很资深的朋友，反而不会去想要去学哪一套工具，原因我们会在最后做说明。
AdobeXd/Sketch基本介绍
AdobeXd
Adobe旗下一款全新且主打结合介面设计、建立原型以及跨平台体验设计的软体，将Wireframe、Design以及Prototype等UI/UX设计流程整合至同一软体中，并能直接导出标注元件与开发者进行协作。
Sketch
以其闪亮亮黄色钻石为人所知，由于是很早就以功能简单与UI设计专门为诉求而成为设计师惯用软体，并因此在网路上大多数的教学文章都以推荐Sketch为主，业界中较资深的设计工作人员也多使用以此为主轴的设计流程。
AdobeXd/Sketch使用比较
接下来，我们撷取各自的设计使用情境中，共8个实际的比较与参考星等。
1.「容易上手程度」
AdobeXd-
Sketch-
如果你是设计系大学生，或已经熟悉Illustrator/Photoshop等绘图软体，那不管是AdobeXd还是Sketch都是很容易上手的，因为这类专门用于UI介面设计软体的功能都做得相当简单，介面也是。
就算都没接触过相关软体，为数不多的基本功能对于新手来说的门槛也不是非常高。
AdobeXd软体界面
Sketch软体界面
2.「电脑（作业系统）支援」
Sketch-
Sketch多年以来都只支援MacOS系统的电脑，因此在初步购买电脑时，大多数的设计师会推荐使用MacBookPro电脑，或是iMac台式机等，但相较于PC电脑来说，价格稍微贵了一些。
AdobeXd的问世可以说是解决了这个入门门槛，支援Windows以及MacOS双作业系统都可以安装使用，如果团队协作时也不用担心对方的电脑能不能开启专案档，另外因为不少大学机构以及企业的硬体装置都是PC（Windows）电脑，所以大大地解决了以往没有专用UI设计软体的麻烦。
比较需要注意的是，Windows目前仅支援Win10Ver.以上版本。
3.「绘图功能」
AdobeXd-
以向量绘图来说，Sketch软体内建的工具更丰富，尤其是渐层的部分我个人觉得很好用！也比较多细部设定可以操作；AdobeXd内建的基本绘图工具较少，单纯做介面还够用，要进行插画绘制就比较辛苦。
但其实Xd这项产品是故意这么设计的，主要是用来搭配同为Adobe家的Illustrator以及Photoshop做设计。现在AdobeCreativeCloud是走订阅制，可以一次使用全套的Adobe软体，也就是说用了Xd，要顺便开Ai/Ps只需要安装一下就可以使用。
我们可以在Ai先画好图，直接贴上AdobeXd，或是直接用Xd开启.psd的档案，图层以及图形设定大多数都会保留下来*，可以直接接续设计流程。
（*在Ai以及Ps少数复杂的图形不支援，详见官方说明。）
AdobeXd的绘图工具简单易懂
Sketch的绘图工具较多，且能自定义面板。
4.「软体轻量化」
这两款设计软体有个很棒的共同点，就是都属于轻量级的工具。
也就是电脑在开启并执行设计的同时，比较不容易当机或是卡顿，相较于其他像是Ps/Ae这样需要大量渲染处理的工具来说，AdobeXd以及Sketch在使用时都相当顺畅。
这样是为了在做UI设计时，能展开大量的画布（Artboards），并进行各自页面的处理；有时候一个稍微大一点的网站可能就有30个、50个以上的页面，为了画面间的连贯性，一定是都会放在同个专案档的，这时候轻量级的软体才能负荷。
至于电脑硬体的选择上，如果是初阶的电脑（比如说MacBookAir）在「学习」上两个软体都是没问题的；但如果在工作或是在公司使用，建议一定都要使用到MacBookPro或是以上的规格，我目前工作主力机是MBPR15（16GRAM、GBSSD、i7处理器）以符合实际工作上时可能会多开软体、同时使用效能怪兽Chrome以及开启团队协作工具等等。
5.「扩充外挂」
Sketch略胜；原因是多年来开发者们替其开发了无数的实用Plugin，做专案的时候常常遇到某个功能Sketch没有，但可以在全球最大男性交友平台GitHub上找到，或是偶尔逛到很方便的工具，可以加速流程效率。
相信每一位UI设计师都有自己一套常用的Plugins。不过长期来看有个缺点，就是许多民开开发者制作的Plugin可能不会一直保持更新，随着Sketch的几次改版后，可能就会有不支援的情况发生。
AdobeXd在去年也终于开放的Plugin的功能，我们可以直接搭配Google试算表、微软Teams，以及标注工具Zeplin等官方的插件，也可以使用许多第三方的外挂来协助我们进行UI设计。根据我的观察，AdobeXd的Plugin数量成长非常快，而且多是Adobe官方导入的，相较于Sketch的高手在民间，AdobeXd的Plugin在版本及稳定性上稍微好一些。
Adobe甚至还发布了帮Xd制作Plugin的设计师、开发者的加速器计画，补助奖金甚至进驻总部，从此可以看出Adobe对于UI/UX产业以及发展Xd的重视。
6.「独一无二的杀手级功能」
AdobeXd-
Sketch-
其实对已经掌握UI设计软体的资深设计师来说，包含AdobeXd与Sketch在内的软体都是长得差不多的，唯一会影响今天要打开什么软体的决策，除了专案或电脑硬体限制外，就是各个软体的「特色功能」。
AdobeXd的RepeatGrid做元件的快速布局先科普一下：除了基本的Assets元件库做常用物件的储存之外，AdobeXd内的Component则可以将UI中会重复出现的元件做归整，之后要修改时可以一次处理好。
其实这个Component功能在Sketch里也是有的，就叫「Symbol」。但AdobeXd有个很特别的玩法，叫「RepeatGrid」可以复制整排元件并进行快速排版。
这个功能肯定是基于UI上常见的设计师操作去设计的！
不论是做网页的贴文样式、电商的产品版面，或是展示user的资料栏位，在以往都是需要一个复制一个，然后去做对齐；透过AdobeXd的RepeatGrid可以快速地进行水平的重复，并且在做不同尺寸的排版时，同个物件也可以直接做垂直延伸。
这边有个小提示，就是如果你设计的元件内含切图标记，在设计稿最后导出的时候，不会因为RepeatGrid而重复出现，而是会相当聪明地只撷取原始元件的切图设定。
Sketch巢状元件NestedSymbol（Overrides）上面提到的「Symbol」功能在Sketch中行之有年，我猜这也是刚开始大多数UI设计师喜欢用Sktch的主要原因：元件化设计。
简单来说，你看平常用的那些网站啊、APP，其实有很多局部是重复的，像是最上面的Header、最下面的Footer，或是页面中的标题、按钮以及卡片式设计等等，这些重复性的元件如果都各自独立，那如果有天要调整一点点间距或换颜色，那不就要全部手动调整嘛？
透过元件化的Symbol可以将做好的母元件储存成模组，并直接复制沿用，这大大地加速了我们的设计流程。而且Sketch有更强的「巢状Symbol」可以把UI整理成一键切换的区块，如下图这样神清气爽的版面，也让整体的设计更一致地系统化。
8.「第三方工具相容性」
我觉得AdobeXd最强的就是跟同家的Ai/Ps/Ae水平的整合，除此之外A社身为地球上最大的数位产品公司有跟很多知名企业的产品做连动，可以透过Plugin或是软体内进行协作，频繁地更新也让Xd与第三方工具间的相容性更好。
AdobeXd的部分合作第三方工具。
Sketch的部分合作第三方工具。
相较之下Sketch显得更新创感一点，因此有很多数位产品开发上很贴心的设计，也跟时下最新的生产力工具整并在一起，比如说可以用版控Abstract或是Plant等，在GitHub上面也有许多独立开发者所制作的外挂可以使用。
由于各自支援的第三方工具青菜萝卜都有，难分高下；如果团队在设计开发流程中有刚好能配合上的工具，在设计流程上就很加分。
最后的总结
「你觉得Sketch还是AdobeXD哪个比较好用？」
UI设计软件领取
转载请注明：http://www.0431gb208.com/sjszlff/2187.html
