晨星技術(shù)說

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

譚同學(xué)

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

-【晨星小課堂】講師

通過簡單、清晰的語言描述就能夠用幾十秒自動生成一組可編輯的UI界面，AIGC對于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)用。

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

即時AI

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

01

兩種算法模型，各有所長

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

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

- JS-INNO模型

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

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

- JS-UIbotics模型

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

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

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

02

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

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

- 隨機(jī)輸入

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

- 自定義文字輸入

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

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

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

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

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

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

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

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

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

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

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

UIzard

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

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

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

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

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

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

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

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

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

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

⑤ 它也可以和即時AI一樣，通過簡單文本描述的方式自動生成用戶界面

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

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

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

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

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

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

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

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

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

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

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

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

歡迎提問

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

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