摘要：目的：在AI技術(shù)迅猛發(fā)展的背景下，文章探討其可能帶來(lái)的行業(yè)變革，并為UI設(shè)計(jì)領(lǐng)域引入一種新的高效設(shè)計(jì)方法。方法：文章探討AIGC在UI設(shè)計(jì)中的應(yīng)用及其對(duì)設(shè)計(jì)效率的影響。研究方法上，通過(guò)對(duì)設(shè)計(jì)師使用AIGC工具前后效率的對(duì)比，以及用戶對(duì)AIGC設(shè)計(jì)作品使用量的調(diào)查，來(lái)評(píng)估AIGC在UI設(shè)計(jì)中的實(shí)際應(yīng)用效果。并通過(guò)實(shí)際案例探究如何將AI技術(shù)應(yīng)用到UI設(shè)計(jì)工作中。結(jié)果：研究發(fā)現(xiàn)，將AI技術(shù)用于用戶行為分析、語(yǔ)音交互、無(wú)障礙設(shè)計(jì)等方面，能顯著提高UI設(shè)計(jì)效率，同時(shí)用戶對(duì)AIGC設(shè)計(jì)的界面接受度也較高。UI設(shè)計(jì)師可從執(zhí)行者轉(zhuǎn)變?yōu)椴呗约液蛣?chuàng)意指導(dǎo)者，專(zhuān)注于優(yōu)化用戶體驗(yàn)。結(jié)論：數(shù)字時(shí)代，設(shè)計(jì)不僅僅是一種藝術(shù)形式，更是一種科學(xué)實(shí)踐，是設(shè)計(jì)理念和方法的革新。它為設(shè)計(jì)師提供了更廣闊的視野和更強(qiáng)大的工具，也為用戶帶來(lái)了更加豐富和個(gè)性化的體驗(yàn)。然而，設(shè)計(jì)師的直覺(jué)、情感和創(chuàng)新思維仍然是不可替代的，AI只是作為設(shè)計(jì)師的助手，擴(kuò)展他們的能力和視野。隨著AI技術(shù)的不斷發(fā)展，兩者結(jié)合的潛力將得到進(jìn)一步挖掘，設(shè)計(jì)師需要適應(yīng)新技術(shù)，積極擁抱AI，同時(shí)保持批判性思維，確保科技的進(jìn)步能真正服務(wù)于設(shè)計(jì)質(zhì)量的提升和用戶體驗(yàn)的優(yōu)化。

關(guān)鍵詞：AI；UI設(shè)計(jì)；用戶體驗(yàn)

中圖分類(lèi)號(hào)：TP311.5 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1004-9436（2024）11-0-03

0 引言

本文探討AIGC（生成式人工智能）在UI設(shè)計(jì)中的應(yīng)用及其對(duì)設(shè)計(jì)效率的影響。首先概述UI設(shè)計(jì)的發(fā)展歷程和AI技術(shù)的興起，指出兩者結(jié)合的潛力和意義。通過(guò)對(duì)設(shè)計(jì)師使用AIGC工具前后效率的對(duì)比，以及用戶對(duì)AIGC設(shè)計(jì)作品使用量的調(diào)查，來(lái)評(píng)估AIGC在UI設(shè)計(jì)中的實(shí)際應(yīng)用效果。研究結(jié)果顯示，AIGC技術(shù)能顯著提高UI設(shè)計(jì)的效率，同時(shí)用戶對(duì)AIGC設(shè)計(jì)的界面接受度也較高。

1 UI設(shè)計(jì)概述

