APP UI 結(jié)構(gòu):注冊&登錄

8 評論 20417 瀏覽 193 收藏 17 分鐘

注冊登錄一直是應用中必不可少的一環(huán),用戶打開應用可能第一步就是登錄頁面,這相當于一款應用的臉面,也是用戶使用產(chǎn)品的源頭。

今天的主題是和注冊登錄相關(guān)的內(nèi)容,相對比較簡單,大家應該都很熟悉。

注冊登錄一直是應用中必不可少的一環(huán),用戶打開應用可能第一步就是登錄頁面,這相當于一款應用的臉面,也是用戶使用產(chǎn)品的源頭。當然也是因為不常被用到所以更最容易被忽視,它作為一項基礎(chǔ)功能,使用場景一般是用戶初次使用應用或者退出登錄,又或是大版本更新和登錄過期才會使用到。

注冊登錄的意義就在于給用戶獨有的個人中心,包括數(shù)據(jù)的同步,或是用戶注冊后會通過用戶已完善的資料進行相關(guān)的內(nèi)容推薦。

登錄相對而言屬于高頻次的操作,注冊、修改密碼等屬于相對低頻次的操作,但是他們都會關(guān)聯(lián)到產(chǎn)品內(nèi)的個人資料和設(shè)置模塊。幾乎所有的社交應用都是需要注冊登錄的,用戶擁有了個人賬號才能繼續(xù)使用產(chǎn)品。

當然也有一些系統(tǒng)的應用是不需要注冊登錄就可以使用的,比如:系統(tǒng)自帶的計算器、日歷、天氣等或是一些第三方的輕應用,這里就不多贅述了,下面主要還是說說需要用到注冊登錄功能的情況。

還是先來看一下整體結(jié)構(gòu):

(以下圖片來源于應用截圖,僅作為學習交流使用)

一、注冊登錄的方式

1. 只使用第三方賬號注冊登錄

這種方式比較少但是無疑是最快捷的方式,相信大家平時應該用這種方式也比較多,因為可以避免使用手機注冊帶來的繁瑣步驟,可以節(jié)約很多時間。

你在第三方應用中進行授權(quán)后產(chǎn)品會直接調(diào)用接口,生成ID登錄后,你的頭像、昵稱等個人信息甚至可能同時會獲取你的好友列表,讓你知道還有哪些好友也在使用產(chǎn)品,可以有效地減少對產(chǎn)品的陌生感,同時也便于應用在第三方中進行分享。

當然這種方式對產(chǎn)品也很有利,因為相信很多用戶在不了解產(chǎn)品的情況下,用戶可能只是想初步了解一下產(chǎn)品,但是又不想進行手機注冊那么麻煩,所以就直接使用第三方進行注冊吧,待進入應用初步使用了解后,再通過產(chǎn)品的用戶引導(比如:紅點標記或是局部引導等)功能再進行手機號/郵箱/微信/微博等賬號的綁定,這樣做對新用戶的產(chǎn)生有積極作用。

我遇到過當已經(jīng)使用了第三方應用注冊登錄了之后,會立即出現(xiàn)讓用戶綁定手機號的頁面,這樣做是想快速產(chǎn)生新用戶,出發(fā)點是好的,但是我覺得用戶在不了解產(chǎn)品的情況下,綁定手機號的可能性很低。

所以最好可以在綁定手機號頁面有“跳過”功能,給用戶選擇的余地,不要強制用戶,待初步了解產(chǎn)品后再通過引導進行綁定,這樣做最佳。

2. 只使用手機號注冊登錄

使用手機號獲取驗證碼是目前最常用的注冊登錄方式,這種方式的優(yōu)勢不必多說,相信大家都很熟悉流程,通過發(fā)送短信獲取驗證碼在60-90秒內(nèi)進行注冊登錄,這么做是為了確認用戶擁有該手機號的使用權(quán)。手機號+密碼是用戶常用的方式,而手機號+驗證碼是比較簡便的方式。

這里注意一點的是在輸入手機號后,為了讓用戶查看是否輸入正確,建議手機號顯示樣式為3-4-4模式(比如:156 5555 5555),這些都是細微之處,雖然無關(guān)大雅,但是可以看出一個產(chǎn)品的用心之處,比如:下圖可以對比一下,明顯圖二更優(yōu)。

手機號也是商家進行用戶維護的有效手段,畢竟手機都是隨身攜帶,可以在節(jié)假日發(fā)送祝?;蚴谴黉N短信,也可以在你長期未使用產(chǎn)品,進行短信提示,避免你將產(chǎn)品遺忘,但是過度的短信轟炸則會讓用戶感到反感。

另外使用手機號注冊登錄,需要做一個判斷,是否是第一次登錄,是的話就跳轉(zhuǎn)引導頁,不是的話就跳轉(zhuǎn)至首頁。

