Moqups：概述和回顾

不经过测试，你怎么知道一个想法是好是坏？

线框图、模型和原型设计是数字设计的必要部分。 可视化您的概念可以让您模拟您的设计，尝试不同的用户体验并在将任何内容变为现实之前测试各种用户旅程和流程。

过去，设计师必须打印他们的设计并向客户展示 PDF。 今天，有一些工具可以帮助您在设计公开之前找到并解决设计挑战； 找出设计的美学和技术组成部分； 并在其他人之前测试体验。

你也会理顺你与客户的关系——如果他们假设某事（他们会），你可以在早期阶段解决这个问题，而不是听到“哦，我以为……”后来，为时已晚.

Moqups 是一种基于 Web 的设计工具，可帮助您在一个环境中构建线框、模型和原型。 您可以在项目之间导航，并将您的设计从低保真（开始阶段和草图）提高到高保真（更彻底和详细）。 在这篇文章中，我将其转一下，并向您展示该过程的每一步，包括我在文章末尾的最终想法。

你可以用 Moqups 做什么？

您可以使用 Moqups 进行多种设计：图表、流程图、站点地图、线框、模型、图表和图形。 让我们来看看它们。

您会注意到我在这里没有专门讨论原型设计。 这是有原因的，我稍后会谈到。

图表和流程图

几乎每个网页设计项目都以图表、流程图或站点地图开始，团队成员往往会在此过程中返回参考。 使用 Moqups，您可以创建各种图表：

• 概念图
• 决策树
• 用户交互流程图
• 软件工作流程的流程图
• 思维导图
• 站点地图
• 用例图

使用流程图模板，您可以在各种图表上抢先一步。 您还可以根据需要使用图表扩展器来发展流程。 此外，您可以更改图表的外观以对其进行自定义。

线框和模型

使用线框，您的团队可以在项目开始时弄清楚信息层次结构、页面密度和用户流等内容。 简单的形状和占位符文本代表您将来要添加的更高级的设计元素。 您还不必担心品牌或设计； 相反，您只需要担心网站的结构和关键要求。

使用模型，您的团队可以在设计的第一阶段获得反馈。 您将建立在线框的草图上以可视化内容并演示它如何以非常基本的方式运行。 将设计置于上下文中以使其看起来更好并使最终结果可视化。 客户可以看到设计在他们的网站或应用程序上的外观，而不是在页面上看到设计。

以适合您的任何顺序创建

Moqups 的美妙之处在于，您可以随心所欲地在线框和模型之间来回弹跳——而且您不必先创建一个。 例如，您可以从传统方式开始，先是线框，然后是模型。 然后，您可以返回到线框，进行在评估模型时意识到需要的调整。 或者，您可以先创建一个模型，然后转到线框图阶段以找出细节。 您还可以完全跳过模型并从线框创建低保真原型。

图表和图形

如果您需要向您的团队、客户或投资者直观地呈现信息，Moqups 可让您创建各种图表和图形：

• 面积图
• 条形图
• 柱状图
• 甜甜圈图
• 折线图
• 饼状图

Moqups 特点

以下是 Moqups 的主要功能，然后是附加优势的简要列表。

带有图形和字体的内置库

• 内置库包括数千个图标集。 还有专为流行用例设计的即用型模板，以及适用于 Android 和 iOS 移动应用程序设计的自定义模板套件。
• 对齐、调整大小、旋转或样式对象。 您还可以批量编辑、分组、锁定和重命名元素。 可以使用自定义指南、网格和标尺进行精确调整。
• Google Fonts 已集成，因此您可以从数百种字体中进行选择。 高级控件可让您调整文本以匹配您的设计。 （想了解如何为徽标选择最佳字体？我们有一篇关于此的文章。）

组织您的项目

• 拖放您的页面以在文件夹中重新排序或组织它们。
• 页面面板使搜索和浏览文件夹变得容易。
• 使用母版页，您可以将更改自动应用到所有关联的页面。

集成与协作

• Moqups 与 Dropbox、Google Drive 和 Slack 等工具集成。
• 借助云，您的团队可以在远程工作时进行协作（您的团队也可以通过以下方式进行聊天）。
• 获得有关设计本身的反馈并进行编辑，而无需相互发送各种版本。

更多功能

• 易于使用的拖放编辑器（初学者可能会遇到学习曲线，但这不是主要的）
• 上传您自己的图片
• 排列元素时的对齐对齐
• 在不损失质量的情况下扩展
• 将您的作品导出为 PDF 或 PNG

使用 Moqups

