AIGC繪圖工具在UI界面設(shè)計中的應(yīng)用探析
——以Midjourney為例

王蕾

（上海海洋大學(xué)，上海 201300)

0 引言

隨著技術(shù)的不斷進步，人工智能在設(shè)計領(lǐng)域的應(yīng)用越來越廣泛和深入。在UI界面設(shè)計過程中，人工智能也扮演了重要的角色，幫助設(shè)計師創(chuàng)建和編輯圖形元素，使得UI界面更加美觀、易用和功能完善。近年來人工智能生成內(nèi)容技術(shù)的崛起，AIGC 繪圖工具受到了行業(yè)的廣泛關(guān)注。目前，業(yè)內(nèi)普遍認為AIGC 已經(jīng)接近商業(yè)應(yīng)用水平，可以在文字、圖片、視頻、代碼和音樂等領(lǐng)域輸出高質(zhì)量的內(nèi)容[1]。AIGC 的內(nèi)容藍海正在從輔助協(xié)作和降本提效向智能創(chuàng)作和增值創(chuàng)造擴散，為人工智能邏輯下的內(nèi)容生態(tài)帶來了全新的創(chuàng)作思路[2]。因此，本文將探討AIGC 繪圖工具在UI界面設(shè)計中的應(yīng)用，以期為UI界面設(shè)計提效。

1 AIGC概念及AIGC繪圖工具簡介

人工智能在最近幾年發(fā)展迅速，人工智能逐漸從內(nèi)容學(xué)習(xí)、內(nèi)容理解走向了內(nèi)容生成階段。人工智能生成內(nèi)容(AI Generated Content，下文簡稱AIGC)迅速發(fā)展，AIGC 技術(shù)成為了人工智能發(fā)展的一個重要分支領(lǐng)域[3]。AIGC 的內(nèi)涵是人工智能在計算機生成內(nèi)容的深入發(fā)展階段中，按照預(yù)設(shè)程序進行數(shù)據(jù)收集、整理和分析，生成文學(xué)、藝術(shù)、新聞等多個領(lǐng)域的內(nèi)容[4]。AIGC 通過機器翻譯、文檔自動摘要、智能文本生成、自動問答系統(tǒng)、文檔分類檢索以及圖像識別等技術(shù)自動生成所需內(nèi)容[5]，因此其應(yīng)用廣泛，比如自動聊天回復(fù)、翻譯、文章續(xù)寫、繪圖、視頻合成等，使用AIGC技術(shù)進行內(nèi)容創(chuàng)作受到了各領(lǐng)域的廣泛關(guān)注。

繪圖是AIGC技術(shù)的一個重要的應(yīng)用領(lǐng)域。AIGC繪圖結(jié)合計算機圖形學(xué)和人工智能技術(shù)，實現(xiàn)多種圖形任務(wù)，如圖像生成、圖像處理、模型訓(xùn)練等。本文使用的AIGC繪圖工具，是指將輸入語句轉(zhuǎn)換為圖像的工具，這類工具也被稱為人工智能圖像生成工具(AI Image Generator)。目前的AIGC繪圖工具主要是使用文本到圖像的模型生成，通過輸入一段指令(Prompt) ，AIGC繪圖工具根據(jù)指令能夠輸出多張圖片。

目前，主要的AIGC 繪圖工具是DALL-E、Midjourney 和Stable Diffusion，它們各有不同的特點和用途。DALL-E是基于OpenAI開發(fā)的，可以根據(jù)自然語言輸入生成圖像。DALL-E的最大特點是可以生成非常真實的圖像，并且支持多種不同的場景和風(fēng)格，例如生成動物、物品、場景等。Midjourney是基于GPT模型和Discord 社區(qū)開發(fā)的，可以生成各種藝術(shù)作品，例如畫作、音樂、動畫等。Midjourney最大的特點是可以根據(jù)用戶輸入的關(guān)鍵詞或者主題生成具有藝術(shù)性的作品，這些作品可以用于商業(yè)用途或者個人娛樂。使用Midjourney 需要一定的藝術(shù)背景和創(chuàng)意思維。Stable Diffusion 使用了最新的深度學(xué)習(xí)技術(shù)，可以生成非常逼真的圖像和視頻，最大的特點是可以根據(jù)輸入的參數(shù)生成高質(zhì)量的圖像和視頻。使用Stable Diffusion需要一定的技術(shù)背景和計算機知識。設(shè)計人員可以基于具體需求和背景來選擇不同的AIGC繪圖工具。由于本文希望通過AIGC 繪圖工具提升UI 界面設(shè)計創(chuàng)意，且使用者多為設(shè)計人員和創(chuàng)意工作者，因此本文選用Midjourney（下文簡稱MJ)展開具體的應(yīng)用分析。

