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