一、回到 2021

Motiff 這個(gè)項(xiàng)目始于 2021 年 10 月，不同于很多初創(chuàng)團(tuán)隊(duì)有著“找尋并聚集團(tuán)隊(duì)全員”這樣更具創(chuàng)業(yè)色彩的故事，我們?cè)谀菚r(shí)，就已經(jīng)有一支工程師文化濃厚的團(tuán)隊(duì)，也不乏一些優(yōu)秀的 AI 科學(xué)家。在過(guò)去，這支團(tuán)隊(duì)在教育領(lǐng)域成功實(shí)踐了不少全球性的項(xiàng)目。

商業(yè)的最初靈感，可能要追溯到我們最初使用 Github Copilot。那時(shí)，我們大部分團(tuán)隊(duì)的工程師們并不覺(jué)得這款軟件會(huì)發(fā)揮多大的價(jià)值，而是直覺(jué)上認(rèn)為 “距離 AI 有能力幫助我寫(xiě)代碼的時(shí)代還很遙遠(yuǎn)”?？傻胶髞?lái)，Motiff 幾乎所有的工程師都在使用 Copilot。這讓我們感受到，如果能找到合適的用戶場(chǎng)景，將 AI 適當(dāng)?shù)厝谌雽?zhuān)業(yè)工具中，一定會(huì)產(chǎn)生效率變革，這讓我們躍躍欲試。

萌生了想法，接下來(lái)就是“找到合適的用戶場(chǎng)景”。經(jīng)過(guò)一系列討論，我們把起點(diǎn)定在 “產(chǎn)品設(shè)計(jì)” 領(lǐng)域。這主要有兩個(gè)原因：

1. 設(shè)計(jì)和研發(fā)在線產(chǎn)品，是我們這支團(tuán)隊(duì)過(guò)往持續(xù)實(shí)踐的事情，團(tuán)隊(duì)也一直熱衷于使用最先進(jìn)的工具，我們對(duì)自己在這個(gè)領(lǐng)域的專(zhuān)業(yè)理解有信心。
2. 這個(gè)世界已經(jīng)存在無(wú)數(shù)豐富的用戶界面了：仔細(xì)觀察這些界面，它們?cè)谠O(shè)計(jì)模式上的相同，遠(yuǎn)遠(yuǎn)勝過(guò)了它們?cè)跇邮?、風(fēng)格上的不同。這樣的規(guī)律讓我們相信 AI 可以持續(xù)在這個(gè)領(lǐng)域發(fā)揮價(jià)值。

打造一款 AI 時(shí)代的用戶界面設(shè)計(jì)工具，這便是我們的開(kāi)始。

二、AI 時(shí)代的界面設(shè)計(jì)工具，需要一個(gè)怎樣的編輯器？

編輯器是一個(gè)用戶界面設(shè)計(jì)工具的核心。Sketch 通過(guò)簡(jiǎn)化和改進(jìn) Photoshop 的部分功能，打造了一個(gè)專(zhuān)為 UI 設(shè)計(jì)師使用的編輯器，這本質(zhì)是一次 “編輯器革命”。“無(wú)限畫(huà)布”“畫(huà)框”“矢量工具”這些功能，讓 Sketch 定義了專(zhuān)業(yè)界面設(shè)計(jì)工具的“矢量時(shí)代”。而 Figma， 則通過(guò)“協(xié)同”讓游戲發(fā)生了改變 —— 編輯器被直接放上了云端，設(shè)計(jì)師只需通過(guò)瀏覽器就能實(shí)時(shí)協(xié)作。

這場(chǎng)新的變革，也讓 Figma 成功超越 Sketch 成為當(dāng)下更流行的工具。

回到 Motiff 妙多，如果面向 AI 時(shí)代期望再引發(fā)一次變革，我們需要一個(gè)怎樣的編輯器呢？最初，我們?cè)噲D思考一些更廣泛的問(wèn)題：在編輯器的功能定義上，我們究竟傾向于顛覆，還是借鑒？如果 AI 將在設(shè)計(jì)工具中扮演更重要的角色，下一個(gè)時(shí)代的編輯器會(huì)和我們現(xiàn)在所熟悉的截然不同嗎？

