50個讓用戶流連忘返的網站頁頭設計(上)

 　　在模板滿天飛的今天，開個博客好像是一件特別簡單的事情，不是麼?平台就在那兒擺著，博主只需要去發文就好了，這有何難?

　　但是實際的狀況是，網站和博客成千上萬，想要用戶注意到你，關注你，並不是一件簡單的事情。你需要怎樣做才能從大量的同類中脫穎而出呢?

　　打造一個漂亮的博客並不要求你從頭搭建整個布局，你可有充分運用現有的模板，為它搭配上一個足夠漂亮又恰如其分的Banner 圖，加上一個走心有趣的標題，這樣一來可以更有效地吸引目標讀者和用戶。想想看，當用戶打開一個網站的時候，最先展現出來的就是網站的頁頭，用戶是否會停留很大程度上在這一刻有了決定。設計一個足夠優秀的網站頁頭 是非常有必要的。

　　那麼到底要怎麼做呢?空口無憑，讓下面50個設計案例為你展示一下效果吧。

　　1、功能說明

　　博客The Everywhereist 的博主是一位重度旅游愛好者，她和她丈夫經常滿世界溜達，留下他們的印記，並在博客上直播他們的旅行。護照、地圖、膠卷都是他們在全世界旅游的明證，而博客Banner 圖上的這些元素也足夠讓你信服。

　　2、讓標題成為為你的標志

　　52 Weeks of UX，單看名字你就知道這是一個全年無休的用戶體驗相關的博客，它的頁頭足夠簡單也足夠鮮明，你很清楚你接下來閱讀的內容一定是UX相關的文章。

　　3、類型化的設計

　　Trent Walton 的網站就是這麼做的，在標題的選取上更加類型化，這樣一來，網站上不同文章在標題上有明顯的區分，也更加容易吸引細分用戶。

　　4、展現動效

　　動效總會比靜態的元素更加吸引人，而作為一個有逼格的網站博客，VOTD 會在你打開網站的時候，加在一個漂亮的LOGO動效，充滿質感的LOGO在白色的背景上逐步展開，這種動效常常會讓人愛不釋手。

　　5、使用具有表現力的字體

　　The Wanderlust Project 的頁頭就用了一種非常有性格的手寫風字體來書寫標題，這不僅非常抓眼球，而且當字體運用到配圖當中之後，顯得網站還很有一致性。

　　6、白底黑字總不錯

　　在網頁排版中，白底黑字這種經典的搭配總歸是不會錯的，不過字體的性格和排版的方式會決定整個網站的氣質。The Socialite Family 就是一個典型的時尚網站，博文以時尚雅致的室內設計為主，字體選取也優雅得體。

　　7、讓LOGO處於中心位置

　　Premium Pixels 的網站中集合了大量的設計文章和資源，頁頭中最醒目的就是網站那個炫酷的LOGO，當鼠標懸停在上面的時候會變化。網站內容很豐富，也許你想要的資源。

　　8、字體排版和插畫搭配起來

　　這個網站的內容是關於如何給孩子們做飯的，網站頁頭 不僅采用了主題相關的插畫，而且結合了效果不錯的文字排版，結合獨特的配色，讓整個頁面看起來很好吃。

　　9、縮小頁頭字體

　　The New Minimum 是一個時尚數字雜志，纖細而現代的頁頭字體和有限的導航功能讓整個頁面看起來非常簡約。

　　10、大膽用色

　　Joy the Baker 在頁頭文字底部使用了水彩質感的襯底，讓整個頁頭的吸引力一下子提升了上來。

　　11、高清大圖頁頭

　　一圖勝千言。I Am a Food Blog 作為一個美食類博客，它的設計在同類中並不多見，設計師將導航欄縮減到非常小，然後用全屏輪播大圖充塞了整個界面，內容點題，也充滿了視覺沖擊力。

　　12、加入紋理

　　Lark and Linen 是一個室內設計的博客，設計師在頁頭標題中選用了一種手寫字體，並為字體疊加了富有質感的紋理，這和博客的主題顯得非常的貼合。

　　13、文字加插畫

　　Keiko Lynn 這個站點同樣采用了靜態的插畫和文字標題來設計頁頭，為了營造俏皮可愛的氛圍，配色和字體樣式的選取都更加的鮮艷而花哨。

　　14、使用誇張的字體尺寸

　　大自然會更加醒目。這個名為 Good Moods 的網站將網站名稱用超大的字體展現在網站首頁上，簡直就是一個直接大膽的“你好”，即使在相對出位的這類博客設計當中也是相當少見的手法。

　　15、充滿創意的圖案

　　The Five O’Clock Cocktail Blog 是一個關於雞尾酒的博客，設計師在設計頁頭的時候，將雞尾酒酒杯的元素融入到頁頭，點題又視覺化。線性圖標拼貼式的圖案不僅不會喧賓奪主，而且極具風格化。

　　16、制造視覺縱深

　　Friend of Type 的網站中集結了許多塗鴉風格的黑色圖標，頁頭則采用了綠色的塗鴉字體作為區分，頁頭和前景的內容之間加上淺陰影來營造層次感和視覺縱深，讓整個網站顯得更加層次分明。

　　17、保持極簡

　　Freunde Von Freunden是一個專注創意工作者專訪的博客，它的名字是德語，意為“朋友的朋友”。網站設計風格極簡而有品位，這種貫穿始終的風格在頁頭上體現出來，給人感覺也非常不錯。

　　18、獨樹一幟的LOGO

　　如果你的網站擁有一個設計足夠優秀的LOGO就讓它展現出來吧，Good Design 就將自家的LOGO置於頁頭正中央，醒目而到位。

　　19、漂亮的手寫字體LOGO

　　許多時尚類的網站會采用這樣的頁頭設計，手寫風格的LOGO加上簡約的導航設計，將自家品牌的氣質借由強烈的對比和個性化的設計表現出來，配合合理的留白與品牌化的配色，網站會給人一種雅致而專業的感覺。

　　20、設計一款獨特的圖案

　　現在許多網站的LOGO會采用抽閒而藝術化的圖案，優雅、獨特而且充滿了現代風，這樣的圖案可以很好地和時下流行的現代風結合到一起，但是又不會給人過強的品牌LOGO的感覺。

　　21、字體搭配

　　和撞色是一個道理，兩種不同風格的字體在有的場合會營造出強烈的錯位感，這種錯位感如果拿捏得好會非常吸引眼球又不會顯得太出戲。Homey Oh My 這個網站的頁頭就是這樣來營造視覺重心的。

　　22、漂亮的輪播圖

　　簡約的導航、整饬的標題和漂亮的輪播圖是 Harper and Haley 的首頁的特色，而其中最吸引人的是輪播圖的選取。

　　23、遠離中央的標題

　　別出機杼的標題設計也是非常吸引人的，就像Lust For Life的頁頭設計一樣，左對齊的標題不僅采用了獨特的手寫字體，而且是動態的。

　　24、極簡化

　　和保持簡約的風格不同，Lined and Unlined 的網站設計更偏向於極簡化的設計，最大限度的簡化整體設計，字體和色彩盡量簡單，讓真正有趣的內容凸顯出來。

　　25、居中放置LOGO

　　Lauren Liess 也是一個經典優雅的設計博客，和同類的時尚網站不同，占據兩行的LOGO被放大置於中央，不同的樣式更加能吸引用戶的注意力。如果你的LOGO也類似於此，不妨采用相似的設計。