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)雅而鮮亮的外觀

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

　　27、只使用一種字體

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

　　28、簡單的配色方案

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

　　29、可愛又簡短直接

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

　　30、一個名稱就夠了

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

　　31、來個圖文混拍的Banner

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

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

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

　　33、利用柵格

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

　　34、移除頁頭

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

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

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

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

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

　　37、漫畫式的Banner

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

　　38、繁復(fù)之美

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

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

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

　　40、使用對比

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

　　41、漂亮的LOGO

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

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

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

　　43、用空間制造層次感

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

　　44、視覺化的字體選取

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

　　45、只使用LOGO

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

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

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

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

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

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

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

　　49、內(nèi)容引用

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

　　50、色彩鮮明的色塊

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

　　結(jié)語

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