Midjourney、Dalle-2 和 Stable Diffusion 等文本到圖像 AI 工具可以從純文本生成圖像?，F(xiàn)在互聯(lián)網(wǎng)上充斥著人工智能生成的圖像，但問題是，“文本轉(zhuǎn)圖像工具可以用于 UI 設(shè)計(jì)嗎？”

在本文中，我們將了解 AI 工具如何處理常規(guī) UI 任務(wù)，例如創(chuàng)建：

• 用戶界面畫面

• 應(yīng)用圖標(biāo)

• 產(chǎn)品圖片

• 吉祥物

Midjourney 簡介Midjourney 是一種在線文本轉(zhuǎn)圖像工具。要使用 Midjourney，您需要加入 Discord。

完成后，您可以加入前綴為“newbies-”的任何頻道，并通過鍵入開始生成圖像

用戶界面畫面

我們在使用 AI 工具時(shí)最需要做的就是編寫清晰的提示。提示是您提交給 AI 工具的文本字符串，以便它可以為您生成圖像。提示應(yīng)清楚地指定您要查看的內(nèi)容。

編寫提示時(shí)，請考慮如何向真實(shí)的人描述您的設(shè)計(jì)并寫下準(zhǔn)確的句子。將這句話變成標(biāo)記（用逗號分隔的短短語）。

例如，在送餐應(yīng)用程序的上下文中，標(biāo)記化提示可能是：

/imagine high-quality UI design, food delivery mobile app, trending on Dribbble, Behance

默認(rèn)情況下，Midjourney 會(huì)生成四個(gè)選項(xiàng)供您選擇。您可以使用命令 U[number] 升級選項(xiàng)。讓我們看看第一個(gè)設(shè)計(jì)的升級版會(huì)是什么樣子。

如果將放大版本與之前的版本進(jìn)行比較，您可能會(huì)注意到 Midjourney 不僅增加了圖像的大小和質(zhì)量，而且還略微修改了布局。例如，升級版在屏幕左上角沒有紅色按鈕。

您可能會(huì)注意到該工具生成的圖像中存在兩個(gè)重大問題：亂碼文本和損壞的食物預(yù)覽圖像。不幸的是，這些問題不僅與 UI 屏幕相關(guān)，而且與 Midjourney 生成的多種圖像相關(guān)。

我們的第一次拍攝并不完美，所以您可能想知道如何修改我們的提示以獲得更好的結(jié)果。值得一提的是，編寫提示沒有最佳策略。您需要嘗試使用不同的令牌來找到最佳解決方案。這就是為什么在你想出一個(gè)像樣的輸出之前你應(yīng)該至少嘗試幾次。

讓我們修改我們的提示，看看該工具將如何對其做出反應(yīng)。這次我們會(huì)提到“Figma”，因?yàn)槲覀兛赡芟胧褂迷O(shè)計(jì)工具中的資產(chǎn)。

/imagine food delivery app, user interface, Figma, Behance, HQ, 4K, clean UI

讓我們看看第一個(gè)設(shè)計(jì)的升級版會(huì)是什么樣子。

這個(gè)版本看起來更像是我們可以在設(shè)計(jì)中使用的東西。布局具有清晰的元素視覺層次結(jié)構(gòu)。

讓我們使用 Midjourney 進(jìn)行另一種 UI 設(shè)計(jì)。這次我們將刪除標(biāo)記“Dribbble”和“Behance”，只留下“Figma”，但還添加了一個(gè)參數(shù)“—q 2”以提高圖像質(zhì)量。

/imagine [what you want to generate] -- q <number>

這是我們的提示

/imagine Food delivery app, mobile app, user interface, Figma, HQ, 4K, clean UI -- q 2

第三種選擇看起來很有希望。讓我們放大它以查看更多細(xì)節(jié)。

您可以看到，即使經(jīng)過第三次嘗試，Midjourney 生成的結(jié)果也無法在沒有人類設(shè)計(jì)師改進(jìn)的情況下使用。然而，這種原始輸出在設(shè)計(jì)過程的早期階段可能非常有用，因?yàn)樗梢蕴峁┮曈X靈感。例如，創(chuàng)建 AI 生成圖像的情緒板并將其用作視覺設(shè)計(jì)師創(chuàng)建適當(dāng)視覺語言的參考相對容易。

同樣重要的是，我們使用了非常通用的 UI 設(shè)計(jì)提示。如果我們想看到一個(gè)特定的屏幕（比如餐廳搜索頁面），我們應(yīng)該在提示中明確指定它作為令牌，以便系統(tǒng)可以為我們提供更相關(guān)的結(jié)果。

意象

