設計稿還沒定案，前端可以先做什麼

2025 年 1 月，我從前一個專案整理出來的架構，延伸出公司的新專案，也就是能源管理系統（EMS）的第一個版本。團隊很小，一位暫時兼任 PM 的主管、一位 UI 設計師，前端是我。二月補上後端跟 SRE，三月再補一位後端。

目標很明確，三月有一場能源展，要有東西可以 Demo，原本的里程碑是兩個月。

計畫趕不上變化

放年假之前，團隊大概做到可以 Demo 的一半。但就在這個時候，需求跟畫面設計都重新規劃了一次，進度等於退回一成左右。放完假，距離展覽只剩一個月。

另一個現實是公司只有一位 UI 設計師，他同時要顧好幾個專案，EMS 的設計稿進度只有一成。那時候我才剛進公司兩個多月，老實說壓力蠻大的。

先把 Demo 跟產品分開

跟主管討論之後，我們很快確認三月之前做不出能實際操作的版本。於是 Demo 的目標改成用設計稿製作 Sales Kit，在展覽上說明產品的樣貌就好。開發這邊則照自己的節奏走，目標是三月內部試用、五月上線 MVP。

這個決定讓兩邊都鬆了一口氣。給客戶看的東西跟要上線的東西其實是兩件事，前者要的是「看起來像什麼」，後者要的是「真的能用」。硬要用同一份東西滿足兩種目的，通常是兩邊都做不好。

設計稿只有一成，前端怎麼先做

Demo 的壓力卸掉之後，剩下的問題是設計稿還沒定案，前端要等嗎？

我的選擇是不等，改成照著線稿（Wireframe）先做，並且主動從前端的角度給設計師建議，讓設計方向跟開發實作對得起來。到三月初試用期結束的時候，登入登出、資訊總覽、趨勢分析、後台管理、能源審查這些頁面已經切了三到五成，雖然資料還是假的（後端才剛就位），但已經有一個雛形。

能這樣做，是因為我把頁面拆成「現在就能決定」跟「最後再決定」兩類。

先鎖定的：結構、資料、邊界

這些東西就算設計稿改十次也不太會變，所以可以先做。路由跟資訊架構是第一個。側邊選單有哪些模組、每個模組底下有哪些頁面，這是從需求來的，不是從設計稿來的。我用一份設定檔描述選單，頁面怎麼搬都只改一個地方：

// features/menu/config.ts
export const menu: MenuItem[] = [
  { label: '資訊總覽', path: '/overview', icon: 'dashboard' },
  {
    label: '趨勢分析',
    path: '/analysis',
    children: [
      { label: '用電量', path: '/analysis/electricity-usage' },
      { label: '歷史資料', path: '/analysis/historical-data' },
    ],
  },
]

再來是資料的形狀。設備、電表、量測點、區域這些領域概念，還有每個頁面需要哪些欄位，可以先跟後端對出型別，前端照型別做假資料。假資料放在資料取得的邊界，做法我寫在上一篇。

最後是元件的邊界。哪些是整個系統共用的（版面骨架、表格、圖表卡片、篩選列），哪些是單一功能專用的。共用元件先做出來，各頁面就是用它們拼起來。

留到最後的：視覺

顏色、間距、字級、圖示、圖表的樣式，這些是設計稿會一直改的部分，所以它們只能存在一個地方。我們用 MUI，所有視覺決定都集中在主題設定裡，元件本身不寫死任何顏色或尺寸。設計稿定案的那一天，改的是主題檔，不是幾十個頁面。

保留變更的彈性

照線稿做的時候，我會刻意讓結構鬆一點，表格的欄位用設定陣列描述、圖表卡片接受標題跟資料就能畫、頁面區塊用共用的版面元件排。這些都是為了之後搬動或增刪的時候，只改資料不改結構。

前端可以幫設計師什麼

設計師一個人顧好幾個案子的時候，最缺的不是美感，是時間。前端能幫上忙的地方其實不少。

先要線稿，不要精稿。線稿畫得快，拿去跟主管確認也快，確認過的線稿就是前端的開發依據，精稿可以晚一點。

提議用現成的元件模式。表格、表單、對話框、篩選列這些東西，用元件庫既有的樣式先上，設計師只要決定差異的部分，不用每一個都從零畫。

把實作上的限制提早講。例如某種圖表在這個函式庫裡做不到、某個互動在手機上會很難用，這些在線稿階段講，成本幾乎是零。

回顧

這三個月讓我看清楚小團隊常見的狀況，需求會一直調整，設計流程跟著受影響，開發就很難穩定推進。針對需求變動跟設計確認這一段，我覺得有更好的做法，就是在產出精美的設計稿之前，先用線稿或粗略的 UI 圖跟上層溝通、討論、確認，把重工的時間省下來，大家在時程上的壓力都會小很多。

至於前端自己能做的，大概就是這幾件。先問清楚 Demo 是用來做什麼的，再決定要不要用真的程式去做。不要把設計稿當成開發的前提，結構、資料、邊界先鎖，視覺留到最後而且只放在一個地方。照線稿開發但保留彈性。設計師忙不過來的時候，主動提早講限制、提議現成的模式，會比等設計稿有幫助。

References

• Wireflows | Nielsen Norman Group
• Theming | MUI