wsu0pVNA6KM
RWD網頁設計時代，有哪些手機電腦相通的設計形式？
在響應式網頁設計的時代，每一種設計樣式都必須找到得以同時適應電腦版與手機版的解決方案，
成為當前網頁設計師們的重要課題。許多過去很炫且視覺效果強烈的網頁設計，
在響應式網頁的考量下，不見得都可以繼續使用。
設計師們必須找出同時可以符合響應式網頁設計規範，又能具體呈現不同網頁設計風格的作法。
我們來看看有哪些成熟的響應式網頁設計案例，能讓你的客戶在手機上順利瀏覽，同時增進網站流量。
►漢堡選單，手機版選單的標準配備
漢堡選單目前已廣泛作為響應式選單的設計模式，IBM官網則進一步將它發展成電腦版和手機版共用的選單樣式，
並保留電腦版的主選單，使電腦版和手機版的操作習慣更為一致。
產品大選單，讓客戶一次看懂你的產品架構，過去網站次要選單經常採用左選單的方式來設計，
在響應式的時代，GE官網直接將這些網站次要選單直接在主選單上以下拉選單的方式呈現。
如此的規劃，可讓使用者在電腦版選單和手機版選單，看到一致性的選項。
►全幅背景，在電腦版和手機版間呈現最佳的形象張力
全幅背景是目前最流行的響應式網頁設計模式，不論內容是圖片輪撥(slider)、影片或單色色塊。
由於大背景主要是透過width:100%讓畫面尺寸自動貼合螢幕尺寸，一來在電腦或行動裝置都可以貼齊邊界，
二來大背景可以呈現大螢幕的觀賞效果，因此成為最受歡迎的響應式網頁設計樣式之一。
►卡片式列表，讓資料呈現井然有序
卡片式列表應該算是響應式時代最典型的設計樣式。
卡片式的設計可以在電腦版和手機版自由切換，與手機APP清單的瀏覽模式相近，
可清楚呈現每個item，點選範圍也變大了，許多列表的樣式(例如news list)也都直接採用卡片式設計。
►時間軸，可因應手機電腦不同裝置尺寸改變的訊息版面
時間軸是最適合用來呈現歷史記錄概念的設計，經常用在企業歷史沿革。
響應式(RWD)的時間軸可用來在電腦版和手機版呈現時序概念。
►橫拉式表格，讓表格在RWD手機版左右滑動
表格的呈現在響應式網頁設計(RWD)中仍然是一件困難的事，很難想像如何在手機如此小的螢幕當中，
要閱讀一張像Excel般複雜的表格。
以Bootstrap的滑動式表格來說，可在手機上採用手指滑動的方式來回瀏覽整份表格。
►雜誌式編排，提昇網頁版面的設計質感
隨著技術性問題的克服，全版雜誌式編排在近年逐漸成為響應式網頁設計(RWD)的主流設計樣式。
雜誌式的區塊分割可以讓網頁看起來更像閱讀雜誌，少了左右的空白區塊，網頁看起來更為簡潔俐落。
►旋轉輪播，在電腦、手機、平板之間最具空間彈性的設計形式
旋轉輪播在響應式網頁設計(RWD)持續發燒，好的Carousal元件可設定在不同的螢幕寬度顯示不同的筆數，
以適應網頁版面的調適。
►回到頁頂，RWD時代的必備元件
GoToTop在跨裝置瀏覽來說，是個簡單又十分便捷的設計。
由於一頁式網頁加上手機版的設計都是屬長頁式的網頁，一個小小的箭頭就能幫助使用者回到頁首。
過去幾年，全球所有的設計師透過各種方式不斷探索RWD響應式網頁設計的設計模式，
2017年即將進入成熟階段， 成熟且大眾化的響應式網頁設計樣式才能提高網站流量。
網頁設計是一種產品設計，因此，不夠實用或不符合趨勢的設計，
不只會導致使用者在網站裡迷航，更可能讓使用者對你的網站失去耐心與信心。
文章來源：https://www.cadiis.com.tw/blog/rwd-web-design-trends-and-features
.gif "值得關注的 16 個網頁設計趨勢")
.jpg "2018網頁設計的走向")
.gif "2021網頁設計流行趨勢")