大廠團隊如何進行設計交付？MasterGo 關于行業的洞察與思考

本篇文章主要想和大家探討：什么是設計交付？設計交付從哪來到哪去？究竟解決什么問題、價值何在？大廠或者說那些代表業內最先進生產力的團隊，他們是怎么理解、以及怎么做設計交付的？

另外，還有一些 MasterGo 產品團隊關于行業發展趨勢的洞察和思考分享，以及一點點供剛入行同學們參考的小建議，希望能為大家帶來些許助益。

什么是設計交付？

提到交付二字，我們普遍會想到向客戶交付，例如交付一個產品、交付一組訂單等等。這個動作的完整結構，包含了“交付的主體”、“交付的客體”、“交付的方式”、以及“交付物”，四個關鍵要素。

完整的表達句式

誰向誰，通過什么方式，交付什么。

舉個例子：韓梅梅向李明明，通過在線文檔的方式，交付了關于《設計交付工具競品調研》的報告。

再比如，Nate 向 Jane，通過物流方式，交付了上周的蘋果訂單。

相信很多剛入行的小伙伴，在團隊中會聽到研發小哥問：“某某需求的設計稿什么時候交付？再不交這個迭代排不進來了啊。”或者聽到自己 Leader 問團隊里其他小伙伴：“這周會有哪些需求進入到交付環節？大家趕一趕，沒評審的盡快約評審”之類的對話。

那么，當我們在談論設計交付時，我們究竟在談論什么？套用上面提到的句式：“誰向誰，通過什么方式，交付什么”。我們來填空，看看在產品、設計、研發協作領域，設計交付到底意味著什么。

交付主體是誰？

就是我們設計團隊的設計師們。尤其是占大頭的用戶界面設計師們，可以說是這個行業里絕對的“交付”主力。

交付客體是誰？

當然是我們協作的下游，可愛的研發工程師們。他們會拿著我們的設計稿，將一個個按鈕、頁面變成網頁、APP、小程序、運營管理后臺等等。

交付方式是什么？

這里就有意思了，也是后面會展開的重點部分。整個行業經歷過幾個不同的發展階段，每個階段受到技術的限制、工作習慣、分工和協作關系等因素，都有它特定的交付方式。

交付物是什么？

是我們產出的設計稿。而且既然是交付，就說明設計環節的活兒已經完成，該移交至下一個環節的小伙伴。這就意味著，我們產出的設計稿已經通過了設計團隊、產品團隊、以及需求方的檢驗，該做的修改和調整都已經完成了。

填好這四個空之后，大家對“設計交付”有沒有一個相對清晰的理解呢？我猜很多同學會想，然后呢？這不就是把設計稿給到研發同學就好了嘛，好像沒什么復雜，也沒什么學問在里面啊。接下來，我們帶著這個疑問，來一起了解下為什么我們需要做設計交付，設計交付經歷了哪些發展階段，又是在哪些因素的驅動下不斷發展變革的。

設計交付的前世今生

時間線 2000 - 2010 年

互聯網在國內開始興起。新浪、網易、搜狐三大門戶網站占領了第一代網民的心智，這個十年加入互聯網的一代，基本算是國內的第一批從業者了。

那時候，產品經理這個崗位剛剛興起。

他們輸出了很多對行業發展、對技術趨勢、以及對海外新思想的思考和洞察，讓所有人都認為產品經理是那個最關鍵的角色，團隊里每個人都聽 ta 們的，他們告訴大家做什么、怎么做，他們人數不多，有時候一個業務團隊里就一個獨苗，甚至大部分團隊還招不到產品經理。

他們用 Google Docs, Evernote, Visio, Axure, Keynote，還有閃亮的初代 Macbook Air 和 iPhone 3Gs，他們不用 Word 和 PPT，更不會用 Excel，對，就是不用。

他們中的一些人，還會用 Photoshop，甚至會 Illustrator 和 Coreldraw。那時很少有人會挑戰 ta 們：“我們為什么要做這個？”以及“我們為什么要這么做，而不是那樣做？”

那時候，設計師還不叫設計師，大多被稱為美工。

