過去談到網頁設計，多數團隊習慣的做法是先把桌機版的畫面設計好，等桌機版定案之後，才回頭「縮小」成手機版，遇到放不下的內容就刪減、遇到跑版的地方就臨時調整。這種由大到小的做法，看似順理成章，卻經常導致手機版變成桌機版的妥協品，而不是真正為手機使用情境設計出來的版面。手機網頁設計如果要真正做到以使用者為中心，更務實的做法是反過來，也就是Mobile-first設計方法論：從手機畫布開始設計，確認核心內容與互動在最小的螢幕上都能順暢運作之後，再逐步往平板、桌機擴展。這篇文章要談的，正是這一套設計工作流程本身，也就是實際上該怎麼一步步從手機畫布做起，而不是討論手機網頁設計的一般性介紹或特定城市的服務內容。
什麼是Mobile-first設計，為什麼要從手機畫布開始
Mobile-first設計方法論的核心概念很單純：在動手設計之前，先假設使用者是用手機這種螢幕最小、頻寬可能最受限、注意力也最容易被打斷的裝置在瀏覽網站，並且以這個最嚴苛的條件作為設計的起點。當一個版面能在手機這麼小的畫布上，把最重要的內容清楚呈現、把核心的互動功能安排得直覺好用，這個設計的骨架自然也就具備了良好的基礎，之後要擴展到更大的螢幕，通常只是「增加」而不是「刪減」。
反過來說，如果設計是從桌機開始，桌機畫面的空間相對寬裕，很容易不知不覺塞入越來越多的區塊、選單、圖片與說明文字，等到要縮小成手機版時，才發現有太多內容擠不進去，必須臨時取捨，這種取捨往往是倉促且缺乏整體規劃的，容易犧牲掉真正重要的內容或功能。Mobile-first設計方法論之所以被越來越多團隊採用，正是因為它強迫設計流程一開始就直面「空間有限」這個限制，逼著團隊先想清楚什麼才是真正必要的內容。
第一步：從手機畫布開始規劃核心內容與功能
Mobile-first設計工作流程的第一步，不是急著畫視覺稿，而是先在手機畫布的尺寸限制下，盤點整個頁面究竟需要哪些內容區塊、哪些互動功能是使用者一定會用到的。這個階段可以透過條列的方式，把所有原本想放進頁面的元素都寫下來，再逐一檢視：如果拿掉這個區塊，使用者還能不能完成他來到這個頁面想做的事？
常見會在這個階段被重新檢視的內容包括：
- 導覽選單裡的項目是否真的每一個都必要，還是可以整併成更精簡的分類
- 大量的說明文字是否能濃縮成重點條列，讓手機畫面不需要過度捲動
- 次要的輔助資訊（例如公司歷年沿革、多張情境示意圖）是否可以移到內頁，而非全部塞在同一個頁面
- 真正驅動轉換的行動呼籲功能（例如聯絡表單、預約按鈕）是否在手機畫面上容易被找到並點擊
完成這一步之後，團隊手上會有一份經過篩選、以手機螢幕為基準思考過的內容清單，這份清單會是接下來所有設計動作的骨架，避免之後的視覺設計階段又不自覺加回太多非必要的元素。
第二步：建立手機版的視覺與互動雛形
有了核心內容清單之後，下一步是在手機畫布尺寸下，實際排出版面的視覺雛形，也就是俗稱的線框稿或初版設計稿。這個階段的重點是先確認資訊的排列順序與互動的操作邏輯是否合理，例如使用者從進入頁面到完成一次點擊或填寫，中間需要滑動幾次螢幕、按鈕的位置是否落在拇指容易觸及的範圍內、選單收合後的展開方式是否直覺。
由於手機螢幕寬度有限，這個階段也會決定內容在垂直方向上的堆疊順序，也就是「單欄式」的版面邏輯。設計師需要思考的是，如果整個頁面只能用上下捲動的方式呈現，最重要的內容應該排在最上面、次要的內容依序往下排，而不是像桌機版那樣可以透過左右並排的方式同時呈現多個區塊。這種單欄堆疊的思考方式，也會直接影響到之後擴展到平板與桌機畫布時，各區塊要如何重新分配到多欄式的版面。
第三步：由下往上逐步擴展到平板尺寸
當手機版的內容架構與互動雛形確認之後，下一步不是直接跳到桌機，而是先擴展到平板這個中間尺寸，這也是Mobile-first設計方法論裡經常被忽略、但相當重要的一個過渡階段。平板的螢幕寬度介於手機與桌機之間，這個階段主要處理的是「多出來的橫向空間該怎麼運用」，例如原本在手機版單欄堆疊的兩個區塊，在平板寬度下是否適合並排呈現、字級與間距是否需要微調以配合更大的畫面。
這個階段的設計判斷，通常不是憑感覺決定，而是隨著畫面寬度增加，觀察版面在哪個寬度區間開始出現內容過度拉伸、留白比例失衡等視覺問題，這個出現問題的寬度，就會成為之後設定斷點（也就是版面切換樣式的螢幕寬度門檻）的重要參考依據。換句話說，斷點的設定應該是「跟著內容走」，而不是先套用市面上常見的固定斷點數值，再把內容硬塞進去。
第四步：擴展到桌機畫布，補齊額外的版面空間
來到桌機畫布，這時候通常已經有相對寬裕的橫向空間可以運用。這個階段的設計工作，是把先前在手機與平板階段驗證過、順序合理的內容區塊，重新安排成更豐富的多欄式版面，例如把原本上下堆疊的圖片與文字改成左右並排、把單欄的重點條列改成多欄呈現，讓桌機使用者能一次看到更多資訊而不需要過度捲動。
需要留意的是，擴展到桌機畫布不代表要把手機與平板階段刻意精簡掉的內容全部加回來。Mobile-first設計方法論的精神，是從一開始就篩選出真正必要的核心內容，桌機畫布的額外空間，應該用來讓核心內容呈現得更從容、更有層次，而不是變成塞入更多次要資訊的藉口。保持這份紀律，才能讓整個網站在不同裝置上都維持一致且聚焦的使用體驗。
貫穿整個流程的斷點測試與迭代調整
Mobile-first設計工作流程並不是手機、平板、桌機三個階段各自獨立、做完就結束，而是一個需要反覆測試與調整的過程。每完成一個尺寸階段的設計，都建議實際在對應尺寸的裝置或模擬環境下檢視，確認文字是否清楚可讀、按鈕是否容易點擊、圖片是否有適當縮放，而不是只在設計軟體裡用單一預設尺寸檢查。
此外，隨著畫面寬度連續變化（而不是只跳在手機、平板、桌機三個固定尺寸），版面在中間過渡的寬度區間，也應該實際測試是否會出現版面錯位、元素重疊等問題。這種持續測試、持續微調斷點與版面細節的過程，貫穿在Mobile-first設計工作流程的每一個階段，也是這套方法論之所以能確保跨裝置體驗一致的關鍵。
常見問題
Mobile-first設計會不會讓桌機版看起來太簡陋？
不會。Mobile-first設計的重點在於「規劃流程」從手機開始，並不代表桌機版就只能維持手機版的簡單樣貌。擴展到桌機畫布時，仍然可以善用額外的空間，讓核心內容呈現得更豐富、更有層次，只是整個設計過程是由簡入繁，而不是由繁入簡。
所有網站都適合採用Mobile-first設計工作流程嗎？
對於行動裝置流量佔比較高的網站，或是本來就以行動裝置使用情境為主的服務（例如預約、諮詢、產品介紹型網站），Mobile-first設計工作流程通常特別適合。至於內容高度依賴大量資料表格或複雜互動介面的網站，仍然需要視實際使用情境調整流程細節。
Mobile-first設計跟RWD響應式網頁設計是同一件事嗎？
兩者相關但不完全相同。RWD是一種讓同一套網站能因應不同螢幕寬度自動調整版面的技術做法；Mobile-first則是一種設計流程上的方法論，強調設計的起點與思考順序要從手機開始。實務上，Mobile-first的設計流程通常會搭配RWD的技術做法一起實現，但兩者談的是不同層面的事。
斷點的寬度數值該怎麼決定？
比較務實的做法是隨著畫面寬度逐漸增加，實際觀察版面內容在哪個寬度開始出現排版問題（例如文字行寬過長、留白比例失衡），再把那個寬度設為斷點，而不是一開始就套用固定的斷點數值。這也是Mobile-first設計流程裡，由下往上逐步擴展測試的重要原因之一。
Mobile-first設計工作流程需要花時間逐步驗證每個尺寸階段的呈現效果，對許多沒有專職設計團隊的中小企業來說，要自己從頭建立這套流程並不容易。如果你不確定現有網站的設計流程是否真正以手機使用情境為出發點，創昇SEO提供免費網站健診服務，協助檢視你的網站在不同裝置上的實際呈現狀況；也歡迎透過創昇SEO的全台免費到府諮詢服務，讓專人到現場了解你的需求，一起討論適合的設計方向。