設計師常困擾：瀏覽器 vs Photoshop，如何選擇？如何在瀏覽器高效設計？本文分享實戰判斷標準與完整流程。

什麼是「在瀏覽器中設計」？

傳統流程：設計師出高保真視覺稿 → 工程師實現（自上而下）。瀏覽器設計：設計師拿粗略草圖直接進入編碼實現。核心在於以最快速度產出可實現設計效果的代碼，而非單純「設計」。幾次討論 + 幾張草圖即可啟動。

何時選擇瀏覽器設計？何時不該？

不適合的情況

• 客戶需求不適合：需高保真視覺稿爭取投資/脫穎而出、功能需求頻變、現有版本有根本問題 → 傳統線框→視覺稿更有效。
• 客戶視視覺稿為交付成果：每周 10-20 張高保真圖比 1-5 個可跑但平淡頁面更有說服力。
• 功能佈局過於複雜：人腦難同時思考視覺與代碼雙維度。長期鍛鍊可緩解，但初期極難。
• 項目處「改良階段」：已有成品網站需增強功能，用戶對特定設計不滿（如 CTA 不清晰、閱讀起點不明） → 回 Photoshop 精細審視。

Andy Budd 指出：「最好的設計工具將設計者與作品界限降至最低（鉛筆即例），瀏覽器設計為過程添加不必要阻隔。」 許多設計師源於平面，精益求精基因難除。

瀏覽器設計實戰流程

1. 專案啟動與情緒板

明確用戶群、意見、產品定位、目標、線框圖、功能列表。用情緒板省時建立品牌形象，常去 Pinterest、Dribbble 尋素材。

2. 選擇框架：Foundation vs Bootstrap

• Foundation：選項直接體現代碼，基礎、易覆蓋，適合行銷/消費型網站。
• Bootstrap：成熟框架，適合後台管理應用。上手易但覆蓋 CSS 極痛苦。

3. 設計指南：統一元素的關鍵

初期準備設計指南（手動/KSS/Hologram 自動生成），統一簡化所有設計元素，讓未來大幅改動極簡單——這正是選瀏覽器設計的原因之一。

4. 佈局構建：從最低層級疊加

遵循眼球運動、層級、對比等原則。從純文本 → 包裹 HTML → 框架佈局 → CSS 定義樣式。瀏覽器設計易固化思維，自下而上疊加可緩解。

善用瀏覽器開發者工具：一次會議解決多數反饋

原型建立後與客戶共審，Chrome DevTools 成神器：

1. 改文本：檢查元素 → 編輯文本 → 截圖記錄。
2. 增欄位：編輯 HTML → 複製貼上新欄 → 截圖。
3. 調元素大小：放大鏡檢視子屬性 → 改樣式碼 → 截圖。
4. 改顏色/大小/任意樣式：右鍵檢查 → 編輯 → 截圖、截圖、再截圖。

傾向截圖而非存代碼：DevTools 代碼不乾淨，截圖能記錄所有決策，供後續編碼參考。

團隊協作：Pivotal Tracker + 雙軌並行

將用戶需求分前端任務、後端任務，設計跑在開發前頭，或工程師先建模型/控制器再讓設計師做外觀，雙軌交替。例：前端設計靜態頁（首頁、聯絡表單）時，後端同步建 API。

瀏覽器設計非銀彈，但對合適項目能極大提升效率與溝通質量。關鍵在於識別適用場景、建立標準化流程、善用工具輔助決策。