-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
604 lines (514 loc) · 24.4 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
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<title>还原"活"的设计 · kejun</title>
<base target="_blank">
<link rel="apple-touch-icon-precomposed" href="">
<link rel="stylesheet" href="static/css/prism.css" media="screen"/>
<link rel="stylesheet" href="static/css/slides.css" media="screen" />
<link rel="stylesheet" href="static/css/customiz.css" media="screen" />
<style media="print">
.no-support, iframe { display: none; }
.page { margin-bottom: 2em; }
</style>
</head>
<body>
<h1>还原"活"的设计 · kejun </h1>
<label class="bn-toggle-gesture">
<input type="checkbox" class="toggle-gesture">
手势
</label>
<label class="bn-toggle-fullscreen">
<input type="checkbox" class="toggle-fullscreen">
全屏
</label>
<div class="page page-cover">
<article style="background:#000 url(static/pics/bg.5.gif) no-repeat 50% 50%;background-size:60% auto;">
<div class="page-cover-content">
<div class="title">
还原"活"的设计<p class="cover-subtitle"> === Designer X Engineer <br>=== 核心价值
</div>
<div class="author"><a href="http://www.douban.com/people/listenpro/"><img src="http://img3.douban.com/icon/u1170308-32.jpg" width="24" alt=""></a>Kejun ( @kejunz )</div>
</div>
</article>
</div>
<!--
之前参加过同时有设计和开发的,阿里的技术嘉年华,每年都去。但设计和技术是在不同的会场。设计会场那边不是高富帅就是白富美,至少看上去是。技术专场这边对比很明显。
今天设计师和前端工程师能坐在一起是很好的,我今天想阐述的一个观点是设计师和工程师同是产品实现者。问一个挑事的问题,设计师和工程师谁比较重要?
......
其实,只有结果最重要。在我看来设计师和工程师的目标和价值是一致的:做出好的产品,做出伟大的产品。
....
在互联网发展的进程中,技术进步,产品随之进化。想一想,产品特点变了,产品实现的手段变化了,设计师和工程师一定也要转变。
-->
<!--
以我为例,从时代、角色、职责三个维度看看这种转变
-->
<div class="page page-center">
<article>
<p>Web 1.0 <small>(02年某门户)</small>
<p class="slide-item"> > 网页制作
<p class="slide-item"> > 展现&浏览
</article>
</div>
<div class="page page-center">
<article>
<p>Web 2.0 <small>(05年一拍/雅虎)</small>
<p class="slide-item"> > 前端工程师
<p class="slide-item"> > 使用&体验
</article>
</div>
<!--
互联网成为工具,搜索工具、购物工具、社交工具。主要针对年轻人
-->
<div class="page page-center">
<article>
<p>Mobile <small>(09年豆瓣)</small>
<p class="slide-item"> > 前端工程师?
<p class="slide-item"> > ?
</article>
</div>
<!--
移动互联网的叫法并不准确。互联网更加深入生活了,而且是覆盖全年龄段。信息真正成为基础能源,由各种消费终端消费。
角色和职责会发生什么转变,取决于产品进化的需要
-->
<!--
有一个特点越发明显:设计和技术的紧密度更大了。
设计师不能用Photoshop做唯一的设计工具。实际是app设计教育了设计师。
--!>
<div class="page page-center">
<article>
<div>
<img src="static/pics/figure.14.jpg"><br>引自: <a href="http://redmonk.com/dberkholz/2013/12/16/the-year-developers-and-designers-collided/">http://redmonk.com/dberkholz/2013/12/16/the-year-developers-and-designers-collided/</a>
</div>
</article>
</div>
<!--
我听到一个说法:说web设计其实挺难的,就像设计一个四维超立方体。形容要考虑多个维度。设计师很难用设计稿、文档来描述了。
--!>
<div class="page page-center">
<article>
<p><small>前端工程师<span class="text-mark0" style="display:none;"> x 设计师<br></span>的基本职责:</small><span class="text-mark1">还原设计</span><span class="slide-item" style="color:green;" data-action="$('.text-mark1').css({'text-decoration': 'line-through', 'color':'#ccc'})">还原"活"的设计</span>。
<a class="slide-item" data-action="$('.text-mark0').show()"></a>
</article>
</div>
<!--
互联网两次大浪潮:一个是web2.0,网页制作转变到前端工程师,从满足看到满足用,进入生活,成为生活的工具:社交工具、购物工具,用比看就超越了视觉体验,着重于交互体验。设计领域就是人本设计。另一个大浪潮就是移动互联网,它的特点是,消费的终端从单一的PC,变得多样各种手机、平板、穿戴设备。产品的形态也从单一变成多态。
斗胆造了一个词。
-->
<div class="page">
<article>
<h2>"活"的设计(Living Design, 简称LD)</h2>
<p class="slide-item">活相对于死。PRD是“死”的、设计稿是“死”的、规格说明是“死”的。实现一个“死”的东西毫无价值
<p class="slide-item"><strong>还原设计,并不是还原设计稿!</strong>最终目标是实现一个活的产品
<div class="slide-item">
<p>LD vs. <a href="http://zh.wikipedia.org/wiki/%E7%94%9F%E5%91%BD">生命体基本特征</a>:
<ol class="list-1">
<li>体内平衡 ············ <span class="slide-item">这种自动调节指适配性。适配内容变化(文字长度、图片尺寸)、屏幕等各种情况</span></li>
<li>组织性  ············ <span class="slide-item">UI可解构为UI元素的系统构成(如<a href="http://bradfrostweb.com/blog/post/atomic-web-design/" target="_blank">原子设计</a>、<a href="http://insideintercom.io/why-cards-are-the-future-of-the-web/" target="_blank">卡片设计</a>)</span></li>
<li>新陈代谢 ············ <span class="slide-item">新的UI元素不断替代旧的元素。保持整体设计的活力</span></li>
<li>生长   ············ <span class="slide-item">从最小可用形态(MVP),跟随需求、不断迭代、持续完善</span></li>
<li>适应性  ············ <span class="slide-item">能适应用户的使用环境(如响应式设计)</span></li>
<li>反应性  ············ <span class="slide-item">能响应用户的各种操作<!--mouse/keyboard/touch/voice/gesture-->,反馈各种状态<!--错误、失效、等待、处理...--></span></li>
<li>繁殖   ············ <span class="slide-item">基于现有的生态体系,快速孵化新产品</span></li>
</ol>
</div>
<p class="slide-item">定义:LD是由有组织的UI元素构成,能适应不同的使用环境,响应用户的行为,灵活适配内容,可以扩展和继承的设计。
<p class="slide-item">LD的基本特征: 1.组织性、2.扩展性、3.适配性、4.响应性。
</article>
</div>
<div class="page page-center">
<article>
<div style="padding:1em;width:20vw;height:18vw;border:1px solid #333;">
<h3>契约-交付式设计</h3>
<ul>
<li>实现线框图
<li>定制
<li>多版本
<li>颠覆式
<li>串行
<li>"外包"模式
<li>慢
</ul>
</div>
<div style="padding:1em;margin-left:-1px;width:20vw;height:18vw;border:1px solid #333;">
<h3>LD</h3>
<ul>
<li>实现产品目标
<li>(从系统设计中)衍生
<li>单版本
<li>进化式(迭代)
<li>并行
<li>协作模式
<li>快
</ul>
</div>
</article>
</div>
<div class="page">
<article>
<h2>还原LD的前提 - 做出转变</h2>
<p class="slide-item">"不变则罔,不进则退"
<ol class="list-1">
<li class="slide-item">协作关系的转变:设计师和前端工程师关注点不同,为了同一个目标
<li class="slide-item">传统实现流程的转变:设计师非形而上
<li class="slide-item">传统设计实现理念的转变:迭代设计和系统设计
</ol>
<p class="slide-item">"可以说,转变是由问题倒逼而产生,又在不断解决问题中而深化" -- 习大大
</article>
</div>
<div class="page">
<article>
<h2>打破传统的产品实现流程</h2>
<p>1.产品目标 > 2.设计问题 > 3.构思模型 > <span class="text-mark2">4.设计实现(IDxVD) > 5.代码实现</span> > 6.真实的产品
<div class="graph graph-process-old slide-item" data-action="setTimeout(function(){$('.graph-process-old').css('font-size', '1.2em');$('.text-mark2').css('color', 'blue');}, 0)">
<div class="people role-pm"><i class="head"></i><i class="body"></i><i class="title">PM</i></div>
<div class="arrow arrow4"><i></i><span class="text">交付PRD</span></div>
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="people role-designer"><i class="head"></i><i class="body"></i><i class="title">Designer</i></div>
<div class="arrow arrow1"><i></i><span class="text">交付设计稿</span></div>
<div class="people role-fe"><i class="head"></i><i class="body"></i><i class="title">FE</i></div>
<div class="arrow arrow2"><i></i><span class="text">交付模板</span></div>
<div class="people role-be"><i class="head"></i><i class="body"></i><i class="title">BE</i></div>
<div class="arrow arrow3"><i></i><span class="text">交付上线</span></div>
<div class="people role-user"><i class="head"></i><i class="body"></i><i class="title">User</i></div>
</div>
<ol class="list-1" style="list-style-type:upper-roman;">
<li class="slide-item">交付物驱动
<li class="slide-item" data-action="setTimeout(function(){$('.graph-process-old').addClass('graph-process-circle');}, 100)">沉浸在各自的专业圈子里,交集越来越小
<li class="slide-item">效率低,加人?人多不是协作,沦为劳动密集型,问题没解决导致恶性循环
<li class="slide-item">只对上面负责
</ol>
<p class="slide-item" data-action="setTimeout(function(){$('.graph-process-old').addClass('graph-process-new');}, 100);$('.text-mark2').html('4+5.产品实现');">改进:回到产品实现的根本目标上,产品实现的"黑盒"。
</article>
</div>
<div class="page">
<article>
<h2>LD的实现思路(1) - 迭代设计</h2>
<p class="slide-item">简而言之,围绕目标 • 边验证 • 边设计 • 边开发
<div class="slide-item">
<div id="slide-figure-iteration" style="margin:3em auto;width:40em;height:8.6em;overflow:hidden;background:url(static/pics/figure.9.png) no-repeat 0 0;background-size:100%;"></div>
<p>产品目标:提高发图量
</div>
<p class="slide-item" data-action="setTimeout(function(){$('#slide-figure-iteration').css('background-position','0 -10.6em')},0)">迭代1:验证结构调整
<p class="slide-item" data-action="setTimeout(function(){$('#slide-figure-iteration').css('background-position','0 -20.6em')},0)">迭代2:基于前面,强化视觉
<p class="slide-item">如何让迭代转的更快?
<div class="figure slide-item">
<img src="http://ww2.sinaimg.cn/mw1024/61c4f47djw1du89llvmn4j.jpg" width="70%" />
</div>
</article>
</div>
<div class="page">
<article>
<h2>LD的实现思路(2) - 系统设计</h2>
<div class="mac">
<div class="figure figure-design-view">
<span class="subtitle">平面的?静态的?</span>
<img src="static/pics/figure.10.png" width="80%" />
</div>
<div class="figure figure-design-view1 slide-item" data-action="$('.figure-design-view').hide();">
<span class="subtitle">有层次 x 有规律 x 有变化</span>
<img src="static/pics/figure.11.png" width="80%" />
</div>
<div class="figure figure-design-view2 slide-item" data-action="$('.figure-design-view1').hide();">
<span class="subtitle">系统设计(建立秩序,体现组织性)</span>
<img src="static/pics/figure.12.png" width="80%" />
</div>
</div>
</div>
</article>
</div>
<div class="page">
<article>
<h2>例子:</h2>
<div class="figure slide-item">
<img src="static/pics/html_1_1.jpg"/>
</div>
<p class="slide-item">如果简单按设计稿还原,会在开发最后阶段甚至上线后暴露出一些问题(有些时候可能颠覆设计):
<ol class="list-1 slide-item">
<li>大多数时候商品名会很长拆行
<li>真实图片的比例多样,现有缩略图的尺寸不符
<li>左边button有的是链接,有的带交互
<li>有些情况下没有评论内容
<li>时间显示规则:一小时内?一天内?一年内?
</ol>
<p class="slide-item">设计是设计某种秩序,秩序是总体和局部的构成
<p class="slide-item">纵向解构,分开考虑元素的属性和行为:
<div class="figure slide-item"><img src="static/pics/html_1_2.jpg"/></div>
<div class="figure slide-item">
<span class="subtitle">适配性的实现</span>
<div class="col slide-item">
<p>4 + 5 + 6的对齐关系,垂直居中:
<iframe src="http://jsbin.com/OhaKimi/2" frameBorder="0" width="100%" height="180"></iframe>
</div>
<div class="col slide-item">
<p>图片展现,截图:
<iframe src="http://jsbin.com/AjEMeZi/1" frameBorder="0" width="100%" height="380"></iframe>
</div>
</div>
<div class="figure slide-item">
<span class="subtitle">轻松转化到Mobile版(RWD)</span>
<img src="static/pics/figure.13.png" alt="" />
</div>
</article>
</div>
<div class="page">
<article>
<h2>小结 - 面向设计师</h2>
<p class="slide-item">提出一个观念:"活"的设计(LD)
<p class="slide-item">LD的概念和如何理解它
<p class="slide-item">实现LD的前提: 建立协作关系,流程的转变,思路的转变
<p class="slide-item">LD的实现思路:迭代设计和系统设计
</article>
</div>
<!--
<p class="slide-item">Designer + F2E紧密协作,才能达成。为此需要用技术消除障碍,举例:
<p class="slide-item">"Preprocessors are the rosetta stone between Designers & Developers" 出自 Tim Hettler - CSSConf 2013 <a href="http://timhettler.github.io/cssconf-2013/#!/0" target="_blank">http://timhettler.github.io/cssconf-2013/</a>
<div class="figure slide-item"><img src="static/pics/html_1_1_2.jpg"/></div>
<div class="slide-item">
CSS3的语法:
<pre><code class="language-css">.sampl1 { box-shadow:0 1px 20px rgba(0, 0, 0, .75); }</code></pre>
</div>
<div class="slide-item">
SCSS:
<pre><code class="language-css">.sampl1 { @include rs-box-shadow(#000, .75, 120, 5, 0, 10); }</code></pre>
<iframe src="http://cdpn.io/rjDnA" frameborder="0" width="100%" height="300"></iframe>
</div>
-->
<div class="page">
<article>
<h2>还原LD - HOWTO</h2>
<ol class="list-1">
<li class="slide-item">设计师要有LD的设计思维(前面所讲)
<li class="slide-item">再造协作流程
<li class="slide-item">LD背后的开发观念
<li class="slide-item">必备基础设施:组件化的静态文件管理系统
<li class="slide-item">超越传统响应式开发
</ol>
</article>
</div>
<div class="page">
<article>
<h2>还原LD - 再造协作流程</h2>
<p class="slide-item">案例分析: A项目(项目名称不便透露)的协作过程。
<ol class="list-1">
<li class="slide-item">PM写了一份简要的PRD,PM x Designer x Engineer Review
<li class="slide-item">确定M1的目标,M1定义了MVP,Engineer准备基础服务
<li class="slide-item">根据M1,Designer出Wireframe,PM x Designer Review
<li class="slide-item">根据Wireframe,FE x BE做出第1版原型。(有测试数据,无样式,尽可能少写JS/CSS,同步的流程)
<li class="slide-item">基于原型,VD x ID开始<b>系统设计</b>。分块递交。PM能看到“生长”过程
<li class="slide-item">M1的开发着重架构设计,分层、分块实现
<li class="slide-item">不陷在某个复杂的设计实现里,前面所述的迭代设计
<li class="slide-item">阶梯式进展
<li class="slide-item">好的协作:多种角色间,不断抛出问题,解决问题的过程
<div class="figure">
<span class="subtitle" style="font-size:1em;">马赫的共同演化设计实现模型</span>
<img src="static/pics/figure.4.jpg" alt="" />
</div>
</ol>
</article>
</div>
<div class="page">
<article>
<h2>LD背后的开发观念</h2>
<p class="slide-item">前端工程师的"三观"依然是底蕴
<ol class="list-1">
<li class="slide-item">(内容/样式/行为)三层分离
<li class="slide-item">渐进增强原则(Progressive Enhancement 1.0/2.0)
<div class="slide-item"><a href="http://www.slideshare.net/nzakas/progressive-enhancement-20#83" target="_blank"><img src="static/pics/figure.6.png" width="30%" /><br><small>(by Nicholas Zakas)</small></a></div>
<li class="slide-item">优雅退化(Degrade with Grace) / 浏览器分级支持(GBS)
</ol>
<p class="slide-item">10+ years。依然有效,继续践行!
</article>
</div>
<div class="page">
<article style="background:#000 url(static/pics/bg.3.jpg) no-repeat 50% -2em;background-size:auto 100%;">
</article>
</div>
<div class="page">
<article>
<h2>还原LD - 组件化的静态文件管理系统(1)</h2>
<p class="slide-item">必备的基础设施。把"细胞"组织在一起,健康与否取决"新陈代谢"(后期维护)
<p class="slide-item">组件化,不单纯是模块化
<p class="slide-item">A项目(不便透露)中最复杂的部分......其实是一个"button"
<p class="slide-item"><img src="static/pics/figure.19.png" valign="middle">
<div class="slide-item">可简单部署到任何场景(page)下:
<pre><code class="language-markup"><%include file="/widgets/btn_publish.html" args="gallery=gallery" /></code></pre>
</div>
<div class="slide-item">内部:完整的组件不单单是JS、CSS、HTML
<pre><code class="language-markup"><%block filter="collect_css">
/* 1. 依赖的CSS */
${istatic('/css/ui/overlay.css')|n}
${istatic('/css/mod_publish.css')|n}
${istatic('/css/tips.css')|n}
...
</%block>
<%block filter="collect_js">
// 2. 依赖的Javascript
Do.ready(function() {
${istatic('/js/upload_pic.js')|n}
});
</%block>
<script type="text/template" id="tmpl-publish-picture">
// 3. 依赖的Javascript模板
</script>
<!-- 4. HTML -->
% if request.user:
% if not gallery.is_member(request.user):
<a href="#" class="btn a_show_tips">发图</a>
${self.tips('只有xxx才能发图。')}
% else:
<a href="${url()}add_picture" class="btn btn-publish-picture">发图</a>
% endif
% else:
<a href="${url()}add_picture" class="btn a_show_login">发图</a>
% endif
</%block>
</code></pre>
</div>
</article>
</div>
<div class="page">
<article>
<h2>还原LD - 组件化的静态文件管理系统(2)</h2>
<p>一个静态文件管理系统的"刚需":
<ol class="list-1">
<li>实现组件化 (想想完整组件的含义)
<li>依赖管理
<li>自动打包
<li>部署方式
<li>支持CSS的预处理(SCSS/LESS/Stylus)
<li>包管理
</ol>
</article>
</div>
<div class="page">
<article>
<h2>还原LD - UI的组织性</h2>
<p>CSS的结构化组织思想,参考<a href="http://oocss.org/" target="_blank">OOCSS</a>、<a href="http://smacss.com/" target="_blank">SMACSS</a>、<a href="http://bem.info/" target="_blank">BEM</a>等。原则:取其精华,弃其糟粕。
<p>A项目的CSS组织:兼容层 + 抽象UI层 + 组件层 + 业务层
<div class="css-org-graph slide-item">
<div class="css-org-block">
<ins class="css-org-label"><ins>兼容层x抽象UI层</ins></ins>
<pre class="css-org">|-- libs.scss <span class="slide-item">基本的mixin库</span>
|-- reset.scss <span class="slide-item">为这个应用订制的css reset(你会发现通用文件越来越难hold住全站,原则是拆解、定制)</span></pre>
</div>
<div class="css-org-block">
<ins class="css-org-label"><ins>组件层</ins></ins>
<pre class="css-org">
|-- buttons.scss <span class="slide-item">通用UI元素-button</span>
|-- font_icons.scss <span class="slide-item">通用UI元素-字体icon。适配性更强</span>
|-- item.scss <span class="slide-item">通用UI元素-条目。</span>
|-- progress_bar.css <span class="slide-item">通用UI元素-进度条</span>
|-- tips.scss <span class="slide-item">通用UI元素-Tips</span>
|-- list.scss <span class="slide-item">通用UI元素-列表</span>
|-- layout_col2.scss <span class="slide-item">结构</span>
|-- ui <span class="slide-item">JS组件的样式文件</span>
| |-- overlay.scss
| `-- tag_input.scss</pre>
</div>
<div class="css-org-block">
<ins class="css-org-label"><ins>业务层</ins></ins>
<pre class="css-org">
|-- mod_create.scss <span class="slide-item">通用业务模块: mod_开头</span>
|-- mod_edit_desc.scss
|-- mod_gallery_info.scss
|-- mod_gallery_intro.scss
|-- mod_gallery_list.scss
|-- mod_nav_list.scss
|-- mod_picture_list.scss
|-- mod_picture.scss
|-- mod_publish.scss
|-- mod_upload.scss
|-- member_list.scss <span class="slide-item">特定页面用到的业务代码</span>
|-- user_profile_head.scss
`-- ui.scss <span class="slide-item">这个应用的全局css文件</span></pre>
</div>
</div>
<i class="slide-item" data-action="$('.css-org-graph').addClass('css-org-graph-active')"></i>
</article>
</div>
<div class="page">
<article>
<h2>还原LD - 针对用户的使用环境设计和开发</h2>
<p class="slide-item">分析用户的使用环境:
<div class="figure slide-item">
<span class="subtitle">1. 浏览器: 高端浏览器 > 低端浏览器</span>
<img src="static/pics/figure.1.png" alt="" />
</div>
<div class="figure slide-item">
<span class="subtitle">2. 操作系统: 设计师不能只看iMac里的效果</span>
<img src="static/pics/figure.2.png" alt="" />
</div>
<div class="figure slide-item">
<span class="subtitle">3. 屏幕分辨率: 转变成多元化</span>
<img src="static/pics/figure.3.png" alt="" />
</div>
<div class="figure slide-item">
<span class="subtitle">4. 移动端设备: iOS略高于Android,tablet略高于phone</span>
<img src="static/pics/figure.5.png" alt="" />
</div>
</article>
</div>
<div class="page">
<article>
<h2>还原LD - 响应式开发(1)</h2>
<div class="slide-item"><p>超越传统响应式开发
<div class="chart-rwd">
<img src="static/pics/figure.7.png"/>
<img src="static/pics/figure.8.png" class="slide-item" data-action="$('.chart-rwd img:nth-child(1)').hide();"/>
</div>
</div>
</article>
</div>
<div class="page">
<article>
<h2>还原LD - 响应式设计</h2>
<p class="slide-item">响应式设计(Responsive Web Design, WD)不仅仅局限于响应屏幕。本质上更好适应用户的使用环境。
<p class="slide-item">比如:上传图片
</article>
</div>
<div class="page">
<article>
<h2>设计图片上传</h2>
<div class="figure slide-item" style="margin:1em 0 4em">
<span class="subtitle">1. 多文件上传。如, 豆瓣广播的发图</span>
<img src="static/pics/figure.upload.gif" alt="" />
<p>高级feature: 原生MultipleUpload, DragDrop, Paste, 环形进度条
<p>基本:SWFUpload + 基本UI
</div>
<div class="figure slide-item" style="margin:1em 0 4em">
<span class="subtitle">2. 单文件上传。A项目的发图</span>
<img src="static/pics/figure.upload.1.gif" alt="" />
<p>高级feature: 原生的单文件上传, 本地预览(ObjectURL), CSS3动画进度条
<p>基本:iframe上传 + 基本UI
</div>
</article>
</div>
<div class="page page-center">
<article>
<blockquote style="-webkit-writing-mode:vertical-rl;"><p>制作东西,需要付出耐心和毅力,也在赋予物体以生命,可以说是一项崇高的工作,工作时更有触摸着实物而感受到活着的充实感。</p> - 安藤忠雄</blockquote>
</article>
</div>
<div class="page page-end">
<article>
<p>谢 谢!
</article>
</div>
<div class="page page-center">
<article>
<p>Q & A
</article>
</div>
<div class="no-support">
Sorry! 暂不支持你的浏览器,请用Chrome打开...
</div>
<script src="static/js/prism.js"></script>
<script src="static/js/zepto.js"></script>
<script src="static/js/webcamswiper0.1.js"></script>
<script src="static/js/slides.js"></script>
</body>
</html>