ENsearch btn

2020-12-27
Eric Wang

RWD網頁設計時代,有哪些手機電腦相通的設計形式?

過去幾年,全球所有的設計師透過各種方式不斷探索響應式網頁設計(RWD)的設計模式。這幾年RWD即將進入成熟階段, 成熟且大眾化的響應式網頁設計(RWD)樣式才能提高網站流量。

 

 

main

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

 

 

 

 

漢堡選單,手機版選單的標準配備

漢堡選單目前已廣泛作為響應式(RWD)選單的設計模式,IBM官網則進一步將它發展成電腦版和手機版共用的選單樣式,並保留電腦版的主選單,使電腦版和手機版的操作習慣更為一致。

 

參考案例來源:

https://www.tesla.com/

 

01 201 2

 

 

產品大選單,讓客戶一次看懂你的產品架構

過去網站次要選單經常採用左選單的方式來設計,在響應式的時代,GE官網直接將這些網站次要選單直接在主選單上以下拉選單的方式呈現。如此的規劃,可讓使用者在電腦版選單和手機版選單,看到一致性的選項。

 

參考案例來源:

https://web.leadtrend.com.tw/en/

 

02

 

全幅背景,在電腦版和手機版間呈現最佳的形象張力

全幅背景是目前最流行的響應式網頁設計模式,不論內容是圖片輪撥(slider)、影片或單色色塊。由於大背景主要是透過width:100%讓畫面尺寸自動貼合螢幕尺寸,一來在電腦或行動裝置都可以貼齊邊界,二來大背景可以呈現大螢幕的觀賞效果,因此成為最受歡迎的響應式網頁設計樣式之一。

 

參考案例來源:

https://www.dyson.com/en

 

03 203 2

 

 

 

卡片式列表,讓資料呈現井然有序

卡片式列表應該算是響應式時代最典型的設計樣式。卡片式的設計可以在電腦版和手機版自由切換,與手機APP清單的瀏覽模式相近,可清楚呈現每個item,點選範圍也變大了,許多列表的樣式(例如news list)也都直接採用卡片式設計。

 

參考案例來源:

https://www.samsung.com/us

 

04 2

 

04 2

 

 

 

時間軸,可因應手機電腦不同裝置尺寸改變的訊息版面

時間軸是最適合用來呈現歷史記錄概念的設計,經常用在企業歷史沿革。響應式(RWD)的時間軸可用來在電腦版和手機版呈現時序概念。

 

參考案例來源:

https://lne-gmed.com/

 

06 206 2

 

 

 

 

橫拉式表格,讓表格在RWD手機版左右滑動

表格的呈現在響應式網頁設計(RWD)中仍然是一件困難的事,很難想像如何在手機如此小的螢幕當中,要閱讀一張像Excel般複雜的表格。以Bootstrap的滑動式表格來說,可在手機上採用手指滑動的方式來回瀏覽整份表格。

 

參考案例來源:

 

07 2

 

07 2

 

 

 

雜誌式編排,提昇網頁版面的設計質感

隨著技術性問題的克服,全版雜誌式編排在近年逐漸成為響應式網頁設計(RWD)的主流設計樣式。雜誌式的區塊分割可以讓網頁看起來更像閱讀雜誌,少了左右的空白區塊,網頁看起來更為簡潔俐落。

 

參考案例來源:

https://www.dwtbifold.com/

 

08 2

 

08 2

 

旋轉輪播,在電腦、手機、平板之間最具空間彈性的設計形式

旋轉輪播在響應式網頁設計(RWD)持續發燒,好的Carousal元件可設定在不同的螢幕寬度顯示不同的筆數,以適應網頁版面的調適。

 

參考案例來源:

https://www.spotifyjobs.com/

 

09 1

 

 

回到頁頂,RWD時代的必備元件

GoToTop在跨裝置瀏覽來說,是個簡單又十分便捷的設計。由於一頁式網頁加上手機版的設計都是屬長頁式的網頁,一個小小的箭頭就能幫助使用者回到頁首。

 

參考案例來源:

https://www.zeus-helmets.tw/

 

10 2

 

10 2

 

 

過去幾年,全球所有的設計師透過各種方式不斷探索RWD響應式網頁設計的設計模式,2017年即將進入成熟階段, 成熟且大眾化的響應式網頁設計樣式才能提高網站流量。網頁設計是一種產品設計,因此,不夠實用或不符合趨勢的設計,不只會導致使用者在網站裡迷航,更可能讓使用者對你的網站失去耐心與信心。

 

延伸閱讀:什麼是RWD響應式網頁設計?圖解說明讓你3分鐘搞懂手機版網站

 

 

* 歡迎分享這篇文章,分享時請加入文章來源:凱士網頁設計公司

 

 

想詢問網站設計服務嗎?

如果您有形象網站、企業網站、客製化網頁、網站改版相關需求

歡迎聯絡凱士網頁設計公司:立即填寫諮詢表單,或直接撥打電話 04-22210688

 

 

 

 

cadiis

Eric Wang

凱士網頁設計公司 專案經理 Eric,擁有設計與理工背景,擅長和行銷、業務、管理、資訊、設計等專業人員進行跨領域溝通,樂於分享與討論,長期致力於網頁設計白話文運動。

 

 

 

好的形象網站設計,可以幫助提升品牌形象與企業價值,透過清楚的網站架構與視覺設計,造就良好的使用者體驗與企業形象。

 

需要形象網站設計嗎?

凱士為您設計優質形象網站
以及客製化網頁

 

立即填表諮詢

想進一步了解網頁設計服務?