AI背景下UI設(shè)計研究與實踐

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

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

中圖分類號：TP311.5 文獻標(biāo)識碼：A 文章編號：1004-9436（2024）11-0-03

0 引言

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

1 UI設(shè)計概述

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

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

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

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

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

2.1 用戶行為分析

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

2.2 語音交互

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

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

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

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

2.3 無障礙設(shè)計

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

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

以兩個界面設(shè)計為例來闡述，首先是官網(wǎng)設(shè)計（見圖1）。

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

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

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

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

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

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

簡潔的界面具有自身的特征和個性，簡單的操作能增強用戶的自信心，因為產(chǎn)品的響應(yīng)方式都是意料之中的［3］94-95。基于此，應(yīng)打造一個沉浸感強且富有吸引力的界面，使用戶可以更多地關(guān)注對話這件事。平靜的水面可以給人安靜、豁達、治愈等良好的感受，因此可以將其與機器的狀態(tài)相結(jié)合，對其狀態(tài)進行擬人化處理。整理好設(shè)計思路后，將想要傳達的內(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é)果。再對整體交互形式進行補全，利用交互式設(shè)計刪除、組織、隱藏、轉(zhuǎn)移這四個策略［3］170，使用戶點擊輸入框前方的按鈕便可切換到語音交互界面，輸入框默認(rèn)為輸入態(tài)，方便用戶輸入文字。用戶輸入內(nèi)容后，輸入框的位置會自動移動到屏幕下方，方便用戶瀏覽已發(fā)送的對話內(nèi)容。交互設(shè)計不僅關(guān)注結(jié)構(gòu)和元素組織，還關(guān)注相應(yīng)用戶活動的動態(tài)行為與變化［4］，可以保持關(guān)閉按鈕和此對話入口的位置一致，方便用戶進入和離開使用同一方式。

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

3 結(jié)語

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

參考文獻：

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

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

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

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

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