【Technovation官方中文教程】构思8 - 纸上原型化
本帖最后由 szjuliet 于 2021-3-9 23:04 编辑教程地址：https://bit.ly/TGirlsCN-Idea8
返回教程目录：https://mc.dfrobot.com.cn/thread-308465-1-1.html
构思8：纸上原型化
本节课能帮助您借助包括用户体验和设计在内的评价标准获得积分，还将有助于您的成果满足整个技术章节的要求。 本节课中，您将……●了解用户界面常用常规设置● 为应用程序创建纸上原型
关键术语与概念
● 原型 – 产品的早期模型。● 纸上原型 – 应用程序界面手绘图。● 纸上原型化 – 创建纸上原型。● 常规设置 – 常用或广泛使用的设置。
启发
既然有了最小化可行产品思路，就该将想法用草图表达出来，并思考应用程序与用户界面可能采用的布局了。原型指产品的早期模型，其种类多样，各不相同。但本节课的重点是纸上原型。纸上原型指应用程序界面手绘图，通常看似截屏。 纸上原型化或创建纸上原型的好处是什么？● 便于以可视方式，快速就想法进行沟通。比如，可以借此展示点击应用程序按键后会看到的界面；● 便于团队合作！在纸上手绘时，更加随意，从而可以一边尝试不同界面布局一边交流；● 成本低！无需投入大量资金和时间即可创建。可以使用比如纸张、杂质残页、便利贴、记号笔、贴纸、胶带和胶水等材料。● 无需使用电脑或上网。● 无需技术专家参与。● 可以获知用户对纸上原型的反应，从而快速了解可能有用或无用的设计。● 有助于在将更多时间用于开发和编码前，确认设计决策。开始前，请参见下列可用于所开发应用程序的一些基本的用户界面常规设置。常规设置指常见或广泛使用的设置。用户界面常见常规设置如下所示。您无需采用其中每种设置。它们只是您可能希望在应用程序中设置特定设置时，建议采用的设置。
按键
移动用户界面中随处可见按键。按键用于提示用户执行重要操作，比如“注册”或“提交”。注意不要过度使用按键。按键过多会让用户感觉凌乱和迷惑，从而不知道使用哪一个。
启动画面
许多应用程序都会在用户打开程序时，使用全屏显示徽标。这就是所谓的启动画面。有时，启动画面会显示导航菜单或按键。
徽标与页眉 大多数应用程序都在导航主菜单的顶端设置有位置显示徽标。
导航栏
导航栏有助于用户找到正在应用程序中寻找的板块。许多应用程序将导航栏设置在包含有图标的界面的底部。您应将导航栏项目设置为5个或以下，以便不让人感觉凌乱。
全屏菜单 您可以设置一个全屏菜单供用户使用，帮助导航应用程序。全屏菜单看似清单。或者，您也可以发挥创意，以色块或图片框形式显示。
汉堡菜单
汉堡菜单形似如下： 完整导航栏或菜单无法同时显示在一个界面中时使用汉堡菜单。点击即可显示隐藏菜单。
其他选项菜单 其他选项菜单形似如下： 类似于汉堡菜单的其他选项菜单，也用于显示无法显示在一个界面的信息。
搜索栏 设置搜索栏，这是用于帮助用户导航应用程序的极为常见的方式。 在搜索栏旁边添加放大镜，可让用户知晓此处为搜索栏。
滚动提要
大多数用户习惯向下滚动鼠标滚轮查看更多信息。提要用于显示一个界面无法显示的更多信息。
仔细看一看自己手机上安装的一些应用程序。您看到其用户界面的哪些板块是常用的？您认为哪些板块布局美观或使应用程序便于使用？虽然您可能希望所开发的应用程序看起来的确与众不同，能超越竞争对手，但事实上，采用常规设置有助于用户更快速地知晓这款程序的使用方法。比如，大多数用户熟悉汉堡菜单。因此，在应用程序中使用该类菜单，有助于用户快速获知运行应用程序可执行的功能。您也可以设计新型菜单，但可能会让用户感到迷惑，从而无法获知程序使用方法。当然若愿意，应该让应用程序具有创新性！在其他资源章节中，列出了关于如何由用户验证程序用户界面不同板块的一些提示。随后在创业5：创建徽标章节中，您将设计徽标并为应用程序选择配色方案。● 立刻从应用程序商店下载一款新的应用程序。这款程序使用了前述提及的任何常规设置吗？尝试使用5分钟。您用多久掌握了使用方法？● 需要一些建议吗？○ 尝试使用每种系统运行的Trails（iOS和安卓系统）或Spotify（iOS和安卓系统）。开始前，您可以点击以下链接观看一段短视频，跟随目前就职于谷歌开发商关系团队的梅丽莎·鲍威尔，以及现任谷歌高级用户体验设计师玛利亚姆·谢赫一起，进一步了解纸上原型、用户流和配色规则的相关资讯。https://www.youtube.com/watch?v=JMjozqJS44M- 视频开始时间为1:40准备开始吗？是时候创建纸上原型了。绘制草图，这是设计过程的基础，有助于您就所设计的产品做出关键决定。纸上原型很简单，就像在纸上画画一样。初期构思时，这样做很有用，便于呈现程序基本架构，体验大众如何与程序互动。还可以验证配色，以及按键设置位置。现在就花一些时间在纸上验证思路，这会有助于随后在将想法转化为数字原型时，节省时间。
活动 – 纸上原型化
链接至[工作表]您需要的物品:●普通纸张●记号笔选备：●已列印的工作表●贴纸●胶水●剪刀●胶带●杂志您需要完成的事项:
[*]团队成员一起画出应用程序每个界面的草图。要让草图体现思路，并尽量不要立刻做出判断。可以稍后针对草图提问！记住，要着眼于创建上一节构思课完成的最小化可行产品的功能。首先开始设计最小化可行产品应具有的功能。为此，您可能需要考虑：
○开机界面应是怎样的？■需要包含徽标吗？■应如何配色？■在第2节营销课中，您会用更多时间创建徽标并制定配色方案。○所开发应用程序需要设置导航菜单吗？应采用何种类型的菜单？菜单应包含哪些内容？○应用程序需要设置用户登录吗？登录界面应如何布局？简介页面应如何布局？○若设置为点击按键即可前往下一界面会如何？○每个界面应如何布局？ 2. 纸上原型示例如下。注意使用贴纸显示用户可点击按键所在位置的方式。此外，有时还需绘制用以显示用户点击按键后可能进入的下一个界面的草图。
[*]建立实用的原型后，就可以创建用户导航应用程序的流程图了。您可以如前述视频所示拍照后，制作动图或视频。
举一反三
您的纸上原型就创建完成了！建议保存纸上原型，因为可能需要在构建应用程序的过程中用作参考。确保将纸上原型存放在稳妥的地方，以免遗失。或安排团队中的一名成员负责保管。
●若设计的是作为“最小化可行产品”的应用程序，那么必须设置有哪些功能，以及需要从设计中删除哪些功能呢？●您选择了采用任何常规设置吗？若是，都有哪些？
其他资源 – 将数字工具运用于原型
若团队成员非同在一地，您可能希望为应用程序创建数字原型。可以尝试使用工具，比如InvisionApp 或甚至类似于Google Slides的工具。使用GoogleSlides创建数字纸上原型的示例如下。
数字原型示例
页:
[1]