用AI繪制成套UI設(shè)計(jì)稿！10分鐘搞定3版方案

點(diǎn)擊 ▲ 三分設(shè) 關(guān)注，和 10 萬設(shè)計(jì)師一起成長(zhǎng)

三分設(shè) x 58UXD

正文共：2113 字 22 圖 預(yù)計(jì)閱讀時(shí)間：8 分鐘

AI 的熱度一直居高不下，AI 產(chǎn)出的圖像、文本在經(jīng)過設(shè)計(jì)師、內(nèi)容創(chuàng)作者的完善與修改后，被應(yīng)用在更多的場(chǎng)景中。即使面對(duì)更要求秩序感、更注重業(yè)務(wù)需求與用戶體驗(yàn)的 UI 設(shè)計(jì)，AI 人工智能也能提供越來越多的幫助，讓設(shè)計(jì)師的工作變得更簡(jiǎn)單、更快、更輕松！本文將介紹如何將 AI 技術(shù)應(yīng)用于 UI 設(shè)計(jì)流程中，以及這種結(jié)合對(duì)業(yè)務(wù)和團(tuán)隊(duì)的價(jià)值。

首先要明確想讓 AI 幫助完成 UI 設(shè)計(jì)整個(gè)流程中的哪些環(huán)節(jié)。如 Midjourney 那樣直接產(chǎn)出完成度極高、略微修改就可以使用的圖像不太現(xiàn)實(shí)。我們可以給繪畫作品分類，規(guī)定風(fēng)格、流派、類型，但無法給 UI 設(shè)計(jì)設(shè)定類似的規(guī)范。

從方案到最終成稿交付，環(huán)節(jié)中各個(gè)功能的設(shè)置、按鈕的設(shè)計(jì)、交互的形式、動(dòng)效的安排，都需要結(jié)合業(yè)務(wù)需求、考慮用戶體驗(yàn)，具有極強(qiáng)的不確定性，不同類型產(chǎn)品之間也存在很大的差異。

如果我們嘗試用 Midjourney 等繪圖工具生成，畫出來的東西只能看看布局、框架、情緒板，有時(shí)候還會(huì)畫出一些過于炫酷，實(shí)際上根本沒辦法落地的效果。

所以目標(biāo)是，讓 AI 幫我們完成前中期的頁面結(jié)構(gòu)探索、框架搭建，并提供部分可參考的組件。

這次還是選擇專注做“AI 生成 UI”的「即時(shí) AI」工具，不僅能根據(jù)文字描述生成可編輯的 APP/Web 設(shè)計(jì)稿，還上線了“生成整套 APP/Web 界面”的新功能，妥妥滿足快速出整套設(shè)計(jì)參考的需求。

「即時(shí) AI」官網(wǎng)：https://jsai.cc/ai/create

先簡(jiǎn)單試一下“生成整套頁面”的效果，選生成速度更快的 JS-UIbotics 模型。

輸入描述語：生成一個(gè)出行 APP

等待幾十秒就得到了如下 4 個(gè)頁面：

1. 首頁：金剛位包含了多種出行方式，還展示了天氣情況；
   
   
2. 酒店預(yù)訂：可以根據(jù)入住城市、時(shí)間查找房源，下面還有推薦的酒店；

3. 行程列表：展示了推薦路線、用戶評(píng)價(jià)、熱門旅游目的地
4. 行程詳情：體現(xiàn)推薦路線的基本信息和亮點(diǎn)

簡(jiǎn)單輸入一行字就能讓 AI 根據(jù)“出行 APP”這個(gè)主題生成多個(gè)有關(guān)聯(lián)的頁面，比我自己用組件庫搭建頁面還快得多，又省去了絞盡腦汁思考包含哪些模塊、具體都什么內(nèi)容的時(shí)間。

同樣的關(guān)鍵詞再點(diǎn)幾次【開始創(chuàng)作】，多套參考方案輕松到手。

而且這些都是可二次編輯的設(shè)計(jì)稿源文件，給甲方和領(lǐng)導(dǎo)看過方案、收集到反饋后，還可以在此基礎(chǔ)上繼續(xù)修改完善，減少前期方案探索的時(shí)間精力浪費(fèi)。

用過 AI 繪畫工具的都知道，需求描述的越詳細(xì)，AI 生成的作品越細(xì)節(jié)，使用「即時(shí) AI」這款文字生成 UI 設(shè)計(jì)稿的工具也是一樣。

