2010年代初期，很多企業網站還是以固定寬度的桌機畫面為準來設計。手機版的做法通常有兩種：另外架一個 m. 開頭網域的簡化站，或者乾脆讓使用者自己放大縮小。短短幾年間，這種做法被整個翻轉過來，「先設計手機、再擴展到桌機」成了業界主流，也就是現在常說的行動優先設計。這篇文章會說明這個轉向背後的原因，再看它實際上怎麼改變 UI/UX 設計流程。從需求整理、線框、互動設計到前端實作，每個環節的先後順序都跟著重新排過。
為什麼2010年代開始轉向行動優先
觸控智慧型手機在2000年代後期出現。進入2010年代後，手機價格持續下探，3G、4G 網路也逐漸普及，手機從偶爾查一下資料的工具，變成很多人上網的主要裝置。在台灣，通勤時用手機看新聞、找餐廳、比價購物成了日常，企業網站的流量來源也慢慢往行動裝置移動。不少網站打開後台流量報表，都會看到行動裝置的比例一年比一年高。
舊做法的問題也一一浮現。獨立的手機版網站要維護兩套內容，常常桌機版更新了，手機版卻忘了改。直接把桌機版縮小顯示，文字太小、按鈕難點，使用者得一直用手指放大。2010年前後，響應式網頁設計的概念被提出：用流動網格、彈性圖片和 CSS 媒體查詢，讓同一套網頁自動適應不同螢幕。從技術面來說，「一個網站對應所有裝置」從此變得可行。
不過響應式只是工具，真正關鍵的是設計順序。如果仍然從桌機版開始設計，再把內容硬塞進手機，結果通常是一個充滿隱藏選單、區塊層層堆疊、載入又重的手機版。行動優先的主張是把順序倒過來：先面對最小的螢幕、最不穩定的網路和最零碎的使用情境，把真正重要的東西想清楚，再往大螢幕擴充。搜尋引擎這邊，Google 在2010年代後期推動行動優先索引，主要以行動版內容作為評估網頁的依據。這讓行動優先從一種設計理念，變成企業網站很難忽視的現實。
行動優先設計的核心：用限制逼出優先順序
很多人以為行動優先就是「先畫手機尺寸的設計稿」，其實重點在思考方式。手機螢幕一次能呈現的內容有限，使用者多半用拇指操作，可能一手還拿著東西，網路也時快時慢。這些限制會逼團隊回答一個根本問題：這一頁最重要的事情是什麼？
以中小企業常見的服務介紹頁為例。桌機版常見的配置是上方輪播三張形象圖，左邊放公司介紹，右邊放最新消息，並排起來看似豐富。換到手機上，這些內容只能排成一直線，誰在前、誰在後就非決定不可。如果使用者來這頁主要是想知道服務內容、價格範圍和聯絡方式，這些資訊就應該放在前面。形象輪播則可能要縮減，甚至拿掉。
這也延伸出漸進增強的觀念：先建立在所有裝置上都能運作的核心內容與功能，再隨著螢幕變大、裝置能力變強，加上側欄、滑鼠懸停效果、較大的圖片等增強體驗。過去常見的是優雅降級，也就是先做出完整版本，再替能力較弱的裝置刪減功能。相較之下，漸進增強比較不容易遺漏手機使用者的需求，因為核心體驗一開始就是替他們設計的。
行動優先設計如何改變 UI/UX 流程
流程上最明顯的變化是「內容先行」。過去常見的順序是：設計師先做出漂亮的桌機首頁視覺，客戶確認後再補內容。行動優先的流程通常會先做內容盤點，列出每一頁需要的資訊並依重要程度排序，之後才進入線框與視覺階段。實務上大致會經過這幾個步驟：
- 內容盤點與排序：把每頁內容列成清單，標出必要、次要和可省略的項目。手機版的閱讀順序，基本上就是這份清單的順序。
- 小螢幕線框：先用手機寬度畫線框，確認單欄排列下的閱讀動線，再規劃平板與桌機要怎麼把單欄展開成多欄。
- 觸控優先的互動設計：按鈕與連結要有足夠的點擊範圍。Apple 和 Google 的設計規範分別建議約 44pt 與 48dp 的最小觸控尺寸。只在滑鼠懸停時出現的選單或提示，在手機上無法觸發，必須改成點擊展開或直接顯示。
- 實機原型測試：在電腦螢幕上看手機尺寸的設計稿，和拿在手上實際操作的感受差很多。建議用原型工具或測試頁，在手機上把主要流程完整走過一遍。
角色分工也跟著調整。設計師交付的不再只是幾張固定寬度的設計稿，還要說明元件在不同寬度下的變化規則，例如卡片在手機上一排一張、平板兩張、桌機三張。工程師也需要更早加入討論，因為版面斷點、圖片尺寸和效能限制都會直接影響設計決策。許多團隊因此開始建立元件庫與設計系統，用一致的元件應對各種螢幕尺寸，減少每換一個尺寸就重畫一次的情況。
表單是最容易看出差異的地方。在手機上打字很麻煩，所以行動優先的表單設計會盡量減少欄位數量。它也會設定正確的輸入類型，讓手機自動跳出數字或 Email 專用鍵盤，並把錯誤提示放在對應欄位旁邊，而不是集中顯示在頁面頂端。這些改進原本是為手機設計的，通常也讓桌機使用者填得更順。
前端實作上的行動優先
在程式碼層面，行動優先的寫法是：預設樣式寫給小螢幕，再用 min-width 媒體查詢逐步替大螢幕加上樣式。以服務列表為例：
.service-list { display: block; }
.service-item { margin-bottom: 16px; }
@media (min-width: 768px) {
.service-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (min-width: 1200px) {
.service-list { grid-template-columns: repeat(3, 1fr); }
}這樣寫，手機只需要套用最基本的樣式，不必先吃進桌機版的設定再一層層覆蓋，CSS 的邏輯也比較單純。反過來用 max-width 從桌機往下修改，常會出現一大堆「把前面設定取消掉」的程式碼，日後維護容易出錯。頁面的 head 區塊也要記得加上 <meta name="viewport" content="width=device-width, initial-scale=1">，否則手機瀏覽器可能會用預設的寬螢幕模式來顯示網頁。
效能同樣是行動優先的一部分。圖片應依螢幕尺寸提供適當大小的版本，可以用 srcset 讓瀏覽器自行挑選。非必要的大型 JavaScript 程式、輪播套件和第三方嵌入內容，都要評估是否值得讓手機使用者多等那幾秒。斷點則建議依內容來設定：在版面開始顯得擁擠或過度空曠的位置加斷點，而不是死守特定手機型號的寬度，因為市面上的裝置尺寸一直在變。
要判斷一個網站有沒有真正做到行動優先，可以檢查以下幾件事：
- 手機上第一屏能不能看出這個網站在做什麼。
- 主要行動按鈕是否容易用拇指點到。
- 閱讀時是否需要橫向捲動或放大。
- 在一般行動網路下，開啟頁面是否要等很久。
這些問題如果在設計階段就回答過，後續修改的成本通常會低很多。