圖像是產(chǎn)品各個(gè)部分中使用的照片和插圖。圖像是用戶體驗(yàn)不可或缺的一部分，因?yàn)樗蛴脩魝鬟_(dá)基本信息并設(shè)定正確的心情。在產(chǎn)品設(shè)計(jì)過程中找到合適的圖像可能具有挑戰(zhàn)性，所以讓我們看看 Midjourney 是否可以幫助我們解決這個(gè)問題。

應(yīng)用程序圖標(biāo)

應(yīng)用程序圖標(biāo)是一個(gè)簡單但非常強(qiáng)大的元素，因?yàn)樗鼈鬟_(dá)了應(yīng)用程序的全部內(nèi)容，并為用戶創(chuàng)造了第一印象。甚至在用戶開始使用產(chǎn)品之前，圖標(biāo)就是他們首先看到的，其工藝水平直接影響用戶對產(chǎn)品的看法。

由于我們正在設(shè)計(jì)移動(dòng)應(yīng)用程序，因此我們需要明確指定令牌“iOS 應(yīng)用程序”，并提及我們希望看到高質(zhì)量的視覺資產(chǎn)（令牌“高分辨率”和“高質(zhì)量”）。因?yàn)槲覀兊膽?yīng)用程序是關(guān)于送餐的，所以我們可能想提及一種特定類型的食物（“漢堡”）。

/imagine icon for iOS app in high resolution, burger, high quality, HQ -- q2

如您所見，Midjourney 生成了一組超逼真的圖標(biāo)。讓我們升級第二個(gè)選項(xiàng)。

Midjourney 用于圖標(biāo)的風(fēng)格很棒，但它可能不適用于實(shí)際項(xiàng)目，因?yàn)樵S多設(shè)計(jì)師更喜歡使用極簡主義圖標(biāo)。讓我們使用稍微不同的提示再試一次。我們需要提及“極簡主義”和“扁平化設(shè)計(jì)”等標(biāo)記，以向 AI 發(fā)出我們希望看到簡單圖標(biāo)的信號。

/imagine icon for iOS app in high resolution, burger, high quality, minimalism, flat design -- q2

現(xiàn)在輸出看起來像是我們可以在真實(shí)項(xiàng)目中使用的東西。讓我們升級第一個(gè)選項(xiàng)。

產(chǎn)品圖片

產(chǎn)品圖片是我們將在產(chǎn)品頁面上顯示的圖片。由于我們設(shè)計(jì)了一個(gè)食品訂購應(yīng)用程序，因此我們的圖像將是食品的照片或插圖。讓我們讓 Midjourney 為我們生成圖像：

/imagine burger, high quality picture, high resolution, HQ, 4K -- q 2

Midjourney 生成了實(shí)體圖像，但它們有一個(gè)主要缺點(diǎn)——它們被放置在黑暗的背景上，這可能是一個(gè)問題，因?yàn)閺谋尘爸刑崛ο笮枰~外的工作。但我們可以使用一個(gè)簡單的技巧——讓 Midjourney 使用透明或白色背景：

/imagine burger on a transparent background, high quality,

high resolution, 4K -- q2

第一張圖片看起來很棒；讓我們升級它。

現(xiàn)在，我們需要做的就是從這張圖片中刪除背景。為此，我們可以使用像 Remove.bg 這樣的在線服務(wù)。將圖像上傳到 removeb.bg 并下載即用型視覺資產(chǎn)。

吉祥物

吉祥物是用于代表企業(yè)的圖形對象。精心設(shè)計(jì)的吉祥物可以幫助人們記住品牌并傳達(dá)某種情緒。讓我們讓 Midjourney 為一家提及特定風(fēng)格（日語）的食品配送公司生成吉祥物圖像。

/想象一個(gè)簡單的日式食品配送公司吉祥物送餐公司，日式

Midjourney 生成了一些不錯(cuò)的吉祥物示例。但是只有一個(gè)例子可以用最少的修改（第四種選擇）。

Midjourney 能否取代 UI 設(shè)計(jì)師？

不，至少現(xiàn)在不是。工具生成的輸出非常粗糙，通常需要設(shè)計(jì)人員進(jìn)行細(xì)化。Midjourney 也非常依賴提示（它提供的輸出質(zhì)量可能在很大程度上取決于您提供的提示）。

這是否意味著該工具在設(shè)計(jì)師的工具包中沒有位置？不會(huì)。該工具在產(chǎn)品設(shè)計(jì)過程的早期階段可能會(huì)有所幫助，例如構(gòu)思和視覺探索。中途對于情緒板特別有用。它可以幫助團(tuán)隊(duì)在確定一種特定風(fēng)格之前比較多種視覺風(fēng)格。