在響應式網頁設計的時代,每種設計樣式都要找到得以同時適應電腦版與手機版的解決方案。在響應式網頁的考量下,不見得都可以繼續使用。設計師們要找出同時可以符合響應式網頁設計規范,又能具體呈現不同網頁設計風格的作法。我們來看看有哪些成熟的響應式網頁設計案例,能讓你的客戶在手機上順利瀏覽,同時增進網站流量。
采用漢堡選單做為自適應網頁手機版選單
漢堡選單目前已作為響應式(自適應)選單的設計模式,IBM官網則進一步將它發展成電腦版和手機版共用的選單樣式,并保留電腦版的主選單,使電腦版和手機版的操作習慣一致。
下拉選單在電腦版和自適應網頁手機版能相通
過去網站次要選單經常采用左選單的方式來設計,在響應式的時代,GE官網直接將這些網站次要選單直接在主選單上以下拉選單的方式呈現。如此的規劃,可讓使用者在電腦版選單和手機版選單,看到一致性的選項。
采用自適應全幅背景呈現大屏幕的觀賞效果
全幅背景是目前比較流行的響應式
網頁設計模式,不論內容是圖片切換(slider)、影片或單色色塊。由于大背景主要是透過width:100%讓畫面尺寸自動貼合屏幕尺寸,一來在電腦或行動設備都可以貼齊邊界,二來大背景可以呈現大屏幕的觀賞效果,因此成為受歡迎的響應式網頁設計樣式之一。
文章列表以自適應卡片清單方式呈現
卡片式列表應該算是響應式時代典型的設計樣式。卡片式的設計可以在電腦版和手機版自由切換,與手機APP清單的瀏覽模式相近,可清楚呈現每個圖片,點選范圍也變大了,許多列表的樣式也都直接采用卡片式設計。
可因應屏幕尺寸自由變化的自適應全屏幕相冊
全屏幕相冊可直接偵測屏幕寬高來自動調整圖片呈現的尺寸,不像嵌入網頁的相冊,需顧慮網頁上其他元素相對的位置。
可因應手機尺寸改為單邊呈現的自適應時間軸版面
時間軸是適合用來呈現歷史記錄概念的設計,經常用在企業歷史沿革。響應式(自適應)的時間軸可用來在電腦版和手機版呈現時序概念。