用即時(shí) AI 生成簡(jiǎn)單方案，完成初期的設(shè)計(jì)溝通并收集到足夠反饋后，節(jié)省下來的時(shí)間可以繼續(xù)細(xì)化描述語，控制 AI 生成每個(gè)單頁的內(nèi)容與結(jié)構(gòu)，提供更貼近目標(biāo)方案、修改成本更低的設(shè)計(jì)初稿。

這次用的是風(fēng)格與內(nèi)容結(jié)構(gòu)更多樣的 JS-Inno 模型，以生成閱讀 APP 為例：

生成一個(gè)閱讀 APP，要求包括登錄頁、首頁、閱讀頁、書籍詳情頁、我的頁，共 5 個(gè)頁面，藍(lán)色主題：

1. 登錄頁中登錄方式包括手機(jī)號(hào)登錄、微信登錄
2. 首頁中包含推薦書籍、熱門書籍等
3. 閱讀頁中展示閱讀器及閱讀器操作按鈕
4. 書籍詳情頁中示例書籍為余華的《第七天》
5. 我的頁中展示閱讀歷史、訂單、閱讀數(shù)據(jù)統(tǒng)計(jì)等內(nèi)容

雖然 JS-Inno 這個(gè)模型繪制的設(shè)計(jì)稿樣式比較簡(jiǎn)單，但內(nèi)容足夠豐富，且可控性非常強(qiáng)。按照這個(gè)邏輯又試了幾套關(guān)鍵詞，頁面數(shù)量、頁面主題、頁面內(nèi)具體包含什么內(nèi)容，都是可控的。

簡(jiǎn)單來說，只要以結(jié)構(gòu)化的方式、足夠詳細(xì)地描述你的需求，即時(shí) AI 就能一步步做出你想要的設(shè)計(jì)參考。

如即時(shí) AI 這類可以生成整套邏輯相關(guān) UI 頁面的 AI 設(shè)計(jì)工具，對(duì)設(shè)計(jì)團(tuán)隊(duì)也有著巨大的幫助。

創(chuàng)意參考：AI 設(shè)計(jì)工具能夠利用智能算法快速生成多樣化的頁面結(jié)構(gòu)與布局，激發(fā)設(shè)計(jì)師的靈感，拓展創(chuàng)意的可能性。

輔助溝通：AI 能在項(xiàng)目初期提供多樣參考，幫助團(tuán)隊(duì)成員高效溝通、確定方向。

效率提升：即時(shí) AI 提供的不僅僅是一個(gè)參考、一個(gè)示例、一個(gè)只能看看而已的圖片，它生成的是多張邏輯相關(guān)、可編輯、分層結(jié)構(gòu)清晰、主題色彩可控的頁面，使用 JS-UIbotics 模型創(chuàng)作的頁面還包含了部分原型設(shè)計(jì)?？偟膩碚f，是一個(gè)完整度很高的參考方案。

總而言之，與 Midjourney 等工具直接提供圖像素材不同，AI 在 UI 設(shè)計(jì)領(lǐng)域的應(yīng)用更多是對(duì)流程的優(yōu)化、對(duì)現(xiàn)有團(tuán)隊(duì)協(xié)作效率的提升。讓 UI 和 UX 設(shè)計(jì)師們可以將更多精力放在研究用戶和研究業(yè)務(wù)上，去提升我們解決問題、給出合理方案的能力，這些才是最重要也最核心的。

「即時(shí) AI」官網(wǎng)：https://jsai.cc/ai/create

- END -

我們相信設(shè)計(jì)師和創(chuàng)造者一樣是思想家

一個(gè)開放的共創(chuàng)學(xué)習(xí)型產(chǎn)品設(shè)計(jì)社區(qū)

助力全球 1 億設(shè)計(jì)師成長(zhǎng)

歡迎添加 ??  星標(biāo) · 獲取每天推薦知識(shí)分享

每天閱讀充電 · 養(yǎng)成終身學(xué)習(xí)

「資訊」「文章」「活動(dòng)」「招聘」「課程」

創(chuàng)新 / 成長(zhǎng) / 共創(chuàng) / 公益

所有平臺(tái)贊助

將用于社區(qū)建設(shè)和反饋社區(qū)粉絲

期待與更多優(yōu)秀產(chǎn)品設(shè)計(jì)師一起成長(zhǎng)

??????

掃碼進(jìn)群

全年助力設(shè)友建立設(shè)計(jì)知識(shí)體系

「體系化知識(shí)研討」

「書籍共讀」「職場(chǎng)討論」「活動(dòng)交流」

分享設(shè)計(jì)/管理/職場(chǎng)/心得，定期直播，答疑解惑

免費(fèi)加入 · 特約邀請(qǐng)

↓↓↓點(diǎn)開『閱讀原文』，關(guān)注星球資料庫