這里插一句題外話,你們有沒有遇到過在已經(jīng)注冊成功后,但是還需要重新輸入賬號密碼登錄的情況,其實這種做法個人覺得是比較多余的,可能2次輸入賬號密碼可以加強用戶的記憶。但是可能很多人用手機號注冊都是用的一個同密碼,因為現(xiàn)在的應用可選擇的余地實在是太多了,如果每個應用都使用不同的密碼可能很難記得住。

3. 使用手機號/第三方賬號注冊登錄

這種樣式是最常見的,也是上面兩種樣式的結(jié)合,這種樣式給用戶留有選擇的余地,自愿使用手機號或是第三方。但是一般這樣的組合方式多數(shù)是希望用戶使用手機號注冊,所以手機注冊登錄比較突出,第三方注冊會置于頁面底部,相對弱化。

但是還有一類是希望用戶使用第三方登錄,弱化手機號注冊登錄的情況。BAT旗下的眾多應用,會使用一個賬號或是進行賬號關(guān)聯(lián),比如:阿里旗下的應用閑魚、菜鳥裹裹等,登錄時為了用戶數(shù)據(jù)之間連接,會推薦用戶使用淘寶賬號進行登錄,從而弱化了手機號注冊登錄,這是出于產(chǎn)品屬性或是戰(zhàn)略需求考慮,無可厚非。

4. 使用郵箱注冊登錄

使用郵箱進行注冊登錄也是比較常用的方式,多數(shù)用于pc端,郵箱容易記憶,便于頻繁使用的產(chǎn)品,注冊后郵箱會收到驗證鏈接,驗證成功后會自動跳轉(zhuǎn)進入該網(wǎng)頁首頁。因為web端屏幕較大,還是和移動端有點差別,需要填寫的表單可能也會比較多,關(guān)于表單的設(shè)計可以參照我早期的文章:《進行表單設(shè)計需要注意這十點》

當然移動端也有使用郵箱注冊的,可能是國外的應用居多,比如:facebook、twitter、dribbble…或是國內(nèi)的應用同時擁有網(wǎng)頁和移動端,可以將用戶數(shù)據(jù)進行同步。

5. 先體驗后注冊登錄

這種方式也很多見,一般多為閱讀類、游戲類或是電商類產(chǎn)品,用戶多為游客狀態(tài),可能只是進來逛逛,可能暫時還沒有使用到添加、收藏、關(guān)注、評論、購買等功能,如果使用這些功能就必須要進行注冊登錄了,注意在完成注冊登錄后記得頁面要回到之前瀏覽的頁面,而不是回到首頁。

6. 短信注冊

比較少見的一種方式,通過編輯短信發(fā)送至XXX后,可獲取賬號和密碼。這種方式屬于早期的一種方式,現(xiàn)在基本用不到了,就不多說了。

二、注冊登錄頁面要點

1. 簡潔風 VS logo+輸入框

iOS 11更新帶動了新的設(shè)計趨勢,大標題+留白被廣泛使用,注冊登錄也不例外,現(xiàn)在很多產(chǎn)品都使用相對簡潔的設(shè)計(下面左圖),僅使用大標題和必要的線框和提示語,讓用戶只聚焦注冊登錄本身,去除多余的干擾元素,可以節(jié)省用戶的時間。

相對早期的設(shè)計手法是在頁面中加入logo(下面右圖),好處是可以進一步強化用戶對產(chǎn)品品牌的記憶點。兩種方式各有優(yōu)點,沒有對錯,產(chǎn)品可以酌情使用。

2. 分步驟注冊登錄

現(xiàn)在有很多應用是采用分步驟進行注冊的,比如先輸入手機號,點擊“下一步”的同時,系統(tǒng)查詢該手機號是否可以注冊,通過的話則進入輸入驗證碼頁面,這樣做的好處是可以及時反饋給用戶,避免了用戶在輸完手機號和驗證碼之后出現(xiàn)錯誤toast的情況。

需要注意的是步驟不宜過多,建議3步以內(nèi),如果你的產(chǎn)品對用戶來說不是非用不可,可能會有很多用戶會放棄注冊。

3. 注冊登錄合二為一

這種方式和分步驟注冊類似,將注冊和登錄合到一起,不管你是否有注冊,只要輸入手機號再填寫驗證碼,成功后即可使用產(chǎn)品,比如:小黃車就是使用這一方式。

4. 輸入框提示語

輸入框提示語是必不可少的,措詞需要簡潔,大部分的做法是點擊輸入框后提示語自動消失,這樣做也是可以,畢竟需要填寫的選項不是很多,用戶不易忘記。當然更好的做法是保留提示語,比如:星巴克的登錄頁面,在點擊輸入框后,提示語會上移,依舊保留,只是這樣的開發(fā)成本可能會稍大一點。

5. 忘記密碼

