-
Notifications
You must be signed in to change notification settings - Fork 0
/
sign-in-form-best-practices.html
767 lines (632 loc) · 28.3 KB
/
sign-in-form-best-practices.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
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>登录表单最佳实践</title>
<meta name="description" content="使用跨平台的浏览器特性来构建安全、可访问性高且易于使用的登录表单">
<meta name="author" content="Hex">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<link rel="stylesheet" href="css/default.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="center">
<h2>登录表单最佳实践</h2>
<p class="sub">使用跨平台的浏览器特性来构建安全、可访问性高且易于使用的登录表单</p>
<p>
<small><a href="https://codeigniter.org.cn" target="_blank">Hex</a> 为您分享 / Github: <a href="https://github.com/hex-ci" target="_blank">@hex-ci</a></small>
</p>
</section>
<section>
<h3>目录</h3>
<br>
<ul>
<li>使用语义化 HTML</li>
<li>易用性</li>
<li>移动优先</li>
<li>统计与分析</li>
</ul>
</section>
<section>
<h3>使用语义化 HTML</h3>
<p>使用以下元素编写页面：<form>、<label> 和 <button>。</p>
<p>这些元素启用了浏览器内建功能，改善了可访问性，并为标签增加了含义。</p>
<br>
<div class="fragment">
<h4>使用 <form></h4>
<p>不要将 <input> 放在 <div> 中，请使用 <form>，好处：</p>
<ul>
<li>对屏幕阅读器或其他辅助设备更友好</li>
<li>调用浏览器的内置功能</li>
<li>对旧浏览器兼容更好</li>
<li>即使 JS 失败，页面仍可正常工作</li>
</ul>
</div>
</section>
<section>
<h4>使用 <label></h4>
<p>请为每个 <input> 启用一个 <label>，例如：</p>
<pre><code class="hljs html" data-trim>
<label for="email">Email</label>
<input id="email" …>
</code></pre>
<br>
<div class="fragment">
<p>有什么好处？</p>
<ul>
<li>通过使用 label 的 for 属性将其与 input 的 name 或 id 关联起来，<br>点击标签时可使 input 框获得焦点</li>
<li class="fragment">当 label 或者 label 关联的 input 获得焦点时，<br>屏幕阅读器会朗读其文本</li>
</ul>
</div>
</section>
<section>
<h4>不要使用 placeholder</h4>
<p class="fragment">为什么呢？（事出反常必有妖！！）</p>
<p class="fragment">一般人们开始输入文字后，很容易忘记输入的内容，特别是当人们注意力不集中的时候：<br>“我要输入 Email、电话还是帐户 ID？”</p>
<div class="fragment">
<p>除此之外 placeholder 还有其他一些潜在问题：</p>
<ul>
<li>降低可访问性</li>
<li>浏览器翻译工具不会翻译这个属性</li>
<li>......</li>
</ul>
<div class="fragment">
<p>扩展阅读: </p>
<ul>
<li><a href="https://www.smashingmagazine.com/2018/06/placeholder-attribute/" target="_blank">Don't Use The Placeholder Attribute</a></li>
<li><a href="https://www.nngroup.com/articles/form-design-placeholders/" target="_blank">Placeholders in Form Fields Are Harmful</a></li>
</ul>
</div>
</div>
</section>
<section>
<h4>将标签放在输入框上方</h4>
<div>
<img width="50%" data-src="images/sign-in-form-best-practices/label-position.png">
</div>
<p class="fragment">
根据 <a href="https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html" target="_blank">Google AI 的研究</a>，这样可以在移动端和桌面端之间实现一致的设计，<br>
并可让用户更快地注意到。<br>
你将获得 100% 宽度的标签和输入框，<br>
而无需调整 label 和 input 的宽度以适合标签文本。
</p>
</section>
<section>
<h4>使用 <button></h4>
<p>将 <button> 用于按钮！<br>button 元素不仅提供可访问性和内置的表单提交功能，<br>且可以轻松设置样式。<br>使用 <div> 或其他伪装成按钮的元素毫无意义。</p>
<div class="fragment">
<p>另外：</p>
<p>在注册或登录表单中使用提交按钮，要使其文本意思简单明了，<br>例如：“注册帐户”或“登录”，而不是“提交”或“开始”。</p>
</div>
<div class="fragment">
<p>关于按钮禁用：</p>
<ul>
<li>提交后要禁用按钮</li>
<li>请勿在等待用户输入的情况下禁用按钮</li>
</ul>
</div>
</section>
<section>
<h4>不要使用二次确认输入</h4>
<p>
有些网站会强迫用户输入两次电子邮件或密码。
</p>
<p class="fragment">
这样做可能会减少一些用户错误，但会给用户带来额外的操作，并增加放弃率。<br>
两次询问操作也没有意义，因为现代浏览器会提供自动填充功能。
</p>
<p class="fragment">
另外，你需要给用户发送邮件以确认电子邮件地址；<br>并提供功能让他们轻松地重置密码。
</p>
</section>
<section>
<h3>充分利用元素属性</h3>
<p>例如，将 autofoucus 属性添加到登录表单的第一个 input 中，<br>将使用户更快的输入。</p>
<div>
<img width="40%" data-src="images/sign-in-form-best-practices/autofocus.png">
</div>
</section>
<section>
<h3>保护密码的私密性，但可以查看密码</h3>
<ul>
<li>使用 type="password" 隐藏密码</li>
<li class="fragment">使用 type="password" 也意味着浏览器可以在提交表单时保存密码<br>以及使用 name 和 id 属性来猜测表单输入的含义。</li>
<li class="fragment">
添加显示密码的图标或按钮，并且不要忘记添加“忘记密码”链接
<div>
<img width="100%" data-src="images/sign-in-form-best-practices/show-password-google.png">
</div>
</li>
</ul>
</section>
<section>
<h3>为移动端提供可用的键盘</h3>
<p>
使用 <input type="email"> 为移动用户提供适当的键盘，<br>
并可启用基本的电子邮件地址验证，他不需要写 JS！
</p>
<p class="fragment">
如使用电话号码，请使用 <input type="tel"><br>
还可在必要时使用 inputmode 属性 inputmode="numeric"<br>
这是输入 PIN 码的理想选择。<br>
扩展阅读：<br>
<a href="https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/" target="_blank">Everything You Ever Wanted to Know About inputmode</a>
</p>
<p class="fragment">
注意，type="number" 将添加向上/向下箭头，<br>
因此请勿将其用于不希望增加的数字，例如 ID 和帐号。
</p>
</section>
<section>
<h4>防止移动端键盘遮挡“登录”按钮</h4>
<p>错误范例：</p>
<div>
<img width="40%" data-src="images/sign-in-form-best-practices/keyboard-not-ok.png">
</div>
</section>
<section>
<h4>防止移动端键盘遮挡“登录”按钮</h4>
<p>正确范例：</p>
<div>
<img width="23%" data-src="images/sign-in-form-best-practices/keyboard-ok.png">
</div>
</section>
<section>
<h5>在各种设备上测试</h5>
<p>BrowserStack 可以在一系列实际设备和浏览器上对<a href="https://www.browserstack.com/open-source" target="_blank">开源项目进行免费测试</a></p>
<div>
<img width="55%" data-src="images/sign-in-form-best-practices/iphone-keyboard.png">
</div>
</section>
<section>
<h5>使用两步操作</h5>
<p>一些网站通过两步操作：先输入电子邮件/电话，再输入密码。<br>这种方法简化了体验：一次只给用户分配一件事。</p>
<div>
<img width="38%" data-src="images/sign-in-form-best-practices/amazon-signin-mobile.png">
</div>
</section>
<section>
<h4>帮助用户避免重新输入数据</h4>
<p>
<br>
可以通过浏览器自动填充来帮助用户，<br>
这对于<a href="https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/" target="_blank">放弃率很高</a>的电子邮件输入尤其重要：
</p>
<ul>
<li class="fragment">使用 input 元素的 name 属性可帮助浏览器存储自动填充数据</li>
<li class="fragment">autocomplete 属性使浏览器可使用 name 属性存储的数据自动填充</li>
</ul>
</section>
<section>
<h4>不要在注册表单上自动填写密码</h4>
<p>
<br>
如果浏览器已经存储了该站点的密码，<br>
那么在注册时自动填写密码没有意义，<br>
例如，如果两个人共享同一设备，而一个人想要创建一个新帐户。
</p>
</section>
<section>
<h4>用户输入新密码时，请使用 name="new-password"</h4>
<p>
<br>
为密码框起适当的名称来帮助浏览器区分新密码和当前密码：
</p>
<ul>
<li>
将 name="new-password" 用于注册表单中的密码框，<br>
或修改密码表单中的新密码框。<br>
这将告诉浏览器你希望存储该站点的新密码。</li>
</ul>
<div class="fragment">
<p>在注册表单中的例子：</p>
<pre><code class="hljs html" data-trim>
<input name="new-password" type="password" …>
</code></pre>
</div>
</section>
<section>
<h4>用户输入现有密码时，请使用 name="current-password"</h4>
<br>
<ul>
<li>
将 name="current-password" 用于登录表单中的密码框，<br>
或修改密码表单中的旧密码框。<br>
这将告诉浏览器你希望存储该站点的当前密码。
</li>
</ul>
<div class="fragment">
<p>在登录表单中例子：</p>
<pre><code class="hljs html" data-trim>
<input name="current-password" type="password" autocomplete="current-password" …>
</code></pre>
</div>
</section>
<section>
<h4>使用密码管理器</h4>
<p>Safari 11 及更高版本中的密码管理器：</p>
<div>
<img width="100%" data-src="images/sign-in-form-best-practices/safari-signin-desktop.png">
</div>
</section>
<section>
<h4>使用密码管理器</h4>
<p>Chrome 83 中的密码管理器：</p>
<div>
<img width="100%" data-src="images/sign-in-form-best-practices/chrome-signin-desktop.png">
</div>
</section>
<section>
<h4>启用浏览器的生成密码功能</h4>
<p>
如果在注册表单中为密码框包含了 autocomplete="new-password"，<br>
现代浏览器会弹出生成密码功能。
</p>
<div>
<img width="100%" data-src="images/sign-in-form-best-practices/safari-password-suggestion.png">
</div>
</section>
<section>
<h4>帮助用户避免意外丢失输入</h4>
<p>
将 required 属性添加到 input 元素中，<br>
现代浏览器会自动提示并设置焦点。不用写 JS！
</p>
<div>
<img width="55%" data-src="images/sign-in-form-best-practices/missing-field-firefox-android.png">
</div>
</section>
<section>
<h3>为手指和拇指而设计</h3>
<p>
<br>
input 元素和按钮的默认大小都比较小，<br>
这是许多站点登录表单的常见问题，<br>
尤其是在移动设备上。
</p>
</section>
<section>
<h4>确保输入框和按钮足够大</h4>
<p>
输入框和按钮的默认大小和内边距在桌面浏览器上太小，<br>
在移动设备上甚至更糟。
</p>
<div>
<img width="65%" data-src="images/sign-in-form-best-practices/unstyled-form.png">
</div>
</section>
<section>
<h4>确保输入框和按钮足够大</h4>
<p>
根据 <a href="https://support.google.com/accessibility/android/answer/7101858?hl=en-GB" target="_blank">Android 可访问性指南</a>，<br>
触摸屏对象的建议目标大小为 7–10 mm，<br>
Apple 界面指南建议使用 48x48 像素，<br>
W3C 建议<a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" target="_blank">至少 44x44 CSS 像素</a>。
</p>
<p class="fragment">
在此基础上，<br>
向移动端的输入元素和按钮添加（至少）大约 15 像素的 padding，<br>
在桌面端添加大约 10 像素的 padding。
</p>
<p class="fragment">
<a href="https://web.dev/tap-targets/" target="_blank">触摸目标大小是否合理</a>的检测可以使用 Lighthouse
</p>
</section>
<section>
<h5>为拇指而设计</h5>
<p>
<br>
搜索 <a href="https://www.google.com/search?q=touch+target" target="_blank">touch target</a>，你会看到很多有关食指操作的图片。<br>
但是，在现实世界中，许多人会用拇指与移动设备互动。<br>
拇指比食指大，控制也不那么精确。<br>
更重要的是要有足够大小的触摸目标。
</p>
</section>
<section>
<h4>使文字足够大</h4>
<p>
与大小和内边距一样，输入框和按钮的默认浏览器字体大小也太小，<br>
尤其是在移动设备上。
</p>
<div>
<img width="58%" data-src="images/sign-in-form-best-practices/unstyled-form-text.png">
</div>
</section>
<section>
<h4>使文字足够大</h4>
<p>
不同平台上的浏览器字体大小不同，<br>
对热门网站的快速调查显示，<br>
在桌面端 13–16 像素的字体大小：<br>
所匹配的物理大小是移动端的最小值。
</p>
<p class="fragment">
请在移动端使用更大的字号：<br>
桌面端 Chrome 上 16px 很清晰，<br>
那么在 Android 上也很难阅读 16px 的文本。<br>
20px 大约可以在移动设备上使用，<br>
但也应该考虑视力不佳的童鞋。
</p>
<p class="fragment">
注意：<br>
不幸的是，自动填充文本（至少在 Android 的 Chrome 上）很小，<br>
也无法使用 CSS 调整大小。<br>
<a href="https://crbug.com/953689" target="_blank">Chromium Issue #953689</a> 正在跟踪这个问题。<br>
如果你对这个感兴趣，请为他打个 call！
</p>
</section>
<section>
<h4>在输入框之间提供足够的空间</h4>
<p>
<br>
添加足够的边距以使输入能够很好地用作触摸目标。<br>
换句话说，以手指宽度的边缘为目标。
</p>
</section>
<section>
<h4>确保你的输入清晰可见</h4>
<p>
输入框的默认边框样式使它们在一些平台上难以看清，<br>
例如 Android 版 Chrome 上，它们几乎是不可见的。<br>
除了 padding 外，还要添加 border：<br>
在白色背景上，一个好的通用规则是使用 #ccc 或更暗的颜色。
</p>
<div>
<img width="14%" data-src="images/sign-in-form-best-practices/styled-signin-form.png">
</div>
</section>
<section>
<h4>使用浏览器内建功能来提示无效输入</h4>
<p>
浏览器支持对具有 type 属性的输入框进行基本的表单验证。<br>
当你提交无效内容时，浏览器会显示提示，<br>
并将焦点放在有问题的输入框上。
</p>
<div>
<img width="33%" data-src="images/sign-in-form-best-practices/invalid-email.png">
</div>
</section>
<section>
<h4>使用浏览器内建功能来提示无效输入</h4>
<p>
可以使用 :invalid CSS 选择器高亮显示无效数据。<br>
使用 :not(:placeholder-shown) 避免选择到没有内容的输入框。
</p>
<p>例如：</p>
<pre><code class="hljs css" data-trim>
input[type=email]:not(:placeholder-shown):invalid {
color: red;
outline-color: red;
}
</code></pre>
</section>
<section>
<h3>必要时使用 JS</h3>
<h4>显示密码功能</h4>
<p>
应该添加显示密码图标或按钮，<br>
以使用户能够检查他们输入的文本。<br>
当用户看不到他们输入的文本时，<a href="https://www.nngroup.com/articles/stop-password-masking/" target="_blank">可用性会受到影响</a>。<br>
尽管有<a href="https://twitter.com/sw12/status/1251191795377156099" target="_blank">实施计划</a>，但目前尚无内置方法。仍需要使用 JS。
</p>
<div>
<img width="60%" data-src="images/sign-in-form-best-practices/show-password-google.png">
</div>
</section>
<section>
<h4>显示密码功能</h4>
<p>
以下代码使用文本按钮添加“显示密码”功能。
</p>
<p>HTML：</p>
<pre><code class="hljs html" data-trim>
<section>
<label for="password">Password</label>
<button id="toggle-password" type="button"
aria-label="Show password as plain text. Warning: this will display your password on the screen.">
Show password
</button>
<input id="password" name="password" type="password" autocomplete="current-password" required>
</section>
</code></pre>
</section>
<section>
<h4>显示密码功能</h4>
<p>CSS：</p>
<pre><code class="hljs css" data-trim>
button#toggle-password {
background: none;
border: none;
cursor: pointer;
/* Media query isn't shown here. */
font-size: var(--mobile-font-size);
font-weight: 300;
padding: 0;
/* Display at the top right of the container */
position: absolute;
top: 0;
right: 0;
}
</code></pre>
</section>
<section>
<h4>显示密码功能</h4>
<p>JS：</p>
<pre><code class="hljs javascript" style="max-height: 600px" data-trim>
const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');
togglePasswordButton.addEventListener('click', togglePassword);
function togglePassword() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
togglePasswordButton.textContent = 'Hide password';
togglePasswordButton.setAttribute('aria-label',
'Hide password.');
} else {
passwordInput.type = 'password';
togglePasswordButton.textContent = 'Show password';
togglePasswordButton.setAttribute('aria-label',
'Show password as plain text. ' +
'Warning: this will display your password on the screen.');
}
}
</code></pre>
</section>
<section>
<h4>显示密码功能</h4>
<p>效果如图：</p>
<div>
<img width="60%" data-src="images/sign-in-form-best-practices/show-password.png">
</div>
</section>
<section>
<h4>提高密码输入框的可访问性</h4>
<p>
使用 aria-describedby 属性指向一个描述密码规则的元素。<br>
为屏幕阅读器提供标签文本、输入框类型（密码）和描述信息。
</p>
<pre><code class="hljs html" data-trim>
<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
</code></pre>
<div class="fragment">
<p>
当添加“显示密码”功能时，请确保包含一个 aria-label 以警告将要显示密码。<br>
否则，用户可能会无意间泄露密码。
</p>
<pre><code class="hljs html" data-trim>
<button id="toggle-password"
aria-label="Show password as plain text.
Warning: this will display your password on the screen.">
Show password
</button>
</code></pre>
</div>
</section>
<section>
<h4>在提交之前进行实时验证</h4>
<p>
<br>
HTML 表单元素和属性具有用于基本验证的内建功能，<br>
但在用户输入数据以及尝试提交表单时，<br>
还应该使用 JS 进行更可靠的验证。
</p>
<p class="fragment">
<br>
警告：客户端验证可帮助用户输入数据并避免不必要的服务器负载，<br>
但也必须始终在后端进行数据验证和数据过滤。
</p>
<p class="fragment">
<br>
扩展阅读：<br>
<a href="https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation" target="_blank">Use JavaScript for more complex real-time validation</a>
</p>
</section>
<section>
<h4>统计与分析</h4>
<p class="fragment">
“没有量化，就没有优化”，对于注册和登录表单尤其如此。<br>
你需要设定目标，量化，并持续改善网站。
</p>
<p class="fragment">
<a href="https://www.nngroup.com/articles/discount-usability-20-years/" target="_blank">Discount Usability 测试</a>对于尝试更改很有帮助，<br>
但你需要真实数据才能真正了解用户：
</p>
<ul>
<li class="fragment">页面统计：注册和登录页的 PV、跳出率和退出率等。</li>
<li class="fragment">
交互分析：<a href="https://support.google.com/analytics/answer/6180923?hl=en" target="_blank">目标漏斗</a>（用户在哪里放弃登录？）<br>
<a href="https://developers.google.com/analytics/devguides/collection/gtagjs/events" target="_blank">事件</a>（用户在与表单交互时会采取什么操作？）
</li>
<li class="fragment">
网站性能：以用户为中心的指标
</li>
</ul>
<p class="fragment"><br>考虑实施 A/B 测试</p>
</section>
<section>
<h3>总结</h3>
<ul>
<li class="fragment">不要让用户搜寻登录！</li>
<li class="fragment">保持专注！</li>
<li class="fragment">最小化注册复杂性。</li>
<li class="fragment">让用户清楚登录或注册对他们有什么好处。</li>
<li class="fragment">尽可能使用手机号。</li>
<li class="fragment">方便用户重置密码。</li>
<li class="fragment">提供服务条款和隐私政策链接。</li>
<li class="fragment">使注册和登录页面保持与全站风格统一</li>
</ul>
</section>
<section>
<h3>扩展阅读</h3>
<ul>
<li><a href="https://developers.google.com/web/fundamentals/design-and-ux/input/forms" target="_blank">Create Amazing Forms</a></li>
<li><a href="https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/" target="_blank">Best Practices For Mobile Form Design</a></li>
<li><a href="https://web.dev/more-capable-form-controls" target="_blank">More capable form controls</a></li>
<li><a href="https://webaim.org/techniques/forms/" target="_blank">Creating Accessible Forms</a></li>
<li><a href="https://developers.google.com/web/updates/2016/04/credential-management-api" target="_blank">Streamlining the Sign-in Flow Using Credential Management API</a></li>
<li><a href="https://web.dev/web-otp/" target="_blank">Verify phone numbers on the web with the Web OTP API</a></li>
</ul>
</section>
<section style="text-align: left;">
<h1>THE END</h1>
<p>谢谢！</p>
<p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<small>参考资料：<a href="https://web.dev/sign-in-form-best-practices/" target="_blank">Sign-in form best practices</a></small>
</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: false,
width: '100%',
height: '100%',
// margin: 100,
transition: 'slide',
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>