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

時(shí)下流行的側(cè)邊欄導(dǎo)航到底好不好用?

作者:譯文@陳子木
2017-05-27
4333

側(cè)邊欄導(dǎo)航看起來不錯(cuò),它簡(jiǎn)化布局的功能似乎也很強(qiáng)大,那么它真的有效么?用戶是否會(huì)認(rèn)可這種設(shè)計(jì)呢?今天,我們仔細(xì)分析一下側(cè)邊欄導(dǎo)航的優(yōu)缺點(diǎn)和使用狀況。

厭倦了傳統(tǒng)頂部導(dǎo)航的設(shè)計(jì)師,越來越偏愛側(cè)邊欄導(dǎo)航了。這種常見于頁面左側(cè)的側(cè)邊欄設(shè)計(jì),已經(jīng)成了許多獨(dú)樹一幟的設(shè)計(jì)師的選擇了。

側(cè)邊欄導(dǎo)航看起來不錯(cuò),它簡(jiǎn)化布局的功能似乎也很強(qiáng)大,那么它真的有效么?用戶是否會(huì)認(rèn)可這種設(shè)計(jì)呢?今天,我們仔細(xì)分析一下側(cè)邊欄導(dǎo)航的優(yōu)缺點(diǎn)和使用狀況,盡可能精準(zhǔn)地對(duì)這種設(shè)計(jì)手法進(jìn)行界定和判斷。

無處不在的側(cè)邊欄導(dǎo)航

側(cè)邊欄導(dǎo)航和菜單設(shè)計(jì)的演變有著密不可分的關(guān)系。響應(yīng)式設(shè)計(jì)的流行使得向移動(dòng)端偏移的網(wǎng)頁設(shè)計(jì),不得不采用菜單欄來替代傳統(tǒng)的導(dǎo)航模式,其直接的影響就是催生了漢堡圖標(biāo)。

無處不在的側(cè)邊欄導(dǎo)航.jpg

隨著漢堡圖標(biāo)的流行,彈出式的菜單也越發(fā)的常見。其中有些菜單是完全開放式的,而有的菜單則帶著下拉框,還有一部分直接是彈出的菜單界面。而為了兼容大量的移動(dòng)端界面,下拉和彈出式的菜單大多采用的是縱向布局——而這和側(cè)邊欄的設(shè)計(jì),是如此的相似。換句話來說,這種垂直的導(dǎo)航就是一種彈出式的側(cè)邊欄導(dǎo)航。

目前,這種左側(cè)側(cè)邊欄導(dǎo)航的設(shè)計(jì)已經(jīng)成為一種持續(xù)迭代中的設(shè)計(jì)趨勢(shì)了?,F(xiàn)在我們看到的側(cè)邊欄設(shè)計(jì),常常使用單一的純色打底,包含較少(但是重要或常用的)選項(xiàng),導(dǎo)航欄頂端通常會(huì)包含有品牌或者網(wǎng)站LOGO,文字鏈接,以及帶有小圖標(biāo)的社交媒體帳號(hào)的鏈接。

想要這種側(cè)邊欄設(shè)計(jì)能夠最大化的發(fā)揮作用,訣竅在于控制好側(cè)邊欄本身和右側(cè)網(wǎng)站內(nèi)容的對(duì)比度,它要包含足夠清晰可見的導(dǎo)航條目,還要能在移動(dòng)端上良好地運(yùn)作。

還有一點(diǎn)值得一提:不要因?yàn)槠聊粋?cè)邊夠長(zhǎng),就試圖用鏈接和內(nèi)容將側(cè)邊欄填滿。留白是完全可以接受的,在簡(jiǎn)約之風(fēng)大行其道的今天,盡量只保留必須的內(nèi)容,讓留白來凸顯它們,才是合乎道理又符合趨勢(shì)的設(shè)計(jì)。今天的文章中的許多優(yōu)質(zhì)案例,都遵循著這樣的設(shè)計(jì)邏輯。

側(cè)邊欄導(dǎo)航的優(yōu)點(diǎn)

側(cè)邊欄導(dǎo)航的優(yōu)點(diǎn).jpg

