Web頁(yè)面中的“門(mén)”—Web端登錄頁(yè)的設(shè)計(jì)
? ? ? ?登錄頁(yè)是用戶進(jìn)入網(wǎng)站的入口,就像是我們進(jìn)家、進(jìn)公司的“門(mén)”一樣。
試想我們處在一個(gè)四周都是門(mén)的環(huán)境,我們會(huì)選擇推開(kāi)哪一扇門(mén)?這一扇門(mén)哪些地方有吸引我們推開(kāi)的魅力?我們能否準(zhǔn)確找到這扇門(mén)的把手?
其實(shí)這些問(wèn)題同樣適用于登錄頁(yè)面,對(duì)于登錄頁(yè)面,是否有足夠的魅力讓用戶在登錄過(guò)程中不感到煩躁,是否能準(zhǔn)確的區(qū)分所要填寫(xiě)的信息(如:是填用戶名或是電話,快速切換的按鈕在哪等),是否能準(zhǔn)確找到登錄或注冊(cè)按鈕,這些元素的視覺(jué)層級(jí)與交互關(guān)系,直接影響著整個(gè)頁(yè)面的體驗(yàn)。
登錄頁(yè)的元素
如上圖所示,一般登錄頁(yè)都會(huì)包含上面5個(gè)重要元素:LOGO、登陸框、廣告圖、幫助中心、底部導(dǎo)航。
在這五個(gè)元素中,Logo與登錄框是必不可少的兩個(gè)重要元素。Logo體現(xiàn)了產(chǎn)品的品牌,登錄框是用戶進(jìn)入這個(gè)頁(yè)面最終的意圖。Logo與登陸框已經(jīng)構(gòu)成了最簡(jiǎn)單的登錄頁(yè)面。隨著用戶體驗(yàn)的提升已經(jīng)情感化的設(shè)計(jì),廣告圖、幫助中心與底部導(dǎo)航也逐步的體現(xiàn)在了登錄頁(yè)面。
登錄頁(yè)的風(fēng)格
1.體現(xiàn)品牌類
這種類型的登錄頁(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.情景類
這種全背景的登錄頁(yè),用大背景圖來(lái)烘托出比較隨性的情境,在登錄框設(shè)計(jì)上,感覺(jué)比較輕松不拘束。比較適合用在個(gè)人空間、博客等產(chǎn)品中。
廣告圖的寓意
綜合這些廣告圖的類型,其實(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í)。
VIA:百度NUX
最喜歡網(wǎng)易郵箱的登陸頁(yè)啦~
以前也針對(duì)不同的網(wǎng)站的登錄頁(yè)展現(xiàn)哪些內(nèi)容做過(guò)討論,此篇主要是針對(duì)登錄頁(yè)上的“圖”來(lái)說(shuō),不同的設(shè)計(jì),不同的寓意,長(zhǎng)知識(shí)了