36個網頁設計案例激發你靈感

簡單有效的導航欄設計能夠極大的提高用戶體驗,不僅能讓用戶更快找到他們想要的內容,還能適當分擔搜索引擎的壓力。

常見的導航設計我想大家都已經非常熟悉了,今天我們要分享的一些有趣的、原創的、甚至具有一定開創性的導航欄設計方案,這些優秀的設計非常引人注目,令人難忘。這些網站的導航欄設計,比起傳統的導航會相對更複雜一些,但是絕對會令你眼界大開。

當然,我們推薦這些網站並不只是因為導航欄設計,這些優秀的網站通常在技術使用和訊息呈現上也做得非常突出。只要你深入探究,一定會獲益匪淺。

Vincent Tavano

Vincent-Tavano

Vincent Tavano 的首頁一開始就出現分類,讓使用者可以清楚選擇要看的項目,算是一個整潔有特性的網頁設計。

ECC Architectural

ECC-Architectural

ECC Architectural 跳脫框架的導航設計,而側邊欄隱藏著菜單,整體動向設計的不錯。

Print Gallery

Print-Gallery

Print Gallery 頁面設計,乾淨簡潔的設計,這個個人認為可以作為作品集頁面的參考元素。

Heat Architecture

Heat-Architecture

Heat Architecture 的頁面設計以展示產品的作風去設計,讓人可以清楚看到產品。

The Mark Hotel

The-Mark-Hotel

The Mark Hotel 比較特別是首頁連到內分類的頁面,整體動向讓用戶清楚明白。

Gloria Cortina

Gloria-Cortina

Gloria Cortina 動向像是膠卷概念手法設計,這種網頁特別的設計手法可以參考。

Irene

Irene

Irene 拉霸機動向概念。

Alice + Whittles

Alice-+-Whittles

Alice + Whittles 設計簡潔、導航讓使用者明確找到,整體美術風格搭配很好。

Beth Ellery

Beth-Ellery

Beth Ellery 整體網站流動蠻酷的,利用滾輪尋找分類,蠻有新鮮感。

3sixteen — Soak Guide

hb'201510231 (1)

3sixteen — Soak Guide 單頁式介紹,特效不錯及整體流動可以給你一些設計點子。

Studio Veldwerk

Studio-Veldwerk

Studio Veldwerk 頁面設計很乾淨,導航簡潔,視覺看起來只有一個版切換頁面,很直覺,但很吃美術。

Television Centre

Television-Centre

Television Centre 網頁團隊,頁面配色及網頁排版可以參考,讓你有靈感。

Aaron Meyers

Aaron-Meyers

Aaron Meyers 這個利用三度空間概念去著手設計,感覺深入其境,有趣。

Boegli Gravures

Boegli-Gravures

Boegli Gravures 網頁轉場特效蠻酷。

Clara Rua

Clara-Rua

Clara Rua 的網頁設計,整體動向用幻燈片,並且有創意的呈現,網頁視覺設計風格搭配的恰恰好。

 

Verner

Verner

Verner 網頁設計團隊,利用燈箱概念設計導航與切換頁面。

Jova

激發你靈感的網頁設計案例

Jova的網站設計非常清爽,導航欄的設計均衡並且結構妥帖。

設計師使用細線構成的線框柵格來構建網站導航,經典的黑白配色,加上清晰銳利的英文字體,構建出優雅迷人的外觀,在柔和的背影映襯之下,給人深刻的印象。

Beloesuhoe

激發你靈感的網頁設計案例

Beloesuhoe 的設計團隊巧妙地使用布景構建出了一個獨一無二的網頁導航,非常抓人眼球。這個網站乍一看好象就是一個背景圖,但是實際上,網頁上脈動的小紅點會提示你導航的存在,它並不是看起來那麼簡單。將滑鼠行動到小紅點上,你會發現這些導航點是可交互的,並且將你引導到特定的頁面。

這種「沉浸式」的導航欄設計是個非常有趣的解決方案,可拓展的空間也相當大。

First Person

激發你靈感的網頁設計案例

First Person 整站使用了單頁滾動設計,並且通過左上方的菜單欄來進行導航引導。但是這並不是它的突出之處,當你在首頁向下滾動的時候,能夠看到一個精心製作的3D場景,整個場景會隨著白天黑夜變換主題,並且當你滑鼠行動到3D場景的特定點上的時候,能夠開通組件,進行交互,瀏覽訊息,絕對別出心裁。雖然整站導航不算突出,但是這個3D場景的導航設計,簡直帥酷爆表。

Mint Design Company

激發你靈感的網頁設計案例

說 Mint Design Company 的導航設計精美絕倫完全不是過譽。設計師幾乎是用漂亮的手繪插畫完成了整個網頁的設計,導航欄所使用的手繪圖標更是精緻,滑鼠行動到導航欄圖標處會有好玩兒的動效出現,最關鍵的是每個動效都不盡相同。

Vive Latino

激發你靈感的網頁設計案例

