一見(jiàn)鐘情！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í)和使用。本文上半部分戳這里：《一見(jiàn)鐘情！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)的手寫(xiě)字體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、漫畫(huà)式的Banner

有插畫(huà)師的網(wǎng)站就是好，The Thirsty Wench 的頁(yè)面就將標(biāo)題和漫畫(huà)插畫(huà)結(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)書(shū)寫(xiě)出來(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)典汽車(chē)搜集的博客 Car Crush 使用復(fù)古的經(jīng)典字體來(lái)呈現(xiàn)它的標(biāo)題并不為過(guò)，而網(wǎng)站設(shè)計(jì)的巧妙之處在于，它很好地同復(fù)古的汽車(chē)圖片結(jié)合到一起，組成了頁(yè)頭，一箭雙雕。視覺(jué)化的字體和視覺(jué)化的圖片讓整個(gè)頁(yè)頭顯得風(fēng)格突出。

45、只使用LOGO

作為一個(gè)功能單一到只搜集圖書(shū)封面的網(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ú)窮的印象。

【如何才能成為創(chuàng)造價(jià)值的設(shè)計(jì)師？】

1、數(shù)據(jù)驅(qū)動(dòng)：
《思路最值錢(qián)！如何通過(guò)設(shè)計(jì)提升高達(dá)12%的注冊(cè)轉(zhuǎn)化率？》

2、轉(zhuǎn)變思維：
《為何說(shuō)設(shè)計(jì)師是解決問(wèn)題的人（附思辨提高法）》

3、實(shí)戰(zhàn)解說(shuō)：
《如何從甲方抽象的概念里提煉LOGO創(chuàng)意》

原文地址：designschool
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量107萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com