亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

劍走偏鋒!6種實驗性的網頁導航模式!

作者:chenzimu7
分類: 觀點/經驗
2017-07-14
4218

隨著越來越多的網頁開始采用加粗的非襯線字體置于網頁頂部作為導航,許多有想法的設計師開始有意識的打破這一規律,別出機杼,采用不一樣的導航模式。

雖然絕大多數的設計都遵循設計規則和用戶的使用習慣,但是標新立異的設計仍然非常有市場。獨特的設計更容易讓人難忘,這一點是毋庸置疑的。在網頁的導航欄設計上,也是如此。隨著越來越多的網頁開始采用加粗的非襯線字體置于網頁頂部作為導航,許多有想法的設計師開始有意識的打破這一規律,別出機杼,采用不一樣的導航模式。

當然,如果你的網站用戶量大,并且需要盡量降低用戶的使用門檻,遵循常規的設計更合適。如果你的網站是更加偏向實驗性的小網站,有趣而好玩的導航模式,反而更適宜于用戶探索。不同的導航模式對于網站的影響不盡相同,針對不同的內容、不同的用戶,你需要仔細挑選導航模式。

實驗性的導航并不具備泛用性,但是如果你在追求別具一格的設計,那么下面這些獨特的導航設計應該能激發你的靈感。

側邊欄導航

側邊欄導航.png

側邊欄導航的設計多種多樣,它可以是靜態的也可以是動態的,寬度可大可小,幾乎可以隨心所欲地進行設置。

但是如果你仔細審視會發現,它不僅僅是單純的將原本的頂部導航旋轉90度放到側面就好了,對于正常的上下滾動的頁面而言,常駐的側邊欄導航意味著整個頁面其他部分的長寬比和以往截然不同了。

所以,不論側邊欄導航的寬窄如何,你都需要重新審視,尤其是它在不同尺寸、比例的屏幕下的顯示效果,并且進行合理的重設計。同時,導航中的文字如果太長,在側邊欄中還存在展示上的問題,那么你要怎么解決呢?

需要考慮的問題非常之多。

最優的導航設計通常都不會使用太長的詞匯,并且占據的空間也相對固定。導航項目最好不要太多,如果導航欄需要滾動瀏覽那就太過了。上面Sanctum 的案例就做的足夠簡單干凈,當用戶滾動瀏覽的時候,導航會停留在對應的位置,并且隨著背景而改變色彩。

這個案例的優秀之處在于,它的導航和背景融為一體,它的設計會促使用戶先查看圖標和名稱,再縱向滾動頁面瀏覽。

隱藏和彈出式導航

隱藏和彈出式導航.jpg

漢堡圖標的流行讓隱藏式導航大行其道,而隱藏式的設計所帶來的另外一個結果就是彈出式導航。

在桌面端上,隱藏/彈出式導航很少會占據整個屏幕,而在移動端設備上,為了保證可用性,不少的彈出菜單會選擇做成全屏式的。

隱藏/彈出式導航嚴格意義上算不上是非常實驗性的設計,但是它可以玩的非常多樣。對于一部分用戶而言,漢堡圖標并不是那么直觀,也不夠熟悉。設計師可以在彈出效果、樣式和位置甚至圖標樣式上,多花點心思,玩出花頭。

上面 Caava Design 這個網站的彈出式導航非常有趣。在絕大多數的設計師還在使用扁平而簡單的彈出樣式的時候,他們走的更遠。這種設計讓用戶更容易注意到關鍵的信息,引導用戶瀏覽信息。

水平滾動

水平滾動.jpg

當你首次瀏覽一個需要水平滾動的網站的時候,體驗會非常的奇怪。首先它的物理和視覺運動方向和常規的縱向滾動不同,而且當你使用鼠標滾輪滾動的時候,這種交互的錯位感會極其強烈。

想要讓水平滾動式瀏覽更加自然,設計師需要加入視覺線索來幫助用戶導航,強化瀏覽邏輯和體驗。使用箭頭和定位式導航效果會非常不錯。

上方 Norgram 這個網站就使用了部分圖片作為視覺引導,向用戶暗示屏幕側面還有更多的內容可供瀏覽。視覺線索的存在,使得內容結構和滾動方向顯得統一而自然。

無導航模式

無導航模式.jpg

有些網站摒除了導航這個模塊,而是選擇將所有的內容平鋪在整個頁面之上。這種設計其實挺棘手的,因為如何頁面所承載的內容過于復雜的話,這種模式可能會讓用戶覺得無所適從,難以下手。

