【新智元導(dǎo)讀】給蘋果Vision Pro官網(wǎng)做個設(shè)計?一分鐘生成，零門檻可用。

最近，全世界都被蘋果的MR頭顯給炸場了。把這么多復(fù)雜硬件整合成如同一個piece的產(chǎn)品，Vision Pro簡直堪稱蘋果的創(chuàng)二世紀(jì)。

如此炸裂的效果，但是卻要等到明年才小規(guī)模開售，小編按捺不住內(nèi)心的激動，忍不住想給它做個銷售網(wǎng)站。

雖然沒有什么做網(wǎng)站的經(jīng)驗，也不會寫代碼，但最近AI大模型的蓬勃興盛，讓小編充滿自信:一定有這么一款A(yù)I產(chǎn)品，讓我僅憑自然語言，就能把網(wǎng)站做出來。

果然，稍加搜索，小編就發(fā)現(xiàn)了這款A(yù)IGC產(chǎn)品——即時AI，它能夠讓我們通過自然語言描述就生成網(wǎng)頁設(shè)計稿，還能一鍵將其發(fā)布為在線網(wǎng)頁。

話不多說，先上結(jié)果:

別看設(shè)計如此豐富，但過程其實非常簡單。

首先，在即時AI官網(wǎng)輸入咒語，等待1分鐘，就得到如下四張設(shè)計稿:

選擇其中一張設(shè)計稿，即可一鍵發(fā)布為在線網(wǎng)頁。

但是生成的結(jié)果有一些問題，比如自動生成配圖與網(wǎng)站的內(nèi)容需求并不是很適配。于是我們從開源網(wǎng)站unsplash找來了幾張配圖，在設(shè)計稿中進(jìn)行編輯修改。

令人驚喜的是，我們在設(shè)計稿中所做出的修改，比如替換圖片、修改字體，全都被自動同步至這個已經(jīng)發(fā)布的在線網(wǎng)頁「https://js.design/site/?id=ai_cY7jfKiL7IY」。

整個過程耗時不到10分鐘，包括輸入咒語、生成設(shè)計稿、發(fā)布為網(wǎng)站、替換圖片、重新發(fā)布。

而這款產(chǎn)品的魅力，不在于10分鐘生成一個幾乎接近我們需求的網(wǎng)站，而在于任何一個沒有設(shè)計基礎(chǔ)、沒有代碼基礎(chǔ)的人都可以用10分鐘生成一個網(wǎng)站，帶域名的那種。

即時AI:30s生成可編輯UI設(shè)計稿，一鍵發(fā)布為在線網(wǎng)頁

5月4日，即時AI全面開放。根據(jù)官方消息，這款產(chǎn)品收到了超10w的內(nèi)測申請，并在內(nèi)測期間生成上百萬的生成結(jié)果。這為后續(xù)產(chǎn)品開放后的迭代，打下了很好的基礎(chǔ)。

5月31日，即時AI產(chǎn)品更新，在生成App端UI設(shè)計稿的基礎(chǔ)上，疊加了web端UI設(shè)計稿生成能力，同時支持一鍵發(fā)布為在線網(wǎng)頁。

這其中用到了兩個能力:AI生UI設(shè)計稿以及將設(shè)計稿一鍵發(fā)布為封裝完畢的網(wǎng)頁組件，而且未來這個能力還會被遷移到App、小程序的生成當(dāng)中。

更新后，我們也簡單評測了一波。

比如，生成一個音樂類產(chǎn)品的官網(wǎng):

上下滑動查看全部

生成一個時尚雜志官網(wǎng):

上下滑動查看全部

生成一個酒店管理的后臺頁面:

從生成結(jié)果來看，基本可以滿足一個網(wǎng)頁的內(nèi)容需求，但是距離成熟、專業(yè)的網(wǎng)頁還有一定差距。但是可以理解，畢竟還是個在學(xué)習(xí)進(jìn)程中的新東西。

