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