形式和功能——顶级线框工具指南

已发表: 2022-03-11

1487 年，达芬奇在米兰公爵卢多维科·斯福尔扎 (Ludovico Sforza) 的赞助下绘制了一幅名为“战车”的示意图。 尽管机器被故意设计为不能正常运行，但一组工程师在 2010 年重新创建了它。达芬奇的示意图是基本线框的最早示例之一。

最早的线框工具之一是示意图。
莱昂纳多·达·芬奇的“战车”被绘制成示意图，工程师能够在 2010 年重新制作。

线框这个术语已经使用了几十年，早在它被网页设计界采用之前。 线框最初用于计算机辅助设计 (CAD) 软件中，无需详细说明即可说明对象的设计。 结果是一个看起来像是由电线制成的蓝图，因此，我们最终得到了线框。

但是什么是设计中的线框，拥有线框的目的是什么？

数字设计中的线框是一种视觉指南或页面示意图，它去除了印刷风格、颜色、图形和交互元素，并代表了设计过程中的特定点。 其目的是展示描述功能、行为和内容优先级的页面级布局理念。

线框设计工具用于生成描述页面级布局细节的线框。
线框说明没有样式、图像和交互元素的页面级布局细节。 （米克洛斯·菲利普斯）

设计师使用线框将底层概念结构与网站或应用程序屏幕的视觉设计联系起来。 共有三种不同类型的线框：

  • 低保真- 没有很多细节的早期绘图。 低保真线框通常是手绘草图，或代表想法的线条和形状。
  • 中保真- 开始显示更多组件细节的线框，并专注于内容布局和整体页面结构。
  • 高保真- 后期（迭代后）绘图，描绘了组件的更多细节和更高级别的渲染，具有行为特征和对内容布局的关注。

UI线框手绘，无需使用软件。
线框可以在纸上绘制而不是使用软件，并且通常在使用线框工具之前以这种方式开始。 （米克洛斯·菲利普斯）

数字设计中线框的演变是另一个 UX 工件和可交付成果：wireflow。 Wireflows 是线框和流程图的组合，UX 设计师为了另一个目的慢慢地合并了两个工件：说明和跟踪表示产品（如 Web 应用程序）中任务流的交互。

Wireflows 是一种包含流程图的 UX 线框。
Wireflows 是一种 UX 可交付成果，它使用线框图来说明任务流程。 （来源：NNGroup）

设计师在使用线框图时遇到的一个问题是传达用户旅程。 虽然有更复杂的方式来显示用户旅程，但有一种趋势是将它们包含在简单的线框图中。 一个有用的工具是线框图。

线框图将线框与用户旅程（或用户流程）相结合，以展示用户使用线框浏览产品的旅程。

顶级线框图工具

在决定使用哪种线框图工具时，设计师有很多选择。 新工具不断进入市场，因此很难跟上。 以下是要寻找的优秀线框图工具的一些特征：

  • 产生各种保真度（从低到高）的能力
  • 易于使用且经常更新的稳定软件
  • 具有附加功能的内置模板、符号和标准 UI 组件

本指南中的一些工具更侧重于线框图，而其他工具则试图在线框图和原型设计以及模型功能之间取得平衡。 选择使用一种工具而不是另一种工具（或几种工具）归结为设计师的偏好。

香脂

Balsamiq 是一种低保真、易于使用的线框图工具，因其易用性和标志性的“手绘”外观而备受青睐。 它带有一组预先构建的模板，可以通过拖放编辑器快速轻松地使用。 设计师可以添加自己的资产并自定义布局。

当以全屏演示模式或导出的 PDF 显示项目时，可以通过链接模型来创建简单的点击体验以进行可用性测试，从而实现基本原型设计。

Balsamiq 作为桌面版本（Windows 和 Mac）、云服务或作为 Google Drive、Confluence 和 JIRA 的插件提供。

Balsamiq 是一款出色的线框设计工具，适用于基本线框和线框网页设计。
Balsamic 生成看起来像“手绘”的低保真线框。 （米克洛斯·菲利普斯）

Moqups

Moqups 是另一个专注于线框图的创意协作工具，但也可用于原型设计。 与 Balsamiq 不同，它完全基于 Web，旨在为 Web 和移动应用程序制作线框。

Moqups 和 Balsamiq 之间的主要区别在于线框的保真度。 Balsamiq 产生“手绘”外观，而 Moqups 为移动应用程序和网页设计（包括 iOS、Android 和 Bootstrap）提供全彩模板和套件。

Moqups 在其他几个方面与 Balsamiq 不同。 该软件允许有限的对象编辑和页面管理，使设计人员能够定义“主”对象，这可以在迭代过程中对线框进行更改时节省大量时间。

例如，设计人员创建具有特定大小、形状和颜色的主按钮对象。 此按钮在整个线框中多次使用。 后来在迭代过程中，如果设计者需要改变按钮的颜色，而不是改变每一个按钮对象，他们可以改变一次，所有的子按钮对象都会立即受到影响。

