/Mobile-First/過時了？重點是情境，不是螢幕

1. 為什麼 「Mobile-First」 會變成教條

早期智慧型手機流量暴衝，設計圈快速推崇 Mobile-First：先做小螢幕，再往大螢幕延伸。概念沒錯，但十年後的今天我們發現：

• 裝置尺寸遠不止兩種──摺疊機、車載螢幕、電視棒紛紛上線。

• 同一個人可能早上用手機、午休改用筆電、晚上投放到電視。

• 把「螢幕寬度」視為唯一起點，往往忽略真正影響體驗的因素：使用情境。

2. 何謂「情境優先」（Context-First）？

情境 = 環境 + 意圖 + 連線狀態

維度問題典型差異環境使用者在哪裡？通勤路上 vs. 辦公室雙螢幕意圖目標是什麼？快速查資料 vs. 深度編輯連線網速／流量限制？4G 漫遊 vs. 光纖 Wi-Fi

先釐清這三點，再決定版型層級、內容密度與互動方式，比單純調整 breakpoint 更精準。

3. 情境導向設計的三個實作步驟

1. 訪談 + 微日誌

   • 讓使用者記錄「在哪裡、為什麼」打開你的服務。

2. 情境地圖（Context Map）

   • 把上一步資料轉成時序圖，標註裝置、動作、痛點。

3. 漸進式增強（Progressive Enhancement）

   • 先確保核心任務在任何環境都能完成，再為高階情境加上動畫、AI 推薦等附加價值。

4. 案例：航班查詢工具

策略Mobile-First 做法Context-First 做法首畫面塞滿最新優惠檢索欄置頂 + 上次搜尋記憶結果呈現列表捲到底依旅客角色切分：商務顯示直飛+Wi-Fi、背包客顯示最便宜離線情境無功能自動儲存票價快照 → 地鐵裡也能比價

結果：使用者在 3G 條件下完成訂票流程的成功率 +28%，客服詢問量 -17%。

5. 如何衡量成效

• Time-to-Task：跨裝置完成核心動作所需秒數

• Context Switch Drop-off：使用者換裝置時的流失率

• NPS by Context：在不同連線／環境下分段計算滿意度

6. 結論

裝置推陳出新，情境卻始終存在。與其盲信「手機優先」或「桌機優先」，不如擁抱 Context-First：

先搞懂人、場景與限制，再決定要不要做 App、PWA 或單頁式網站。
如此設計出的體驗，才能跨螢幕、一致、真正貼合需求──今天如此，明天也不過時。