優惠活動 - 10周年慶本月新客福利
優惠活動 - 10周年慶本月新客福利
優惠活動 - 10周年慶本月新客福利

響應式網站設計

日期 : 2022-02-09 21:47:11

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

上一篇:響應式設計模式 下一篇:網站頁面優化
相關文章
国内精品久久久久精免费