與文生圖不太一樣的是，UI設(shè)計稿需要極強(qiáng)的規(guī)范性，同時必須具備可編輯功能，因此文生UI設(shè)計稿的進(jìn)程稍緩于文生圖，同樣主打文生UI的Galileo AI以及Uizard尚處于內(nèi)測當(dāng)中。

UI設(shè)計30年

隨著ChatGPT突如其來的爆火，設(shè)計類工具的AI化，也開始了瘋狂加速。

5月24日，Adobe推出了PS新功能Generative Fill（生成式填充），可以一鍵去除或修改畫面內(nèi)容以及拓展圖像內(nèi)容，相當(dāng)于Stable Diffusion中的Inpainting和Outpainting。

這項新功能目前已經(jīng)在Adobe Firefly中上線，并置入了Photoshop Beta測試版中，用戶可以直在Ps中以非破壞性的方式組合或生成圖像。

緊接著，Google Research在6月又發(fā)布了一項基于Muse模型的新應(yīng)用——StyleDrop。

它可以將生成的圖片束縛在一個很小的范圍內(nèi)進(jìn)行微調(diào)，不會影響到畫面中的其他內(nèi)容。比如更改畫面的顏色、陰影效果、風(fēng)格等等。微調(diào)需要的訓(xùn)練參數(shù)也不到總模型的1%。

今天的AI設(shè)計軟件，已經(jīng)精細(xì)到了這個程度，回想UI設(shè)計最開始的那些年，不免讓人感慨。

時間回到1984年，蘋果推出Macintosh，由史蒂夫·喬布斯親自主持研發(fā)，堪稱計算機(jī)歷史上的一座豐碑，這也使GUI（圖形用戶界面）得以在一種真正的產(chǎn)品中出現(xiàn)。

1987年，由于Macintosh電腦無法顯示帶灰度的黑白圖像，Thomas Knoll自己寫了一個程序——Display，希望解決這個問題。John Knoll后來加入，兄弟二人聯(lián)手打磨這款產(chǎn)品，后來Display更名為Photoshop。

1990年，大小僅有800kb的Photoshop1.0問世，從此開啟了這款軟件制霸圖像編輯領(lǐng)域三十余年的時代。

2007年蘋果CEO喬布斯發(fā)布了iPhone，2009年iPhone3GS發(fā)布，2010年iPhone4問世。

作為第一部配備有視網(wǎng)膜高清屏幕（Retina Display）的手機(jī)，iPhone4的顯示效果可謂是驚為天人——圖片、文字看起來清晰銳利，可媲美印刷品。

iPhone的出現(xiàn)，拉開了移動互聯(lián)網(wǎng)的序幕，也定義了移動互聯(lián)網(wǎng)時代的許多視覺設(shè)計原則。

2008年，荷蘭特溫特大學(xué)計算機(jī)專業(yè)彼得·歐姆弗利被要求設(shè)計一個簡單的繪圖應(yīng)用，DrawIt便由此誕生。

2010年12月發(fā)布了DrawIt的最后一個版本，并將軟件更名為Sketch。自那以后，Sketch聚攏了一批小規(guī)模的忠實擁躉。

2009年5月28日，Google的內(nèi)部孵化并正式上線Google Wave，在Google Wave應(yīng)用中，使用者可以建立一個wave然后添加一些用戶。

每個在使用者wave里面的人都可以使用富文本、小組件、圖片、甚至可以是外部feed，他們可以進(jìn)行回復(fù)也可以直接編輯wave。

盡管該產(chǎn)品后來被關(guān)停，但是圍繞著HTML5所延展出來的技術(shù)、服務(wù)與工具不斷涌出，越來越多的SaaS服務(wù)開始選擇使用瀏覽器這樣的輕量級客戶端交付給用戶，讓復(fù)雜的渲染和計算留給位于云端的服務(wù)器來處理。

UI設(shè)計工具巨頭Figma就在這個節(jié)點誕生。Figma是一款在線協(xié)同設(shè)計軟件，在2016年上線正式版，2017年開始推出付費的套餐。此時在UI/UX設(shè)計領(lǐng)域，Adobe XD、Sketch和Figma的競爭關(guān)系雛形已經(jīng)形成。

