IBM高级设计师分享：你真的懂如何做原型设计吗？

工作中常常出现这种情况：你花了无数个小时构思、设计理论模型，到了投入生产才发现完全忘记放上标识了。事实上，我们太容易陷入一个完美的产品快照中。为了提升你的设计能力，你需要专注于交互设计，通过原型设计可以帮助你实现这一目标。

原型设计是一个迭代过程，它让你能够对设计进行评估和测试。在过去的几年里，针对每种场合和每个细节层次，我都会创建它们的原型。回顾我的设计过程，我发现：

原型为我提供了相当丰富的反馈

原型帮助我向利益相关者阐明我的想法和概念

原型节省了我的工作成本和时间

原型让我成为一个更好更周全的、会讲故事的用户体验设计师

在这篇文章中，我将向你介绍如何选择正确的原型制作工具、让你的原型更有真实感的技巧和窍门以及设计原型之前需要考虑的问题，帮助你的设计更上一层楼。

一、找到合适的工具：如何评估现有的工具

在比较原型设计工具时，我们常常会面临一个选择的困境：许多工具提供的功能和价格都是类似的，让人难以做出选择。我个人偏好的工具是 Flinto，由于软件的速度和细节优势，我用它来设计大部分的原型。不过保持灵活性也很重要：在某些情况下，我会改用像 HTML/CSS/JS 这样的代码编辑器来完成工作。

最后，你要选择能使你的工作变得简单高效的设计工具。请记住，我们要能够根据项目、团队和需求改变使用的工具。

在评估哪种工具最适合你时，请考虑以下事项：

1. 细节和自定义

选择一个支持自定义过渡和多种手势的工具，以满足项目所需要的精细程度。

2. 选择学习曲线

你最不想看到的事肯定是在实际设计之前必须从头学习一个全新的工具。

因此，我建议你选择一个学习曲线比较平缓的工具。

不管选择哪种工具，它要能让你应用于原型设计过程，并且使你专注于自己的时间和想法，而不是学习软件本身。

3. 团队协同

强烈建议你和同事使用相同的工具。

就像你可能会分享 Sketch 或 Illustrator 设计文件一样，你也可以分享你的原型、重新调整素材和深入学习其他人是如何构建特定的交互设计的。

尽管还要考虑一些其他的因素（例如，易于共享和输出代码），但上述要点是在你决定使用哪种原型制作工具时一个很好的思考起点。

请记住：工具不是重点，重点是工具赋予你的创造力。

二、超越设计保真度：如何让原型真实感更强

当你在进行原型设计的时候，你可以使用一些技巧使你的原型真实感更强。

为什么真实感很重要呢？

因为如果一个原型让人感觉真实，你收到的反馈也会更具有建设性，在上交给开发团队之前你也可以更有效地迭代它。

典型的经验法则告诉我们：设计保真度越高越好。不仅设计保真度本身很重要，而且交互的保真度还可以转化为产品的可用性。

你可以从以下几个原则来考虑整个用户体验，使你的原型脱颖而出：

1. 元素状态

元素的状态包括聚焦、活动和悬停。

出于某种原因，许多设计师会忽略这些——尽管它们只是交互设计的基本部分。

如果在用户测试中，用户表示找不到该点击哪里或者不清楚怎么导航，这就是你的设计不包含元素状态所导致的结果。

一个最佳的原型设计实践要从构建组件状态开始。它能告诉用户有哪些可交互的内容，并为你提供更丰富的反馈。

悬停是桌面产品需要考虑的一个重要手势，悬停效果有助于指示或强调用户即将采取的操作。

我们以垃圾桶为例：

图 1 将垃圾桶的的颜色改为红色，表明这可能是一个危险的操作

图 2 包括了一个工具提示，用于指示将要执行的操作

图 3 更有趣，它使用图标本身来说明你将要采取的操作

虽然这些只是微交互，但构建一致的悬停效果能使你的用户获得可预测的体验和交互模式。

按/点击/敲击手势也很重要，因为它为你刚刚进行的操作提供了视觉反馈。

如果用户在点击时没有观察到状态变化，他们会疑惑自己刚刚是否完成了那项操作。这一点对移动设备端尤为重要，因为移动端不可能存在悬停的状态。而在电脑桌面上，点击手势会触发一个活动状态。

让我们一起看看这个例子（尽管有些夸张）：