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

雖然絕大多數的設計都遵循設計規則和用戶(hù)的使用風(fēng)俗，但是標新立異的設計仍然特別很是有場(chǎng)。獨特的設計更容易讓人難忘，這一點(diǎn)是毋庸置疑的。在網(wǎng)頁(yè)的導航欄設計上，也是如此。隨著(zhù)越來(lái)越多的網(wǎng)頁(yè)開(kāi)始采用加粗的非襯線(xiàn)字體置于網(wǎng)頁(yè)頂部作為導航，很多有想法的設計師開(kāi)始故意識的打破這一規律，別出機杼，采用不一樣的導航模式。

當然，假如你的網(wǎng)站用戶(hù)量大，并且必要盡量降低用戶(hù)的使用門(mén)檻，遵循常規的設計更合適。假如你的網(wǎng)站是更加偏向實(shí)驗性的小網(wǎng)站，風(fēng)趣而好玩的導航模式，反而更適宜于用戶(hù)探索。不同的導航模式對于網(wǎng)站的影響不盡雷同，針對不同的內容、不同的用戶(hù)，你必要細心遴選導航模式。

實(shí)驗性的導航并不具備泛用性，但是假如你在尋求別具一格的設計，那么下面這些獨特的導航設計應該能激發(fā)你的靈感。

側邊欄導航

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

但是假如你細心審視會(huì )發(fā)現，它不僅僅是單純的將本來(lái)的頂部導航旋轉 90 度放到側面就好了，對于正常的上下滾動(dòng)的頁(yè)面而言，常駐的側邊欄導航意味著(zhù)整個(gè)頁(yè)面其他部分的長(cháng)寬比和以往截然不同了。

所以，不論側邊欄導航的寬窄如何，你都必要重新審視，尤其是它在不同尺寸、比例的屏幕下的表現結果，并且進(jìn)行合理的重設計。同時(shí)，導航中的筆墨假如太長(cháng)，在側邊欄中還存在展示上的題目，那么你要怎么解決呢?

必要考慮的題目特別很是之多。

最優(yōu)的導航設計通常都不會(huì )使用太長(cháng)的詞匯，并且占有的空間也相對固定。導航項目最好不要太多，假如導航欄必要滾動(dòng)欣賞那就太過(guò)了。上面Sanctum 的案例就做的充足簡(jiǎn)單干凈，當用戶(hù)滾動(dòng)欣賞的時(shí)候，導航會(huì )停頓在對應的位置，并且隨著(zhù)背景而改變色彩。

這個(gè)案例的良好之處在于，它的導航和背景融為一體，它的設計會(huì )促使用戶(hù)先查看圖標和名稱(chēng)，再縱向滾動(dòng)頁(yè)面欣賞。

隱蔽和彈出式導航

漢堡圖標的流行讓隱蔽式導航大行其道，而隱蔽式的設計所帶來(lái)的另外一個(gè)效果就是彈出式導航。

在桌面端上，隱蔽/彈出式導航很少會(huì )占有整個(gè)屏幕，而在移動(dòng)端設備上，為了保證可用性，不少的彈出菜單會(huì )選擇做成全屏式的。

隱蔽/彈出式導航嚴酷意義上算不上是特別很是實(shí)驗性的設計，但是它可以玩的特別很是多樣。對于一部分用戶(hù)而言，漢堡圖標并不是那么直觀(guān)，也不夠認識。設計師可以在彈出結果、樣式和位置甚至圖標樣式上，多花點(diǎn)心思，玩出花頭。

上面 Caava Design 這個(gè)網(wǎng)站的彈出式導航特別很是風(fēng)趣。在絕大多數的設計師還在使用扁平而簡(jiǎn)單的彈出樣式的時(shí)候，他們走的更遠。這種設計讓用戶(hù)更容易細致到關(guān)鍵的信息，指導用戶(hù)欣賞信息。

水平滾動(dòng)

當你首次欣賞一個(gè)必要水平滾動(dòng)的網(wǎng)站的時(shí)候，體驗會(huì )特別很是的新鮮。首先它的物理和視覺(jué)活動(dòng)方向和常規的縱向滾動(dòng)不同，而且當你使用鼠標滾輪滾動(dòng)的時(shí)候，這種交互的錯位感會(huì )極其強烈。