在過往的幾年疫情期間，作為一款全平臺可用的在線界面設(shè)計協(xié)作工具，隨著線上協(xié)作需求不斷增大，F(xiàn)igma可將項目隨時保存至云端，其用戶數(shù)量迅速增長，2021年6月，完成2億美元融資后，F(xiàn)igma估值已達(dá)100億美元。

2022年9月15日，Adobe在官網(wǎng)宣布，將以約200億美元收購在線協(xié)作設(shè)計平臺Figma公司，包括一半的現(xiàn)金和一半股票。對于Adobe而言，拿下Figma，在擴(kuò)大自身在云端業(yè)務(wù)的同時，也能消除潛在的最大競爭對手之一。

但技術(shù)的革命總是來得猝不及防。

新一代的設(shè)計工具什么樣?

新的技術(shù)環(huán)境催生新的終端，新的終端催生新的交互邏輯，新的交互邏輯催生新的工具。

而現(xiàn)在，人工智能介入了設(shè)計工具。

從PS開始，設(shè)計工具的發(fā)展趨勢經(jīng)歷了一個從「單一工具功能」到「多元功能」再到「職能分化工具」，最后又讓「工具功能」和「使用場景」融合一體化的過程;但無論這個發(fā)展趨勢是如何地分分合合，它的主旋律一直都是圍繞著提高工具的功能和性能，為了幫助設(shè)計更好地解決更多的問題而存在的。

AI下的設(shè)計工具，有什么不一樣?

「人工智能介入到設(shè)計工具之后，它又進(jìn)一步加速了工具使用場景融合、工具一體化的趨勢，也進(jìn)一步大大提升了工具的功能和性能，設(shè)計工具由主要解決用戶在使用過程中的需求，轉(zhuǎn)變?yōu)橐嫌脩糇罱K的結(jié)果預(yù)期。

從前的設(shè)計工具是分布操作，每一步都需要用戶參與，用戶也知道結(jié)果的生成邏輯。但是現(xiàn)在變成了一步到位、實現(xiàn)過程變成『黑盒』」，即時設(shè)計聯(lián)合創(chuàng)始人周凝表示。

當(dāng)我們檢索AI設(shè)計類工具，已經(jīng)不僅限制于文字生成圖像，圖生圖、文生UI設(shè)計、文生3D、文生視頻….

工作流將會發(fā)生怎樣的變化?

我們通過新的工具窺探未來的工作方式和工作結(jié)果。

一個互聯(lián)網(wǎng)產(chǎn)品誕生的正常產(chǎn)研流程是:設(shè)計搞定版之后，把這個設(shè)計稿交給前端的工程師，由前端的工程師把設(shè)計語言全部還原成一個程序語言，再在這個基礎(chǔ)上進(jìn)行功能的開發(fā)。

也就是「產(chǎn)品-設(shè)計-前端-后端」。

而現(xiàn)在有了直接把設(shè)計稿轉(zhuǎn)成線上產(chǎn)品的能力之后，設(shè)計師不需要再花時間去和下一環(huán)節(jié)的同學(xué)去對齊，程序員也不再不需要去做語言替換的工作，降低評審、開發(fā)、走查等環(huán)節(jié)的時間成本，提升設(shè)計到開發(fā)的效率。

同時，由于設(shè)計稿中的所有修改都可以自動更新到已發(fā)布的網(wǎng)頁中，這讓程序員只要在第一次上線時做前端處理，后續(xù)無需再介入網(wǎng)頁的維護(hù)修改工作。

即時設(shè)計的戰(zhàn)略負(fù)責(zé)人黎嘉寧在公開演講中表示，「用戶有了UI設(shè)計稿之后要做什么?自然是讓開發(fā)同學(xué)來在代碼層面實現(xiàn)設(shè)計語言的轉(zhuǎn)換。于是我們又結(jié)合即時設(shè)計Design to code的能力，實現(xiàn)設(shè)計稿到前端網(wǎng)頁的自動轉(zhuǎn)換。