UI設(shè)計(jì)，即用戶界面設(shè)計(jì)，是指對(duì)軟件、應(yīng)用程序、網(wǎng)站或任何數(shù)字產(chǎn)品的人機(jī)交互界面進(jìn)行的設(shè)計(jì)。其經(jīng)歷了早期計(jì)算機(jī)系統(tǒng)階段、桌面時(shí)代、網(wǎng)頁(yè)設(shè)計(jì)時(shí)代、移動(dòng)設(shè)備時(shí)代、響應(yīng)式設(shè)計(jì)階段、用戶體驗(yàn)整合階段。隨著技術(shù)的發(fā)展，UI設(shè)計(jì)開(kāi)始融入更多創(chuàng)新元素，如VR（虛擬現(xiàn)實(shí)）、AR（增強(qiáng)現(xiàn)實(shí)）、VUI（語(yǔ)音用戶界面）等。AI背景下，UI設(shè)計(jì)是一個(gè)不斷發(fā)展的領(lǐng)域，旨在創(chuàng)造更加智能、個(gè)性化和用戶友好的交互體驗(yàn)。

2 AI背景下的UI設(shè)計(jì)

Galileo AI可快速生成高質(zhì)量UI設(shè)計(jì)，原先設(shè)計(jì)一張UI設(shè)計(jì)稿可能需要幾小時(shí)到幾天的時(shí)間，而Galileo AI只需要簡(jiǎn)單輸入文本描述，即可生成UI設(shè)計(jì)圖，大大減少了設(shè)計(jì)工作的時(shí)間成本，顯著提高了工作效率，同時(shí)生成的設(shè)計(jì)支持在Figma（一款向量圖形編輯軟件）中進(jìn)一步編輯，靈活性和可定制性強(qiáng)，自定義主題樣式也滿足了設(shè)計(jì)的個(gè)性化需求。但其需要精準(zhǔn)的文本才能達(dá)到完美，有時(shí)可能無(wú)法達(dá)到預(yù)期。同時(shí)，目前AI生成的內(nèi)容可能存在侵權(quán)風(fēng)險(xiǎn)，所以主要被當(dāng)作輔助工具去使用。

類(lèi)似的還有Midjourny，其是一款最新的人工智能程序和工具，可以將提示詞（也稱(chēng)提示、關(guān)鍵詞，英文為Prompt）轉(zhuǎn)化為迷人的視覺(jué)圖像。它由舊金山獨(dú)立研究實(shí)驗(yàn)室Midjourney開(kāi)發(fā)，采用了類(lèi)似于OpenAI的DALL·E（一款人工智能圖像生成器）和穩(wěn)定擴(kuò)散的算法，可以快速地將文字轉(zhuǎn)換為圖像。Midjourney提供了一種簡(jiǎn)單的方式來(lái)釋放AI的創(chuàng)造力。只需要加入官方Discord服務(wù)器，向機(jī)器人發(fā)送消息，使用/imagine命令輸入提示詞，即可獲得一組令人驚嘆的圖像。這些圖像可以激發(fā)想象力，讓設(shè)計(jì)師更快、更準(zhǔn)確地創(chuàng)作出高質(zhì)量的設(shè)計(jì)作品。使用Midjourney，可以快速獲得設(shè)計(jì)項(xiàng)目的視覺(jué)概念［1］。雖然Midjourny不是專(zhuān)門(mén)針對(duì)UI設(shè)計(jì)的，但它在設(shè)計(jì)領(lǐng)域具有潛在用途。可以將其作為輔助工具，用來(lái)生成各種風(fēng)格和主題的圖像，汲取靈感，挖掘新的創(chuàng)意。Midjourny是最受歡迎的AI工具之一，目前注冊(cè)用戶已達(dá)千萬(wàn)，受歡迎程度可想而知。

AI的飛速發(fā)展給UI設(shè)計(jì)領(lǐng)域帶來(lái)的變化表現(xiàn)在：

2.1 用戶行為分析

AI可以分析用戶的行為模式，預(yù)測(cè)用戶需求，并根據(jù)這些數(shù)據(jù)優(yōu)化界面布局和功能。例如，通過(guò)機(jī)器學(xué)習(xí)算法，AI可以繪制用戶畫(huà)像，通過(guò)分析用戶的行為、偏好和其他人口統(tǒng)計(jì)信息，形成用戶的綜合特征描述，從而更了解用戶。系統(tǒng)可以識(shí)別用戶最常使用的功能，并將其放在更顯眼的位置。

