人(rén)
已閱讀

網站開發6種實驗性的(de)網頁導航模式

來(lái)源：lexintech.com 發布時(shí)間：2017-08-17

雖然絕大(dà)多(duō)數的(de)設計都遵循設計規則和(hé)用(yòng)戶的(de)使用(yòng)習(xí)慣，但是标新立異的(de)設計仍然非常有市場(chǎng)。獨特的(de)設計更容易讓人(rén)難忘，這(zhè)一點是毋庸置疑的(de)。在網頁的(de)導航欄設計上，也(yě)是如此。随著(zhe)越來(lái)越多(duō)的(de)網頁開始采用(yòng)加粗的(de)非襯線字體置于網頁頂部作爲導航，許多(duō)有想法的(de)設計師開始有意識的(de)打破這(zhè)一規律，别出機杼，采用(yòng)不一樣的(de)導航模式。下(xià)面這(zhè)些獨特的(de)導航設計應該能激發你的(de)靈感。

1、側邊欄導航
側邊欄導航的(de)設計多(duō)種多(duō)樣，它可(kě)以是靜态的(de)也(yě)可(kě)以是動态的(de)，寬度可(kě)大(dà)可(kě)小，幾乎可(kě)以随心所欲地進行設置。

　　但是如果你仔細審視會發現，它不僅僅是單純的(de)将原本的(de)頂部導航旋轉 90 度放到側面就好了(le)，對(duì)于正常的(de)上下(xià)滾動的(de)頁面而言，常駐的(de)側邊欄導航意味著(zhe)整個(gè)頁面其他(tā)部分(fēn)的(de)長(cháng)寬比和(hé)以往截然不同了(le)。

　　所以，不論側邊欄導航的(de)寬窄如何，你都需要重新審視，尤其是它在不同尺寸、比例的(de)屏幕下(xià)的(de)顯示效果，并且進行合理(lǐ)的(de)重設計。同時(shí)，導航中的(de)文字如果太長(cháng)，在側邊欄中還(hái)存在展示上的(de)問題，那麽你要怎麽解決呢(ne)?

　　需要考慮的(de)問題非常之多(duō)。

　　最優的(de)導航設計通(tōng)常都不會使用(yòng)太長(cháng)的(de)詞彙，并且占據的(de)空間也(yě)相對(duì)固定。導航項目最好不要太多(duō)，如果導航欄需要滾動浏覽那就太過了(le)。

2、隐藏和(hé)彈出式導航

漢堡圖标的(de)流行讓隐藏式導航大(dà)行其道，而隐藏式的(de)設計所帶來(lái)的(de)另外一個(gè)結果就是彈出式導航。

　　在桌面端上，隐藏/彈出式導航很少會占據整個(gè)屏幕，而在移動端設備上，爲了(le)保證可(kě)用(yòng)性，不少的(de)彈出菜單會選擇做(zuò)成全屏式的(de)。

　　隐藏/彈出式導航嚴格意義上算(suàn)不上是非常實驗性的(de)設計，但是它可(kě)以玩的(de)非常多(duō)樣。對(duì)于一部分(fēn)用(yòng)戶而言，漢堡圖标并不是那麽直觀，也(yě)不夠熟悉。設計師可(kě)以在彈出效果、樣式和(hé)位置甚至圖标樣式上，多(duō)花點心思，玩出花頭。

3、水(shuǐ)平滾動
當你首次浏覽一個(gè)需要水(shuǐ)平滾動的(de)網站的(de)時(shí)候，體驗會非常的(de)奇怪。首先它的(de)物(wù)理(lǐ)和(hé)視覺運動方向和(hé)常規的(de)縱向滾動不同，而且當你使用(yòng)鼠标滾輪滾動的(de)時(shí)候，這(zhè)種交互的(de)錯位感會極其強烈。

4、無導航模式

有些網站摒除了(le)導航這(zhè)個(gè)模塊，而是選擇将所有的(de)内容平鋪在整個(gè)頁面之上。這(zhè)種設計其實挺棘手的(de)，因爲如何頁面所承載的(de)内容過于複雜(zá)的(de)話(huà)，這(zhè)種模式可(kě)能會讓用(yòng)戶覺得(de)無所适從，難以下(xià)手。

　　無導航模式其實最适合一些小型的(de)、目的(de)直接而簡單的(de)網站，比如一些“Comming Soon”的(de)網站頁面，就不需要導航。還(hái)有一些特定工能的(de)小網站，隻需要簡單的(de)滾動浏覽，幾乎不需要太多(duō)點擊就能完成信息的(de)獲取。

5、帶标記的(de)單頁式設計

許多(duō)優秀的(de)實驗性的(de)網頁設計都采用(yòng)單頁式設計作爲主要載體。而這(zhè)種選擇也(yě)是有道理(lǐ)的(de)：用(yòng)戶不會在單頁式設計中迷失。

　　而與此同時(shí)，長(cháng)單頁設計中，用(yòng)戶需要通(tōng)過不斷向下(xià)滾動來(lái)浏覽信息，浏覽到什(shén)麽程度，用(yòng)需要通(tōng)過标記、目錄和(hé)進度條這(zhè)樣的(de)視覺标識來(lái)判斷，而這(zhè)本質上和(hé)導航的(de)功能異曲同工。

6、微妙的(de)邊緣導航

和(hé)側邊欄導航不同，這(zhè)種完全旋轉 90 度到右側的(de)文字導航，設計的(de)更加微妙，通(tōng)常出現在小型的(de)作品展示型的(de)網頁上。

　　這(zhè)種風格的(de)導航隻會使用(yòng)文字，并且條目通(tōng)常會非常少，字體也(yě)相對(duì)會少。這(zhè)種導航元素會随著(zhe)界面、元素的(de)變化(huà)而發生改變，甚至在某些界面中會消失。

上一篇：如何開發一個(gè)用(yòng)戶體驗好的(de)網站
下(xià)一篇：電商類型的(de)網站常用(yòng)顔色搭配