手機版網站設計,不只有 RWD|從 PARCO 與 Crisp 看使用場景的版面策略

設計給手機用的網站,不能只是縮小版

這幾年做網頁的挑戰越來越多。
從早期桌機優先的版型、Flash 盛行的時代,一路走到現在,RWD 幾乎成了標配。

但到了 2022 年,手機使用率早已大幅超越桌機。
特別是在廣告導流、LINE 官方帳號、IG Story 或 QR Code 推廣的場景下,第一接觸點常常就是手機。

在預算有限的情況下,設計師得思考的已不只是「桌機 + 手機都能用」
而是怎麼讓手機用起來更快、更清楚、更能引導操作

這兩天在整理提案簡報時,發現了兩個過去收集的手機導向好例子,順手記錄下來。


名古屋 PARCO 餃子祭

https://nagoya.parco.jp/page/gyoza/

設計上非常明確:手機尺寸中間為活動主視覺,
左右兩側搭配活動資訊與主色延伸,整體畫面不過於擁擠,也容易在滑動時聚焦主題。

PARCO 餃子祭 UI 設計 1

PARCO 餃子祭 UI 設計 2

PARCO 餃子祭 UI 設計 3

PARCO 餃子祭 UI 設計 4


Crisp Connect

https://connect.crisp.co.jp/

這個頁面整體偏右配置,視覺上故意製造一點不平衡感。
左側保留大標與圖文搭配,右側則加入 QR Code,明確引導使用者「掃完回手機上操作」。

Crisp Connect UI 設計 1

Crisp Connect UI 設計 2

Crisp Connect UI 設計 3

Crisp Connect UI 設計 4


在未來更多以手機起點為主的情境下,
設計不再只是「自適應」,而是「使用場景導向」的思考。


當手機使用早已遠超桌機,我們不該只停留在 RWD,
而是一起找出真正適合手機操作的最佳解法。
如果你最近也在為手機版網頁煩惱,歡迎聊聊、一起研究。

查看更多作品案例:超能力設計戰隊官網
Email:[email protected]

延伸閱讀:
一些針對手機版優化的網頁設計

Published by Genie Chen

Genie Chen 陳小吉 1981/8/1 A型 獅子座 Innovation Plus Creative Lab 超能力設計戰隊隊長兼網頁視覺設計師