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

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

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

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

　　27、只使用一種字體

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

　　28、簡單的配色方案

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

　　29、可愛又簡短直接

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

　　30、一個名稱就夠了

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

　　31、來個圖文混拍的Banner

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

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

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

　　33、利用柵格

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

　　34、移除頁頭

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

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

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

　　36、LOGO和圖片的結合

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

　　37、漫畫式的Banner

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

　　38、繁復之美

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

　　39、讓標題無比醒目

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

　　40、使用對比

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

　　41、漂亮的LOGO

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

　　42、居中顯示風格化設計的標題

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

　　43、用空間制造層次感

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

　　44、視覺化的字體選取

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

　　45、只使用LOGO

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

　　46、試試現(xiàn)代風

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

　　47、字體與紋理的結合

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

　　48、放大標題字體

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

　　49、內(nèi)容引用

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

　　50、色彩鮮明的色塊

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

　　結語

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