人
已閱讀
已閱讀
網站開發6種實驗性的網頁導航模式
來源:lexintech.com ?? ?? 發布時間:2017-08-17
雖然絕大多數的設計都遵循設計規則和用戶的使用習慣,但是標新立異的設計仍然非常有市場。獨特的設計更容易讓人難忘,這一點是毋庸置疑的。在網頁的導航欄設計上,也是如此。隨著越來越多的網頁開始采用加粗的非襯線字體置于網頁頂部作為導航,許多有想法的設計師開始有意識的打破這一規律,別出機杼,采用不一樣的導航模式。下面這些獨特的導航設計應該能激發你的靈感。

1、側邊欄導航
側邊欄導航的設計多種多樣,它可以是靜態的也可以是動態的,寬度可大可小,幾乎可以隨心所欲地進行設置。
側邊欄導航的設計多種多樣,它可以是靜態的也可以是動態的,寬度可大可小,幾乎可以隨心所欲地進行設置。
但是如果你仔細審視會發現,它不僅僅是單純的將原本的頂部導航旋轉 90 度放到側面就好了,對于正常的上下滾動的頁面而言,常駐的側邊欄導航意味著整個頁面其他部分的長寬比和以往截然不同了。
所以,不論側邊欄導航的寬窄如何,你都需要重新審視,尤其是它在不同尺寸、比例的屏幕下的顯示效果,并且進行合理的重設計。同時,導航中的文字如果太長,在側邊欄中還存在展示上的問題,那么你要怎么解決呢?
需要考慮的問題非常之多。
最優的導航設計通常都不會使用太長的詞匯,并且占據的空間也相對固定。導航項目最好不要太多,如果導航欄需要滾動瀏覽那就太過了。
2、隱藏和彈出式導航
2、隱藏和彈出式導航
漢堡圖標的流行讓隱藏式導航大行其道,而隱藏式的設計所帶來的另外一個結果就是彈出式導航。
在桌面端上,隱藏/彈出式導航很少會占據整個屏幕,而在移動端設備上,為了保證可用性,不少的彈出菜單會選擇做成全屏式的。
隱藏/彈出式導航嚴格意義上算不上是非常實驗性的設計,但是它可以玩的非常多樣。對于一部分用戶而言,漢堡圖標并不是那么直觀,也不夠熟悉。設計師可以在彈出效果、樣式和位置甚至圖標樣式上,多花點心思,玩出花頭。
3、水平滾動
當你首次瀏覽一個需要水平滾動的網站的時候,體驗會非常的奇怪。首先它的物理和視覺運動方向和常規的縱向滾動不同,而且當你使用鼠標滾輪滾動的時候,這種交互的錯位感會極其強烈。
4、無導航模式
3、水平滾動
當你首次瀏覽一個需要水平滾動的網站的時候,體驗會非常的奇怪。首先它的物理和視覺運動方向和常規的縱向滾動不同,而且當你使用鼠標滾輪滾動的時候,這種交互的錯位感會極其強烈。
4、無導航模式
有些網站摒除了導航這個模塊,而是選擇將所有的內容平鋪在整個頁面之上。這種設計其實挺棘手的,因為如何頁面所承載的內容過于復雜的話,這種模式可能會讓用戶覺得無所適從,難以下手。
無導航模式其實最適合一些小型的、目的直接而簡單的網站,比如一些“Comming Soon”的網站頁面,就不需要導航。還有一些特定工能的小網站,只需要簡單的滾動瀏覽,幾乎不需要太多點擊就能完成信息的獲取。
5、帶標記的單頁式設計
5、帶標記的單頁式設計
許多優秀的實驗性的網頁設計都采用單頁式設計作為主要載體。而這種選擇也是有道理的:用戶不會在單頁式設計中迷失。
而與此同時,長單頁設計中,用戶需要通過不斷向下滾動來瀏覽信息,瀏覽到什么程度,用需要通過標記、目錄和進度條這樣的視覺標識來判斷,而這本質上和導航的功能異曲同工。
6、微妙的邊緣導航
6、微妙的邊緣導航
和側邊欄導航不同,這種完全旋轉 90 度到右側的文字導航,設計的更加微妙,通常出現在小型的作品展示型的網頁上。
這種風格的導航只會使用文字,并且條目通常會非常少,字體也相對會少。這種導航元素會隨著界面、元素的變化而發生改變,甚至在某些界面中會消失。
- 上一篇:如何開發一個用戶體驗好的網站
- 下一篇:電商類型的網站常用顏色搭配