1. 導(dǎo)航欄

導(dǎo)航欄可以算是網(wǎng)頁中最重要的交互元素。我認(rèn)為導(dǎo)航欄應(yīng)該像用戶的好朋友一樣:愿意在需要時提供幫助，體貼入微但又為對方保留私人空間，又不需要對方持續(xù)給予關(guān)注。
響應(yīng)式導(dǎo)航欄設(shè)計已經(jīng)有不少方法可供選擇，我們從中選取比較普及的幾種詳細(xì)介紹一下。

1. 頂端導(dǎo)航欄

只需把包含幾個鏈接的導(dǎo)航欄放在頁面頂端即可。這樣的導(dǎo)航欄很容易實(shí)現(xiàn)，但要保證可縮放性，以免占用寶貴空間。導(dǎo)航欄要讓用戶能夠輕松訪問到，但也不能擠占核心內(nèi)容空間。

2. 錨鏈接頁腳導(dǎo)航欄

把導(dǎo)航欄放在頁腳，然后在頁面上方留一個錨鏈接，供用戶跳轉(zhuǎn)到導(dǎo)航欄。這種方法很巧妙也很容易實(shí)現(xiàn)，既保留了空間，使用起來也很便捷。但這種突兀的跳轉(zhuǎn)方式可能會使部分用戶感到迷惑。

3. 選單式導(dǎo)航欄

在小屏幕上把導(dǎo)航欄轉(zhuǎn)換成選單也是不錯的選擇，可以節(jié)省不少空間。但獨(dú)立使用表單元素可能會讓用戶感到莫名其妙，而且無法實(shí)現(xiàn)多級導(dǎo)航欄的功能。

4. 觸發(fā)式導(dǎo)航欄

觸發(fā)式導(dǎo)航欄相比之前幾種顯得精致不少，在小屏幕中會濃縮成一個按鈕(三橫線圖標(biāo)或者“菜單”錨點(diǎn))，點(diǎn)擊便展開成完整樣式。節(jié)省空間的同時保證了便捷性。需要注意的是，很多用戶的瀏覽器對JavaScript的支持不夠好?？梢越梃bAaron Gustfason在“輕松打造智能手機(jī)導(dǎo)航欄”一文提及的方法:使用CSS的偽選擇器觸發(fā)導(dǎo)航欄。

5. 側(cè)滑式導(dǎo)航欄

側(cè)滑式導(dǎo)航欄是之前提及的精簡式頁面布局的重要組件。側(cè)滑式導(dǎo)航欄并不顯示在核心內(nèi)容的上方或下方，而是隱藏在屏幕一側(cè)，滑動屏幕方可顯示。側(cè)滑式的效果很漂亮，但大量的可移動部件需要在盡可能多的環(huán)境中進(jìn)行測試，才能確保能正常顯示。可以參考Stephanie Rieger在‘漸進(jìn)式優(yōu)化刻不容緩”中提及的案例。

6. 優(yōu)先級式導(dǎo)航欄

這種導(dǎo)航欄是由Michael Scharnagl創(chuàng)造的，只顯示重要條目，把次要內(nèi)容隱藏到“更多”鏈接里。優(yōu)先級式導(dǎo)航欄適用于同層級鏈接較多的導(dǎo)航欄，但設(shè)置過程中需要站在用戶的角度考慮優(yōu)先級，萬一感同身受不夠深刻，就得面臨用戶流失的結(jié)局。

7. 取消導(dǎo)航欄

  這種模式(或者應(yīng)該叫做反模式? )為小屏幕用戶取消了導(dǎo)航欄。確實(shí)節(jié)省了空間，但也精簡了用戶體驗(yàn)。小屏幕和大屏幕用戶的訴求并無區(qū)別，不要根據(jù)設(shè)備不同區(qū)別對待，這一點(diǎn)需要牢記。

8. 復(fù)雜導(dǎo)航欄

