當然,如果你的網站用戶量大,並且需要盡量降低用戶的使用門檻,遵循常規的設計更合適。如果你的網站是更加偏向實驗性的小網站,有趣而好玩的導航模式,反而更適宜於用戶探索。不同的導航模式對於網站的影響不盡相同,針對不同的內容、不同的用戶,你需要仔細挑選導航模式。
實驗性的導航並不具備泛用性,但是如果你在追求別具一格的設計,那麼下面這些獨特的導航設計應該能激發你的靈感。
側邊欄導航
但是如果你仔細審視會發現,它不僅僅是單純的將原本的頂部導航旋轉90度放到側面就好了,對於正常的上下滾動的頁面而言,常駐的側邊欄導航意味著整個頁面其他部分的長寬比和以往截然不同了。
所以,不論側邊欄導航的寬窄如何,你都需要重新審視,尤其是它在不同尺寸、比例的屏幕下的顯示效果,並且進行合理的重設計。同時,導航中的文字如果太長,在側邊欄中還存在展示上的問題,那麼你要怎麼解決呢?
需要考慮的問題非常之多。
最優的導航設計通常都不會使用太長的詞彙,並且佔據的空間也相對固定。導航項目最好不要太多,如果導航欄需要滾動瀏覽那就太過了。上面 Sanctum 的案例就做的足夠簡單幹凈,當用戶滾動瀏覽的時候,導航會停留在對應的位置,並且隨著背景而改變色彩。
這個案例的優秀之處在於,它的導航和背景融為一體,它的設計會促使用戶先查看圖標和名稱,再縱向滾動頁面瀏覽。
隱藏和彈出式導航
在桌面端上,隱藏/彈出式導航很少會佔據整個屏幕,而在移動端設備上,為了保證可用性,不少的彈出菜單會選擇做成全屏式的。
隱藏/彈出式導航嚴格意義上算不上是非常實驗性的設計,但是它可以玩的非常多樣。對於一部分用戶而言,漢堡圖標並不是那麼直觀,也不夠熟悉。設計師可以在彈出效果、樣式和位置甚至圖標樣式上,多花點心思,玩出花頭。
上面 Caava Design 這個網站的彈出式導航非常有趣。在絕大多數的設計師還在使用扁平而簡單的彈出樣式的時候,他們走的更遠。這種設計讓用戶更容易注意到關鍵的信息,引導用戶瀏覽信息。
水平滾動
想要讓水平滾動式瀏覽更加自然,設計師需要加入視覺線索來幫助用戶導航,強化瀏覽邏輯和體驗。使用箭頭和定位式導航效果會非常不錯。
上方 Norgram 這個網站就使用了部分圖片作為視覺引導,向用戶暗示屏幕側面還有更多的內容可供瀏覽。視覺線索的存在,使得內容結構和滾動方向顯得統一而自然。
無導航模式
無導航模式其實最適合一些小型的、目的直接而簡單的網站,比如一些「Comming Soon」的網站頁面,就不需要導航。還有一些特定工能的小網站,只需要簡單的滾動瀏覽,幾乎不需要太多點擊就能完成信息的獲取。
結合簡單的動畫和動效,這樣的無導航的網頁也可以非常有趣。不過總的來說,這樣的設計會讓人覺得缺了點什麼。
帶標記的單頁式設計
而與此同時,長單頁設計中,用戶需要通過不斷向下滾動來瀏覽信息,瀏覽到什麼程度,用需要通過標記、目錄和進度條這樣的視覺標識來判斷,而這本質上和導航的功能異曲同工。
在上面的 Socius 頁面的右側,使用了許多同類網站都採用的小圓點來作為視覺標識,當游標懸停在小圓點上的時候,會有信息浮現,告訴用戶這些區域的內容。同樣的,用戶可以通過點擊這些小圓點快速跳轉到特定的區域。
當你採用這樣的設計之時,技巧在於盡量讓導航定位快一些,利索的切換能夠讓整個體驗更加令人舒適。
微妙的邊緣導航
這種風格的導航只會使用文字,並且條目通常會非常少,字體也相對會少。這種導航元素會隨著界面、元素的變化而發生改變,甚至在某些界面中會消失。
和側邊欄式的導航相同,這樣的邊緣導航也會影響到整個界面比例,不過總體上是很微妙的,這種影響非常小。
結語
在導航設計上,絕大多數的設計師都願意遵循傳統的設計。不過今天所談及的這些實驗性的設計,也越來越多的出現在新的網站設計上,也許你會在將來的設計趨勢文章當中看到這些元素。
本文地址: http://www.uisdc.com/experimental-navigation-patterns