設計稿很美，但工程師哭了：三個網頁設計常見誤區
當你的設計不只是在 Figma，而要交給工程師做出來時，有幾件事要注意
本篇寫給沒有網頁設計經驗的夥伴，像是企劃、行銷，甚至是「被老闆指派要規劃網站的人」
Hi，我是 Jamie 🦥
從前端工程師轉職成 UI/UX 設計師，目前在 SaaS 產品開發團隊
以工程師之名玩 Figma 進入第 3 年，擅長跟需求模糊、資源不足、還被死線追著跑的產品打交道
網路上常說設計師跟工程師不合，我大概能理解，但最近終於看到讓工程師崩潰的設計稿
決定用實際案例，來聊聊初學者容易踩的坑
設計稿很美，但工程師哭了
專案背景：企劃設計了幾個精美的前台畫面跟客戶溝通，正準備給工程師開發，PM 崩潰先擋下來
然後我被拉進團隊，把設計稿「轉譯」成工程師不會生氣的樣子
順便和企劃團隊對齊開發需求、定義規格
三個 UI 初學者常踩的坑
一、設計稿用 1440，使用者用 1280
不是每個人都用豪華 27 吋大螢幕 🥺
雖然學校老師（誰？）都說用 1440px 的 Frame 來畫設計稿，但現實是
多數使用者用筆電看網頁（至少我們家的客戶），螢幕寬度在 1280px 左右
安全的設計，是把主內容放在 1200px 內，2 側留白
這樣無論是筆電、桌機、或是豪華大螢幕，看起來都很舒服
本來以為把 1440 橋成 1200 不過是一塊小蛋糕， 結果邊處理邊崩潰，像是：
- 規劃用一行呈現的標題，因為寬度減少，被擠成 2 行，結果影響提供給廠商的字數限制
寬度不夠標題幾成2行
- 4～5 張卡片在 1440 看起來還算舒服、塞到 1200 就有點視覺窒息，但資訊不適合切開，必須併排
窒息式排版
邊調邊想，幸好先幫工程師擋下來了⋯⋯
同場加映：測試網站還沒處理寬度 1200 限制時，合作 PM 提出的疑惑
🙋♂️ 畫面看起來可以放 200 個字，為什麼你只讓我放 20 個？
不是我不給你更多字，是你肯定希望文字完整顯示
設計師不憑感覺做決定，我給數據
遵守 1200px 規則準沒錯！
二、RWD 是標配，不是選配
RWD 響應式網頁設計（Responsive Web Design）的縮寫，讓不同裝置都可以瀏覽網頁
白話文：不同尺寸的手機、平板、筆電、桌機，都可以順利的看同一個網頁、不會破版
乍看之下很常見的1/3+2/3排版，問題出在右邊的2/3卡片
到手機尺寸時，究竟是壓縮卡片，字小到不合理，
還是讓卡片裡面的右邊內容去樓下？
但同張卡片的資訊，呈現方式改變，會不會造成理解錯誤？
沒有考量 RWD，需要工程師通靈切版的狀況，經常是為什麼第一時間會
獲得工程師的情緒而非回饋 😮💨
換個說法，當你只打算提供電腦板的設計時，版面規劃就必須讓 RWD 超直覺
例如等寬的左右排列改成上下排列（常見的卡片）、或是可以等比例縮小（圖片）
這樣不僅溝通成本低、開發效率也高
政府或公家機關的案子：RWD 是合約標配（無障礙跟多語系也是😊 ）
沒寫肯定是初版合約忘記、遲早要還的
三 畫面自由組合，資料庫哭給你看
一般來說，呈現在網站上的內容，有 2 種來源
呈現在網站上的內容，來源可能是前端程式碼、或後端資料庫
1. 前端工程師寫在程式碼裡 （寫死的資料）
短期的形象網站，或不太會更動的文案
例如品牌介紹，企業願景，以及不太會替換的圖片，例如 Logo、背景圖
2. 存資料庫，由後端 API 提供
想像幾個超爆大的 Excel，存著有結構、可以新增、刪除、修改的內容
像是商城的產品們、外送的店家資訊、店家裡的餐點資訊等而儲存的內容，會有格式的規範，例如數字、日期、純文字等
資料庫有格式規範，例如數字、日期、純文字
當後端工程師是看著設計稿來規劃資料庫欄位、資料表時
這樣的畫面，就會產生各種問號
後端：我去喝杯咖啡冷靜一下
🤔 把金額那欄改成比較難維護的文字？
🤔 還是增加個欄位放文字？可是使用頻率低又占空間⋯⋯
不是不能做，而是明明單純的結構，卻要花 2 倍來處理（或討論），會讓工程師想先去喝杯咖啡冷靜一下
一次惹毛前後端工程師，成就達成 ✅
BTW 平常看到的價格方案，確實有數字跟文字同時出現
這邊舉金額的例子，是為了用簡單的邏輯來說明
實際做產品時，資料庫的複雜度，會和產品規模、以及後續維護有關
白話文：不確定能否同個位置放不同類型的資料，去問那個懂資料庫的後端工程師、或是有決策權的 PM 吧
（小時候最討厭旁邊的人拿龍頭企業的千萬產品規格，要我這只做 1 年的小資專案參考了🙄）
老話一句：工程師都做得到，但為了以為很簡單的設計，花工程師 2 倍的時間，值得嗎？
所有人的時間都是成本
設計，是讓網站能「漂亮得做出來」
設計的價值，不只是畫得美，更是讓產品「能上線、好維護」
幾個提醒，送給剛踏入 UI 的你：
1. RWD 不是加分，而是基本
2. 拿著使用者的裝置看設計，而不是你工作的大螢幕
3. 資料與畫面要對得起來
能漂亮落地，才是好設計
至於沒命名的 Frame、偶爾出現的 Group（大多是連 Group 都沒有）
就讓它留在設計稿裡吧～
都花這把時間看完了，順手來個 30 個拍拍吧 👏👏👏
/政府網站營運交流平台授權轉載/
原文作者：Jamie Choice