---
title: Prototyping
summary: Introduction to User Experience Design｜Week4
created: 2021-11-18T21:26:41+08:00
categories:
  - UX学习笔记
  - Introduction to User Experience Design
tags:
  - UX
---

## **关于 Prototyping**

### 什么是原型开发

- 原型开发可以被定义为一个新颖设计的早期模型
- 通过原型来评估新设计的各个方面 并检查设计是否达到了预期的结果

### 原型开发的作用

- 经济（节约时间的金钱）
- 快速构建、迭代

### 水平原型

![](/2021-11-18-ux4/1.png)
涵盖功能的广度，整合所含的功能（大概有什么）

### 垂直原型

![](/2021-11-18-ux4/2.png)
对一些特征进行深入的建模（多层级）

## **低保真 Lofi Prototype**

### 低保真和高保真的区别

- 低保真原型与最终设计几乎没有什么相似之处，无论是在形式或功能上（快速迭代、验证想法）
- 高保真原型则与最终设计非常相似

### 注意事项

- 注重用户反馈
- 也可以让利益相关者加入反馈过程
- 避免完美主义，注重想法的表达和验证，关注核心路径

### 三种形式

#### 1. 草图

表明用户场景，痛点是怎么产生的（场景）
![](/2021-11-18-ux4/3.png)

#### 2. 故事版

![](/2021-11-18-ux4/4.png)

- 一种以静态方式提供叙事的常用方法
- 将设计放在上下文中，来考虑用户如何在给定的场景中使用我们的新设计。
- 场景互动的迭代，简单的任务图形、场景互动

#### 3.卡片原型

![](/2021-11-18-ux4/5.png)

- 表示我们与实际界面可能发生的交互序列。
- 使用一组索引卡。逐一代表一个用户在尝试完成任务时，会遇到的一序列屏幕。

## **其他原型方式**

### 绿野仙踪/奥茨法师

_Wizard of Oz_

![](/2021-11-18-ux4/6.png)

- 用来模拟产品的功能。
- 通过让人执行通常由计算机执行的任务,在这里用户不知道该产品是不具备功能性的
- 优点：能够节省建立功能性产品的时间和金钱
- 缺点：
  - 需要相当长的时间来使其正常运转，并且它总是需要多人操作
  - 需要一个训练有素的巫师，最终用户可能对系统有不切实际的期望。
  - 基于欺骗性的功能，反过来可能会限制他们提供反馈，继而限制从收集的数据中得出的推论

### 概念验证视频

_Proof of Concept Video_

- 一个能够在各种场景下展示各种用途和系统的功能的视频（系统是如何工作的 以及在什么情况下它会有用）

### 隐喻技术

_Metaphor Development_

- 考虑用户如何看待设计
- 帮助用户建立新设计如何运作的**相关心理模型**
- 隐喻将新功能与用户以及熟悉的系统功能相比较对比。

## **相关资源**

### Resources and Tools for Protoyping 1

1. [prototyping.html](http://www.usability.gov/how-to-and-tools/methods/prototyping.html)
2. [high fidelity prototype/](http://www.usabilityfirst.com/glossary/high-fidelity-prototype/)
3. [high fidelity vs low fidelity prototyping web design and app development](http://www.atlargeinc.com/insights/high-fidelity-vs-low-fidelity-prototyping-web-design-and-app-development)
4. [Social Mirror](https://www.youtube.com/watch?v=91-JnTq3MhA)

### Tools

1. [Uxrecorder](http://www.uxrecorder.com/)
2. [Invision](https://www.invisionapp.com/)
3. [Marvel](https://marvelapp.com/)
4. [Axure](http://www.axure.com/)

### Resources for Prototyping 2

1. [What a prototype is and is not](https://uxmag.com/articles/what-a-prototype-is-and-is-not)
2. [the skeptics guide to low fidelity prototyping](https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/)
3. [low fidelity prototype](http://www.usabilityfirst.com/glossary/low-fidelity-prototype/)
4. [why every consumer internet startup should do more low fidelity prototyping](http://andrewchen.co/why-every-consumer-internet-startup-should-do-more-low-fidelity-prototyping/)
5. [lofi vs hifi prototyping how real does the real thing have to be](http://www.telono.com/en/articles/lo-fi-vs-hi-fi-prototyping-how-real-does-the-real-thing-have-to-be/)
6. [prototyping types of prototypes](http://it.toolbox.com/blogs/enterprise-solutions/prototyping-types-of-prototypes-14927)
7. [horizontal and vertical prototypes](http://www.usabilityfirst.com/glossary/horizontal-and-vertical-prototypes/)
8. [introduction sketch ui design/](http://marketblog.envato.com/grow-improve/creativity/introduction-sketch-ui-design/)
9. [the messy art of ux sketching/](https://www.smashingmagazine.com/2011/12/the-messy-art-of-ux-sketching/)
10. [how to draw quick useful ui sketches](http://www.slideshare.net/LaneHalley/how-to-draw-quick-useful-ui-sketches)
11. [User interface sketching tips part-1](http://ui-patterns.com/blog/User-interface-sketching-tips-part-1)
12. [storyboarding in the software design process](https://uxmag.com/articles/storyboarding-in-the-software-design-process)
13. [the 8 steps to creating a great storyboard](http://www.fastcodesign.com/1672917/the-8-steps-to-creating-a-great-storyboard)
14. [users story ux storyboarding](http://www.slideshare.net/fgarofalo/users-story-ux-storyboarding)