登錄注冊(cè)幾乎是每個(gè)軟件必備的功能，為了方便用戶(hù)，現(xiàn)在比較流行的方式是第三方授權(quán)，但是對(duì)于軟件來(lái)講是有弊端的，這樣會(huì)依存于第三方軟件，一旦第三方軟件消失了，那么用戶(hù)將不能再登錄，而且軟件也不能獲取用戶(hù)更多的信息。所以，登錄注冊(cè)是個(gè)繞不過(guò)去的坑，那么，我們就來(lái)談?wù)刾c端怎么設(shè)計(jì)登錄注冊(cè)，需要注意哪些問(wèn)題。

1. 輸入框

1.1 標(biāo)簽對(duì)齊方式

主要有頂對(duì)齊、左對(duì)齊、右對(duì)齊、輸入框內(nèi)的標(biāo)簽，每種對(duì)其都有其優(yōu)缺點(diǎn)，下面集中討論。

頂對(duì)齊，主要形式如下：

頂對(duì)齊標(biāo)簽和輸入框非常近，用戶(hù)處理起來(lái)不費(fèi)勁，視覺(jué)的瀏覽軌跡只需要向下就可以，完成路徑清晰。因?yàn)闃?biāo)簽單獨(dú)占據(jù)一行，所以，標(biāo)簽收縮自由，對(duì)于長(zhǎng)標(biāo)簽或者跨文化標(biāo)簽特別有用。由于橫向控件比較大，可以采用擴(kuò)展成組合標(biāo)簽，如下：

但是，頂對(duì)齊標(biāo)簽占用了較多的垂直空間，對(duì)于垂直空間有限的，慎用。因?yàn)轫攲?duì)齊標(biāo)簽都是垂直分布的，所以，一定要設(shè)計(jì)好垂直距離，太多太少，都會(huì)影響用戶(hù)瀏覽。一般而言，輸入框的50%-75%，作為間距最好。

經(jīng)調(diào)研，頂對(duì)齊要比右對(duì)齊快2倍，比左對(duì)齊快10倍。但是這個(gè)數(shù)據(jù)是基于人們普遍了解的表單，如果對(duì)于一個(gè)陌生的表單，還有待調(diào)查。

右對(duì)齊，主要形式如下：

標(biāo)簽的文字變化較大時(shí)，就會(huì)產(chǎn)生靈活性問(wèn)題，甚至有的標(biāo)簽需要用兩行文字闡述，就會(huì)使閱讀起來(lái)更加困難。但是如果垂直空間有限，右對(duì)齊標(biāo)簽是個(gè)不錯(cuò)選擇。

左對(duì)齊，主要形式如下：

如果人們不熟悉要搜集的數(shù)據(jù)，左對(duì)齊方便人們?yōu)g覽標(biāo)簽，不受輸入框的打斷。但是如果標(biāo)簽的字?jǐn)?shù)相差很大，就會(huì)增加標(biāo)簽和輸入框的距離，就會(huì)造成人們來(lái)回瀏覽標(biāo)簽和輸入框，尋找對(duì)應(yīng)關(guān)系。左對(duì)齊標(biāo)簽需要完成的時(shí)間最長(zhǎng)，如果需要人們放慢填寫(xiě)，仔細(xì)考慮輸入，左標(biāo)簽是個(gè)不錯(cuò)選擇。

輸入框內(nèi)的標(biāo)簽，主要形式如下：

輸入框內(nèi)標(biāo)簽有兩種形式，一種是在輸入框輸入時(shí)，標(biāo)簽不消失，另一種是消失。對(duì)于不消失的，標(biāo)簽字?jǐn)?shù)就有限制，目前使用比較多的就是在登錄頁(yè)面，用戶(hù)名和密碼字?jǐn)?shù)都比較少，如果對(duì)于一個(gè)普通的表單，字?jǐn)?shù)多余5個(gè)字，使用就會(huì)比較麻煩。對(duì)于消失的標(biāo)簽，節(jié)省了屏幕空間，但是在交互的時(shí)候，也會(huì)有問(wèn)題，點(diǎn)擊之后，標(biāo)簽是否能消失，如果不消失，就會(huì)作為答案，同時(shí)還需要明確區(qū)分標(biāo)簽和數(shù)據(jù)，否則會(huì)讓人誤認(rèn)為是提供的答案。

建議：

1. 如果需要減少填寫(xiě)時(shí)間，標(biāo)簽需要靈活多變，可以使用頂對(duì)齊的形式。
2. 如果需要減少填寫(xiě)時(shí)間，但是垂直空間有限，可以采用右對(duì)齊的形式。
3. 如果人們需要需要瀏覽標(biāo)簽，知道需要回答多少問(wèn)題，可采用左對(duì)齊的形式。
4. 如果標(biāo)簽特別短，空間又有限，可采用輸入框內(nèi)標(biāo)簽。

