skip to Main Content

網站登錄頁面用戶體驗及風格設計

文章轉載,來源素馬設計

網站設計發展至今已有多年歷史,網站設計的技術和流程也相當成熟穩定。從一開始,我們對網站設計的理解就是要好看,要漂亮,要好用?,F在可不止這樣了,還要把顧客當上帝一樣服務,要照顧他的使用感受。在所有網站的頁面設計當中,我個人覺得,網站的登錄頁面設計是最有意思的,最考驗一個ui設計師、交互設計師和一個網站的用戶體驗的地方。當然,跟網頁表單相關的頁面界面設計都涉及到用戶體驗。登錄頁面是一個用戶開始考慮深入網站的入口,是進入我們家里、進入公司里做客的門,我們該怎么設計網站登錄頁面才最漂亮最貼心呢。

登錄類型

用戶通常有兩種不同的方式來登錄一個網站。最新的一個方式是通過某社交網站的賬號采用第三方授權登錄的方式,這種方式在很多app上都可以看到。對于一個新的app或者產品而言,如果不想打攪用戶去填寫創建一個賬戶,這是尤為正確的一個做法。譬如通過Facebook或者Twitter去登錄是輕而易舉的事情,因為你只要點擊一個按鈕,然后等上幾秒鐘去連接上社交網站就可以了。

另外一種方法是通過提供用戶名或者郵件地址以及密碼來登錄。這是一種比較常用的且可以提升其用戶體驗的登錄方式。這里所說的技巧也是和這種登錄類型相關的。所有登錄類型都各有利弊,而現在我們主要討論一下如何提升這種比較典型且傳統的登錄方式的體驗。

1. 允許郵件登錄

我們常常能看到一個網站在注冊的時候不需要填寫用戶名。使用郵箱去登陸也是很正常的,對嗎?要么使用用戶名,要么使用郵箱,我覺得這都沒什么問題。請兩種方式都允許,我的問題就是當郵件登陸也應該被允許的時候為什么只認用戶名呢。

我有遇到過那種用郵箱或者用戶名都可以登陸的,但標簽信息只顯示“用戶名”,設計上這是一個缺陷。

總的來說是這樣的,通常用戶使用的都是相同的郵箱地址登陸,但并不一定使用的是相同的用戶名。比如說,我Twitter賬號的用戶名和我Instagram的用戶名就不一樣,因為有用戶在Instagram上已經注冊使用的用戶名跟我在Twitter上使用的一樣,就是這么巧。

而且除此之外,我OKCupid賬戶的用戶名跟其它賬戶也不一樣,而這一回是我故意的,因為在OKCupid里我不想讓別人知道我的全名。然而,所有的這些賬戶都可以使用相同的郵箱登陸。不管什么方案,在登陸的時候用戶名和郵箱都被允許使用的話對用戶來說的確將會方便很多。

2. 提供一個清晰的錯誤提示信息

說到登錄,你為用戶提供的反饋信息是多了還是少了其實是比較講究的。信息過多可能就會被黑客利用,而信息過少可能又會增加用戶的困惑。

我們得承認那種系統自動生成的錯誤提示比如“無效的輸入”對用戶來說并沒有幫助。錯誤提示應該用比較通俗易懂的語言。

如果你想在用戶體驗上更好,你可以使用Javascrip來幫助用戶提前確認輸入信息的正確性。 ? 有一個最好的案例,就是在智能手機上用戶錯把.com輸入成了.con或者說小點也忘了輸入,系統都可以識別并且及時提醒。在用戶點擊提交或者在輸完所有信息前就可以預先看到反饋信息,知道自己輸入的信息正確與否。而用戶的生活也因此變得更簡單,因為它節省了用戶的時間。(如果你有安全方面的擔憂,錯誤消息提示信息不用特別的具體)

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

