mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-05-01 00:59:31 +08:00
130 lines
5.1 KiB
Markdown
130 lines
5.1 KiB
Markdown
---
|
||
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**
|
||
|
||
### 什么是原型开发
|
||
|
||
- 原型开发可以被定义为一个新颖设计的早期模型
|
||
- 通过原型来评估新设计的各个方面 并检查设计是否达到了预期的结果
|
||
|
||
### 原型开发的作用
|
||
|
||
- 经济（节约时间的金钱）
|
||
- 快速构建、迭代
|
||
|
||
### 水平原型
|
||
|
||
|
||
涵盖功能的广度，整合所含的功能（大概有什么）
|
||
|
||
### 垂直原型
|
||
|
||
|
||
对一些特征进行深入的建模（多层级）
|
||
|
||
## **低保真 Lofi Prototype**
|
||
|
||
### 低保真和高保真的区别
|
||
|
||
- 低保真原型与最终设计几乎没有什么相似之处，无论是在形式或功能上（快速迭代、验证想法）
|
||
- 高保真原型则与最终设计非常相似
|
||
|
||
### 注意事项
|
||
|
||
- 注重用户反馈
|
||
- 也可以让利益相关者加入反馈过程
|
||
- 避免完美主义，注重想法的表达和验证，关注核心路径
|
||
|
||
### 三种形式
|
||
|
||
#### 1. 草图
|
||
|
||
表明用户场景，痛点是怎么产生的（场景）
|
||
|
||
|
||
#### 2. 故事版
|
||
|
||
|
||
|
||
- 一种以静态方式提供叙事的常用方法
|
||
- 将设计放在上下文中，来考虑用户如何在给定的场景中使用我们的新设计。
|
||
- 场景互动的迭代，简单的任务图形、场景互动
|
||
|
||
#### 3.卡片原型
|
||
|
||
|
||
|
||
- 表示我们与实际界面可能发生的交互序列。
|
||
- 使用一组索引卡。逐一代表一个用户在尝试完成任务时，会遇到的一序列屏幕。
|
||
|
||
## **其他原型方式**
|
||
|
||
### 绿野仙踪/奥茨法师
|
||
|
||
_Wizard of Oz_
|
||
|
||
|
||
|
||
- 用来模拟产品的功能。
|
||
- 通过让人执行通常由计算机执行的任务,在这里用户不知道该产品是不具备功能性的
|
||
- 优点：能够节省建立功能性产品的时间和金钱
|
||
- 缺点：
|
||
- 需要相当长的时间来使其正常运转，并且它总是需要多人操作
|
||
- 需要一个训练有素的巫师，最终用户可能对系统有不切实际的期望。
|
||
- 基于欺骗性的功能，反过来可能会限制他们提供反馈，继而限制从收集的数据中得出的推论
|
||
|
||
### 概念验证视频
|
||
|
||
_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)
|