Viva Latino的設計團隊充分利用塗鴉的獨特效果,讓整著陸頁在同類設計中脫穎而出。乾淨的單色頁面上,漂亮的手繪排版設計和獨具個性的小人錯落混拍在一起,營造出節日的氣氛,最關鍵的是,這樣的設計也創造出獨具一格的導航模式。

Pete Nottage

激發你靈感的網頁設計案例

這個名為Pete Nottage 的網站以五彩繽紛的插畫而著稱,也使得整個網站充滿了創造性和積極的氛圍。這些扁平風的插畫以城市場景為主題,並且還是作為網站導航而存在。

為了讓這個導航欄更加好玩,網站的設計師和開發者將許多動態的元素加入到插畫中,比如行動的汽車和遊艇,那些看似靜態的景物其實也是可交互的,當你點擊它們的時候,有些建築會抖動甚至消失!這種引人入勝的設計賦予了網站獨特的氣質,讓人流連忘返樂此不疲。

Mathilde Jacon

激發你靈感的網頁設計案例

Mathilde Jacon 的這個個人作品展示頁使用了更加獨特的導航模式:嵌套環形可互動式導航欄,環形的每一段都會導向一個作品。原來導航還可以這樣做啊!

Moira Young

激發你靈感的網頁設計案例

Moira Young 的網站採用了一套自然風的主題,導航設計則以優雅的輻射狀的閃光來呈現,當你滑鼠移到這些微光之上,導航內容便會呈現,漂亮而微妙。

Bancolombia

激發你靈感的網頁設計案例

和許多之前的網站導航設計思路相近,漂亮的插畫和動態視覺元素共同構建起了它的導航欄。網站唯一與時代脫節的地方在於,它採用了Flash來實現這些功能,而非HTML5。

Nat-Ant

激發你靈感的網頁設計案例

值得一提的是,使用極簡設計風其實也可以作出別出心裁的導航欄的。正如你所看到,網頁的著陸頁非常乾淨,背景大量留白,幾個控制項散落在頁面上用作導航,不同尋常。

Love Carmen Rose

激發你靈感的網頁設計案例

Love Carmen Rose 的網頁設計也個性十足,精雕細琢的背景圖其實承載著它獨有的導航模式,雖然看起來不太顯眼,但是複雜的導航和背景圖也足夠它脫穎而出了,不是麼?

Orillo

激發你靈感的網頁設計案例

用戶打開 Orillo 網站的時候,能看到低調沉穩的背景上用簡約線條勾勒出來的控制中心。用戶可以借助這個獨特的導航欄做很多事情,唯一可惜的是它僅能在桌面端瀏覽器上呈現,行動端頁面則使用的是另外一個相對簡單的版本。

OK Kid

激發你靈感的網頁設計案例

OK Kid的網頁充分運用了影片背景的特性來設計它們的基礎導航體系。設計團隊採用視覺優先的設計原則,最終結果也並沒有令人失望。

The Colors of Motion

激發你靈感的網頁設計案例

網頁採用運動的色彩來呈現經典的美國精神,帶你開始一段旅程。結合影片劇情,設計團隊展現了一個原創而吸引人的導航設計,雖然沒有任何標識,但是那些細細的條紋會帶你走完這個旅程。

HelloNicolas

激發你靈感的網頁設計案例

從你打開這個網頁的第一秒開始,頁面所展示的作品就會吸引住你的全部注意力。網站的視覺設計非常大膽,整體布局導航通過相對較寬的可交互區域來展現,每一塊完成不同的工作。

Grimouville

激發你靈感的網頁設計案例

想不想通過Grimouville 開始一段短暫而難忘的旅程?打開這個網站就可以了。網站中那些有趣的互動元素能讓你在城市的大街小巷中實現這個夢想。

Leidgens Piscines

激發你靈感的網頁設計案例

網站的著陸頁令人難以忘懷:壯觀的影片背景和風格化明顯的導航欄,這些設計不僅讓你愉悅,還能更為高效地探索網站。雅緻的菱形導航欄中,每個區塊包含著不同的功能和相應的短片。

Soppo

激發你靈感的網頁設計案例

基於柵格的導航系統配合可愛的圖片營造出網站的整體氛圍,純色和圖片的錯落排布,不同區塊中獨特的效果,會讓你記住這個網站的。

Visit Brazil

激發你靈感的網頁設計案例

這是一個真正意義上的概念網站。通過有趣的交互,你可以在這個網站知道關於巴西這個國家許多有趣的故事。

Alexandru Nastase

激發你靈感的網頁設計案例

網站的設計師巧妙的利用排版和簡約的外觀,呈現出了網站有趣的氛圍。密集而大膽的標題周圍,圍繞著相對較小的文字導航,塑造出獨特的形式感。

結語

獨特的導航欄設計方案總能激發用戶的興趣,勾引出大家的探索欲,這些優秀的設計自然也成為網站令人難忘的優秀特徵。不過千萬別忘了,網站的整體體驗還是最重要的,樂於探索,但是不要捨本逐末。


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛
5.2018必看設計懶人包手冊
6.高手進擊懶人包影片-設計師與開發者推薦的精選影片


 

以下幾點請你深思一下

給你最好的網頁設計Gogoshark|鯊魚邦不私藏分享

 


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化