-
導(dǎo)航欄
導(dǎo)航欄可以算是網(wǎng)頁中最重要的交互元素。我認(rèn)為導(dǎo)航欄應(yīng)該像用戶的好朋友一樣:愿意在需要時(shí)提供幫助，體貼入微但又為對(duì)方保留私人空間，又不需要對(duì)方持續(xù)給予關(guān)注。
響應(yīng)式導(dǎo)航欄設(shè)計(jì)已經(jīng)有不少方法可供選擇，我們從中選取比較普及的幾種詳細(xì)介紹一下。
-
頂端導(dǎo)航欄
只需把包含幾個(gè)鏈接的導(dǎo)航欄放在頁面頂端即可。這樣的導(dǎo)航欄很容易實(shí)現(xiàn)，但要保證可縮放性，以免占用寶貴空間。導(dǎo)航欄要讓用戶能夠輕松訪問到，但也不能擠占核心內(nèi)容空間。
-
錨鏈接頁腳導(dǎo)航欄
把導(dǎo)航欄放在頁腳，然后在頁面上方留一個(gè)錨鏈接，供用戶跳轉(zhuǎn)到導(dǎo)航欄。這種方法很巧妙也很容易實(shí)現(xiàn)，既保留了空間，使用起來也很便捷。但這種突兀的跳轉(zhuǎn)方式可能會(huì)使部分用戶感到迷惑。
-
選單式導(dǎo)航欄
在小屏幕上把導(dǎo)航欄轉(zhuǎn)換成選單也是不錯(cuò)的選擇，可以節(jié)省不少空間。但獨(dú)立使用表單元素可能會(huì)讓用戶感到莫名其妙，而且無法實(shí)現(xiàn)多級(jí)導(dǎo)航欄的功能。
-
觸發(fā)式導(dǎo)航欄
觸發(fā)式導(dǎo)航欄相比之前幾種顯得精致不少，在小屏幕中會(huì)濃縮成一個(gè)按鈕(三橫線圖標(biāo)或者“菜單”錨點(diǎn))，點(diǎn)擊便展開成完整樣式。節(jié)省空間的同時(shí)保證了便捷性。需要注意的是，很多用戶的瀏覽器對(duì)JavaScript的支持不夠好?？梢越梃bAaron Gustfason在“輕松打造智能手機(jī)導(dǎo)航欄”一文提及的方法:使用CSS的偽選擇器觸發(fā)導(dǎo)航欄。
-
側(cè)滑式導(dǎo)航欄
側(cè)滑式導(dǎo)航欄是之前提及的精簡(jiǎn)式頁面布局的重要組件。側(cè)滑式導(dǎo)航欄并不顯示在核心內(nèi)容的上方或下方，而是隱藏在屏幕一側(cè)，滑動(dòng)屏幕方可顯示。側(cè)滑式的效果很漂亮，但大量的可移動(dòng)部件需要在盡可能多的環(huán)境中進(jìn)行測(cè)試，才能確保能正常顯示。可以參考Stephanie Rieger在‘漸進(jìn)式優(yōu)化刻不容緩”中提及的案例。
-
優(yōu)先級(jí)式導(dǎo)航欄
這種導(dǎo)航欄是由Michael Scharnagl創(chuàng)造的，只顯示重要條目，把次要內(nèi)容隱藏到“更多”鏈接里。優(yōu)先級(jí)式導(dǎo)航欄適用于同層級(jí)鏈接較多的導(dǎo)航欄，但設(shè)置過程中需要站在用戶的角度考慮優(yōu)先級(jí)，萬一感同身受不夠深刻，就得面臨用戶流失的結(jié)局。
-
取消導(dǎo)航欄
這種模式(或者應(yīng)該叫做反模式? )為小屏幕用戶取消了導(dǎo)航欄。確實(shí)節(jié)省了空間，但也精簡(jiǎn)了用戶體驗(yàn)。小屏幕和大屏幕用戶的訴求并無區(qū)別，不要根據(jù)設(shè)備不同區(qū)別對(duì)待，這一點(diǎn)需要牢記。
-
復(fù)雜導(dǎo)航欄
電腦屏幕可以給導(dǎo)航欄留出充裕的空間，鼠標(biāo)懸?？梢杂|發(fā)下拉菜單的子菜單。但是換到移動(dòng)端，屏幕空間有限，無法懸停操作，給復(fù)雜導(dǎo)航欄的實(shí)現(xiàn)帶來了巨大挑戰(zhàn)。
把數(shù)以千計(jì)的內(nèi)容頁精簡(jiǎn)成手機(jī)屏幕上三個(gè)小小的鏈接確實(shí)不太現(xiàn)實(shí)，因此大型機(jī)構(gòu)、電子商務(wù)網(wǎng)站、大學(xué)和大型網(wǎng)站需要復(fù)雜的多級(jí)導(dǎo)航欄。很多設(shè)計(jì)師直面挑戰(zhàn)，提出了很棒的響應(yīng)式網(wǎng)頁設(shè)計(jì)中復(fù)雜導(dǎo)航欄的實(shí)現(xiàn)方法。
-
觸發(fā)式多級(jí)導(dǎo)航欄
給觸發(fā)式導(dǎo)航欄增加折疊功能，就能實(shí)現(xiàn)多級(jí)導(dǎo)航的目的。用戶可以通過單擊父類別展開子類別。如果屏幕尺寸夠大，導(dǎo)航欄會(huì)自動(dòng)轉(zhuǎn)換成普通的下拉式菜單。
在觸發(fā)模式下，父類別一目了然，用戶可以輕松定位所需的子類別，是層級(jí)較多的導(dǎo)航欄進(jìn)行響應(yīng)式設(shè)計(jì)的優(yōu)秀解決方案。
-
滑動(dòng)式導(dǎo)航欄
與觸發(fā)式多級(jí)導(dǎo)航欄在父類別之下顯示子類別不同，滑動(dòng)式導(dǎo)航欄從精簡(jiǎn)式頁面布局中獲取靈感，把下一級(jí)導(dǎo)航菜單移到了屏幕右側(cè)。
滑動(dòng)式導(dǎo)航欄可以實(shí)現(xiàn)多級(jí)導(dǎo)航，自右向左的滑動(dòng)動(dòng)畫符合用戶的傳統(tǒng)菜單使用體驗(yàn)。但這種導(dǎo)航欄實(shí)現(xiàn)相對(duì)復(fù)雜，需要在不同平臺(tái)進(jìn)行大量測(cè)試。需要注意的是，在不同設(shè)備上(尤其是手機(jī))顯示的動(dòng)畫效果差異可能會(huì)很大。
-
取消子導(dǎo)航欄
子導(dǎo)航的鏈接通常也存在于父類別的頁面上，這種情況下便可以取消子導(dǎo)航，直接將用戶導(dǎo)向中轉(zhuǎn)頁面。用戶不必再翻看子導(dǎo)航，但載入中轉(zhuǎn)頁面降低了這種導(dǎo)航方式的效率。
-
條件加載
運(yùn)行環(huán)境不同，優(yōu)勢(shì)和障礙也不盡相同。設(shè)計(jì)師必須明白響應(yīng)式網(wǎng)頁設(shè)計(jì)并不是為所有用戶提供相同的瀏覽體驗(yàn)，更不是單純改變頁面布局。把桌面端的功能和設(shè)計(jì)完整地移植到移動(dòng)端帶來的用戶體驗(yàn)不會(huì)太好，但卻是當(dāng)下的主流做法。相應(yīng)的，把手機(jī).上的頁面照搬到27英寸屏幕的電腦上，既沒利用好空間又浪費(fèi)了強(qiáng)大的處理器。就沒有合適的折中方案嗎?
試試條件加載吧，這個(gè)功能并非響應(yīng)式設(shè)計(jì)三大核心要素之一，但卻是大幅優(yōu)化響應(yīng)式網(wǎng)站的利器。條件加載會(huì)首先讀取頁面的核心內(nèi)容，同時(shí)提供附加內(nèi)容(相關(guān)文章、產(chǎn)品或內(nèi)容、評(píng)論版塊、分享、地圖以及其他第三方內(nèi)容)的鏈接，按需讀取。下邊我們介紹一下具體做法。
-
創(chuàng)建條件加載內(nèi)容
(1)創(chuàng)建HTML 主頁面和只包含附加內(nèi)容的分頁面。
(2) 將分頁面鏈接到主頁面，確保不支持JavaScript的終端也能順利訪問。
(3)使用JavaScript檢 測(cè)用戶動(dòng)作或屏幕空間，當(dāng)用戶點(diǎn)擊對(duì)應(yīng)內(nèi)容時(shí)，進(jìn)行對(duì)應(yīng)附加內(nèi)容的載入。
(4)通過AJAX載入對(duì) 應(yīng)內(nèi)容。
相關(guān)文章
精彩導(dǎo)讀
熱門資訊