電腦屏幕可以給導(dǎo)航欄留出充裕的空間，鼠標(biāo)懸?？梢杂|發(fā)下拉菜單的子菜單。但是換到移動端，屏幕空間有限，無法懸停操作，給復(fù)雜導(dǎo)航欄的實(shí)現(xiàn)帶來了巨大挑戰(zhàn)。
把數(shù)以千計的內(nèi)容頁精簡成手機(jī)屏幕上三個小小的鏈接確實(shí)不太現(xiàn)實(shí)，因此大型機(jī)構(gòu)、電子商務(wù)網(wǎng)站、大學(xué)和大型網(wǎng)站需要復(fù)雜的多級導(dǎo)航欄。很多設(shè)計師直面挑戰(zhàn)，提出了很棒的響應(yīng)式網(wǎng)頁設(shè)計中復(fù)雜導(dǎo)航欄的實(shí)現(xiàn)方法。

1. 觸發(fā)式多級導(dǎo)航欄

   給觸發(fā)式導(dǎo)航欄增加折疊功能，就能實(shí)現(xiàn)多級導(dǎo)航的目的。用戶可以通過單擊父類別展開子類別。如果屏幕尺寸夠大，導(dǎo)航欄會自動轉(zhuǎn)換成普通的下拉式菜單。
在觸發(fā)模式下，父類別一目了然，用戶可以輕松定位所需的子類別，是層級較多的導(dǎo)航欄進(jìn)行響應(yīng)式設(shè)計的優(yōu)秀解決方案。

10. 滑動式導(dǎo)航欄

   與觸發(fā)式多級導(dǎo)航欄在父類別之下顯示子類別不同，滑動式導(dǎo)航欄從精簡式頁面布局中獲取靈感，把下一級導(dǎo)航菜單移到了屏幕右側(cè)。
滑動式導(dǎo)航欄可以實(shí)現(xiàn)多級導(dǎo)航，自右向左的滑動動畫符合用戶的傳統(tǒng)菜單使用體驗(yàn)。但這種導(dǎo)航欄實(shí)現(xiàn)相對復(fù)雜，需要在不同平臺進(jìn)行大量測試。需要注意的是，在不同設(shè)備上(尤其是手機(jī))顯示的動畫效果差異可能會很大。

11. 取消子導(dǎo)航欄

子導(dǎo)航的鏈接通常也存在于父類別的頁面上，這種情況下便可以取消子導(dǎo)航，直接將用戶導(dǎo)向中轉(zhuǎn)頁面。用戶不必再翻看子導(dǎo)航，但載入中轉(zhuǎn)頁面降低了這種導(dǎo)航方式的效率。

2. 條件加載

運(yùn)行環(huán)境不同，優(yōu)勢和障礙也不盡相同。設(shè)計師必須明白響應(yīng)式網(wǎng)頁設(shè)計并不是為所有用戶提供相同的瀏覽體驗(yàn)，更不是單純改變頁面布局。把桌面端的功能和設(shè)計完整地移植到移動端帶來的用戶體驗(yàn)不會太好，但卻是當(dāng)下的主流做法。相應(yīng)的，把手機(jī).上的頁面照搬到27英寸屏幕的電腦上，既沒利用好空間又浪費(fèi)了強(qiáng)大的處理器。就沒有合適的折中方案嗎?
試試條件加載吧，這個功能并非響應(yīng)式設(shè)計三大核心要素之一，但卻是大幅優(yōu)化響應(yīng)式網(wǎng)站的利器。條件加載會首先讀取頁面的核心內(nèi)容，同時提供附加內(nèi)容(相關(guān)文章、產(chǎn)品或內(nèi)容、評論版塊、分享、地圖以及其他第三方內(nèi)容)的鏈接，按需讀取。下邊我們介紹一下具體做法。

1. 創(chuàng)建條件加載內(nèi)容

(1)創(chuàng)建HTML 主頁面和只包含附加內(nèi)容的分頁面。
(2) 將分頁面鏈接到主頁面，確保不支持JavaScript的終端也能順利訪問。
(3)使用JavaScript檢 測用戶動作或屏幕空間，當(dāng)用戶點(diǎn)擊對應(yīng)內(nèi)容時，進(jìn)行對應(yīng)附加內(nèi)容的載入。
(4)通過AJAX載入對 應(yīng)內(nèi)容。