2 UI界面設(shè)計現(xiàn)狀分析

在UI 界面設(shè)計的發(fā)展過程中也有人工智能發(fā)展的縮影：設(shè)計軟件也隨著版本迭代升級，提供一些插件和程序，如摳像、一鍵換背景、智能填充、自動排版等智能應(yīng)用功能。在設(shè)計軟件早期發(fā)展階段，摳像、制作圖形背景、采集圖形素材和手動對齊排版都需要耗費設(shè)計人員巨大時間成本和學(xué)習(xí)成本。目前所使用的設(shè)計軟件較之早期階段，從技術(shù)上已提升了設(shè)計人員的操作效率。但由于行業(yè)內(nèi)卷以及技術(shù)要求提升，對于設(shè)計效率又有了更高的要求。

另一方面，隨著技術(shù)的進步、應(yīng)用場景的拓展與用戶的審美趣味的提升，對于UI界面設(shè)計也提出了更高的要求。設(shè)計人員需要掌握更多設(shè)計軟件來實現(xiàn)綜合的設(shè)計效果，例如界面布局(Sketh、XD)，圖形圖像制作(PS、AI、SAI、Procreate) ，3D 渲染(C4D、Blender)。此外，技法易學(xué)，創(chuàng)意難新，設(shè)計人員需要在不斷提升軟件技法的同時尋求創(chuàng)意的突破。

提升效率和創(chuàng)意突破是UI 界面設(shè)計實際應(yīng)用中關(guān)注的重點和難點，設(shè)計師和從業(yè)人員也著力在這兩方面尋求突破。因此本文認為，可借助AIGC 繪圖工具從文本到圖像、自動繪圖、自動渲染等功能來提高設(shè)計人員工作效率和提升創(chuàng)意趣味。

3 使用AIGC繪圖工具輔助UI界面設(shè)計

3.1 AIGC繪圖工具指令

不同的AIGC 工具由于所使用的模型不同，指令(Prompt)的形式也不相同，本文主要介紹MJ 的指令。首先，使用MJ需要調(diào)用/imagine 的命令，在/imagine 命令后輸入標準指令來生成圖片。在AIGC聊天工具中可以理解人類的遣詞造句，但MJ則需要指向性明確、明晰的詞句?；局噶钍怯梢欢斡⑽奈淖种噶?，由想法和標記(Tag)構(gòu)成；復(fù)雜指令是在基本指令基礎(chǔ)上增加圖像指令和參數(shù)，需按照圖像指令、文字指令、參數(shù)的順序輸入指令。

表1 指令構(gòu)成

文字指令：要生成圖像的文本描述。文字指令可以非常簡單。單個單詞（甚至一個表情符號）會產(chǎn)生一個圖像。非常短的指令將在很大程度上依賴于MJ的默認樣式，因此更具描述性的指令更適合能夠生成特別的設(shè)計圖。然而，超長指令并不總是更好的。設(shè)計師需要專注于想要創(chuàng)造的主要概念。同時注意思考細節(jié)的重要性，因為沒有在文字指令中標記的細節(jié)都將被隨機分配。含糊其詞是獲得多樣性的好方法，但可能無法獲得想要的具體細節(jié)。

