-
Notifications
You must be signed in to change notification settings - Fork 42
/
Copy path19-pm-10.html
205 lines (173 loc) · 9.84 KB
/
19-pm-10.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<!--<img src="././img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">-->
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>从需求到原型绘制</h2>
<p>分享人：胡语庆</p>
</section>
<section>
<p>目录</p>
<p>1.先用脑图软件简单构思一下产品的要点，或者自己手绘</p>
<p>2.竞品调研，写stroy，做ppt</p>
<p>3.画出需要的结构图，流程图</p>
<p>4.按照结构图来画原型了</p>
<p>5.参考文献</p>
</section>
<section>
<section>
<h3>1.先用脑图软件简单构思一下产品的要点，或者自己手绘也可以</h3>
</section>
<section>
<p style="text-align: justify;word-break: break-all">（1）这个图只是帮助你边梳理边记录的作用，格式上只要自己能看懂就OK了。是为了接下来的产品结构图做铺垫，如果直接从结构图开始，你的思维就会受制于结构化的模式。
<img src="1.png">
</p>
</section>
<section>
<p style="text-align: justify;word-break: break-all">（2）手绘可以让我们一边探索问题一边定义解决方案。它可以结构化我们目前对问题的理解，同时帮助我们找到可能的解决方案。；</p>
<img src="2.png">
</section>
<section>
<p style="text-align: justify;word-break: break-all"></p>
<img src="3.png">
</section>
<section>
<p style="text-align: justify;word-break: break-all">当我们手绘出自己的想法时，新的主意也会萌生。模糊和缺乏细节的草图会培育出新的思路。在这里，模糊是件好事，因为我们会自动尝试填补脑中的空白。这也正是草图富有“创造性“的原因：它捕捉到我们已经成型的想法，并迸发出新的火花。正如Bill Buxton在《Sketching User Experiences》中提到的：
“从草图上学习到的内容很大程度上是基于其表现的模糊性。也就是说，他们并不指定所有事情，而是鼓励创造者们不自觉的融入各种不同的解释。”
通过手绘不同的解决方案，我们不用立刻实现其中一种，就可以探索他们的可行性。这为我们提供了新的见解，也提出了新的问题。手绘本质上就是一个头脑风暴的锻炼。
把我们脑袋里的东西倒出来最快的方式就是拿起一只笔和一张纸迅速的画出来。</p>
</section>
<section>
<p style="text-align: justify;word-break: break-all">在我们钟爱的原型工具里来做这件事情则需要花费太多的时间：我们需要先创建一个项目，使用合适的库，将一些小矩形放在画布上，画一些小箭头来连接这些矩形，把所有的元件都调整一下让它们看上去更好看一些——30分钟过去了。
如果我们不喜欢纸上画的东西，可以将它扔进垃圾桶然后重新开始。然而用原型工具的话，扔掉一些东西就比较困难了，因为我们花费了时间和努力去创建它——就算那个想法不是最好的，重新开始也更困难。反过来说，纸上手绘的内容则成本低廉，实现迅速。</p>
</section>
</section>
<section>
<section>
<h3>2.竞品调研，写story，做ppt</h3>
</section>
<section>
<p style="text-align: justify;word-break: break-all">画原型之前要做好调研，包括用户调研、竞品分析、数据分析、行业分析
四种调研分析参考http://www.woshipm.com/pmd/390703.html
还有关于竞品分析云刚同学做的很好，发布在产品一百上，链接http://www.chanpin100.com/</p>
</section>
<section>
<p style="text-align: justify;word-break: break-all">（1）需求变动的场景</p>
</section>
<section>
<p style="text-align: justify;word-break: break-all">（2）为什么会出现需求变动</p>
</section>
<section>
<p style="text-align: justify;word-break: break-all">（3）怎么正确去面对需求变动</p>
</section>
</section>
<section>
<section>
<h3>3.画出需要的结构图，流程图</h3>
</section>
<section>
这个阶段，首先是经过讨论，已经明确了头脑风暴图里要做哪些功能，想法是无穷的，能做的只是有限的，现在要做的事就是把功能点分类，让所有想法能合理的落在你脑海里的产品界面上，此时直接开始画产品原型图还尚早，可以先把功能结构用脑图列出来。
每一级包括菜单（有下级页面）、模块（列表、功能区…）、操作（按钮、删除、排序…）。
做这一步的过程你会发现之前的脑图有些地方没想到，其实很正常，做这些流程就是为了尽可能避免遗漏的点，要是直接画原型遗漏的会更多。为了让每个环节更加完整，可以在下一个环节发现遗漏点的时候，及时在上一个环节的相应地方进行补充。
</section>
<section>
<p style="text-align: justify;word-break: break-all">要不要画流程图呢，举一个具体的例子</p>
</section>
</section>
<section>
<section>
<h3>4.按照结构图来画原型</h3>
</section>
<section>
分享一个怎么利用功能结构图来对原型页面进行划分。
</section>
<section>
<img src="5.png">
</section>
</section>
<p style="text-align: justify;word-break: break-all"></p>
</section>
<section>
<section>
<h3>5.参考文献</h3>
</section>
<section>
<p>参考一：
<a href="http://www.woshipm.com/pmd/390703.html" target="_blank">
调研分析
</a>
</p>
<p>参考二：
<a href="http://www.chanpin100.com/" target="_blank">
云刚的竞品分析文章
</a>
</p>
</p>
</section>
</section>
<section>
<section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p><small>BY : 胡语庆</small></p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: './plugin/markdown/marked.js' },
{ src: './plugin/markdown/markdown.js' },
{ src: './plugin/notes/notes.js', async: true },
{ src: './plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>