完善你的用户体验设计过程——原型设计指南

原型制作的过程——从创建简单的线框到测试功能齐全的模型——是任何设计师都可以掌握的最有力和最强大的技能之一。 这在工作场所也充满了危险，因为跳过了这个过程，而不是仅仅将“设计一个原型”作为一个简单的交付物交给下一个部门来建造。 无论您的企业在原型设计方面多么勤奋，实际过程通常会成就或破坏您的最终产品。

如何以及为什么实际构建原型通常是一个谜。 问很多设计师，他们会像迷糊的小狗一样歪着头。 “你的意思是？ 你就去做吧，”他们会说。 确实如此：我们都知道如何创建原型。 我们只是不知道我们是怎么知道的。

考虑到原型通常是最有价值的可交付成果，这一点尤其重要。 客户和经理想看看你做了什么，无论是网站还是实体产品。 他们想尝试一下，检查各种元素，并了解工作流程。 他们想看看“它是如何工作的”。

建立一个原型是不够的； 我们必须了解构建产品初稿所涉及的过程。 本文将深入探讨设计师为实现这一目标而需要知道和做的一切。

原型设计 - 原型的用途

人类是高度视觉化的。 事实上，我们大脑皮层的 30% 纯粹用于视觉。 所以当你看到一个原型时，最重要的是你看到了它！ 当客户可以查看它并了解与产品相关的所有过程，尤其是未来测试的争议领域时，该原型就会变得栩栩如生。

那么什么是原型？ 原型是一种可视化交互设计作品大杂烩的工具； 实际上，原型（几乎在任何阶段）都是之前所有工作的合并，成为一个单一的、可见的、功能性的作品。 这种视觉表示展示了产品在任何给定点的作用、交互元素是什么以及产品在现实世界中的功能。

虽然原型设计的各个方面（如创建草图）有很多机制，但很容易遗漏一些东西并犯错误。

这使得关于如何构建原型的工作变得非常有价值，因为它在许多方面描述了产品的目的是如何实现的。 不完美，而且大多数时候绝对不准确，但顾名思义，原型不是最终的。

他们减慢我们的速度以加快我们的速度。 通过花时间对我们的想法进行原型设计，我们可以避免代价高昂的错误，例如过早变得过于复杂和坚持一个薄弱的想法太久。

IDEO首席执行官兼总裁蒂姆·布朗

将原型视为一种展示功能的机制是一种简单的方式。

这种对事物如何运作的实用解释具有许多高价值的好处，包括：

• 使其成为现实——在构建任何原型之前，产品完全是概念性的！ 暂时没问题，但最终它必须成为利益相关者和用户最终理解和欣赏的东西。 原型是从概念到实际的第一步。
• 解决问题 -有时，我们面临没有解决方案的设计挑战。 作为一项技能，原型设计是一种将问题可视化并快速引入解决方案的好方法。 如果它不起作用，请扔掉原型并重试。
• 迭代——原型设计是分阶段进行的，但结果是一样的：发展你的想法。 从草图到高保真音响，每一次新的迭代都提供了大量的行为和功能来测试。 有了更多数据，我们可以更快、更智能地进行迭代。
• 检测意想不到的场景——一旦某些东西是可见的，我们就有了可供研究的产品的局限性，这也提供了更好的背景信息，说明什么应该存在……什么不应该存在！
• 检测可用性问题——这就是许多设计师生活的地方：一旦产品有了任何类型的原型，可用性挑战就会突然变得很容易发现和解决。
• 演示——任何阶段的原型都是演示的标准。 无论您是在测试页面版本还是向客户展示产品，都应该有某种形式的原型。 如果不是，你可以打赌有人会问它在哪里以及为什么不包括在内。

如何开始原型制作过程

从客户那里收到一份 50 页的需求文档后，看着一张空白的画布可能会让人望而生畏。 从客户会议、餐巾草图和肮脏的白板照片中回顾杂乱无章的想法很少有帮助。

因为原型是建立在许多其他信息之上的，所以提前收集必要的细节以将笔放在纸上是很重要的。 考虑以下清单并查看您的客户或经理提供的详细信息：

1. 项目的目标是什么？

从大局开始。 产品是否解决了真正的需求？ 它如何解决这种需求？ 了解产品的实用性对于提供任何可行的解决方案都至关重要。

2. 人们目前使用哪些竞争产品？

强大的竞争分析将为产品类型的市场状况提供清晰的画面，以及当今用户的期望。

3. 观众是谁？ 他们的目标是什么？

了解人口统计数据和用户需求提供了创建产品以提供这些特定用户类型并满足他们的需求所需的上下文。

4. 它是什么类型的产品，它用于什么（设备）？

有这么多不同的技术和解决方案，用户体验设计师需要知道产品将如何使用（网络应用程序、响应式网站、移动应用程序等）、在什么设备上以及不同版本将如何共存（如果有的话） ）。

5. 是否有任何视觉先例可循？

如果产品已经存在并且项目正在改进或重新设计，则考虑到当前用户对产品的行为，可能存在一些需求。

6. 可交付成果是什么？