忘記密碼的功能一般都是放在登錄頁面,因為兩者有較強的關(guān)聯(lián)性。使用忘記密碼功能一般是通過手機號發(fā)送驗證碼,驗證通過后再進行新密碼的設(shè)置。如果起初是用郵箱注冊登錄的話,就要到郵箱中進行驗證,驗證通過后再進行新密碼的設(shè)置。

6. toast提示

這里的toast提示一般用于有錯誤發(fā)生的情況下,比如:賬號不存在、賬號已被占用、密碼錯誤、驗證碼錯誤等,及時的反饋給用戶注冊登錄不成功的地方在哪里,以免用戶摸不著頭腦,憤而離開應用。

三、其他要點

1. 安全碼

出于安全考慮,有些應用會讓用戶輸入圖形驗證碼、字符驗證碼、旋轉(zhuǎn)圖片、滑動驗證等方式,目的是確認是人為注冊而非軟件惡意注冊。

2. 用戶協(xié)議

用戶協(xié)議看似非常的不起眼,用戶也很少會去點擊查看,出現(xiàn)在注冊頁面的情況居多。早期一般是默認被選中狀態(tài)或是點擊注冊即視為同意協(xié)議條款(圖一),用戶填完賬戶密碼之后點擊注冊就完成了。

但是前去年支付寶默認用戶協(xié)議被選中導致的一系列新聞提醒我們,用戶協(xié)議最好需要用戶自己去點擊確認,現(xiàn)在很多應用也開始這么做,在沒有勾選用戶協(xié)議之前,“注冊”button是無法點擊的(圖二)。

3. 密碼眼睛開合

出于使用場景考慮,比如:在戶外或是注冊登錄時身邊有人,為了有效保護用戶的密碼隱私,可在輸入密碼時關(guān)閉眼睛icon,只顯示密碼點。開啟眼睛icon時是為了讓用戶清楚的看見自己的密碼,避免密碼輸入錯誤。

4. 一鍵刪除賬戶名/密碼

這個功能是給用戶在注冊登錄頁面輸入有誤或是切換賬戶時使用,可以有效減少用戶的點擊次數(shù),提升用戶體驗。

5. 保留賬戶名數(shù)據(jù)

在用戶曾登錄過的情況下,應該保留用戶的賬戶名數(shù)據(jù),這樣用戶重新登錄時只需填寫密碼或驗證碼即可。當然,用戶如果想重新輸入賬戶名,一鍵刪除數(shù)據(jù)的功能也顯得很有必要。

還有一點是多賬戶之間的登錄切換,在登錄時可以選擇多個賬號,這個功能在to C類應用比較少,一般是to B類應用可能會用到,因為企業(yè)可能會擁有多個賬號,這個功能就會顯得很有必要。

6. 賬號后綴關(guān)聯(lián)

這種針對使用郵箱注冊,比如說在用戶填寫賬戶名輸入@的同時,關(guān)聯(lián)出@qq.com、@163.com等,可以減少用戶的輸入,體驗也會更好。

7. 去除雞肋操作

在注冊登錄時也會有一些比較多余的操作,比如:二次確認密碼、完善個人資料等,這些操作最好是放置在個人中心或是設(shè)置里讓用戶自行填寫,在注冊登錄頁面只保留必須填寫的內(nèi)容。

總結(jié)

綜上所述,注冊登錄看似是很簡單的頁面布局,并且容易忽視,但是它的地位是不可忽視的,其中的交互方式和細微之處還需要我們多多考慮,不同的產(chǎn)品需要根據(jù)自己的屬性來選擇符合自己的方式。

如有遺漏,歡迎大家留言補充,一起交流~

 

作者:EasonZhang,公眾號:Eason張UED(ID:EasonZhangUED)

本文由 @EasonZhang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 二次確認密碼屬于雞肋操作么

    來自陜西 回復
    1. 目前來看是比較雞肋的,輸錯密碼的場景太少,而且密碼錯誤可以使用驗證碼糾正

      來自廣東 回復
  2. 寫的很全面,希望作者多分享給大家,謝謝。

    回復
  3. 很好的文章,受教了

    回復
  4. 話說為什么輸入錯密碼都是提示,賬號或者密碼錯誤? 而不是密碼錯誤?

    來自廣東 回復
    1. 一是可以提醒用戶都查詢一遍,二是可以防止用戶進行猜測錄入。

      來自北京 回復
    2. 當然現(xiàn)在也有采用 賬號不存在等提示

      來自北京 回復
  5. 一定不要把火熱的交互設(shè)計,言過其神,應用就是解決問題,挖掘最深就是業(yè)務(wù)層面了,科幻電影里的顯示屏,仔細分析一下就會發(fā)現(xiàn),并不好用,常規(guī)中的微創(chuàng)新就很不錯!總之所有互聯(lián)網(wǎng)核心就是解決問題!交互不是第一位甚至不是第三位

    回復