干货！所有UX设计过程所需工具都在这儿了,不能再全了

产品壹佰 • 5年前扫码分享

以下内容由 Mockplus 团队翻译整理，仅供学习交流， Mockplus是更快更简单的原型设计工具。

据说，真正专业优秀的UX设计师是不会介意使用哪款工具。因为，只要能力足够，即使条件不同，工具不同，也能设计出让人眼前一亮的作品。或许，这样的认识本身并没有什么大问题。但，现今，设计师明明拥有如此优质的条件和选择，为什么还要委屈自己，使用一些不顺手或不好用的工具呢？

科学技术不断发展，也为设计师提供了更多高效实用的设计工具。那么，作为常常需要顶着巨大压力，在严格期限内制作出高质量作品的UX设计师，为什么不直接选择一系列高效的设计工具来提高工作效率呢？

不用担心。本文将根据相关设计经验和研究，为广大UI和UX设计师介绍一系列实用高效的设计工具。让我们一起来看看，它们都有什么吧：

干货！所有UX设计过程所需工具都在这儿了,不能再全了

线框图和原型设计工具

Sketch

Sketch是目前为止UI设计师群体中最受欢迎的设计工具之一。其最大的优势就是为用户提供了简洁易懂的设计功能。而且，它也可作为原型工具用于创建图标和插画。Sketch是一款基于矢量，并能够通过其工具面板，实现层级以及形状编辑和设计的工具。

此外，sketch还为用户提供了有效的设计指导。例如，设计师可以简单按住Alt键来查看组件的具体尺寸，以及组件之间的间隔。而且，因其简单的功能设计，软件本身能够更加简洁轻便，运行速度更快，从而更加有效的节省设计师时间和精力！然而，有一点不太满意的地方就是：Sketch只拥有Mac版本。Windows系统是无法使用的。

AdobeXD

全新的UI和UX设计方法的出现，鼓励了很多软件开发人员改进和升级他们的产品，尤其是创建了一些全新的，侧重于某些特定方面的（例如布局结构）的产品。而Adobe集团也不例外。于2016年推出了最新的Adobe XD (体验设计)。这款软件作为Photoshop和Illustrator的替代品，在UI和UX设计师群体中，获得了相当高的评价。

Adobe XD是一款专为UX设计师创建线框图，交互式原型以及完成矢量设计而开发的设计工具。一经发布，就吸引了一部分Adobe迷的回归，尝试使用和熟悉其关于UI设计方面的新功能。而对于那些不太了解网页设计的新手用户来说，XD界面使用和理解起来，就有些困难了。此外，到目前为止，Adobe XD支持Mac和Windows10的操作系统。

Figma

Figma是当今最流行的设计工具之一。它是一款能为UI设计师带来创新设计方案和可能的设计工具。首先，它是一款基于web的专业设计工具，允许设计团队在线实时协作，完成页面设计。而且，设计师在使用过程中，还能够轻松导出相关设计的CSS代码，以加强与开发团队的沟通协作。用户注册之后，即可免费创建线框图，原型以及矢量图标。但，这些功能仅仅针对个人用户免费。团队用户，则需先付费。此外，该款设计工具适用于多种操作系统。

Lunacy

Lunacy并不能直接用于创建线框图，但却在设计师创建线框图的过程中发挥着巨大作用。这是因为Lunacy允许Windows用户打开并修改各种Sketch文件。所以，对于那些有成员使用Windows系统的设计团队来说，它会非常实用。换而言之，在流程图创建的各个阶段，Lunacy都能让整个设计过程更加高效，而且对所有设计参与人员（包括设计师，开发者，客户以及管理人员）都很友好。

干货！所有UX设计过程所需工具都在这儿了,不能再全了

交互原型设计工具

Mockplus

Mockplus是一款更快，更简单的交互原型设计工具。封装了超过3000个矢量图标的强大图标库，组件库以及样式库，方便设计师简单拖拽或点击，即可快速地创建所需Web或App设计原型。支持Sketch 图片导入，实现设计理念轻松快速的原型化。而且，为提升设计效率， Mockplus提供了8种演示和分享方式，包括Android和iOS设备预览，方便设计师根据具体情况分享，测试和迭代设计想法，及时收集设计反馈。

其最新团队版和企业版推出的团队协作和管理功能，对于公司设计团队协作完成交互设计，管理团队成员，也是非常实用。此外，Mockplus支持Mac和Windows各版本的操作系统，设计师无须担心因团队成员操作系统的不同，而担心设计进程和效率。

Marvel

Marvel是一款基于云端的交互原型设计工具，无需任何编码。设计师可以简单下载Sketch或Photoshop线框图，甚至仅凭一张纸上草图的照片，创建逼真的移动App或Web原型。Marvel提供了创建无限项目并允许为前3个项目添加评论的免费服务。当然，设计师也可付费，获得自由创建项目，添加评论，删除Marvel商标以及其他附加服务。