圖像指令：將圖像URL 添加到提示中，以影響最終結(jié)果的樣式和內(nèi)容。圖像URL 總是位于提示的前面。使用圖像指令，需要首先將圖像添加到提示中，右鍵單擊或長按圖像，然后選擇“復(fù)制圖像地址”以獲取圖像的網(wǎng)址(URL)。地址必須以.png、.gif 或.jpg 等擴展名結(jié)尾。添加圖像地址后，添加任何其他文本和參數(shù)以完成指令。復(fù)雜指令中圖像指令、文字指令、參數(shù)的順序不可變。圖像指令必須和文字指令同時出現(xiàn)才有效。使用復(fù)雜指令時，可通過圖像權(quán)重參數(shù)--iw 來調(diào)整提示的圖像與文本部分的權(quán)重。當沒有指定--iw時，將使用默認值。更高的--iw值意味著圖像指令將對生成圖產(chǎn)生更大的影響。

參數(shù)：更改圖像的生成方式，位于指令的末尾。參數(shù)可以改變縱橫比、模型、放大倍數(shù)等。不同的模型版本的參數(shù)標準和兼容性不同，本文使用的是MJ的V5版本。

3.2 AIGC輔助UI界面設(shè)計流程

UI界面設(shè)計流程通常為：設(shè)計參考、設(shè)計初稿、設(shè)計修改、設(shè)計定稿。在設(shè)計參考階段，設(shè)計人員需要查找大量參考圖，這個階段需要1～2天。設(shè)計人員基于設(shè)計參考，完成初稿設(shè)計，這一階段需要至少1天。而使用AIGC 繪圖工具直接生成設(shè)計圖，設(shè)計人員再進行細節(jié)優(yōu)化，可以極大縮短概念風(fēng)格、設(shè)計初稿和設(shè)計定稿之間反復(fù)溝通的時間。兩種設(shè)計流程對比如圖1所示：

圖1 一般設(shè)計流程與AIGC輔助設(shè)計流程

在UI設(shè)計稿初期，設(shè)計團隊拿到的需求分析和任務(wù)書只是停留在紙面上的文字和數(shù)據(jù)，不夠直觀。此時設(shè)計人員通常需要出一些測試性的過程稿來做一個直觀的評估，也就是先做幾版設(shè)計稿，先有個大致參考再細化。如果按照一般設(shè)計流程需要設(shè)計人員從頭設(shè)計、選風(fēng)格、找參考、做布局，占據(jù)大量時間。所以這個階段的工作可以交給人工智能來做。在這一階段生成的所有過程稿都是用來給設(shè)計人員做參考的，不是真正意義的方案成果。但是在這一階段，設(shè)計人員能在短時間內(nèi)獲得的基礎(chǔ)信息越多，最終設(shè)計出來的成果質(zhì)量也就越高。此外，對于缺乏經(jīng)驗的設(shè)計人員而言，這種設(shè)計方法提高了獲取設(shè)計經(jīng)驗的速度。

3.3 AIGC輔助UI界面設(shè)計實例

3.3.1 界面效果圖設(shè)計

使用AIGC 繪圖工具最重要的是編寫清晰的指令，指令能夠表達設(shè)計稿的內(nèi)容。例如，設(shè)計教育類網(wǎng)站界面時，可首先將文字指令可設(shè)置為：beautiful web for education, ui, ux, ui/ux, website --stylize 500。這段指令中beautiful web for education 是設(shè)計想法；UI、UX、website 等標記使得指令更加清晰；--stylize 500 為風(fēng)格化參數(shù)。風(fēng)格化參數(shù)在0～1 000，可調(diào)節(jié)風(fēng)格化的程度，低stylize生成的圖片與提示非常匹配，但藝術(shù)性不高；高stylize 值創(chuàng)建的圖片非常具有藝術(shù)性，但與提示詞的關(guān)聯(lián)較少。在本文案例中，選擇中等風(fēng)格化程度。MJ 根據(jù)這段指令生成圖2 所示4 張設(shè)計稿：

圖2 使用MJ設(shè)計界面效果圖

