UI设计软件Sketch还是Adobe XD哪个比较好用？

成为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.「电脑（作业系统）支援」 Sketch - Sketch 多年以来都只支援MacOS 系统的电脑，因此在初步购买电脑时，大多数的设计师会推荐使用MacBook Pro 电脑，或是iMac 台式机等，但相较于PC 电脑来说，价格稍微贵了一些。 Adobe Xd 的问世可以说是解决了这个入门门槛，支援Windows 以及MacOS 双作业系统都可以安装使用，如果团队协作时也不用担心对方的电脑能不能开启专案档，另外因为不少大学机构以及企业的硬体装置都是PC（Windows）电脑，所以大大地解决了以往没有专用UI 设计软体的麻烦。 比较需要注意的是，Windows目前仅支援Win10 Ver.1703以上版本。 3.「绘图功能」 Adobe Xd - 以向量绘图来说，Sketch 软体内建的工具更丰富，尤其是渐层的部分我个人觉得很好用！也比较多细部设定可以操作；Adobe Xd 内建的基本绘图工具较少，单纯做介面还够用，要进行插画绘制就比较辛苦。 但其实Xd 这项产品是故意这么设计的，主要是用来搭配同为Adobe 家的Illustrator 以及Photoshop 做设计。现在Adobe Creative Cloud 是走订阅制，可以一次使用全套的Adobe 软体，也就是说用了Xd，要顺便开Ai/Ps 只需要安装一下就可以使用。 我们可以在Ai 先画好图，直接贴上Adobe Xd，或是直接用Xd 开启.psd 的档案，图层以及图形设定大多数都会保留下来*，可以直接接续设计流程。 Adobe Xd 的绘图工具简单易懂   Sketch 的绘图工具较多，且能自定义面板。 4.「软体轻量化」 这两款设计软体有个很棒的共同点，就是都属于轻量级的工具。 也就是电脑在开启并执行设计的同时，比较不容易当机或是卡顿，相较于其他像是Ps/Ae 这样需要大量渲染处理的工具来说，Adobe Xd 以及Sketch 在使用时都相当顺畅。 这样是为了在做UI 设计时，能展开大量的画布（Artboards），并进行各自页面的处理；有时候一个稍微大一点的网站可能就有30 个、50 个以上的页面，为了画面间的连贯性，一定是都会放在同个专案档的，这时候轻量级的软体才能负荷。 至于电脑硬体的选择上，如果是初阶的电脑（比如说MacBook Air）在「学习」上两个软体都是没问题的；但如果在工作或是在公司使用，建议一定都要使用到MacBook Pro 或是以上的规格，我目前工作主力机是MBPR 15"（16G RAM、512GB SSD、i7处理器）以符合实际工作上时可能会多开软体、同时使用效能怪兽Chrome 以及开启团队协作工具等等。 5.「扩充外挂」 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 最强的就是跟同家的Ai / Ps / Ae 水平的整合，除此之外A 社身为地球上最大的数位产品公司有跟很多知名企业的产品做连动，可以透过Plugin 或是软体内进行协作，频繁地更新也让Xd 与第三方工具间的相容性更好。 Adobe Xd 的部分合作第三方工具。 Sketch 的部分合作第三方工具。 相较之下Sketch 显得更新创感一点，因此有很多数位产品开发上很贴心的设计，也跟时下最新的生产力工具整并在一起，比如说可以用版控Abstract 或是Plant 等，在GitHub上面也有许多独立开发者所制作的外挂可以使用。 由于各自支援的第三方工具青菜萝卜都有，难分高下；如果团队在设计开发流程中有刚好能配合上的工具，在设计流程上就很加分。