纸质原型

  • 了解标准用户界面实践
  • 创建应用程序的纸质原型
  • 使用原型获取用户反馈

原型设计

现在,您已经有了最小化可行产品的想法,是时候考虑您的项目将是什么样子,并勾勒出一些构思。

A 原型是某物的早期模型。

应用程序开发人员在开始编码之前,通常会制作一个应用程序的纸质原型。 

纸质原型是对应用程序用户界面外观的手绘呈现。它通常包括应用程序中每个屏幕的图纸,描绘不同的状态。

paper prototype of app screens

为什么选择原型?

通过本视频了解其他 Technovation Girls 团队如何制作纸质和数字原型!

最佳最佳做法: 在向学生介绍纸和纸板原型时,强调从简单、低成本的模型开始测试想法的重要性。例如,"纸和纸板原型就像是设计的草稿。它们可以帮助你在制作最终版本之前,了解你的想法的外观和工作原理。这些简单的模型可以让你快速做出改变,找出最有效的方法"。

纸质原型可用于获得潜在用户(即家庭成员、其他导师、朋友、社区成员等)的反馈。这些反馈意见可作为最终提交材料中反馈意见的一部分。

下面的视频将展示一个原型项目的示例(左侧)和一个纸质原型的测试过程(右侧)。

向学生提出指导性问题:

为什么在制作最终产品之前用纸或纸板制作一个简单的原型很有用?

制作纸模型或纸板模型如何帮助你改进设计?

从纸质原型测试中,你可能会学到哪些其他方式无法学到的东西? 

导师提示由 AmeriCorps 提供支持。

stylized A, AmeriCorps logo in navy

原型元素

保持 这些事项在您开始制作纸质原型时,请牢记这些事项。将鼠标悬停在每张卡片上,了解更多信息。

用户

用户

将用户放在设计的首位!应用程序应简单易用。

设备类型

设备类型

您的应用程序在 iPhone 和 Android 上的效果如何?
手机与平板电脑?

一致性

一致性

让你的屏幕布局保持一致,这样你的用户就知道在不同屏幕之间应该期待什么。

用户界面

制作原型的关键在于用户如何与应用程序进行交互。这方面的术语是 用户界面 或 UI.它包括所有元素,如按钮、文本框和滑块,让用户可以使用您的应用程序。

设计数字产品的另一个术语是 用户体验或 UX. 下文将逐一解释。

用户界面

用户与应用程序的交互方式。它包括按钮、文本框和滑块等所有元素,让用户可以使用您的应用程序。

用户界面设计的重点是使您的应用程序具有视觉吸引力、直观且易于使用。

用户体验

用户如何体验您的应用程序。它包括用户界面,但更注重用户的情感、态度和行为。

用户体验设计关注的是用户的需求和目标,以及提升用户的整体体验。

用户界面功能

以下是移动应用程序用户界面的一些关键部分

导航

导航是用户在应用程序中找到所需内容的方式。下面是几个导航选项的例子。

集装箱

这些组件可以将内容组合在一起。它有助于布局屏幕的各个部分,以及隐藏和显示各个部分。

输入

输入组件允许用户向应用程序输入信息。下面是几个例子。

信息

这些组件允许应用程序与用户共享信息。

使用标准元素

您可能希望您的应用程序看起来与众不同,以便从竞争对手中脱颖而出。但是,使用标准元素实际上可以帮助用户更快地了解如何使用您的应用程序。

例如,大多数用户都熟悉下拉菜单。你可以设计一种新的菜单类型,但用户可能会感到困惑。坚持使用熟悉的组件,让用户使用起来更方便。

停一停,试一试

  1. 现在就从应用商店下载一个新应用。 
  2. 如果你需要灵感,试试 AllTrails (iOS或 安卓) 或 Blinkist (iOS或 安卓)
  3. 它使用了上述哪些组件? 
  4. 尝试使用该应用程序 5 分钟左右。 
  5. 你花了多长时间才弄明白如何使用它?

请观看由来自谷歌的 Melissa Powel 和 Mariam Shaikh 讲述草图和纸质原型制作的视频短片。

活动 1:纸质原型

预计时间:60 分钟

绘制应用程序的屏幕草图

设计第 4 单元 MVP 工作表中的功能。 记住要考虑
  • 用户如何从一个屏幕浏览到另一个屏幕?
  • 他们将如何输入应用程序所需的信息?
  • 如何显示信息?
  • 如何布置才能美观大方?
  • 考虑配色方案、字体、标识
请注意,您可以复制一份工作表并根据需要进行编辑。
打开工作表

获取反馈

现在,您已经有了代表解决方案的实物,是时候获得一些用户反馈了!

潜在用户需要试用,并向您提供一些真实的反馈意见。

您想从用户测试中学到什么? 

方法之一

  • 让用户使用您的应用程序完成一系列任务,看看他们能否在没有您干预的情况下完成任务。 
  • 一名团队成员可充当"电脑 "角色 
    • 根据用户互动改变屏幕或部分屏幕
  • 另一名团队成员是 记录员
    • 写下用户所做的事情以及他们的评论和反应。
  • 如果得到允许,您还可以录制测试过程。 
prototype example

记住,测试人员是来帮助你的!不要评判或干预他们的互动(除了 "计算机 "根据动作做出反应/更新原型之外)。

以赞赏的态度接受他们的反馈。

下面是一个自行车修理店应用程序的用户测试范例。 

活动 2:获取反馈

预计时间30 分钟

与 2-3 名用户测试纸质原型

  1. 向用户展示原型。
  2. 要求用户使用原型执行一项任务。
  3. 让他们尝试在没有帮助的情况下完成任务。
  4. 团队成员可以充当 "电脑",对他们的行动做出反应。
  5. 另一名(或两名)团队成员记录用户的操作、评论和反应。

反思

我们建议您保存纸质原型。在制作项目的过程中,您将需要参考它。您还应该给原型拍照。

prototype on phone and on paper
您是否发现了最小可行产品所不需要的功能?
您从用户那里收到过有用的反馈吗?
您是否需要根据反馈意见修改应用程序中的任何内容?

关键术语回顾

  • 原型- 产品的早期模型
  • 纸质原型 - 手绘的应用程序外观示意图
  • 用户界面(UI)- 用户如何与移动应用进行物理交互
  • 用户体验 (UX)- 用户在使用移动应用程序之前、期间和之后的感受

其他资源

虽然纸张是制作原型的首选方法,尤其是作为第一步,但您也可以使用数字工具来制作应用程序原型。

许多工具都是有价的,但通常也有免费版本,你可以使用有限的功能或项目。以下是一些可能的选择。