以下内容源自我在Scott Klemmer UC SanDiego的课程学习笔记 网络视频可以登陆coursera进行报名学习

HCI-03-1-Prototyping.pdf

在合适的阶段使用合适的工具

1.原型技术

故事板

创建纸上原型

创建数字模型

故事板不是“漂亮的图”

image.png

故事板内容来源:Image courtesy Amal Dar Aziz, Guide to Storyboarding, http://d.ucsd.edu/story

assignment3_storyboard_notes.pdf

2.故事板

故事板需要表达——环境(setting)

  • 涉及的人
  • 环境
  • 需要完成的任务

    故事板需要表达——顺序(sequence)

  • 包含哪些步骤?

  • 什么导致用户使用?
  • 什么任务可以给插图?

故事板需要表达——满意度(satisfaction)

  • 用户使用该系统的动机?
  • 它能够让用户完成什么?
  • 系统满足什么需求?

    故事板的好处

  • 整体要强调如何完成一项任务

  • 避免使用特定的用户界面,不需要体现按钮
  • 帮助所有利益相关者在目标方面达成一致

纸质原型来源:Courtesy of Lyfalyze team: Greg Grenier, Luke Knepper, Alexandra Liptsey-Rahe, Vivian Shen
image.png

3.纸质原型

6个纸质原型的技巧

  • 快速工作,制作可重复使用的组件
  • 把所有的材料放在一起;小部件可能会丢失或损坏
  • 难以模拟?需要它飞出?(进度条,交互转换…)画它或描述它
  • 背景可以包含原型并为用户提供上下文
  • 混合和搭配——纸张和像素,硬件和软件,…
  • 通过熟悉的操作元素来增添上下文衔接

在材料上增添创意

  • 小部件:纸、纸板、透明片
  • 连接器:胶带、胶水、橡胶水泥
  • 绘制:钢笔,铅笔,马克笔

更多的材料……

  • 海报板,无衬索引卡,泡沫芯
  • 可快速更换部件的可拆卸胶带或可更换的胶水
  • 透明笔允许用户输入内容-使用一张透明纸作为输入框
  • 宽头钢笔和马克笔(想象一下记号笔)——更小的线条宽度可能很难看到
  • 使用成堆的索引卡来模拟选项卡对话框

和别人尝试你的原型

  • 将实物模型
  • 测试多个选项
  • 强调对话

image.pngimage.png

同时测试多个原型以获得最大的价值

image.png

让用户和其他利益相关者帮助设计

4.数字模型/电子原型

image.png

5.形式与反馈的共同进化

不同时期,设计保真程度有所差异:
需求发现、故事板、低保真原型、高保真原型。
不同阶段做的事不同
用户场景可以用故事板;
获取用户反馈和信息可以用低保真;
结构评判可以采用低-高保真;
受控实验(特定环境或内容的实验)可以用低-高保真;
image.png

以上内容来于coursera网站的Scott Klemmer的交互设计课程:

image.png
This video is courtesy of Scott Klemmer
Produced by: Events, Tours and Media Technology, Qualcomm Institute @ Calit2
University of California, San Diego
Directed by: SAP Labs LLC