1.2 刪除控件

這個(gè)比較簡(jiǎn)單，就是帶有刪除控件的輸入框，和不帶的。

帶刪除控件的輸入框

用戶(hù)輸入時(shí)，刪除控件自動(dòng)出現(xiàn)，可以幫助用戶(hù)快速刪除所有內(nèi)容，但是隨著刪除控件的存在，用戶(hù)輸入的字符數(shù)就會(huì)被限制，如果不限制，就會(huì)出現(xiàn)字和控件重疊。

不帶刪除控件的輸入框

沒(méi)有刪除控件，界面看著更簡(jiǎn)潔，用戶(hù)可以長(zhǎng)按電腦的刪除鍵，也可以全選，按一下刪除鍵就可以，因?yàn)椴僮鞒杀径急容^低，所以刪除控件就沒(méi)有那么重要。

建議：

1. 如果輸入框長(zhǎng)度比較長(zhǎng)，輸入的內(nèi)容比較多，建議帶上刪除空間。
2. 如果輸入框長(zhǎng)度小，隨著不同分辨率，輸入框還需要變化，輸入內(nèi)容比較簡(jiǎn)單，可以沒(méi)有刪除控件。

2、錯(cuò)誤提示

登錄的錯(cuò)誤提示已經(jīng)約定俗成了，通常都放在標(biāo)題和輸入框之間。

主要是輸入框比較少，在一個(gè)固定位置反饋，可以讓用戶(hù)快速獲取消息。

而注冊(cè)時(shí)，通常采用實(shí)時(shí)驗(yàn)證的方式，如果用戶(hù)都填完了，統(tǒng)一驗(yàn)證，不但時(shí)間慢，最后還需要用戶(hù)從頭開(kāi)始檢查哪出錯(cuò)了，降低了效率。

在總結(jié)錯(cuò)誤提示的時(shí)候，注意到了一個(gè)問(wèn)題，就是在登錄的時(shí)候，你填寫(xiě)完用戶(hù)名和密碼，給出的反饋是“用戶(hù)名或密碼錯(cuò)誤”，當(dāng)我看到這個(gè)提示的時(shí)候，第一個(gè)想到的就是，我一共就填寫(xiě)了兩項(xiàng)內(nèi)容，你告訴我用戶(hù)名或密碼錯(cuò)誤，你讓我怎么選擇，太逆天了，后來(lái)想了想這個(gè)邏輯，之所以這么做是可以覆蓋很多可能性：用戶(hù)名對(duì)了，密碼錯(cuò)了；用戶(hù)名錯(cuò)了，但是也注冊(cè)過(guò)，所以密碼不匹配。但是這樣反饋太反人類(lèi)了，所以，我想出一種解決辦法，歡迎大家來(lái)噴。第一次、第二次提示：密碼錯(cuò)誤，第三次提示：請(qǐng)先核對(duì)用戶(hù)名，在輸入密碼，第五次就提示：密碼錯(cuò)誤，請(qǐng)嘗試忘記密碼。根據(jù)不同的輸入次數(shù)，給出不同的反饋，比較符合情景。

3、光標(biāo)位置

光標(biāo)是人們?nèi)菀缀雎缘囊粋€(gè)問(wèn)題。

對(duì)于登錄郵箱錯(cuò)誤，因?yàn)槭敲魑牡?，所以反饋后，光?biāo)應(yīng)該在郵箱的末尾，讓人們?nèi)バ薷摹?/p>

對(duì)于密碼，是暗文的，就算提示你錯(cuò)誤了，你也不知道哪錯(cuò)誤了，所以密碼通常是直接清空，然后光標(biāo)位于標(biāo)簽之后，方便用戶(hù)直接輸入。

對(duì)于驗(yàn)證碼，雖然是明文的，但是，通常是因?yàn)槌瑫r(shí)出現(xiàn)錯(cuò)誤，只要錯(cuò)誤，都會(huì)刷新驗(yàn)證碼，所以，驗(yàn)證碼也是直接清空，然后光標(biāo)位于標(biāo)簽之后。

本文的得出，主要來(lái)源于對(duì)我司網(wǎng)站登陸注冊(cè)的改版，所以得出的結(jié)論主要是以我們的網(wǎng)站為基礎(chǔ)的，未免會(huì)有些偏差，望見(jiàn)諒。

本文由 @設(shè)計(jì)Zan?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。