2.2 語(yǔ)音交互

隨著語(yǔ)音識(shí)別技術(shù)的進(jìn)步，VUI變得越來(lái)越流行。其載體具有多樣性，如手機(jī)語(yǔ)音助手、智能音箱、車(chē)載語(yǔ)音助手等。即使在不用屏幕的情況下，AI也可以使語(yǔ)音交互更加自然和直觀，用戶可以通過(guò)語(yǔ)音命令與設(shè)備交流，而不必依賴(lài)傳統(tǒng)的圖形界面。

用戶既可以通過(guò)語(yǔ)音完成很多任務(wù)，減少對(duì)屏幕空間的需求，又可以結(jié)合其他交互模式（如觸摸、手勢(shì)等），形成多模態(tài)的交互方式，這要求UI設(shè)計(jì)考慮到不同模式的無(wú)縫集成。

利用自然信號(hào)傳遞不擾人的信息，提供自然、悅耳、持續(xù)的信息，能讓人們了解周遭的狀況。人們通常沒(méi)有意識(shí)到自己多么依賴(lài)聲音帶來(lái)的空間感，以及這個(gè)世界上相關(guān)事物的信息。應(yīng)利用包含豐富信息且不擾人的自然信號(hào)和機(jī)器互動(dòng)［2］。

同時(shí)，要花費(fèi)更多的精力確保語(yǔ)音交互的自然流暢和信息的準(zhǔn)確傳達(dá)，為用戶展示行為建議，同時(shí)不干擾用戶的主任務(wù)。由于AI語(yǔ)音交互能夠理解上下文，需要考慮如何在界面中體現(xiàn)這種上下文感知能力，提供合適的信息和操作。

2.3 無(wú)障礙設(shè)計(jì)

AI可以分析用戶的視力情況，并自動(dòng)調(diào)整界面色彩和對(duì)比度，以滿足色盲或視力不佳用戶的需求。可以使用光學(xué)字符識(shí)別（OCR）技術(shù)，用AI將圖像中的文字轉(zhuǎn)換為可編輯、可搜索的文本，幫助視障用戶通過(guò)屏幕閱讀器獲取信息。而UI設(shè)計(jì)師需要從執(zhí)行者轉(zhuǎn)變?yōu)椴呗约液蛣?chuàng)意指導(dǎo)者，更多地指導(dǎo)AI工具，而不是親自完成所有設(shè)計(jì)工作。

AI的發(fā)展無(wú)疑在UI設(shè)計(jì)領(lǐng)域乃至整個(gè)設(shè)計(jì)行業(yè)掀起了波瀾，產(chǎn)生了深遠(yuǎn)的影響。利用AI設(shè)計(jì)工具提高工作效率，UI設(shè)計(jì)師可以將更多的精力投入行業(yè)分析和創(chuàng)新中。

以兩個(gè)界面設(shè)計(jì)為例來(lái)闡述，首先是官網(wǎng)設(shè)計(jì)（見(jiàn)圖1）。

以往，UI設(shè)計(jì)師在拿到原型后，需要進(jìn)行需求分析、原型評(píng)估、競(jìng)品分析、設(shè)計(jì)探索、風(fēng)格定義、視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)等，在傳達(dá)方式及風(fēng)格手法上會(huì)耗費(fèi)更多心血。

