- 了解标准用户界面实践
- 创建应用程序的纸质原型
- 使用原型获取用户反馈
这些是本课的活动:
原型设计
现在,您已经有了最小化可行产品的想法,是时候考虑您的项目将是什么样子,并勾勒出一些构思。
A 原型是某物的早期模型。
应用程序开发人员在开始编码之前,通常会制作一个应用程序的纸质原型。
纸质原型是对应用程序用户界面外观的手绘呈现。它通常包括应用程序中每个屏幕的图纸,描绘不同的状态。

为什么选择原型?
- 您可以快速直观地传达您的想法。
- 这是一种合作!
- 当你在纸上创作时,会更随意,对话也会从实验中产生。
- 价格便宜!
- 您不必花费大量时间和金钱
- 您无需使用电脑或互联网。
- 在这一过程中,您不必成为技术专家。
- 您可以查看用户对原型的反应,从而快速了解设计中哪些可能有效,哪些可能无效。
- 在您花时间开发和编码应用程序之前,就可以确认设计决策。
通过本视频了解其他 Technovation Girls 团队如何制作纸质和数字原型!
导师提示
最佳最佳做法: 在向学生介绍纸和纸板原型时,强调从简单、低成本的模型开始测试想法的重要性。例如,"纸和纸板原型就像是设计的草稿。它们可以帮助你在制作最终版本之前,了解你的想法的外观和工作原理。这些简单的模型可以让你快速做出改变,找出最有效的方法"。
纸质原型可用于获得潜在用户(即家庭成员、其他导师、朋友、社区成员等)的反馈。这些反馈意见可作为最终提交材料中反馈意见的一部分。
下面的视频将展示一个原型项目的示例(左侧)和一个纸质原型的测试过程(右侧)。
向学生提出指导性问题:
为什么在制作最终产品之前用纸或纸板制作一个简单的原型很有用?
制作纸模型或纸板模型如何帮助你改进设计?
从纸质原型测试中,你可能会学到哪些其他方式无法学到的东西?
导师提示由 AmeriCorps 提供支持。

原型元素
保持 这些事项在您开始制作纸质原型时,请牢记这些事项。将鼠标悬停在每张卡片上,了解更多信息。
用户
用户
设备类型
设备类型
手机与平板电脑?
无障碍环境
无障碍环境
一致性
一致性
用户界面
制作原型的关键在于用户如何与应用程序进行交互。这方面的术语是 用户界面 或 UI.它包括所有元素,如按钮、文本框和滑块,让用户可以使用您的应用程序。
设计数字产品的另一个术语是 用户体验或 UX. 下文将逐一解释。
用户界面
用户与应用程序的交互方式。它包括按钮、文本框和滑块等所有元素,让用户可以使用您的应用程序。
用户界面设计的重点是使您的应用程序具有视觉吸引力、直观且易于使用。
用户体验
用户如何体验您的应用程序。它包括用户界面,但更注重用户的情感、态度和行为。
用户体验设计关注的是用户的需求和目标,以及提升用户的整体体验。
用户界面功能
以下是移动应用程序用户界面的一些关键部分
导航
导航是用户在应用程序中找到所需内容的方式。下面是几个导航选项的例子。





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



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



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




使用标准元素
您可能希望您的应用程序看起来与众不同,以便从竞争对手中脱颖而出。但是,使用标准元素实际上可以帮助用户更快地了解如何使用您的应用程序。
例如,大多数用户都熟悉下拉菜单。你可以设计一种新的菜单类型,但用户可能会感到困惑。坚持使用熟悉的组件,让用户使用起来更方便。
请观看由来自谷歌的 Melissa Powel 和 Mariam Shaikh 讲述草图和纸质原型制作的视频短片。
活动 1:纸质原型
绘制应用程序的屏幕草图
- 用户如何从一个屏幕浏览到另一个屏幕?
- 他们将如何输入应用程序所需的信息?
- 如何显示信息?
- 如何布置才能美观大方?
- 考虑配色方案、字体、标识
获取反馈
现在,您已经有了代表解决方案的实物,是时候获得一些用户反馈了!
潜在用户需要试用它,并给您一些 诚实的反馈。
您想从用户测试中学到什么?
方法之一
- 让用户使用您的应用程序完成一系列任务,看看他们能否在没有您干预的情况下完成任务。
- 一名团队成员可充当"电脑 "角色
- 根据用户互动改变屏幕或部分屏幕
- 另一名团队成员是 记录员
- 写下用户所做的事情以及他们的评论和反应。
- 如果得到允许,您还可以录制测试过程。

记住,测试人员是来帮助你的!不要评判或干预他们的互动(除了 "计算机 "根据动作做出反应/更新原型之外)。
以赞赏的态度接受他们的反馈。
下面是一个自行车修理店应用程序的用户测试范例。
活动 2:获取反馈
与 2-3 名用户测试纸质原型
- 向用户展示原型。
- 要求用户使用原型执行一项任务。
- 让他们尝试在没有帮助的情况下完成任务。
- 团队成员可以充当 "电脑",对他们的行动做出反应。
- 另一名(或两名)团队成员记录用户的操作、评论和反应。
反思
我们建议您保存纸质原型。在制作项目的过程中,您将需要参考它。您还应该给原型拍照。

关键术语回顾
- 原型- 产品的早期模型
- 纸质原型 - 手绘的应用程序外观示意图
- 用户界面(UI)- 用户如何与移动应用进行物理交互
- 用户体验 (UX)- 用户在使用移动应用程序之前、期间和之后的感受
其他资源
虽然纸张是制作原型的首选方法,尤其是作为第一步,但您也可以使用数字工具来制作应用程序原型。
许多工具都是有价的,但通常也有免费版本,你可以使用有限的功能或项目。以下是一些可能的选择。
- 谷歌幻灯片(简单、免费)
- InvisionApp
- Figma
- 流行作者:Marvel