在當今競爭激烈的 ToB 市場中，產品的用戶體驗變得至關重要。這不僅直接影響客戶的滿意度，還關系到產品的市場競爭力。然而，像釘釘這樣的航母級產品，由于復雜的客戶需求、多樣的業務模塊和快速的交付節奏，傳統的瀑布式產設研協作方式已經越來越難以滿足當下的要求。

為了在確保用戶體驗一致性和高品質的同時，還能保持產品交付的高效率，我們面臨的挑戰非常巨大。因此，提升產品、設計與研發團隊的協同效能，成為了關鍵課題。在這一背景下，設計工程化作為應對這些挑戰的重要工具，為設計師和開發團隊提供了全新的解決方案。

作為一名體驗設計師，我們協作最多的，除了產品經理，就是前端工程師。設計師與前端的協作是否順暢，直接影響著研發效率和用戶體驗的質量。

回顧一次常規的迭代交付，設計師和前端的協作通常經歷以下幾個階段：

1. 設計師基于產品需求和設計規范，從用戶視角進行界面設計。
2. 前端工程師根據設計稿，從開發的角度進行解構，使用熟悉的框架和組件構建可用的產品。
3. 最后，設計師通過“像素眼”確保產品的設計還原度。

問題往往出現在第三步。許多設計師抱怨：設計還原太難了！這一步幾乎占據了設計師 70%以上的時間和精力，但最終效果仍無法達到 100%還原。有些設計師會較真，導致前端覺得他們吹毛求疵，甚至拖慢業務迭代節奏；而一旦設計師選擇“躺平”，這些細微的瑕疵會在多輪迭代中累積，最終導致體驗細節的全面崩潰。

一、問題出在哪里？

首先，筆者認為設計師和前端工程師的思維方式存在根本差異。設計師關注的是用戶的心智模型，而工程師考慮的是技術的實現邏輯。在這種差異的基礎上追求 100%的還原，等于在不同的底層邏輯之上，強求表現層的統一，有點像東施效顰。

其次，設計稿本身的信息量往往不足。設計師通常只能提供部分關鍵幀，無法完整表達其設計意圖，而實際的用戶體驗是連續且多維的。比如：

1. 多設備：一個 App 的界面需要適應不同操作系統、Pad 端、折疊屏等設備。
2. 多環境：需要兼顧正常、弱網和無網等不同網絡環境。
3. 多語言：全球化產品在不同語言環境下的呈現各有差異。
4. 多主題：如今幾乎所有產品都支持暗黑模式，甚至還有換膚功能。
5. 個性化/無障礙：例如，用戶使用大字體或是盲人等特殊需求。

要求設計師提供全維度、全鏈路的設計稿，不僅讓設計師“原地爆炸”，也讓迭代效率無法保障。

再者，分離的工作環境（不同源）使得設計師和工程師的信息傳遞主要依賴溝通，除了切圖等極少部分，其他都靠人際理解。而人際溝通往往低效且容易出錯。

最后，設計規范本身的實際約束力常常不如預期。一方面，業務迭代速度過快，規范和組件庫的更新難以跟上；另一方面，規范制定者很難覆蓋所有業務場景。結果，規范往往不夠用，設計師只能“打散組件”，最終導致重復造輪子的現象依然普遍。

讓我們來看看，設計工程化是如何解決上述問題的。

二、設計工程化

設計工程化的核心定義是：讓設計稿不僅僅作為下游理解的效果圖，而是成為產品工程（代碼）的一部分。它的實現依賴設計師和前端工程師的共同努力。

對于設計師而言，要做到“工程化設計”，即在設計時應用工程思維，構建符合實際開發邏輯的設計稿。而對于前端工程師，則需要能夠直接從設計稿中提取代碼邏輯和信息，實現高精度的還原，接近設計到代碼的直接轉換（準 D2C）。

這種高度協作依賴于一個共同的基礎：“同源的設計系統和前端系統”。這意味著設計和開發之間使用相同的規則和組件，從而在設計和實現之間建立無縫銜接，提升效率和一致性。

作為一名設計師，重點聊聊上圖左邊的「工程化設計」。設計是開發的上游，只有設計師先做到了，整體的工程化才得以可能。

1. 工程化設計的關鍵

要具備工程思維，首先要跳出「繪畫思維」，避免只把設計稿本身當作作品來對待，而應將其視為真實產品的組成部分。在真實的產品中，場景、數據、交互都是動態變化的，唯一不變的是各元素之間的關系。因此，工程化設計的核心是描述這些關系。

設計師主要關注兩類關系：空間關系和邏輯關系

① 空間關系

指的是界面中各個元素之間的位置、大小、對齊等布局方式。通過在設計軟件中使用自動布局和約束系統，設計師可以定義容器和子元素的排列方式。當界面元素發生變化時，系統會自動調整這些元素的大小、間距和位置，從而確保設計的適應性和一致性。

以下是一個氣泡引導的案例，描述了自動布局如何定義元素的布局邏輯

氣泡引導案例，描述了自動布局如何定義元素的布局邏輯

② 邏輯關系

它描述了界面元素如何由基本的樣式 token 構成，并且這些基本元素如何組合成更復雜的組件。通過層層調用，建立起一個原子設計模型。在這種模型中，每個元素都不是獨立的，而是與其他元素有著明確的依賴關系。元素的樣式、行為或功能是從其基礎組件中繼承來的。建立這些邏輯依賴關系后，所有元素都成為「有源」的，而非固定不變的。這意味著底層的變化，如樣式或功能的調整，會自動影響到所有依賴于這些底層元素的上層組件，從而保持設計的一致性和可維護性。

