【Chrome web.dev Live 2020總結】第3天第12集：登錄最佳實踐

label

使用label有兩個主要原因

label 有 for 屬性，和input的id相同的時候可以將二者進行綁定，這樣點擊label的時候會自動聚焦到綁定好的input上，使用很方便；

對于無障礙訪問來說也很重要，因為點擊label的時候可以自動發聲，殘障人士也可以順利的訪問我們的頁面

placeholder

placeholder可以使用，但是不能替代label的作用，因為用戶一旦開始輸入，就無法看到placeholder的內容了，很容易就會忘記輸入框的內容應該是什么

如何擺放

根據谷歌AI的統計，將label放在輸入框的上面會加快瀏覽者的瀏覽速度

而且也可以保證輸入框長度的一致和完整性

重復輸入

有些網站會要求用戶重復輸入郵箱、電話、密碼等信息，確實可以減少部分用戶出錯的幾率，但是會增加所有用戶的工作，并且會增加用戶放棄注冊的概率。

允許用戶驗證郵箱并提供簡單的密碼重置方式就好了。

button

理由

button 提供了極其便捷的表單提交方式，并且樣式也很容易修改，完全沒有任何使用其他標簽假冒button的理由哇！

命名

使用用戶可以理解的命名，比如sign in 或者 create account，不要用go submit等，會給人造成很大的困擾

防抖

表單提交肯定不能連續提交多次，然而很多用戶都會習慣性的連續點擊多次按鈕，這個時候一定要做好按鈕的防抖處理，避免表單的重復提交

合理提示

用戶有部分內容沒有填寫好的時候，不要對按鈕不響應而已，要給出合理的錯誤提示，告知用戶還要做什么。

而且，大部分判斷無需js處理，html自帶了很多輸入框的屬性，使用就好了：

image.png

合理的布局

我們都知道，默認的html標簽樣式很丑，在移動端顯示的也很小，一定要將表單調整到用戶在pc和手機端都能夠正常使用的程度。

attributes

有一些屬性是我們需要特別注意使用的：

autofocus

type=‘password’|‘email’|‘tel’

inputmode=‘numeric’

合理的name（比如登錄和注冊表單的password輸入框name就不能相同）

required

aria-describedby

注意鍵盤不要遮擋按鈕

解決防范有很多，比如說修改布局，或者像亞馬遜、eBay一樣，每頁只有一個輸入框：

增加用戶行為的分析

埋點信息上報可以有效分析用戶的行為，比如何時放棄登錄，何時點擊登錄等等。

總結：

總之，老哥今天的重點在于用戶體驗至上，我們一定要把頁面性能、合理布局、使用便捷程度、無障礙訪問、減少用戶操作、減少可能引起疑惑的點、重置和用戶隱私等入口放置在顯眼的位置等細節問題摳好。

登錄

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。