設計實務

手機優先的電商版面設計：七成流量的體驗別再用桌機思維

2026年5月20日・ViewInternet 編輯部

台灣電商的行動流量普遍占六到八成，但多數網站的設計流程還是老樣子：先畫桌機稿、再「順便」縮成手機版。結果就是我們健檢時常看到的畫面：手機上按鈕小到按不準、重點資訊要滑三屏才看到、結帳表單在小螢幕上像考試。行動優先不是口號，是設計順序的顛倒——先把手機版做到好，桌機版反而簡單。這篇講六個原則。

原則一：為拇指設計，不是為滑鼠

手機的操作主體是單手拇指，螢幕下半部是舒適熱區、上緣是死角。落地到設計：主要動作放下方（加入購物車、結帳按鈕貼近拇指）、點擊目標夠大（按鈕與連結的觸控區至少 44px 見方，相鄰可點元素要有間距——「想點 A 卻點到 B」是行動版最常見的挫折）、危險動作遠離熱區（刪除、清空購物車別放在容易誤觸的位置）。

原則二：資訊分層摺疊，第一屏只給決策必需

手機螢幕一屏的資訊量只有桌機的三分之一，全部平鋪等於逼客人無止盡地滑。做法：第一屏給決策核心（主圖、品名、價格、評價星等、購買按鈕）、次要資訊摺疊（規格表、詳細說明、退換貨政策收進可展開區塊或錨點分頁）、摺疊標題要會說話（「材質與保養方式」比「更多資訊」誘人）。摺疊不是隱藏——是讓每個客人按自己的節奏取用資訊。

原則三：貼底購買列——行動版的轉換保險

商品頁往下滑讀內容時，購買按鈕不該消失。貼底固定的行動列（價格＋加入購物車）讓客人在任何閱讀位置都能一鍵行動，這是行動版商品頁效果最直接的設計之一。細節：行動列高度收斂（別吃掉太多閱讀空間）、與頁面內容的層次分明（微陰影或邊線）、iPhone 底部手勢區的安全距離要留。

原則四：輸入能免則免

手機打字的痛苦是桌機的三倍，每一個輸入欄位都在流失訂單。健檢清單:欄位數量砍到最低（送貨要的資訊才要，「怎麼知道我們」這種行銷欄位別放結帳流程）、鍵盤類型對應（電話欄叫出數字鍵盤、Email 欄叫出含 @ 的鍵盤——inputmode 設定而已，體驗差很大）、自動帶入（地址選單連動、超商門市地圖選店、會員資料自動填）、第三方登入與支付（LINE 登入、Apple Pay 這類「免打字」選項，行動版的價值加倍）。

原則五：速度預算比桌機更嚴

行動裝置的網路與效能都比桌機差，同一個頁面在手機上就是更慢。行動優先的速度紀律：圖片響應式供圖（手機別載桌機尺寸的大圖）、第三方腳本盤點（每加一個追蹤碼都是速度稅）、首屏資源優先（Banner 與主圖優先載入，其餘懶載入）。用 PageSpeed Insights 的行動分數當基準——那才是你多數客人的真實體驗。

原則六：桌機版是行動版的展開，不是另一個網站

行動優先的正確流程：手機版定案後，桌機版把摺疊的內容展開、把單欄變多欄——資訊架構與視覺語言一致，只是空間利用不同。反過來（桌機定案再壓縮）的產物，永遠帶著「被裁切」的痕跡。維護上也輕：一套內容邏輯，兩種呈現。

檢驗方法：用自己的手機下一單

最誠實的測試不用工具：拿自己的手機、用行動網路、從廣告點進去走完一次購買流程。每一次的猶豫、誤觸、等待、皺眉，都是真金白銀的流失點。每月做一次，勝過看十份報表。

ViewInternet 的商品頁設計與賣場裝修都以行動優先為預設流程，轉換優化服務含完整的行動體驗健檢。你的站在手機上及格嗎？加 LINE 幫你走一遍。