设定对可交付成果和流程的期望对于您的计划和工作流程至关重要。 每个项目都是不同的，但如果可交付成果定义明确，则用户体验设计过程的其余部分更有可能顺利进行。

绘制原型

随着我们的数据可用和组织好，下一步是开始绘图。 许多设计师在绘制出来之前就已经对布局、结构甚至视觉设计的特定元素所属的位置有了一个想法。 这很好，但最初草图的目的是探索可用空间以突出可能的东西——更重要的是，什么不是。

收集您选择的书写工具，无论是铅笔和纸，还是白板和记号笔。 素描过程类似于作家的自由写作或音乐家的弹奏。 根据您提前完成的所有工作绘制您的感受，并考虑以下部分：

01 | 用户流 -遵循识别用户流。 了解用户如何实现他们的目标以及他们如何在系统中进行交互。

02 | 信息实体——每个用户流都会显示一些用户输入和输出。 确定它们是什么、它们与用户行为和期望的关系、它们参与的交互以及它们的工作方式。

03 | 第一个草图——在了解了谁将使用该系统、他们将要做什么以及使用什么之后，就该看看如何使用了。 绘制您的用户流程——无需创建布局，只需解决功能即可。

04 | 勾画一个基本的结构——勾画出你的用户流程后，你将对产品的最佳布局有一个更好的想法。 这将包括显示为基本框或涂鸦的内容（文本、照片、视频等）。 手写时，它们不适合大小，因此所有结构和内容都只是为了可视化，而不是实际使用。

另一个技巧是在绘制草图时使用草图板、特殊配方的纸张或工具来制作更清晰的线框。 它们提供了相关视口的基本布局，成本相当低，并且使用适当的模板还可以使草图更清晰。 如果您是一个凌乱的抽屉，这些将非常有用，因为它们为智能手机和网络浏览器提供了正确的纵横比和网格线。

这个过程可以持续多久，但是一旦用户流程完成并且完成该流程的过程很清楚，就该进入下一步了。 在素描和构建数字线框之间来回切换是个好主意，主要是为了保持过程的创造性。 随着您通过更多流程进行，产品会感觉更加具体，您自然会从草图转移。

转向数字化（低保真到高保真原型）

一旦有足够的完整草图继续前进，就该将它们数字化了。 无论是 Adob​​e XD 还是 Sketch、Framer 或 Flinto，或者其他完全不同的东西，创建草图的数字版本是使它们形式化的第一步。 因此，重点从创造性地添加必要的元素转移到在设计中组织资产和结构。

随着原型变得更加实用和元素更加结构化，产品逐渐成型。 当转向数字原型时，保真度取决于交互性、视觉设计和内容的水平。 一个原型在这些区域可以分别是低保真或高保真，尽管高保真在最高级别包含所有三个。

在满足用户需求方面考虑层次结构。 每个草图都连接到用户流程和故事，草图是确定产品布局和结构的第一步。 今天的数字工具可以加快这方面的速度——例如，设置适用于所有页面的主元素和页面类型的模板。

对于每个新的连线和迭代，要问两个主要问题：这个页面是否说明了它在更大的用户流中的用途？ 交互是否有意义（意味着用户是否了解如何完成操作）？ 我们经常问这些问题。 我们做的越多，每次新的迭代就越有可能使原型更接近最终草案。

数字原型也更容易测试，因为它们不仅更易读，而且可以更快地复制和迭代。 这就是像 InVision 和 Proto.io 这样的 UX 原型设计工具非常方便地创建可点击原型的地方。 当它可点击时，测试各个方面的可用性变得很容易，从单个按钮到整个流程。

由于 InVision 等程序的易用性，可点击原型在过去几年中变得特别流行。 它对移动设备更有价值，现在每个主要的原型设计工具都提供了一些直接在测试设备上查看或测试移动线路的途径。

借助一些工程知识或更强大的工具（例如 Justinmind 或 Axure），还可以构建功能原型，这些原型是交互式的，而不仅仅是单击。 用户可以测试诸如填写表格、完成简单或复杂的任务以及实际使用应用程序，而无需实际构建它。 接受过人机交互 (HCI) 设计培训的设计师，包括许多 Toptal 设计师，会定期使用功能原型进行构建和测试。

交互式原型非常适合测试动画、应用程序内的用户操作以及有时无法在没有功能操作的情况下测试的高级功能。

有目的的原型

原型设计的美妙之处和挑战都在这个过程中。 我们可以对几乎所有事情说同样的话，但原型的开始和结束都是有目的的。 在不知道为什么特定屏幕需要以某种方式运行、功能应该如何操作或用户是否需要漏斗的情况下，制作的原型就没有开发出来； 它被绘制然后临时创建。

然而，即使构建的每一个线框都如此智能地完成，沿途提出的问题，考虑到每个相关的用户故事并将信息架构用作地图，仍然可能会遗漏一些东西。 这就是原型设计的挑战：客户、经理甚至设计师都忘记了原型不是最终的。 它们只是一个草稿，一个迭代直到下一个版本。 这都是用户体验设计过程的一部分。

因此，在构建下一组原型时，请记住至少要问一个非常重要的问题：这会产生预期的结果吗？ 如果没有，那么这是另一个起草新版本的机会。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验