無導航模式其實最適合一些小型的、目的直接而簡單的網站,比如一些“Comming Soon”的網站頁面,就不需要導航。還有一些特定工能的小網站,只需要簡單的滾動瀏覽,幾乎不需要太多點擊就能完成信息的獲取。

結合簡單的動畫和動效,這樣的無導航的網頁也可以非常有趣。不過總的來說,這樣的設計會讓人覺得缺了點什么。

帶標記的單頁式設計

帶標記的單頁式設計.jpg

許多優秀的實驗性的網頁設計都采用單頁式設計作為主要載體。而這種選擇也是有道理的:用戶不會在單頁式設計中迷失。

而與此同時,長單頁設計中,用戶需要通過不斷向下滾動來瀏覽信息,瀏覽到什么程度,用需要通過標記、目錄和進度條這樣的視覺標識來判斷,而這本質上和導航的功能異曲同工。

在上面的Socius 頁面的右側,使用了許多同類網站都采用的小圓點來作為視覺標識,當光標懸停在小圓點上的時候,會有信息浮現,告訴用戶這些區域的內容。同樣的,用戶可以通過點擊這些小圓點快速跳轉到特定的區域。

當你采用這樣的設計之時,技巧在于盡量讓導航定位快一些,利索的切換能夠讓整個體驗更加令人舒適。

微妙的邊緣導航

微妙的邊緣導航.jpg

和側邊欄導航不同,這種完全旋轉90度到右側的文字導航,設計的更加微妙,通常出現在小型的作品展示型的網頁上。就像上方這個名為S的網站。

這種風格的導航只會使用文字,并且條目通常會非常少,字體也相對會少。這種導航元素會隨著界面、元素的變化而發生改變,甚至在某些界面中會消失。

和側邊欄式的導航相同,這樣的邊緣導航也會影響到整個界面比例,不過總體上是很微妙的,這種影響非常小。

結語

在導航設計上,絕大多數的設計師都愿意遵循傳統的設計。不過今天所談及的這些實驗性的設計,也越來越多的出現在新的網站設計上,也許你會在將來的設計趨勢文章當中看到這些元素。


0
0
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務聯系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學科技園東區9號樓2層

