1. 導航欄

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

1. 頂端導航欄

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

2. 錨鏈接頁(yè)腳導航欄

把導航欄放在頁(yè)腳，然后在頁(yè)面上方留一個(gè)錨鏈接，供用戶(hù)跳轉到導航欄。這種方法很巧妙也很容易實(shí)現，既保留了空間，使用起來(lái)也很便捷。但這種突兀的跳轉方式可能會(huì )使部分用戶(hù)感到迷惑。

3. 選單式導航欄

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

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

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

5. 側滑式導航欄

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

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

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

7. 取消導航欄

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

8. 復雜導航欄

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

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

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

10. 滑動(dòng)式導航欄

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

11. 取消子導航欄

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

2. 條件加載

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

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

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