关于设计原型的10个建议

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

尽管有各种各样的原型技术,但它们都有很多共同点。在本文中,我从该领域的最佳专家以及我们自己在UXPin的经验中提炼了多年的原型制作技巧和最佳实践。

根据用户定制原型

你所呈现的原型类型非常重要。在设计和开发团队的会议上很有效的东西可能在普通员工会议上并不有效。

这并不是限制要展示什么——因为你希望尽可能地让所有利益相关者参与进来并保持透明——而是更多地是关于如何要呈现原型并选择合适的水平的忠诚

如果你想在产品的早期阶段展示概念性设计方案,那么低保真度原型是很好的选择。

另一方面,高保真原型对于非设计和非技术人员来说更容易理解,因为它在视觉上最接近最终产品。

在向只想快速了解主要设计概念的高级主管或工程师展示原型时,纸上原型可能会更有效。

或者你可能需要一个中保真度的原型来启动团队成员之间的协作设计会议。

根据情况使用适当类型的原型可以确保你的设计概念能够清楚地传达给观众。

'你的听众

原型的创造者将非常熟悉他或她的工作的每一个方面。

然而,测试和评估原型的人将是第一次看到它,所以原型的创造者将需要在演示原型之前解释和准备他们,以避免出现任何误解或困惑。

例如,对于一个低保真度的原型,我们需要事先明确反馈和评估应该专注于功能和用户流,而不是美学。

另一方面,如果我们呈现的是一个中保真或高保真的原型,我们就可以将讨论集中在视觉效果和交互上。

让用户参与进来(参与式设计)

参与设计将用户反馈构建到设计过程中。

参与式设计可以通过多种方式进行,包括纸上原型设计练习、用户测试、头脑风暴会议等等。

参与式设计背后的理念是,用户参与可以让我们在过程早期就洞察到与可用性和用户体验相关的问题。

参与式设计框架来源:poweredbysilas.com

参与式设计更多的是一种观察式的合作。它不同于可用性测试,因为我们让用户在构思和概念的最初阶段就参与进来,不仅仅是为了验证设计决策,而是真正利用他们的反馈来帮助开发设计。

关注用户流程和场景

原型不需要很漂亮,但它们需要工作。他们必须清楚地展示设计背后的关键思想。

用户流快速模型来源:wireframes.linowski.ca

以下是我们团队在重新设计Yelp时遵循的流程:

步骤1:勾勒页面流程

我们从优化用户如何通过站点开始。

在站点地图上进行了两次迭代之后,我们又花了两次迭代填充导航和内容细节(菜单、图像容器等)。

步骤2:创建一个低保真度的数字原型

草图完成后,我们转向UXPin应用程序,开始数字原型制作过程。我们为每个页面创建了3到5个变体,运行了一些快速的走廊可用性测试,然后根据反馈对原型进行迭代。

第三步:最后一步增加保真度

一旦用户流程最终确定,我们对功能感到满意,我们就专注于视觉细节,如排版、图标和图像。

我们还从Photoshop中导入图像到UXPin应用中,将我们的设计模型和原型阶段合并在一起。

当我们最终完成原型时,我们还根据需要调整了功能。

让用户交互尽可能简单

更少的点击意味着更少的摩擦,这意味着更好的用户流。

但是不要让3-click神话限制您的设计决策。理论上,您可以创建一个网站,所有的页面都可以通过从网站首页的一次点击访问,但这将有害地增加用户在浏览网站时所经历的认知压力,因为他们需要同时筛选大量信息。

导航流程图来源:grundyhome.com

更重要的是要考虑每个交互的生产力。交互必须让用户觉得他们离完成任务和目标越来越近了。如果能在三次点击中完成,那就太好了,但如果你需要更多的用户交互,你应该选择最好的选项。

在我们的电子书,Web UI模式2014,我们报道了维珍美国航空公司的机票预订用户流。预订机票的任务不可能在三次点击或更少的时间内完成;这大概需要9个步骤。

然而,尽管打破了三次点击的规则,用户订票的流程仍然是简单和愉快的。

维珍美国预订机票的用户流量来源:uxpin.com

不要忽视动画

