登陸頁面——請不要這麼設計

本文翻譯自： http://bradfrost.com/blog/pos...

原文做者：Brad Frost

譯文原地址：https://weyunx.com/2019/03/17...

隨着 1Password 以及 Chrome 的密碼管理愈來愈普及，有些網站的登陸頁面的弊端就顯現出來了，本文就來總結一下有哪些很差的設計，同時來看一下如何改進。

首先網站開發人員須要明白的是用戶是怎樣去登陸他們的網站，而後基本的一個原則就是簡單、直接、不突兀以及適配密碼管理器。

讓咱們先看幾個例子吧：

不要這麼作

下面是幾個反例，我認爲須要避免的：

不要彈出登陸頁面

Hertz 以及它一系列的網站使用的是彈出窗口或彈出層來跳轉登陸頁面，這樣會有以下兩個問題：

• 額外的登陸步驟 - 「1.點擊菜單按鈕，2.選擇登陸，3.填寫信息」。以往的用戶能夠直接經過搜索、歷史記錄、書籤、密碼管理器等來直接跳轉，進而填寫登陸信息，只須要 2 步。
• 登陸頁面沒有連接 - 這對客服來講是致命的，由於他們須要提供一系列的操做介紹來指引用戶如何登陸，這比直接提供一個登陸連接麻煩的多。同時這也讓密碼管理器沒法自動填充，畢竟登陸頁面是隱藏的。

不要隱藏輸入項

Delta 官網的登陸頁面將 「Last Name」 輸入項給隱藏了，緣由應該是爲了讓頁面看起來更簡潔。但問題是這個輸入項是必輸的，而因它的隱藏又致使了密碼管理器不能自動填充。

MacOS 的登陸也隱藏了密碼輸入項來簡化 UI，這多是爲了鼓勵使用 TouchID，可是這一樣可能會給用戶帶來一些使用上的困惑。

不要異想天開

這種使用郵箱驗證碼登陸的方式前後在 Slack 、Notion 上出現。這種方式完美的避免了忘記密碼的煩惱，可是：

• 這種方式及其愚蠢 - 「一、輸入郵箱。二、打開郵箱應用。三、打開收件箱。四、尋找郵件。五、打開郵件。六、拷貝密碼。七、回到登陸頁面。八、粘貼密碼。九、登陸。」可見步驟之繁瑣。
• 不適配密碼管理器
• 強制用戶去適應新的習慣 - 用戶長久以來經過潛移默化的形式來學習例如登陸、導航、退出等操做。不是說不該該去創新，可是咱們須要明白用戶進入咱們的網站或產品的時候，他們對網絡操做已經有了本身的一個認知和習慣，咱們不能自做聰明，讓他們去熟悉新的流程，何況這操做流程更繁瑣了。

不要將登陸拆分爲多個頁面

Shopify 有個煩人的操做就是會把登陸頁面分紅兩頁。固然，本意是好的：他們想讓頁面更簡潔，可是這種方式其實更適合特定的場景，好比電商的某些頁面，像帳單信息、物流信息、配送地址和信用卡信息這些，顯然若是用在登陸頁面上就有些用力過猛了：

• 須要額外的步驟來登陸 - 一樣的三個輸入項的登陸頁面，結果用戶須要三個頁面才能完成，顯然畫蛇添足。
• 不適配密碼管理器

這麼作

因此，好的登陸頁面應該是什麼樣的呢？我認爲經典的登陸頁面就是最好的，如：

以及:

你看，簡單明瞭不花哨，完美適配密碼管理器。

OK，讓咱們看一下結論：

• 一個能夠直接跳轉的登陸頁面
• 展開全部的輸入項
• 一個頁面搞定
• 不要異想天開，經典就好