側(cè)邊欄導(dǎo)航的美學(xué)特征是毋庸置疑的。它在互聯(lián)網(wǎng)存在的早期就已經(jīng)存在,在軟件的GUI設(shè)計(jì)中常??梢钥吹?,但是在今天它仍然以一種時(shí)尚而前衛(wèi)的姿態(tài)出現(xiàn)。

側(cè)邊欄導(dǎo)航的優(yōu)點(diǎn)如下:

○側(cè)邊欄導(dǎo)航通常位于左側(cè),它位于F式布局的最左側(cè),作為信息主干,也符合用戶的瀏覽習(xí)慣

○側(cè)邊欄導(dǎo)航不會(huì)像漢堡菜單一樣一開始就隱藏其中的條目

○側(cè)邊欄中的條目?jī)?yōu)先級(jí)基本一致

○當(dāng)間距足夠的時(shí)候,側(cè)邊欄中的條目會(huì)非常的一目了然

○今天的側(cè)邊欄通常會(huì)留有足夠的空間,讓后續(xù)的條目能夠加入進(jìn)去

○側(cè)邊欄讓右側(cè)的畫板形狀尺寸不盡相同,設(shè)計(jì)師可以以非常規(guī)的方式來展現(xiàn)視頻和圖片,創(chuàng)造更獨(dú)特的視覺體驗(yàn)

○側(cè)邊欄導(dǎo)航以更加干凈優(yōu)雅的方式呈現(xiàn)更多的鏈接

側(cè)邊欄導(dǎo)航的缺點(diǎn)

側(cè)邊欄導(dǎo)航的缺點(diǎn).jpg

不喜歡側(cè)邊欄導(dǎo)航的人也很多,有些爭(zhēng)論是關(guān)于導(dǎo)航欄放在右側(cè)會(huì)不會(huì)更好,還有人則覺得側(cè)邊欄導(dǎo)航本身就是個(gè)麻煩,一方面讓用戶面對(duì)更復(fù)雜的布局,另一方面還增加了開發(fā)的難度。

使用垂直導(dǎo)航,或者說側(cè)邊欄導(dǎo)航,存在的問題:

○垂直式的導(dǎo)航在響應(yīng)式布局當(dāng)中很難正常工作

○導(dǎo)航中的詞匯必須足夠簡(jiǎn)短,否則導(dǎo)航欄會(huì)設(shè)計(jì)的很寬,或者部分內(nèi)容無法顯示

○垂直導(dǎo)航所占據(jù)的空間,可能會(huì)擠壓其他更有價(jià)值的內(nèi)容

○在同等內(nèi)容量之下,側(cè)邊欄導(dǎo)航會(huì)讓用戶滾動(dòng)頁面的時(shí)間更長(zhǎng)

○頂部導(dǎo)航通常只能放四五個(gè)鏈接,而側(cè)邊欄導(dǎo)航無疑能放更多,這可能會(huì)促使部分設(shè)計(jì)師,在導(dǎo)航欄中塞入過多導(dǎo)航條目

○絕大多數(shù)用戶是右撇子,這些用戶需要橫快整個(gè)屏幕去點(diǎn)擊導(dǎo)航

○垂直導(dǎo)航通常在單頁式頁面上非常好用,但是其他類型的網(wǎng)頁上則沒有想象中那么好使

側(cè)邊欄導(dǎo)航真的好使么?

側(cè)邊欄導(dǎo)航真的好使么.jpg

說真的,討論很多,結(jié)論并不那么明朗。

作為一種設(shè)計(jì)趨勢(shì),側(cè)邊欄導(dǎo)航是引人注意的,作為導(dǎo)航欄,它常駐式的設(shè)計(jì),讓它的功能性更強(qiáng)。如果你的導(dǎo)航是用戶流程中非常重要的存在,那么側(cè)邊欄導(dǎo)航是個(gè)不錯(cuò)的選擇。

總而言之,這種導(dǎo)航設(shè)計(jì)對(duì)于較少的導(dǎo)航內(nèi)容的小型網(wǎng)站而言,頗為有用,尤其是對(duì)于產(chǎn)品展示型的網(wǎng)站而言。

其他的導(dǎo)航模式