Moqups 是一个线框设计工具，专注于具有附加功能的纯线框。
Moqups 是一款出色的线框 UX/UI 工具，专注于线框并添加了其他功能，例如对象编辑和页面管理。 （阿特拉斯市场）

皮多科

Pidoco 是一款顶级线框图工具，专注于具有一些基本交互性的低保真交付物。 它也是基于云的，它利用可重复使用的组件，并通过更强大的点击线框体验与 Balsamiq 和 Moqups 区分开来。

Pidoco 对移动应用程序和网页设计很有帮助，因为它具有内置的移动视图，因此设计人员可以看到他们的应用程序页面在各种屏幕尺寸上的外观。 另一个内置功能是导出和规范功能。 这有助于设计人员从线框转移到原型/模型，而无需插件或扩展。

Picoco 的外观和感觉都低保真，但包含一些通常在更复杂的设计工具中发现的功能。 它适用于正在做精益 UX 并且需要以更短的反馈周期快速迭代的设计师。

Pidoco 是一款线框设计工具，具有大型设计系统的特点。
Pidoco 允许设计师在多种屏幕尺寸上查看他们的线框，使其成为移动应用程序设计的完美工具。

格利菲

Gliffy 是一款中保真线框图工具，具有一些独特的功能，使其与 Balsamiq 和 Mockups 不同。 一个独特的功能是能够创建线流。 Gliffy 具有内置的流程图和图表功能，包括模板、思维导图和业务流程建模。

与其他线框图工具一样，Gliffy 提供了一个形状、图标库，并能够将线框图本地共享到 Atlassian 的 Confluence、Slack、Basecamp、Trello 和 WordPress。

这是一个相对较新的 UX 线框设计工具，然而，它拥有庞大的专业设计师用户群，他们正在寻找静态线框之外的简单集成和功能。

Gliffy 是一款具有共享和线框功能的中保真线框设计工具。
Gliffy 为流程图、思维导图和业务流程建模提供模板，允许设计师创建线流。 （格利菲）

线框.cc

Wireframe.cc 是一个基本的线框图工具，很像 Balsamiq。 它有一个干净的界面，没有很多分散注意力的工具栏和图标。 与许多其他工具不同，它允许您使用鼠标“绘制”线框。

Wireframe.cc 提供了一个模板库，以及干净、简单的对象处理。 Wireframe.cc 在使用精益 UX 时提供的一个有用元素是每个线框页面的 URL，因此可以快速轻松地共享它以获取反馈。

没有内置原型设计或交互性，因为它纯粹专注于低保真线框图。

Wireframe.cc 是一个低保真线框 UX 工具，最适合精益 UX。
Wireframe.cc 是一款低保真极简线框图工具，最适合精益用户体验。

异想天开

Whimsical 被称为线框图的“Google Docs”，它模仿了 OmniGraffle 和 Visio 等图表工具。 它不专注于原型设计/模型，因为它的主要重点是线框图和流程图，使其成为制作线流的绝佳候选者。

与 Gliffy 一样，Whimsical 是一款中保真线框图工具，包括一个大型可配置元素库（按钮、输入、复选框等）。

同时在同一个线框文档上进行无限协作对于远程设计团队来说是一个很棒的内置功能。

Whimsical 是一款包含团队协作的中保真线框设计工具。
Whimsical 是一种中保真线框设计工具，包括流程图和团队协作。

Adobe XD

Adobe XD 最近因其简单的界面、与其他 Adob​​e 产品的紧密联系、易用性以及减少对插件和扩展的依赖的内置功能而引起了设计师的注意。

在 Adob​​e XD 中构建线框有两种方法。 它们可以使用线条和形状来创建对象和元素，也可以使用来自 behance.net 和 XD 资源等来源的预制 UI 工具包来构建。

Adobe XD 的一项节省时间的功能是能够创建“主”组件（在 Sketch 中称为符号），这在进行更改时很有用，因为从主实例化的所有组件都将继承任何更改。

使用 XD 作为线框图工具的另一个优势是能够通过单击鼠标切换到原型制作模式。 原型制作模式内置于 XD 中并在后台运行，因此设计人员在从线框转移到原型时不会浪费时间。

Adobe XD 是具有高级功能的顶级线框设计工具。
线框 UI 工具包可用于在 Adob​​e XD 中创建高保真线框。

草图

Sketch 是 UX/UI 设计师的流行设计工具，它提供了一个用于矢量编辑、原型制作和协作的平台，并且拥有不断增长的数百个插件库来扩展其功能。

Sketch 中的线框很像 Adob​​e XD，它使用工具包/模板和绘图工具。 Sketch 大量使用Symbols ，它们是可重用的组件，可以定义一次并多次使用（按钮等）。 实例化的符号也会对“主”符号进行任何更改。 这对设计师来说是有利的，因为在整个线框图过程中通常需要进行许多更改。

