在當(dāng)今競(jìng)爭(zhēng)激烈的 ToB 市場(chǎng)中，產(chǎn)品的用戶體驗(yàn)變得至關(guān)重要。這不僅直接影響客戶的滿意度，還關(guān)系到產(chǎn)品的市場(chǎng)競(jìng)爭(zhēng)力。然而，像釘釘這樣的航母級(jí)產(chǎn)品，由于復(fù)雜的客戶需求、多樣的業(yè)務(wù)模塊和快速的交付節(jié)奏，傳統(tǒng)的瀑布式產(chǎn)設(shè)研協(xié)作方式已經(jīng)越來越難以滿足當(dāng)下的要求。

為了在確保用戶體驗(yàn)一致性和高品質(zhì)的同時(shí)，還能保持產(chǎn)品交付的高效率，我們面臨的挑戰(zhàn)非常巨大。因此，提升產(chǎn)品、設(shè)計(jì)與研發(fā)團(tuán)隊(duì)的協(xié)同效能，成為了關(guān)鍵課題。在這一背景下，設(shè)計(jì)工程化作為應(yīng)對(duì)這些挑戰(zhàn)的重要工具，為設(shè)計(jì)師和開發(fā)團(tuán)隊(duì)提供了全新的解決方案。

作為一名體驗(yàn)設(shè)計(jì)師，我們協(xié)作最多的，除了產(chǎn)品經(jīng)理，就是前端工程師。設(shè)計(jì)師與前端的協(xié)作是否順暢，直接影響著研發(fā)效率和用戶體驗(yàn)的質(zhì)量。

回顧一次常規(guī)的迭代交付，設(shè)計(jì)師和前端的協(xié)作通常經(jīng)歷以下幾個(gè)階段：

1. 設(shè)計(jì)師基于產(chǎn)品需求和設(shè)計(jì)規(guī)范，從用戶視角進(jìn)行界面設(shè)計(jì)。
2. 前端工程師根據(jù)設(shè)計(jì)稿，從開發(fā)的角度進(jìn)行解構(gòu)，使用熟悉的框架和組件構(gòu)建可用的產(chǎn)品。
3. 最后，設(shè)計(jì)師通過“像素眼”確保產(chǎn)品的設(shè)計(jì)還原度。

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

一、問題出在哪里？

首先，筆者認(rèn)為設(shè)計(jì)師和前端工程師的思維方式存在根本差異。設(shè)計(jì)師關(guān)注的是用戶的心智模型，而工程師考慮的是技術(shù)的實(shí)現(xiàn)邏輯。在這種差異的基礎(chǔ)上追求 100%的還原，等于在不同的底層邏輯之上，強(qiáng)求表現(xiàn)層的統(tǒng)一，有點(diǎn)像東施效顰。

其次，設(shè)計(jì)稿本身的信息量往往不足。設(shè)計(jì)師通常只能提供部分關(guān)鍵幀，無法完整表達(dá)其設(shè)計(jì)意圖，而實(shí)際的用戶體驗(yàn)是連續(xù)且多維的。比如：

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

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

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

最后，設(shè)計(jì)規(guī)范本身的實(shí)際約束力常常不如預(yù)期。一方面，業(yè)務(wù)迭代速度過快，規(guī)范和組件庫(kù)的更新難以跟上；另一方面，規(guī)范制定者很難覆蓋所有業(yè)務(wù)場(chǎng)景。結(jié)果，規(guī)范往往不夠用，設(shè)計(jì)師只能“打散組件”，最終導(dǎo)致重復(fù)造輪子的現(xiàn)象依然普遍。

讓我們來看看，設(shè)計(jì)工程化是如何解決上述問題的。

二、設(shè)計(jì)工程化

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

對(duì)于設(shè)計(jì)師而言，要做到“工程化設(shè)計(jì)”，即在設(shè)計(jì)時(shí)應(yīng)用工程思維，構(gòu)建符合實(shí)際開發(fā)邏輯的設(shè)計(jì)稿。而對(duì)于前端工程師，則需要能夠直接從設(shè)計(jì)稿中提取代碼邏輯和信息，實(shí)現(xiàn)高精度的還原，接近設(shè)計(jì)到代碼的直接轉(zhuǎn)換（準(zhǔn) D2C）。

這種高度協(xié)作依賴于一個(gè)共同的基礎(chǔ)：“同源的設(shè)計(jì)系統(tǒng)和前端系統(tǒng)”。這意味著設(shè)計(jì)和開發(fā)之間使用相同的規(guī)則和組件，從而在設(shè)計(jì)和實(shí)現(xiàn)之間建立無縫銜接，提升效率和一致性。

