AI背景下UI設計研究與實踐

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

關鍵詞：AI；UI設計；用戶體驗

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

0 引言

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

1 UI設計概述

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

2 AI背景下的UI設計

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

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

AI的飛速發展給UI設計領域帶來的變化表現在：

2.1 用戶行為分析

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

2.2 語音交互

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

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

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

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

2.3 無障礙設計

AI可以分析用戶的視力情況，并自動調整界面色彩和對比度，以滿足色盲或視力不佳用戶的需求。可以使用光學字符識別（OCR）技術，用AI將圖像中的文字轉換為可編輯、可搜索的文本，幫助視障用戶通過屏幕閱讀器獲取信息。而UI設計師需要從執行者轉變為策略家和創意指導者，更多地指導AI工具，而不是親自完成所有設計工作。

AI的發展無疑在UI設計領域乃至整個設計行業掀起了波瀾，產生了深遠的影響。利用AI設計工具提高工作效率，UI設計師可以將更多的精力投入行業分析和創新中。

以兩個界面設計為例來闡述，首先是官網設計（見圖1）。

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

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

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

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

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

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

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

在動效方面，可以將語音交互的過程和背景的水波紋相結合，當機器回復時，背景的波紋會緩慢且優雅地波動。也可以將機器的狀態與水面的波動或背景的顏色相結合，通過豐富、自然的信號讓用戶獲得直觀體驗?？傊?，UI設計師應更關注整體的用戶體驗。

3 結語

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

參考文獻：

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

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

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

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

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