根據(jù)上文指令生成的設(shè)計稿中網(wǎng)站大圖以人物為主，網(wǎng)站隨機配色?？梢酝ㄟ^增加標記來調(diào)整主圖內(nèi)容和網(wǎng)站配色：在原指令中增加顏色內(nèi)容標記，增加顏色變量來提示主題顏色。beautiful web for education, campus, buildings, red, blue, yellow, ui, ux,ui/ux, website --stylize 500。指令調(diào)整后生成匹配效果圖：以紅、藍、黃為主題色，有建筑物的教育類網(wǎng)站界面效果如圖3 所示。此外，可以利用--no 參數(shù)來設(shè)置否定項，例如--no people 參數(shù)規(guī)定設(shè)計稿中不出現(xiàn)人物。

圖3 使用MJ設(shè)計界面效果圖－指令變量

MJ 生成的圖片質(zhì)量可用于生成設(shè)計初稿和設(shè)計提案稿。在設(shè)計初稿階段，設(shè)計團隊可根據(jù)設(shè)計需求提煉關(guān)鍵詞，并開展頭腦風(fēng)暴，整理出核心關(guān)鍵詞作為指令標記，利用MJ快速出圖獲得靈感。同時，不斷調(diào)整優(yōu)化指令，輸出與需求最符的設(shè)計草圖，用于設(shè)計提案。

3.3.2 圖標設(shè)計

圖標是界面中的重要組成元素。本文中以設(shè)計教育類圖標為例，因此將指令設(shè)置為：a set of icons for education website, white background, blue, red, yellow。這段指令中a set of icons for education website 是設(shè)計想法，設(shè)定為一組教育類網(wǎng)站使用的圖標；blue, red,yellow 等標記指定了顏色組合；white background 標記規(guī)定了生成的圖標組背景為白色。白色背景更便于褪底處理。設(shè)計人員能夠直接利用MJ的白色背景設(shè)計圖，將圖標褪底后直接運用在界面中。MJ 根據(jù)以上指令生成圖4所示的4組圖標：

圖4 使用MJ設(shè)計圖標

該指令下生成的圖標都是默認圓形、扁平風(fēng)格、面性的圖標?？梢酝ㄟ^形狀標記，如square、triangle等來調(diào)整生成圖標的形狀；通過風(fēng)格標記，如flat（扁平風(fēng)格）、skeuomorphism（擬態(tài)風(fēng)格）、Neumorphism（新擬態(tài)風(fēng)格）等來調(diào)整生成風(fēng)格；通過類型標記，如linear（線性）、planar（面性）等來規(guī)定生成線性還是面性的圖標。另外，可以通過添加標簽來指定圖標內(nèi)容，比如在原指令中可以添加book（書）、computer（電腦）、lab（實驗室）等標記指定圖標中所包含的元素。

3.3.3 產(chǎn)品圖設(shè)計

產(chǎn)品圖和網(wǎng)站頁面上各種文章所用配圖也是界面構(gòu)成的一部分。符合網(wǎng)站內(nèi)容的配圖豐富了界面設(shè)計的整體效果。文本中以設(shè)計教育類產(chǎn)品的介紹圖為例，將指令設(shè)置為：cover for maths course --ar 3:2。這段指令中cover for maths course 是設(shè)計想法，設(shè)定為數(shù)學(xué)課程封面圖；--ar 3:2為輸出圖片比例參數(shù)。AR 為Aspect Ratio 縮寫，即畫面比例，此參數(shù)用來控制畫面比例。該指令中規(guī)定輸出圖畫面長寬比例為3:2。在實際應(yīng)用過程中，可以根據(jù)界面規(guī)定的比例尺寸，使用--ar 參數(shù)設(shè)置好比例規(guī)則，所生成圖無須后期再裁切調(diào)整，提高應(yīng)用效率。MJ 根據(jù)以上指令生成如圖5所示的4張產(chǎn)品圖。

圖5 使用MJ設(shè)計產(chǎn)品圖

