20個驚艷的網(wǎng)頁導(dǎo)航賞析(譯)

簡潔高效的導(dǎo)航菜單設(shè)計，能夠有效優(yōu)化搜索，改善用戶體驗。今天，我們將研究一些網(wǎng)頁導(dǎo)航設(shè)計方案。這些案例新穎奪目，生動有趣，原創(chuàng)前衛(wèi)，令人過目難忘。其中有些設(shè)計的復(fù)雜程度更將超乎你想象。

推選這些案例，不光是因為這些創(chuàng)意的原創(chuàng)性，還有包含其中的先進設(shè)計技巧，可以啟發(fā)靈感，幫助大家對網(wǎng)頁導(dǎo)航設(shè)計領(lǐng)域有更多的認(rèn)知和了解。你可以點擊圖片到該網(wǎng)站看看～

 01 Jova 

Jova的導(dǎo)航菜單干凈、整潔、均衡且布局得當(dāng)。細直線條，網(wǎng)格布局，黑白配色方案以及清新醒目的排版，拼出了幾何韻味十足的優(yōu)雅界面。淺色的背景，與之相得益彰。

02  Beloesuhoe  

這個設(shè)計團隊很巧妙地找到了一個讓網(wǎng)站抓人眼球的方案。乍一看，似乎這是一個常規(guī)的背景圖，但是紅色的光標(biāo)點和菜單標(biāo)題則告訴我們這一切并不像看起來那么簡單。實際上，菜單項是可交互的，只要點擊畫面上的指示牌，就可以跳轉(zhuǎn)到目標(biāo)頁面。

這是基于虛擬現(xiàn)實的一個相當(dāng)有趣的解決方案。

03  First Person 

First Person網(wǎng)站最大的特色就是它那精巧、超現(xiàn)實的立方體情景圖。設(shè)計師對細節(jié)的刻畫，對透視的精準(zhǔn)把握使之更引人入勝。不可思議的是，這個立方體還有白天黑夜兩個不同的場景變化。當(dāng)然了，這并不是這個網(wǎng)站的主導(dǎo)航，它的作用只是為了能夠吸引到你的注意力。不過，它的超細節(jié)展示配上動態(tài)場景支持絕對是酷炫爆表。

04  Mint Design Company 

Mint Design Company網(wǎng)站讓人耳目一新。通過動畫表現(xiàn)，手繪插畫風(fēng)格的頁面頓時活靈活現(xiàn)。網(wǎng)站里的所有元素包括導(dǎo)航都是以契合整體藝術(shù)風(fēng)格的手法來設(shè)計的。每頁菜單都有兩版風(fēng)格，一種是包豪斯式極簡主義的寫生，另一種則是巴洛特式的華美，這兩種風(fēng)格之間采用了令人愉悅的效果進行平滑轉(zhuǎn)換。

05  Vive Latino

為了使登陸的頁面從眾多的網(wǎng)頁中脫穎而出，設(shè)計師在這里借用了涂鴉的方法。清爽的單色配上手寫字體，加上幾十個微小的移動字符，它不僅成功營造出了一種熱鬧的盛日氛圍，還是一個讓人很有點擊沖動的導(dǎo)航菜單。

06  Pete Nottage 

Pete Nottage的在線作品集以絢麗的顏色為標(biāo)志，它們賦予網(wǎng)站積極和富有創(chuàng)造力的氣息。多彩扁平化風(fēng)格元素組成的城市風(fēng)景其實是一個主導(dǎo)航，模擬的是游樂場場景。

網(wǎng)站不僅加入了各種動態(tài)效果，如移動的汽車和游艇，還允許你通過點擊來移動其中的元素。這個設(shè)計有趣且讓人欲罷不能。

07  Mathilde Jacon 

Mathilde Jacon的作品集的首頁呈現(xiàn)出的是一個有著特殊交互的循環(huán)導(dǎo)航，非常有意思。在這里，這個作品集將最重要的部分留給了導(dǎo)航；環(huán)形里的每段都是一個單獨的鏈接。

08  Moira Young

由于其精致的登陸頁籠罩著一種強烈的自然主題氛圍，Moira Young 的網(wǎng)站散發(fā)著優(yōu)雅和微妙的魅力。它的導(dǎo)航不像以往一樣顯眼；每一個鏈接都隱藏在靠近樹的一個個緩緩閃動的光點上。

09  Bancolombia

就像前一個例子，首頁呈現(xiàn)是一個景觀畫面并充滿著動態(tài)要素。然而，值得一提的是，它需要依靠Flash播放器，這與HTML5時代格格不入。