他們有些來自傳統印刷和紙媒行業，他們用 Photoshop 和 Illustrator 很溜，操作速度快得飛起，還會寫腳本批量修圖。他們中的一些人，很早地嗅到了產品經理這個崗位的發展利好，積極轉行，更多人則朝著界面設計的專業方向，越走越深、越走越遠。還有那么一小撮人，他們極力地想要實現自己的設計，他們用 Dreamweaver 直接構建自己的理想，成為站長。

那個時候，還有一個神奇的領域，叫做 GUI （Graphic User Interface）

這個名字遠遠沒有體現出他們的厲害之處，他們把 Photoshop 畫板放大到很大很大，大到一個像素大約有指甲蓋那么大，然后一個像素一個像素的在屏幕上點擊鼠標，當縮小畫面后，一個邊緣平滑、過渡自然的圖標躍然而生！

這個時期，不管是會比劃 Photoshop 的產品經理，還是精通 Illustrator 的美工，在前端工程師眼里，都是美工，見到他們的第一句話都是：“圖出來沒？圖切好沒有？”

在他們的工具技能樹上，有一款奇跡一樣的產品，叫做點 9 切圖工具，它能幫助我們實現自動拉伸、壓縮按鈕尺寸而不會失真！

這個時期，他們交付給研發團隊的，往往是一個 .zip 或者 .rar 壓縮包，里面包括了一片片能夠拼湊出完整頁面的拼圖碎片，以及一張張標記滿滿尺寸信息的界面。不論你的設計多么精妙絕倫，多么美得不可方物，最終都得附著密密麻麻的紅色線條和數字，變成一個個碎片而無法完整展示給前端工程師。

時間線 2010 - 2020 年

移動互聯網從起飛到平穩的十年。這十年里變化太多、也太快，快到回過頭看，會發現我們一起經歷過那么多精彩和美好。

從阿里、百度、騰訊的三分天下，到京東、美團、滴滴的快速崛起，再到后來字節、快手、拼多多...，大家一邊感嘆創業再無機會，一邊新的獨角獸繼續層出不窮。這個時期，產品經理、UI 設計師、前端工程師的隊伍在快速擴大。

大多數產品經理一邊學習著如何操作 ProcessOn

一邊向身邊的人推薦 Notion；一邊吐槽著 Axure 和 Visio 多么難用，一邊遠離著 Office 三件套。他們中的絕大多數人不再需要使用、更不會安裝 Photoshop，因為連設計師們也不再使用。

相當一部分設計師開始使用 Sketch

這對他們來說是劃時代的產品，因為，他們第一次用上了專門為他們設計的設計工具，這不僅帶來效率提升，更代表著在團隊內影響力的極大提升。

Sketch 的圖層樣式、文字和顏色變量還有 Sketch Library 令他們兩眼放光，組件思維、原子思維迅速蔓延，設計規范的建設成為各個用戶體驗團隊的軍備競賽，誰也不愿意再做那個不停重復造輪子的傻子。就連一些產品經理也拜倒在 Sketch 的鉆石光芒之下。然而，他們交付給團隊的，仍舊是一個 .zip 或者 .rar 壓縮包。

在這個十年的最后 2-3 年里，還出現了一款叫做“藍湖”的產品

它的神奇之處在于，你只需要在 Sketch 里安裝一個插件，就可以一鍵把設計圖傳到云上。這樣一個鏈接丟過去，不論研發小哥是在公司電腦前敲代碼，還是在個人電腦前 LOL，甚或是在馬桶上握著手機，你的設計稿都絕不允許被他們忽視。不只如此，他們可以動動手指，就查看到詳盡的標注，再動動手指，所有切圖直接下載到自己電腦上。更貼心的是，它還能兼容那些仍然堅守在 Photoshop 上的小伙伴。

這種交付方案的變革，為廣大設計師帶來福音，他們原本需要花費和設計一樣長的時間，去標注、去切圖，現在，有了藍湖這樣的產品，他們的頭發再也不需要做無謂的犧牲了！

2020 年開始

注定是改寫這個產業的最關鍵的十年。

