forked from uxchecklist/uxchecklist.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
464 lines (461 loc) · 28 KB
/
index.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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UX Project Checklist</title>
<link rel="shortcut icon" href="favicon.ico?v=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta property="og:title" content="UX Project Checklist" />
<meta property="og:ulr" content="http://uxchecklist.github.io/" />
<meta property="og:image" content="http://uxchecklist.github.io/apple-touch-icon.png" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://static.moonmail.io/mm-embedded-form.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body class="body-single">
<div id="printTitle" class="hidden">Project name: ________________________</div>
<header id="header" class="flexcontainer">
<div id="title" class="hide-for-print">
<h1>UX Project Checklist</h1>
</div>
</header>
<form id="checklist-form" method="POST">
<div class="row clearfix">
<div id="Research" class="title"><span>研究</span></div>
<div class="cards">
<div class="img">
<img class="left" src="img/icons128/Deep-Crawl.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox1">竞品分析</label>
<p>看看别人是如何解决相似的问题的，避免重复造轮子。 <a class="more hide-for-print" href="http://boxesandarrows.com/competitive-analysis-understanding-the-market-context/" target="_blank">Read more<span class="visually-hidden"> about Competitive Analysis: Understanding the Market Context</span></a></p>
</div>
<div class="right">
<input id="checkbox1" type="checkbox">
</div>
</div>
<div class="cards">
<div class="img">
<img class="left" src="img/icons128/WebAnalytic.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox2">数据分析</label>
<p>你需要的所有有用的数据都有吗？去看看网站的漏斗、点击量、页面访问量和性能... <a class="more hide-for-print" href="http://www.nngroup.com/articles/analytics-user-experience/" target="_blank">Read more<span class="visually-hidden"> about Three Uses for Analytics in User-Experience Practice</span></a></p>
</div>
<div class="right">
<input id="checkbox2" type="checkbox">
</div>
</div>
<div class="cards">
<div class="img">
<img class="left" src="img/icons128/Viral-Marketing.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox3">用户反馈</label>
<p></p>
<p>保持和客服团队的沟通！没有客服？检查一下你以前的问卷或者视频，看看你的用户说了什么？他们实际上又做了什么？<a class="more hide-for-print" href="https://www.gov.uk/service-manual/user-centred-design/user-research/index.html" target="_blank">Read more<span class="visually-hidden"> about An introduction to user research techniques</span></a></p>
</div>
<div class="right">
<input id="checkbox3" type="checkbox">
</div>
</div>
</div>
<div class="row clearfix">
<div id="Plan" class="title"><span>计划</span></div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/business-card.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox4">用户故事</label>
<p>你做过用户画像吗？如果没有那现在就行动起来吧。用他们来写用户故事和用户场景。 <a class="more hide-for-print" href="http://chrbutler.com/how-to-tell-the-users-story" target="_blank">Read more<span class="visually-hidden"> about How to Tell the User’s Stor</span></a></p>
</div>
<div class="right">
<input id="checkbox4" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Everflux.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox5">用户流程</label>
<p>基于你的用户故事来创建用户使用流程，在这之后你还可以用它来检查你的用户流程图，基于每个步骤来创建线框图。<a class="more hide-for-print" href="https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows" target="_blank">Read more<span class="visually-hidden"> about A shorthand for designing UI flows</span></a></p>
</div>
<div class="right">
<input id="checkbox5" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/computer.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox6">关键路径</label>
<p>为你的产品定义关键的路径，然后你就能分辨、重视和清除任何在关键user journey上的可用性障碍。<a class="more hide-for-print" href="http://userfocus.co.uk/articles/prioritising-functions.html" target="_blank">Read more<span class="visually-hidden"> about How red routes can help you take charge of your product backlog</span></a></p>
</div>
<div class="right">
<input id="checkbox6" type="checkbox">
</div>
</div>
</div>
<div class="row clearfix">
<div id="Explore" class="title"><span>探索</span></div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/beer.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox7">头脑风暴&草图</label>
<p>找个地方，带上马克笔和饮料，聚到一起来画草图，讨论，投票，辩论！<a class="more hide-for-print" href="http://www.gamestorming.com/the-wiki/" target="_blank">Read more<span class="visually-hidden"> about Gamestorming</span></a></p>
</div>
<div class="right">
<input id="checkbox7" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Blog.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox8">线框图</label>
<p>基于用户流程，为你的想法添加细节和结构。<a class="more hide-for-print" href="http://www.uxpin.com/guide-to-wireframing.html" target="_blank">Read more<span class="visually-hidden"> about The Guide to Wireframing</span></a></p>
</div>
<div class="right">
<input id="checkbox8" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/API.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox9">原型</label>
<p>可以先在纸上画草图，然后添加功能，最终完成原型图设计。你可以在任何阶段测试你的原型。<a class="more hide-for-print" href="http://uxdesignweekly.com/ux-resources/prototyping-tools/" target="_blank">Read more<span class="visually-hidden"> about Prototyping Tools</span></a></p>
</div>
<div class="right">
<input id="checkbox9" type="checkbox">
</div>
</div>
</div>
<div class="row clearfix">
<div id="Communicate" class="title"><span>交互沟通</span></div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Dynamic-Content.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox10">信息架构</label>
<p>理解你的用户，数据结构和路径。如何将你的导航和内容以清晰连贯的方式组织起来？<a class="more hide-for-print" href="http://alistapart.com/article/thedisciplineofcontentstrategy" target="_blank">Read more<span class="visually-hidden"> about The Discipline of Content Strategy</span></a></p>
</div>
<div class="right">
<input id="checkbox10" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/typewriter.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox11">设计语言</label>
<p>遵循你的品牌个性，牢记用户的文化和语言，产品的语境能让用户理解你的产品。<a class="more hide-for-print" href="http://alistapart.com/article/translation-is-ux" target="_blank">Read more<span class="visually-hidden"> about Translation is UX</span></a></p>
</div>
<div class="right">
<input id="checkbox11" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/sofa.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox12">无障碍设计</label>
<p>能否很容易地满足那些拥有不同技能和使用受限设备的用户的需求。<a class="more hide-for-print" href="https://www.gov.uk/service-manual/user-centred-design/accessibility.html" target="_blank">Read more <span class="visually-hidden"> about GOV.UK Accessibility</span></a></p>
</div>
<div class="right">
<input id="checkbox12" type="checkbox">
</div>
</div>
</div>
<!-- <div class="row clearfix">
<div id="Love" class="title">
<span id="LoveTitleIcon" class="span--iconTitle">
<i class="fa fa-heart"></i>
</span>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/plant.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox101">可持续</label>
<p> Help the planet by reducing the resources you use, reinforce greener behaviours and promote sustainability best practices. Yes, your product can do that! <a class="more hide-for-print" href=" https://uxdesign.cc/product-design-for-sustainability-3fffbb2a7f0e" target="_blank">Read more<span class="visually-hidden"> about Product Design for Sustainability</span></a></p>
</div>
<div class="right">
<input id="checkbox101" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/medical-box.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox111">正能量</label>
<p>Move fast and break things! What about slow down and make sure your product is secure, private, honest? Be considerate when you design and follow good ethics.<a class="more hide-for-print" href="https://medium.muz.li/the-state-of-ethics-in-design-60a1088f8358" target="_blank"> Read more<span class="visually-hidden"> about The State of Ethics in Design</span></a></p>
</div>
<div class="right">
<input id="checkbox111" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/inclusive-icon.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox121">包容</label>
<p>Remember that everything you design is skewed by your own view and background. Be sure to open your design process to remove your biases and design for everyone.<a class="more hide-for-print" href="https://uxdesign.cc/how-design-can-help-with-inclusion-9d71a60d6359" target="_blank"> Read more<span class="visually-hidden"> about How design can help with inclusion</span></a></p>
</div>
<div class="right">
<input id="checkbox121" type="checkbox">
</div>
</div>
</div> -->
<div class="row clearfix">
<div id="Create" class="title"><span>构建</span></div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Squeeze-Page.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox13">UI 元素</label>
<p>遵循设计规范。没有？去建立一个。从小处着手，然后开始设计。<a class="more hide-for-print" href="http://styleguides.io/" target="_blank">Read more<span class="visually-hidden"> about styleguides.io</span></a></p>
</div>
<div class="right">
<input id="checkbox13" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/cell.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox14">手势</label>
<p>滑动，收缩，拖动，放大，旋转，摇晃，左撇子，鼠标移动，体感，运动感知...<a class="more hide-for-print" href="http://www.smashingmagazine.com/2013/05/24/gesture-driven-interface/" target="_blank">Read more<span class="visually-hidden"> about Beyond The Button: Embracing The Gesture-Driven Interface</span></a></p>
</div>
<div class="right">
<input id="checkbox14" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/User-Experience.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox15">跨平台</label>
<p>我的手机上能看到吗？智能手表，50寸电视呢？产品的跨平台体验如何？<a class="more hide-for-print" href="http://uxmag.com/articles/create-a-better-responsive-user-experience/" target="_blank">Read more<span class="visually-hidden"> about Create a Better Responsive User Experience</span></a></p>
</div>
<div class="right">
<input id="checkbox15" type="checkbox">
</div>
</div>
</div>
<div class="row clearfix">
<div id="Feedbacks" class="title"><span>反馈</span></div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/lunch.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox16">等待</label>
<p>如果你的用户打开网页需要很长时间，你至少要给他们展示个进度条。如果加载时间更长，那为什么不试试放一些更有趣的内容？<a class="more hide-for-print" href="http://www.sitepoint.com/3-tips-make-application-feel-faster/" target="_blank">Read more<span class="visually-hidden"> about 3 Tips To Make Your Application Feel Faster</span></a></p>
</div>
<div class="right">
<input id="checkbox16" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Spam.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox17">错误</label>
<p>用户哪里犯了错，犯了什么错要展示地清晰和明确，同样如果是产品问题，一样也要清晰明确的展示出来，最好有怎么解决这个问题的方法或者用户在遇到这种错误时改怎么做。 <a class="more hide-for-print" href="http://uxmag.com/articles/failing-gracefully" target="_blank">Read more<span class="visually-hidden"> about Failing Gracefully</span></a></p>
</div>
<div class="right">
<input id="checkbox17" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Usability.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox18">完成动作</label>
<p>对用户成功的操作要给予及时和明确的反馈。<a class="more hide-for-print" href="http://www.lukew.com/ff/entry.asp?1759" target="_blank">Read more<span class="visually-hidden"> about Performing Actions Optimistically</span></a></p>
</div>
<div class="right">
<input id="checkbox18" type="checkbox">
</div>
</div>
</div>
<div class="row clearfix">
<div id="Finalise" class="title"><span>定稿</span></div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Optimization.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox19">设计定稿</label>
<p>确保产品的设计以正确的方式呈现。多问自己“这是我能做到的最好的么？”,“这是最好的解决方案吗？”。<a class="more hide-for-print" href="http://www.usability.gov/what-and-why/visual-design.html" target="_blank">Read more<span class="visually-hidden"> about Visual Design Basics</span></a></p>
</div>
<div class="right">
<input id="checkbox19" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/E-Commerce.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox20">使用图片和Icon</label>
<p>图标和图片的使用很大程度上取决你产品的语境、性格。 有时候小小的改变，会带来极大的进步。<a class="more hide-for-print" href="http://www.nngroup.com/articles/icon-usability/" target="_blank">Read more<span class="visually-hidden"> about Icon Usability</span></a></p>
</div>
<div class="right">
<input id="checkbox20" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Heading-Tag.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox21">字体&颜色层级</label>
<p>正确使用颜色和字体大小，遵从你的设计规范并保持简单。好的视觉层次能极大提升使用体验。<a class="more hide-for-print" href="http://52weeksofux.com/post/443828775/visual-hierarchy" target="_blank">Read more<span class="visually-hidden"> about Visual hierarchy</span></a></p>
</div>
<div class="right">
<input id="checkbox21" type="checkbox">
</div>
</div>
</div>
<div class="row clearfix">
<div id="Delight" class="title"><span>愉悦</span></div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/pen-ink.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox22">细微处的文案</label>
<p>每处文字都很重要，带上一点个性的文字对你的品牌也会有帮助。<a class="more hide-for-print" href="http://www.smashingmagazine.com/2012/07/18/the-personality-layer/" target="_blank">Read more<span class="visually-hidden"> about The Personality Layer</span></a></p>
</div>
<div class="right">
<input id="checkbox22" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/search-document.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox23">微交互</label>
<p>触发器，规则，反馈路径。细节决定成败。一个梗或者彩蛋的效果有时候超出你的想象。<a class="more hide-for-print" href="http://microinteractions.com/what-is-a-microinteraction/" target="_blank">Read more<span class="visually-hidden"> about What is a microinteraction</span></a></p>
</div>
<div class="right">
<input id="checkbox23" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Exit-Page.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox24">过渡</label>
<p>动效不能只是很炫，它应该能反映空间关系，功能以及你需要传达的意图。 动效同样也需要符合设计规范的动效规范。<a class="more hide-for-print" href="http://www.google.co.uk/design/spec/animation/authentic-motion.html" target="_blank">Read more<span class="visually-hidden"> about Material Design Authentic motion</span></a></p>
<!-- http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/ -->
<!-- http://www.smashingmagazine.com/2012/02/28/mission-transition/ -->
</div>
<div class="right">
<input id="checkbox24" type="checkbox">
</div>
</div>
</div>
<div class="row clearfix">
<div id="Analyse" class="title"><span>分析</span></div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/target-copy.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox26">建立KPI</label>
<p>你的目标是什么？定义你需要达到的目标，并检查你所需要跟踪的数据。<a class="more hide-for-print" href="http://www.gv.com/lib/how-to-choose-the-right-ux-metrics-for-your-product" target="_blank">Read more<span class="visually-hidden"> about How to Choose the Right UX Metrics for Your Product</span></a></p>
</div>
<div class="right">
<input id="checkbox26" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Article-Marketing.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox25">AB Test</label>
<p>事先计划好AB Test，以及测试需要的环境、数据。 确保AB test目标准确，过程可控，结果可依赖。<a class="more hide-for-print" href="https://www.gov.uk/service-manual/user-centred-design/user-research/multivariate-testing.html" target="_blank">Read more<span class="visually-hidden"> about Craig Sullivan, an industry expert on conversion optimisation</span></a></p>
</div>
<div class="right">
<input id="checkbox25" type="checkbox">
</div>
</div>
<div class="cards clearfix">
<div class="img">
<img class="left" src="img/icons128/Conversion-Rate.png" alt="">
</div>
<div class="card-content left">
<label for="checkbox27">测试</label>
<p>用研测试，问卷，访谈录音…测试，观察、研究并优化，循环往复...<a class="more hide-for-print" href="http://www.nngroup.com/articles/which-ux-research-methods/" target="_blank">Read more<span class="visually-hidden"> about When to Use Which User-Experience Research Methods</span></a></p>
</div>
<div class="right">
<input id="checkbox27" type="checkbox">
</div>
</div>
</div>
</form>
<footer id="footer" class="flexcontainer hide-for-print">
<div class="footerColumn footerToolbar">
<div id="toolbar" class="hide-for-print">
<button id="print" type="button"><i class="fa fa-print"></i>Print</button>
<button id="reset" class="resetBtn"><i class="fa fa-refresh"></i>Reset</button>
<a id="github" class="button" href="https://github.com/uxchecklist/uxchecklist.github.io" target="_blank"><i class="fa fa-github"></i>Fork</a>
</div>
</div>
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
window.Modernizr || document.write('<script type="text/javascript" src="js/vendor/modernizr.js">\x3C/script>');
window.jQuery || document.write('<script type="text/javascript" src="js/vendor/jquery.js">\x3C/script>');
</script>
<script src="js/garlic.js"></script>
<script src="js/jquery-labelauty.js"></script>
<script>
$(document).ready(function() {
$(":checkbox").labelauty({ label: false });
$("#checklist-form").garlic();
$("#reset").on('click', function() {
$('input:checkbox').each(function() {
$(this).prop('checked', false);
});
$("#checklist-form").garlic('destroy');
});
$("#footer a").on('click', function(e) {
var elm = e.currentTarget;
});
$("input:checkbox").on('change', function(e) {
var cb = $(this);
var id = cb.attr('id');
var isChecked = cb.is(':checked');
});
});
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>