新火種
2024-04-17 
AI時代，設計工具如何跑贏同類競爭者
大部分互聯網產品的版本更新周期為 1 個月，更新較為頻繁的產品如 Facebook，在部分海外市場可以做到每周更新一版。很難想象，有一款產品在過去兩年時間，發布了上千版，平均每天發布 1.4 次，這款產品就是 Motiff。
隨著人機界面交互的演進，UI 設計工具的時代也在悄然更迭。Photoshop 曾是網頁設計師人手必備的像素時代設計工具；后來，Sketch 結合矢量設計，取代 Photoshop 成為專用界面設計工具；而后，Figma 橫空出世，將設計工具帶入協同時代。而 Motiff 期待成為下一個時代——AI 時代的界面設計引領者。
界面設計曾經歷三個時代變遷，如今進入 AI 時代
Motiff 是一款 AI 時代的專業界面設計工具，其核心功能之一是在線編輯器。與其他同類工具不同，Motiff 的在線編輯器一方面要保證基礎編輯器的性能，滿足設計師日常精細化的設計需求、團隊的協作需求，另一方面要融入 AI 能力，為設計師和設計團隊提效。
可以說，Motiff 團隊正在打造的是全世界最復雜的高性能編輯器，而兩年發版上千次背后的技術實踐就是主干開發。
Motiff 為什么選擇了主干開發？主干開發為 Motiff 帶來哪些關鍵成果？4月13日，在Qcon 全球軟件開發大會上，Motiff 研發負責人張宇辰對此進行了解答。
張宇辰演講現場
主干開發：在多重不確定性中高頻發布且保證質量
張宇辰介紹，Motiff作為一款 AI時代設計工具，在開發過程中存在非常多的特殊性：首先，Motiff需要進行測試的Case空間非常大，設計師需要在Motiff的畫布上隨意發揮，這意味著用戶的操作路徑和數據都無法窮舉；其次，Motiff的在線協同功能要求它必須能接受來自數據驅動的變更；此外，Motiff是一個具備多個AI功能的生產力工具，AI的加入也為產品帶來更多的復雜和不確定性。
因此，如若采用傳統的“分支開發+精細化發布”模式，則容易導致Bug 集中出現，造成資源浪費并降低整體開發效能。
為了解決這一難題，Motiff團隊最終采用了“主干開發+自動化測試”的方案，保證了Motiff在實現高頻發布的情況下，仍然很好地保證了軟件質量：
性能高：設計師在編輯器上的日常操作不卡頓，畫布渲染流暢快速，Motiff 的大部分常用操作性能甚至好于Figma；
穩定性強：在每周使用 1000分鐘編輯器的情況下，年平均崩潰次數不超過1次；
基礎功能全：僅兩年，Motiff就完成了組件實例、原型、研發模式、矢量網絡等編輯器的核心功能開發；
AI 能力強大：編輯器的各種編輯能力都對AI開放，上線了AI設計系統、AI布局、AI魔法框等功能，未來還將有AI復制等新功能上線，為設計流程提效。
“Motiff試圖比 Figma 做得更好”
據了解，Motiff團隊用主干開發驅動了自動化測試、高頻提交、部署發布分離、特性開關等多種持續集成/持續交付實踐，這一系列實踐起到了重要作用。在自動化測試過程中，工程師有機會提前發現質量問題、避免返工，提高團隊效率。由于Motiff有大量的自動化測試Case，每次合并代碼前，這些Case會在不同的特性開關組合下被執行，從而確保有效覆蓋用戶的各種場景。
在做自動化測試的過程中，Motiff團隊走過不少彎路，實驗過數種方法，例如嘗試從最小粒度的單元測試開始寫代碼。但這一實踐失敗了，因為單元測試經常難以抵抗重構。為了提升編輯器的性能，Motiff曾數次進行代碼的大規模重構，到如今，有些大規模的重構還在Motiff內部進行中。
為提升編輯器性能，Motiff 進行多次大規模代碼重構
如果希望測試變得穩定，就需要尋找一些穩定的接縫。對于Motiff來說，這些接縫是用戶的操作場景。“這些場景是如此的穩定，以至于我們第一個用戶測試中被成功創建的矩形測試Case，在經歷了兩年的時間，無數次的大大小小重構后，仍然存活著，為工程師團隊默默守護著發布質量”，張宇辰介紹道。
Motiff的項目中存在三種不同的接縫，因此有三種不同的測試框架，其中包括C++的單元測試、TypeScript的單元測試，以及Cypress進行的端到端（E2E）測試。而盡管E2E測試看似美好，可以模擬真實用戶的操作和環境，但它的成本高昂。E2E 測試不僅每次運行也會消耗大量的CI機器時間，而且通常不穩定，很容易因為網絡抖動、服務端問題或瀏覽器問題而失敗——因此，Motiff團隊采取了一套治理策略，包括討論是否能把E2E測試轉移到C++或者TypeScript測試，以及標記不穩定的測試并防止它們阻塞流水線的運行。
在自動化測試的實踐下，Motiff完成了數次大規模代碼重構，并且在設計師常用的文件加載、頁面切換、文件導入導出等操作場景中，實現了對Figma的超越。
在設計師常用操作中，Motiff 編輯器的性能表現基本超越 Figma
同時，Motiff還在持續自研渲染引擎，期待將設計師在畫布區的操作體驗提升至更高水平。“Figma開創了全球最高性能的在線編輯器，Motiff試圖在這件事上做得更好”，張宇辰說道。
特性開關，讓功能開發更高效
自動化測試并非萬用靈藥，任何測試手段都無法保證 100% 發現所有問題。為了進一步降低線上問題的風險，Motiff在自動化測試的基礎上，引入了特性開關這一實踐。
通過特性開關隔離代碼路徑，Motiff讓未成熟的變更可以提交到主干上，而不必擔心會影響到線上的正常運行——特性開關是基于代碼邏輯執行的調整，可以在運行時動態修改。
結合 Feature Switch 開關，Motiff完成了研發模式（Dev Mode）的開發上線。張宇辰介紹說，“研發模式基本上對于所有編輯器的用戶交互都做了重新定義，在傳統的多分支開發模式下，這樣大的功能發布，往往要經歷非常痛苦的合并過程。而在 Motiff，我們通過 Feature Switch 隔離了不穩定代碼，提升了集成頻率，降低了單次合并的風險，在兩個月時間開發完了整個功能，同時對用戶沒有產品體驗的影響，在過往的實踐中是很難想象的”。
Motiff 的研發模式的開發對所有編輯器的用戶交互做了重新定義
研發模式的上線，將完善Motiff產品在工作流程中不同工種之間的協作問題，使之不僅是一個為設計師提效的產品界面設計工具，還能便利設計師與前端工程師的協作，真正成為提升團隊效能的生產力工具。
自動化測試和特性開關這兩種實踐，使得Motiff的開發流程更為高效、有序，而且在確保代碼質量的同時，還大幅降低了應對缺陷的成本和風險。
雖然已取得眾多成果，但對于Motiff團隊來講，打造一個全世界最復雜的高性能編輯器的路還很長。除了在自研渲染引擎上的努力，在將AI能力融入編輯器的同時，克服AI的加入帶來的新的不確定性，對Motiff團隊來講依然是要持續攻克的難題——在原先的自動化測試中，工程師往往是給定一個確定的輸入，系統會據此產生一個確定的輸出。但設計師在使用AI功能后得到的結果是不確定的，這對自動化測試同樣是挑戰。
目前，軟件行業進入了全新的 AI 時代，Motiff將 AI 能力融入產品中，開發出了AI設計系統、AI 布局、AI魔法框等AI功能，引起行業內外眾多人的關注與討論。未來，Motiff團隊還將結合設計師的實際使用場景為用戶帶來更多AI功能。
相關推薦
- 免責聲明
- 本文所包含的觀點僅代表作者個人看法，不代表新火種的觀點。在新火種上獲取的所有信息均不應被視為投資建議。新火種對本文可能提及或鏈接的任何項目不表示認可。 交易和投資涉及高風險，讀者在采取與本文內容相關的任何行動之前，請務必進行充分的盡職調查。最終的決策應該基于您自己的獨立判斷。新火種不對因依賴本文觀點而產生的任何金錢損失負任何責任。
