← 回到小林の筆記

READING NOTE

手機版不是把桌機縮小,官網版面要重新排

手機版真正要重排的是資訊順序、點擊距離和段落節奏,不是把桌機版整份縮小後硬塞進窄螢幕。

約 3 分鐘

手機版不是把桌機縮小,官網版面要重新排

QUICK READ

閱讀重點

重點摘要

  • 手機版不是桌機縮小,而是另一種閱讀和操作場景。
  • 我會先調整資訊順序,再看卡片、圖片、按鈕和 sidebar 要怎麼堆疊。
  • 桌機上的裝飾、hover 和複雜排列,到了手機不一定要保留。
  • 真正好的 RWD,是手機上不用猜、不用放大、不用左右滑。
文章目錄

我最近在整理這個官網時,最常回頭改的不是顏色,而是手機版的節奏。桌機看起來合理的東西,到了手機常常會全部黏在一起,或者點起來很不安心。

手機版不是把桌機整份縮下去。螢幕變窄後,讀者的耐心、手指操作、視線移動和網路狀態都不一樣,版面也應該重新排。

這篇核心結論

RWD 的重點不是縮放,而是重新決定手機上先看什麼、先點什麼、哪些桌機效果應該直接簡化。

手機先看資訊順序,不是先看造型

桌機可以同時放主標、說明、圖片、側欄和多個卡片,因為視野夠大。但手機一次只能承接很少資訊,如果第一屏先塞滿裝飾和次要內容,讀者就很難知道要不要繼續往下看。

我會先把最重要的標題、摘要和行動路徑排出來,再決定圖片和補充資訊的位置。這樣手機版不是變少,而是變得更有順序。

我這輪手機版優先收斂三個地方

手機優先檢查

  • 標題不能因為寬度太窄而變成不自然的碎片。
  • 主要按鈕和選單要有足夠觸控面積,不靠 hover 才能理解。
  • 卡片、表格和圖片要能在 390px 寬度內穩定顯示。

這些看起來基本,但很多手機版問題都從這裡開始。只要其中一項沒處理好,整頁就會變得需要猜、需要放大、需要左右滑。

有些桌機效果到了手機就該直接拿掉

桌機上的 hover、斜貼卡片、左右分欄、sticky sidebar,在手機上不一定有價值。有些效果保留下來只會增加高度、壓縮內容或造成操作混亂。這時候拿掉不是退步,而是讓手機版回到它該有的使用方式。

我會保留品牌語氣和關鍵視覺,但把不必要的互動和裝飾簡化。手機版看起來可以安靜一點,但一定要更好讀。

我的判斷方式

如果一個桌機效果在手機上不能幫助理解或操作,就不要硬留。手機版先順,品牌感才有地方成立。

常見 FAQ

FAQ

  1. 手機版要先設計嗎?
    至少要先想手機資訊順序。即使先做桌機,也不能最後才把它縮成手機版。
  2. 手機版可以少放內容嗎?
    可以調整呈現順序和密度,但不該把關鍵資訊藏掉,除非有明確原因。
  3. RWD 驗證只看瀏覽器縮放夠嗎?
    不夠。要實際測常見手機寬度、觸控狀態、表格和長標題,避免只在桌機模擬時看起來正常。

結論

手機版官網不是桌機的縮小版。它需要自己的資訊順序、操作節奏和視覺取捨。當手機版先變順,桌機的設計語氣才不會在小螢幕上變成負擔。

TOP