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

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

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

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

(資料圖片)

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

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

別看設(shè)計(jì)如此豐富，但過(guò)程其實(shí)非常簡(jiǎn)單。

首先，在即時(shí)AI官網(wǎng)輸入咒語(yǔ)，等待1分鐘，就得到如下四張?jiān)O(shè)計(jì)稿:

選擇其中一張?jiān)O(shè)計(jì)稿，即可一鍵發(fā)布為在線網(wǎng)頁(yè)。

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

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

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

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

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

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

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

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

更新后，我們也簡(jiǎn)單評(píng)測(cè)了一波。

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

上下滑動(dòng)查看全部

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

上下滑動(dòng)查看全部

生成一個(gè)酒店管理的后臺(tái)頁(yè)面:

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

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

UI設(shè)計(jì)30年

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

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

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

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

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

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

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

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

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

2007年蘋(píng)果CEO喬布斯eoRxgWniA發(fā)布了iPhone，2009年iPhone3GS發(fā)布，20js10年iPhone4問(wèn)世。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們把這一系列能力組合起來(lái)，最終實(shí)現(xiàn)了通過(guò)一段文本描述，一鍵生成在線網(wǎng)站、一鍵生成小程序的產(chǎn)品。我們不是把單獨(dú)能力作為單點(diǎn)給用戶(hù)，而是針對(duì)場(chǎng)景把這些能力做有機(jī)綜合。」

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

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

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

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

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

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

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

周凝認(rèn)為:

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

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

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

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

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

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

參考資料:

https://js.design/

標(biāo)簽：