這些問(wèn)題難有定論。但回顧過(guò)去，我們確實(shí)經(jīng)歷了一些推演。

• AI 對(duì)編輯器的改變也許是漸進(jìn)的，原因是編輯器里每一個(gè)功能被 AI 改進(jìn)，這是相對(duì)獨(dú)立的命題。如果我們?cè)跐u進(jìn)的創(chuàng)新中需要更多用戶反饋，則需要讓我們的用戶有一個(gè)全面的編輯器來(lái)持續(xù)使用我們的產(chǎn)品。
• “AI 生成” 也許是一個(gè)非漸進(jìn)的改變，畢竟我們已經(jīng)體會(huì)了大模型的日新月異。但我們?nèi)耘f認(rèn)為更好的設(shè)計(jì)需要人來(lái)完善，因此全面精細(xì)的編輯器似乎就不可或缺了。

隨著我們邊做邊思考，愈發(fā)覺(jué)得一個(gè)全面的編輯器對(duì)我們很重要。它就像我們的“內(nèi)功心法”，如果沒(méi)有內(nèi)功，我們很難在此基礎(chǔ)上施展華麗的“AI 招式”。

當(dāng)下，如果你已經(jīng)使用了 Motiff 妙多，會(huì)看到一個(gè)具備完備云端協(xié)同能力的專(zhuān)業(yè)編輯器。

打造一個(gè)全面的編輯器確實(shí)花費(fèi)了 Motiff 妙多團(tuán)隊(duì)不少精力。在這里要特別感謝 Figma 讓我們少走很多彎路。Figma 用近十年的時(shí)間開(kāi)創(chuàng)了一個(gè)復(fù)雜又精細(xì)的在線圖形編輯器，是我們長(zhǎng)期學(xué)習(xí)的對(duì)象。我們的產(chǎn)品和技術(shù)團(tuán)隊(duì)常常從 Figma 的 Blog 分享中獲益良多。我們同時(shí)也發(fā)現(xiàn)，對(duì)于一款在線圖形編輯器，“性能”尤為關(guān)鍵。Figma 在性能方面一直很優(yōu)秀，Motiff 妙多則嘗試做得更好。事實(shí)上，我們現(xiàn)在已經(jīng)在很多關(guān)鍵的場(chǎng)景下，將性能優(yōu)化的更好。

三、Motiff 妙多對(duì) AI 應(yīng)用的思考

如何在專(zhuān)業(yè)設(shè)計(jì)工具中融合 AI 能力？從創(chuàng)立 Motiff 妙多開(kāi)始，這就是整個(gè)團(tuán)隊(duì)長(zhǎng)期思考的問(wèn)題，也是最重要的問(wèn)題。

那么，AI 能幫助 UI 設(shè)計(jì)解決哪些問(wèn)題？事實(shí)上，在經(jīng)過(guò)了多次頭腦風(fēng)暴后，我們已經(jīng)有了一份長(zhǎng)長(zhǎng)的 AI 功能創(chuàng)意清單。這份清單上每一個(gè)“點(diǎn)子”都很酷，將這些“點(diǎn)子”轉(zhuǎn)化為產(chǎn)品原型也并非難事，但解決 AI 融入工具的難點(diǎn)往往不是創(chuàng)意本身，而是這些創(chuàng)意是否真的能夠被 AI 穩(wěn)定、精準(zhǔn)地實(shí)現(xiàn)。

在過(guò)去，幾乎任何的業(yè)務(wù)需求都可以被產(chǎn)品和工程研發(fā)實(shí)現(xiàn)，只是產(chǎn)品質(zhì)量和開(kāi)發(fā)時(shí)間難以保證。但對(duì)于 AI 功能，更關(guān)鍵的是找到一種 “PTF”，即 Product - Technology Fit。技術(shù)可行性和產(chǎn)品設(shè)計(jì)需要一個(gè)平衡點(diǎn)。我們需要理解 AI 各種模型當(dāng)下的能力范圍和邊界，再定義合適的產(chǎn)品形態(tài)，從而使它能夠準(zhǔn)確又穩(wěn)定地應(yīng)用現(xiàn)有的 AI 能力。

