網(wǎng)站設(shè)計(jì)發(fā)展至今已有多年歷史，網(wǎng)站設(shè)計(jì)的技術(shù)和流程也相當(dāng)成熟穩(wěn)定。從一開(kāi)始，我們對(duì)網(wǎng)站設(shè)計(jì)的理解就是要好看，要漂亮，要好用?，F(xiàn)在可不止這樣了，還要把顧客當(dāng)上帝一樣服務(wù)，要照顧他的使用感受。在所有網(wǎng)站的頁(yè)面設(shè)計(jì)當(dāng)中，我個(gè)人覺(jué)得，網(wǎng)站的登錄頁(yè)面設(shè)計(jì)是最有意思的，最考驗(yàn)一個(gè)ui設(shè)計(jì)師、交互設(shè)計(jì)師和一個(gè)網(wǎng)站的用戶體驗(yàn)的地方。當(dāng)然，跟網(wǎng)頁(yè)表單相關(guān)的頁(yè)面界面設(shè)計(jì)都涉及到用戶體驗(yàn)。登錄頁(yè)面是一個(gè)用戶開(kāi)始考慮深入網(wǎng)站的入口，是進(jìn)入我們家里、進(jìn)入公司里做客的門(mén)，我們?cè)撛趺?strong>設(shè)計(jì)網(wǎng)站登錄頁(yè)面才最漂亮最貼心呢。

為馬邊彝族等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及馬邊彝族網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站制作、馬邊彝族網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

登錄類(lèi)型

-

用戶通常有兩種不同的方式來(lái)登錄一個(gè)網(wǎng)站。最新的一個(gè)方式是通過(guò)某社交網(wǎng)站的賬號(hào)采用第三方授權(quán)登錄的方式，這種方式在很多app上都可以看到。對(duì)于一個(gè)新的app或者產(chǎn)品而言，如果不想打攪用戶去填寫(xiě)創(chuàng)建一個(gè)賬戶，這是尤為正確的一個(gè)做法。譬如通過(guò)Facebook或者Twitter去登錄是輕而易舉的事情，因?yàn)槟阒灰c(diǎn)擊一個(gè)按鈕，然后等上幾秒鐘去連接上社交網(wǎng)站就可以了。

另外一種方法是通過(guò)提供用戶名或者郵件地址以及密碼來(lái)登錄。這是一種比較常用的且可以提升其用戶體驗(yàn)的登錄方式。這里所說(shuō)的技巧也是和這種登錄類(lèi)型相關(guān)的。所有登錄類(lèi)型都各有利弊，而現(xiàn)在我們主要討論一下如何提升這種比較典型且傳統(tǒng)的登錄方式的體驗(yàn)。

1. 允許郵件登錄

我們常常能看到一個(gè)網(wǎng)站在注冊(cè)的時(shí)候不需要填寫(xiě)用戶名。使用郵箱去登陸也是很正常的，對(duì)嗎？要么使用用戶名，要么使用郵箱，我覺(jué)得這都沒(méi)什么問(wèn)題。請(qǐng)兩種方式都允許，我的問(wèn)題就是當(dāng)郵件登陸也應(yīng)該被允許的時(shí)候?yàn)槭裁粗徽J(rèn)用戶名呢。

我有遇到過(guò)那種用郵箱或者用戶名都可以登陸的，但標(biāo)簽信息只顯示“用戶名”，設(shè)計(jì)上這是一個(gè)缺陷。

總的來(lái)說(shuō)是這樣的，通常用戶使用的都是相同的郵箱地址登陸，但并不一定使用的是相同的用戶名。比如說(shuō)，我Twitter賬號(hào)的用戶名和我Instagram的用戶名就不一樣，因?yàn)橛杏脩粼贗nstagram上已經(jīng)注冊(cè)使用的用戶名跟我在Twitter上使用的一樣，就是這么巧。

而且除此之外，我OKCupid賬戶的用戶名跟其它賬戶也不一樣，而這一回是我故意的，因?yàn)樵贠KCupid里我不想讓別人知道我的全名。然而，所有的這些賬戶都可以使用相同的郵箱登陸。不管什么方案，在登陸的時(shí)候用戶名和郵箱都被允許使用的話對(duì)用戶來(lái)說(shuō)的確將會(huì)方便很多。

2. 提供一個(gè)清晰的錯(cuò)誤提示信息

