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

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

實(shí)驗(yàn)性的導(dǎo)航并不具備泛用性，但是如果你在追求別出心裁的設(shè)計(jì)，那么下面這些獨(dú)特的導(dǎo)航設(shè)計(jì)應(yīng)該能激發(fā)你的靈感。

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

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

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

需要考慮的問(wèn)題非常之多。

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

這個(gè)案例的優(yōu)秀之處在于，它的導(dǎo)航和配景融為一體，它的設(shè)計(jì)會(huì)促使用戶先查看圖標(biāo)和名稱，再縱向滾動(dòng)頁(yè)面瀏覽。

漢堡圖標(biāo)的流行讓隱藏式導(dǎo)航大行其道，而隱藏式的設(shè)計(jì)所帶來(lái)的別的一個(gè)結(jié)果就是彈出式導(dǎo)航。

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

隱藏/彈出式導(dǎo)航嚴(yán)格意義上算不上是非常實(shí)驗(yàn)性的設(shè)計(jì)，但是它可以玩的非常多樣。對(duì)于一部分用戶而言，漢堡圖標(biāo)并不是那么直不雅觀，也不夠熟悉。設(shè)計(jì)師可以在彈出效果、樣式和位置甚至圖標(biāo)樣式上，多花點(diǎn)心思，玩出花頭。

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

當(dāng)你首次瀏覽一個(gè)需要水平滾動(dòng)的網(wǎng)站的時(shí)候，體驗(yàn)會(huì)非常的奇怪。首先它的物理和視覺(jué)運(yùn)動(dòng)標(biāo)的目的和常規(guī)的縱向滾動(dòng)差別，并且當(dāng)你使用鼠標(biāo)滾輪滾動(dòng)的時(shí)候，這種交互的錯(cuò)位感會(huì)極其強(qiáng)烈。

想要讓水平滾動(dòng)式瀏覽更加自然，設(shè)計(jì)師需要加入視覺(jué)線索來(lái)幫手用戶導(dǎo)航，強(qiáng)化瀏覽邏輯和體驗(yàn)。使用箭頭和定位式導(dǎo)航效果會(huì)非常不錯(cuò)。

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

有些網(wǎng)站摒除了導(dǎo)航這個(gè)模塊，而是選擇將所有的內(nèi)容平鋪在整個(gè)頁(yè)面之上。這種設(shè)計(jì)其實(shí)挺棘手的，因?yàn)槿绾雾?yè)面所承載的內(nèi)容過(guò)于復(fù)雜的話，這種模式可能會(huì)讓用戶覺(jué)得無(wú)所適從，難以下手。

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

結(jié)合簡(jiǎn)單的動(dòng)畫(huà)和動(dòng)效，這樣的無(wú)導(dǎo)航的網(wǎng)頁(yè)也可以非常有趣。不過(guò)總的來(lái)說(shuō)，這樣的設(shè)計(jì)會(huì)讓人覺(jué)得缺了點(diǎn)什么。

標(biāo)簽：九江 林芝 鹽城 東營(yíng) 烏魯木齊