想要讓水平滾動(dòng)式欣賞更加天然，設計師必要加入視覺(jué)線(xiàn)索來(lái)幫助用戶(hù)導航，強化欣賞邏輯和體驗。使用箭頭和定位式導航結果會(huì )特別很是不錯。

上方 Norgram 這個(gè)網(wǎng)站就使用了部分圖片作為視覺(jué)指導，向用戶(hù)暗示屏幕側面還有更多的內容可供欣賞。視覺(jué)線(xiàn)索的存在，使得內容結構和滾動(dòng)方向顯得同一而天然。

無(wú)導航模式

有些網(wǎng)站擯棄了導航這個(gè)模塊，而是選擇將所有的內容平鋪在整個(gè)頁(yè)面之上。這種設計其實(shí)挺棘手的，由于如何頁(yè)面所承載的內容過(guò)于復雜的話(huà)，這種模式可能會(huì )讓用戶(hù)覺(jué)得無(wú)所適從，難以動(dòng)手。

無(wú)導航模式其實(shí)最適合一些小型的、目的直接而簡(jiǎn)單的網(wǎng)站，比如一些“Comming Soon”的網(wǎng)站頁(yè)面，就不必要導航。還有一些特定工能的小網(wǎng)站，只必要簡(jiǎn)單的滾動(dòng)欣賞，幾乎不必要太多點(diǎn)擊就能完成信息的獲取。

結合簡(jiǎn)單的動(dòng)畫(huà)和動(dòng)效，如許的無(wú)導航的網(wǎng)頁(yè)也可以特別很是風(fēng)趣。不過(guò)總的來(lái)說(shuō)，如許的設計會(huì )讓人覺(jué)得缺了點(diǎn)什么。

帶標記的單頁(yè)式設計

很多良好的實(shí)驗性的網(wǎng)頁(yè)設計都采用單頁(yè)式設計作為重要載體。而這種選擇也是有道理的：用戶(hù)不會(huì )在單頁(yè)式設計中迷失。

而與此同時(shí)，長(cháng)單頁(yè)設計中，用戶(hù)必要通過(guò)賡續向下滾動(dòng)來(lái)欣賞信息，欣賞到什么程度，用必要通過(guò)標記、目錄和進(jìn)度條如許的視覺(jué)標識來(lái)判斷，而這本質(zhì)上和導航的功能異曲同工。

在上面的Socius 頁(yè)面的右側，使用了很多同類(lèi)網(wǎng)站都采用的小圓點(diǎn)來(lái)作為視覺(jué)標識，當光標懸停在小圓點(diǎn)上的時(shí)候，會(huì )有信息浮現，告訴用戶(hù)這些區域的內容。同樣的，用戶(hù)可以通過(guò)點(diǎn)擊這些小圓點(diǎn)快速跳轉到特定的區域。

當你采用如許的設計之時(shí)，技巧在于盡量讓導航定位快一些，利索的切換能夠讓整個(gè)體驗更加令人舒適。

玄妙的邊緣導航

和側邊欄導航不同，這種完全旋轉 90 度到右側的筆墨導航，設計的更加玄妙，通常出如今小型的作品展示型的網(wǎng)頁(yè)上。就像上方這個(gè)名為S的網(wǎng)站。

這種風(fēng)格的導航只會(huì )使用筆墨，并且條款通常會(huì )特別很是少，字體也相對會(huì )少。這種導航元素會(huì )隨著(zhù)界面、元素的轉變而發(fā)生改變，甚至在某些界面中會(huì )消散。

和側邊欄式的導航雷同，如許的邊緣導航也會(huì )影響到整個(gè)界面比例，不過(guò)總體上是很玄妙的，這種影響特別很是小。

結語(yǔ)

在導航設計上，絕大多數的設計師都樂(lè )意遵循傳統的設計。不過(guò)今天所談及的這些實(shí)驗性的設計，也越來(lái)越多的出如今新的網(wǎng)站設計上，大概你會(huì )在未來(lái)的設計趨勢文章當中看到這些元素。