AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

一、前言

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

更多AIGC實戰案例:

二、AI設計調研方法

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

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

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

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

三、AI設計流程與落地

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

MidJourney 是一款基于 GAN 技術的 AI 繪圖工具,具有高度的可定制性和多樣性,畫面注重細節的構建和表達;可生成不同風格和色彩的圖像。Prompt 關鍵詞描述是 MidJourney 中與 AI 溝通創作的媒介,通過描述文本內容告訴 AI 理解聽懂你的指令從而生成滿意的畫面。具體的描述方法如下:

「主題內容」+「環境、背景」+「構圖、鏡頭」+「風格化」+「參考方向」+「渲染方式」+「圖像設定」

主題內容:是指你要畫個什么東西?比如是人、動物、地點、物體等。

環境、背景氣氛:例如指定的地點或者物件、背景設計。比如是城市、森林、海灘、工作場景、室內、室外等,也包括畫面的光線、氛圍等方面。

構圖、鏡頭:這里強調畫面的構圖和鏡頭處理,比如是透視、鳥瞰、特寫等視角,以及畫面元素的排布、層次、比例等方面。

風格化:指畫面的風格特點,比如是現代風格、傳統風格、卡通風格等。

參考方向:比如說藝術家的名字或者直接將圖像風格寫出來,比如 dribbble

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

圖像設定:指畫面的一些基本設定,比如是畫面尺寸、分辨率、圖片質量等。

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

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

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

更多關鍵詞干貨:

四、風格探索與實踐

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

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

在 UI 設計中,當我們遇到新的風格改版時候,首先是確定設計的方向,產品風格,為后續的產品方向制定基調。也是我們常用的情緒版設計。利用 midjourney。以 58 到家家政類 APP 為例,我們通過前期用戶分析得出用戶更注重生活品質,喜歡清晰、簡潔、易用的頁面,通過輸入關鍵詞來輸出大量的情緒板。我們可以控制風格更傾向于用戶的審美基調??刂祁伾N近品牌的表達

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

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

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

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

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

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

在空狀態頁面的設計上,準確、直觀、高效是空頁面設計的原則。扁平插畫風在 UI 設計中應用廣泛,既能直觀表達又簡潔美觀。輸出狀態頁面的插圖主要是關鍵是在場景的精準描述(主題內容:一個人在房間打掃衛生 環境:在綠植環繞的環境中 風格定義:扁平化、極簡風格、多細節等)

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

五、AI對團隊的幫助

AI 繪畫對設計團隊有著巨大的幫助,主要體現在以下幾個方面:

創意輔助:AI 繪畫能夠利用智能算法快速生成多樣化的元素和圖案,激發設計師的靈感,拓展創意的可能性。

效率提升:AI 繪畫能夠通過自動化處理、批量操作、快速修圖等方式,減少設計團隊的重復繁瑣的工作,提高生產效率。

素材豐富:AI 繪畫能夠通過人工智能技術生成基礎素材、輔助繪畫效果,提高設計團隊的素材庫的質量和數量。

內容優化:AI 繪畫能夠通過智能化的方式協助設計團隊進行色彩、構圖和設計細節等的優化,減少內容制作流程中的缺陷和錯誤。

方法沉淀:AI 繪畫能夠通過智能算法分析和學習歷史設計作品的生成規則和工作流程,讓設計團隊在工作實踐中形成更加深入的設計思考和理論體系。

總之,AI 工具不僅為設計團隊提供了強有力的支持,同時也激發了人類設計的創新潛能,讓設計作品更具有創意性和藝術性,推動了設計領域的不斷創新發展。

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

歡迎關注「58UXD」的微信公眾號:

AIGC如何應用到UI設計工作全流程?來看58的實戰案例!

收藏 200
點贊 44

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。