其他的導(dǎo)航模式.gif

其他的導(dǎo)航模式.jpg

非常規(guī)的導(dǎo)航模式是打破了舊有的常規(guī)導(dǎo)航模式的有趣嘗試,除了側(cè)邊欄導(dǎo)航之外,還有一些其他的有趣的導(dǎo)航設(shè)計(jì)。

當(dāng)然,非常規(guī)的導(dǎo)航設(shè)計(jì)最主要的問題在于,用戶不熟悉,容易混淆,迷惑。對(duì)于小型站點(diǎn),適當(dāng)?shù)膰L試還好,對(duì)于復(fù)雜的大型網(wǎng)站,這樣的嘗試就有點(diǎn)得不償失了。

在這里另外介紹兩種有趣的導(dǎo)航設(shè)計(jì)。Aurora 所采用的是隱藏式的導(dǎo)航,點(diǎn)擊LOGO旁邊的菜單按鈕能夠顯示,而AndCulture 則直接將頂部導(dǎo)航旋轉(zhuǎn)了90度直接放到側(cè)面。

兩種設(shè)計(jì)雖然都有人讓人意想不到,但是都在各自的網(wǎng)站中良好的運(yùn)行。當(dāng)然,不管你要做多么奇怪的嘗試,在真正決定投入使用之前,盡量多做用戶測(cè)試,確保它們是有效的。


-end-


0
0
分享到:

