一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

26、優雅而鮮亮的外觀

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

27、只使用一種字體

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

28、簡單的配色方案

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

29、可愛又簡短直接

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

30、一個名稱就夠了

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

31、來個圖文混拍的Banner

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

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

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

33、利用柵格

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

34、移除頁頭

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

35、用標題和內容來覆蓋

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

36、LOGO和圖片的結合

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

37、漫畫式的Banner

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

38、繁復之美

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

39、讓標題無比醒目

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

40、使用對比

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

41、漂亮的LOGO

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

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

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

43、用空間制造層次感

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

44、視覺化的字體選取

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

45、只使用LOGO

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

46、試試現代風

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

47、字體與紋理的結合

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

48、放大標題字體

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

49、內容引用

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

50、色彩鮮明的色塊

一見鐘情!50個讓用戶流連忘返的網站頁頭設計(下)

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

結語

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

【如何才能成為創造價值的設計師?】

1、數據驅動:
《思路最值錢!如何通過設計提升高達12%的注冊轉化率?》

2、轉變思維:
《為何說設計師是解決問題的人(附思辨提高法)》

3、實戰解說:
《如何從甲方抽象的概念里提煉LOGO創意》

原文地址:designschool
優設譯文:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量107萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 4
點贊 1

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。