ENsearch btn

選擇文章分類
2017-01-24
Eric Wang

響應式網頁設計(RWD)有哪些趨勢與特點?

過去幾年,全球所有的設計師透過各種方式不斷探索響應式網頁設計(RWD)的設計模式。這幾年RWD即將進入成熟階段, 成熟且大眾化的響應式網頁設計(RWD)樣式才能提高網站流量。

 

 

main

 

過去幾年,全球所有的設計師透過各種方式不斷探索RWD響應式網頁設計的設計模式,2017年即將進入成熟階段, 成熟且大眾化的響應式網頁設計樣式才能提高網站流量。

 

網頁設計是一種產品設計,因此,不夠實用或不符合趨勢的設計,不只會導致使用者在網站裡迷航,更可能讓使用者對你的網站失去耐心與信心。

 

在響應式網頁的時代,每一種網頁設計樣式都必須找到得以同時適應電腦版與手機版的解決方案,成為當前網頁設計師們的重要課題。許多過去很炫且視覺效果強烈的網頁設計,在響應式網頁的考量下,不見得都可以繼續使用。設計師們必須找出同時可以符合響應式網頁設計規範,又能具體呈現不同網頁設計風格的作法。我們來看看有哪些成熟的響應式網頁設計案例,能讓你的客戶在手機上順利瀏覽,同時增進網站流量。

 

 

 

 

漢堡選單(hamburger menu)

漢堡選單目前已廣泛作為響應式(RWD)選單的設計模式,IBM官網則進一步將它發展成電腦版和手機版共用的選單樣式,並保留電腦版的主選單,使電腦版和手機版的操作習慣更為一致。

01 201 2

 

 

下拉選單(dropdown menu)

過去網站次要選單經常採用左選單的方式來設計,在響應式的時代,GE官網直接將這些網站次要選單直接在主選單上以下拉選單的方式呈現。如此的規劃,可讓使用者在電腦版選單和手機版選單,看到一致性的選項。

 

02

 

全幅背景(full background)

全幅背景是目前最流行的響應式網頁設計模式,不論內容是圖片輪撥(slider)、影片或單色色塊。由於大背景主要是透過width:100%讓畫面尺寸自動貼合螢幕尺寸,一來在電腦或行動裝置都可以貼齊邊界,二來大背景可以呈現大螢幕的觀賞效果,因此成為最受歡迎的響應式網頁設計樣式之一。

 

03 203 2

 

 

 

卡片列表(Card List)

卡片式列表應該算是響應式時代最典型的設計樣式。卡片式的設計可以在電腦版和手機版自由切換,與手機APP清單的瀏覽模式相近,可清楚呈現每個item,點選範圍也變大了,許多列表的樣式(例如news list)也都直接採用卡片式設計。

 

04 2

 

04 2

 

 

 

全螢幕相簿(Full Screen Album)

有圖有真相,透過照片來介紹是最簡單有效的方式。然而不是所有的相簿外掛都能做成響應式網頁設計的方式。全螢幕相簿可直接偵測螢幕寬高來自動調整圖片呈現的尺寸,不像嵌入網頁的相簿,需顧慮網頁上其他元素相對的位置,因此全景相簿成為響應式網頁設計時代最受歡迎的相簿設計模式。

 

05 2

 

05 2

 

 

時間軸(Timeline)

時間軸是最適合用來呈現歷史記錄概念的設計,經常用在企業歷史沿革。響應式(RWD)的時間軸可用來在電腦版和手機版呈現時序概念。

 

06 206 2

 

 

 

 

滑動表格

表格的呈現在響應式網頁設計(RWD)中仍然是一件困難的事,很難想像如何在手機如此小的螢幕當中,要閱讀一張像Excel般複雜的表格。以Bootstrap的滑動式表格來說,可在手機上採用手指滑動的方式來回瀏覽整份表格。

 

07 2

 

07 2

 

 

 

雜誌式編排

隨著技術性問題的克服,全版雜誌式編排在近年逐漸成為響應式網頁設計(RWD)的主流設計樣式。雜誌式的區塊分割可以讓網頁看起來更像閱讀雜誌,少了左右的空白區塊,網頁看起來更為簡潔俐落。

 

08 2

 

08 2

 

旋轉輪播 (Carousal)

旋轉輪播在響應式網頁設計(RWD)持續發燒,好的Carousal元件可設定在不同的螢幕寬度顯示不同的筆數,以適應網頁版面的調適。

 

09 1

 

 

回到頁頂(Go to top)

GoToTop在跨裝置瀏覽來說,是個簡單又十分便捷的設計。由於一頁式網頁加上手機版的設計都是屬長頁式的網頁,一個小小的箭頭就能幫助使用者回到頁首。

 

10 2

 

10 2

 

 

訂閱文章

想要收到CADIIS凱士網頁設計公司的相關訊息嗎?

我們會在FB轉貼網頁設計專欄文章,歡迎訂閱CADIIS凱士數位臉書專頁

 

 

 

 

cadiis

Eric Wang

凱士數位科技專案經理 Eric,擁有設計與理工背景,擅長和行銷、業務、管理、資訊、設計等專業人員進行跨領域溝通,樂於分享與討論,長期致力於網頁設計白話文運動。

 

 

想找專人詢問嗎?

凱士網頁設計深受B2B外銷公司、上市櫃公司及外商公司推薦,累積超過100個網頁設計案例。

 

想跟我們談談您的網頁設計需求嗎?

 

立即填表諮詢

 

 

凱士數位科技

諮詢專線: 04-2221-0688

想進一步了解網頁設計服務?