出色的登錄頁面設計的10個技巧【杭州新易設計坊】

時間：2023-09-22 21:30:01 | 來源：網站運營

時間：2023-09-22 21:30:01 來源：網站運營

出色的登錄頁面設計的10個技巧【杭州新易設計坊】：



【復試錄取必備】2021年新易設計坊寒假精品作品集！10多年經驗設計總監(jiān)級老師授課

大號網頁設計是網站用戶體驗之旅中至關重要的一部分。良好的設計有助于吸引訪問者訪問您的網站，并將新訪問者轉化為潛在客戶。它還為回頭用戶提供了一種輕松的方法來登錄您的網站。


您希望它無縫，吸引人并且易于使用。

我們想提供幫助。讓我們逐一介紹設計良好的登錄頁面設計的最佳技巧和最佳實踐，并為您提供許多激發(fā)靈感的優(yōu)秀范例。

10個登錄頁面設計技巧和示例

在徽標頁面設計中，我們同時包括了您應該做和不應該做的事情。

并非所有提示和示例都適用于您的網站。訣竅是選擇適合您的東西。

提示1.使其明顯

您不想讓您的用戶四處尋找登錄區(qū)域。他們看得越久，他們就會越沮喪。他們越沮喪，最終登錄的可能性就越小。

一個很好的例子是Gmail的登錄頁面。

Gmail的登錄頁面

一切都在前面和中間。您確切地知道需要登錄的地方以及要輸入的內容，如果您沒有Gmail帳戶，則可以通過單擊“創(chuàng)建帳戶”輕松地創(chuàng)建一項權利。使您的登錄區(qū)域顯而易見，以使您的用戶盡可能容易地登錄。

提示2.使用社交登錄

社交登錄正迅速成為用戶登錄其Web帳戶的方式。實際上，有88％的用戶說他們使用過社交登錄（Source），而有86％的用戶說他們因不得不在網站上創(chuàng)建新帳戶而感到困擾（Source）。并且有充分的理由。為不同的網站創(chuàng)建多個帳戶既耗時又令人困惑。很難記住一堆不同的密碼和用戶名。 社交登錄通過允許用戶使用來自其社交媒體帳戶之一的信息來創(chuàng)建帳戶，從而消除了所有這些情況。這是Medium的一個很好的例子。博客平臺允許用戶使用Twitter，F(xiàn)acebook或Google登錄。

中號的登錄頁面。

有些只提供一個社交平臺，例如桌上型RPG商店DM的Guild：

DM的公會的登錄頁面。

甚至還有一些社交媒體網站，允許您使用社交登錄名：

Pinterest的登錄屏幕

社交登錄為您的用戶創(chuàng)建了一個簡單直觀的登錄頁面設計。 想要在您的收件箱中發(fā)布更多類似這樣的帖子嗎？訂閱我們的每周摘要。

提示3：吻（保持簡單，愚蠢）

對于您的用戶，您的登錄頁面應該簡單明了。 例如，查看Instagram的登錄頁面設計：

Instagram重新設計的登錄頁面。

兩個輸入字段以及用于登錄Facebook的選項。它簡單，有效，并且為用戶提供了很好的體驗。因此，在創(chuàng)建登錄頁面設計時，請記住要親吻：保持簡單，愚蠢。

提示4.區(qū)分注冊和登錄

如果用戶訪問您的網站進行注冊（或者他們要返回登錄名），則希望他們清楚該去哪里。 通過使您的登錄字段與注冊字段不同來幫助他們。一個很好的例子是Facebook。

Facebook的登錄頁面。

