不論是網(wǎng)頁(yè)設(shè)計(jì)師還是UI設(shè)計(jì)師，登陸和注冊(cè)頁(yè)面的設(shè)計(jì)是必然經(jīng)歷過(guò)的工作內(nèi)容。登陸界面的設(shè)計(jì)說(shuō)難不難，說(shuō)容易也不是那么輕松就可以做好的，要在安全和可用性之間找到登陸界面的平衡點(diǎn)，還是需要相當(dāng)?shù)慕?jīng)驗(yàn)來(lái)支撐的。今天的文章來(lái)自GoSquared團(tuán)隊(duì)，他們?cè)诘顷懡缑娴脑O(shè)計(jì)上細(xì)致入微，值得學(xué)習(xí)哦~

　　對(duì)于GoSquared 的每一個(gè)設(shè)計(jì)細(xì)節(jié)，我們都非常之上心。最近登陸界面改版，新加入的雙重認(rèn)證機(jī)制使得用戶(hù)賬戶(hù)更加安全，與此同時(shí)，我們也借此機(jī)會(huì)逐步提升用戶(hù)登陸的體驗(yàn)。

　　提升登陸界面的用戶(hù)體驗(yàn)并沒(méi)有看起來(lái)那么簡(jiǎn)單。當(dāng)你讓登陸界面越發(fā)漂亮、直觀、快速且好用的同時(shí)，你還需要讓這個(gè)過(guò)程不那么簡(jiǎn)單，不會(huì)被黑客或者其他心懷不軌者輕易入侵。

　　接下來(lái)，我們一起來(lái)看看這次改版做了哪些決策。如果你想仔細(xì)體驗(yàn)我們改版后的細(xì)節(jié)，請(qǐng)注冊(cè)一個(gè)GoSquared帳號(hào)然后登陸進(jìn)來(lái)!

　　輕松不費(fèi)力

　　通常，我們打開(kāi)登陸界面，并不是為了查看登陸表單本身，而是由此登陸賬戶(hù)。表單本身僅僅只是獲取個(gè)人信息的一個(gè)手段，而非目的。從這一點(diǎn)來(lái)看，登陸體驗(yàn)應(yīng)該輕松而不費(fèi)力，一切設(shè)計(jì)都應(yīng)盡力降低干擾，剪除障礙，讓你更輕松完成登陸這一任務(wù)，而不用進(jìn)行任何多余的操作。

　　由于雙重認(rèn)證機(jī)制的加入，登陸過(guò)程比之前復(fù)雜了不少。比起之前僅需郵箱和密碼的傳統(tǒng)登陸方式，現(xiàn)在的登陸方式并非簡(jiǎn)單的一次輸入決定登陸與否，新增的步驟使得登陸成了由幾步構(gòu)成的新流程：明確帳號(hào)是否有雙重認(rèn)證的相關(guān)設(shè)置，而用戶(hù)選擇的是哪種驗(yàn)證方法。在許多流程中，還應(yīng)當(dāng)包含使用備用的設(shè)備/聯(lián)系方式，以及緊急備用代碼。所有的這些因素我們必須完全考慮到，但是又不能讓它們成為登陸的負(fù)擔(dān)，讓用戶(hù)感到費(fèi)力。

　　占位符和標(biāo)簽

　　占位符在表單中的展現(xiàn)形式應(yīng)該如何選，是一件非常棘手的事情。從設(shè)計(jì)的角度上來(lái)看，占位符很不錯(cuò)。但是要用好并不容易，尤其是需要兼顧到可訪問(wèn)性和表單那自動(dòng)填充的時(shí)候。如果你使用HTML來(lái)實(shí)現(xiàn)占位符，那么當(dāng)用戶(hù)輸入的時(shí)候，占位符會(huì)消失，其結(jié)果是有的用戶(hù)此刻會(huì)忘記他真正要輸入的是什么。更麻煩的是，如果你的瀏覽器會(huì)自動(dòng)填充之前的信息的話(huà)，那么你永遠(yuǎn)看不到這個(gè)地方占位符。

　　通過(guò)檢測(cè)表單內(nèi)容是手動(dòng)輸入還是自動(dòng)填充，我們之前成功地規(guī)避了這個(gè)問(wèn)題，當(dāng)其中內(nèi)容是瀏覽器自動(dòng)填充之時(shí)，會(huì)有標(biāo)簽說(shuō)明輸入內(nèi)容，如果是手工輸入，則不會(huì)顯示標(biāo)簽。不過(guò)，后來(lái)我們發(fā)現(xiàn)，用戶(hù)在提交之前喜歡有標(biāo)簽提醒，確保他們輸入的內(nèi)容是對(duì)的，這也就意味著，他們希望輸入過(guò)程中，標(biāo)簽一直存在。

　　所以，我們最終想到了一個(gè)優(yōu)雅的解決方案，使用單獨(dú)的元素來(lái)做占位符的標(biāo)簽，當(dāng)用戶(hù)輸入的時(shí)候，占位符標(biāo)簽會(huì)自動(dòng)移出輸入框：

　　當(dāng)然，在移動(dòng)端設(shè)備上，空間有限，所以占位符標(biāo)簽可以這樣移動(dòng)：

　　當(dāng)然，要讓這些設(shè)計(jì)都完美的實(shí)現(xiàn)出來(lái)，還是需要解決一些有趣的挑戰(zhàn)。

　　尷尬的安全特性

