原型制作流程

• 设计、测试和细化用户界面的方法。

如何制作

团队

• 产品团队是任何在产品上工作的人，包括技术撰稿人、市场营销人员、培训人员和客户支持人员。
• 开发团队是一个正在制作/测试/支持用户将接触到的东西的人。

选择观众

任务类型（优先级，用户界面之外的问题）

• 可用性问题：混乱的概念，糟糕的术语，布局问题，缺乏反馈等等。
• 错误说明：开发团队不知道的用户需求，或误以为这符合用户需求
• 偏好一种设计方案

制作屏幕

• 泛指用户界面的任何部分(网页、液晶显示器、对话框、窗体等)。

可用性测试

• 用户：代表您的听众的人：
• “计算机”：操纵纸片来模拟界面行为的人并不解释它是如何工作的
• 主持人Facilitator：通常在可用性方面接受培训
• 指导会话观察员：观察会话但不直接参与的记录者。

界面	特点
Comps组成	显示界面、颜色、字体、布局等外观的视觉表示（z型布局、三分法、黄金分割)
Wireframes	布局、导航以及内容分布
Storyboards	表示使用接口完成特定任务，更高层次

原型的优点

• 无需代码就可以模拟接口
• 根据用户反馈进行细化
• 多个小组可以参与

例子

• 20世纪90年代Walker数码准备推出新的在线服务，试图找出销售机票的独特方法是如何工作的

制作原型

• 帮助创建原型下面的背景

  
  image.png
• 软件应用的背景：如果对多个应用程序感兴趣，则从OS开始
  操作系统（Operating System)
• 浏览器背景

image.png

• 小屏幕接口：使用网格或图形纸精确地表示字符/图标大小。

  
  image.png

• 单选按钮/复选框：当用户触摸所需的选项时，计算机移动或添加磁带，一些用户会自己这样做。

  
  image.png

• 选项卡式对话框：带有一堆索引卡的原型，使用可移动磁带制作他。

  
  image.png

• 文本字段：用户可以在可移动磁带上写字。

  
  image.png

• 下拉列表：在原型上写入默认选择

  
  image.png

• 选择栏/突出显示：用透明的颜色做一个突出显示的部分

  
  image.png

• 可扩展对话框：用空白纸或折叠屏幕覆盖扩展部分，这样就不会有其他选择。当用户单击按钮时，请删除纸张或展开屏幕。更改按钮(“较少”)

  
  image.png

• 可扩展列表：将列表切成块并使用磁带，这样您就可以将列表的各个部分分开，并添加扩展部分。

  
  image.png

• 禁用控件：在可移动磁带上使用带有灰色标记的版本，并将其放在黑色文本上。启用选项时移除灰色标签。

  
  image.png

• 光标( cursor的名词复数 )

  
  image.png