伴隨著各行各業數字化進程的進一步推廣和加速，數字交互界面也成為一個明確的、潛力巨大的產業。未來，人們將越來越多的通過一個個或大或小的界面，來獲得信息、服務、甚至人生中的絕大部分“真切”體驗。這個十年的開始，正如 Figma 在國外對 Sketch 的全面“清剿”，國內也涌現出一批新一代的在線協同設計平臺。

這一代產品不但繼承了、并且進一步發揚光大了組件化設計的思想，還把布局能力、設計規范助推到設計系統這一新的高度，甚至和代碼化的組件打通。

設計不再是純視覺的游戲，不再是需要代碼“轉譯”的非結構化信息，而是能夠指導樣式代碼編寫的、所見即所得的產品定義過程。

并且，不只是設計師，在新一代協同設計平臺上，產品、研發，甚至運營、市場團隊，都有機會在項目早期就加入到產品創作的過程中。整個業務團隊圍繞共同的目標、基于可見的產品原型，共同描繪著未來，定義著一個個數字交互界面產品，一起為一個個用戶、一個個客戶創造價值。

交付，不再是你干完活兒后，交給我繼續干，而是我和你，我們一起一邊探討、一邊創造，當我們定義好產品時，相應的代碼也一并生成，標注、切圖、走查將不復存在。

我們有機會實現普適的低代碼和無代碼解決方案，通過標準化、工程化的組件來構建應用，甚至實現一鍵部署、發布給自己的用戶。數字交互界面的生產力得到極大釋放，更多的界面產品得以面世。這時，交付不再是設計師交付給工程師，而是由創造者直接交付給用戶！

當然，趨勢歸趨勢，暢想歸暢想。回到當下，設計到研發的交付場景仍是產設研協同鏈條上最關鍵的一環，讓我們一起看看走在效能實踐前沿的“大廠”都是怎么做的。

大廠是怎么做設計交付的？

我們說大廠，不是單單看規模，看企業人數，而是那些代表了產業內最高水平的企業，這些企業面臨激烈的市場競爭，需要持續不斷地提升自身的效能、加速迭代自己的產品和服務，才能夠持續引領產業發展并保持自身的領先地位。

同時，隨著數字化進程的加速，各行各業都需要一支“互聯網式”的研發團隊，因為在向客戶交付產品和服務以及持續和客戶的互動過程中，越來越離不開數字交互界面，例如小程序、APP、網站、車載大屏等等。

在設計團隊、研發團隊各自解決了自身內部規范和效率問題之后，大家發現，從界面設計到界面開發這個環節，長期受到工具障礙和語言障礙的影響，效率問題越來越突出：

1. 定義產品需求的工具不統一：產品、設計、研發各有各的偏好

2. 信息的載體不統一：包含文檔、腦圖、流程圖、視覺稿等等……

3. 理解需求、認知產品的視角不統一：產品關注需求有沒有被解決、價值有沒有實現，設計關注用戶實際使用時的綜合體驗，研發關注技術棧、實現成本、性能還有可維護性

大廠如何解決這些問題呢？他們做了非常多實踐，包括各種工具和流程體系建設，大體上可以分為三個階段：

早期

基于 .psd .sketch .html 文件，搭建本地服務器來集中存儲和訪問，通過 SVN 管理文件版本

成熟期

使用三方（藍湖、Zeplin）或自建設計交付平臺（例如阿里的 D-One、美團的印跡、滴滴的魔方等等）

突破期

使用在線協同設計平臺（MasterGo、Figma）替代 Sketch + Axure + 設計交付平臺的工具架構，實現產品定義、評審、交付研發的一體化

這里重點介紹下后面兩個階段：成熟期和突破期。

成熟期

搭建本地服務器的方式一方面存在一定的實施門檻。它不難，但是對絕大多數設計團隊而言，還是要請研發小哥幫個忙。另一方面，雖然它為非設計人群省去安裝 Sketch 的麻煩，讓團隊可以直接訪問服務器查看設計稿，而不用費力地找一臺 Mac 電腦下載安裝包。

這里很多人會抱怨下 Sketch，它成就了一代 UI 設計師，也因不能跨端、文件不便于訪問的問題，造就了一批交付平臺，最終也讓自己被市場淘汰。這種交付方式最大的弊端就是不適合迭代、不適合敏捷開發。過程中改動那么多，每次改動都要反復上傳反復通知大家一定要看最新版本，而隨著團隊人數增多，業務范圍擴大，這種方式最終演變為混亂的災難。