作為一名設(shè)計(jì)師，重點(diǎn)聊聊上圖左邊的「工程化設(shè)計(jì)」。設(shè)計(jì)是開發(fā)的上游，只有設(shè)計(jì)師先做到了，整體的工程化才得以可能。

1. 工程化設(shè)計(jì)的關(guān)鍵

要具備工程思維，首先要跳出「繪畫思維」，避免只把設(shè)計(jì)稿本身當(dāng)作作品來對(duì)待，而應(yīng)將其視為真實(shí)產(chǎn)品的組成部分。在真實(shí)的產(chǎn)品中，場(chǎng)景、數(shù)據(jù)、交互都是動(dòng)態(tài)變化的，唯一不變的是各元素之間的關(guān)系。因此，工程化設(shè)計(jì)的核心是描述這些關(guān)系。

設(shè)計(jì)師主要關(guān)注兩類關(guān)系：空間關(guān)系和邏輯關(guān)系

① 空間關(guān)系

指的是界面中各個(gè)元素之間的位置、大小、對(duì)齊等布局方式。通過在設(shè)計(jì)軟件中使用自動(dòng)布局和約束系統(tǒng)，設(shè)計(jì)師可以定義容器和子元素的排列方式。當(dāng)界面元素發(fā)生變化時(shí)，系統(tǒng)會(huì)自動(dòng)調(diào)整這些元素的大小、間距和位置，從而確保設(shè)計(jì)的適應(yīng)性和一致性。

以下是一個(gè)氣泡引導(dǎo)的案例，描述了自動(dòng)布局如何定義元素的布局邏輯

氣泡引導(dǎo)案例，描述了自動(dòng)布局如何定義元素的布局邏輯

② 邏輯關(guān)系

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

原子設(shè)計(jì)模型的簡(jiǎn)單示例

關(guān)于自動(dòng)布局和組件系統(tǒng)如何使用，網(wǎng)上教程很多，在此不表。

當(dāng)設(shè)計(jì)師能夠準(zhǔn)確描述并構(gòu)建這些關(guān)系時(shí)，設(shè)計(jì)稿能夠成為產(chǎn)品工程的一部分，設(shè)計(jì)與開發(fā)的銜接將更加順暢。原因在于前端工程師使用類似的方式構(gòu)建頁(yè)面，即設(shè)計(jì)和前端實(shí)現(xiàn)的是“同源化”，意味著二者使用相同的原材料和邏輯進(jìn)行頁(yè)面構(gòu)建。

無論是 Figma 還是國(guó)內(nèi)的 Mastergo 等設(shè)計(jì)軟件，前端工程師都可以直接從這些工具中獲取可用的代碼，前提是設(shè)計(jì)稿的工程化做得足夠好。比如，對(duì)于使用自動(dòng)布局的容器，前端工程師可以直接讀取到對(duì)應(yīng)的 CSS 代碼。

比如，在設(shè)計(jì)稿中使用的組件和組件屬性，前端工程師可以在開發(fā)中找到相同的組件及其 Props。這種一致性確保了設(shè)計(jì)與前端實(shí)現(xiàn)的無縫對(duì)接，提高了開發(fā)效率和一致性。

當(dāng)然，設(shè)計(jì)和前端的同源化依賴于設(shè)計(jì)系統(tǒng)和前端系統(tǒng)的有效對(duì)接，這是另一個(gè)重要的課題，以后有機(jī)會(huì)再聊。

2. 挑戰(zhàn)：是不是把前端的工作轉(zhuǎn)移到了設(shè)計(jì)師身上？

在推行工程化設(shè)計(jì)的過程中，確實(shí)會(huì)面臨一些挑戰(zhàn)。例如，工程化設(shè)計(jì)是否會(huì)增加設(shè)計(jì)師的壓力，或者是否會(huì)限制設(shè)計(jì)師的創(chuàng)作自由？

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

如何通過工程化方法高效地構(gòu)建設(shè)計(jì)稿？通過在設(shè)計(jì)階段應(yīng)用工程化手段，可以讓設(shè)計(jì)師在設(shè)計(jì)時(shí)就考慮到工程實(shí)現(xiàn)的細(xì)節(jié)，從而實(shí)現(xiàn)更高效的工作流程。這樣，設(shè)計(jì)師可以專注于創(chuàng)意和用戶體驗(yàn)的提升，而不是在后期做大量的調(diào)整和修正。

并且，養(yǎng)成工程化設(shè)計(jì)的習(xí)慣，對(duì)設(shè)計(jì)師本身有諸多好處：

