2022-06-07 分類: 網(wǎng)站建設(shè)
在大屏幕上,導(dǎo)航置頂或?qū)Ш骄幼笫莾煞N典型的設(shè)計(jì)模式,然而,這兩種模式在小屏幕上卻遭遇挑戰(zhàn)。在響應(yīng)式設(shè)計(jì)日漸流行的今天(譯者注:其實(shí)已經(jīng)流行了好幾年了),我們更有必要重新審視針對(duì)小屏幕環(huán)境下的導(dǎo)航設(shè)計(jì)模式。這些通過(guò)移動(dòng)設(shè)備訪問(wèn)的頁(yè)面導(dǎo)航,必須既方便用戶快速訪問(wèn),又不能過(guò)于突出。
以下,我列出了 7 種常見(jiàn)的響應(yīng)式導(dǎo)航的設(shè)計(jì)模式,它們分別是:
置頂(或“放任自流”)
頁(yè)腳錨點(diǎn)
菜單選擇
開(kāi)關(guān)
側(cè)滑
置底
徹底隱藏
上述每種設(shè)計(jì)模式都各有利弊,大家在選擇導(dǎo)航設(shè)計(jì)方案時(shí),需要根據(jù)項(xiàng)目的實(shí)際情況作出判斷。
置頂(或“放任自流”)
將導(dǎo)航置頂或讓導(dǎo)航隨布局任意流動(dòng)(放任自流)是一種最簡(jiǎn)單的導(dǎo)航實(shí)現(xiàn)方式。正是由于這種易于實(shí)現(xiàn)的方式,它也成為了當(dāng)下許多響應(yīng)式網(wǎng)頁(yè)的“標(biāo)配”。
優(yōu)點(diǎn)
易于實(shí)現(xiàn):在大屏幕和小屏幕上的實(shí)現(xiàn)方式一致
不依賴 JavaScript:這樣就大程度上保證了兼容性
無(wú)需打破原有 CSS 樣式
無(wú)需打亂內(nèi)容本來(lái)的順序:這種方式保證了它是完完全全的流體布局,無(wú)需一丁點(diǎn)的人為干預(yù)
缺點(diǎn)
占用空間:高度問(wèn)題在移動(dòng)端是核心問(wèn)題。Luke 在自己的書中表達(dá)的“內(nèi)容優(yōu)先,導(dǎo)航其次”是典型的移動(dòng)端網(wǎng)頁(yè)體驗(yàn)。我們都期望用戶能夠以最快的速度獲取內(nèi)容,這久意味著我們需要移除導(dǎo)航以確保用戶關(guān)注的焦點(diǎn)始終保持在核心信息上。而當(dāng)導(dǎo)航高度過(guò)大,導(dǎo)致屏幕內(nèi)的核心信息無(wú)法展示的時(shí)候,就會(huì)引起用戶的疑惑。如下圖,當(dāng)我們打開(kāi)一個(gè)頁(yè)面時(shí),整個(gè)屏幕都被導(dǎo)航占據(jù),用戶無(wú)法獲取有效信息。 ![置頂導(dǎo)航在小屏幕上自動(dòng)折行顯示][2]
擴(kuò)展性差:當(dāng)你的導(dǎo)航剛好在一行內(nèi)展示時(shí),若要再添加章節(jié)的時(shí)候會(huì)出現(xiàn)什么情況呢?如果客戶突然要求再增加一個(gè)名為“產(chǎn)品和服務(wù)”的導(dǎo)航類目呢?或者將導(dǎo)航標(biāo)題翻譯成其他語(yǔ)言后導(dǎo)致字符長(zhǎng)度的變化呢?這些情況都會(huì)破壞原有的設(shè)計(jì)方案。
粗手指:導(dǎo)航全擠在一起,粗手指心急如焚,怎么點(diǎn)也點(diǎn)不到自己想要訪問(wèn)的導(dǎo)航鏈,這樣就增加了誤操作的幾率(不適合小屏幕上通過(guò)手指進(jìn)行點(diǎn)擊操作)
跨設(shè)備的問(wèn)題:不同設(shè)備渲染的方式各異,在 iPhone 上很棒的頁(yè)面或許在其它平臺(tái)上表現(xiàn)得很糟糕。 ![不同設(shè)備上渲染的差異][3]
頁(yè)腳錨點(diǎn)
在頁(yè)面頭部只保留一個(gè)去底部的錨點(diǎn),將導(dǎo)航放在頁(yè)腳是一種討巧的做法。它節(jié)省了頭部寶貴的空間,同時(shí)又滿足了訪問(wèn)導(dǎo)航的需求。
優(yōu)點(diǎn): 容易實(shí)現(xiàn):頁(yè)眉錨點(diǎn),導(dǎo)航置底,沒(méi)有比這更簡(jiǎn)單的了! – 不依賴 JavaScript:這意味著更少的測(cè)試和更好的瀏覽器支持 CSS 改動(dòng)小:由于采用了絕對(duì)或固定位置,將底部導(dǎo)航移到大屏幕的頂部簡(jiǎn)直太容易了
缺點(diǎn): 用戶迷惑:快速跳轉(zhuǎn)至頁(yè)腳這一動(dòng)作容易讓用戶迷惑 缺乏優(yōu)雅:這樣說(shuō)很奇怪(譯者也有同感),但我(作者)認(rèn)為類似開(kāi)關(guān)的交互方式更性感一些。這種采用錨點(diǎn)跳轉(zhuǎn)的方式雖然實(shí)用,但不優(yōu)雅,相比那些經(jīng)過(guò)精心設(shè)計(jì)的移動(dòng)端應(yīng)用的交互方式而言太過(guò)粗糙。
菜單選擇
將導(dǎo)航收納在一個(gè)選擇菜單的控件當(dāng)中是一個(gè)不錯(cuò)的方式。它避免了導(dǎo)航置頂所占用的屏幕空間。
優(yōu)點(diǎn):
騰出了足夠的空間:一個(gè)選擇菜單無(wú)論是在橫向或縱向上都特別省空間 符合用戶習(xí)慣:相比置底的方式,用戶更習(xí)慣導(dǎo)航被放置在頁(yè)面頭部 容易辨認(rèn):下拉菜單的控件樣式十分顯眼,及其容易發(fā)現(xiàn) 支持本地化的交互方式:由于采用標(biāo)準(zhǔn)控件,使得操作十分本地化,這種本地化是指對(duì)設(shè)備自身屬性的支持,比如,在觸摸設(shè)備上能夠通過(guò)點(diǎn)擊操作,而在軌跡球上支持滾動(dòng)操作;
缺點(diǎn):
樣式不統(tǒng)一:不同瀏覽器會(huì)呈現(xiàn)不同樣式的下拉菜單 可能會(huì)讓用戶困惑:大部分用戶只在填寫表單時(shí)才會(huì)看見(jiàn)下拉菜單,而將下拉菜單用作導(dǎo)航,擔(dān)心用戶一下子無(wú)法理解 下拉菜單內(nèi)容的處理方式比較奇怪:因?yàn)樵谙吕藛沃校禹?xiàng)目會(huì)自動(dòng)縮進(jìn),這樣雖然可用,但從視覺(jué)上看十分混亂; 可能會(huì)依賴瀏覽器調(diào)用 JavaScript
開(kāi)關(guān)
開(kāi)關(guān)的實(shí)現(xiàn)方式類似頁(yè)腳錨點(diǎn),但不是點(diǎn)擊跳轉(zhuǎn)至頁(yè)腳,而是點(diǎn)擊后將菜單區(qū)域滑動(dòng)展開(kāi)。同樣也是比較容易實(shí)現(xiàn)的設(shè)計(jì)模式。
優(yōu)點(diǎn):
易于理解:相較于頁(yè)腳錨點(diǎn)突然間的跳轉(zhuǎn),開(kāi)關(guān)這種是位置不變的交互方式更容易讓用戶接受 交互更優(yōu)雅(相比跳轉(zhuǎn)而言) 拓展性強(qiáng):你唯一要做的就是在PC端隱藏開(kāi)關(guān),在適當(dāng)?shù)臄帱c(diǎn)處顯示它,這一切的一切都能通過(guò) CSS 來(lái)實(shí)現(xiàn)。
缺點(diǎn):
動(dòng)畫可能不夠平滑:Android 對(duì)于動(dòng)畫的支持一直不好,因此,可能得到你想要的效果 非常依賴 JavaScript:正因?yàn)榇蜷_(kāi)開(kāi)關(guān)的動(dòng)畫需要 JavaScript 來(lái)實(shí)現(xiàn),所以它的兼容性不太好(作者的黑莓設(shè)備就不支持);
側(cè)滑導(dǎo)航
側(cè)滑是在 Facebook 的大力推廣下流行起來(lái)的。之所以叫抽屜源于它的交互動(dòng)效,當(dāng)點(diǎn)擊菜單按鈕后,導(dǎo)航模塊會(huì)像抽屜一樣從頁(yè)面邊緣滑動(dòng)出現(xiàn)。
優(yōu)點(diǎn):
空間充裕:因?yàn)閺倪吘壔觯@些內(nèi)容被理解為在底層或屏幕外的無(wú)限區(qū)域內(nèi) 好看:簡(jiǎn)潔就是美,而且動(dòng)畫效果驚艷。
缺點(diǎn):
小眾:與其他簡(jiǎn)單的設(shè)計(jì)模式比起來(lái),從側(cè)面滑動(dòng)展開(kāi)導(dǎo)航欄的效果需要若干復(fù)雜的動(dòng)畫來(lái)實(shí)現(xiàn),這樣就將一些低端設(shè)備擋在門口。因此,如果你的項(xiàng)目是面向大眾而設(shè)計(jì)的,需要謹(jǐn)慎。 適配性不好: 這種模式僅適合移動(dòng)設(shè)備,在大屏幕上的表現(xiàn)并不好(也沒(méi)有必要)。 可能存在迷惑:當(dāng)我(作者)第一次看到 Facebook 采用這種設(shè)計(jì)時(shí),我還以為頁(yè)面出錯(cuò)了呢!在屏幕右側(cè)露出一些信息對(duì)于我本人而言還是很奇怪的(純屬作者個(gè)人看法)
只在頁(yè)腳放置導(dǎo)航
只在頁(yè)腳放置導(dǎo)航和頁(yè)腳錨點(diǎn)類似,只是它不在頁(yè)眉放置錨點(diǎn)。這種模式的理念是內(nèi)容優(yōu)先、導(dǎo)航其次。 這種方式需要用戶將頁(yè)面滑動(dòng)至底部才能看見(jiàn)導(dǎo)航
優(yōu)點(diǎn): 容易實(shí)現(xiàn) 兼容性(無(wú)需 JavaScript) CSS 改動(dòng)小:由于采用了絕對(duì)或固定位置,將底部導(dǎo)航移到大屏幕的頂部簡(jiǎn)直太容易了
缺點(diǎn): 難以發(fā)現(xiàn):無(wú)論在大屏或小屏上都很難發(fā)現(xiàn)頁(yè)腳會(huì)有導(dǎo)航; 難以使用:移動(dòng)端用戶需要不斷滾動(dòng)頁(yè)面至底部,才能使用頁(yè)腳導(dǎo)航,十分不便
相關(guān)案例: Pears Fray
徹底隱藏
將導(dǎo)航隱藏,得到大化的空間。
這種設(shè)計(jì)模式遵循了該法則:不要懲罰那些通過(guò)移動(dòng)端訪問(wèn)你網(wǎng)站的用戶。 移動(dòng)端用戶到底想得到或不想要哪些信息仍舊是個(gè)謎。移動(dòng)端用戶會(huì)做任何桌面端用戶都會(huì)做的事情,因此,僅針對(duì)移動(dòng)端用戶提供某些核心功能是很有必要的。
優(yōu)點(diǎn): 屌爆了(原文 Sexy as hell 求大神信達(dá)雅的翻譯)
好的利用有限的屏幕空間
對(duì)于移動(dòng)端設(shè)備有很大優(yōu)勢(shì),只用向下滑動(dòng)就能查看更多。
缺點(diǎn): 去掉了針對(duì)移動(dòng)端用戶的核心功能或內(nèi)容 將鏈接或內(nèi)容隱藏的做法并不好。響應(yīng)式的鼓吹者認(rèn)為這種做法會(huì)導(dǎo)致移動(dòng)端頁(yè)面與桌面端形成內(nèi)容上的差異,以及體驗(yàn)上的災(zāi)難。
增加頁(yè)面額外的開(kāi)銷 使用命令 display: none 僅能在頁(yè)面上隱藏該元素。頁(yè)面的代碼、圖片或別的文件依舊在后臺(tái)下載,這最終導(dǎo)致了頁(yè)面訪問(wèn)緩慢。
難以維護(hù) 兩個(gè)完全分離的導(dǎo)航體系將成為后期維護(hù)時(shí)的負(fù)擔(dān)。
可能存在迷惑 移動(dòng)端用戶向下滑動(dòng)頁(yè)面來(lái)刷新列表時(shí),并不會(huì)意識(shí)到 當(dāng)我(作者)第一次看到 Facebook 采用這種設(shè)計(jì)時(shí),我還以為頁(yè)面出錯(cuò)了呢!在屏幕右側(cè)露出一些信息對(duì)于我本人而言還是很奇怪的(純屬作者個(gè)人看法)
結(jié)語(yǔ)
移動(dòng)導(dǎo)航就像你真正的朋友一樣:彼此需要,但又給彼此空間;而那些假裝跟你很要好的朋友總是在你需要的時(shí)候消失(當(dāng)你需要導(dǎo)航的時(shí)候找不到)或者占據(jù)你的個(gè)人空間而讓你抓狂(比如:擦,從我床上滾下去);因此,針對(duì)響應(yīng)式導(dǎo)航進(jìn)行設(shè)計(jì),需要在訪問(wèn)的便攜性和空間上做一個(gè)平衡。
網(wǎng)站名稱:術(shù)業(yè)有專攻!響應(yīng)式導(dǎo)航有哪幾類設(shè)計(jì)方式?
本文來(lái)源:http://m.newbst.com/news2/164552.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、域名注冊(cè)、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、營(yíng)銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容