想劍走偏鋒？試試這6種實驗性的網(wǎng)頁導航模式

雖然絕大多數(shù)的設計都遵循設計規(guī)則和用戶的使用習慣，但是別出機杼的設計仍然非常有市場。獨特的設計更容易讓人難忘，這一點是毋庸置疑的。在網(wǎng)頁的導航欄設計上，也是如此。隨著越來越多的網(wǎng)頁開始采用加粗的非襯線字體置于網(wǎng)頁頂部作為導航，許多有想法的設計師開始有意識的打破這一規(guī)律，別具一格，采用紛歧樣的導航模式。

當然，如果你的網(wǎng)站用戶量大，而且需要盡量降低用戶的使用門檻，遵循常規(guī)的設計更合適。如果你的網(wǎng)站是更加偏向?qū)嶒炐缘男【W(wǎng)站，有趣而好玩的導航模式，反而更適宜于用戶探索。差別的導航模式對于網(wǎng)站的影響不盡相同，針對差別的內(nèi)容、差別的用戶，你需要仔細挑選導航模式。

實驗性的導航并不具備泛用性，但是如果你在追求別出心裁的設計，那么下面這些獨特的導航設計應該能激發(fā)你的靈感。

側(cè)邊欄導航的設計多種多樣，它可以是靜態(tài)的也可以是動態(tài)的，寬度可大可小，幾乎可以隨心所欲地進行設置。

但是如果你仔細審視會發(fā)現(xiàn)，它不但僅是單純的將原本的頂部導航旋轉(zhuǎn) 90 度放到側(cè)面就好了，對于正常的上下滾動的頁面而言，常駐的側(cè)邊欄導航意味著整個頁面其他部分的長寬比和以往截然差別了。

所以，豈論側(cè)邊欄導航的寬窄如何，你都需要重新審視，尤其是它在差別尺寸、比例的屏幕下的顯示效果，而且進行合理的重設計。同時，導航中的文字如果太長，在側(cè)邊欄中還存在展示上的問題，那么你要怎么解決呢?

需要考慮的問題非常之多。

最優(yōu)的導航設計通常都不會使用太長的詞匯，而且占據(jù)的空間也相對固定。導航項目最好不要太多，如果導航欄需要滾動瀏覽那就太過了。上面Sanctum 的案例就做的足夠簡單干凈，當用戶滾動瀏覽的時候，導航會停留在對應的位置，而且隨著配景而改變色彩。

這個案例的優(yōu)秀之處在于，它的導航和配景融為一體，它的設計會促使用戶先查看圖標和名稱，再縱向滾動頁面瀏覽。

漢堡圖標的流行讓隱藏式導航大行其道，而隱藏式的設計所帶來的別的一個結(jié)果就是彈出式導航。

在桌面端上，隱藏/彈出式導航很少會占據(jù)整個屏幕，而在移動端設備上，為了保證可用性，不少的彈出菜單會選擇做成全屏式的。

隱藏/彈出式導航嚴格意義上算不上是非常實驗性的設計，但是它可以玩的非常多樣。對于一部分用戶而言，漢堡圖標并不是那么直不雅觀，也不夠熟悉。設計師可以在彈出效果、樣式和位置甚至圖標樣式上，多花點心思，玩出花頭。

上面 Caava Design 這個網(wǎng)站的彈出式導航非常有趣。在絕大多數(shù)的設計師還在使用扁平而簡單的彈出樣式的時候，他們走的更遠。這種設計讓用戶更容易注意到關(guān)鍵的信息，引導用戶瀏覽信息。

當你首次瀏覽一個需要水平滾動的網(wǎng)站的時候，體驗會非常的奇怪。首先它的物理和視覺運動標的目的和常規(guī)的縱向滾動差別，并且當你使用鼠標滾輪滾動的時候，這種交互的錯位感會極其強烈。

想要讓水平滾動式瀏覽更加自然，設計師需要加入視覺線索來幫手用戶導航，強化瀏覽邏輯和體驗。使用箭頭和定位式導航效果會非常不錯。

上方 Norgram 這個網(wǎng)站就使用了部分圖片作為視覺引導，向用戶暗示屏幕側(cè)面還有更多的內(nèi)容可供瀏覽。視覺線索的存在，使得內(nèi)容結(jié)構(gòu)和滾動標的目的顯得統(tǒng)一而自然。

有些網(wǎng)站摒除了導航這個模塊，而是選擇將所有的內(nèi)容平鋪在整個頁面之上。這種設計其實挺棘手的，因為如何頁面所承載的內(nèi)容過于復雜的話，這種模式可能會讓用戶覺得無所適從，難以下手。

無導航模式其實最適合一些小型的、目的直接而簡單的網(wǎng)站，好比一些“Comming Soon”的網(wǎng)站頁面，就不需要導航。還有一些特定工能的小網(wǎng)站，只需要簡單的滾動瀏覽，幾乎不需要太多點擊就能完成信息的獲取。

結(jié)合簡單的動畫和動效，這樣的無導航的網(wǎng)頁也可以非常有趣。不過總的來說，這樣的設計會讓人覺得缺了點什么。

標簽：九江 林芝 鹽城 東營 烏魯木齊