线框图和原型:有什么不同?

一个线框是不是和a一样原型但即使是经验丰富的设计专业人士有时也会混淆这两个术语。现在是时候一劳永逸地把事情弄清楚了，因为线框和原型之间的区别实际上是相当大的。编者按:这是Marcin Treder的一篇文章UXPin．

线框

一个线框是产品设计的低保真表示。它有三个简单的目标;清晰的呈现:

1. 主要信息组
2. 信息的布局/结构
3. 用户界面交互的核心可视化和描述

线框，如果正确创建，作为骨干产物的。它就像一所房子的建筑蓝图:它说得很清楚什么应该去在哪里。

线框的视觉特征

线框的视觉特征是非常有限的。

通常设计师只使用方框、线条和灰度调色板(来代表设计中的不同层次的视觉层次)。一个简单的矢量线框大部分最终内容——图像、视频、文本等——都被留到后期处理阶段。

通常，这些被省略的接口部分由占位符。图像往往由交叉框和文本表示Lorem ipsum．

线框图的好处

因为线框图制作起来又快又便宜——尤其是当你使用专用的线框图软件，比如UXPin，Balsamiq,或Axure-它们应该在设计过程的一开始就使用。没有什么比一个可靠的线框更适合在早期收集反馈了。

为什么?因为人们可以焦点更多地关注功能、信息架构、用户体验、用户流、可用性、用户交互等等，而不是让设计的这些基本方面被美学所掩盖。此外，任何需要的更改都可以快速完成，而无需太多繁琐的代码和图形编辑器调整。

我的创业公司制作的这个视频展示了线框图是多么简单。

交互式线框(或可点击线框)

有时，设计师喜欢增加他们工作的保真度，以强调某些UI部分的重要性，以及呈现和快速测试元素之间交互的可靠性。一种非常流行的快速实现方法是创建互动的线框，又称a可点击的线框。一个更复杂的线框设计使用UXPin，一个专门的线名/原型工具交互式线框图在向涉众或客户首次展示设计时可能非常有用。

如果你听过一个经典的问题“如果我点击会发生什么这按钮?你就会在你的互动线框上得到答案。它令人印象深刻，引人入胜。

小心线框图的呈现

对门外汉来说

我们的项目客户或非技术经理/雇主看到线框时可能会感到困惑，因为线框可能与最终设计完全不同。快速手绘应用程序用户流程线框图Guillen费尔南多这就是为什么我们需要花一些时间来解释什么是线框——更重要的是，在我们向那些不了解线框概念的人展示线框之前，它在设计过程中的重要性。

原型

一个原型是最终用户界面的中至高保真表示。

原型的目标很简单:模拟用户和界面之间的交互。无论何时单击按钮，都必须进行适当的操作，模拟完整产品的体验。

原型的视觉特征

当涉及到美学时，原型可能与产品的最终版本非常相似。

基本上，原型看起来像最终产品，但它还没有具体的细节(即HTML、CSS、JS、服务器端编程、数据库等)。交互式原型设计在UXPin原色应该全部设置好，关键内容(至少是必要的部分)必须出现，IA应该进行演示，排版应该在合理的程度上代表最终版本。单击交互对象应显示其后续响应。

原型的好处

为什么原型很重要?因为原型通常是用来用真实用户测试产品的。早期的原型测试可以节省大量的时间和金钱，而这些时间和金钱将用于开发错误的界面和后端产品架构。

它是产品设计和开发的一个很好的验证工具。此外，向用户展示原型并要求他们完成一些基本用例对整个团队来说是非常有洞察力和鼓舞人心的。现在的设计师无需花时间编写原型代码，而是可以使用软件进行快速且具有成本效益的原型制作过程。

在用户测试之后，您需要进行的任何更改都可以更快地实现，而不会浪费工程师的时间。

设计工作流程

理解设计的本质，以及线框图和原型之间的区别，实际上只是进入用户体验设计世界的入口。当您能够将流程的许多部分组合成一个内聚的、有效的和高效的工作流时，奇迹就发生了。

几年前，当我在管理一个用户体验设计部门时，我在我们的过程中看到的最大错误是:我们将线框视为一次性的和非必要的。所以我们会匆忙地处理这个过程，我们不会给线框图过程应有的时间和精力。它们过于粗略和混乱，无法用作坚实原型和最终产品的蓝图(基础支柱)。

一些小建议

• 在线框图的时候，创建可以编辑的可重用元素，这样当你在原型阶段时，你就可以简单地细化这些元素
• 确保线框完成后，它代表了来自你的团队成员和涉众的最新反馈
• 充分利用软件

线框图和原型软件

最后，我将列出你可以用来制作线框图和原型的工具列表。下面你会发现一些最流行的线框图和原型工具，包括我的公司开发的。测试它们(大多数都有一些免费试用)，并选择最适合你和你的团队的武器!

UXPin

我们有超过900个UI元素准备用于线框图和原型。请随时在评论中问我问题。

Proto.io

一个非常健壮的原型工具，可以输出HTML/CSS和演示触摸屏交互。

原型可以在实际设备上进行测试。

Balsamiq

一个非常流行的，长期存在的，易于使用的线框图应用程序。仅限于静态线框图。

Moqups

允许在浏览器中绘制线框图。

只知更鸟》

一个简单的线框图工具。产品开发于2010年停止。

Axure

一个在企业软件领域很流行的线框图和原型应用程序。

Protoshare

浏览器中的线框图和原型。

InvisionApp

允许您使用现有设计构建功能原型。

你不能画任何东西，但你可以在截图之间添加链接。

相关内容

• 敏捷用户体验设计快速介绍
• Web设计人员的用户体验快速概述
• 利用客户旅程地图改进用户体验
• 相关类别:用户体验设计而且用户界面设计