① 便于表達(dá)更多狀態(tài)

Before：要表達(dá)不同的狀態(tài)（如暗黑模式、多尺寸設(shè)備、多語言效果），往往需要重新繪制，過程繁瑣復(fù)雜

After：通過設(shè)計(jì)工程化描述關(guān)系，設(shè)計(jì)稿可以在不同狀態(tài)之間快速切換，節(jié)省大量時(shí)間和精力。

② 簡(jiǎn)化界面布局調(diào)整

Before：傳統(tǒng)布局方式下，元素的的尺寸、位置、對(duì)齊方式都是靜態(tài)的，當(dāng)界面內(nèi)容有增減時(shí)，所有相關(guān)元素都需要手動(dòng)調(diào)整，非常低效。

After：使用自動(dòng)布局后，元素的的尺寸、位置、對(duì)齊方式是受關(guān)系約束的，是動(dòng)態(tài)的。當(dāng)界面內(nèi)容調(diào)整時(shí)，相關(guān)元素會(huì)自動(dòng)調(diào)整，非常高效。

③ 減少犯錯(cuò)的可能性

Before：元素的位置和對(duì)齊依賴設(shè)計(jì)師的像素眼，容易因不小心拖動(dòng)而出現(xiàn)錯(cuò)誤。

After：使用自動(dòng)布局后，可以選擇規(guī)范中定義好的間距和邊距樣式，從而減少出錯(cuò)的機(jī)會(huì)。

④ 快速響應(yīng)主題升級(jí)

Before：設(shè)計(jì)語言和組件的變更后，需要手動(dòng)更新所有設(shè)計(jì)稿，工作量大且耗時(shí)。

After：使用原子設(shè)計(jì)模型建立組件關(guān)系，設(shè)計(jì)稿可以一鍵同步更新，效率顯著提高。

將工程化思維貫穿整個(gè)設(shè)計(jì)過程，這一習(xí)慣的轉(zhuǎn)變雖然困難，但至關(guān)重要，否則工程化設(shè)計(jì)只會(huì)成為額外的負(fù)擔(dān)。而這一問題并不局限于設(shè)計(jì)師，我們?cè)诋a(chǎn)研團(tuán)隊(duì)中也曾經(jīng)有類似的問題。比如，把“打磨體驗(yàn)”當(dāng)作額外的工作，常常將體驗(yàn)細(xì)節(jié)的優(yōu)化留到研發(fā)甚至測(cè)試完成之后，認(rèn)為只要在最后花點(diǎn)時(shí)間精雕細(xì)琢，就能掩蓋過程中的問題，最終呈現(xiàn)出完美的體驗(yàn)。仿佛用戶體驗(yàn)就像裝修的最后刷漆階段，簡(jiǎn)單修飾便可掩蓋瑕疵。

然而，在實(shí)際工作中，受限于時(shí)間壓力，這個(gè)過程往往匆忙應(yīng)付，效果大打折扣。

我并不否認(rèn)最后的打磨是必要的，但用戶體驗(yàn)的主干必然是工程化和流程化的產(chǎn)物。尤其是在面對(duì)大體量、長(zhǎng)周期、持續(xù)迭代的產(chǎn)品時(shí)，極致體驗(yàn)應(yīng)當(dāng)是一項(xiàng)系統(tǒng)化的工程，而不僅僅是最后的打磨。

總結(jié)一下

回到最初的問題，我們的目標(biāo)是通過工程化設(shè)計(jì)解決設(shè)計(jì)師和工程師在協(xié)作中面臨的一些挑戰(zhàn)。具體來看，解決方案如下：

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

設(shè)計(jì)工程化在 ToB 行業(yè)的應(yīng)用，帶來了前所未有的效率提升和質(zhì)量保證。通過有效地將設(shè)計(jì)與前端開發(fā)的邏輯和標(biāo)準(zhǔn)對(duì)接，我們不僅為內(nèi)部團(tuán)隊(duì)提供了更高效的工作流程，也為客戶帶來了更加一致和可靠的產(chǎn)品體驗(yàn)。隨著市場(chǎng)需求的不斷變化和技術(shù)的不斷進(jìn)步，設(shè)計(jì)工程化將成為企業(yè)應(yīng)對(duì)復(fù)雜業(yè)務(wù)場(chǎng)景和快速迭代的關(guān)鍵手段。未來，我們期待這種方法能夠持續(xù)推動(dòng)行業(yè)的創(chuàng)新發(fā)展，為客戶創(chuàng)造更大的價(jià)值。

作者：釘釘用戶體驗(yàn)