如今，根據(jù)原型，設(shè)計(jì)師可以把更多的精力放在競(jìng)品分析上，分析競(jìng)品如何布局，使用哪種風(fēng)格，如何搭配色彩，交互有哪些亮點(diǎn)，遇到了哪些問(wèn)題，如何解決以及想要傳達(dá)什么。此案例中的官網(wǎng)以AI類(lèi)產(chǎn)品為主，調(diào)研阿里云、騰訊云等友商，發(fā)現(xiàn)無(wú)論是banner還是icon設(shè)計(jì)，多為3D風(fēng)格，整體色調(diào)在與企業(yè)色保持一致的同時(shí)，傳遞出科技感和安全穩(wěn)定性。此時(shí)設(shè)計(jì)師需要在banner內(nèi)容上深思熟慮，展開(kāi)創(chuàng)新性設(shè)計(jì)。如在色彩上，選用品牌藍(lán)色，并與綠色相結(jié)合，在體現(xiàn)科技創(chuàng)新的同時(shí)，給人以朝氣感，呼應(yīng)行業(yè)前景。在造型上，使用流動(dòng)的曲線給人無(wú)限的想象空間，一圈圈放大的弧線代表不斷發(fā)展與進(jìn)步、溝通與協(xié)調(diào)，可以設(shè)計(jì)出一種類(lèi)似無(wú)限大符號(hào)的造型或莫比烏斯環(huán)來(lái)體現(xiàn)。設(shè)計(jì)師在實(shí)際項(xiàng)目中，應(yīng)大膽想象，通過(guò)頭腦風(fēng)暴捕捉更多的靈感。在材質(zhì)上，運(yùn)用靈活性強(qiáng)且可增強(qiáng)通透感的材質(zhì)，提升整體質(zhì)感。

有了初步的想法后，可以找尋一些靈感素材，運(yùn)用Midjourny Describe的功能生成素材關(guān)鍵詞，提煉出吻合的內(nèi)容，再通過(guò)添加參考圖與關(guān)鍵詞的方式，生成官網(wǎng)主圖。在此過(guò)程中，可以對(duì)圖片的關(guān)鍵詞進(jìn)行多次調(diào)整，達(dá)到預(yù)期效果。由于每次生成的結(jié)果總存在一些變化，因此可以捕捉這些細(xì)微的差異，作為新的靈感。哪怕有時(shí)AI生成的內(nèi)容和預(yù)期相差很遠(yuǎn)，這個(gè)過(guò)程也有利于開(kāi)拓思路。

除要控制文件質(zhì)量外，UI設(shè)計(jì)師也需要對(duì)圖片的色彩、紋理、背景等細(xì)節(jié)進(jìn)行加工，滿足用戶的需求，再將AI生成的圖片在設(shè)計(jì)文件中排版，以確定最終UI設(shè)計(jì)稿。

icon設(shè)計(jì)亦是如此，根據(jù)所傳達(dá)的內(nèi)容設(shè)計(jì)icon形象，根據(jù)想要的形象以及參考素材提取關(guān)鍵詞。一方面，由于選用的關(guān)鍵詞是英文，并不能十分準(zhǔn)確地傳達(dá)出實(shí)際意思；另一方面，Midjourny本身會(huì)根據(jù)參考圖的結(jié)構(gòu)生成圖片，上傳的參考圖會(huì)影響生成圖片的構(gòu)圖，即使后期在關(guān)鍵詞中增加了與參考圖不一致的構(gòu)圖描述，最終效果也會(huì)受到影響。因此，在找尋參考素材時(shí)，要明確想要通過(guò)其獲取哪些關(guān)鍵內(nèi)容，如材質(zhì)、構(gòu)圖方式、風(fēng)格、色彩等。如果使用“參考圖+關(guān)鍵詞”的圖片生成方式，一定要選取與預(yù)期構(gòu)圖一致的參考圖。

圖2是一個(gè)人機(jī)對(duì)話界面設(shè)計(jì)案例。