我只想直接告诉你我对 Moqups 的体验。 发生了很多事情——这并不令人困惑，只是那里有很多——所以我要谈谈我玩过的那些我认为很酷或有用的功能。 在文章的最后，我将向您介绍我对 Moqups 的整体想法和感受，包括常见的缺点以及它最适合谁。

Moqups 入门

使用 Moqups 进行设置非常简单，我建议您从免费帐户开始（稍后我将在定价部分讨论该帐户中包含的内容）。

创建设计

我真的很喜欢拖放式编辑器。 在某些编辑器中，您单击一个元素，它会立即出现在项目中，然后删除它可能会很麻烦。 Moqups 让我觉得我对我添加的内容有更多的控制权，让我探索选项而不必担心我会不小心点击某些东西并在不知不觉中添加它。 此外，当您将一个元素拖到您的项目中时，您可以看到它的外观，如果您决定不想要它，然后将其放回原处。

使用设计

当您将鼠标悬停在设计中的不同元素上时，会出现一个蓝色轮廓，向您显示不同的页面元素。 要使用元素，请单击以选择它。 右侧会打开一个带有自定义选项的菜单。

项目颜色

我喜欢颜色选择器的“项目颜色”部分。 这样可以轻松地将左上角的心形颜色与文本颜色相匹配。

将元素保存为模板

Moqups 的一个有用功能是您可以将元素保存为模板，然后轻松地将它们按原样添加到其他页面。 将保留原始设计——颜色、尺寸等。这有助于在您的设计中创造连续性。

协作功能

如果您是 Google 云端硬盘用户，评论的外观和行为将与您熟悉。 添加评论非常简单，您可以在撰写评论之前或之后四处移动评论，以便其放置合理。

但是，如果您有很多合作者和评论，那么这个小评论窗格可能会很快失控。 您可能希望为您的团队创建一个规则，将不再需要的评论标记为已解决。

Moqups 定价

使用免费计划，您可以制作一个最多包含 200 个对象的项目。 在使用空白文档和使用模板之间进行选择时，需要考虑这一点。 我选择了着陆页线框模板，它立即用完了 200 个对象中的 125 个。 当然，我可以进去删除一些对象，但对于某些人来说，从头开始可能更有意义。

免费计划唯一的好处是测试 Moqups，因为您可能不会只设计一个项目。 起价为每月 13 美元，按年支付。 每个计划都允许您创建无限的项目并使用无限的对象，因此主要考虑的是有多少人将使用 Moqups。

除非您是一个设计团队，否则您将需要 Creative Team 包。 您添加的人数越多，每位用户的成本就越低。 例如，如果您有 50 个用户，则每个用户的费用为 3 美元，总共每月 149 美元（每年支付）。

有些人可能会觉得 Moqups 的定价很划算，而另一些人会认为它太贵了。 这取决于您将使用多少以及从中获得的价值。

PS 使用免费计划，不需要信用卡——如果你想测试一下然后决定它不适合你，你不必记得在被收费之前取消。

Moqups 弱点

• Moqups 最大的缺点是不能离线使用。 另一方面，它基于浏览器的事实对某些人来说非常方便。
• 如果您有高级原型设计需求或者您对功能很挑剔，这可能不适合您。
• 我读过评论说 Moqups 可能会滞后，需要很长时间才能加载甚至意外关闭，但我没有经历过任何这些。 但是，在您添加丰富的内容和创建其他页面时需要注意这一点。 我的设计中没有任何照片或视频，所以这可能有助于保持速度。 如果您的项目将包含许多丰富的元素，请利用免费计划进行测试。

Moqups 最适合谁？

Moqups 非常适合非开发人员在项目规划的第一阶段进行概念化。 例如，企业主或项目经理可以将他们的想法传达给开发和设计团队，然后他们将继续使用更高级的方法来创建实际产品或高保真渲染。

Moqups 对于模型和线框图特别有用，但在原型制作方面则没有那么强大。 Moqups 没有其他原型工具那么多的功能，而且样式元素也不能像竞争工具那样以多种方式定制。 在他们的网站上甚至几乎没有提到它。

最后的想法

总的来说，我喜欢使用 Moqups——我希望我在设计我的网站时就知道它，因为它比我草拟的纸笔设计要真实得多。 它按照它所说的方式工作，即使有很多选择，也没有什么很难弄清楚的。 如果您曾经使用过任何类型的图形设计工具——我猜你已经使用过——这个工具不会很难上手。 您可以第一次使用它并在一天结束（或一小时结束）之前完成一个项目，然后您可以返回并探索您第一次错过的所有选项。

可视化工具的重点是获得最终产品，对吗？ 查看我们的 Divi 设计展示以及来自我们很棒的社区的作品。

特色图片来自 Visual Generation/shutterstock.com