萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 50個讓用戶流連忘返的網站頁頭設計(下)

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

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

  26、優雅而鮮亮的外觀

26_La_Dolce_Vita-662x416

  清爽、簡約並且以字體為主,La Dolce Vita 的博客就是這麼做的,優雅又鮮明的設計令人過目難忘。

  27、只使用一種字體

27_Mine_Is_Yours-662x417

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

  28、簡單的配色方案

28_Maiedae-662x416

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

  29、可愛又簡短直接

29_Nice-662x416

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

  30、一個名稱就夠了

30_Panic_Blog-662x417

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

  31、來個圖文混拍的Banner

31_The_Little_Green_Notebook-662x416

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

  32、讓圖片和內容聯系緊密

32_The_Design_Tripper-662x418

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

  33、利用柵格

33_Storyboard-662x418

  利用柵格系統來制作故事板,這在Tumblr 中也可以實現,這樣的設計可以將標題和內容有機地整合到一起。利用柵格不僅可以讓布局更加整饬,而且讓那個用戶更容易導航。

  34、移除頁頭

34_Red_And_Toe-662x416

  如果沒有頁頭的話,那麼這個網站的打開體驗會如何?這個網站就是如此做的,去除頁頭之後,漂亮的圖片和內容組成了這個全屏式的頁面,直接而富有沖擊力。

  35、用標題和內容來覆蓋

35_This_is_Glamorous-662x416

  This Is Glamorous 是一個關於時尚和室內設計的網站,優雅的手繪字體標題和內容以更加緊湊的方式覆蓋了頁頭,極簡之余還會給人一種優雅而直接的浏覽體驗。

  36、LOGO和圖片的結合

36_Vintage_Revivals-662x417

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

  37、漫畫式的Banner

37_Thethirstywench-662x416

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

  38、繁復之美

38_TheRivetPress-662x417

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

  39、讓標題無比醒目

39_The_Local_Palate-662x417

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

  40、使用對比

40_Deaf_Pigeon-662x417

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

  41、漂亮的LOGO

41_Decor_8-662x416

  Decor8 的漂亮 LOGO被置於整個博客的正中央,這就是我們之前所說的經典而簡單的解決方案。

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

42_Chronicles_Her-662x417

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

  43、用空間制造層次感

43_Ceesk-662x418

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

  44、視覺化的字體選取

44_Car_Crush-662x417

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

  45、只使用LOGO

45_Book_Cover_Archive-662x417

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

  46、試試現代風

46_70_PP-662x416

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

  47、字體與紋理的結合

47_Baking_Addiction-662x419

  又一個標題字體與紋理結合的案例,很多時候找個有個性的字體搭配個有質感的紋理就可以很好地表現一個LOGO。

  48、放大標題字體

48_Beauty_Boring-662x417

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

  49、內容引用

49_24_Ways-662x417

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

  50、色彩鮮明的色塊

50_I_Love_Typography-662x418

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

  結語

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

copyright © 萬盛學電腦網 all rights reserved