從 2021 年至今，我們完成了一些“PTF”的產(chǎn)品方案，并成功在設(shè)計(jì)團(tuán)隊(duì)日常工作中實(shí)踐。

觀察設(shè)計(jì)師的日常：或許一切都可被 AI 重塑

Motiff 妙多在 AI 功能上的很多靈感，都來(lái)源于對(duì)設(shè)計(jì)師日常操作的觀察。這些觀察會(huì)伴隨一個(gè)目標(biāo)：如果設(shè)計(jì)師們?nèi)粘Ｓ幸恍┎僮鲌?chǎng)景是高頻復(fù)雜，但 AI 易于學(xué)習(xí)的，那或許 AI 在這些場(chǎng)景下就能順利發(fā)揮價(jià)值。

我們的產(chǎn)品經(jīng)理做了一項(xiàng)“枯燥又有趣”的事情——讓 Motiff 妙多早期的測(cè)試用戶，將日常在 Motiff 妙多上工作的操作錄屏，然后產(chǎn)品經(jīng)理通過(guò)觀看這些錄屏來(lái)試圖找到一些靈感。同時(shí)，我們也會(huì)在這些最少 3 小時(shí)的錄屏視頻里，分析這些產(chǎn)品設(shè)計(jì)師的具體行為，例如使用了哪些基礎(chǔ)工具、快捷鍵，再對(duì)應(yīng)到錄屏里他們完成了哪些工作。

設(shè)計(jì)師最高頻的目標(biāo)：重復(fù)

雖然這些操作分析并不嚴(yán)謹(jǐn)，但從有限的“錄屏”樣本里，我們觀察到產(chǎn)品設(shè)計(jì)師們 50% 以上的操作是為了“重復(fù)”——他們往往通過(guò)反復(fù)的“復(fù)制 - 粘貼”來(lái)完成重復(fù)——而事實(shí)上，“重復(fù)”在產(chǎn)品界面設(shè)計(jì)里無(wú)處不在，它本質(zhì)上降低了各個(gè)產(chǎn)品用戶的理解成本。

但“粘貼”一般并不是“重復(fù)”的終點(diǎn)。設(shè)計(jì)師使用“復(fù)制 - 粘貼”，往往是因?yàn)槠谕赜孟嗤脑O(shè)計(jì)模式，但同樣設(shè)計(jì)模式下的內(nèi)容又需要有所差異，或是只有復(fù)用已經(jīng)出現(xiàn)過(guò)的成套的信息才能更貼近真實(shí)的用戶界面。

“AI 復(fù)制”這個(gè)功能的靈感源于我們對(duì)重復(fù)這件事的思考和理解。

自動(dòng)布局非常好。但糟糕時(shí)，也非常糟糕。

自動(dòng)布局是一個(gè)非常實(shí)用的功能，它讓產(chǎn)品設(shè)計(jì)師可以具備更好的結(jié)構(gòu)化布局能力，這是 Figma 極具開(kāi)創(chuàng)性的發(fā)明。Motiff 妙多也繼承了這個(gè)功能。
但通過(guò)觀察設(shè)計(jì)師在布局時(shí)的操作，我們發(fā)現(xiàn)：

• 很多設(shè)計(jì)師從來(lái)不用自動(dòng)布局。有些人覺(jué)得這個(gè)功能上手的門(mén)檻比較高，另一些人則是更喜歡自由地進(jìn)行設(shè)計(jì)。
• 如果說(shuō)學(xué)會(huì)使用自動(dòng)布局是一個(gè)“困難模式”，那修改（特別是修改他人的）自動(dòng)布局堪稱(chēng)“地獄模式”。絕對(duì)定位可以解決有限的問(wèn)題，但層層嵌套后的自動(dòng)布局讓設(shè)計(jì)師很難回歸“自由”了。

Figma 的產(chǎn)品副總裁 Sho Kuwamoto 在 2021 年時(shí)的一場(chǎng)演講，將設(shè)計(jì)劃分為 Free-form Design （自由布局） 和 Structured Design （結(jié)構(gòu)化布局）。這給了我們一個(gè)啟發(fā)：既然自由布局和結(jié)構(gòu)化布局都是設(shè)計(jì)師需要的，那是否存在一種方法，讓用戶可以在有需求時(shí)就可以創(chuàng)建結(jié)構(gòu)化布局來(lái)結(jié)構(gòu)化調(diào)整，而想自由設(shè)計(jì)時(shí)又能回歸到自由設(shè)計(jì)？

