清远高端网站建设：如何选择正确的原型工具

在创建原型时，有很多工具和方法，选择一个并不是一件容易的事。哪一个是最好的？

剧透警报：没有“最佳”，因为这一切都取决于你现在需要什么！在这里，我将分享一些在需要选择原型解决方案时需要考虑的内容。

我一直希望了解最新的设计和原型设计工具，在它们推出后不久对它们进行测试，看看它们是否可以改善我的工作流程并使我能够获得更好的结果。几年前，我认为现在比现在更容易确定新工具是否有用。如今，应用程序每天都在发布，而且很难给他们一个正确的尝试。

为了更加关注每个原型制作工具的特性和特性，并且为了更好地决定接下来要尝试哪个，我开始编写一个简短的原型制作工具列表。渐渐地，随着我在列表中添加越来越多的项目，它失控 - 这是一个可靠的信号，表明存在太多解决方案。

也许正是因为这种情况，经常在参加会议或教授课程后，一些与会者会询问我的建议，想知道哪个是最好的工具。老实说，我觉得不能给出一个直接的答案，因为，与选择一双跑鞋一样，“最佳”通常取决于您在特定时刻的需求以及您想要实现的结果。

我想过了一段时间，我已经开发出一种第六感设计 - 一种能够理解（或者，至少，相信 - 我毕竟不是超人）的能力，是否一个给定的工具值得尝试，只需给它一个快速浏览。

清远高端网站建设幸运的是，你不需要第六感或任何其他超级大国来选择原型制作工具。还有其他更客观的选择方法。这一切都取决于你目前的优先事项，所以让我们从那里开始。

1.学习曲线

最有效的学习方法利用了以前的知识，因此我们不必从头开始。这就是我们所说的“知识转移”：将先前获得的知识应用于新情况。当您学习如何使用新的原型设计工具时，它也很有用：具有熟悉的界面和熟悉的工具集的工具可能比在每个方面都是新的工具更容易学习。

对于Adobe的套件尤其如此，其中每个应用程序的设计都与其他应用程序类似。您知道面板和对话框的位置，相似之处使得更容易在套件中学习新应用程序或在应用程序之间切换 - 例如，从Illustrator到Photoshop。

但是，还要比较您期望投入学习新工具的时间，以及您希望在设计过程中实际使用该工具的时间。理想的情况是花一点时间学习一种你经常使用甚至每天都会使用的工具。

2.支持团队合作

我需要我的原型设计工具来整合客户关于我的设计的反馈，以便我可以使用这些信息来改进我的工作，然后分享一个新的更好的版本。

为实现这一目标，我通常会将设计屏幕上传到InVision，客户可以在其中添加有关特定功能的评论。然后，如果问题得到解决，我将有机会回复评论或关闭评论。

但是如果你在一家公司工作，那么客户不仅应该感觉自己是团队的一员，那么你的设计师也应如此。重要的是拥有一个工具，使您的工作人员能够共享和上传他们自己的设计屏幕版本，以便每个人在为项目做贡献时都保持在同一页面上。InVision等工具以某种时间轴视图显示项目的一般活动，以便您可以保持最新并跟踪所有更改。

3.忠诚度

从第一天开始，当我们对产品的基本概念时，我们的原型开始发展，由学习推动。这就是我们在迭代中设计的原因，并且在每个阶段我们根据我们的优先级测试不同的东西。

例如，在一开始，当我们不知道一个想法是否有效时，不建议关注设计细节，例如调色板或网格系统。相反，我们应该进行原型设计。我们选择的原型制作工具将取决于我们的目标保真度（即原型与预期的最终产品的接近程度）。

富达可以逐步建立：低的时候，我们只是想验证这一想法（该工具应允许从一个屏幕到另一个导航），中等当我们专注于布局，信息和交互设计（该工具应该能够更精确的设计当最重要的东西是视觉设计，动画和微交互时（该工具应该能够添加运动和过渡），并且很高。

每个工具都应该帮助我们实现我们需要的原型 - 也许不会更多 - 然后使我们能够快速进入下一个阶段，可能不再需要该工具。

低保真

当我只想测试数字产品的想法时，一个让我对设计有很多控制权的应用程序并不方便，因为我很容易被那个阶段不相关的细节分散注意力。更重要的是能够从一个屏幕导航到另一个屏幕，而不用担心接口的元素是否具有适当的大小或布局。（是的，我知道很难抵制对齐元素的诱惑，但相信我，在这一点上并不重要。）

