知识干货：每个原型都是一个重要实验？为你推荐最佳原型设计工具！

TOPIC:

Prototype

UI Design UX Design

Article：2022/07/21

这里是「交互设计全宇宙体系」知识栏目的第十一期~

「全宇宙体系」是由美国交互设计资讯独家原创性连载的关于交互设计的知识分享栏目，通过系统化、体系化地为大家带来干货推文，带领大家探索全宇宙体系中的“小行星”，收获一个个锦囊妙计~

（全宇宙体系 By美国交互设计资讯）

在上期文章中，我们为大家分享了关于线框图制作的知识内容。本期我们继续在专业技能星球遨游~一起来看看关于原型制作的知识内容！（戳一戳下方图片~回顾上期文章）

什么是线框图？快来看这篇文章！带你从线框图新手到真正的专家！

(专业技能体系 By美国交互设计资讯）

原型是简化的测试模型，用于测试和进一步开发计划的产品。一方面检查适用性，另一方面检查未来用户的接受度。在原型的帮助下，设计师可以提出问题并做出开创性的决定。

在 UX/UI 设计中，真实和数字原型使体验和测试从构思到最终产品的产品开发成为可能。

什么是UI/UX原型？

原型是设计团队或前端开发团队通常在设计过程中创建的产品的原始表示或版本。

原型的目标是在构建最终产品之前，测试设计解决方案的流程并收集来自内部和外部各方的反馈。

当团队根据用户反馈迭代地修改设计时，原型的状态是流动的。

原型是开发用户流程和界面设计的重要组成部分。它们允许设计师通过互动和引人入胜的产品展示他们的设计，从而让所有相关人员更好地理解设计。

利益相关者和潜在客户无需使用静态屏幕来收集反馈，而是能够在设备上单击要查看的产品样本。可以在设计过程的任何阶段创建原型，以帮助展示仅用文字可能难以表达的想法。

原型的三个维度

显示类型-用户界面如何显示？

绘制在纸上，使用设计软件进行可视化，以代码形式实现。

准确性-用户界面的详细程度如何？
纸面、线框（低保真）、屏幕设计（高保真）

交互性-如何与原型交互？
无交互性、部分交互性、完全交互性。

原型制作的种类？

原型可以是纸质的或点击式的，但设计成功的数字体验需要创建界面原型。原型设计可以尽可能早、尽可能多地进行。从开始到结束，原型设计在设计过程的所有阶段都是必不可少的。

低保真-纸面

铅笔和纸是以最低成本快速表达想法的最佳工具。在最初的设计阶段，粗略的用户流程和线框图足以展示各种屏幕状态并传达一个想法。为了让它们变得更好，设计师可以使用扫描软件来为他们的纸质草图拍照，并在很短的时间内将它们直接变成交互式原型。

中保真-可点击

在定义用户流程并创建初始屏幕的模型之后，是时候将它们链接在一起以创建一个看起来接近预期最终设计的可点击原型。这些不必非常详细，足以让用户在测试流程以查看它们是否清晰易懂时对最终设计有感觉。

高保真-可交互

在用户流程经过尝试和测试之后，是时候创建和微调这些华丽的动画以向开发团队展示了，对于这些，设计师需要更多的控制而不是简单的转换。

原型制作的优势？

"原型设计是产品设计的关键步骤。最终产品很复杂，因此很难改变。原型的建造和重新布置相对便宜。虽然在前期付出了努力，但计划和测原型是非常值得的。"

提高速度

原型设计可以节省时间。它允许设计人员在承诺让开发人员对其进行编码之前快速测试多个想法。它还减少了对设计的书面解释的需要。一个原型价值一千个静态页面，其中包含有关它们应该如何工作的文档。

重新审视用户流程并评估设计决策

用户流是在应用程序或网站中从 A 点到达 B 点所需的步骤。它们显示用户完成特定任务所需的屏幕顺序。原型是检查设计的用户流程是否流畅或需要改进的理想场所。

通过观察用户点击原型，设计师可以快速识别用户在设计中可能遇到的任何困难。

收集反馈

原型设计也是一种向客户展示的有效方式。人们知道如何与产品互动。展示与原型的交互有助于激发与客户的充分知情讨论，并可以更快地带来更好的设计。

通过将实际产品放在用户手中，设计师可以快速查看原始设计流程中可能存在的缺陷，如果不使用交互式原型，他们可能不会注意到这些缺陷。

原型设计的工具？

原型设计是用户体验设计过程中的关键步骤，有无数的工具可以帮助设计师完成工作。我们为 设计师们推荐以下几个UI/UX原型设计工具，一起来看看吧！

Figma

Figma是一款一体化设计工具，可处理从线框图、原型设计和 UI 设计到协作、设计系统管理和开发人员移交的所有工作。

价格：Starter 计划永久免费；专业计划每位编辑每月 12 美元；组织计划每位编辑每月 45 美元

功能：线框图、原型设计、UI设计、协作

适用于：快速轻松地创建交互式、中等保真度原型

适用于：MacOS 和 Windows，或浏览器内

网址：https://www.figma.com/

Adobe XD

Adobe XD是一个强大的基于矢量的工具，用于协作设计和原型制作。

价格：作为独立工具每月 9.99 美元，或作为完整 Adobe Creative Cloud 套件的一部分每月 52.99 美元

功能：线框图、原型设计、UI设计、协作

适用于：

在一个工具中创建静态设计并将其转化为交互式原型

适用于：

MacOS（v10.15 或更高版本）、Windows 10 和大多数浏览器

网址：https://www.adobe.com/products/xd.html

Sketch

Sketch是另一个一体化数字设计平台，用于创建静态设计和原型，以及用于开发人员移交。

价格：标准计划（个人和团队）每位编辑每月 9 美元

功能：线框图、原型设计、UI设计、协作

适用于：轻型原型设计

适用于：MacOS

网址：https://www.sketch.com/

Framer

Framer是一款免费的应用程序和网站原型制作工具，非常适合快速创建逼真的高保真设计和动画。

价格：最多 2 位编辑和 3 个项目免费，或使用 Pro 计划每月 19 欧元/编辑（无限项目）

功能：线框图、原型设计、UI 设计、用户测试、协作

适用于：

在几分钟内创建和测试高保真、基于代码的交互式原型，全部在一张画布上

适用于：

MacOS、Windows、iOS、Android 和浏览器

网址：https://www.framer.com/

Protopie

ProtoPie是一款灵活而强大的原型制作工具，因其易于使用的界面和几乎不存在的学习曲线而受到设计界的好评。

价格：个人计划每月 11 美元，团队计划每位编辑每月 41 美元。两个计划都提供 30 天免费试用

功能：原型设计；与 Sketch、Figma 和 Adobe XD集成

适合：

寻找功能强大的原型设计工具且几乎没有学习经验的初学者

适用于：

MacOS、Windows、iOS、iPadOS和 Android

网址：https://www.protopie.io/

Proto.io

Proto.io是一个基于浏览器的原型设计工具，具有直观的拖放界面和数百个现成的模板和组件。

价格：您可以从 15 天免费试用开始，然后升级到每月 24 美元（1 个用户）的 Freelancer 计划或每月 40 美元（2 个用户）的 Startup 计划

功能：协作式高保真原型。还与 Sketch、Figma、Adobe XD 和 Photoshop 集成

非常适合：

想要快速轻松地创建交互式、高保真原型的独立 UX 设计师或初创公司

适用于：Proto.io 100% 基于网络

网址：https://proto.io/

在选择原型应用程序时，确实没有正确或错误的答案。许多可用的应用程序都可以实现相同的结果，因此无需认为设计人员必须了解所有应用程序。

找出使用哪种设计工具的最佳方法是对其进行测试，看看哪一种可以让设计师以最快的方式创建原型。原型旨在加快设计过程，而不是放慢速度，所以不要害怕跳进去尝试所有的原型，直到找到一些你喜欢使用的。

无论是刚开始一个项目还是在最终屏幕上工作，原型制作都是添加到任何设计师工作流程的关键工具。它不仅会加快创建过程，而且最终会导致整体上更好的产品。虽然有原型设计是最佳实践，但应该创建的原型的类型和保真度最终取决于项目细节和设计师的偏好。

（部分图文来自网络，若有侵权，请联系删除。）

加入UI&UX交流社群~

设计资源/书籍资源/知识互动

还有更多神秘福利！

一起创作更好的设计~

往期推荐 | Read More

设计资讯：UX/UI设计师能为可持续未来做些什么？5个亲生物UX解决方案！

案例研究：如何实际应用UX设计法则？来看看Netflix(网飞)遵循的7个用户体验定律！

什么是线框图？快来看这篇文章！带你从线框图新手到真正的专家！

文字丨Joy

编辑丨Joy

如果觉得我们做的还不错点个赞和在看吧！：