“AI 布局” 這個(gè)功能應(yīng)運(yùn)而生。

設(shè)計(jì)系統(tǒng)：從生產(chǎn)流程看實(shí)踐的效率改進(jìn)

自 《原子設(shè)計(jì)》這本書(shū)開(kāi)創(chuàng)性地提出“設(shè)計(jì)系統(tǒng)”這個(gè)概念以來(lái)，“設(shè)計(jì)系統(tǒng)”一直都是保持設(shè)計(jì)一致性的最佳實(shí)踐。

我們認(rèn)為“設(shè)計(jì)系統(tǒng)”真正的有效實(shí)踐，是從協(xié)同時(shí)代一切都放到云端開(kāi)始的?！皡f(xié)同”解決了設(shè)計(jì)系統(tǒng)在同步上的很多痛點(diǎn)，但沒(méi)有解決所有的問(wèn)題——?jiǎng)?chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)仍然需要花費(fèi)大量時(shí)間來(lái)進(jìn)行整理，而每個(gè)團(tuán)隊(duì)的組件庫(kù)和規(guī)范也往往復(fù)雜，維護(hù)和應(yīng)用并不容易。

如果我們將目光轉(zhuǎn)向產(chǎn)品設(shè)計(jì)的生產(chǎn)流程，仔細(xì)審視其中的每一個(gè)環(huán)節(jié)，還會(huì)發(fā)現(xiàn)大量瑣碎但創(chuàng)意價(jià)值感低的工作。一些資深的產(chǎn)品設(shè)計(jì)師迷失在瑣碎中，甚至?xí)_(kāi)始懷疑作為設(shè)計(jì)師的價(jià)值。

將 AI 引入到設(shè)計(jì)系統(tǒng)的實(shí)踐是一個(gè)非常直覺(jué)而自然的想法。AI 可以在很多場(chǎng)景下扮演助手的角色，代勞繁瑣的工作。

當(dāng)下，Motiff 妙多已經(jīng)通過(guò) AI 有效優(yōu)化了設(shè)計(jì)系統(tǒng)實(shí)踐的效率，包括：創(chuàng)建設(shè)計(jì)系統(tǒng)時(shí)提高整理界面清單的效率，維護(hù)設(shè)計(jì)系統(tǒng)時(shí)讓系統(tǒng)的迭代更實(shí)時(shí)，以及應(yīng)用設(shè)計(jì)系統(tǒng)過(guò)程中設(shè)計(jì)師通過(guò)智能的檢查來(lái)輕松地校準(zhǔn)規(guī)范。

Motiff 妙多實(shí)驗(yàn)室： 探索更多 AI 與人一起協(xié)作的可能

AI 和 UI 設(shè)計(jì)工具結(jié)合的未來(lái)，更有可能會(huì)是怎樣的呢？

關(guān)于 AI 會(huì)否完全取代產(chǎn)品設(shè)計(jì)師，早已成為了一個(gè)行業(yè)討論的熱門(mén)話題。Motiff 妙多認(rèn)為，人的創(chuàng)意和審美在長(zhǎng)期極難被取代，但設(shè)計(jì)工具的變革或許會(huì)“讓 AI 與人一起協(xié)作”。

Motiff 妙多實(shí)驗(yàn)室，正在探索這些新的協(xié)作方式。我們這一創(chuàng)新實(shí)踐的思考路徑是，將產(chǎn)品設(shè)計(jì)工作抽象為從“Intention （意圖）”到“Presentation （呈現(xiàn)）”，再試圖從中探索 AI 如何與人一同協(xié)作。

AI 生成 UI：設(shè)計(jì)師描述意圖，AI 快速呈現(xiàn)方案

大模型讓“生成”成為當(dāng)下 AI 領(lǐng)域最熱門(mén)的話題。畢竟，我們已經(jīng)看到了“文生圖”的飛速發(fā)展，“AI 生成 UI ”沒(méi)有理由不在未來(lái)實(shí)現(xiàn)。相比如何做出一套酷炫的“AI 生成 UI 的 Demo”，Motiff 妙多在“生成”方面的思考會(huì)更審慎地評(píng)估一件事情：AI 需要“生成”什么，對(duì)產(chǎn)品設(shè)計(jì)師當(dāng)下的工作是更有價(jià)值的？

