您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)欣賞 >> 瀏覽設(shè)計(jì)教程

50個讓用戶流連忘返的網(wǎng)站頁頭設(shè)計(jì)(下)

網(wǎng)頁設(shè)計(jì)師總能花樣百出地設(shè)計(jì)出驚艷的細(xì)節(jié),讓用戶過目難忘。尤其是在頁頭,設(shè)計(jì)師的想法、氣場、情懷、逼格都會在簡簡單單的幾個設(shè)計(jì)技巧之下,行云流水地呈現(xiàn)在用戶的面前。網(wǎng)頁頁頭的設(shè)計(jì)是有規(guī)律可循的,但是由于網(wǎng)站本身的差異,設(shè)計(jì)手法又往往千差萬別。案例雖然不少,但是請千萬根據(jù)實(shí)際情況分析之后,再借鑒、學(xué)習(xí)和使用。本文上半部分戳這里:《50個讓用戶流連忘返的網(wǎng)站頁頭設(shè)計(jì)(上)

  26、優(yōu)雅而鮮亮的外觀

26_La_Dolce_Vita-662x416

  清爽、簡約并且以字體為主,La Dolce Vita 的博客就是這么做的,優(yōu)雅又鮮明的設(shè)計(jì)令人過目難忘。

  27、只使用一種字體

27_Mine_Is_Yours-662x417

  Mine is Yours 是一個極簡風(fēng)的網(wǎng)站,它不僅總體風(fēng)格如此,而使用單一字體營造出無與倫比的統(tǒng)一度。在這個案例中,少即是多的設(shè)計(jì)理念體現(xiàn)的非常透徹。

  28、簡單的配色方案

28_Maiedae-662x416

  Maiedae 在左上角使用了一個可愛的手寫字體LOGO,而網(wǎng)站更加用心的地方在于為了突出內(nèi)容,網(wǎng)站非圖片部分的配色設(shè)計(jì)得足夠簡單,讓用戶打開頁面之后第一時刻會關(guān)注到圖片和內(nèi)容。

  29、可愛又簡短直接

29_Nice-662x416

  雖然很多Tumblr 博客都采用的是這樣的布局,但是你必須承認(rèn)相對較窄的頁寬和可愛的配色會讓頁面顯得賞心悅目又難忘。

  30、一個名稱就夠了

30_Panic_Blog-662x417

  有的時候繁復(fù)的設(shè)計(jì)不如一個簡單的直擊來得靠譜,而Panic Blog 也算得上是個中高手了,一個帶有浮雕效果的標(biāo)題就給人感覺非常不錯。

  31、來個圖文混拍的Banner

31_The_Little_Green_Notebook-662x416

  文藝風(fēng)十足的Little Green Notebook就適合這樣圖文混拍的Banner ,這種看起來經(jīng)過處理的頁頭充滿了溫暖的觸感,走心又漂亮。

  32、讓圖片和內(nèi)容聯(lián)系緊密

32_The_Design_Tripper-662x418

  我們常說要讓圖片和內(nèi)容相互關(guān)聯(lián),但是要怎么設(shè)計(jì)才夠緊密呢?開開腦洞,像 Design Tripper 一樣,點(diǎn)題又能讓人會心一笑,獨(dú)特又不覺得突兀。

  33、利用柵格

33_Storyboard-662x418

  利用柵格系統(tǒng)來制作故事板,這在Tumblr 中也可以實(shí)現(xiàn),這樣的設(shè)計(jì)可以將標(biāo)題和內(nèi)容有機(jī)地整合到一起。利用柵格不僅可以讓布局更加整飭,而且讓那個用戶更容易導(dǎo)航。

  34、移除頁頭

34_Red_And_Toe-662x416

  如果沒有頁頭的話,那么這個網(wǎng)站的打開體驗(yàn)會如何?這個網(wǎng)站就是如此做的,去除頁頭之后,漂亮的圖片和內(nèi)容組成了這個全屏式的頁面,直接而富有沖擊力。

  35、用標(biāo)題和內(nèi)容來覆蓋

35_This_is_Glamorous-662x416

  This Is Glamorous 是一個關(guān)于時尚和室內(nèi)設(shè)計(jì)的網(wǎng)站,優(yōu)雅的手繪字體標(biāo)題和內(nèi)容以更加緊湊的方式覆蓋了頁頭,極簡之余還會給人一種優(yōu)雅而直接的瀏覽體驗(yàn)。

  36、LOGO和圖片的結(jié)合

36_Vintage_Revivals-662x417

  黑色的LOGO和淺色的Banner 圖結(jié)合到一起作為頁頭,相比于文字標(biāo)題+鏈接的常見展現(xiàn)形式更加有趣而視覺化。如果你的LOGO足夠漂亮,多展示一下又有何妨呢?

  37、漫畫式的Banner

37_Thethirstywench-662x416

  有插畫師的網(wǎng)站就是好,The Thirsty Wench 的頁面就將標(biāo)題和漫畫插畫結(jié)合到一起,考慮到這是一個和酒相關(guān)的網(wǎng)站,這大膽的風(fēng)格還是與之非常搭的呢~

  38、繁復(fù)之美

