forked from cxxxxxn/hollow_man
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
740 lines (733 loc) · 51.9 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
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name='format-detection' content='telephone=no'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<meta name='apple-touch-fullscreen' content='no'>
<meta http-equiv='Cache-Control' content='no-cache, no-store, must-revalidate'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Expires' content='0'>
</head>
<link rel = "stylesheet" href="css/vis.css">
<link rel = "stylesheet" href="css/jquery-ui.min.css">
<title>裸奔在科技时代</title>
<body>
<div class="container">
<div class="step_arr">
<div class="step_load" id="step_load_0" style="position: relative;overflow: hidden; background-color: #fff; z-index: 1000">
<div id="cover" class="cover" style="height: 100vh; width:100vw;"></div>
</div>
<div class="block"></div>
<div class="block"></div>
<div class="step" id="step_user_intro">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>生活中，手机与我们朝夕相处。</p>
<p>渐渐地，手机也越来越了解我们，包括一些隐私信息。</p>
<p>我们进行了一项实验，了解实验者的手机在一天内的<em> 权限使用情况 </em>。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_0">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>我们关注了如图所示的<em> 六种权限 </em>。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_1">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>不同的<em> 颜色 </em>表示不同的<em> 权限 </em>。</p>
<ul>
<li><i style="background: #58B5A0;"></i><span>读取设备通话状态和识别码</span></li>
<li><i style="background: #BACA5C;"></i><span>读取位置信息</span></li>
<li><i style="background: #EED05D;"></i><span>读取联系人</span></li>
<li><i style="background: #859FD0;"></i><span>新建/修改/删除联系人</span></li>
<li><i style="background: #C2A3CD;"></i><span>调用摄像头</span></li>
<li><i style="background: #CD6A53;"></i><span>启动录音</span></li>
</ul>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_2">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>矩形的<em> 面积 </em>表示权限被获取的<em> 次数 </em>。</p>
<p>矩形越大表示该权限被获取的次数越多。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_3">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>有一些权限已经被用户<em> 禁用 </em>。</p>
<p>被禁用的权限添上<em> 斜线 </em>纹理。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_4">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>那么，<em> 一天中都有哪些权限在被获取呢 </em>？</p>
<p>自上而下，我们分别可以看到</p>
<ul>
<li><i style="background-image: url('images/zibaoziqi_r.png');"></i>自暴自弃的小A，</li>
<li><i style="background-image: url('images/shenbuyouji_r.png');"></i>身不由己的小B，</li>
<li><i style="background-image: url('images/jinxiaoshengwei_r.png');"></i>谨小慎微的小C </li>
</ul>
<p>一天中的权限获取情况。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_5">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>大正方形表示的是<em> 时间段内 </em>的权限获取情况。</p>
<p>从左到右表示的是一天中的0点到24点。</p>
<p>0点到9点实验者处于<em> 睡眠 </em>状态。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_6">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>所有权限中读取次数最多的权限是:</p>
<p><i style="background: #BACA5C;"></i><em>读取位置信息</em></p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_7">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>其次，读取次数较多的权限还有: </p>
<p><i style="background: #58B5A0;"></i><em>读取设备通话状态和识别码</em></p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_8">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<h2 class="information_container_head"> 小 科 普 <i class="icon icon_kepu"></i></h2>
<div class="information_container_content">
<h3>设备通话状态：</h3>
<p>可以让APP了解手机当前的 <em>状态</em> 。</p>
<p>例如，播放音乐时如有电话呼入，音乐会暂停；当电话挂断后，音乐会继续播放。</p>
<h3>识别码：</h3>
<p>是手机的IMEI，相当于是手机的 <em>身份证</em> 。</p>
<p>获取设备识别码，可以追踪到用户从 下载➱激活➱注册➱使用➱流失➱回归 的全流程数据，对产品运营工作非常重要。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>在我们实验的三人中，被获取权限最少的是 <em>谨小慎微的小C</em> 。</p>
<p>或许，对待隐私的态度还是能改变一些现状的。</p>
</div>
</div>
</div>
<div style="height: 40vh;"></div>
<div class="block" id="step_vis_9"></div>
<div class="step" id="step_vis_10">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>下面我们来看一看每个人的权限获取情况。</p>
<p>因为数据里APP数量比较多，所以我们 <em>过滤</em> 掉了部分使用权限次数很少的APP。</p>
<p>并且我们按照权限读取次数的总和，从高到低对APP进行了 <em>排序</em>。</p>
<p>首先是 <em>自暴自弃的小A</em> 。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_11">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>在夜深人静🌛，我们放下手机进入梦乡后🛌💤，仍有一些APP在辛劳地工作着。</p>
<p>“为什么在我没有使用手机的时候，APP仍在频繁地读取权限呢？”小A看到数据之后提出了这个问题😳。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_12">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>接下来登场是 <em>身不由己的小B</em> 。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_13">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>大多数的APP都在获取 <i style="background: #BACA5C;"></i><em>读取位置信息</em> 和
<i style="background: #58B5A0;"></i><em>读取设备通话状态和识别码</em>。</p>
<h3>小B疑惑 🤔?</h3>
<p>“为什么非地图类软件也要读取位置信息呢？</p>
<p>设备识别码很重要吗？大多数APP都要读取它。”</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_14">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<h2 class="information_container_head"> 小 科 普 <i class="icon icon_kepu"></i></h2>
<div class="information_container_content">
<h3>为什么 <em>读取位置信息</em> 和 <em>读取设备通话状态和识别码</em> 权限很重要? </h3>
<p>有了这两份数据，APP就更能实现精准的广告推送和个性化的推荐。</p>
<p>获取地理位置，可以准确追踪你的路径，搜寻附近喜欢，进行 <em>同城推荐</em> 等。</p>
<p>而设备识别码，更是追踪一个人的重要标识。服务商利用设备识别码进行跨平台数据收集，可以进行千人千面的 <em>精准营销</em> 。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_15">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>最后出场的是 <em>谨小慎微的小C</em> 。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_16">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<div class="information_container_content">
<p>与前面两位实验者相同，微信高居榜首。</p>
<p>小C说，微信确实在他生活中扮演了很重要的角色，可自己没有主动在微信上进行任何与位置相关的操作🧐。</p>
<p>而与前面两位实验者不同，微博却位于小C列表的下方。</p>
<p>我们了解到，小C使用的是微博国际版，并且 <em>关闭了位置信息权限</em> 。</p>
</div>
</div>
</div>
<div class="block"></div>
<div class="step" id="step_vis_final">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container">
<h2 class="information_container_head"> 小 建 议 <i class="icon icon_dengpao" ></i></h2>
<div class="information_container_content">
<h3>尽量关闭应用的敏感权限</h3>
<p>我们无法准确推断，权限数据的流向究竟是为了更好的服务，还是其他我们不希望发生的事情。</p>
<p>为了减少我们心中的那份不安，我们可以</p>
<p><i class="number">1.</i>下载手机应用要认准正规 <em>应用商店</em> ，下载安全可靠的应用。</p>
<p><i class="number">2.</i>安装应用后记得查看应用开放的权限。读取通讯录、读取短信通话记录等 <em>敏感权限</em> 尽量关闭。</p>
</div>
</div>
</div>
<div class="block" style="height: 100vh;"></div>
<div id="question0_head" class="question_hint_">
<p class="information_container_content p_color">我们提供了几个生活中常见的场景，看看你会在相应的场景中做出怎样的选择呢？</p>
<p class="information_container_content p_color">点击 <span id='span_ans_1'></span><span id='span_ans_2'></span> 按钮做出选择，看看你的回答会带来什么影响。</p>
</div>
<div class="block_in_question" style="height: 50vh; text-align: center;">
<div style="width: 100%;text-align: center; padding-top: 10px;">
<img class="next_icon" src='./images/next.png'/>
</div>
</div>
<div class="step question_opacity" id="step_choice_0">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container p_color">
<h3 class="align_center question_number"><i class="number_">1.</i> </h3>
<div class="information_container_content align_center p_color">
<p class='step_p' style="text-align: justify;">【某知名公司】
您的一位手机联系人在【知名平台】上给你发了图片，详情见：http://zmgs.com（您的姓名由该联系人提供，如有打扰请见谅）。
回复T退订。
</p>
<div id = "animation0">
<button class="button_neg" value="0_neg" onclick="questionAns(this.value)">残忍拒绝</button>
<button class="button_pos" value="0_pos" onclick="questionAns(this.value)">点开看看</button>
</div>
</div>
</div>
</div>
<div class="step_in_question question_none_0" id='block_behind_q0'>
<div style="top:0">
<div class='vs_pos'>
<p id='vs_text_pos'>隐私</p>
</div>
<div class="vs_neg">
<p class="vs_text_neg" id='vs_text_neg_0'>???</p>
</div>
</div>
<div class='vs_story'>
<div class="information_container_content no_padding" style='text-align: justify;'>
<h3 id='ans_result_0'> 这种行为可能导致...</h3>
<p class='step_p'><i class="number">a.</i>用户受诱导下载不安全应用</p>
<p class='step_p'><i class="number">b.</i>落入骗子陷阱，遭遇新型诈骗</p>
</div>
<div class="information_container_content no_padding">
<h2 class="information_container_head chap" > 科 普 <i class="icon_kepu"></i></h2>
<span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 虚假链接</h3></span>
<p class='font_16'>是电信诈骗的一种重要手段。调查发现病毒链接短信的发送源主要为金融相关行业，包括银行信用卡、商家广告、金融借贷、彩票赌博等。</p>
<div id='pie_svg' class="img"><img src="images/pie.png" style="width: 100%;"/></div>
<p class='font_16'>而犯罪分子也在不断与时俱进，利用新的热点事件传播的<em> 时间差 </em>开展他们的犯罪活动。据北京青年报报道，2019年11月12日，工信部下发了《携号转网服务管理规定》，不过数日，就有骗子冒充运营商工作人员，以“携号转网”为由进行诈骗，诱导不清楚具体规则的受害者点击<em>点击虚假链接</em>。受害者一旦点击链接进入其搭建的虚假网站，骗子就会进一步诱导受害人提供身份证、银行卡账户等个人信息，并通过盗刷银行卡等方式实施诈骗。</p>
</div>
</div>
</div>
<div class="step question_opacity question_none_0" id="question_suggestion_0">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container p_color">
<h2 class="information_container_head"> 小 建 议 <i class="icon icon_dengpao"></i></h2>
<div class="information_container_content align_justify">
<div><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 防患于未然</h3></span> </div>
<p class='step_p'><i class="number">1.</i>未知的链接不要轻易点开，包括短信、网页、邮件、微信小程序。此外，二维码作为一种新的链接形式，确认其身份后才能放心扫描。</p>
<p class='step_p'><i class="number">2.</i>这类电信诈骗最终以骗取钱财为目标，因此我们在遇到金钱相关的链接时要格外提高警惕性，务必自行与相关单位/人员多次确认其真实性。</p>
</div>
</div>
</div>
<div class="block_in_question" id='last_block_0' style="height: 50vh; text-align: center;">
<div class="question_none_0" style="width: 100%;text-align: center; padding-top: 10px;">
<img class="next_icon" src='./images/next.png'/>
</div>
</div>
<div class="step question_opacity" id="step_choice_1" style="background-color:white;">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container p_color">
<h3 class="align_center question_number"><i class="number_">2.</i> </h3>
<div class="information_container_content p_color" style='text-align: center;'>
<p class='step_p' style="text-align: justify;">【某金融APP】
基金宝让您在家也能轻松赚钱，没有烦恼的赚钱宝贝。注册即可享200元基金购买优惠。输入姓名、手机号等身份信息立刻成为会员。
</p>
<div style="display: inline-block;" id = "animation1">
<button class="button_neg" value="1_neg" onclick="questionAns(this.value)">残忍拒绝</button>
<button class="button_pos" value="1_pos" onclick="questionAns(this.value)">心动查看</button>
</div>
</div>
</div>
</div>
<div class="step_in_question question_none_1" id='block_behind_q1'>
<div style="top:0">
<div class='vs_pos'>
<p id='vs_text_pos'>隐私</p>
</div>
<div class="vs_neg" id='vs_q1'>
<p class='vs_text_neg' id='vs_text_neg_1'>???🛌</p>
</div>
</div>
<div class='vs_story'>
<div class="information_container_content no_padding" style='text-align: justify;'>
<h3 id='ans_result_1'> 这种行为可能导致...</h3>
<p class='step_p'><i class="number">a.</i>推广短信接踵而至</p>
<p class='step_p'><i class="number">b.</i>个人信息与意向被贩卖</p>
</div>
<div class="information_container_content no_padding ">
<div class="font_16">
<p>通过这种方式，商家获得了有意向购买产品的顾客的个人信息，后续可以通过短信、电话等方式进行产品的推广，使顾客收到各种垃圾短信的骚扰。</p>
</div>
<div>
<h2 class="information_container_head chap" > 科 普 <i class="icon_kepu"></i></h2>
<div><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 精准推销</h3></div>
<div class="align_center img" style="margin-top: 25px;"><img src="./images/jingzhun.png" style="width:60%"></img></div>
<p class="font_16">消费者通过通话、购物、网上浏览等方式产生的消费痕迹，称为精准信息。服务商可以借助这些数据对用户爱好和市场风向进行分析。</p>
<p class="font_16">而利用精准信息构建不同群体的用户画像，商家可以进行精准投放行为。例如，银行可以根据用户每月的消费金额、信用额度、当前存款情况等进行分析，针对不同的用户分群制定不同营销策略。</p>
<div><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 信息贩卖</h3></span> </div>
<p class="font_16">据统计，2016年至2017年间，国内6.88亿网民因垃圾短信、诈骗信息、个人信息泄露等造成的经济损失估算达<em>915亿元</em>。这是一组“血的数据”。</p>
<div class="align_center img"><img src="./images/menu.png" style="width:100%"></img></div>
<p class="font_16">这些信息除了给我们带来精准广告的骚扰，更被一些不法分子利用进行精准诈骗、套路贷等犯罪活动。犯罪分子购买这些信息用于推销贷款、软暴力催收，也有人利用这些信息进行恶意行为，发给贷款人本人进行威胁，甚至发给亲友同事，毁坏贷款人声誉。</p>
</div>
</div>
</div>
</div>
<div class="step question_opacity question_none_1" id="question_suggestion_1">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container p_color">
<h2 class="information_container_head"> 小 建 议 <i class="icon icon_dengpao"></i></h2>
<div class="information_container_content" style='text-align: justify;'>
<div><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 谨慎！谨慎！再谨慎！</h3></span> </div>
<p class='step_p'><i class="number">1.</i>上传个人信息时慎重判断商家可信度，只在可靠的平台注册，并且杜绝“查户口”式填信息。</p>
<p class='step_p'><i class="number">2.</i>避免一些容易泄漏个人信息的行为，例如：连接公共wifi、转卖个人手机、网络调查、简历、各类单据和证件的复印件。</p>
<p class='step_p'><i class="number">3.</i>随着技术的发展，可以被PS的不仅仅是照片，更有视频和声音，告知父母长辈在遇到“通缉令”式的诈骗不要轻易相信。</p>
</div>
</div>
</div>
<div class="block_in_question" id='last_block_1' style="height: 50vh; text-align: center;">
<div class="question_none_1" style="width: 100%;text-align: center; padding-top: 10px;">
<img class="next_icon" src='./images/next.png'/>
</div>
</div>
<div class="step question_opacity" id="step_choice_2" style="background-color:white;">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container p_color">
<h3 class="align_center question_number"><i class="number_">3.</i> </h3>
<div class="information_container_content p_color" style='text-align: center;'>
<p class='step_p' style="text-align: justify;">【智能头像】
身边好友都在玩，上传照片即可生成专属于你的圣诞节日主题头像。
十秒可得，心动不如行动！
</p>
<div style="display: inline-block;" id = "animation2">
<button class="button_neg" value="2_neg" onclick="questionAns(this.value)">残忍拒绝</button>
<button class="button_pos" value="2_pos" onclick="questionAns(this.value)">立即上传</button>
</div>
</div>
</div>
</div>
<div class="step_in_question question_none_2" id='block_behind_q2'>
<div style="top:0">
<div class='vs_pos'>
<p id='vs_text_pos'>隐私</p>
</div>
<div class="vs_neg" id='vs_q2'>
<p class='vs_text_neg' id='vs_text_neg_2'>???</p>
</div>
</div>
<div class='vs_story p_color'>
<div class="information_container_content" style='text-align: justify;'>
<h3 id='ans_result_2'> 这种行为可能导致...</h3>
<p class='step_p'><i class="number">a.</i>照片中包含的个人信息（如车牌号等）被不法分子利用</p>
<p class='step_p'><i class="number">b.</i>照片的位置信息被提取</p>
<p class='step_p'><i class="number">c.</i>照片暴露虹膜、指纹等个人生物信息</p>
</div>
<div class="information_container_content no_padding">
<div>
<h2 class="information_container_head chap" > 科 普 <i class="icon_kepu"></i></h2>
<div ><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 生物特征</h3></span> </div>
<div class="align_center img" style="margin-top: 25px;"><img src="./images/shengwu.png" style="width:100%"></img></div>
<p class="font_16">随着人工智能和大数据时代的到来，生物特征成为越来越重要的个人信息，如果被不法分子利用可能带来意想不到的危害。这样的个人标志可这以被用于申请信用贷款，甚至注册公司。早在2017年国际安全极客大赛上，人脸识别门禁2分半钟被破解，彩色打印人脸照片10秒钟解锁手机，轻松地攻破了人脸识别等生物识别技术。</p>
<h2 class="information_container_head chap" > 案 例 <i class="icon_example"></i></h2>
<div><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 指纹信息</h3></span> </div>
<p class="font_16">我们的生物特征通过图片的形式被不断泄漏。据新华网报道，新兴技术可以实现在1.5米内拍摄“剪刀手”照片，其指纹信息可通过照片100%提取还原。</p>
<div><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 虹膜寻人</h3></span> </div>
<p class="font_16">1985年，《国家地理》杂志封面的阿富汗少女一双满怀恐惧的绿眼睛震撼世界，十多年后，摄影师和技术人员通过比对当时照片中提取的虹膜信息成功找到了当事人。</p>
<div><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 有人在收集贩卖你的脸</h3></span> </div>
<p class="font_16">据央视新闻记者调查发现，在某平台上，10元就可以买到5000张人脸照片。这些被贩卖的人脸照片，可能用于注册公司、非法贷款等等，可能对照片当事人造成财产或精神损失。</p>
</div>
</div>
</div>
</div>
<div class="step question_opacity question_none_2" id="question_suggestion_2">
<div class="information_head">
<img src="images/eye.svg" class = "information_head_icon">
<div class = "information_head-right">
<img src="images/search.svg" class = "information_head_icon">
<img src="images/right.svg" class = "information_head_icon">
</div>
</div>
<div class="information_container p_color">
<h2 class="information_container_head"> 小 建 议 <i class="icon icon_dengpao"></i></h2>
<div class="information_container_content" style='text-align: justify;'>
<div><span><img src='./images/shuxian.png' class="shuxian"/><h3 style="display: inline;"> 照片不再只是一张简单的图像！</h3></span> </div>
<p class='step_p'><i class="number">1.</i>不要把自己所有的生活状态都发到网上，理智地分享生活。</p>
<p class='step_p'><i class="number">2.</i>确保信息的收集方在收集完人的生物信息后，不作违法用途、且应当尽好保管义务。</p>
<p class='step_p'><i class="number">3.</i>尽量避免使用未对隐私条款作明确声明的在线工具编辑图片、剪辑视频等，避免人像、声纹等个人信息被盗用。</p>
<p class='step_p'><i class="number">4.</i>加强对生物特征信息的重视，了解新兴科技在生物特征上的应用。</p>
</div>
</div>
</div>
<div class="block_in_question" id='last_block_2' style="height: 50vh;">
<div class="question_none_2" style="width: 100%;text-align: center; padding-top: 10px;">
<img class="next_icon" src='./images/next.png'/>
</div>
</div>
<div class="block" id='last_block'></div>
<div class="question_hint_ p_color" id="chap3" style="opacity: 1;">
<p class="information_container_content font_16">随着科技的发展，如何在新的时代保护好自己的隐私，是一个值得每个人思考的问题。当中国人被打上“愿意用隐私换取便利”的标签时，自我保护的意识越发重要。除了寄希望于国家的整治、他人的自律，<span class="underline ud-3">为自己筑造的壁垒，是隐私最直接的“保护色”。</span></p>
<p class="information_container_content font_16">毕竟，当你透明地行走在社会中时，又怎能奢望他人不来觊觎你的“财富”呢？</p>
</div>
<div id='question'>
<div class='question_div'>
<div class='question_inner'>
<svg id='questionSVG1' class="punctuation_svg" t="1576511246797" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2073"
width="200" height="200">
<path id='questionMark'
d="M500.382 0.006c-177.646 19.719-276.341 96.721-296.085 230.93-3.949 43.437 17.757 67.13 65.143 71.066 23.667 3.961 43.411-13.808 59.207-53.296 23.692-82.9 80.862-124.35 171.735-124.35 110.479 7.885 169.698 63.156 177.671 165.8 0 94.759-64.313 110.202-99.248 138.774-44.267 36.218-73.217 72.952-108.655 135.216-29.779 52.314-34.91 164.227-34.91 164.227 0 47.373 21.655 71.066 65.143 71.066 39.413 0 61.194-23.693 65.155-71.066 0 0 5.219-125.594 55.925-181.129 57.472-62.942 194.749-107.071 198.698-268.922C804.365 108.561 697.772 15.789 500.382 0.006zM500.382 859.162c-45.524 0-82.409 36.91-82.409 82.41 0 45.523 36.885 82.422 82.409 82.422s82.422-36.898 82.422-82.422c0-45.5-36.898-82.41-82.422-82.41z"
fill="#60af62" p-id="2074"></path>
</svg>
</div>
<div class='question_inner'>
<p class='questionText' id='questionText'>你手机上装了多少个APP</p>
</div>
</div>
</div>
<div id='question2'>
<div class='question_div'>
<div class='question_inner'>
<svg id='questionSVG2' class="punctuation_svg" t="1576511246797" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2073"
width="200" height="200">
<path id='questionMark2'
d="M500.382 0.006c-177.646 19.719-276.341 96.721-296.085 230.93-3.949 43.437 17.757 67.13 65.143 71.066 23.667 3.961 43.411-13.808 59.207-53.296 23.692-82.9 80.862-124.35 171.735-124.35 110.479 7.885 169.698 63.156 177.671 165.8 0 94.759-64.313 110.202-99.248 138.774-44.267 36.218-73.217 72.952-108.655 135.216-29.779 52.314-34.91 164.227-34.91 164.227 0 47.373 21.655 71.066 65.143 71.066 39.413 0 61.194-23.693 65.155-71.066 0 0 5.219-125.594 55.925-181.129 57.472-62.942 194.749-107.071 198.698-268.922C804.365 108.561 697.772 15.789 500.382 0.006zM500.382 859.162c-45.524 0-82.409 36.91-82.409 82.41 0 45.523 36.885 82.422 82.409 82.422s82.422-36.898 82.422-82.422c0-45.5-36.898-82.41-82.422-82.41z"
fill="#fbfa6a" p-id="2074"></path>
</svg>
</div>
<div class='question_inner'>
<p class='questionText' id='questionText2_1'>在怀疑APP窃取我们隐私的同时</p>
<p class='questionText' id='questionText2_2'>我们自己保护好隐私了吗</p>
</div>
</div>
</div>
<div id="user-introduction">
<h1 class = "intro-title"> 实验者 </h1>
<div class = "user-container">
<div class="user-info">
<img src="images/zibaoziqi.png"/>
<div class="user-text">
<h2 id = "user-name">自暴自弃的小A</h2>
<p>“我的手机号早已泄漏，</p>
<p>根本不在怕的。”</p>
</div>
</div>
<div class="user-info">
<img src="images/shenbuyouji.png"/>
<div class="user-text">
<h2 id = "user-name">身不由己的小B</h2>
<p>“很怕隐私被泄漏，</p>
<p>但在不断让步。”</p>
</div>
</div>
<div class="user-info">
<img src="images/jinxiaoshengwei.png"/>
<div class="user-text">
<h2 id = "user-name">谨小慎微的小C</h2>
<p>“认真阅读隐私条款，</p>
<p>绝不多给一个权限。”</p>
</div>
</div>
</div>
</div>
<div id = "vis">
<h1 class = "intro-title vis-title" id = "vis-title0"> 权限 </h1>
<h1 class = "intro-title vis-title" id = "vis-title1" style="opacity:0"> 颜色 </h1>
<h1 class = "intro-title vis-title" id = "vis-title2" style="opacity:0"> 大小 </h1>
<h1 class = "intro-title vis-title" id = "vis-title3" style="opacity:0"> 纹理 </h1>
<div id = "vis-container"> <div>
</div>
</div>
</div>
<div class = "end">
<div id = "end-content" style="opacity: 0;">
<div style=" position:fixed; height: 100vh; width:100vw; top:0px;background-color: #fbfa6a; opacity: 1;">
<div class='question_div'>
<div class='question_inner'>
<svg class="punctuation_svg" t="1576511246797" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2073"
width="200" height="200">
<path id='questionMark2'
d="M450.602458 665.598073a62.463819 62.463819 0 0 0 122.879645 0L614.441984 102.399704A102.615282 102.615282 0 0 0 512.04228 0 105.256116 105.256116 0 0 0 409.642577 112.639674L450.602458 665.598073z m61.439822 153.599556a102.399704 102.399704 0 1 0 102.399704 102.399703 96.740773 96.740773 0 0 0-102.399704-102.399703z"
fill="#60af6a" p-id="2074"></path>
</svg>
</div>
<div class='question_inner'>
<p>拉上那道窗帘</p>
<p>不做透明人</p>
</div>
</div>
</div>
</div>
<div class = "wrapper">
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'>
<p class="desc">指导老师：曹楠、石洋</p>
</div>
<div class='blinds'>
<p class="desc">视觉设计：孙莺</p>
</div>
<div class='blinds'>
<p class="desc">技术开发：陈楠、孙馥玲</p>
</div>
<div class='blinds'>
<p class="data_source">数据来源：腾讯《短信骚扰安全数据报告》</p>
<p class="data_source">中国互联网协会《中国网民权益保护调查报告》</p>
</div>
<div class='blinds'></div>
<div class='blinds'></div>
<div class='blinds'></div>
</div>
</div>
<div class="end-tilte">
<img src = "images/cover.png"/>
</div>
</body>
<script src = "js/ref/jquery.min.js"></script>
<script src = "js/ref/d3.v4.min.js"></script>
<script src = "js/ref/textures.js"></script>
<script src = "js/property.js"></script>
<script src = "js/introduction.js"></script>
<script src = "js/vis.js"></script>
<script src = "js/load_data.js"></script>
<script src = "js/load.js"></script>
<script src = "js/action.js"></script>
<script src = "js/main.js"></script>
</html>