晨星技術(shù)說(shuō)

晨星技術(shù)小課堂第二季

譚同學(xué)

- 聯(lián)想晨星用戶(hù)體驗(yàn)設(shè)計(jì)師

-【晨星小課堂】講師

通過(guò)簡(jiǎn)單、清晰的語(yǔ)言描述就能夠用幾十秒自動(dòng)生成一組可編輯的UI界面，AIGC對(duì)于UI設(shè)計(jì)師而言已經(jīng)逐步發(fā)展成了幫助我們高效地進(jìn)行設(shè)計(jì)的“好幫手”。

之前AIGC所生成的內(nèi)容，更多的集中在文字、圖片、視頻、音頻等領(lǐng)域，而現(xiàn)在AI已經(jīng)“進(jìn)化”到能夠快速生成UI設(shè)計(jì)稿了，這是AI和具體職業(yè)結(jié)合地更加垂直的應(yīng)用。

下面，我們將對(duì)比兩款A(yù)IGC設(shè)計(jì)工具，來(lái)看看“AI設(shè)計(jì)師”的能力邊界。

即時(shí)AI

先說(shuō)說(shuō)一款國(guó)內(nèi)的產(chǎn)品——即時(shí)AI。它是一款適合新手的國(guó)產(chǎn)云端設(shè)計(jì)工具，與國(guó)外的一些云端設(shè)計(jì)軟件相比，它不需要開(kāi)VPN，且頁(yè)面完全使用中文。

01

兩種算法模型，各有所長(zhǎng)

即時(shí)AI目前有兩大生成模型，JS-INNO和JS-UIbotics，對(duì)應(yīng)不同設(shè)計(jì)需求，在生成AI前，需要選擇對(duì)應(yīng)的生成模型。

兩者的側(cè)重有所不同，可以說(shuō)各有所長(zhǎng)，適合不同的需求。

- JS-INNO模型

在簡(jiǎn)單的文字描述下，它能夠生成的AI內(nèi)容豐富、風(fēng)格多樣，但是缺點(diǎn)在于排版隨意，缺乏細(xì)節(jié)，可用性不高，只能當(dāng)做提供設(shè)計(jì)靈感與思路時(shí)使用。

↑ 這是選擇JS-INNO模型生成的界面

- JS-UIbotics模型

JS-UIbotics模型生成的設(shè)計(jì)頁(yè)面擁有更規(guī)范的布局、組件、圖標(biāo)、字體、結(jié)構(gòu)功能。梳理清晰、形成初始UI稿，再通過(guò)簡(jiǎn)單的二次編輯，可快速組合頁(yè)面元素，產(chǎn)出可用頁(yè)面。

↑ 這是選擇JS-UIBOTICS模型生成的界面

嘗試了兩種算法模型后，我們發(fā)現(xiàn)對(duì)于想要用AI來(lái)輔助UI界面設(shè)計(jì)的情況，更推薦使用JS-UIbotics模型，它所輸出的界面布局更規(guī)范，結(jié)構(gòu)功能更清晰，能夠大致搭建界面框架，節(jié)約后續(xù)設(shè)計(jì)的時(shí)間。

02

以“文”成圖，效果如何？

能夠通過(guò)文本描述自動(dòng)生成界面是目前該軟件的最大特點(diǎn)，與ChatGPT一樣，在使用時(shí)需要掌握一些技巧和方法，文字的描述目前支持隨機(jī)輸入與自定義兩種模式。

- 隨機(jī)輸入

在文字輸入?yún)^(qū)“/”或點(diǎn)擊左下角骰子圖標(biāo)，獲取文字描述靈感。

- 自定義文字輸入

分為兩類(lèi)結(jié)構(gòu)：概括型、明細(xì)型

1）概括型描述結(jié)構(gòu)：主題描述+頁(yè)面類(lèi)型

比如，我們輸入：生成信息科技公司官網(wǎng)APP的首頁(yè)，就會(huì)自動(dòng)生成如下的界面。

