手機版網頁有哪些常見的設計範例?
過去幾年,全球所有的設計師透過各種方式不斷探索響應式網頁設計(RWD)的設計模式。這幾年RWD即將進入成熟階段, 成熟且大眾化的響應式網頁設計(RWD)樣式才能提高網站流量。
在響應式網頁設計的時代,每一種設計樣式都必須找到得以同時適應電腦版與手機版的解決方案,成為當前網頁設計師們的重要課題。許多過去很炫且視覺效果強烈的網頁設計,在響應式網頁的考量下,不見得都可以繼續使用。設計師們必須找出同時可以符合響應式網頁設計規範,又能具體呈現不同網頁設計風格的作法。我們來看看有哪些成熟的響應式網頁設計案例,能讓你的客戶在手機上順利瀏覽,同時增進網站流量。
快速導覽
漢堡選單,手機版選單的標準配備
漢堡選單目前已廣泛作為響應式(RWD)選單的設計模式,IBM官網則進一步將它發展成電腦版和手機版共用的選單樣式,並保留電腦版的主選單,使電腦版和手機版的操作習慣更為一致。
參考案例來源:
產品大選單,讓客戶一次看懂你的產品架構
過去網站次要選單經常採用左選單的方式來設計,在響應式的時代,GE官網直接將這些網站次要選單直接在主選單上以下拉選單的方式呈現。如此的規劃,可讓使用者在電腦版選單和手機版選單,看到一致性的選項。
參考案例來源:
https://web.leadtrend.com.tw/en/
全幅背景,在電腦版和手機版間呈現最佳的形象張力
全幅背景是目前最流行的響應式網頁設計模式,不論內容是圖片輪撥(slider)、影片或單色色塊。由於大背景主要是透過width:100%讓畫面尺寸自動貼合螢幕尺寸,一來在電腦或行動裝置都可以貼齊邊界,二來大背景可以呈現大螢幕的觀賞效果,因此成為最受歡迎的響應式網頁設計樣式之一。
參考案例來源:
卡片式列表,讓資料呈現井然有序
卡片式列表應該算是響應式時代最典型的設計樣式。卡片式的設計可以在電腦版和手機版自由切換,與手機APP清單的瀏覽模式相近,可清楚呈現每個item,點選範圍也變大了,許多列表的樣式(例如news list)也都直接採用卡片式設計。
參考案例來源:
時間軸,可因應手機電腦不同裝置尺寸改變的訊息版面
橫拉式表格,讓表格在RWD手機版左右滑動
表格的呈現在響應式網頁設計(RWD)中仍然是一件困難的事,很難想像如何在手機如此小的螢幕當中,要閱讀一張像Excel般複雜的表格。以Bootstrap的滑動式表格來說,可在手機上採用手指滑動的方式來回瀏覽整份表格。
參考案例來源:
雜誌式編排,提昇網頁版面的設計質感
隨著技術性問題的克服,全版雜誌式編排在近年逐漸成為響應式網頁設計(RWD)的主流設計樣式。雜誌式的區塊分割可以讓網頁看起來更像閱讀雜誌,少了左右的空白區塊,網頁看起來更為簡潔俐落。
參考案例來源:
旋轉輪播,在電腦、手機、平板之間最具空間彈性的設計形式
旋轉輪播在響應式網頁設計(RWD)持續發燒,好的Carousal元件可設定在不同的螢幕寬度顯示不同的筆數,以適應網頁版面的調適。
參考案例來源:
回到頁頂,RWD時代的必備元件
GoToTop在跨裝置瀏覽來說,是個簡單又十分便捷的設計。由於一頁式網頁加上手機版的設計都是屬長頁式的網頁,一個小小的箭頭就能幫助使用者回到頁首。
參考案例來源:
過去幾年,全球所有的設計師透過各種方式不斷探索RWD響應式網頁設計的設計模式,2017年即將進入成熟階段, 成熟且大眾化的響應式網頁設計樣式才能提高網站流量。網頁設計是一種產品設計,因此,不夠實用或不符合趨勢的設計,不只會導致使用者在網站裡迷航,更可能讓使用者對你的網站失去耐心與信心。
延伸閱讀:百大品牌怎麼做RWD響應式網頁?來看看大公司的手機版網站設計有什麼特色
* 歡迎分享這篇文章,分享時請加入文章來源:凱士網頁設計公司
網站設計服務諮詢 為什麼推薦台中網頁設計公司凱士數位?位於台中的凱士相對有機會接觸到各種不同的產業面向,擁有各種產業的網站設計經驗,幫助企業提升網路品牌形象,建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求,歡迎聯絡我們。
您可以直接填寫諮詢表單;撥打諮詢電話 04-22210688;或加入凱士LINE由專人與您聯繫。 |
Eric Wang 凱士網頁設計公司 專案顧問 Eric,擁有設計、理工、管理等跨領域背景,樂於和不同領域的專業工作者進行分享與討論。在專案工作外,同時也兼任大學行銷系業界講師及企業內訓課程講師,長期致力於「網頁設計白話文運動」。
|
好的形象網站設計,可以幫助公司提升品牌形象與企業價值,透過清楚的網站架構與視覺設計,造就良好的使用體驗與企業形象。
需要網站設計服務嗎?
凱士為您設計製作優質網站
形象網站、公司網站、企業網站、
及各類型客製化網站系統平台