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