說(shuō)到登錄，你為用戶提供的反饋信息是多了還是少了其實(shí)是比較講究的。信息過(guò)多可能就會(huì)被黑客利用，而信息過(guò)少可能又會(huì)增加用戶的困惑。

我們得承認(rèn)那種系統(tǒng)自動(dòng)生成的錯(cuò)誤提示比如“無(wú)效的輸入”對(duì)用戶來(lái)說(shuō)并沒(méi)有幫助。錯(cuò)誤提示應(yīng)該用比較通俗易懂的語(yǔ)言。

如果你想在用戶體驗(yàn)上更好，你可以使用Javascrip來(lái)幫助用戶提前確認(rèn)輸入信息的正確性。   有一個(gè)最好的案例,就是在智能手機(jī)上用戶錯(cuò)把.com輸入成了.con或者說(shuō)小點(diǎn)也忘了輸入，系統(tǒng)都可以識(shí)別并且及時(shí)提醒。在用戶點(diǎn)擊提交或者在輸完所有信息前就可以預(yù)先看到反饋信息，知道自己輸入的信息正確與否。而用戶的生活也因此變得更簡(jiǎn)單，因?yàn)樗?jié)省了用戶的時(shí)間。（如果你有安全方面的擔(dān)憂，錯(cuò)誤消息提示信息不用特別的具體）

3. 為用戶提供找回密碼的鏈接

你可能會(huì)覺(jué)得這是顯而易見(jiàn)的事情，但有些網(wǎng)站就會(huì)忽略掉它。你常常會(huì)想要一個(gè)鏈接來(lái)找回忘記的密碼。（忘記用戶名也是?。┎灰獙⑦@個(gè)鏈接藏起來(lái)或者要讓用戶經(jīng)歷多次失敗的嘗試、歷經(jīng)千辛萬(wàn)苦才找到它。要讓它時(shí)刻準(zhǔn)備著。它并不一定要在顯而易見(jiàn)的地方；它也不是說(shuō)有那么重要；但它就是應(yīng)該出現(xiàn)在登錄表單的周?chē)?/p>

4. 干擾 — 自由登入

一般來(lái)說(shuō)有兩種方式來(lái)設(shè)置登錄，一種是在頁(yè)面上方的窗口登錄，還有一種是有單獨(dú)的一個(gè)登陸頁(yè)面。

對(duì)于采取單獨(dú)頁(yè)面的登錄方式的確是有一些優(yōu)勢(shì)的。然而，如果你采取了這樣的方式，請(qǐng)記住在登錄頁(yè)的周?chē)灰刑嗟母蓴_信息，你首先想要的是用戶登錄進(jìn)賬戶，然后才是產(chǎn)品推廣諸如此類(lèi)的信息。用戶登錄后，想要推銷(xiāo)一些東西給用戶就會(huì)變的容易許多。

此外，我要提到保留和轉(zhuǎn)換的問(wèn)題。對(duì)于用戶來(lái)說(shuō)干擾越少，用戶就更輕易的可以登錄，使你進(jìn)一步推銷(xiāo)產(chǎn)品。如果這種方法對(duì)于注冊(cè)表單和結(jié)賬系統(tǒng)都奏效的話，那么也應(yīng)該同樣適用到登錄。而且頁(yè)面上的無(wú)關(guān)的條目少了，加載的速度也會(huì)變快的。

5. 重要的標(biāo)簽

任何表單（控件）上的文案及位置都很重要。你無(wú)論做什么，不要把“提交”的按鈕寫(xiě)成“提交”，而是用“登陸”代替。就是這么簡(jiǎn)單。這樣可以讓用戶知道和預(yù)想到點(diǎn)擊后的確切的事情。

它提高了用戶體驗(yàn)并且對(duì)你來(lái)說(shuō)幫助很大。避免只有一個(gè)輸入框讓用戶填寫(xiě)，至少也要放一個(gè)圖標(biāo)在里面，但最好還是使用一個(gè)輸入標(biāo)簽來(lái)提示用戶該填寫(xiě)什么。不要忘了明確，用郵件和用戶名的方式都可以登錄。

登錄頁(yè)的風(fēng)格

-

1.體現(xiàn)品牌類(lèi)