你可能會覺得這是顯而易見的事情,但有些網站就會忽略掉它。你常常會想要一個鏈接來找回忘記的密碼。(忘記用戶名也是?。┎灰獙⑦@個鏈接藏起來或者要讓用戶經歷多次失敗的嘗試、歷經千辛萬苦才找到它。要讓它時刻準備著。它并不一定要在顯而易見的地方;它也不是說有那么重要;但它就是應該出現在登錄表單的周圍。

4. 干擾 — 自由登入

一般來說有兩種方式來設置登錄,一種是在頁面上方的窗口登錄,還有一種是有單獨的一個登陸頁面。

對于采取單獨頁面的登錄方式的確是有一些優勢的。然而,如果你采取了這樣的方式,請記住在登錄頁的周圍不要有太多的干擾信息,你首先想要的是用戶登錄進賬戶,然后才是產品推廣諸如此類的信息。用戶登錄后,想要推銷一些東西給用戶就會變的容易許多。

此外,我要提到保留和轉換的問題。對于用戶來說干擾越少,用戶就更輕易的可以登錄,使你進一步推銷產品。如果這種方法對于注冊表單和結賬系統都奏效的話,那么也應該同樣適用到登錄。而且頁面上的無關的條目少了,加載的速度也會變快的。

5. 重要的標簽

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

它提高了用戶體驗并且對你來說幫助很大。避免只有一個輸入框讓用戶填寫,至少也要放一個圖標在里面,但最好還是使用一個輸入標簽來提示用戶該填寫什么。不要忘了明確,用郵件和用戶名的方式都可以登錄。

登錄頁的風格

1.體現品牌類

這種類型的登錄頁面多是由LOGO與登陸框兩個元素組成,頁面質感比較強,操作性比較強,用戶在這樣的登錄頁能快速的完成填寫與登錄,同時還能對產品的品牌一目了然,整個頁面呈現一種比較理性的設計,沒有任何的視覺干擾。

如果硬要說是有干擾的話,可能干擾的對象就是設計師們,設計師對高質感的設計都有很敏銳的觀察力,頁面中的設計細節(如漸變、陰影、高光等)可能會讓設計師短時間內停下來觀察,隨后快速完成注冊。

2.有趣味性的設計

當這種風格的登錄頁面展現在用戶眼前時,用戶的第一視覺中心往往實在這個圖片上,其次才會看登錄框。但這些廣告圖又很好的傳達了產品的相關信息,如:品牌(是什么產品)、性質(這個產品是用來做什么的),或者傳達一種節日的氛圍(春節、國慶等)。

雖然第一視覺中心不在登錄框上,但這些廣告圖又很好的詮釋了這個產品的涵義,加深了用戶對此產品的認識,同時,這些廣告圖趣味性比較強,雖然是廣告,但并不會讓用戶感到反感。

還有一種相似的廣告圖,廣告本身與此產品關系并不大,這些圖的內容更多的實在表現一種意境,一種情感,像是回憶、憧憬、幻想、童話等,能讓用戶進入一種意境中,產生共鳴。

3.情景類

這種全背景的登錄頁,用大背景圖來烘托出比較隨性的情境,在登錄框設計上,感覺比較輕松不拘束。比較適合用在個人空間、博客等產品中。

廣告圖的寓意

綜合這些廣告圖的類型,其實都是在表達四種寓意:品牌宣傳、相關廣告、情景化設計和節日相關。

登錄頁廣告圖的變化,很多時候都見證了產品從宣傳”產品品牌”到宣傳”產品理念”的一個過渡。在第一階段宣傳品牌時,很多時候都以直白的產品特性為宣傳點,隨著產品的運營,第二階段會對產品特性加以包裝,結合趣味性的設計語言,使產品的特性包含一些寓意,在接下來的階段中,會融入越來越多的情感化設計,情感化的文字,可以使用戶在了解品牌的同時,也加深對產品理念的認識。

小結

以上分享的關于網站登錄頁面設計的用戶體驗研究及設計風格分享就這么多。設計不只是為了漂亮,也是為了好用,照顧用戶使用的感受。這一切都是為了讓事情變得更加簡單化和人性化,希望通過這些技巧的分享,能讓你的用戶更加順暢的通過登錄注冊頁面,樂意去操作這些表單頁面,最終提升整個網站的用戶體驗。

空間設計事務所

空間設計事務所

發表評論

電子郵件地址不會被公開。 必填項已用*標注

内蒙古11选5基本走势图 内蒙古11选5基本走势图 内蒙古11选5开奖 内蒙古11选5基本走势图 内蒙古11选5手机版 内蒙古11选5手机版 内蒙古11选5基本走势图 内蒙古11选5基本走势图 内蒙古11选5手机版 内蒙古11选5走势图表 内蒙古11选5开奖 内蒙古11选5开奖 内蒙古11选5开奖 内蒙古11选5开奖 内蒙古11选5手机版 内蒙古11选5基本走势图 内蒙古11选5开奖 内蒙古11选5基本走势图 内蒙古11选5基本走势图 内蒙古11选5走势图表 内蒙古11选5历史记录