一、前言

UI 設(shè)計是一門結(jié)合了美學(xué)、技術(shù)和用戶心理的藝術(shù)，它的目標(biāo)是創(chuàng)造出既美觀又易用的界面，從而提高用戶的滿意度和忠誠度。然而，UI 設(shè)計也是一項耗時耗力的工作，它需要設(shè)計師不斷地進行創(chuàng)意、繪制、測試和修改，以適應(yīng)不同的業(yè)務(wù)需求和用戶反饋。有沒有一種方法，可以讓 UI 設(shè)計變得更簡單、更快、更美呢？答案是：AI 人工智能！本文將介紹如何將 AI 技術(shù)應(yīng)用于 UI 設(shè)計的全流程中，以及這種結(jié)合對業(yè)務(wù)和團隊的價值。無論你是一名經(jīng)驗豐富的 UI 設(shè)計師，還是一名對 UI 設(shè)計感興趣的新手，你都可以從本文中學(xué)習(xí)到一些有用的知識和技巧，讓你的 UI 設(shè)計更上一層樓。

更多AIGC實戰(zhàn)案例：

二、AI設(shè)計調(diào)研方法

前期調(diào)研對于 UI 設(shè)計過程至關(guān)重要，它能讓設(shè)計師掌握客戶和市場的需求和趨勢，為設(shè)計方向和策略提供依據(jù)。前期調(diào)研需要分析大量的資料，如用戶畫像、用戶人群劃分、用戶真實需求、用戶審美偏好等，以便在設(shè)計時充分考慮，實現(xiàn)用戶體驗和視覺調(diào)性的精準(zhǔn)設(shè)計升級，達到數(shù)據(jù)轉(zhuǎn)化的最終目標(biāo)。chatgpt、NewBing 等輔助工具可以為設(shè)計師提供豐富的文字信息，幫助他們快速確定設(shè)計方向，并學(xué)習(xí)解決問題的方法。chatgpt 使用門檻高而 NewBing 親測可以平替 chatgpt。無需注冊直接使用??！

NewBing，是微軟剛推出的一款基于人工智能的聊天機器人。使用 NewBing 幫我做一個家政類 APP 的競品分析。通過提出問題得到同類型產(chǎn)品競品分析，在提問時可以嘗試用表格進行列舉這樣對比更清晰。并且從用戶畫像的角度為你分析用戶的審美偏好，為前期視覺調(diào)性的設(shè)計定義大致的方向。如通過分析得知家政類的用戶更注重生活品質(zhì)，喜歡清晰、簡潔、易用的頁面。

三、AI設(shè)計流程與落地

MidJourney 是一款基于 GAN 技術(shù)的 AI 繪圖工具，具有高度的可定制性和多樣性，畫面注重細(xì)節(jié)的構(gòu)建和表達；可生成不同風(fēng)格和色彩的圖像。Prompt 關(guān)鍵詞描述是 MidJourney 中與 AI 溝通創(chuàng)作的媒介，通過描述文本內(nèi)容告訴 AI 理解聽懂你的指令從而生成滿意的畫面。具體的描述方法如下：

「主題內(nèi)容」+「環(huán)境、背景」+「構(gòu)圖、鏡頭」+「風(fēng)格化」+「參考方向」+「渲染方式」+「圖像設(shè)定」

主題內(nèi)容：是指你要畫個什么東西？比如是人、動物、地點、物體等。

環(huán)境、背景氣氛：例如指定的地點或者物件、背景設(shè)計。比如是城市、森林、海灘、工作場景、室內(nèi)、室外等，也包括畫面的光線、氛圍等方面。

構(gòu)圖、鏡頭：這里強調(diào)畫面的構(gòu)圖和鏡頭處理，比如是透視、鳥瞰、特寫等視角，以及畫面元素的排布、層次、比例等方面。

風(fēng)格化：指畫面的風(fēng)格特點，比如是現(xiàn)代風(fēng)格、傳統(tǒng)風(fēng)格、卡通風(fēng)格等。

參考方向：比如說藝術(shù)家的名字或者直接將圖像風(fēng)格寫出來，比如 dribbble

渲染方式：指畫面的渲染方式，比如是光線追蹤、陰影、反射等渲染方式。

圖像設(shè)定：指畫面的一些基本設(shè)定，比如是畫面尺寸、分辨率、圖片質(zhì)量等。

核心關(guān)鍵詞是生成高質(zhì)量圖片的關(guān)鍵，為了便于生成高質(zhì)量的 UI 圖片，為大家收集了一些提升畫面質(zhì)量的關(guān)鍵詞，大家可以根據(jù)需求添加并嘗試。直到達到自己想要的畫面效果。