我們認(rèn)為價(jià)值主要會(huì)產(chǎn)生在兩個(gè)方向：

• 對(duì)于新創(chuàng)立的項(xiàng)目：設(shè)計(jì)師只有一個(gè)模糊的“意圖”。在進(jìn)行設(shè)計(jì)之前，設(shè)計(jì)師需要更多的靈感來(lái)參照，此時(shí)讓 AI 快速提供一些“呈現(xiàn)”是有價(jià)值的。
• 對(duì)于已經(jīng)運(yùn)轉(zhuǎn)的項(xiàng)目：此時(shí)的設(shè)計(jì)師“意圖”更加具體。這些“意圖”可能是描述，也可能是線框圖，或直接是圖文并茂的產(chǎn)品需求文檔。如果讓 AI 基于此生成界面，設(shè)計(jì)師更需要的是符合當(dāng)下業(yè)務(wù)設(shè)計(jì)系統(tǒng)的界面。

我們?cè)凇吧伞狈矫娴墓ぷ饕惨恢痹趪@這兩個(gè)方向循序漸進(jìn)的開(kāi)展，并不斷探索如何將大模型的能力融入進(jìn)來(lái)。

AI 魔法框：設(shè)計(jì)師勾勒意圖，AI 完善意圖的呈現(xiàn)

就像產(chǎn)品經(jīng)理和產(chǎn)品設(shè)計(jì)師會(huì)不斷交流，共同來(lái)完成一個(gè)新產(chǎn)品的設(shè)計(jì)，我們認(rèn)為人與 AI 的關(guān)系也不只是“上游交付下游”，而會(huì)產(chǎn)生一種“圓桌共建（Round Table）”的合作形式。

“AI 魔法框”的靈感正是在這個(gè)假設(shè)下誕生。

我們觀察到大部分的產(chǎn)品設(shè)計(jì)從最初到完成，會(huì)經(jīng)過(guò)產(chǎn)品設(shè)計(jì)師不斷地勾勒和嘗試，最終選定一個(gè)合適的方案?！爸貜?fù)”地使用之前的設(shè)計(jì)元素或結(jié)構(gòu)是一個(gè)非常高頻的操作。正如前面所介紹的“AI 復(fù)制”在特定場(chǎng)景下幫助設(shè)計(jì)師提升“重復(fù)”操作的效率，我們希望“AI 魔法框”能從“意圖”的維度改善設(shè)計(jì)師的“重復(fù)”問(wèn)題——通過(guò)“AI 魔法框”，設(shè)計(jì)師只需要通過(guò)畫(huà)一個(gè)框來(lái)“勾勒”意圖，AI 便可以通過(guò)框和框所在位置的上下文來(lái)“完善”意圖。

四、專(zhuān)為設(shè)計(jì)師打造的 AI 設(shè)計(jì)工具

經(jīng)歷兩年半的打磨，在 2024 年 6 月，我們將 Motiff 妙多這款 AI 時(shí)代設(shè)計(jì)工具推薦給你和你的團(tuán)隊(duì)。

官網(wǎng)地址： https://motiff.cn/

你和團(tuán)隊(duì)可以從嘗試 Motiff 妙多的創(chuàng)新 AI 功能開(kāi)始，來(lái)感受 AI 時(shí)代下的產(chǎn)品設(shè)計(jì)工具對(duì)效率、創(chuàng)意、生產(chǎn)力的改進(jìn)。我們將持續(xù)致力于為更廣泛的用戶提供功能全面、性能卓越、AI 驅(qū)動(dòng)的專(zhuān)業(yè)設(shè)計(jì)工具。同時(shí)，我們用公道的價(jià)格，來(lái)滿足團(tuán)隊(duì)在基礎(chǔ)功能和研發(fā)模式的使用需求。當(dāng)前，所有的 AI 功能限時(shí)免費(fèi)。

愿 AI 幫你擺脫繁瑣的工作，回歸設(shè)計(jì)本身。