2）明細(xì)型描述結(jié)構(gòu)：主題描述+頁(yè)面類(lèi)型+布局+模塊內(nèi)容，同樣是科技公司APP的首頁(yè)，我們可以選擇如下的表述方式。

如：生成信息科技公司官網(wǎng)APP的首頁(yè)，首頁(yè)內(nèi)容以介紹公司為主，包括技術(shù)、產(chǎn)品、解決方案、領(lǐng)域、事跡、合作客戶(hù)等模塊。

對(duì)比上述兩種輸入方式，我們可以發(fā)現(xiàn)明細(xì)型所輸出的內(nèi)容更符合我們的需求。對(duì)于AI來(lái)說(shuō)，提示詞是與他們溝通的橋梁，我們要盡可能地用清晰、精準(zhǔn)、言簡(jiǎn)意賅的方式描述需求，才能讓AI快速且準(zhǔn)確地識(shí)別我們的需求。

當(dāng)然，目前在當(dāng)前AI功能的限制下，畫(huà)板大小、頁(yè)面風(fēng)格、插圖、圖標(biāo)等內(nèi)容暫不支持自定義。所以，我們要注意：

① 文本輸入時(shí)，需要編寫(xiě)重點(diǎn)，盡量不要描述功能；

②描述模塊、內(nèi)容，字?jǐn)?shù)過(guò)多時(shí)模型會(huì)忽略多余的內(nèi)容，對(duì)于否定句，模型理解能力價(jià)差，描述時(shí)需要排除“沒(méi)有”“不要”等詞語(yǔ)使用，文字描述越簡(jiǎn)單清晰，模型理解就更好。

下面是官方說(shuō)明中我認(rèn)為最重要的幾張?zhí)崾緢D，希望給大家參考：

綜合使用下來(lái)，我們的評(píng)價(jià)是：雖然它投入使用不久，但它的表現(xiàn)已接近初級(jí)UI設(shè)計(jì)師的水平，依舊有許多進(jìn)步的空間，且對(duì)于手稿生成原型、圖生圖的功能尚未開(kāi)放，但相信等待到所有功能上線后，它能夠有效地減輕設(shè)計(jì)師的工作量。

UIzard

UIzard是一款由韓國(guó)開(kāi)發(fā)的在線無(wú)代碼AI軟件開(kāi)發(fā)工具。

與上一款軟件相比，它可以自動(dòng)將用戶(hù)的手繪草圖轉(zhuǎn)換成對(duì)應(yīng)的UI設(shè)計(jì)元素，并提供相應(yīng)的交互效果和動(dòng)畫(huà)效果。支持屏幕截圖轉(zhuǎn)換為可編輯的設(shè)計(jì)等。

① 通過(guò)掃描的方式，將手繪的原型草圖自動(dòng)轉(zhuǎn)化為UI

通過(guò)這種方式，我們可以更快地創(chuàng)建和修改UI，節(jié)省時(shí)間和成本、提高設(shè)計(jì)效率。

② 同時(shí)，它也支持將UI自動(dòng)轉(zhuǎn)化成原型草圖

可快速生成可編輯交互原型，更方便對(duì)界面進(jìn)行優(yōu)化調(diào)整，提高交互設(shè)計(jì)效率、易于迭代和修改。

③ 屏幕截圖也可以自動(dòng)轉(zhuǎn)換為可編輯的設(shè)計(jì)

設(shè)計(jì)師可以快速獲得所需的素材并對(duì)其進(jìn)行編輯和修改，減少繁瑣的畫(huà)圖時(shí)間，提高工作效率。

④ 使用AI，一鍵替換設(shè)計(jì)風(fēng)格

在短時(shí)間內(nèi)獲得不同類(lèi)型的設(shè)計(jì)方案，避免重新設(shè)計(jì)風(fēng)格，節(jié)省時(shí)間和精力。給設(shè)計(jì)師提供更多的思路，客戶(hù)也可以更快速地確定自己想要的風(fēng)格。

⑤ 它也可以和即時(shí)AI一樣，通過(guò)簡(jiǎn)單文本描述的方式自動(dòng)生成用戶(hù)界面