更多關(guān)鍵詞干貨：

四、風(fēng)格探索與實踐

我們在設(shè)計方案時，會有許多創(chuàng)意想法。我們可以用 Midjourney 快速模擬出概念方案，滿足提案的要求，并根據(jù)業(yè)務(wù)需求進行及時的迭代。低成本的實現(xiàn)方案方向的確立。再也不用因為沒有靈感而苦惱。

在 UI 設(shè)計中，當(dāng)我們遇到新的風(fēng)格改版時候，首先是確定設(shè)計的方向，產(chǎn)品風(fēng)格，為后續(xù)的產(chǎn)品方向制定基調(diào)。也是我們常用的情緒版設(shè)計。利用 midjourney。以 58 到家家政類 APP 為例，我們通過前期用戶分析得出用戶更注重生活品質(zhì)，喜歡清晰、簡潔、易用的頁面，通過輸入關(guān)鍵詞來輸出大量的情緒板。我們可以控制風(fēng)格更傾向于用戶的審美基調(diào)。控制顏色更貼近品牌的表達

圖標(biāo)的設(shè)計是 UI 設(shè)計中日常工作，使用 AI 讓我們圖標(biāo)設(shè)計過程更加有趣，生成的結(jié)果也可以很方便的運用到實際的場景里。我們可以運用 knolling 的提示詞把與主題相關(guān)的物品整齊地排列在一起。通過排列的圖形為我們后期繪制圖標(biāo)提供靈感。

同樣我們也可以根據(jù)某一個單獨的圖標(biāo)進行繪制，給出 white background，白色背景的提示詞能幫助更好的得到一個邊緣清晰完整的 icon 圖標(biāo)

在對用戶的分析中，用戶更注重服務(wù)的品質(zhì)，真實的服務(wù)場景能得到用戶在情感上的共鳴從而選擇平臺上的服務(wù)。場景圖片的真人拍攝需要花費大量的時間和模特成本。我們可以嘗試用 midjourney 墊圖的方法通過基礎(chǔ)圖片生成大量服務(wù)人員和場景圖片。這些場景圖片可以作為 SKU 的封面圖，也可以作為專題欄目的入口封面圖

在空狀態(tài)頁面的設(shè)計上，準(zhǔn)確、直觀、高效是空頁面設(shè)計的原則。扁平插畫風(fēng)在 UI 設(shè)計中應(yīng)用廣泛，既能直觀表達又簡潔美觀。輸出狀態(tài)頁面的插圖主要是關(guān)鍵是在場景的精準(zhǔn)描述（主題內(nèi)容：一個人在房間打掃衛(wèi)生 環(huán)境：在綠植環(huán)繞的環(huán)境中 風(fēng)格定義：扁平化、極簡風(fēng)格、多細(xì)節(jié)等）

五、AI對團隊的幫助

AI 繪畫對設(shè)計團隊有著巨大的幫助，主要體現(xiàn)在以下幾個方面：

創(chuàng)意輔助：AI 繪畫能夠利用智能算法快速生成多樣化的元素和圖案，激發(fā)設(shè)計師的靈感，拓展創(chuàng)意的可能性。

效率提升：AI 繪畫能夠通過自動化處理、批量操作、快速修圖等方式，減少設(shè)計團隊的重復(fù)繁瑣的工作，提高生產(chǎn)效率。

素材豐富：AI 繪畫能夠通過人工智能技術(shù)生成基礎(chǔ)素材、輔助繪畫效果，提高設(shè)計團隊的素材庫的質(zhì)量和數(shù)量。

內(nèi)容優(yōu)化：AI 繪畫能夠通過智能化的方式協(xié)助設(shè)計團隊進行色彩、構(gòu)圖和設(shè)計細(xì)節(jié)等的優(yōu)化，減少內(nèi)容制作流程中的缺陷和錯誤。

方法沉淀：AI 繪畫能夠通過智能算法分析和學(xué)習(xí)歷史設(shè)計作品的生成規(guī)則和工作流程，讓設(shè)計團隊在工作實踐中形成更加深入的設(shè)計思考和理論體系。

總之，AI 工具不僅為設(shè)計團隊提供了強有力的支持，同時也激發(fā)了人類設(shè)計的創(chuàng)新潛能，讓設(shè)計作品更具有創(chuàng)意性和藝術(shù)性，推動了設(shè)計領(lǐng)域的不斷創(chuàng)新發(fā)展。

歡迎關(guān)注「58UXD」的微信公眾號：