虽然动画和过渡可能在功能原型中被简化,或者在低保真度或纸上原型中完全不存在,但重要的是我们在过程的早期就考虑到它们。

制作动画交互原型的例子来源:blog.uxpin.com

知道动画将在哪里以及如何实现——无论何时我们得到它们——将帮助我们创建更统一的用户体验。

动画交互可以让你的原型感觉更像最终产品,这在用户测试中是有益的,所以如果你有时间和资源,创建原型是个不错的主意。

草图:原型的原型

就像原型是最终产品的蒸馏版一样,草图也是原型的蒸馏版。

传统的设计过程是这样的:

  1. 草图
  2. 线框图
  3. 设计模型
  4. 原型
  5. 发展

根据项目的需求、资源和限制,这个过程通常会有所不同。有些人会跳过线框图和模型,直接进入原型制作阶段。其他人则喜欢先构建线框图,然后直接进入代码。

无论你用什么方法,从一个粗略的草图开始是一个快速和廉价的方法来帮助组织你的概念,想法和想法。草图可以把你脑海中漂浮的抽象想法变成更具体的东西。

如果你担心你的绘画能力——不要担心!

正如你在下面的图片中所看到的,这与漂亮无关。目标是组织和探索你的思想、概念,并创建一个基本的结构。

一个简单的原型草图来源:uxpin.com

不要让代码阻碍你的原型

如果你只是一个纯粹的设计师,编程可能不是你的强项。在当今这个时代,有如此多的工具和选项供你使用,你的编程知识水平不应该阻止你创建原型。虽然功能原型确实有它的好处,但它并不是一个严格的要求。

有很多原型设计的选择:纸上原型设计、《绿野仙踪》的方法、使用Keynote/PowerPoint的方法,以及具有图形用户界面的专门原型设计工具。

纸上原型锻炼来源:carolynchuwong.com

低保真度的原型可以让你只需要很少的编码,甚至不需要编码。纸上原型不需要任何代码,它是快速且清晰地向团队表达想法的简单方法。

此外,InVision、Axure和我们的应用程序等工具允许您无需代码就可以构建高保真的原型。

用真实用户测试你的原型

测试原型可以让您尽早发现问题。

在创建原型时,使用角色和用户场景来保持跟踪,然后通过亲自调节测试或通过UserTesting、USERcycle等可负担的在线可用性测试来验证您的假设。

从低保真原型开始,因为它让用户更愿意给出诚实的反馈,然后用高保真原型迭代和测试你的交互和动画。

如果你只有预算或时间进行一轮测试,我们建议创造一个中等逼真度的原型。它们看起来仍在进行中(这鼓励诚实的反馈),你仍然能够测试关键组件,如交互、用户流和网站内容。

在每个原型阶段之间,我们总是进行快速的可用性测试。

以下是多年来帮助我们团队的一些建议。

在构建之前进行测试

通过运行卡片分类树形测试,你可以测试你的有效性信息架构(IA)在你深入到原型之前。

卡片排序帮助您了解用户如何创建自己的导航方案。

树测试可以让您在用户完成核心任务时看到当前IA概念的有效性。

不要使用Lorem Ipsum

占位符文本会让人分心,混淆视听,缺乏意义。实际内容将更好地模拟最终产品。

尽可能使用真实的图像和图标

我们也不推荐在可用性测试中使用占位符图像和图标。你的图像和图标不需要打磨,但用户应该能够感知它们的一般形式。

如果有必要,至少使用真实的占位符内容

在某些情况下,您可以使用占位符内容,只要它们能够有效地表示最终内容。

只制作你需要的原型

原型是达到目的的一种手段,而不是目的本身。我们可能会沉浸在构建完美原型的努力中,但这只会推迟实际产品的开发。

虽然你不希望匆忙完成原型阶段,但你也不希望在这个阶段停留太久。

时间轴的原型来源:devartia.com

进一步的阅读

要了解更多关于原型设计的知识,请获取我们的免费电子书原型制作指南.我们的书涵盖了不同的原型设计工具和策略,并讨论了来自谷歌Ventures、ZURB、IDEO等公司的案例研究。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!