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