版權信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

      9000px;">

          2欧美一区二区三区在线观看视频| 亚洲黄色免费网站| 亚洲天堂免费看| av电影天堂一区二区在线| 国产亚洲欧美日韩在线一区| 国产在线不卡一卡二卡三卡四卡| 日韩一区二区电影网| 另类小说色综合网站| 欧美三级三级三级| 亚洲一二三四在线| 久久先锋资源网| 一本到一区二区三区| 免费观看在线综合| 国产精品理论片| 欧美精品一卡两卡| 国产suv精品一区二区三区 | 日韩黄色小视频| 国产女人aaa级久久久级| 91国在线观看| 国产91精品在线观看| 人妖欧美一区二区| 亚洲1区2区3区4区| 亚洲另类在线视频| 亚洲国产成人午夜在线一区| 在线播放中文一区| 欧美亚洲动漫精品| 91免费观看视频在线| 99国产精品久久| 一本到三区不卡视频| 97久久精品人人爽人人爽蜜臀| 国产乱一区二区| 日本欧美久久久久免费播放网| 亚洲美女少妇撒尿| 中文字幕一区不卡| 亚洲乱码国产乱码精品精98午夜 | 欧美激情一区二区| 日韩精品一区二区三区在线观看 | 欧美在线|欧美| 国产白丝精品91爽爽久久| 蜜臀a∨国产成人精品| 亚洲天堂a在线| 91精品国产综合久久精品性色| 波多野结衣精品在线| 国产传媒久久文化传媒| 成人ar影院免费观看视频| 蜜臂av日日欢夜夜爽一区| 亚洲午夜国产一区99re久久| 亚洲青青青在线视频| 国产精品区一区二区三区| 91精品国产麻豆国产自产在线| 不卡在线观看av| 99在线视频精品| 色一情一乱一乱一91av| 91丨porny丨最新| 天堂成人免费av电影一区| 国产精品1区2区| 色菇凉天天综合网| 777久久久精品| 久久色在线视频| 狠狠v欧美v日韩v亚洲ⅴ| 久久精品国产精品亚洲综合| 亚洲精选在线视频| 三级影片在线观看欧美日韩一区二区| 亚洲精品一二三| 蜜臀va亚洲va欧美va天堂| 亚洲一区二区三区四区五区中文 | 色婷婷av一区二区| 久久久五月婷婷| 亚洲精品国久久99热| 亚洲国产欧美在线| 国产精品一区二区不卡| 欧美性色黄大片手机版| 日韩女优av电影| 亚洲男人的天堂在线观看| 日本成人在线不卡视频| 国产精品久久久久久久久久免费看| 欧美无砖砖区免费| 日韩精品在线网站| 亚洲一区二区三区视频在线播放 | 欧美色区777第一页| 欧美日本国产视频| 一区二区成人在线视频| 成人午夜激情影院| 2021国产精品久久精品| 亚洲柠檬福利资源导航| 日本视频一区二区| 欧美最新大片在线看| 亚洲视频在线观看三级| 成人av免费网站| 精品捆绑美女sm三区| 麻豆视频一区二区| 在线综合亚洲欧美在线视频| 亚洲一区二区三区中文字幕| 91看片淫黄大片一级在线观看| 国产精品电影一区二区三区| 大白屁股一区二区视频| 国产精品免费aⅴ片在线观看| 日韩不卡一二三区| 国产精品色哟哟| 欧洲一区在线电影| 美国毛片一区二区三区| 在线电影一区二区三区| 久久国内精品自在自线400部| 欧美va日韩va| 风流少妇一区二区| 亚洲欧美国产77777| 91女厕偷拍女厕偷拍高清| 亚洲三级在线免费观看| 一本久道久久综合中文字幕| 热久久免费视频| 国产欧美精品一区aⅴ影院 | 久久久久国产精品麻豆ai换脸 | 美女一区二区在线观看| 久久久精品2019中文字幕之3| 粉嫩一区二区三区性色av| 亚洲视频你懂的| 精品国产乱子伦一区| 91亚洲永久精品| 国产精品亚洲第一区在线暖暖韩国| 国产精品综合一区二区三区| 一区二区视频在线看| 国产清纯美女被跳蛋高潮一区二区久久w| 成人精品一区二区三区四区| 亚洲午夜激情网页| 日韩午夜小视频| 欧美性色欧美a在线播放| 国产高清一区日本| 免费高清在线一区| 亚洲6080在线| 1区2区3区欧美| 国产精品久久国产精麻豆99网站| 日韩午夜激情视频| 欧美日韩国产天堂| 91久久精品网| 粉嫩13p一区二区三区| 奇米亚洲午夜久久精品| 午夜免费久久看| 激情小说亚洲一区| 国产在线不卡一卡二卡三卡四卡| 天堂影院一区二区| 天天色综合成人网| 视频一区视频二区中文字幕| 天天色图综合网| 美女一区二区久久| 国产不卡在线播放| 91香蕉视频黄| 欧美一区二区播放| 久久久久久久久久看片| 中文字幕精品在线不卡| 久久精品亚洲精品国产欧美kt∨| 中文字幕免费观看一区| 国产精品高清亚洲| 午夜视频在线观看一区| 经典三级一区二区| 成人av第一页| 成人白浆超碰人人人人| 国产亚洲欧美一级| 亚洲一区二区三区美女| 国产乱色国产精品免费视频| 色婷婷av一区二区| 日韩欧美国产不卡| 中文字幕亚洲区| 日本女优在线视频一区二区 | 精品一区二区成人精品| 香蕉久久夜色精品国产使用方法| 亚洲人妖av一区二区| 中文字幕第一区| 亚洲成人资源在线| 在线成人小视频| 久久精品亚洲国产奇米99| 国产欧美一二三区| 天天综合色天天综合| 粉嫩久久99精品久久久久久夜| 亚洲精品一区二区三区福利| 国产日韩视频一区二区三区| 丝袜美腿成人在线| 国产精品1区2区3区| 欧美一区二区三区不卡| 国产无遮挡一区二区三区毛片日本| 亚洲精品免费在线播放| 国内成人免费视频| 欧美理论电影在线| 在线看国产日韩| 免费不卡在线观看| 91精品国产91热久久久做人人| 一区二区三区在线视频播放| 国产成人8x视频一区二区| 日韩一区二区三区av| 久久久综合九色合综国产精品| 国产综合久久久久久久久久久久| 欧美日韩成人综合天天影院| 国产精品久久久久影院| www.色综合.com| 精品国产乱码久久久久久闺蜜| 国产精一区二区三区| 国产精品色婷婷| 99久久国产综合精品色伊| 亚洲精品中文字幕乱码三区| 欧美视频在线一区二区三区| 一区二区三区四区不卡在线|