InVision

摹客，定制你的设计规范

设计系统

InVision也是一款免费的交互原型创建工具。 InVison之所以受欢迎，是因为其支持Sketch和PhotoShop文件的轻松导入，以构建动态设计。而且，设计师可以通过链接网页来模拟真实网站或移动应用的跳转和功能，制作出更加真实的交互原型。此外，InVision为提升反馈效率，还提供了用户可直接在原型上添加评论的功能。

其另外一个特点就是：能够在不同的“columns”中组织各种界面组件，并展示其状态，例如 "待办事项"、"正在进行" 或 "已审核"。如此，客户和设计师就能够更有效的管理各种工作流程。

Principle

Principle是一款简单且旨在创建动态界面的设计工具。其突出的特点在于支持离线设计。如此，用户工作进度就不会受到网络连接情况的影响。而且，用户创建的交互原型能够简单的转化成GIF图片或视频，以便更加轻松的分享到Dribbble设计作品集或其他地方。加之，由于其界面与Sketch非常的相似，对大部分设计师来说使用起来也十分简单方便。此外， Principle支持iOS设备预览。然而，不幸的是，Principle只支持iOS系统。对于Windows用户来说就得另找合适的工具了。

UXPin

UXPin团队，作为公认的UX设计领域的专家，经常在各种书籍和文章中分享其的设计经验和知识。他们开发设计的产品，UXPin编辑器，是一款基于Web的原型工具，支持创建线框图和高质量原型，并将它们轻松转换成交互式原型。而且，设计师可简单导入Sketch或PhotoShop图片，即可创建各类原型。此外，此款工具还可为开发人员自动生成风格指南和设计规范，提升工作效率。

干货！所有UX设计过程所需工具都在这儿了,不能再全了

颜色选择工具

ColorHexa

ColorHexa是一款基于Web，且能够帮助用户生成有效配色方案的免费设计工具。设计师直接在搜索框内输入颜色值，即可获得相关颜色详情，例如色彩，阴影和色调，以及其它替代颜色和配色方案。此款设计工具最大的优点之一就是，展示了色彩将如何被一些拥有视觉缺陷的人群所感知。如此，设计师就能够确保其设计对于受视觉缺陷影响的人们来说也是非常友好的，从而提高其设计的可访问性。此外，ColorHexa还为用户提供了不同格式色彩的替代方案。

Paletton

Paletton，作为UI 设计师们常用的色彩选择工具，是一款免费的Web工具，能够帮助设计师选择颜色，创建更加舒适和谐的界面设计。其功能设置也非常简单：用户只需在色轮上选择需要的色彩或直接输入色彩值，就可获得漂亮的配色方案。当然，设计师也可简单选择一种配色方案，然后查看在不同色调下，类似的配色方案。

FlatUI Color

扁平化设计一直很受欢迎。这也是为什么拥有一款能够帮忙设计师们选择扁平设计颜色的工具已成为必然的原因。而Flat UI Color就是这样一款提供了丰富扁平设计配色方案的网页工具。其提供的所有颜色都包含十六进制代码, 允许设计师直接粘贴复制到一些常用软件,比如 Photoshop，或风格指南中使用。但有一点局限的地方就是，Flat UI Color只对经常使用扁平设计的用户有用。

MaterialDesign Color Tool

Material Design Color Tool，作为大部分设计师所熟知的Googlematerial design 的一部分，是一款基于Web的免费应用。此款应用专注于为移动端设计提供配色方案。设计师可以在其移动模板上预览各种配色方案，从而选择更适合的配色。此外，使用该款软件时，用户也能找到相关配色方案的可访问性数据，并在需要的时候对其进行调整和修改。而这，对于页面的可访问性设计非常实用。

Pictaculous

为寻找颜色设计灵感，许多设计师都会搜索大量漂亮图片进行参考。而Pictaculous能够帮助设计师分析这些图片中呈现的色彩，并给出类似的配色方案。用户只需从本地上传一张图片，就能获得拥有16进制码的色彩推荐。此外，这款工具推荐的配色方案还可以保存为Adobe Swatch文件，以方便后期使用。

干货！所有UX设计过程所需工具都在这儿了,不能再全了

排版工具

Google fonts

页面排版是数码产品Web或App用户体验最基本的影响因素之一。这也就解释了为什么拥有一款能够创建有效排版的便利工具是多么重要。

Google fonts是一款很受欢迎的免费Web应用，拥有超过600种字体。每一种字体类型都都可以应用到自定义文本中，以不同尺寸进行预览。而且，该应用还会显示每种字体的加载时间，确保用户不会花费太长的时间等待。此外，Google fonts提供了在产品中嵌入特定字体的相关数据，方便用户在HTML文档的右边部分复制粘贴使用专门为所选字体生成的代码。

