在響應式網(wǎng)頁設(shè)計的時代，每一種設(shè)計樣式都必須找到得以同時適應電腦版與手機版的解決方案，成為當前網(wǎng)頁設(shè)計師們的重要課題。許多過去很炫且視覺效果強烈的網(wǎng)頁設(shè)計，在響應式網(wǎng)頁的考量下，不見得都可以繼續(xù)使用。設(shè)計師們必須找出同時可以符合響應式網(wǎng)頁設(shè)計規(guī)范，又能具體呈現(xiàn)不同網(wǎng)頁設(shè)計風格的作法。我們來看看有哪些成熟的響應式網(wǎng)頁設(shè)計案例，能讓你的客戶在手機上順利瀏覽，同時增進網(wǎng)站流量。
采用漢堡選單(hamburger menu)做為自適應網(wǎng)頁手機版選單
漢堡選單目前已廣泛作為響應式(自適應)選單的設(shè)計模式，IBM官網(wǎng)則進一步將它發(fā)展成電腦版和手機版共用的選單樣式，并保留電腦版的主選單，使電腦版和手機版的操作習慣更為一致。
?
下拉選單(dropdown menu)在電腦版和自適應網(wǎng)頁手機版都能相通
過去網(wǎng)站次要選單經(jīng)常采用左選單的方式來設(shè)計，在響應式的時代，GE官網(wǎng)直接將這些網(wǎng)站次要選單直接在主選單上以下拉選單的方式呈現(xiàn)。如此的規(guī)劃，可讓使用者在電腦版選單和手機版選單，看到一致性的選項。
?
?
采用自適應全幅背景(full background)呈現(xiàn)大屏幕的觀賞效果
全幅背景是目前最流行的響應式網(wǎng)頁設(shè)計模式，不論內(nèi)容是圖片切換(slider)、影片或單色色塊。由于大背景主要是透過width:100%讓畫面尺寸自動貼合屏幕尺寸，一來在電腦或行動設(shè)備都可以貼齊邊界，二來大背景可以呈現(xiàn)大屏幕的觀賞效果，因此成為最受歡迎的響應式網(wǎng)頁設(shè)計樣式之一。
?
?
?
?
文章列表以自適應卡片清單方式呈現(xiàn)(Card List)
卡片式列表應該算是響應式時代最典型的設(shè)計樣式?？ㄆ降脑O(shè)計可以在電腦版和手機版自由切換，與手機APP清單的瀏覽模式相近，可清楚呈現(xiàn)每個圖片，點選范圍也變大了，許多列表的樣式(例如news list)也都直接采用卡片式設(shè)計。
?
?
?
?
?
可因應屏幕尺寸自由變化的自適應全屏幕相冊(Full Screen Album)
有圖有真相，透過照片來介紹是最簡單有效的方式。然而不是所有的相冊外掛都能做成響應式網(wǎng)頁設(shè)計的方式。全屏幕相冊可直接偵測屏幕寬高來自動調(diào)整圖片呈現(xiàn)的尺寸，不像嵌入網(wǎng)頁的相冊，需顧慮網(wǎng)頁上其他元素相對的位置，因此全景相冊成為響應式網(wǎng)頁設(shè)計時代最受歡迎的相冊設(shè)計模式。
?
?
?
?
可因應手機尺寸改為單邊呈現(xiàn)的自適應時間軸(Timeline)版面
時間軸是最適合用來呈現(xiàn)歷史記錄概念的設(shè)計，經(jīng)常用在企業(yè)歷史沿革。響應式(自適應)的時間軸可用來在電腦版和手機版呈現(xiàn)時序概念。
?
?
?
?
?
可以在手機版左右拖拉的滑動式自適應表格
表格的呈現(xiàn)在響應式網(wǎng)頁設(shè)計(自適應)中仍然是一件困難的事，很難想像如何在手機如此小的屏幕當中，要閱讀一張像Excel般復雜的表格。以Bootstrap的滑動式表格來說，可在手機上采用手指滑動的方式來回瀏覽整份表格。
?
??
?
?
雜志式編排可以在自適應手機版成為有
隨著技術(shù)性問題的克服，全版雜志式編排在近年逐漸成為響應式網(wǎng)頁設(shè)計(自適應)的主流設(shè)計樣式。雜志式的區(qū)塊分割可以讓網(wǎng)頁看起來更像閱讀雜志，少了左右的空白區(qū)塊，網(wǎng)頁看起來更為簡潔俐落。
?
?
?
旋轉(zhuǎn)輪播(Carousal)
旋轉(zhuǎn)輪播在響應式網(wǎng)頁設(shè)計(自適應)持續(xù)發(fā)燒，好的Carousal元件可設(shè)定在不同的屏幕寬度顯示不同的筆數(shù)，以適應網(wǎng)頁版面的調(diào)適。
?
?
?
回到頁頂(Go to top)
GoToTop在跨設(shè)備瀏覽來說，是個簡單又十分便捷的設(shè)計。由于一頁式網(wǎng)頁加上手機版的設(shè)計都是屬長頁式的網(wǎng)頁，一個小小的箭頭就能幫助使用者回到頁首。
?
?
過去幾年，全球所有的設(shè)計師透過各種方式不斷探索自適應響應式網(wǎng)頁設(shè)計的設(shè)計模式，2021年即將進入成熟階段，成熟且大眾化的響應式網(wǎng)頁設(shè)計樣式才能提高網(wǎng)站流量。網(wǎng)頁設(shè)計是一種產(chǎn)品設(shè)計，因此，不夠?qū)嵱没虿环馅厔莸脑O(shè)計，不只會導致使用者在網(wǎng)站里迷路，更可能讓使用者對你的網(wǎng)站失去耐心與信心。