38_TheRivetPress-662x417

  在主流設(shè)計(jì)都追求簡約美的今天,使用繁復(fù)而優(yōu)雅的頁頭也是一種不跟隨的態(tài)度。借助柵格和大量的文字標(biāo)題來設(shè)計(jì)的頁頭使得The Rivet Press的首頁顯得華麗整齊而令人印象深刻。

  39、讓標(biāo)題無比醒目

39_The_Local_Palate-662x417

  對,這么做是有點(diǎn)簡單粗暴,但是字體夠漂亮,色彩夠鮮艷,這做又有什么不好呢?富有吸引力,有趣,讓頁面有了視覺重心。

  40、使用對比

40_Deaf_Pigeon-662x417

  和上面的案例有異曲同工之妙,Deaf Pigeon 的頁面讓背景的所有元素都顯得柔和,僅僅是讓網(wǎng)站名稱和前景那個巨大的紅色斧頭突出顯示,目的明確,對比強(qiáng)烈,層次分明。

  41、漂亮的LOGO

41_Decor_8-662x416

  Decor8 的漂亮 LOGO被置于整個博客的正中央,這就是我們之前所說的經(jīng)典而簡單的解決方案。

  42、居中顯示風(fēng)格化設(shè)計(jì)的標(biāo)題

42_Chronicles_Her-662x417

  作為一個強(qiáng)調(diào)女性的博客,The Chronicles of Her 將標(biāo)題用口紅來書寫出來顯得性感無比,將它居中顯示在頁頭,醒目又有性格。

  43、用空間制造層次感

43_Ceesk-662x418

  這個網(wǎng)站同樣使用了單一字體設(shè)計(jì),而為了制造層次感,設(shè)計(jì)師充分運(yùn)用了空間和留白來實(shí)現(xiàn)差異化。Ceeesk 的頁頭就是另一個值得學(xué)習(xí)的案例。

  44、視覺化的字體選取

44_Car_Crush-662x417

  關(guān)注經(jīng)典汽車搜集的博客 Car Crush 使用復(fù)古的經(jīng)典字體來呈現(xiàn)它的標(biāo)題并不為過,而網(wǎng)站設(shè)計(jì)的巧妙之處在于,它很好地同復(fù)古的汽車圖片結(jié)合到一起,組成了頁頭,一箭雙雕。視覺化的字體和視覺化的圖片讓整個頁頭顯得風(fēng)格突出。

  45、只使用LOGO

45_Book_Cover_Archive-662x417

  作為一個功能單一到只搜集圖書封面的網(wǎng)頁而言,在頁頭加上復(fù)雜的導(dǎo)航好像并不合適,左上角使用一個簡單的LOGO是如此地符合網(wǎng)站的調(diào)性。

  46、試試現(xiàn)代風(fēng)

46_70_PP-662x416

  現(xiàn)代、極簡的風(fēng)格并不單調(diào),如果你想用這種風(fēng)格來吸引用戶的話,多看點(diǎn)類似的案例非常有必要。70% Pure 的設(shè)計(jì)就非常的微妙,值得你學(xué)習(xí)。

  47、字體與紋理的結(jié)合

47_Baking_Addiction-662x419

  又一個標(biāo)題字體與紋理結(jié)合的案例,很多時候找個有個性的字體搭配個有質(zhì)感的紋理就可以很好地表現(xiàn)一個LOGO。

  48、放大標(biāo)題字體

48_Beauty_Boring-662x417

  簡單的放大往往能收到奇效,這好像在極簡風(fēng)的網(wǎng)站中效果還有所加成,就像Beauty is Boring 這個網(wǎng)站的設(shè)計(jì)。

  49、內(nèi)容引用

49_24_Ways-662x417

  將你的博客中的一部分有趣的內(nèi)容摘取出來,引用都頁頭也能讓你的博客顯得非常的獨(dú)特,24 Ways 的網(wǎng)站就采用了這樣的方式,用醒目的色彩來強(qiáng)化引用的效果,別出機(jī)杼。

  50、色彩鮮明的色塊

50_I_Love_Typography-662x418

  這和上一個案例有異曲同工之妙,頁頭使用色彩鮮明的色塊背景可以可以標(biāo)題文本構(gòu)成視覺對比,強(qiáng)化排版效果,吸引用戶注意力。

  結(jié)語

  網(wǎng)站頁頭 的設(shè)計(jì)方式千奇百怪,但是想要吸引人的目的是一樣的。不論是傳統(tǒng)的對比式的設(shè)計(jì),還是劍走偏鋒的思路,都可以讓你的網(wǎng)站給人留下印象,重要的這種設(shè)計(jì)方法是否符合你的網(wǎng)站的風(fēng)格和特性,能否搔到用戶的癢處,留下回味無窮的印象。

[教程作者:@陳子木]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/de3151.html
50個讓用戶流連忘返的網(wǎng)站頁頭設(shè)計(jì)(上)
網(wǎng)頁配色神器 -- 色卡生成器
圖趣網(wǎng)微信
建議反饋
×