Sketch 大抵也是非常清楚大家的痛點，便開放了相關數據結構和接口，于是有人提出專門做一個交付物的管理平臺，例如 Sketch Measure。這樣 Sketch 文件上傳后把必要的數據解析并繪制出來，然后不僅可以查看標注、獲得切圖，還能提供評論功能。對于設計團隊上傳方便了、評審方便了，對于研發團隊而言更是極大地改進了他們的體驗。于是交付平臺幾乎在 3 年內便滲透到每一個設計和產研團隊，極大提升了產設研團隊的協同效率。這其中有海外的 Zeplin，也有國內的藍湖，還誕生了多個大廠自建的內部交付平臺。

關于大廠自建交付平臺，不得不提到中臺化這個概念，在那一波降本增效的大背景下，減少重復造輪子，是人人都會掛在嘴上的信條，大廠內眾多中臺團隊應運而生，這其中也不乏設計中臺團隊，而內部交付平臺，大都是由設計中臺團隊承建和維護。

突破期

交付平臺幫助團隊解決了很大的問題，集中交付、可視化、版本管理、在線評論、自助查看標注和獲得切圖、甚至完成走查...但是，它沒能解決一個更本源的問題：數字交互界面的設計標準和生產標準是什么？它解決了表面問題，而一旦本質問題得到解決，上層場景可能就不復存在。

Figma 的出現讓大家看到了這個本質問題，并逐漸形成了一個認知：我們如何生產決定了我們如何定義。或者說，設計創意不能脫離技術實現它的方式。在標準得到充分對齊的情況下，整個制程、工藝中組件化程度會大幅提高，生產效率將得到大幅提升。而在整個生產鏈條中，設計工具起到至關重要的作用，它不僅是創意和工藝的體現，更是行業標準的集中體現。

一線大廠早在 19 年前后就關注到下一代協同型的產品設計工具，但對于是否切換以及什么時候切換分成了兩類：

1. 我們有自己的交付平臺，并且功能在持續完善，我們有充足的中臺資源來支持集中交付和流程管理平臺的開發和落地，新工具尚不成熟，Sketch 仍是最佳選擇，對新工具保持關注

2. 我們正在決策是采購三方交付平臺，還是自行開發，我們有預算、有資源，新工具出現的正是時候，省去了交付平臺的麻煩，直接用。

我們來看看像 MasterGo、Figma 這一代產品，是如何解決交付問題的，為什么在這么高沉沒成本的情況下，大廠們還是堅決要推進工具換代。

100% 基于 Web 并且能夠多人實時協作

使得團隊無需再依賴任何三方、二方交付平臺。因為任何人使用任何設備都可以直接訪問甚至編輯同一份數據，這使得團隊中的非設計角色有機會更前置地了解、甚至參與產品定義的過程，而不是等到方案評審時來個大 battle。

完全基于在線數據

省去反復傳遞數據的同時，更避免了大量因為數據不同步、不一致帶來的溝通和協作成本。

組件和實例、網格和自動布局

這些已經在代碼側得到充分迭代和驗證并沉淀下來的生產方式，直接體現了我們對于數字交互界面這一類產品的認知范式，正加速成為所有產品設計師理解和構建數字交互界面的共識的方法。如果代碼實現不了，就先不要被設計出來，反之，如果一定要設計出來，就需要找到代碼實現它的方式。

理論上無需走查

因為結構一致了、標準一致了，新一代設計工具更接近成熟產業中的 CAD，輸出的產品定義將 1:1 直接指導產品生產過程，從而保障設計意圖的“精準還原”，所以，理論上走查場景會不復存在。

綜上，大家不難看出，新一代工具的優勢是巨大的，它的用戶和使用場景不局限在設計師個人，而是一整個設計團隊，甚至整個產設研團隊；同時它劃時代地將生產數字交互界面的內在原則，逐漸清晰且一致地呈現給所有人。

可能有人會問，我們之前那么多歷史數據，還有那么多團隊、那么多人的使用習慣怎么辦？