原子設計模型的簡單示例

關于自動布局和組件系統如何使用，網上教程很多，在此不表。

當設計師能夠準確描述并構建這些關系時，設計稿能夠成為產品工程的一部分，設計與開發的銜接將更加順暢。原因在于前端工程師使用類似的方式構建頁面，即設計和前端實現的是“同源化”，意味著二者使用相同的原材料和邏輯進行頁面構建。

無論是 Figma 還是國內的 Mastergo 等設計軟件，前端工程師都可以直接從這些工具中獲取可用的代碼，前提是設計稿的工程化做得足夠好。比如，對于使用自動布局的容器，前端工程師可以直接讀取到對應的 CSS 代碼。

比如，在設計稿中使用的組件和組件屬性，前端工程師可以在開發中找到相同的組件及其 Props。這種一致性確保了設計與前端實現的無縫對接，提高了開發效率和一致性。

當然，設計和前端的同源化依賴于設計系統和前端系統的有效對接，這是另一個重要的課題，以后有機會再聊。

2. 挑戰：是不是把前端的工作轉移到了設計師身上？

在推行工程化設計的過程中，確實會面臨一些挑戰。例如，工程化設計是否會增加設計師的壓力，或者是否會限制設計師的創作自由？

實際上，并不會。我們并不建議在設計完成后再進行工程化改造，而是提倡從一開始就采用工程化手段進行設計，這樣可以提高效率，避免后期的繁瑣調整。

如何通過工程化方法高效地構建設計稿？通過在設計階段應用工程化手段，可以讓設計師在設計時就考慮到工程實現的細節，從而實現更高效的工作流程。這樣，設計師可以專注于創意和用戶體驗的提升，而不是在后期做大量的調整和修正。

并且，養成工程化設計的習慣，對設計師本身有諸多好處：

① 便于表達更多狀態

Before：要表達不同的狀態（如暗黑模式、多尺寸設備、多語言效果），往往需要重新繪制，過程繁瑣復雜

After：通過設計工程化描述關系，設計稿可以在不同狀態之間快速切換，節省大量時間和精力。

② 簡化界面布局調整

Before：傳統布局方式下，元素的的尺寸、位置、對齊方式都是靜態的，當界面內容有增減時，所有相關元素都需要手動調整，非常低效。

After：使用自動布局后，元素的的尺寸、位置、對齊方式是受關系約束的，是動態的。當界面內容調整時，相關元素會自動調整，非常高效。

③ 減少犯錯的可能性

Before：元素的位置和對齊依賴設計師的像素眼，容易因不小心拖動而出現錯誤。

After：使用自動布局后，可以選擇規范中定義好的間距和邊距樣式，從而減少出錯的機會。

④ 快速響應主題升級

Before：設計語言和組件的變更后，需要手動更新所有設計稿，工作量大且耗時。

After：使用原子設計模型建立組件關系，設計稿可以一鍵同步更新，效率顯著提高。

將工程化思維貫穿整個設計過程，這一習慣的轉變雖然困難，但至關重要，否則工程化設計只會成為額外的負擔。而這一問題并不局限于設計師，我們在產研團隊中也曾經有類似的問題。比如，把“打磨體驗”當作額外的工作，常常將體驗細節的優化留到研發甚至測試完成之后，認為只要在最后花點時間精雕細琢，就能掩蓋過程中的問題，最終呈現出完美的體驗。仿佛用戶體驗就像裝修的最后刷漆階段，簡單修飾便可掩蓋瑕疵。

然而，在實際工作中，受限于時間壓力，這個過程往往匆忙應付，效果大打折扣。

我并不否認最后的打磨是必要的，但用戶體驗的主干必然是工程化和流程化的產物。尤其是在面對大體量、長周期、持續迭代的產品時，極致體驗應當是一項系統化的工程，而不僅僅是最后的打磨。

總結一下

回到最初的問題，我們的目標是通過工程化設計解決設計師和工程師在協作中面臨的一些挑戰。具體來看，解決方案如下：

1. 設計師和工程師思維結構的差異: 設計師在設計過程中引入工程師的思維方式，利用工程化手段構建設計稿。這樣，設計稿不僅符合設計原則，還具備工程實現的可操作性。完成。
2. 設計稿本身信息量不足：工程化設計通過詳細描述空間關系和邏輯關系，提供了更多前端開發所需的信息。同時，設計師可以在工程化設計稿上更輕松地表達各種狀態（如多尺寸設備、多語言等），設計系統和前端系統的打通也讓可復用的信息在組件層面得到提供，從而保持一致性并避免重復定義。解決。
3. 分離的作業環境（不同源）：通過在設計中實現布局邏輯、樣式邏輯和組件邏輯的同源，設計師和前端工程師可以在統一的環境中工作，提升協作效率。感謝 Figma 帶來的革命。
4. 設計規范的約束作用：將設計規范升級為設計系統，通過系統化的工具提升團隊效率和質量。脫離設計系統的工作將變得低效，從而增強了設計規范的約束力。提升了設計規范的約束作用。

設計工程化在 ToB 行業的應用，帶來了前所未有的效率提升和質量保證。通過有效地將設計與前端開發的邏輯和標準對接，我們不僅為內部團隊提供了更高效的工作流程，也為客戶帶來了更加一致和可靠的產品體驗。隨著市場需求的不斷變化和技術的不斷進步，設計工程化將成為企業應對復雜業務場景和快速迭代的關鍵手段。未來，我們期待這種方法能夠持續推動行業的創新發展，為客戶創造更大的價值。

歡迎關注作者微信公眾號：「釘釘用戶體驗」