Responsive Web Design響應式網頁

RWD響應式網頁設計四的思考方向

  • 針對需求來顯示內容是否合宜

    當使用者在網路搜尋網頁時,搜尋的目的是想要得到相關的的資訊來解決問題,有可能是購物、尋找專業公司、獲取知識、休閒活動等等,都有一個準確目的性。

    企業形象網站:

    形象網頁建立的目的是,依照企業類別與產品性質,提供高質感的專業網頁介紹給有需求者,想當然,網站表現出更具專業性的內容與視覺設計是可以讓有此需求的人更願意尋求幫助,當網站使用RWD響應式網頁呈現,在任何尺寸螢幕下都呈高度的專業質感,更可以,這也是企業網站成功的方向。

    購物網站:

    有購物需求的人,應該讓他們可以直接搜尋到產品,直接觀看產品圖片或是產品解說,再多的形象設計圖與公司專業說明也無意義,這樣的網頁設計重點為如何讓搜尋者最快的搜尋到他需要的產品,所以網站布局部分應該在搜尋與分類的便利性與產品與文案的顯示方式,以RWD響應式網頁方式顯示產品介紹網頁,會對有購物需求的人對產品更有親和力,當然也更有機會下單購買。

    資訊式網站:

    主要以大量文章與技術專欄為主,如blog、維基百科、奇摩首頁等等,這類型網站的文章分類部分必須花費更多心思,在於瀏覽的視覺動線是否清楚明顯,切勿造成雜亂無章的編排,需要注意的是大型平台類網頁並不建議以RWD網頁方式製作,因為小螢幕時的顯示內容有限,並不適合大量的文章與圖片篇排,就算勉強顯示出來也會因為太大量的資訊造成必須一直往下滑動,但這對瀏覽者來說並不會比較方便,反而會造成瀏覽上的困擾。


    用較少點擊次數,取得需要的內容

    相信會使用網頁搜尋功能的使用者,不論是使用PC電腦或是移動裝置,都會希望用快速的時間達成目的,最不希望遇到網站內容雜亂無章,當使用者進入到這樣的網站,在瀏覽一次後看不到自己想要的資訊或是相關分類,通常會馬上關閉網站繼續嘗試別的網站,另一種狀況是分類層級太多或是搜尋困難的情況都是會讓使用者感到困擾而放棄瀏覽。

    網頁設計公司在製作一個網站時,減少點擊次數是一個非常重要的的思維,意味這網站的便利性,更直接影響到網站的整體跳出率,在移動裝置上瀏覽RWD響應式網頁上更是明顯,由於移動裝置螢幕普遍較小,並且觸控螢幕沒有hover效果(滑鼠覆蓋後改變效果),由於移動裝置螢幕通常較小,在使上更需要耐性,所以在製作RWD網站時必須更注重使用者體驗與使用者介面。


    降低下載讀取時間,讓瀏覽更順暢

    在移動裝置上瀏覽網站,時常會有頻寬與下載容量的限制,一般在桌上型電腦很流暢的瀏覽速度,但是在移動裝置使用上,會因為外在環境的改變,或者裝置本身上的限制導致下載延遲,所以製作RWD自適應網頁時必須從網站檔案與圖片大小上去計較,當然外掛程式如jQuery、CSS、javascrip等的總體架構的讀取速度也是非常重要。


    RWD網頁主要採用方格(塊狀)設計

    如果看過許多以RWD響應式網頁設計的網站,會發現每個RWD網站的編排方式大都有點相似,很多人也對此感到疑惑,那是因為RWD響應式網頁設計時必須考量到移動裝置(筆電、平板、手機),網頁在不同螢幕時是依照不同尺寸來改變編排(縮小、移動、改變或是隱藏某些內容),所以在設計初期必須以方格(塊狀)模組去建置,如此的網頁製作方式,將來不論是在各螢幕尺寸上顯示都可以更容易變化,所以不是RWD響應式網頁總是會用塊狀方式排版,而是方格(塊狀)是RWD網站的製作重要原則之一。