当我想出一个想法并直接进入计算机时，我经常会发现自己会问一些问题，例如设计文件的大小或我应该选择的颜色 - 当我甚至不知道概念是否在正确的轨道。这就是为什么，在这样的时刻，我更喜欢使用最古老，最基本的选择：笔和纸。

这个想法并不新鲜：

“但我们为什么要从素描开始呢？”你可能会问。原因是因为在项目的早期阶段通过直接进行数字化而陷入像素精度太简单了，从长远来看它会耗费一些时间。[...]回归铅笔和纸这是一种快速简便的方法，可以让您的想法开始迭代。

使用笔和纸，我不会担心我之前提到的任何设计细节。相反，我可以专注于这个想法。

我可以快速绘制一个设计来实现我的想法，然后，使用Marvel或POP等工具，拍摄它以构建包含手势和过渡的工作原型，以测试一些基本流程。以这种方式进行原型设计的好处是，如果概念失败（但你必须继续研究这个价值数百万美元的想法），你就不会对你的工作感到厌倦，并且用不同的方法重新启动将非常容易。

提示：如果要设计临时视图（例如警报，工具提示或短反馈消息），则可以将它们与主界面分开绘制。然后，用剪刀剪下其中一条信息，并将小纸片放在主设计的顶部。这样，您可以使用该消息拍摄一张照片，而不使用另一张照片。您将拥有两个屏幕，价格为一个，无需手动绘制两个版本！

中等保真度

笔和纸都很好，但是当它们还不够时，设计过程就会出现问题。当我确定应用程序的核心概念并且我已经在纸上制作了一些基本原型时，我需要一个不同的工具来继续前进。通常，当我们谈论中保真原型时，我们指的是线框，其主要目的是传达交互和信息。

当我设计线框时，我尝试尽可能多地使用真实信息。但是，在这个阶段，我并不总是掌握所有数据。因此，我通常必须近似最终文本，图形和颜色，因为这些与品牌有关。（不要怪我：那些家伙总是迟到！）。至少我可以专注于实现令人信服的布局和互动。

在这个阶段，我通常使用Sketch。这个工具相对容易使用，可以帮助我将纸张设计理念提升到新的水平。使用Sketch，我可以轻松地重用UI元素，这样我就不必从头开始，我可以从许多标准UI组件中受益。还有许多其他界面组件可用于构建布局，例如Sketch App Sources上的布局。随着我的流程不断发展，我还可以控制这些元素的自定义程度，并决定暂停用户测试的位置。

如果您希望与期望保持一致而不是过度设计，那么使用这些设计组件也是个好主意。通常，从头开始设计所有内容将花费更多时间（开发人员在实施设计时也会花费更多时间）。这就是重用常用UI元素（例如列表，对话框，表单和选项卡）的原因。

但是（是的，总有一个“但是”）Sketch是一个仅限Mac的工具; 所以，如果你使用Windows，你将不得不依赖别的东西。Balsamiq和Omnigraffle是众所周知的，已经有一段时间了。一些新的UI设计工具是基于Web的（因此不需要任何设置或安装）：Gravit和Figma。

高保真度

当您的原型成长并接近成为可行的产品时，您将需要设计之前不太相关的组件，例如不频繁的对话框，一些反馈消息（错误消息和显示操作结果的消息），空状态，禁用按钮等。

基本上，在低保真度和中保真度原型设计的早期阶段，我们专注于结构，信息和流程以及一小组核心用例。随着设计的成熟，我们需要考虑更多：

• 其他用例（通常不太常见）;

• 边缘情况和突发事件（例如，如果信用卡被拒绝，在结账流程中会发生什么？）;

• 错误预防和处理。

所有这些用例对于良好的用户体验都很重要，但它们不应该是我们设计的第一件事。我们从核心用例开始，重点关注设计中最相关和最突出的方面。然后，我们包括边缘条件以完成和验证设计。

在这个阶段，选择一个可以精确控制设计组件的工具变得越来越重要，这样您就可以确定UI的每个元素的方面和行为。

不久前，我使用Axure进行这些类型的任务。事实上，在我在巴塞罗那的第一次求职面试中，他们问我是否知道如何使用它，因为它被广泛用于该公司。当然，为了得到这份工作，我说是的，在开始工作的前几天，我从里到外学会了它。就在那时，我发现了它的全部潜力，使用条件等功能，使您能够显示和隐藏对话框，横幅和其他临时信息块，具体取决于用户的交互。这可能会派上用场，因为它可以最大限度地减少从头开始设计的屏幕数量。

