2022-05-30 分類: 網(wǎng)站建設(shè)
在大屏幕上,導(dǎo)航置頂或?qū)Ш骄幼笫莾煞N典型的設(shè)計(jì)模式,然而,這兩種模式在小屏幕上卻遭遇挑戰(zhàn)。在響應(yīng)式設(shè)計(jì)日漸流行的今天(譯者注:其實(shí)已經(jīng)流行了好幾年了),我們更有必要重新審視針對小屏幕環(huán)境下的導(dǎo)航設(shè)計(jì)模式。這些通過移動設(shè)備訪問的頁面導(dǎo)航,必須既方便用戶快速訪問,又不能過于突出。
以下,我列出了 7 種常見的響應(yīng)式導(dǎo)航的設(shè)計(jì)模式,它們分別是:
- 置頂(或“放任自流”)
- 頁腳錨點(diǎn)
- 菜單選擇
- 開關(guān)
- 側(cè)滑
- 置底
- 徹底隱藏
上述每種設(shè)計(jì)模式都各有利弊,大家在選擇導(dǎo)航設(shè)計(jì)方案時(shí),需要根據(jù)項(xiàng)目的實(shí)際情況作出判斷。
![置頂(或“放任自流”)的案例][3]
將導(dǎo)航置頂或讓導(dǎo)航隨布局任意流動(放任自流)是一種最簡單的導(dǎo)航實(shí)現(xiàn)方式。正是由于這種易于實(shí)現(xiàn)的方式,它也成為了當(dāng)下許多響應(yīng)式網(wǎng)頁的“標(biāo)配”。
優(yōu)點(diǎn)
缺點(diǎn)
案例
* [Yiibu][4]
* [Trent Walton][5]
* [Tim Kadlec][6]
* [Ethan Marcotte][7]
* Brad Frost Web
相關(guān)資料
Height Matters by @andmag Don’t Let Your Menu Take Over by @StuRobson
在頁面頭部只保留一個去底部的錨點(diǎn),將導(dǎo)航放在頁腳是一種討巧的做法。它節(jié)省了頭部寶貴的空間,同時(shí)又滿足了訪問導(dǎo)航的需求。
優(yōu)點(diǎn): 容易實(shí)現(xiàn):頁眉錨點(diǎn),導(dǎo)航置底,沒有比這更簡單的了! – 不依賴
JavaScript:這意味著更少的測試和更好的瀏覽器支持 CSS
改動小:由于采用了絕對或固定位置,將底部導(dǎo)航移到大屏幕的頂部簡直太容易了
缺點(diǎn): 用戶迷惑:快速跳轉(zhuǎn)至頁腳這一動作容易讓用戶迷惑 缺乏優(yōu)雅:這樣說很奇怪(譯者也有同感),但我(作者)認(rèn)為類似開關(guān)的交互方式更性感一些。這種采用錨點(diǎn)跳轉(zhuǎn)的方式雖然實(shí)用,但不優(yōu)雅,相比那些經(jīng)過精心設(shè)計(jì)的移動端應(yīng)用的交互方式而言太過粗糙。
案例
Grey Goose Contents Magazine Bagcheck (I know it’s not responsive, but it’s where the technique was popularized)
相關(guān)資料
A Simple, Responsive, Mobile First Navigation Mobile First Book
將導(dǎo)航收納在一個選擇菜單的控件當(dāng)中是一個不錯的方式。它避免了導(dǎo)航置頂所占用的屏幕空間。
優(yōu)點(diǎn) 騰出了足夠的空間:一個選擇菜單無論是在橫向或縱向上都特別省空間
符合用戶習(xí)慣:相比置底的方式,用戶更習(xí)慣導(dǎo)航被放置在頁面頭部
容易辨認(rèn):下拉菜單的控件樣式十分顯眼,及其容易發(fā)現(xiàn) 支持本地化的交互方式:由于采用標(biāo)準(zhǔn)控件,使得操作十分本地化,這種本地化是指對設(shè)備自身屬性的支持,比如,在觸摸設(shè)備上能夠通過點(diǎn)擊操作,而在軌跡球上支持滾動操作;
缺點(diǎn) 樣式不統(tǒng)一:不同瀏覽器會呈現(xiàn)不同樣式的下拉菜單 可能會讓用戶困惑:大部分用戶只在填寫表單時(shí)才會看見下拉菜單,而將下拉菜單用作導(dǎo)航,擔(dān)心用戶一下子無法理解 下拉菜單內(nèi)容的處理方式比較奇怪:因?yàn)樵谙吕藛沃校禹?xiàng)目會自動縮進(jìn),這樣雖然可用,但從視覺上看十分混亂; 可能會依賴瀏覽器調(diào)用 JavaScript
案例: TinyNav by @viljamis Convert a Menu to a Dropdown for Small Screens Progressive and Responsive Navigation Responsive Menu
相關(guān)資料: Viljami Salminen Retreats 4 Geeks Five Simple Steps Performance Marketing Awards
開關(guān)的實(shí)現(xiàn)方式類似頁腳錨點(diǎn),但不是點(diǎn)擊跳轉(zhuǎn)至頁腳,而是點(diǎn)擊后將菜單區(qū)域滑動展開。同樣也是比較容易實(shí)現(xiàn)的設(shè)計(jì)模式。
優(yōu)點(diǎn)
易于理解:相較于頁腳錨點(diǎn)突然間的跳轉(zhuǎn),開關(guān)這種是位置不變的交互方式更容易讓用戶接受 交互更優(yōu)雅(相比跳轉(zhuǎn)而言) 拓展性強(qiáng):你唯一要做的就是在PC端隱藏開關(guān),在適當(dāng)?shù)臄帱c(diǎn)處顯示它,這一切的一切都能通過 CSS 來實(shí)現(xiàn)
缺點(diǎn) 動畫可能不夠平滑:Android 對于動畫的支持一直不好,因此,可能得到你想要的效果 非常依賴 JavaScript:正因?yàn)榇蜷_開關(guān)的動畫需要 JavaScript
來實(shí)現(xiàn),所以它的兼容性不太好(作者的黑莓設(shè)備就不支持);
案例 Starbucks Mobile Web Best Practices Twitter Bootstrap
相關(guān)資源 FlexNav A Responsive Design Approach for Navigation, Part 1 by@filamentgroup
側(cè)滑是在 Facebook 的大力推廣下流行起來的。之所以叫抽屜源于它的交互動效,當(dāng)點(diǎn)擊菜單按鈕后,導(dǎo)航模塊會像抽屜一樣從頁面邊緣滑動出現(xiàn)。
優(yōu)點(diǎn) 空間充裕:因?yàn)閺倪吘壔觯@些內(nèi)容被理解為在底層或屏幕外的無限區(qū)域內(nèi) 好看:簡潔就是美,而且動畫效果驚艷
缺點(diǎn) 小眾:與其他簡單的設(shè)計(jì)模式比起來,從側(cè)面滑動展開導(dǎo)航欄的效果需要若干復(fù)雜的動畫來實(shí)現(xiàn),這樣就將一些低端設(shè)備擋在門口。因此,如果你的項(xiàng)目是面向大眾而設(shè)計(jì)的,需要謹(jǐn)慎。 適配性不好: 這種模式僅適合移動設(shè)備,在大屏幕上的表現(xiàn)并不好(也沒有必要)。 可能存在迷惑:當(dāng)我(作者)第一次看到 Facebook 采用這種設(shè)計(jì)時(shí),我還以為頁面出錯了呢!在屏幕右側(cè)露出一些信息對于我本人而言還是很奇怪的(純屬作者個人看法)
案例 Barack Obama
相關(guān)資料 A Plea for Progressive Enhancement
只在頁腳放置導(dǎo)航和頁腳錨點(diǎn)類似,只是它不在頁眉放置錨點(diǎn)。這種模式的理念是內(nèi)容優(yōu)先、導(dǎo)航其次。 這種方式需要用戶將頁面滑動至底部才能看見導(dǎo)航
優(yōu)點(diǎn): 容易實(shí)現(xiàn) 兼容性(無需 JavaScript) CSS 改動小:由于采用了絕對或固定位置,將底部導(dǎo)航移到大屏幕的頂部簡直太容易了
缺點(diǎn): 難以發(fā)現(xiàn):無論在大屏或小屏上都很難發(fā)現(xiàn)頁腳會有導(dǎo)航; 難以使用:移動端用戶需要不斷滾動頁面至底部,才能使用頁腳導(dǎo)航,十分不便
相關(guān)案例: Pears Fray
將導(dǎo)航隱藏,得到大化的空間
這種設(shè)計(jì)模式遵循了該法則:不要懲罰那些通過移動端訪問你網(wǎng)站的用戶。 移動端用戶到底想得到或不想要哪些信息仍舊是個謎。移動端用戶會做任何桌面端用戶都會做的事情,因此,僅針對移動端用戶提供某些核心功能是很有必要的。
優(yōu)點(diǎn): 屌爆了(原文 Sexy as hell 求大神信達(dá)雅的翻譯)
好的利用有限的屏幕空間
對于移動端設(shè)備有很大優(yōu)勢,只用向下滑動就能查看更多
缺點(diǎn): 去掉了針對移動端用戶的核心功能或內(nèi)容 將鏈接或內(nèi)容隱藏的做法并不好。響應(yīng)式的鼓吹者認(rèn)為這種做法會導(dǎo)致移動端頁面與桌面端形成內(nèi)容上的差異,以及體驗(yàn)上的災(zāi)難。
增加頁面額外的開銷 使用命令 display: none 僅能在頁面上隱藏該元素。頁面的代碼、圖片或別的文件依舊在后臺下載,這最終導(dǎo)致了頁面訪問緩慢。
難以維護(hù) 兩個完全分離的導(dǎo)航體系將成為后期維護(hù)時(shí)的負(fù)擔(dān)
可能存在迷惑 移動端用戶向下滑動頁面來刷新列表時(shí),并不會意識到 當(dāng)我(作者)第一次看到 Facebook 采用這種設(shè)計(jì)時(shí),我還以為頁面出錯了呢!在屏幕右側(cè)露出一些信息對于我本人而言還是很奇怪的(純屬作者個人看法)
相關(guān)案例: Authentic Jobs rourkery.com A previous version of the Obama responsive sit 相關(guān)資源: Media Query and Asset Tests
結(jié)語
移動導(dǎo)航就像你真正的朋友一樣:彼此需要,但又給彼此空間;而那些假裝跟你很要好的朋友總是在你需要的時(shí)候消失(當(dāng)你需要導(dǎo)航的時(shí)候找不到)或者占據(jù)你的個人空間而讓你抓狂(比如:擦,從我床上滾下去);因此,針對響應(yīng)式導(dǎo)航進(jìn)行設(shè)計(jì),需要在訪問的便攜性和空間上做一個平衡。
當(dāng)前文章:響應(yīng)式導(dǎo)航的設(shè)計(jì)模式
文章出自:http://m.newbst.com/news42/161642.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、域名注冊、App開發(fā)、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容