請注意注冊字段的位置是前面和中間。新用戶可以在頁面上進行注冊，而回頭用戶可以使用自上而上的字段進行登錄?？纯础暗卿洝辈糠质侨绾斡蒙钏{色邊框標記的，與頁面的其余部分完全分開嗎？使用不同的顏色，布局和復制是使登錄字段與注冊字段不同的簡單方法。它不必很復雜。這是Dribbble的一個示例，該示例進行了一次簡單的更改，使所有的更改有所不同。

Dribbble的登錄頁面。

同樣，使用邊框會產生細微但有用的區(qū)別。

提示5.跳過用戶名

讓您的用戶不必再為想起您的網站而煩惱，并且記住您的網站用戶名。而是讓他們使用其電子郵件地址或電話號碼進行注冊。 您的用戶是否真的想提供一個用戶名？還是在注冊和登錄您的網站的過程中，這只是他們的另一項煩惱？LinkedIn為用戶提供了使用他們的電話號碼或電子郵件地址登錄的機會。

LinkedIn的登錄頁面。

這也很重要，因為用戶可能會忘記他們用來登錄到您的網站的電子郵件地址。給他們使用電話號碼的選項，他們將有一種簡單的登錄方法。

提示6.向他們顯示密碼

為用戶提供輸入時可以查看其密碼的選項，可確保他們可以在第一次嘗試時輕松登錄到您的網站，而不必進行很多錯別字的嘗試。 WordPress允許用戶在輸入密碼時看到他們的密碼。所有用戶所要做的就是單擊密碼字段中的眼睛圖標，他們將能夠看到它。

WordPress登錄頁面。

索尼在Playstation Network登錄頁面設計上也是如此。

索尼PlayStation網絡登錄頁面。

或者，您可以包括一個“ Show Password”（顯示密碼）復選框，該復選框可以實現(xiàn)相同的目標。

提示7.記住您的用戶

除了返回先前登錄的網站以發(fā)現(xiàn)需要再次登錄之外，還有什么比這更令人沮喪的嗎？當您的用戶返回您的網站時，請確保他們已經登錄或為他們預先填充了某些字段以便于登錄。 Google在這方面做得很好。每當用戶需要重新登錄YouTube，Gmail，Google云端硬盤或任何其他Google品牌時，都會記住他們的信息，從而可以輕松進行登錄。

Gmail的“選擇帳戶”屏幕。

Ally Bank允許用戶選中“保存用戶名”框，以便該網站在到達網站后立即填充其用戶名。這是記住用戶的另一種好方法。

盟友銀行的登錄頁面。

秘訣8.輕松恢復密碼

有時您的用戶會忘記他們的登錄信息。發(fā)生這種情況時，請使恢復過程盡可能輕松。 大通銀行的底部有一個按鈕，以防用戶忘記用戶名和密碼。

大通銀行的登錄頁面。

伊利諾伊州收費公路的I-Pass網站還包括兩個單獨的鏈接，供用戶忘記用戶名或密碼時使用。

伊利諾伊州收費公路的I-Pass登錄頁面。

Evernote對他們的密碼做了一些巧妙的處理，并讓用戶知道他們多久之前更改了密碼。

Evernote的登錄頁面。

這一小舉動可以緩和用戶的記憶，并幫助他們記住密碼。 如果用戶忘記了登錄信息，則使用戶知道應該去哪里。您將使煩惱的情況減少煩惱，并且您的用戶會為此而愛上您。

提示9.讓用戶知道其大寫鎖定處于打開狀態(tài)

我們到過那里：令人沮喪地鍵入并重新輸入密碼無濟于事，只是發(fā)現(xiàn)您在整個過程中都保持了大寫鎖定。 通過警告您的用戶在操作時鎖定其大寫，可以防止這種情況的發(fā)生。WordPress就是一個很好的例子。打開用戶的大寫鎖定時，會出現(xiàn)一個紅色的小警告符號。

WordPress會在您嘗試登錄時通知您何時按下了大寫鎖定

Microsoft的Edge瀏覽器還使用戶可以選擇在鍵入時打開大寫鎖定時打開通知。

資料來源：http://discourse.wicg.io

提示10.不使用密碼登錄

讓您的移動用戶無需記住或輸入密碼即可登錄。例如，查爾斯·施瓦布銀行（Charles Schwab Bank）允許其用戶使用手機上的指紋掃描儀登錄。

Charles Schwab Bank的登錄頁面

往期精彩內容



20清華大學新易第二位清華第一 2020年北理工第一 【第一名】20杭州化工新易連續(xù)兩年第一 20年經驗分享更新中…… 19清華大學 【應屆】19清華大學 19中央美術學院 19杭州理工大學 19杭州大學 【初試第四】19浙江大學 【第一名】19杭州化工大學 杭州大學 浙江大學 杭州理工大學 【第一】19河海大學 【雙胞胎均錄取】19浙江工業(yè)大學 19第一名杭州科技大學 杭州理工大學設計學博士經驗分享 2018杭州理工大學設計學手繪最高分 2018杭州理工大學（工業(yè)設計工程史論第二） 2018同濟大學 2018東華大學（3個月考研成功） 2018杭州美術學院 2018杭州理工大學 2018杭州大學 2018浙江工業(yè)大學初試第一 2018華東理工大學2018河海大學2018浙江工業(yè)大學 杭州工業(yè)大學第二名華南理工大學初試第一名成功之路 杭州理工大學 杭州理工大學 杭州理工大學設計學395分學霸經驗分享 浙江大學 杭州理工大學 同濟大學西北工業(yè)大學 NCDC學員北理2017年135分考研快題-曲別針回憶稿 18年經驗分享陸續(xù)更新中……有一個地方只有我們知道-新易設計坊 考研還是出國？無問對錯，適合自己就是最好的選擇！ 【效率翻倍】新易考研自習室來啦！全國首家，始于2014年 【超干貨】暑假結束你的工業(yè)設計考研快題應該畫成這樣



2020杭州新易設計坊暑假設計手繪集訓營招生簡章正式發(fā)布！

暑假設計手繪-前3天就可以畫成這樣，你敢相信嗎？ 100張學生作品|在新易暑假設計手繪5天你就可以達到這個水平 【精華小版面】暑假設計手繪-前10天就可以達到這樣的水平！ 暑假課程仿生設計你一定要看 手繪課程2天教學成果2018 馬克筆原圖教你如何上色 設計手繪課程第6天作品2017 5天你就可以畫成這樣2018 第2天竟然達到這樣2018 暑假手繪課程·第1天就畫成這樣，就說你怕不怕！ 【必備】騰訊課堂工業(yè)設計手繪基礎網課來啦！ 【純干貨】這樣的手繪讓我毫無抗拒！ 寒假你的手繪應該畫成這樣！寒假課程學生作品展示 NCDC學員北理2017年135分考研快題-曲別針回憶稿 【純干貨】暑假結束你的考研版面要畫成這樣！ 哮喘吸入器·產品設計手繪演示視頻 考前70天手繪快題要畫到這個水平！十一課程成果展 20分鐘教你學會彩鉛工具表達技巧【純干貨】 遠離PPT排版，你只差這篇排版攻略 手繪一直沒有進步，那是你不懂“刻意練習”法則 【手繪干貨】彩鉛工具表達技巧-簡單形體教學示范




20年暑假精品作品集課程正式發(fā)布！
【上百個網站全拿走】學工業(yè)設計這些好用的工具你一定得知道 【純干貨】如何準備一份優(yōu)秀的工業(yè)設計作品集（上） 如何準備一份優(yōu)秀的工業(yè)設計作品集（下） 2018年新易設計坊暑假精品作品集課程正式發(fā)布！ 地表最強|工業(yè)設計留學攻略 國外學生作品集 | 作品集分享——值得一看的草圖與分析部分 產品設計十部曲1—如何尋找“設計點”？ 產品設計十部曲2——產品設計“前期分析”需要做什么？ 產品設計十部曲3—產品設計市場調研怎么做？ 去中央美術學院看畢設 【精品作品集成果展】這樣的作品集復試錄取率高達96% 有一個地方只有我們知道-新易設計坊 清華美院本科生畢業(yè)展！



（點擊圖片試試）



（點擊圖片試試）



（點擊圖片試試）






新易設計坊官方微博