創造性和創新性的導航設計

一個網站應該有它的獨特性 - 它是一個反映的是其背後的我的或組織。當人們訪問你的網站，你想讓它從人羣中脫穎而出，使人難忘，能過屢次回訪，並使用你的網站或與您取得聯繫。

因此，您的網站想脫穎而出，不只須要卓越的內容，也應該有創新而實用。問問本身，什麼使您的用戶更容易的生活嗎?可能須要簡單的搜索功能，或者導航菜單，可使用一些打理一下。然而，個性的網站須要貫穿始終。如下網站將激起你的食慾超凡的創造力。瀏覽並探索他們本身。

創意導航設計

導航TOYBOX應始終有須要時，並親切地消失，當用戶想專一於一個特定的任務。例如，在一個網上商店的結賬設計，導航應該始終訪問，但也爲關鍵的網站功能，如結賬形式給予足夠的突出。導航TOYBOX作到了這一點。

這感受就像你偷看後面的頁面或蓋的TOYBOX看看裏面有什麼。導航是使用方便，旋轉效果的導航欄時，他們正在使用它引導用戶的關注。隱藏導航還容許一個簡單，乾淨的設計，使用戶在觀看項目很愉快，由於這兩個項目沒有注意競爭。

信息你可能會想知道，，好比什麼TOYBOX它位於，仍能夠被髮如今一個不顯眼的導航欄在頂部。懸停效果也頗有趣，與其餘圖像獲得推回和淡出的用戶集中在一個項目上。

奧利維爾Bossel

奧利維爾Bossel的投資組合，交互設計師，頗有趣。導航元素建立爆炸的像素，當你將鼠標懸停在他們的效果。效果至關動態對比與其餘乾淨的設計。它工做得很好，由於它做爲一種視覺元素鼓勵用戶繼續經過網站。一致的視覺語音和語調補充品牌的身份。只要經過瀏覽網站，用戶體驗設計師的做品。

TSTO

TSTO，設計機構，有一個簡單而非正統的方法來設計，它的導航不一樣的是咱們期待什麼。導航元素固定在屏幕的每一個角落，劃分工做展現。建立了視覺識別與重熱粉紅色的字母，以及描述信息。層次清楚，可是，「工做」標籤的左上角，和「聯繫人」和「關於」頁面底部的標籤。在保持的風格，正在展出的做品是在同一個沉重的粉紅色字體的標題。

經過點擊工做，這像幻燈片呈現時，預覽下一個項目，當你將鼠標懸停在箭頭。圖像很大，佔用了大部分的頁面。當用戶經過點擊查看大圖像TSTO的身份和工做，他們獲得一個清晰的思路。

德里克· 德里克·博阿滕博阿滕的組合用一個禮貌的「你好」歡迎用戶在加載時，箭頭指示向下滾動。通常的設計是被低估的，它不喊你，而是輕輕地引導您完成工做。正如你從加載頁面向下滾動，頭和導航縮了回去，讓更多的空間組合。這是一個很好的例子，導航，始終是訪問的主要內容還給出了中心舞臺。

第二個故事

啊，良好醇水平滾動!第二個故事的網站像一本雜誌在平板電腦上的應用程序。它具備創新性的，由於它不具備一個典型的Web頁面的觸感和它水平滾動。的內容被佈置在列中，每一個部分垂直滾動。過導航錨定到左邊，這有助於創建的節奏。當您查看導航最大限度地減小這種組合，酒吧上空盤旋時，在左邊，再次出現。您能夠選擇在縮略圖視圖或幻燈片查看投資組合。

正如它的名字代表有嚴重，有嚴重嬉鬧它有一個元素。迎接你的導航被設計成左右的氣球漂浮。友好的動畫建立運動，不然靜態網站，爲品牌定下了基調。雖然你能夠回來的主頁，在任何階段，一個微妙的導航欄會出如今頁面底部。該網站功能，與飛濺工做室的個性樂趣。其實，它讓我想起了時髦的Flash動畫的好日子(EYE4U，任何人?)，但由於這個網站應該是有點頑皮，它的工做原理以及在此背景下。

最小的猴子

滾動經過這種大膽的設計簡單的文章，讓我想起了瀏覽書架。懸停效果爲用戶挑出一篇文章的重點。這個網站上也有一個聰明的設計：當您點擊一個選項卡上的「關於」和「聯繫」部分，頁面降低到透露的信息。這是一個簡單的方式提供信息，而無需重定向到另外一個頁面。

然而，觀看老的文章也不是那麼容易，由於沒有搜索功能。若是用戶正在尋找一個特定的文章，他們將不得不滾動來查找。搜索功能太多不改變總體的設計將是有益的。

LayerVault

它是驚人的，能夠有什麼樣的影響，一個簡單，乾淨的佈局與俏皮的色彩和有趣的動畫。LayerVault平衡白色空間和微妙的動畫陰謀和從事用戶。動畫能夠用來講明一個點，引導用戶經過一個網站，甚至說明了如何使用。動畫並不老是這樣的伎倆，，但LayerVault適用應謹慎，只有當用戶在瀏覽頁面的特定部分。結果呢?奠基了良好的頁面，耐看，有吸引力的插圖。

遁飛