我們把這一系列能力組合起來，最終實現(xiàn)了通過一段文本描述，一鍵生成在線網(wǎng)站、一鍵生成小程序的產(chǎn)品。我們不是把單獨能力作為單點給用戶，而是針對場景把這些能力做有機(jī)綜合?！?/p>

管窺設(shè)計工具的演變趨勢

工作邊界融合與設(shè)計能力溢出。

這款產(chǎn)品讓沒有設(shè)計能力的人擁有了設(shè)計能力，讓沒有代碼能力的人擁有了代碼能力，設(shè)計師和前端的工作邊界逐漸融合，每個工種原先被賦予的角色屬性，都在向自己的上下游延展。

隨著AI能力的不斷進(jìn)步，這個工作流程很有可能被縮短為「產(chǎn)品經(jīng)理-設(shè)計師-后端」或「產(chǎn)品經(jīng)理-前端-后端」，更或者，來到產(chǎn)品經(jīng)理的「黃金時代」。

同樣地，設(shè)計工具智能化后，使用工具進(jìn)行設(shè)計不一定再是擁有專業(yè)能力的人群，很可能是關(guān)注AI的極客人群，也有可能AI像互聯(lián)網(wǎng)一樣變得人人可用，樓下的水果店老板、早餐店老板，人人都可以成為內(nèi)容的創(chuàng)作者、界面的設(shè)計師、應(yīng)用的開發(fā)者。

基礎(chǔ)的設(shè)計需求滿足成本降低到忽略不計，設(shè)計供給側(cè)也將迎來爆發(fā)式發(fā)展，過去通過冗長文字釋義的方式或許最終會變演變成「一圖勝千言」的形式。

我們最終需要怎樣的設(shè)計工具?

周凝認(rèn)為:

「當(dāng)人工智能全面介入設(shè)計工具，將設(shè)計工具徹底轉(zhuǎn)變成一個智能設(shè)計工具后，我們原有的設(shè)計方式必將被徹底改變，這也符合生產(chǎn)關(guān)系隨生產(chǎn)力變化而變化的客觀規(guī)律。

那么基于對人工智能生產(chǎn)力的美好期待，假定設(shè)計工具完全自動化，且功能和性能沒有其他任何限制，那么這樣推理的最終結(jié)果就是:所有的過程環(huán)節(jié)和為了過程環(huán)節(jié)服務(wù)的工作流程都將被消滅。工具所有的顯性能力體現(xiàn)，都將會聚焦在需求的輸入端和結(jié)果的輸出端。

在需求的輸入端，既要能夠允許我們大量地多模態(tài)地描述我們的詳細(xì)需求并能夠做到精準(zhǔn)的理解和對細(xì)節(jié)的嚴(yán)格執(zhí)行，又要在我們自己無法清晰描述出我們的準(zhǔn)確需求僅有模糊概念和方向時，能夠心有靈犀地懂我們的言外之意，甚至利用AI自己的知識儲備和智慧能力引導(dǎo)和協(xié)助我們細(xì)化我們的需求，乃至于在更高的思考維度上給予我們超前的認(rèn)知和需求啟發(fā)。

在結(jié)果的輸出端，我們既需要它能夠在短時間內(nèi)給我們大量生成優(yōu)質(zhì)的多模態(tài)方案供給我們進(jìn)行選擇，同時也需要它能夠就已生成的方案接受我們進(jìn)一步的需求進(jìn)行不斷地優(yōu)化迭代，甚至我們肯定會希望，借用AI自身儲備的知識和智慧能力，一步到位給我們最匹配最完美的答案，乃至于在更高的維度和層次上，給予我們突破原有需求審美和認(rèn)知水平的超前方案?！?/p>

蘋果Vision Pro一夜封神，AIGC全球爆紅，新的技術(shù)浪潮涌來，下一個黃金時代是什么樣子，我們無從得知。

但是我們可以知道的是，「一個靜態(tài)的環(huán)境下是缺少新機(jī)會的，新的機(jī)會無一不是在變革中誕生。」

參考資料:

https://js.design/