在該指令中，規(guī)定產(chǎn)品內(nèi)容為數(shù)學(xué)課程的封面，設(shè)計人員還可以基于以上指令調(diào)整產(chǎn)品內(nèi)容標記，如設(shè)計其他課程內(nèi)容的封面，或者是教育類移動產(chǎn)品。此外，除了實物圖，MJ還能夠通過不同風(fēng)格標記來實現(xiàn)不同風(fēng)格的產(chǎn)品圖，如oil painting（油畫）、watercolour（水彩）、paper cut craft（剪紙）、Graffiti（涂鴉）等藝術(shù)風(fēng)格。

3.3.4 吉祥物設(shè)計

吉祥物是用于代表組織或者品牌的視覺符號。吉祥物可以幫助用戶記住品牌，有利于品牌形象傳播，此外，吉祥物本身代表一系列相關(guān)信息和元素，能夠幫助用戶記住很多信息。在界面設(shè)計中，設(shè)計人員也經(jīng)常將吉祥物應(yīng)用在頁面引導(dǎo)、操作提示界面。本文以設(shè)計教育類吉祥物為例，設(shè)計以小海豚為原型的吉祥物形象，將指令設(shè)置為：mascot for education,dolphin, cute, white background, blue, red, yellow, CG。這段指令中，mascot for education,dolphin,cute 是設(shè)計想法，指定了吉祥物以海豚為原型，有個可愛的造型；white background 標記規(guī)定了生成的圖標組背景為白色，方便褪底應(yīng)用；blue、red、yellow 標記規(guī)定了顏色；CG標記提示了使用CG風(fēng)格，使得生成的吉祥物有較強的色彩感與立體感。MJ 根據(jù)以上指令生成圖6 所示的4張吉祥物設(shè)計圖。

圖6 使用MJ設(shè)計吉祥物

此外，若在設(shè)計時已經(jīng)有參考形象或者吉祥物原型，可以增加圖像指令使得生成設(shè)計稿更貼合參考原型，這種設(shè)計方法也被稱為墊圖。墊圖在一般設(shè)計流程中是指在繪制設(shè)計稿時，將參考圖或者原型圖作為底板，墊在最底層，便于設(shè)計人員參考、模仿。類似的在AIGC 繪圖過程中，墊圖就是指將參考圖輸入MJ，讓MJ以參考圖為原型生成相似主題或者相似風(fēng)格的設(shè)計稿。通過圖像權(quán)重參數(shù)--iw 來調(diào)整圖像指令和文字指令對于生成設(shè)計稿影響的權(quán)重。

4 結(jié)束語

通過以上分析可見，AIGC 繪圖工具可以輔助UI設(shè)計，可應(yīng)用在UI設(shè)計的初期階段，設(shè)計人員可以利用AIGC 繪圖工具快速地執(zhí)行創(chuàng)意設(shè)計圖輸出，增加創(chuàng)意靈感來源，縮短設(shè)計稿創(chuàng)作周期，為UI界面設(shè)計初期階段的創(chuàng)意和設(shè)計提效。雖然設(shè)計項目的落地還需要設(shè)計人員二次修改、開發(fā)來實現(xiàn)，但幫助設(shè)計人員省去了制作大量過程稿的時間，讓設(shè)計人員有精力探索更優(yōu)的設(shè)計方向，不至于被大量制圖工作掩埋。

雖然借助AIGC 繪圖工具可以快速繪制設(shè)計稿，但是一個符合設(shè)計需求的優(yōu)秀設(shè)計方案，需要由設(shè)計師的經(jīng)驗和反復(fù)制圖推演共同完成。熟悉AIGC指令和參數(shù)化思維的設(shè)計師更容易掌握深層次的用法，也更容易了解如何通過配置指令讓生成的結(jié)果接近設(shè)計目標。此外由于AIGC 繪圖工具要求英語指令，因此要用好AIGC繪圖工具還要求設(shè)計人員擁有較大的設(shè)計類的專業(yè)英語詞匯量。目前，AIGC 繪圖工具從本質(zhì)上還是設(shè)計提效輔助工具，不同的人使用的結(jié)果不一樣，更出色的設(shè)計人員能夠借助它制作出更好的設(shè)計方案。