Sketch 允许设计师创建高保真线框、原型和模型。 它不是基于云的应用程序，潜在的缺点之一是它仅适用于 macOS。

Sketch 提供 UX 线框和 UI 线框功能以及原型设计。
Sketch 是一个设计系统，可生成高保真线框、交互式原型和模型。 它是一个仅在 macOS 上运行的软件应用程序。

用户界面

UXPin 是一个顶级线框工具，它支持交互状态、逻辑和编程组件，使设计人员能够编写条件交互、变量和表达式。

UXPin 远远超出了线框图，主要专注于使用 UI 组件库、符号、矢量绘图工具和共同编辑进行原型设计。

有 Windows、macOS 和云/浏览器版本。 对于高保真线框图，UXPin 的工作方式与 Sketch 和 Adob​​e XD 非常相似。 它不像 Balsamiq 那样拖放，但对于希望留在单一生态系统中的设计师来说，它确实将原型设计和模型提升到了一个新的水平。

UXPin 是一个带有程序化组件的设计系统，是一个高保真线框工具。
UXPin 是一种高保真线框工具，能够添加编程功能。 (UXPin)

奇迹

Marvel 是另一种有助于线框图和原型制作的流行设计工具，它为设计人员提供了一个熟悉的拖放界面，用于创建低保真到高保真线框图。

Marvel 不需要任何附加组件或扩展，因为所有资产都包含在内。 该平台完全基于云，可以快速轻松地与其他设计团队成员或客户共享线框。

设计师选择 Marvel 进行线框图制作的原因之一是它与其他平台的集成，例如 Jira、Sketch、Confluence、Dropbox、Slack 等。 对于与开发人员、远程设计团队和客户的协作，此功能可为设计人员节省大量时间。

Marvel 还有一款名为 Pop 的产品，它可以帮助将笔和纸的线框图草图转换为交互式 iPhone 和 Android 原型。 Pop 允许设计师为他们的草图拍照并将其转换为交互式线框。

Marvel 是一种线框图工具，内置集成到许多流行的协作工具中。
Marvel 因其高保真拖放功能以及与许多流行协作工具的集成而成为顶级线框图工具。 （奇迹）

Axure RP

Axure RP 已经存在了很长时间，是创建静态线框（以及高度交互的原型）的绝佳工具。 尽管它适用于 Windows 和 macOS，但它不是基于云的。

线框图可以使用其庞大的拖放组件库来完成，但是，Axure RP 是一个远远超出线框图的复杂工具。 使用 Axure RP 的编程功能，设计人员可以创建具有反映完整工作应用程序功能的高级原型。

鉴于 Axure 的高学习曲线，仅将其用于静态线框是没有意义的。 但是，如果目标是生产高度抛光和实用的原型，那么它将是产品设计师的完美工具。

Axure RP 是一种先进的线框图工具，能够创建应用程序。
Axure RP 是一种先进的线框图工具，具有创建模仿成熟应用程序功能的编程元素的能力。 （阿克苏）

Toptal 设计师最喜欢的线框工具

我们联系了一些 Toptal 设计师，以了解专业设计师使用哪些线框工具以及原因。 这是他们不得不说的。

“我最喜欢的是 Adob​​e XD 和 UXPin。 我开始选择 XD 作为最爱，因为它很容易制作快速线框图和测试想法，从那里我实际上可以在同一平台上开始设计甚至原型。” - 迈克尔·克雷格

“我最喜欢的是 Pop，因为它实在是太快了。 无论如何，我总是在纸上画线框，所以效果很好，我不需要双重处理任何东西。 我还发现它对整个‘不要爱上解决方案’这件事有好处，因为它显然是低保真。” - 尼古拉·拉什顿

“我几乎一直在使用 Axure 进行设计工作。 它是一个高度被低估的综合设计工作工具，具有非常高的复杂性”——Andi Omtvedt

“我实际上不再使用线框本身——因为我认为这些工具足够强大，可以制作低保真原型，因此几乎将初始线框与更好的视觉效果结合在一起。 我从今年 1 月开始采用 Framer X，我很喜欢它。” - 查理·威廉姆斯

概括

考虑到生产复杂原型的能力，线框图仍然相关吗？ 一些专业设计师会争辩说线框是过去的遗物，而另一些则坚决捍卫它们对设计过程的持续重要性。

今天有大量的线框工具可以促进设计过程。 有些人继续专注于纯粹的线框图，即使趋势正在转向以线框图开始但也包括原型能力的混合产品，并且在许多情况下会产生功能齐全的模型。

尽管它已经从低保真交付物演变为中保真或高保真交付物，但线框图肯定不会消失。

• • •

进一步阅读 Toptal 设计博客：

  • 线框映射：如何避免范围蔓延
  • 线框之死。 直接到高保真！
  • 设计工具对决 – Adob​​e XD 与 Sketch (2019)
  • 使用这些顶级 UX 工具掌握您的工艺
  • 顶级设计师使用的 10 个 UX 可交付成果