首頁?>?知識?資訊?>?自適應(yīng)網(wǎng)頁設(shè)計(jì)有什么特點(diǎn)?設(shè)計(jì)案例參考?>?正文

自適應(yīng)網(wǎng)頁設(shè)計(jì)有什么特點(diǎn)?設(shè)計(jì)案例參考

2021/1/28 0:01:13 · 稿源:傳誠信

響應(yīng)式網(wǎng)頁設(shè)計(jì)的時代,每一種設(shè)計(jì)樣式都必須找到得以同時適應(yīng)電腦版與手機(jī)版的解決方案,成為當(dāng)前網(wǎng)頁設(shè)計(jì)師們的重要課題。許多過去很炫且視覺效果強(qiáng)烈的網(wǎng)頁設(shè)計(jì),在響應(yīng)式網(wǎng)頁的考量下,不見得都可以繼續(xù)使用。設(shè)計(jì)師們必須找出同時可以符合響應(yīng)式網(wǎng)頁設(shè)計(jì)規(guī)范,又能具體呈現(xiàn)不同網(wǎng)頁設(shè)計(jì)風(fēng)格的作法。我們來看看有哪些成熟的響應(yīng)式網(wǎng)頁設(shè)計(jì)案例,能讓你的客戶在手機(jī)上順利瀏覽,同時增進(jìn)網(wǎng)站流量。

采用漢堡選單(hamburger menu)做為自適應(yīng)網(wǎng)頁手機(jī)版選單

漢堡選單目前已廣泛作為響應(yīng)式(自適應(yīng))選單的設(shè)計(jì)模式,IBM官網(wǎng)則進(jìn)一步將它發(fā)展成電腦版和手機(jī)版共用的選單樣式,并保留電腦版的主選單,使電腦版和手機(jī)版的操作習(xí)慣更為一致。

自適應(yīng)建站自適應(yīng)建站

?

下拉選單(dropdown menu)在電腦版和自適應(yīng)網(wǎng)頁手機(jī)版都能相通

過去網(wǎng)站次要選單經(jīng)常采用左選單的方式來設(shè)計(jì),在響應(yīng)式的時代,GE官網(wǎng)直接將這些網(wǎng)站次要選單直接在主選單上以下拉選單的方式呈現(xiàn)。如此的規(guī)劃,可讓使用者在電腦版選單和手機(jī)版選單,看到一致性的選項(xiàng)。

?

自適應(yīng)建站

?

采用自適應(yīng)全幅背景(full background)呈現(xiàn)大屏幕的觀賞效果

全幅背景是目前最流行的響應(yīng)式網(wǎng)頁設(shè)計(jì)模式,不論內(nèi)容是圖片切換(slider)、影片或單色色塊。由于大背景主要是透過width:100%讓畫面尺寸自動貼合屏幕尺寸,一來在電腦或行動設(shè)備都可以貼齊邊界,二來大背景可以呈現(xiàn)大屏幕的觀賞效果,因此成為最受歡迎的響應(yīng)式網(wǎng)頁設(shè)計(jì)樣式之一。

?

自適應(yīng)建站自適應(yīng)建站

?

?

?

文章列表以自適應(yīng)卡片清單方式呈現(xiàn)(Card List)

卡片式列表應(yīng)該算是響應(yīng)式時代最典型的設(shè)計(jì)樣式??ㄆ降脑O(shè)計(jì)可以在電腦版和手機(jī)版自由切換,與手機(jī)APP清單的瀏覽模式相近,可清楚呈現(xiàn)每個圖片,點(diǎn)選范圍也變大了,許多列表的樣式(例如news list)也都直接采用卡片式設(shè)計(jì)。

?

自適應(yīng)建站

?

自適應(yīng)建站

?

?

?

可因應(yīng)屏幕尺寸自由變化的自適應(yīng)全屏幕相冊(Full Screen Album)

有圖有真相,透過照片來介紹是最簡單有效的方式。然而不是所有的相冊外掛都能做成響應(yīng)式網(wǎng)頁設(shè)計(jì)的方式。全屏幕相冊可直接偵測屏幕寬高來自動調(diào)整圖片呈現(xiàn)的尺寸,不像嵌入網(wǎng)頁的相冊,需顧慮網(wǎng)頁上其他元素相對的位置,因此全景相冊成為響應(yīng)式網(wǎng)頁設(shè)計(jì)時代最受歡迎的相冊設(shè)計(jì)模式。

?

自適應(yīng)建站

?

自適應(yīng)建站

?

?

可因應(yīng)手機(jī)尺寸改為單邊呈現(xiàn)的自適應(yīng)時間軸(Timeline)版面

時間軸是最適合用來呈現(xiàn)歷史記錄概念的設(shè)計(jì),經(jīng)常用在企業(yè)歷史沿革。響應(yīng)式(自適應(yīng))的時間軸可用來在電腦版和手機(jī)版呈現(xiàn)時序概念。

?

自適應(yīng)建站自適應(yīng)建站

?

?

?

?

可以在手機(jī)版左右拖拉的滑動式自適應(yīng)表格

表格的呈現(xiàn)在響應(yīng)式網(wǎng)頁設(shè)計(jì)(自適應(yīng))中仍然是一件困難的事,很難想像如何在手機(jī)如此小的屏幕當(dāng)中,要閱讀一張像Excel般復(fù)雜的表格。以Bootstrap的滑動式表格來說,可在手機(jī)上采用手指滑動的方式來回瀏覽整份表格。

?

自適應(yīng)建站

??

?

?

雜志式編排可以在自適應(yīng)手機(jī)版成為有

隨著技術(shù)性問題的克服,全版雜志式編排在近年逐漸成為響應(yīng)式網(wǎng)頁設(shè)計(jì)(自適應(yīng))的主流設(shè)計(jì)樣式。雜志式的區(qū)塊分割可以讓網(wǎng)頁看起來更像閱讀雜志,少了左右的空白區(qū)塊,網(wǎng)頁看起來更為簡潔俐落。

?

自適應(yīng)建站

?

自適應(yīng)建站

?

旋轉(zhuǎn)輪播(Carousal)

旋轉(zhuǎn)輪播在響應(yīng)式網(wǎng)頁設(shè)計(jì)(自適應(yīng))持續(xù)發(fā)燒,好的Carousal元件可設(shè)定在不同的屏幕寬度顯示不同的筆數(shù),以適應(yīng)網(wǎng)頁版面的調(diào)適。

?

自適應(yīng)建站

?

?

回到頁頂(Go to top)

GoToTop在跨設(shè)備瀏覽來說,是個簡單又十分便捷的設(shè)計(jì)。由于一頁式網(wǎng)頁加上手機(jī)版的設(shè)計(jì)都是屬長頁式的網(wǎng)頁,一個小小的箭頭就能幫助使用者回到頁首。

?

自適應(yīng)建站

?

自適應(yīng)建站

過去幾年,全球所有的設(shè)計(jì)師透過各種方式不斷探索自適應(yīng)響應(yīng)式網(wǎng)頁設(shè)計(jì)的設(shè)計(jì)模式,2021年即將進(jìn)入成熟階段,成熟且大眾化的響應(yīng)式網(wǎng)頁設(shè)計(jì)樣式才能提高網(wǎng)站流量。網(wǎng)頁設(shè)計(jì)是一種產(chǎn)品設(shè)計(jì),因此,不夠?qū)嵱没虿环馅厔莸脑O(shè)計(jì),不只會導(dǎo)致使用者在網(wǎng)站里迷路,更可能讓使用者對你的網(wǎng)站失去耐心與信心。


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354