天矽部落格最新的網路趨勢資訊

部落格

RWD網頁設計:適應不同尺寸產生的網頁布局變化

 

是否困惑過,要如何將大量的資訊放在頁面上,能夠使瀏覽者清楚地吸收資訊又同時符合RWD網頁設計技術的變化呢?
這肯定是許多網站規劃者頭痛的部分,就讓網頁設計師為您解說不同尺寸的畫面編排,有什麼差異性以及需要注意的地方吧!


小編從天矽網頁設計師那蒐羅了幾個客戶常問的問題,例如:為何我的畫面在手機長這個樣子?為什麼桌機和手機的畫面有差異?手機畫面我要放這先資訊沒辦法呈現嗎?

 

行動優先V.S建置RWD網頁設計的邏輯性:

思考方向1-行動優先(Mobile First):初步規劃網站時,建議從小螢幕開始思考,因為需要先考慮資訊量的取捨,之後逐一放大尺寸,慢慢地把元素加進來。

思考方向2-RWD網頁設計:以網頁使用者為考慮方向,若貴司的使用者主要會是在電腦上使用,規劃時,可以考慮大螢幕多一點;若主要是在行動裝置上,就多加考慮手機螢幕上的呈現方式。

 

RWD網頁設計為什麼呈現畫面不一樣?

依據上述可以得到,根據尺寸大小的不同,所裝載的資料量會不一樣。大螢幕可以放較多東西,小螢幕能裝載的則有限。面對這樣的限制,網頁設計師在畫面規劃上,會進行簡化或捨去的動作。

 

畫面變化範例:

九升科技(桌機/筆電尺寸)

編排方式:資料量多(六個區塊),兩欄式編排。

 

九升科技-手機尺寸

畫面變動如下:

1. 收合主選單
2. 手頁banner換尺寸
3. 所有區塊整併成一整條
4. 產品改成上圖下文呈現

為了因應不同尺寸上呈現最好的排版,在設計時,網頁設計師或是網頁規劃者,應該考慮不同裝置時所呈現的樣子。而製作時也須了解,在不同裝置的變化上,有些過於複雜或是資訊量過大的區域,在小裝置上被簡化或捨去是必要的,這都是為了讓網頁在什麼情況下都能夠清楚的呈現。

 

回上一頁
聯絡我們
聯絡客服