首先，這波工具換代潮不是簡單的習慣變更、功能變更，而是更先進的生產力和生產關系的變更，不換，必然落后于人；其次，千萬別讓歷史數據阻止自己革新、前進的腳步，在數字交互界面產品的生產邏輯里，可復用的才是有價值的，只要完成樣式規范和組件庫的遷移，就可以在新的平臺上快速跑起來，其他歷史數據根據未來迭代的實際情況，按需遷移即可。

這里給大家一個參考，幫助大家更好地評估規范遷移的工作量：

某團隊前后投入 3 人、斷斷續續歷時 2 周便將一個之前在 Sketch 上持續維護的、包含了 1000+ 組件的團隊庫遷移到了 MasterGo，并且還為組件引入了包括自動布局、組件狀態在內的新特性，極大提高了組件庫的易用性和可維護性。

“去設計交付”下的新挑戰

可能還有很多人認為，交付場景不會消失，至少不會這么快消失，因為工作流程不還是產品出需求，設計師接需求出設計，然后開發照著設計做嗎？

如果這個工作流不改變，交付場景就始終會在。沒錯，前提是工作流不改變，你是對的。但我們在前面說過，這次工具換代會是產業進入成熟期的重要標志之一，對推動產業變革起到了關鍵的催化作用。

產業變革的進程會體現在：

1. 基于新一代工具，協作的可能性和價值得到充分釋放

設計團隊更開放地和上下游聯動，更主動地吸納意見、同時輸出設計思維的價值，于是傳統的瀑布式的大流程必然得到優化。項目中更多的專家角色有機會在更早期參與到目標和策略的討論與制定、以及產品方案的設計，從而前置地、更有效地影響產品或項目的走向、進而確保最終價值的實現。這就對設計師群體在項目中的溝通和協調能力提出更高要求，他們不僅是呈現方案的人，更是促進更優方案產生的促進者。

2. 僅僅做流程優化已經不能很好地釋放產品設計價值

能力模型、崗位設置、甚至組織架構需要相應調整和優化。

UI、UE、動效、3D 設計師 vs 全棧設計師、設計系統架構師、組件設計師、Design Thinking、DesignOps...

3. 持續地尋找適合自己的過渡方案

沒有明確的交付節點，“設計定稿”這件事本來就是難點，在加速迭代中也變得越來越不現實，而新一代協同型的工具在適應期內可能會加劇這個問題帶給大家的負面感受，而這種感受恰恰反映了瀑布模式下的思維慣性和動作慣性。

在這個遷移、適應的過程中，不論是通過規范項目、文件、頁面結構推動設計系統落地，規范流程，還是在一段時間內繼續搭配交付平臺來使用，這需要 Team Leader 或促進者帶領團隊持續地尋找適合自己的過渡方案。

4. 將早期、不成熟的思路毫無保留地暴露出來，而不是憋大招

這一點在我們的調研中，發現對很多人不論是設計師還是產品經理都存在很大挑戰，大家普遍傾向于把自己認為 ok 的內容再呈現出去，怕露怯、怕被挑戰。但這實際是很多職場人真正步入職業化的重要一步，重點不是我們自己在過程中露不露怯，而是在過程中積極主動地吸收不同視角的意見和建議，廣泛地聽取意見、獨立做決策、最終拿到好成果，職場同伴自然會認可你，你的影響力才會增加。

5. 產設研共同擁抱不確定性和極限迭代

在 CI/CD 理念的啟發下，實踐 CD/CD (Continuous Define / Continuous Develop)

寫在最后

大廠其實沒有光環，只是在過去 10 年間，更早地聚集了先進的思維、優秀的小伙伴，并且有相對充裕的社會資源和影響力去探索更好的生產和協作方式。

但隨著業務的成熟、組織結構的龐雜，慣性越來越大，更難在接下來做出變革性的創新，大廠內部也在發生積極的“裂變”。下一個十年，隨著新一代協同型產品定義和生產平臺的加速滲透，更多、更好、更先進的方法、能力、資源被帶入更多團隊，我們相信，是千千萬萬中小團隊產能爆發的十年，讓我們一起創造，共同推動數字世界的用戶體驗和商業價值最大化！