無論你喜歡不喜歡，漢堡圖示反正已是大勢所趨了。今年無數的網站將這個小元￥素納入到介面中來，成為頁面導航的主要群組成部份。無非漢堡圖示並非今年獨一的導航設計趨勢。全螢幕導航、底部導航等許多設計手法都是網頁設計師們的心頭好。今天這篇文章將會對今年所流行的10個導航設計趨勢進行總結，並附上精彩案例若干，記得珍藏喲。
1、全螢幕導航
當導航是整個網頁設計的核心的時候，頁面會是怎麼樣的？只要合理地策動整合，全螢幕導航其實是一種非常有效的技術，使用者可以更為便捷地切換到不同的頁面，內容成為更為觸手可及的東西。
全螢幕導航式頁面可以做的非常顯然，也可以以更為微妙的模式呈現出來。使用者是否真的非得清楚地意識到它是導航呢？並不必定，假設你設計的夠合理，使用者會在無心識間充沛應用起它的導航功能。
2、底部導航
絕大部份的導航會置於網頁的頂部，這也是最常見的模式。頂部的導航相符使用者的瀏覽習氣，也相符通常的網頁設計的邏輯。
然而置於底部的導航欄更有意思，它的設計再也不拘泥於頂部導航設計的規程，它可以設計得更大，在許多一頁式頁面中這種導航的型態還可以更為自由多樣。
無非這種導航設計最佳是常駐於底部，防止使用者迷失，利便定位也易於回到首頁。
3、垂直導航選單
打破一般設計的手法有不少，其中之一就是將導航菜當設計成直印的。垂直的導航設計並非簡單的將橫印變為直印的就成，你需要結合內容從新思考整個網站的佈局以及空間的使用。
最流行的兩種這種排版，一種是使用漢堡選單的暗藏式的導航選單，另一種使用的是固定的側邊欄來承載選單。
第二種選單的有趣之處在於，它為網站設計提供了一種新的視覺設計可能性。同時，這種導航在小螢幕上可以做成懸停暗藏式的，需要的時候點擊顯示。
4、無導航模式
有些規模較小的網站會選取使用無導航的輕量級框架來設計網站，這裡需要的注意的是，這種網站一般為一頁網站。這種設計其實是可行的，尤為是用作預告、預覽或是介紹功用的時候。
假設你的網站包孕諸多頁面，其實並不舉薦這種設計，儘管有的網站還真就是這麼做的，並且做的不錯。Quincy Requin & Associes 的Q&A頁面就是這麼設計的，每一個問題連結到一個獨立的頁面。這種功能的獨特性使得這種設計顯得並不突兀。
5、滑出選單
滑出式導航選單已經流行了一陣子了，這種設計讓挪動端的頁面設計體驗更為優良，當使用者開啟舊檔頁面的時候第一眼看到的會是主要的內容而非選單，給使用者更好的第一印象。耳熟能詳的漢堡圖示在這種場合下出鏡率也非常之高。
當然，這種滑出選單的設計也可以非常靈敏的應用在大螢幕上，響應式全螢幕滑出導航也可以給人愉悅的體驗，畢竟很少有桌面網頁會享有這樣「挪動端」的設計福利。
6、巨型選單
這種大型的導航選單設計在幾年前有短暫的流行，並且大多應用在擁有大量細份內容的企業站台。因為這種導航選單的設計並不適宜於挪動端的顯示，因而並未大規模流行。無非現在設計師開始從新斟酌這種巨型選單在今天使用的可能性。
作為大型零售企業的Target ，目前就採納的這樣的設計。這個巨型選單的完成度極高，兩級式的選單設計，第一級常駐於頁面，第二級選單盤踞的空間是固定的，這樣一來看起來頗為整齊。這樣的設計會讓頁面看起來整齊而乾淨。
7、動畫導航元￥素
動效是近些年來的設計重頭戲，而它在導航中獲得更多的應用也是自然的事情。當動效融入導航設計中的時候，並不需要過於繁雜的展示。
漂亮的懸停動效，或是利落的跳躍效果，均可以用來引誘使用者。案例中的導航設計也非常貼心，導航藉助動效延展成為彩色的線條，增添使用者點擊的面積。動效不僅讓使用者曉得他們在哪裡，而且以更為清晰的模式引誘他們去點擊。
小巧微妙的動效不僅帶來不錯的視覺加成，而且為使用者帶來驚喜，激勵使用者動作，提醒使用者介面的邊界。
8、卡片式導航選項
Pinterest 就是典型，它所使用的卡片式導航幾乎存在於網站的所有角落，清晰直觀，簡單大氣，幾乎所有使用者均可以在這種導航下找到他們想要的東西。
每一個卡片可以承載一個特定的種類，也可以容納若干小的分支，這種設計自由而充溢延展性，你可以在這樣的網站裡面往返點擊探索一終日。
谷歌的Material Design的逐漸推廣則讓這種設計為群眾所熟知，並且愈來愈深刻人心。
9、無按鈕導航
在絕大多數使用者對網際網路並不熟識的階段，擬物化的按鈕設計是引誘大家點擊的主要手腕，而跟著網路的大規模普及以及扁平化/現代風的流行，無按鈕的文字導航也擁有了愈來愈大的市場。
無按鈕導航以及大圖背景配合起來非常不錯，這個時候無按鈕導航設計足夠簡單，也擁有極強的可讀性，可以以及背景形成鮮亮的對照。控制好文字的間距，確保使用者有足夠的空間瀏覽以及點擊。
10、一頁卷動導航
當網站使用一頁設計的時候，它的導航就是你的手指以及滑鼠。只需要你翻下去，內容就會持續不斷地到你的面前。
對于不含有大量內容的網站而言，一頁式的導航的效果其實非常不錯。這樣的網站只需要簡單的向下卷動動作就能搞定，使用者也期待卷動閱讀的結果。無非這樣的頁面需要給予使用者足夠的刺激以及吸引力，才能激勵他們閱讀下去，所以請務勢必有趣的內容呈現給他們。
福利：5個擁有獨特導航設計的網站
下面舉薦的5個網站在導航設計上非常有特色，最佳開啟舊檔網站細心體會它們的獨特設計。
Adwyse
儘管設計師採納了標準的漢堡圖示選單，然而當你點開圖示的時候，導航會盤踞全螢幕，非常不錯。
Cave a Bieres
你能在這個網站中找到導航元￥素麼？設計師將導航暗藏在視覺化的故事之中，非常不錯。
Seeing Data
這個網站完整是一個訊息的迷宮。你的每次點擊都會為你展示一群組資料集，給你不同的選取。看起來它以及導航毫無關系，然而它真就是個導航。
Ludlow Kingsley
這個網站的導航是暗藏在底部的開始按鈕旁邊的三角形之中。這種設計模式挺尤其的，激勵使用者去點擊或是卷動。
Nike LiDyana
這個網站同樣藉助導航來說故事，然而不同於絕大多數的網站，導航會以更為獨特的模式，將你引誘到更為有趣之處。
結語
導航的設計多樣而有趣，然而導航如何使用，仍然要結合你的項目的具體特徵來抉擇的。導航存在的目的是引誘使用者、梳理內容、強化流程，假設從使用者的角度或是設計的目的從新思考導航，你會發現導航擁有許多可能性。
------
原文位址：designshack
優設譯者：@陳子木
轉摘請註明優設網譯文出處，謝謝各位小編。
關注優良網頁設計官方微信號：youshege；以及百萬設計師一塊兒來學習設計吧
無論你喜歡不喜歡，漢堡圖示反正已是大勢所趨了。今年無數的網站將這個小元￥素納入到介面中來，成為頁面導航的主要群組成部份。無非漢堡圖示並非今年獨一的導航設計趨勢。全螢幕導航、底部導航等許多設計手法都是網頁設計師們的心頭好。今天這篇文章將會對今年所流行的10個導航設計趨勢進行總結，並附上精彩案例若干，記得珍藏喲。
1、全螢幕導航
當導航是整個網頁設計的核心的時候，頁面會是怎麼樣的？只要合理地策動整合，全螢幕導航其實是一種非常有效的技術，使用者可以更為便捷地切換到不同的頁面，內容成為更為觸手可及的東西。
全螢幕導航式頁面可以做的非常顯然，也可以以更為微妙的模式呈現出來。使用者是否真的非得清楚地意識到它是導航呢？並不必定，假設你設計的夠合理，使用者會在無心識間充沛應用起它的導航功能。
2、底部導航
絕大部份的導航會置於網頁的頂部，這也是最常見的模式。頂部的導航相符使用者的瀏覽習氣，也相符通常的網頁設計的邏輯。
然而置於底部的導航欄更有意思，它的設計再也不拘泥於頂部導航設計的規程，它可以設計得更大，在許多一頁式頁面中這種導航的型態還可以更為自由多樣。
無非這種導航設計最佳是常駐於底部，防止使用者迷失，利便定位也易於回到首頁。
3、垂直導航選單
打破一般設計的手法有不少，其中之一就是將導航菜當設計成直印的。垂直的導航設計並非簡單的將橫印變為直印的就成，你需要結合內容從新思考整個網站的佈局以及空間的使用。
最流行的兩種這種排版，一種是使用漢堡選單的暗藏式的導航選單，另一種使用的是固定的側邊欄來承載選單。
第二種選單的有趣之處在於，它為網站設計提供了一種新的視覺設計可能性。同時，這種導航在小螢幕上可以做成懸停暗藏式的，需要的時候點擊顯示。
4、無導航模式
有些規模較小的網站會選取使用無導航的輕量級框架來設計網站，這裡需要的注意的是，這種網站一般為一頁網站。這種設計其實是可行的，尤為是用作預告、預覽或是介紹功用的時候。
假設你的網站包孕諸多頁面，其實並不舉薦這種設計，儘管有的網站還真就是這麼做的，並且做的不錯。Quincy Requin & Associes 的Q&A頁面就是這麼設計的，每一個問題連結到一個獨立的頁面。這種功能的獨特性使得這種設計顯得並不突兀。
5、滑出選單
滑出式導航選單已經流行了一陣子了，這種設計讓挪動端的頁面設計體驗更為優良，當使用者開啟舊檔頁面的時候第一眼看到的會是主要的內容而非選單，給使用者更好的第一印象。耳熟能詳的漢堡圖示在這種場合下出鏡率也非常之高。
當然，這種滑出選單的設計也可以非常靈敏的應用在大螢幕上，響應式全螢幕滑出導航也可以給人愉悅的體驗，畢竟很少有桌面網頁會享有這樣「挪動端」的設計福利。
6、巨型選單
這種大型的導航選單設計在幾年前有短暫的流行，並且大多應用在擁有大量細份內容的企業站台。因為這種導航選單的設計並不適宜於挪動端的顯示，因而並未大規模流行。無非現在設計師開始從新斟酌這種巨型選單在今天使用的可能性。
作為大型零售企業的Target ，目前就採納的這樣的設計。這個巨型選單的完成度極高，兩級式的選單設計，第一級常駐於頁面，第二級選單盤踞的空間是固定的，這樣一來看起來頗為整齊。這樣的設計會讓頁面看起來整齊而乾淨。
7、動畫導航元￥素
動效是近些年來的設計重頭戲，而它在導航中獲得更多的應用也是自然的事情。當動效融入導航設計中的時候，並不需要過於繁雜的展示。
漂亮的懸停動效，或是利落的跳躍效果，均可以用來引誘使用者。案例中的導航設計也非常貼心，導航藉助動效延展成為彩色的線條，增添使用者點擊的面積。動效不僅讓使用者曉得他們在哪裡，而且以更為清晰的模式引誘他們去點擊。
小巧微妙的動效不僅帶來不錯的視覺加成，而且為使用者帶來驚喜，激勵使用者動作，提醒使用者介面的邊界。
8、卡片式導航選項
Pinterest 就是典型，它所使用的卡片式導航幾乎存在於網站的所有角落，清晰直觀，簡單大氣，幾乎所有使用者均可以在這種導航下找到他們想要的東西。
每一個卡片可以承載一個特定的種類，也可以容納若干小的分支，這種設計自由而充溢延展性，你可以在這樣的網站裡面往返點擊探索一終日。
谷歌的Material Design的逐漸推廣則讓這種設計為群眾所熟知，並且愈來愈深刻人心。
9、無按鈕導航
在絕大多數使用者對網際網路並不熟識的階段，擬物化的按鈕設計是引誘大家點擊的主要手腕，而跟著網路的大規模普及以及扁平化/現代風的流行，無按鈕的文字導航也擁有了愈來愈大的市場。
無按鈕導航以及大圖背景配合起來非常不錯，這個時候無按鈕導航設計足夠簡單，也擁有極強的可讀性，可以以及背景形成鮮亮的對照。控制好文字的間距，確保使用者有足夠的空間瀏覽以及點擊。
10、一頁卷動導航
當網站使用一頁設計的時候，它的導航就是你的手指以及滑鼠。只需要你翻下去，內容就會持續不斷地到你的面前。
對于不含有大量內容的網站而言，一頁式的導航的效果其實非常不錯。這樣的網站只需要簡單的向下卷動動作就能搞定，使用者也期待卷動閱讀的結果。無非這樣的頁面需要給予使用者足夠的刺激以及吸引力，才能激勵他們閱讀下去，所以請務勢必有趣的內容呈現給他們。
福利：5個擁有獨特導航設計的網站
下面舉薦的5個網站在導航設計上非常有特色，最佳開啟舊檔網站細心體會它們的獨特設計。
Adwyse
儘管設計師採納了標準的漢堡圖示選單，然而當你點開圖示的時候，導航會盤踞全螢幕，非常不錯。
Cave a Bieres
你能在這個網站中找到導航元￥素麼？設計師將導航暗藏在視覺化的故事之中，非常不錯。
Seeing Data
這個網站完整是一個訊息的迷宮。你的每次點擊都會為你展示一群組資料集，給你不同的選取。看起來它以及導航毫無關系，然而它真就是個導航。
Ludlow Kingsley
這個網站的導航是暗藏在底部的開始按鈕旁邊的三角形之中。這種設計模式挺尤其的，激勵使用者去點擊或是卷動。
Nike LiDyana
這個網站同樣藉助導航來說故事，然而不同於絕大多數的網站，導航會以更為獨特的模式，將你引誘到更為有趣之處。
結語
導航的設計多樣而有趣，然而導航如何使用，仍然要結合你的項目的具體特徵來抉擇的。導航存在的目的是引誘使用者、梳理內容、強化流程，假設從使用者的角度或是設計的目的從新思考導航，你會發現導航擁有許多可能性。
------
原文位址：designshack
優設譯者：@陳子木
轉摘請註明優設網譯文出處，謝謝各位小編。兩岸商貿,在家工作,網路創業,創業賺錢思惟,微商平台,賺新台幣
關注優良網頁設計官方微信號：youshege；以及百萬設計師一塊兒來學習設計吧
留言列表