0

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

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)

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

      9000px;">

          日韩精品一区国产麻豆| 91精品国产综合久久小美女| 亚洲精品ww久久久久久p站| 亚洲精品一区二区三区在线观看 | 韩国女主播一区| 日本亚洲三级在线| 午夜精品久久久久久久久| 亚洲精品老司机| 综合久久久久久| 亚洲三级在线看| 中文字幕国产一区二区| 国产亚洲一区二区三区| 精品三级在线看| 精品sm捆绑视频| 精品美女在线播放| 精品精品国产高清a毛片牛牛| 欧美刺激午夜性久久久久久久| 欧美一级午夜免费电影| 欧美一级爆毛片| 久久久精品蜜桃| 国产精品萝li| 亚洲综合视频在线观看| 亚洲不卡一区二区三区| 日本欧美肥老太交大片| 狠狠色2019综合网| 99在线精品视频| 欧美日韩国产综合一区二区 | 极品美女销魂一区二区三区免费| 麻豆精品精品国产自在97香蕉| 日本不卡123| 国产91精品一区二区麻豆亚洲| 成人理论电影网| 欧美色涩在线第一页| 欧美tk—视频vk| 亚洲视频在线一区二区| 人人狠狠综合久久亚洲| 国产69精品久久777的优势| 色综合欧美在线| 欧美一级视频精品观看| 国产精品久久久久久久久久免费看 | 久久精品视频在线看| 中文字幕日韩欧美一区二区三区| 亚洲一区二区三区自拍| 国产永久精品大片wwwapp| 色综合激情五月| 精品国产免费久久| 亚洲人成精品久久久久久| 日韩成人av影视| 丰满少妇在线播放bd日韩电影| 色婷婷久久久综合中文字幕| 4438x亚洲最大成人网| 国产日韩精品一区二区三区 | 亚洲一区二区三区精品在线| 蜜臀a∨国产成人精品| www.久久精品| 日韩美女天天操| 日韩美女视频19| 男女男精品视频网| 不卡的av电影| 国产欧美日韩精品a在线观看| 亚洲另类春色国产| 男人的天堂亚洲一区| 大白屁股一区二区视频| 91精品国产福利在线观看| 中日韩av电影| 精品一区二区三区影院在线午夜| 色嗨嗨av一区二区三区| 国产精品美女久久久久久久久| 精品一区二区三区香蕉蜜桃| 欧美精品乱码久久久久久按摩| 一区二区中文字幕在线| 久久av资源站| 欧美理论电影在线| 夜夜嗨av一区二区三区| 国产高清精品在线| 精品裸体舞一区二区三区| 亚洲一区二区三区免费视频| av动漫一区二区| 久久精品一区二区三区不卡牛牛| 亚洲aaa精品| 欧美性生交片4| 中文字幕免费一区| 韩国理伦片一区二区三区在线播放| 一本色道a无线码一区v| 国产欧美日韩精品在线| 久久99精品网久久| 欧美日韩国产不卡| 亚洲一卡二卡三卡四卡| 成人av电影免费观看| 国产视频一区在线播放| 日韩精品成人一区二区三区| 欧美手机在线视频| 亚洲国产精品尤物yw在线观看| 日本道色综合久久| 久久久精品蜜桃| 久久久蜜桃精品| 国产精品自拍一区| 精品女同一区二区| 国产在线精品国自产拍免费| 久久精品视频一区二区| 国产在线麻豆精品观看| 欧美性xxxxxx少妇| 日本午夜一区二区| 国产精品色哟哟| 99精品在线观看视频| 一区二区三区国产| 欧美电影免费观看高清完整版在线| 国产乱码精品一区二区三区忘忧草| 日本一区免费视频| 精品视频一区三区九区| 国产在线播放一区三区四| 国产精品久久久一本精品 | 日韩一卡二卡三卡四卡| 国产毛片一区二区| 亚洲女人****多毛耸耸8| 欧美日韩夫妻久久| 国产精品69毛片高清亚洲| 自拍偷拍亚洲激情| 欧美三区在线视频| 国产一区在线精品| 亚洲亚洲人成综合网络| 久久免费的精品国产v∧| 日本韩国欧美一区| 国产精品66部| 天天综合色天天| 中文字幕欧美日本乱码一线二线 | 9191久久久久久久久久久| 韩国精品免费视频| 夜夜爽夜夜爽精品视频| 久久综合久久综合久久| 欧美日韩亚洲国产综合| 成人免费精品视频| 裸体歌舞表演一区二区| 一区二区三区 在线观看视频| 日韩午夜在线观看| 日本精品一级二级| 国产.精品.日韩.另类.中文.在线.播放 | 欧美精品在线观看一区二区| 国产成人亚洲综合色影视| 天涯成人国产亚洲精品一区av| 中文字幕五月欧美| 久久综合狠狠综合| 6080亚洲精品一区二区| 色香蕉久久蜜桃| www.欧美精品一二区| 国模套图日韩精品一区二区| 日欧美一区二区| 亚洲一卡二卡三卡四卡无卡久久| 国产精品污污网站在线观看| 久久天堂av综合合色蜜桃网| 欧美精品tushy高清| 在线视频国产一区| 91在线porny国产在线看| 国产盗摄精品一区二区三区在线| 日韩av不卡一区二区| 亚洲国产一区二区视频| 一级精品视频在线观看宜春院 | 麻豆成人久久精品二区三区红| 亚洲成人第一页| 夜夜精品视频一区二区| 亚洲精品成人精品456| 日韩美女啊v在线免费观看| 国产精品成人一区二区艾草| 国产日韩欧美综合一区| 国产欧美一区二区精品性色超碰| 精品国产免费一区二区三区四区 | 欧美高清性hdvideosex| 欧美日韩国产在线播放网站| 在线看一区二区| 欧美日韩在线播放一区| 在线不卡中文字幕| 91精品国产综合久久久久| 日韩欧美中文字幕精品| 久久综合99re88久久爱| 国产校园另类小说区| 中文字幕在线一区免费| 中文字幕一区二区日韩精品绯色| 亚洲男人天堂av网| 午夜一区二区三区视频| 日本 国产 欧美色综合| 久久99精品久久久久久久久久久久| 韩国理伦片一区二区三区在线播放| 国产精品一二三| 粉嫩一区二区三区性色av| 色综合久久66| 欧美色综合影院| 日韩欧美国产综合| 精品乱码亚洲一区二区不卡| 久久久久久久久蜜桃| 国产精品二三区| 午夜一区二区三区在线观看| 久久精品国产亚洲高清剧情介绍| 免费成人av资源网| 国产在线不卡视频| 欧美中文一区二区三区| 欧美一区二区在线免费播放| 国产蜜臀av在线一区二区三区| 尤物视频一区二区| 国产在线观看一区二区| 91久久免费观看|