設(shè)計(jì)師可快速將設(shè)計(jì)意圖傳達(dá)給相關(guān)人員。節(jié)省大量時(shí)間來(lái)創(chuàng)建設(shè)計(jì)原型。為設(shè)計(jì)者提供靈感和多樣化的設(shè)計(jì)思路。

UIzard的功能已經(jīng)十分完備，但它仍然存在一些不足之處，比如：

1.對(duì)于復(fù)雜的手繪草圖或者非標(biāo)準(zhǔn)的設(shè)計(jì)元素，UIzard可能無(wú)法準(zhǔn)確識(shí)別和轉(zhuǎn)換，并需要進(jìn)行后續(xù)的手動(dòng)調(diào)整；

2. 在UIzard中，一些高級(jí)功能和調(diào)整選項(xiàng)需要用戶(hù)具備一定的UI設(shè)計(jì)知識(shí)和經(jīng)驗(yàn)才能靈活運(yùn)用，對(duì)于新手用戶(hù)來(lái)說(shuō)可能需要一些時(shí)間和實(shí)踐。

3. UIzard目前是基于云端平臺(tái)的，需要穩(wěn)定的網(wǎng)絡(luò)連接和較快的數(shù)據(jù)傳輸速度。同時(shí)，如果上傳較多的手繪草圖會(huì)占用較大的存儲(chǔ)空間。

總的來(lái)說(shuō)，UIzard是一款非常實(shí)用的UI設(shè)計(jì)工具，而且通過(guò)官方提供的指導(dǎo)視頻能夠快速上手，對(duì)于擁有一定UI設(shè)計(jì)經(jīng)驗(yàn)的設(shè)計(jì)師而言，它是一款能夠幫助我們快速提高工作效率的平臺(tái)工具。

對(duì)于一名UI設(shè)計(jì)師而言，我試用了多款A(yù)I工具來(lái)輔助設(shè)計(jì)，這些工具大多能夠完成一些初級(jí)工作，甚至可以在短時(shí)間內(nèi)生成大量的設(shè)計(jì)稿，極大地提高了設(shè)計(jì)效率。

但與此同時(shí)，我也深切地感受到了UI設(shè)計(jì)的難點(diǎn)不在于生成界面，而是在于頁(yè)面之間的跳轉(zhuǎn)、元素及上下文之間的邏輯關(guān)系，如何為客戶(hù)提供更好地使用體驗(yàn)。

作為面向UI設(shè)計(jì)領(lǐng)域的AI設(shè)計(jì)工具還有很多技術(shù)難關(guān)需要被攻克，比如用戶(hù)研究與體驗(yàn)設(shè)計(jì)、創(chuàng)意設(shè)計(jì)及細(xì)節(jié)處理方面，這些問(wèn)題需要設(shè)計(jì)師針對(duì)性的進(jìn)行補(bǔ)充，以實(shí)現(xiàn)更好的設(shè)計(jì)效果。

在未來(lái)，AI需要更懂用戶(hù)思維，更具備創(chuàng)新能力，由此，AI在未來(lái)的發(fā)展趨勢(shì)將會(huì)更加智能化和自動(dòng)化。

而對(duì)于產(chǎn)品經(jīng)理、UI初級(jí)入門(mén)設(shè)計(jì)師而言，用AI設(shè)計(jì)工具做原型，或者創(chuàng)作一個(gè)參考的基礎(chǔ)頁(yè)面為后面的排版設(shè)計(jì)起引導(dǎo)作用等還是能夠帶來(lái)極大地便利性的。

（* 部分圖片來(lái)自網(wǎng)絡(luò)，侵刪）

歡迎提問(wèn)

親，看了上述的內(nèi)容是否你是否對(duì)AIGC對(duì)于UI設(shè)計(jì)工作的價(jià)值有了大致的理解呢？

還有什么關(guān)于本文的問(wèn)題,歡迎在評(píng)論區(qū)留下您的問(wèn)題~