【視覺設(shè)計】Web頁面中的“門”—Web端登錄頁的設(shè)計

登錄頁是用戶進入網(wǎng)站的入口忆矛,就像是我們進家、進公司的“門”一樣请垛。

試想我們處在一個四周都是門的環(huán)境催训,我們會選擇推開哪一扇門?這一扇門哪些地方有吸引我們推開的魅力叼屠?我們能否準(zhǔn)確找到這扇門的把手瞳腌?

其實這些問題同樣適用于登錄頁面,對于登錄頁面镜雨,是否有足夠的魅力讓用戶在登錄過程中不感到煩躁嫂侍,是否能準(zhǔn)確的區(qū)分所要填寫的信息(如:是填用戶名或是電話,快速切換的按鈕在哪等)荚坞,是否能準(zhǔn)確找到登錄或注冊按鈕挑宠,這些元素的視覺層級與交互關(guān)系,直接影響著整個頁面的體驗颓影。

登錄頁的元素

如上圖所示各淀,一般登錄頁都會包含上面5個重要元素:LOGO、登陸框诡挂、廣告圖碎浇、幫助中心、底部導(dǎo)航璃俗。

在這五個元素中奴璃,Logo與登錄框是必不可少的兩個重要元素。Logo體現(xiàn)了產(chǎn)品的品牌城豁,登錄框是用戶進入這個頁面最終的意圖苟穆。Logo與登陸框已經(jīng)構(gòu)成了最簡單的登錄頁面。隨著用戶體驗的提升已經(jīng)情感化的設(shè)計,廣告圖雳旅、幫助中心與底部導(dǎo)航也逐步的體現(xiàn)在了登錄頁面跟磨。

登錄頁的風(fēng)格

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

這種類型的登錄頁面多是由LOGO與登陸框兩個元素組成,頁面質(zhì)感比較強攒盈,操作性比較強抵拘,用戶在這樣的登錄頁能快速的完成填寫與登錄,同時還能對產(chǎn)品的品牌一目了然沦童,整個頁面呈現(xiàn)一種比較理性的設(shè)計仑濒,沒有任何的視覺干擾。

如果硬要說是有干擾的話偷遗,可能干擾的對象就是設(shè)計師們墩瞳,設(shè)計師對高質(zhì)感的設(shè)計都有很敏銳的觀察力,頁面中的設(shè)計細節(jié)(如漸變氏豌、陰影喉酌、高光等)可能會讓設(shè)計師短時間內(nèi)停下來觀察,隨后快速完成注冊泵喘。

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

當(dāng)這種風(fēng)格的登錄頁面展現(xiàn)在用戶眼前時泪电,用戶的第一視覺中心往往實在這個圖片上,其次才會看登錄框纪铺。但這些廣告圖又很好的傳達了產(chǎn)品的相關(guān)信息相速,如:品牌(是什么產(chǎn)品)、性質(zhì)(這個產(chǎn)品是用來做什么的)鲜锚,或者傳達一種節(jié)日的氛圍(春節(jié)突诬、國慶等)。

雖然第一視覺中心不在登錄框上芜繁,但這些廣告圖又很好的詮釋了這個產(chǎn)品的涵義旺隙,加深了用戶對此產(chǎn)品的認識,同時骏令,這些廣告圖趣味性比較強蔬捷,雖然是廣告,但并不會讓用戶感到反感榔袋。

還有一種相似的廣告圖周拐,廣告本身與此產(chǎn)品關(guān)系并不大,這些圖的內(nèi)容更多的實在表現(xiàn)一種意境凰兑,一種情感速妖,像是回憶、憧憬聪黎、幻想、童話等,能讓用戶進入一種意境中稿饰,產(chǎn)生共鳴锦秒。

3.情景類

這種全背景的登錄頁,用大背景圖來烘托出比較隨性的情境喉镰,在登錄框設(shè)計上旅择,感覺比較輕松不拘束。比較適合用在個人空間侣姆、博客等產(chǎn)品中生真。

廣告圖的寓意

綜合這些廣告圖的類型,其實都是在表達四種寓意:品牌宣傳捺宗、相關(guān)廣告柱蟀、情景化設(shè)計和節(jié)日相關(guān)。

登錄頁廣告圖的變化蚜厉,很多時候都見證了產(chǎn)品從宣傳“產(chǎn)品品牌”到宣傳“產(chǎn)品理念”的一個過渡长已。在第一階段宣傳品牌時,很多時候都以直白的產(chǎn)品特性為宣傳點昼牛,隨著產(chǎn)品的運營术瓮,第二階段會對產(chǎn)品特性加以包裝,結(jié)合趣味性的設(shè)計語言贰健,使產(chǎn)品的特性包含一些寓意胞四,在接下來的階段中,會融入越來越多的情感化設(shè)計伶椿,情感化的文字辜伟,可以使用戶在了解品牌的同時,也加深對產(chǎn)品理念的認識悬垃。

VIA:百度NUX

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末游昼,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子尝蠕,更是在濱河造成了極大的恐慌烘豌,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件看彼,死亡現(xiàn)場離奇詭異廊佩,居然都是意外死亡,警方通過查閱死者的電腦和手機靖榕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門标锄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人茁计,你說我怎么就攤上這事料皇。” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵践剂,是天一觀的道長鬼譬。 經(jīng)常有香客問我,道長逊脯,這世上最難降的妖魔是什么优质? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮军洼,結(jié)果婚禮上巩螃,老公的妹妹穿的比我還像新娘。我一直安慰自己匕争,他們只是感情好避乏,可當(dāng)我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著汗捡,像睡著了一般淑际。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上扇住,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天春缕,我揣著相機與錄音,去河邊找鬼艘蹋。 笑死锄贼,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的女阀。 我是一名探鬼主播宅荤,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼浸策!你這毒婦竟也來了冯键?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤庸汗,失蹤者是張志新(化名)和其女友劉穎惫确,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蚯舱,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡改化,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了枉昏。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陈肛。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖兄裂,靈堂內(nèi)的尸體忽然破棺而出句旱,到底是詐尸還是另有隱情阳藻,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布前翎,位于F島的核電站稚配,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏港华。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一午衰、第九天 我趴在偏房一處隱蔽的房頂上張望立宜。 院中可真熱鬧,春花似錦臊岸、人聲如沸橙数。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽灯帮。三九已至,卻和暖如春逻住,著一層夾襖步出監(jiān)牢的瞬間钟哥,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工瞎访, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留腻贰,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓扒秸,卻偏偏與公主長得像播演,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子伴奥,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容