如果你仔细阅读过，你可能已经意识到我一直专注于静态设计。动画怎么样？这变得越来越重要，不仅因为动画可以在现代界面中随处可见，而且因为很难与团队的其他成员沟通，如何在不显示样本的情况下移动或飞行。

在原型设计动画，微交互和转换方面，我将原型设计工具分为两组：

1. 具有熟悉的UI并且不需要您学习任何代码的工具;

2. 用至少几行代码弄脏你的工具。

在第一组中，出现了一些新工具，如Pixate，Principle和Flinto。在许多情况下，您将使用这些工具来原型化而不是整个应用程序，而只是一部分屏幕，以查看不同元素的显示方式或如何从一个状态（或屏幕）转换到另一个状态。

如果您想更进一步，可以选择第二组。这组应用程序可能看起来不那么熟悉设计师，但您可以更精确地控制动画。此外，在许多情况下，您可以使用本机组件来实现更逼真的结果，从而使从原型到最终代码的移动更加容易。如果您想更进一步，我建议尝试使用Framer（基于JavaScript）或Facebook Origami，其伴随的Origami Studio将在今年晚些时候发布，允许您导出可以发送给开发人员的代码片段。

对于iOS，您可以使用Interface Builder，它允许您在可视环境中使用本机iOS组件设计界面。（这个解决方案完全没有代码 - 是的！）。对于Android，有Android Studio。

4.与您的工作流程集成

选择原型制作工具时需要考虑的另一点是它适合您的设计过程以及您经常使用的其他工具。原型设计是更广泛流程的一部分，包括研究用户，测试，收集指标，将想法传达给利益相关者，以及与开发人员共享设计以进行最终实施。

您可能找不到一个可以完成所有工作的工具（稍后会详细介绍），但原型设计工具至少可以帮助您顺利完成整个过程，尤其是当您需要在紧迫的期限内进行迭代时。

例如，如果您在Photoshop，Illustrator或Sketch中进行设计，那么如果您的原型设计软件可以直接使用这些应用程序生成的文件而不需要您单独导出资源，然后从头开始构建所有内容以创建交互，那将会很棒。

就个人而言，我对Sketch（再次）非常满意。我可以导出图像，甚至可以使用原始的可编辑Sketch文件，并将其上传到不同的工具来完成我的原型。当我想添加交互时，我将文件上传到Marvel，当我需要动画时，我会上传给Framer或Flinto。

构建原型的最后（也是最重要）步骤之一是测试它并从真实用户收集信息（手势，点击和响应），以便您可以改进产品。InVision和Marvel等工具与Lookback连接，使您可以同时测试应用程序和录制视频，以便您可以与团队的其他成员分析数据。

5.易用性和舒适性

最后，您对原型制作工具的感受非常重要！如果你每天都要使用它 - 有时甚至在周六和周日，如果你是一个自由职业者，像我一样 - 它应该感觉很好，对吧？

这是个人的，所以我的建议是有限的。寻找一种能够让你满意的工具，而不是让你的工作更加努力的工具，让你遇到障碍，减慢速度，增加额外的步骤或强迫你找到解决方法。

结论

鉴于今天有很多设计和原型设计工具（我甚至都没有提到它们），你可能会感到害怕。也许这就是为什么我们开始期待“一个工具来统治所有人”的出现 - 一个应用程序，使我们能够创建各种设计，甚至制作原型。

在某种程度上，我们开始通过Adobe Experience Design CC（一种允许您在设计屏幕之间进行链接的新设计工具）和Sketch（与Craft Prototype之类的插件一起使用以进行交互，并使用AnimateMate进行动画处理）来看到这一点。

设计和原型设计工具的未来是什么？我不确定，但我认为，如果我们走向这个方向，我们最终可能会得到一个过于复杂的工具，就像瑞士军刀，它有很多小工具，但没有一个真正有用。此外，其他专业人士，包括外科医生和机械师，根据场合使用不同的工具。我们为什么要设计师有所不同？最重要的事情之一是确定哪种工具最适合给定的工作。

无论如何，不要过多地关注这些工具。他们应该帮助我们塑造我们的想法; 他们不应该决定或限制我们的产品的外观或行为。

我也明白，如果你的公司强迫你使用一个特定的工具（就像我曾经做过的那样），上面的指导将毫无用处。如果是这种情况，如果您的推理清晰合理，您可以尝试说服您的团队至少尝试不同的事情。也许上面的一些观点会支持你的观点。

清远高端网站建设最后，当有人告诉你某个工具是“最好的”或“最容易学习的”时要小心。这是非常主观的，你应该自己发现它。最后，你和我以及其他所有人一样，都是不同的。