簡(jiǎn)潔的界面具有自身的特征和個(gè)性，簡(jiǎn)單的操作能增強(qiáng)用戶的自信心，因?yàn)楫a(chǎn)品的響應(yīng)方式都是意料之中的［3］94-95。基于此，應(yīng)打造一個(gè)沉浸感強(qiáng)且富有吸引力的界面，使用戶可以更多地關(guān)注對(duì)話這件事。平靜的水面可以給人安靜、豁達(dá)、治愈等良好的感受，因此可以將其與機(jī)器的狀態(tài)相結(jié)合，對(duì)其狀態(tài)進(jìn)行擬人化處理。整理好設(shè)計(jì)思路后，將想要傳達(dá)的內(nèi)容以關(guān)鍵詞的方式發(fā)送給AI工具，如Ripples of water on light blue background， elegant， simple， empty water， high quality， high detail，--ar 16：9，讓其反復(fù)生成，直至獲得滿意的結(jié)果。再對(duì)整體交互形式進(jìn)行補(bǔ)全，利用交互式設(shè)計(jì)刪除、組織、隱藏、轉(zhuǎn)移這四個(gè)策略［3］170，使用戶點(diǎn)擊輸入框前方的按鈕便可切換到語(yǔ)音交互界面，輸入框默認(rèn)為輸入態(tài)，方便用戶輸入文字。用戶輸入內(nèi)容后，輸入框的位置會(huì)自動(dòng)移動(dòng)到屏幕下方，方便用戶瀏覽已發(fā)送的對(duì)話內(nèi)容。交互設(shè)計(jì)不僅關(guān)注結(jié)構(gòu)和元素組織，還關(guān)注相應(yīng)用戶活動(dòng)的動(dòng)態(tài)行為與變化［4］，可以保持關(guān)閉按鈕和此對(duì)話入口的位置一致，方便用戶進(jìn)入和離開(kāi)使用同一方式。

在動(dòng)效方面，可以將語(yǔ)音交互的過(guò)程和背景的水波紋相結(jié)合，當(dāng)機(jī)器回復(fù)時(shí)，背景的波紋會(huì)緩慢且優(yōu)雅地波動(dòng)。也可以將機(jī)器的狀態(tài)與水面的波動(dòng)或背景的顏色相結(jié)合，通過(guò)豐富、自然的信號(hào)讓用戶獲得直觀體驗(yàn)。總之，UI設(shè)計(jì)師應(yīng)更關(guān)注整體的用戶體驗(yàn)。

3 結(jié)語(yǔ)

隨著人工智能技術(shù)的不斷進(jìn)步，UI設(shè)計(jì)領(lǐng)域正迎來(lái)前所未有的變革。本文深入探討AI在UI設(shè)計(jì)中的應(yīng)用，從智能推薦系統(tǒng)到自適應(yīng)用戶行為模式，見(jiàn)證了AI如何使設(shè)計(jì)更加人性化和高效。分析實(shí)踐案例可以發(fā)現(xiàn)，AI不僅能提升用戶滿意度，而且能為設(shè)計(jì)師提供寶貴的數(shù)據(jù)支持，優(yōu)化設(shè)計(jì)流程。期待未來(lái)AI與UI設(shè)計(jì)的融合能進(jìn)一步深化，更加精準(zhǔn)地預(yù)測(cè)用戶需求，并提供個(gè)性化服務(wù)。讓我們攜手前進(jìn)，在AI的輔助下，創(chuàng)造一個(gè)更加智能、友好和包容的數(shù)字世界。

參考文獻(xiàn)：

［1］ 樂(lè)章.人人都是設(shè)計(jì)師：設(shè)計(jì)基礎(chǔ)+Midjourney+ChatGPT［M］.北京：人民郵電出版社，2023：64-65.

［2］ 唐納德·A.諾曼.設(shè)計(jì)心理學(xué)4［M］.北京：中信出版社，2015：111-112.

［3］ 賈爾斯·科爾伯恩.簡(jiǎn)約至上：交互式設(shè)計(jì)四策略［M］. 李松峰，譯. 2版.北京：人民郵電出版社，2018：94-95，170.

［4］ 艾倫·庫(kù)伯，羅伯特·萊因曼，大衛(wèi)·克羅寧，等. About Face 4：交互設(shè)計(jì)精髓［M］.倪衛(wèi)國(guó)，劉松濤，薛菲，等譯.北京：電子工業(yè)出版社，2015：142.

作者簡(jiǎn)介：康璐 （1987—），女，工藝美術(shù)師，研究方向：UI設(shè)計(jì)、視覺(jué)傳達(dá)。