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

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

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

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

　　27、只使用一種字體

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

　　28、簡(jiǎn)單的配色方案

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

　　29、可愛(ài)又簡(jiǎn)短直接

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

　　30、一個(gè)名稱就夠了

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

　　31、來(lái)個(gè)圖文混拍的Banner

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

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

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

　　33、利用柵格

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

　　34、移除頁(yè)頭

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

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

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

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

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

　　37、漫畫式的Banner

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

　　38、繁復(fù)之美

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

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

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

　　40、使用對(duì)比

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

　　41、漂亮的LOGO

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

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

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

　　43、用空間制造層次感

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

　　44、視覺(jué)化的字體選取

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

　　45、只使用LOGO

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

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

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

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

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

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

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

　　49、內(nèi)容引用

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

　　50、色彩鮮明的色塊

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

　　結(jié)語(yǔ)

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