使用面向设计师的原型工具改进您的工作流程

我不了解你，但我一直在为我的网页设计工作流程寻找完美的原型制作工具。 有很多选择，但有一件事是肯定的：您可以通过快速原型设计更有效地处理您的项目。

有任何 HTML、CSS 或 Javascript 爱好者吗？ 如果这些是您喜欢的技术，那么您可能只是一个快速原型制作者。 作为网页设计师，我们中越来越多的人已经弥合了差距并进行了一些前端开发工作。 除了是超级明星视觉创意之外，我们还是专业的代码工匠。

通过拥有一个工作的、编码的原型，您可以快速启动并运行，能够与客户共享您的站点并在此过程的早期获得反馈。 如果编码不是你的事，但你仍然希望快速创建原型，那么有许多工具可以为你的客户提供高质量的原型。

为什么要快速原型制作？

快速原型设计通常是敏捷过程中的关键组成部分。 设计和开发了您网站的实时工作示例，并且原型中的代码通常可以在以后重用于实际的开发过程。 在流程的早期寻求并提供反馈，这有助于减少开发阶段的更改数量。 设计师经常同意它改进了最终设计，因为在此过程中尝试了不同的变化。 在创建原型时，无论是否涉及代码，选择一个可以让您快速高效地工作的工具非常重要。

Rapid Prototypers 为每个项目带来价值，客户当然喜欢看到一个可行的例子。 大多数人都是视觉的，如果他们可以使用原型，他们会发现在浏览器中查看设计是有益的，最好是在多个设备上。

静态和工作原型

传统上，设计师通常会在 Photoshop 或 Illustrator 中为原型创建静态模型。 这些静态模型提供了巨大的价值，但工作原型是一个很好的选择，因为设计可以在开发时立即在浏览器中进行测试。 许多设计师发现，随着他们的编码技能越来越强，他们的编码速度越来越快，并且在浏览器中进行设计成为他们的常态。 如果您愿意，您不必像以前那样依赖静态 Photoshop/Illustrator 模型。

原型必须有多详细？

您需要提供多少设计细节没有正确或错误的答案，这取决于客户和项目。 您可能熟悉设计界中的“保真度”一词。 这是指设计中包含的细节和交互的数量。 低保真度是非常基本的，通常是“草图”，并且不允许用户与设计进行交互。 提供的设计细节很少，低保真度仅包括原型中组件放置的基本信息。 高保真原型通常允许用户交互并且接近网站的真实表示。 设计元素往往包含很多细节，而且非常精致。

低保真原型。

高保真原型。

您为原型选择的工具将取决于保真度要求。 一个不一定比另一个好，它只取决于项目范围。

出色的原型制作工具

现在我们已经了解了原型设计的基础知识，让我们来看看一些可用的工具。 原型制作工具具有不同的保真度和限制。 如果编码在你的驾驶室里，太棒了！ 但我们也会快速浏览一些不需要任何代码知识的选项。

用于快速编码的原型工具

框架是提供由 HTML、CSS、JS 等组成的标准化代码起点的工具。在原型的情况下，框架是快速创建 Web 项目的绝佳选择。 创建一个可以重用于下一个原型的入门主题也很有帮助。

有两个很棒的框架可以快速构建。 即使在编码时，您也可以选择低保真或高保真。 在进行快速原型制作时，您可以根据需要获得尽可能详细或基本的信息。 一旦你了解了这些工具的细微差别，你会惊讶于事情进展得如此之快。

快速原型选项一——Twitter Bootstrap

目前 Twitter Bootstrap 是第三个版本，所以它一直在完善。 如果您想编写一些代码，这是创建工作原型的绝佳框架。 这很棒，因为它响应迅速、易于学习，并且有很多设计组件，如按钮、模型、图标等。使用这些元素，您可以快速轻松地启动和运行 Web 项目。 许多网站都是使用 Bootstrap 构建的，因此原型代码也可以在以后使用。

快速原型选项二——基础

与 Twitter Bootstrap 一样，Foundation 是快速创建原型的绝佳选择。 这个框架比 Bootstrap 更基础，并且需要更多的 CSS 样式，因为没有那么多默认值。 这也是一个不错的选择，因为您可以在开发可重用代码的同时快速启动并运行。 您可以使用此工具创建低保真度或非常高保真度的原型，具体取决于您的偏好。

不需要编码的原型选项

正如所承诺的，这里有一些不需要任何编码的原型设计选项。 高保真度和低保真度或介于两者之间的选项有很多。

快速原型选项三——好的旧纸和铅笔

这个静态原型可以非常快速地创建。 此方法易于使用，您应该已经熟悉该功能！ 虽然它被认为是低保真度，但草图可以减轻项目的压力，让想法自由流动。 信不信由你，有时这可能就是原型所需要的全部。 这仅取决于项目和客户。

快速原型选项四 - 样式瓷砖

如果您更喜欢静态的原型制作方法并且还想要高保真度的东西，那么样式瓷砖是一个不错的选择。 设计模型在网页设计中占有重要地位（毕竟，设计元素是我们构建页面所需要的）。 但在投入时间创建整页模型之前，样式图块是一个很好的解决方案。 在投入时间制作详细的完整原型之前，这些是至关重要的一步。 论文包含静态模型所具有的所有视觉信息。 包括颜色、图像、按钮样式等，让客户了解设计元素的外观。

快速原型选项五 - Omnigraffle

OmniGraffle 是一个不错的选择，可让您快速创建网站线框，用作中低保真度原型。 您可以添加链接、从预先建立的样式和对象中进行选择，等等。 这是绘制原型然后创建客户可以与之交互的东西的好方法。

快速原型选项六——Invision Ap

InVision 是一个独特的选项，因为您可以上传现有的静态原型并使其具有交互性，而无需代码。 这是利用静态原型、与客户共享并跟踪反馈的好方法。 此外，您可以进行用户测试，并使用此工具传达任何其他反馈。

快速原型选项七 Axure

Axure 允许您创建交互式原型。 此外，还可以使用各种 UI 元素，以便您开发和分享您的想法。 从快速线框到带有颜色、渐变、图像等的抛光设计，该工具提供了多种保真度选项。 它还带有一个方便的共享选项，因此您的用户可以单击并查看您的项目将如何工作。

快速原型选项八 - Lucidchart

Lucidchart 是基于云的，它适用于多种设备。 如果您有多个人参与该项目，协作也变得容易。 它允许与您的团队实时聊天，您也可以直接在原型中发表评论。 使用提供的许多 UI 元素创建动态、中等保真度网站原型。

下一步是什么？

在寻找您选择的原型制作工具时，需要考虑很多因素。 无论您是否喜欢实时代码，都有提供各种保真度选项的工具。 如果您是单独工作或严重依赖团队沟通，您会找到适合您需求的完美解决方案。

现在您已经拥有了完美的原型制作工具，您可以自豪地佩戴快速原型制作者的徽章。