王蕾

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

0 引言

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

1 AIGC概念及AIGC繪圖工具簡(jiǎn)介

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

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

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

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

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

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

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

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

3.1 AIGC繪圖工具指令

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

表1 指令構(gòu)成

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

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

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

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

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

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

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

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

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

使用AIGC 繪圖工具最重要的是編寫清晰的指令，指令能夠表達(dá)設(shè)計(jì)稿的內(nèi)容。例如，設(shè)計(jì)教育類網(wǎng)站界面時(shí)，可首先將文字指令可設(shè)置為：beautiful web for education, ui, ux, ui/ux, website --stylize 500。這段指令中beautiful web for education 是設(shè)計(jì)想法；UI、UX、website 等標(biāo)記使得指令更加清晰；--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 張?jiān)O(shè)計(jì)稿：

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

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

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

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

3.3.2 圖標(biāo)設(shè)計(jì)

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

圖4 使用MJ設(shè)計(jì)圖標(biāo)

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

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

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

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

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

3.3.4 吉祥物設(shè)計(jì)

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

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

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

4 結(jié)束語(yǔ)

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

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