10  Nat-Ant 

這個網(wǎng)站采用的極簡主義風(fēng)格是很值得關(guān)注的。這種極簡風(fēng)格延續(xù)到功能鍵和整個頁面。登陸頁面上只有幾個分散的功能鍵，以及大片的留白。他們以一種不同尋常的方式詮釋出這種極簡主義。

11  Love Carmen Rose 

Love Carmen Rose 的在線作品集通過別具匠心的復(fù)雜圖像幕布彰顯其個性。此外該幕布還扮演渾然一體的導(dǎo)航工具的角色。“歡迎”部分看起來顯然相當(dāng)錯綜復(fù)雜。

12  Orillo 

Orillo welcomes visitors with a exquisite line-style control center. Neat and elegant, it allows users to do lots of things as well as navigate through the project. Unfortunately, the mobile and tablet versions have an alternative landing page; to get the full experience visit the desktop version.

Orille網(wǎng)站采用一個細致的白描式控制臺恭迎者它的訪客。它簡潔有力又不失雅致，用戶在整個瀏覽過程中，不僅可以借助它導(dǎo)航，還可以通過它做很多別的事情。不過網(wǎng)站的移動端和平板電腦使用了另外一種頁面載入方式，還是要用電腦網(wǎng)頁來瀏覽才能一睹全貌。

13  OK Kid

借助先進的技術(shù)，OK Kid（德國著名樂隊）網(wǎng)站采用全屏的視頻作導(dǎo)航。超強的視覺沖擊力讓人嘆為觀止。

14  The Colors of Motion 

Colors of Motion仿佛帶你經(jīng)歷一次瀏覽經(jīng)典美國戲劇的可愛旅程。該網(wǎng)站在電影情節(jié)之間有一個極具原創(chuàng)性且誘人的導(dǎo)航。它沒有任何標(biāo)志，只有多彩的一系列超薄條紋或方格，帶你穿越下一幀畫面。

15  HelloNicolas    

這個線上作品集總在第一時間抓住用戶注意力。這位藝術(shù)家用了一種新的手法，包括用搶眼的方式來演示作品。

布局被劃分為相對比較寬，全屏躍動的條紋，每個都華麗地展示著挑選過的作品。

16  Grimouville 

想通過grimouville開啟一段簡要而難忘的旅行？你可以訪問這個頂尖的網(wǎng)站。它提供的一些城市沿途有趣的交互元素可以讓你感覺真的走在城市的街道上。

17  Leidgens Piscines 

首頁將其讓人難忘的外觀歸功于兩個基本組成部分：壯觀的視頻背景定下高逼格，導(dǎo)航讓你更有效地探索項目。由于其精巧的線型讓置于中心的額外導(dǎo)航恰到好處；每個菱形以一段簡短的視頻作為特色支撐著標(biāo)題。

18   Soppo 

通過網(wǎng)格導(dǎo)航菜單，Soppo展現(xiàn)出可愛的格子風(fēng)。設(shè)計師巧妙地運用純色色塊和圖片進行混搭，并為每個單元塊添加了感知鼠標(biāo)方向的圖片遮罩效果。

19  Visit Brazil

Visit Brazil確實是一個標(biāo)志性的概念性網(wǎng)站。它的頁面通過在房間里的巡游，形成了一種交互式瀏覽，每一個元素都在講述它們自己的故事，展示巴西不同地方的旅游文化。

20  Alexandru Nastase

Alexandru Nastase網(wǎng)站的設(shè)計師巧妙地利用字體得到一個相當(dāng)直觀的外觀，從而打造一個有趣的頁面，文字導(dǎo)航都靈巧地環(huán)繞著這個頁面布局下來，塑造出獨特的層次感。

總結(jié)

另類的，不平凡的導(dǎo)航解決方案總是可以吸引并激發(fā)用戶的興趣。他們將網(wǎng)站升華為一個杰作。 

然而，無論你的導(dǎo)航看起來有多迷人和不尋常，對于導(dǎo)航來說不受干擾地直達目標(biāo)對用戶來說始終是頭等大事，所以不炫技，懂得拿捏分寸至關(guān)重要的。

翻譯：  zero  、mok、Lemon  、Esc李 、家彥蹦噠蹦、JoJo、Juey、june、RuminateWon、小胖雀兒、 H. 、Echo_海心、 Kentoness  、Maybe 、Darren 、檸.  、key 、李瀟灑、 fz__fancy、 Itachi

校對： Connie、Zoey

設(shè)計： Zoey

文章來源：http://designmodo.com/attractive-navigations/