遁飛設計巧妙，標誌動畫頁面正在加載新穎和時髦。導航固定在頂部，看起來像一個離港及抵港板的，好像你已經在機場!下拉菜單看起來像一個旅遊清單，行之有效的主題。當你點擊一個位置，而後向下滾動，全部的重要信息仍然固定在頂部，訪問的內容更容易，更溫馨，強悍的旅客。

逃生飛行最大化利用使人驚歎的攝影，其空間。這正是你想從一個旅遊網站。它可讓你的冒險等待着，精美的展現了驚人的目的地有點味道。當你將鼠標懸停在一個目的地，你會發現，正是你須要知道：門票價格，天氣情況，飛行時間和行程長度。你還能有什麼要求呢?

aSCIIaRENa

調用全部ASCII愛好者!九十年代惡臭aSCIIaRENa。人們能夠註冊併發布新聞的牆壁上，提交本身的文字藝術，並在牆壁上的名氣特點。

照片是Sartorialst本網站上的焦點，並設計支持，絕不費力地。更重要的是，網站使用懸停效果至關優雅;字幕幻燈片從側面再次滑出，光標以後。

後面的人SilkTricky SilkTricky是打破現狀，以及他們的網站並無放下。鼠標在圖像上建立一個有趣的效果。頁面上的運動創造了一種陰謀活動的用戶。在此單頁網站，用戶沒必要點擊從頁面瀏覽。只需點擊「查看」，所選擇的文章摺疊的其餘文章推卸。這將是一個很好的方式來展現攝影組合，太。

SumAll

SumAll的佈局是乾淨的，沒有沒必要要的額外的，會分散用戶的注意力。懸停在一個簡單低調的方式，揭示了更多的信息和轉換是一個擴展懸停效果。當你點擊一個按鈕，簡潔的信息和選項出如今下面。我很喜歡，你是否是重定向到另外一個網頁，當你點擊一個選項，而是整齊的信息出現下面的按鈕。一個缺點：導航是沒有反應，看着破碎而沒法 ​​在較小的意見。

便飯

對不起，這一個如此熱心，但聚餐呈現出夢幻般的用戶體驗。大方的白色空間，能夠幫助用戶訪問他們須要什麼，當他們須要的時候。表單和按鈕有新鮮和開放的審美，使他們很容易發現和使用。文字和漂亮的圖形的方式，引導用戶經過網站。按鈕和圖標很好地協同工做，全部按鈕和輸入區感受一致，引人入勝。位精心挑選的排版和一個微妙的，乾淨的用戶界面如何從事取悅用戶很長的路要走，這是一個很好的例子。

Lowdi

單頁響應佈局至關精美。Lowdi使用線條和形狀來陪襯部分的頁面，一個偉大的方式脫離傳統的四四方方的佈局。我愛「如今訂購」按鈕註冊成立的線條和形狀的設計。這些元素調整到你的屏幕，並設計有效地維護流貫穿始終，這使得方便觀看。

Barcamp奧馬哈

Barcamp奧馬哈是一個在線的活動邀請。單頁的工具，有效地引導用戶經過敘述一致的視覺主題。全部的本質是什麼，什麼時候何地資訊頁面的頂部，但設計敦促用戶向下滾動才能看到他們能找到什麼。我真的很喜歡Twitter和Facebook圖標的巧妙融合。

當用戶向下滾動，更多的信息提供系統，和佈局保持整齊，簡潔，大膽的標題。會議會談的類別說明用簡單的動畫，以保持用戶從事。一旦你向下滾動建設，並達到地面，正等着你的聯繫信息，方便。

Combadi

這個網站感到寧靜很快，由於它的負載，精心設計的結果。雖然它不會有大量的白色空間，它不以爲幽閉恐懼症。標籤懸停擴大，提供更多的信息和提升可用性。隨着其餘元素，這種效應傳遞一個通風，平靜的感受。設計反映了詞彙的網站，以及各類元素的共同努力，以實現連貫一致的身份。

沃勒溪水利：最後四

懸停效果應該不只提供更多的信息，並且還有助於網站的視覺吸引力。擴大圖像，當你將鼠標懸停在該網站確實是至關漂亮。形象也改變，從灰度的全綵色標題。其效果是至關誘人。

提起

奠基了網站上的產品或項目時，很容易落得靜態的目錄式視圖。電梯的簡單的懸停效果旋轉顯示的3-D版本的書籍。這看似微小和簡單的視覺效果，真正使網站更有趣。涉及用戶感受，並能夠與網站進行交互。你能夠作到這一點的3-D效果。

雪鳥

雪鳥是一個動態的網站，涉及用戶。顯示當前的天氣，當你將鼠標懸停在摺疊，揭示本週預測。「完整報告」按鈕懸停效果是潛移默化的，由於它變換成直角，圓角還沒有生效。玩笑是三角形的，看起來像一種雪鳥的翅膀;上空盤旋時，他們得到較大視圖展開成一個正方形。

蝕刻

的方形部分牢牢地奠基在這個網站上，但不感到侷促。在左上角的導航佔用空間小，由於圖標用於各類類別。您能夠切換導航顯示和隱藏在大視圖，經過點擊菜單圖標。響應式設計使得在任何設備上訪問的網站很容易，而失去功能或品牌號召力。

 

本文由紅蜘蛛網絡聯盟（www.rswebun.com）編譯，原文地址：http://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/