　　最開(kāi)始我們使用代碼來(lái)控制這些標(biāo)簽和占位符的時(shí)候，并不復(fù)雜：每當(dāng)表單中內(nèi)容改變的時(shí)候，檢測(cè)其中的內(nèi)容;如果內(nèi)容為空，占位符標(biāo)簽在表單中顯示;如果不為空，那么就移動(dòng)出去。當(dāng)頁(yè)面剛剛加載的時(shí)候，系統(tǒng)會(huì)自動(dòng)檢測(cè)若干次，檢測(cè)瀏覽器是否有自動(dòng)填充內(nèi)容。

　　但是即便如此，依然存在問(wèn)題。Chrome瀏覽器中有一項(xiàng)安全特性，名為PasswordAutofillAgent::PasswordValueGatekeeper ，這一特性的特殊之處在于，它并不會(huì)將之前保存的帳號(hào)和密碼字段直接填充到表單中，哪怕它們看起來(lái)填進(jìn)去了(當(dāng)然，用戶(hù)通常也不希望瀏覽器自己填充內(nèi)容之后還提交上去)，只有當(dāng)用戶(hù)和頁(yè)面進(jìn)行交互(也就是提交內(nèi)容的時(shí)候)，瀏覽器中的表單才能檢測(cè)到被填充了內(nèi)容。所以，瀏覽器的這一設(shè)計(jì)使得我們的標(biāo)簽會(huì)以這樣的形式展現(xiàn)出來(lái)：

　　所以為了盡量規(guī)避這些問(wèn)題，主要的解決方案是檢測(cè)輸入內(nèi)容是否與 :-webkit-autofill 選擇器是否一致，以及輸入內(nèi)容的存在與否。雖然看起來(lái)并不美觀，但是非常有效。

　　流動(dòng)性更強(qiáng)的界面

　　每操作一個(gè)步驟都要給頁(yè)面重新定向是2008年的網(wǎng)頁(yè)設(shè)計(jì)師做的事情，這樣來(lái)設(shè)計(jì)可能兼容性更好，也更加萬(wàn)無(wú)一失，不過(guò)GoSquared 的APP已經(jīng)不再支持這樣的特性了。

　　新的GoSquared 的登陸界面擁有更強(qiáng)的流動(dòng)性，平滑的動(dòng)效和自然的狀態(tài)切換，著實(shí)令人著迷。

　　驗(yàn)證和建議

　　正如同我們?cè)谥暗奈恼轮兴f(shuō)的，之前的設(shè)計(jì)非常容易打錯(cuò)登陸郵箱和用戶(hù)名，直到提交的時(shí)候才收到系統(tǒng)提醒，輸入的密碼或者帳號(hào)有誤。

　　Mailcheck這樣的郵箱名稱(chēng)糾錯(cuò)工具，能糾正絕大部分的郵箱地址輸入錯(cuò)誤，極大的降低了登陸輸入錯(cuò)誤率。我們?cè)谏弦话嬷芯图尤肓诉@一組件，它現(xiàn)在也服務(wù)于新版。

　　登陸按鈕的回歸

　　上一版設(shè)計(jì)的時(shí)候，我們大幅削減了界面中其他非重要元素，最終使得登陸界面上只有兩個(gè)輸入框，而沒(méi)有其他的視覺(jué)元素，畢竟在今天，輸入完帳號(hào)密碼之后按回車(chē)鍵登陸是一件自然而然的事情，有沒(méi)有登陸按鈕似乎影響不大。

　　但是，當(dāng)我們觀察實(shí)際用戶(hù)操作之后才意識(shí)到，有許多用戶(hù)寧可點(diǎn)擊按鈕提交表單也不愿點(diǎn)擊回車(chē)鍵。這也促使我們最終在新版中讓登陸按鈕重新回歸。

　　等等，為什么登陸變慢了?

　　當(dāng)我們點(diǎn)擊”登陸“按鈕之后，通常會(huì)等待幾秒鐘才進(jìn)入登陸后的界面。即便我們進(jìn)行了諸多優(yōu)化之后，用戶(hù)依然需要耗費(fèi)幾秒鐘等待時(shí)間才能正是登陸，這其實(shí)是有原因的：安全性。當(dāng)用戶(hù)提交他們的帳號(hào)密碼之后，后臺(tái)的服務(wù)器需要耗費(fèi)巨量的運(yùn)算來(lái)確定它們是正確的，在此我們無(wú)法詳細(xì)描述具體機(jī)制，但是這么做是為了防止有人以暴力破解的方式黑入系統(tǒng)。

　　當(dāng)然，也正是因?yàn)檫@個(gè)緩慢的過(guò)程，我們并不想讓用戶(hù)獨(dú)自面對(duì)著仿佛卡住了的登陸界面，我們需要通過(guò)設(shè)計(jì)，用視覺(jué)反饋告訴用戶(hù)“你的表單已經(jīng)提交，一切都很正常，你只需要稍等一下就能進(jìn)去了!”

　　所以我們?cè)谶@個(gè)環(huán)節(jié)添加了一個(gè)進(jìn)度條，為用戶(hù)展示預(yù)計(jì)多久能夠登陸進(jìn)去，這使得他們對(duì)登陸時(shí)長(zhǎng)有一個(gè)明確的預(yù)期。不過(guò)，基于時(shí)間的進(jìn)度條本身非常單調(diào)，而且不一定準(zhǔn)確，所以我們最終使用了一個(gè)非常微妙的動(dòng)畫(huà)來(lái)作為替代方案。

　　結(jié)語(yǔ)

　　用戶(hù)體驗(yàn)和UI設(shè)計(jì)并非一成不變的東西，它們會(huì)隨著時(shí)間和地區(qū)的改變而不停地調(diào)整。我希望你們會(huì)喜歡GoSquared 登陸界面的改進(jìn)，也希望我們的改進(jìn)過(guò)程能給同行們一些啟示。