這種類(lèi)型的登錄頁(yè)面多是由LOGO與登陸框兩個(gè)元素組成，頁(yè)面質(zhì)感比較強(qiáng)，操作性比較強(qiáng)，用戶在這樣的登錄頁(yè)能快速的完成填寫(xiě)與登錄，同時(shí)還能對(duì)產(chǎn)品的品牌一目了然，整個(gè)頁(yè)面呈現(xiàn)一種比較理性的設(shè)計(jì)，沒(méi)有任何的視覺(jué)干擾。

如果硬要說(shuō)是有干擾的話，可能干擾的對(duì)象就是設(shè)計(jì)師們，設(shè)計(jì)師對(duì)高質(zhì)感的設(shè)計(jì)都有很敏銳的觀察力，頁(yè)面中的設(shè)計(jì)細(xì)節(jié)（如漸變、陰影、高光等）可能會(huì)讓設(shè)計(jì)師短時(shí)間內(nèi)停下來(lái)觀察，隨后快速完成注冊(cè)。

2.有趣味性的設(shè)計(jì)

當(dāng)這種風(fēng)格的登錄頁(yè)面展現(xiàn)在用戶眼前時(shí)，用戶的第一視覺(jué)中心往往實(shí)在這個(gè)圖片上，其次才會(huì)看登錄框。但這些廣告圖又很好的傳達(dá)了產(chǎn)品的相關(guān)信息，如：品牌（是什么產(chǎn)品）、性質(zhì)（這個(gè)產(chǎn)品是用來(lái)做什么的），或者傳達(dá)一種節(jié)日的氛圍（春節(jié)、國(guó)慶等）。

雖然第一視覺(jué)中心不在登錄框上，但這些廣告圖又很好的詮釋了這個(gè)產(chǎn)品的涵義，加深了用戶對(duì)此產(chǎn)品的認(rèn)識(shí)，同時(shí)，這些廣告圖趣味性比較強(qiáng)，雖然是廣告，但并不會(huì)讓用戶感到反感。

還有一種相似的廣告圖，廣告本身與此產(chǎn)品關(guān)系并不大，這些圖的內(nèi)容更多的實(shí)在表現(xiàn)一種意境，一種情感，像是回憶、憧憬、幻想、童話等，能讓用戶進(jìn)入一種意境中，產(chǎn)生共鳴。

3.情景類(lèi)

這種全背景的登錄頁(yè)，用大背景圖來(lái)烘托出比較隨性的情境，在登錄框設(shè)計(jì)上，感覺(jué)比較輕松不拘束。比較適合用在個(gè)人空間、博客等產(chǎn)品中。

廣告圖的寓意

綜合這些廣告圖的類(lèi)型，其實(shí)都是在表達(dá)四種寓意：品牌宣傳、相關(guān)廣告、情景化設(shè)計(jì)和節(jié)日相關(guān)。

登錄頁(yè)廣告圖的變化，很多時(shí)候都見(jiàn)證了產(chǎn)品從宣傳”產(chǎn)品品牌”到宣傳”產(chǎn)品理念”的一個(gè)過(guò)渡。在第一階段宣傳品牌時(shí)，很多時(shí)候都以直白的產(chǎn)品特性為宣傳點(diǎn)，隨著產(chǎn)品的運(yùn)營(yíng)，第二階段會(huì)對(duì)產(chǎn)品特性加以包裝，結(jié)合趣味性的設(shè)計(jì)語(yǔ)言，使產(chǎn)品的特性包含一些寓意，在接下來(lái)的階段中，會(huì)融入越來(lái)越多的情感化設(shè)計(jì)，情感化的文字，可以使用戶在了解品牌的同時(shí)，也加深對(duì)產(chǎn)品理念的認(rèn)識(shí)。

小結(jié)

-

以上分享的關(guān)于網(wǎng)站登錄頁(yè)面設(shè)計(jì)的用戶體驗(yàn)研究及設(shè)計(jì)風(fēng)格分享就這么多。設(shè)計(jì)不只是為了漂亮，也是為了好用，照顧用戶使用的感受。這一切都是為了讓事情變得更加簡(jiǎn)單化和人性化，希望通過(guò)這些技巧的分享，能讓你的用戶更加順暢的通過(guò)登錄注冊(cè)頁(yè)面，樂(lè)意去操作這些表單頁(yè)面，最終提升整個(gè)網(wǎng)站的用戶體驗(yàn)。