Typekit

Typekit是一款经住时间考验的设计工具。在其字体库里，用户可以找到并使用各种各样的字体，例如一些常用的经典字体和一些全新的字体。而且，用户只需订阅，即可获得对所有字体的访问权限。该工具界面还清晰显示了字体相关的所有基本数据，比如字体粗细和样式等。更重要的是，它允许用户查看不同大小和不同颜色背景的字体。

Fontjoy

众所周知，字体配对是排版设计最大的难题之一。如今，现存数以千计的字体种类的情况下，完美配对的过程本身就会非常漫长，而这，对于工具本身的用户体验是非常不利的。而不同的是，Fontjoy就是一款使用便利，能够快速实现Google 字体配对的设计工具。用户可简单选择字体，并设置其属性，例如尺寸和粗细等。

此款免费工具能够从谷歌网络字体中直接获取一个完整的字体库，并把它们呈现在一个页面内。用户只需选择需要的测试字体，并设置好相关参数，例如页面字体尺寸，粗细，行距。然后，等待系统匹配就好。此外，用户还可以通过应用顶部的滑条来调节对比度或相似度。

Typetester

当设计师们无法在两种字体中做出选择时，Typetester能够帮助他们快速测试和比较这两种字体，从而更加快速的选择适合的一种完成设计。Typetester支持多种字体同页面预览，并同时显示相关字体数据，例如行距和字间距等参数。而且，Typetester还支持不同来源的字体选择，例如谷歌字体或苹果Mac默认字体，并通过调整字体大小、对齐方式以及定制文本和背景进行测试。

Calligraphr

定制字体是增加产品设计创意的一种有效方式。而Calligraphr是一款可以根据手写字样创建自定义字体的工具。用户只需下载一个模板，并手写一些字样。该工具即会识别并生成相应的矢量字体。而且，生成之后，用户还可根据需要，编辑和调整相关字体的详细信息，以改进这些自定义字体。

干货！所有UX设计过程所需工具都在这儿了,不能再全了

图标工具

Icons8 app

Icons8 app是一款支持Windows和Apple设备的应用，封装了超过6.5万各类数码产品图标。其图标库每天都会更新。Icons8还提供了各种引导，以帮助用户找到合适的图标，例如各种格式的 iOS、Android 和 Windows 平台的图标。而且，选中的图标还能够直接复制到Sketch、Figma 和其他工具中使用。此外，所有图标都能在编辑器内调整色彩和尺寸。Icons8支持100×100的PNG图标免费下载。如若用户希望获得所有图标的访问权限, 则需要先付费购买激活码。

Free IconMaker

当然，如若设计师并不喜欢网上的各种图标，还可以自己动手设计制作。而图标的自制可以使用一些可视化编辑器（比如Sketch, Illustrator, and Figma等）设计创建，也可选择一些免费的Web设计工具设计完成。而FreeIcon Maker就是这样一款能够帮助设计师们在线创建和编辑图标的工具。一旦注册，用户就可自由地使用所有的设计功能，例如下载SVG图标文件在软件内编辑。

IconJar

设计师们时常会下载数百个图标包，却找不出合适的一种应用到设计中。而IconJar是一个非常有效的组织者，将特定的图标封装在文件夹内进行分类。例如，如果用户需要一个名为“home”的图标，可以按其名称进行搜索，该工具就会显示所有来自不同集合的相关图标。尽管，现今IconJar只支持Mac系统，但不久就会发布其Windows版本。不足的是，该程序是需要付费的, 虽然它也为用户提供免费试用版。

干货！所有UX设计过程所需工具都在这儿了,不能再全了

协作工具

Trello

在项目监管以及信息流监管方面，个人更偏好Trello。因为Trello简单有效，清晰直观。具有一系列功能的”boards”和“cards”形成了清晰高效的协作系统。用户可以将任何任务划分成各种“sprints”，并通过实时更新和图像展示，显示任务执行进程。用户也可轻松设置期限 (即截止日期), 将任务委派给特定人员, 创建清单, 并标记出最重要和最紧急的任务。而更重要的是，它不仅是一个设计成熟的工具网站，而且也是一款快速有效的IOS和Android协作工具。这一点也使用户能够更快的获取反馈，从而节约时间和精力，简单轻松的实现项目管理。所以，Trello是设计师，项目经理和客户一起协作创建快速有效工作流的最佳工具。

Zeplin

一个成功的设计项目是建立在创意团队和客户之间有效交流和沟通的基础之上。而ZePin是一个能够增强设计师和开发人员之间协作交流的平台。其主要特点是拥有一个详细的风格指南生成器，以确保设计元素能够被准确恰当地应用。用户可直接上传线框图，并将它们添加到Zeplin的项目文件夹中，从而方便开发人员获得关于设计的所有数据，包括UI组件的尺寸、颜色和CSS推荐等。