鐵人檔案
你是否遇到過這些狀況？像是：
💬 工程師：沒有前因後果又畫不完全，設計是要我們通靈嗎？
💬 設計師：為何最後的成品都跟我畫的不同，用起來那麼怪！
因為設計師擅長處理問題、提出解法，關注使用者行為；而工程師們注重功能、結構和效用，確保產品的可用性。我們常因為兩者不同的思考模式而產生摩擦。
本篇想分享在這兩年的複雜後台專案中，前端工程師與 UI/UX 設計師們從不熟悉到相互配合，在一般交付方式不適用之下，一步步逐漸共同討論出的一套合作流程，在專案中提升協作效率的故事！
高效的開發和設計 切版在專案開發中，應該是許多前端工程師覺得最沒成就感的部分...反觀這個階段的產出，則常常是 UI 設計師會跟工程師爭吵的一環（文字粗細、色碼...
優化網頁元件架構：原子設計 vs 設計模組（Pattern） 前端為了更健康的網頁架構，在開發時會追求程式模組化。而設計師們除了建立元件庫外，我們會將重複使用的...
有系統的交付 UI 設計 在設計師們 UI 時，我們能夠隨時、直接的在 Figma 上看到，UI 的各種 width、padding 數值。雖然自動產生的方便歸...
根據專案目標選擇流程圖 在專案開發的前期階段，流程圖（flowchart）扮演著不可或缺的角色，可以幫助團隊更有效地溝通和協作，確保開發過程的順暢。 不過，不是...
搭配服務藍圖：全局掌握使用者行為＆幕前幕後互動 上一篇提到，User Flow 透過線性描述使用者行爲。在獲得方向和具體定論後，可以幫助我們梳理操作步驟。（圖片...
在流程圖中迷路 在前面兩篇提到，「透過 User flow 也可以再幫助我們釐清有哪些關鍵 UI 畫面需要產出」，「透過 Logic flow 可以清晰表現前端...
UI Flow 的限制 不過可以注意到，App 產品因為尺寸，也因為有較多頁面、功能切換的效果，很建議用 UI Flow 的方式交付設計。 但 Web 設計因為...
我們是這樣藉由 UI Flow 溝通設計 昨天提到將 UI Flow 的作法用於描述局部功能的變化性，今天我們繼續來分享 方法二：專注情境，集中於 UI 的變化...
當一般流程圖的畫法不適用 前面幾篇提到，Logic Flow 有一些限制，像是無法面對複雜的程式邏輯，不具影響順序因素，所以比較適合線性、重複步驟，或是逐步進行...
藉由 Figma 模擬程式模組 前面有提到，我們專案中的欄位間存在許多變化性的互動，和尤其是 「依賴關係」，因應不同時機欄位也可能有 enable &...
