有關AIGC的討論已經有很多，現在，我們不妨看看實戰角度的分享。這篇文章里，作者結合實戰案例，分享了如何用AIGC去做界面，以及如何用AIGC來幫助我們做出優化。一起來看看本文的梳理吧。

我們的行業不尊重傳統，只尊重創新。

“AI 到底會不會取代我們”？這個問題我們留在結尾與大家探討，現在我就開始學習如何用AIGC去做界面、以及怎樣指導我們進行優化。

利用“AI”做界面主要會用到四個工具：Chat GPT、Figma（Wireframe Designer 插件）、即時設計（即時 AI）、文心一言（作為無法使用 Chat GPT 同學的備用方案）。

一、UI 設計的基本原則與 AIGC 的融合

UI 設計更多是創建直觀、易用、吸引人的用戶界面，而 AIGC 則是指通過人工智能技術生成的文本、圖像、音頻或視頻內容。將二者結合，可以極大地提高用戶體驗和交互效率。

以下就是幾點“UI 設計的原則”與“AIGC”結合的理論分析。

1. 一致性與風格化的 AIGC

• 原則：UI設計強調界面元素的一致性，包括顏色、字體、布局等。
• 融合： AIGC可以生成與應用風格一致的圖像或文本。例如，如果一個應用的UI風格是極簡主義，那么AI可以生成簡潔、風格統一的圖像或文本內容，以保證整體風格的一致性。
• 技巧：利用Stable Diffusion訓練模型、MidJourney（seed、tune）、文心一言、Chat GPT結合上下文的能力都可以為我們搞定一致性的問題

2. 反饋與交互式 AIGC

• 原則： 及時的反饋是提高用戶體驗的關鍵。
• 融合： 使用AIGC實時生成反饋內容。比如在一個線上教育平臺，學生提交答案后，AI立即生成個性化的反饋和建議，增強學習體驗。
• 技巧：可以嘗試將“Chat GPT”的API接口嘗試容入產品，此方案也是各大教育類App經常使用的方案。

3. 簡化操作與智能化 AIGC

• 原則： UI設計應簡化用戶操作，使用戶易于理解和使用。
• 融合： AIGC可以自動生成用戶可能感興趣的內容，減少用戶的搜索和選擇時間。比如在新聞應用中，基于用戶的閱讀歷史和偏好，AI智能推薦相關新聞，簡化用戶尋找感興趣內容的過程。
• 案例：我們最常見到的就是抖音，使用用戶的觀看歷史、點贊/不喜歡的視頻、觀看時間等數據來推薦視頻，還有電商類平臺通過搜索、訪問以及購買來推薦喜歡的產品。這種推薦機制使用戶能夠發現與以往觀看內容類似產品，增加用戶粘性。

4. 可用性與適應性 AIGC

• 原則： UI設計要考慮到不同用戶的可用性需求。
• 融合： AIGC可以生成適應不同用戶的內容。例如，對于視覺障礙用戶，AI可以將文本內容轉化為音頻；或者根據用戶的閱讀習慣調整字體大小和對比度，使內容更易于閱讀。
• 案例：比如Safari瀏覽器譯文朗讀、虎嗅、36kr的文本調節等，本質是為了照顧弱勢群體，讓產品更有溫度。

5. 吸引力與創意 AIGC

• 原則： UI設計應吸引用戶的注意力，并提供愉悅的用戶體驗。
• 融合： AIGC能生成創意和吸引人的內容，如根據用戶興趣生成個性化的圖形設計或視頻內容，增加用戶的參與度和滿意度。
• 案例：許多企業通過AIGC的幫助生產了大量視覺效果爆炸的宣傳圖，同時結合AIGC也參與了相應的視頻，去年雙11尤為明顯。

通過與 AIGC 的結合我可以看到，它似乎在讓我們更高效、更豐富、更標準的去做設計，那么我們可以察覺到一個問題“更標準的去做設計”究竟是好還是壞？

二、利用 AIGC 生成界面：操作指南

本次我們將圍繞一款 App 去做案例分享，一款為工具類產品，首先我們的思路是：“定義——發散——重組——原型——測試——修改”。

1. 使用“Chat GPT Classic”、“文心一言”詢問

最簡單的詢問方法：角色扮演——問題訴求—尋求答案。

文軒：你身為一名資深的交互設計師，如果現在想搭建一款工具類的產品，這款 App 的主要作用是“寄快遞、查快遞”，具體方法應該怎么做。

那么我們看一下“Chat GPT Classic”和“文心一言”的回答，我們再根據共同的重點提煉關鍵詞。

有圖可見，“文心一言”在首次回答表現的并不出色，第二次我們才篩選出準確的功能模塊。

Chat GPT Classic：

• 核心功能：寄快遞（包括填寫收發地址、選擇快遞公司、預估費用、預約取件等）和查快遞（快遞追蹤、狀態更新通知等）。
• 附加功能：歷史記錄查詢、費用估算、用戶評價系統、常用地址保存等。

文心一言：

核心功能：登錄注冊模塊、寄件查檢模塊、個人信息管理模塊、消息通知模塊、幫助與反饋模塊。

這里“文心一言”的回答更加標準化，但是在理解思維上“Chat GPT”更勝一籌，因為我問題是“主要作用是寄快遞、查快遞”只有“Chat GPT”是圍繞這個展開的。

2. 刨根問底

在我們得到答案后，借助“文本類 AI”聯系上下文的能力我們可以在跟深層次的回答，讓它們為我們直接繪制原型圖與信息架構。

文軒：“請你根據以上的回答幫我繪制出這個 App 的線框圖與信息架構”。

信息架構：

• Chat GPT Classic：首頁、寄快遞、查快遞、我的記錄、設置。
• 文心一言：登錄注冊頁、首頁、寄件頁、查件頁、個人信息頁、消息通知頁、幫助與反饋頁。這里其實“Chat GPT”似乎更能理解一些給出了 5 個頁面的切換，“文心一言”更詳細一點給出了 7 個。

這個環節我們先去參考一下競品“順風、菜鳥、豐巢”看一下他們的布局結構。

我們這里可以發現基本都是圍繞在“4 個”，問題在于初始 App 滿足核心功能產品可用就可以，所以我們將詳細對于“App 福利、生活服務”的方式去掉，最終我們將底部區域選擇為：“首頁、寄快遞、我的”。

3. 搭建詳細頁面

問題已明確，我們就開始詳細頁面搭建，我們就會用到另外兩款 AI 工具“Figma（Wireframe Designer 插件）、即時設計（即時 AI）”。

這里同樣先利用“Chat GPT Classic”、“文心一言”它們理解上下文的能力讓它們給我們搭建布局框架。

首頁：

文軒：“根據這些，幫我搭建一下這款 App 首頁的布局”

“Chat GPT Classic”：

• 頂部區域：logo、應用名稱、圖標、登錄
• 主功能區：寄快遞、查快遞
• 快捷服務：提供如“歷史記錄”、“費用估算”、“常用地址”等快捷服務入口
• 底部導航欄：首頁、寄快遞、我的

“文心一言”：

• 頂部區域：引導語、logo
• 主功能區：寄快遞、查快遞
• 特色服務：代購、跑腿、廣告推薦
• 底部導航欄：首頁、寄快遞、我的

我們將這些信息梳理、結合競品，我們可以總結大致的功能結構如下：

• 頂部區域：特色標識
• 主功能區：寄快遞、查快遞
• 信息區：快遞信息
• 底部導航欄：首頁、寄快遞、我的

將這些信息梳理，接下來就可以代入“Wireframe Designer 插件（每月 10 次免費）、即時 AI（每日 20 次免費）”。

文軒：“一個寄快遞、查快遞的工具類 App，首頁分為四個區域：頂部區域展示特色標識，主功能區展示寄快遞、查快遞兩個功能，信息區域展示物流信息（包括未取件、已取件、派送中的狀態），底部導航欄為三個狀態”。

考慮 Wireframe Designer 準確我們翻譯成英文：“A tool app for sending and checking packages. The homepage is divided into four areas: the top area displays unique logos, the main functional area displays two functions: sending and checking packages, the information area displays logistics information, and the bottom navigation bar has three statuses”

看過了上述“Wireframe Designer 插件、即時 AI”的生成情況我們再次結合“競品”，就可以得出最終的布局。

這里對于“寄件、我的”的方法一致就不過多贅述啦，我們直接看效果吧。

4. AIGC 搭建可視化大屏

生成大屏需要用到三款工具“PS/Figma、Mid Journey”。

首先找到“Mid journey”還是使用“定制化”的方法。

文軒：“您現在是一名“Mid journey”專家，我現在需要您使用“Mid journey”生成數據大屏，背景包含地球元素，請您將提示次制作成相應的“Prompt”

（這里之所以讓“Chat GPT”以“Prompt”的形式是因為這樣他會以代碼形式發送我們們直接點擊“Copy code”就可以復制）

此指令當然不是我們想要的因為我們無法編輯，那么我們就要換種方式去問：

文軒：“你現在是“Mid Journey”專家，我想生成關于“數據大屏”的圖像，我應該輸入哪些相關的“Prompt””

我們可以看到他在詳細描述之后給我們了一個準確的“Prompt”：

“Design a modern style data big screen for commercial sales analysis. The main colors are blue and white, including line charts, pie charts, and maps. The large screen should display sales trends, regional sales distribution, and product category proportions. The interface is simple and high-tech.”

這樣我們的主視覺與表單參考就大致搞明白了當然這個樣子我們是無法當作實際項目去用的僅作為視覺參考，那么開始繪制可實際應用的效果。

我們可以在根“Chat GPT”前方的解析進行描述繪制，關鍵詞：

“Earth with China as the main body, HUD, FUI, Data visualization, 3D render, C4D, Dennis Schaefer, Futurism, Artstation, Behance, panoramic, screen is blue –ar 16:9”

這樣效果當作背景看起來就會好一些，我們在“PS/Figma”進行需求的表單繪制就得到最終效果（PS/Figma 繪制過程省略）。其實用了好多時間真正完全用 AI 生成的其實只有背景，但是不斷嘗試的過程也發現了好多有趣的方法。

我們在前面提到過的“定義——發散——重組——原型——測試——修改”其實就是羅子雄老師在接受訪談時說表達的“發散（參考競品）；尋找可能性、進行組合（產品、設計重組）；最小的原型；測試（周圍人進行測試，目標客戶），量化評估（用戶是否找到目標商品、用戶是否會找到目標）；修改”，我們要嘗試多種可能，因為只有不停的尋求變化在會找到一個我們滿意的答案。

三、AIGC 在 UI 設計中的發展趨勢

分析當前的趨勢和未來發展方向。

討論 AIGC 如何繼續影響和改變 UI 設計領域。

關于“AIGC 在 UI 設計中的發展趨勢”，這個問題我們不妨先來問下“Chat GPT”，看他是怎么回答：

文軒“深度分析一下：AIGC 在 UI 設計中的發展趨勢，以及 UI 設計師未來應當如何應對”

“Chat GPT”兩次回答圍繞了幾個共同點，“創意的提升”“更加滿足用戶體驗”，這兩點同時也是設計師應該所具備的兩個點，總體來說，AIGC 在 UI 設計中的發展趨勢是朝著更加個性化、高效、智能化和用戶中心的方向發展的。

UI 設計其實和交互設計是密不可分的，只有了解用戶才能真正做出來一款好的產品，AI 的到來像是給了這些一個標準答案，但是這對于設計來說是不對的，不論是“烏爾姆”、“包豪斯”還是現在的各種課程，都無疑告訴我們設計師還是要“以人為本感受生活”，生活本身，就是設計的開始；而設計，歸根結底就是對生活的發言。

“在短期內，人工智能更有可能改變工作的性質，而不是完全取代它們?！?/p>

四、總結

其實我們在使用“AI”工具時會發現不管是“Mid Journey”、“Stable Diffusion”、“Chat GPT”等他們看起來更像是一個理性的標準答案，但是設計的本質他并不是理性的，理性可以幫助我們做到標準化、一致化，但是真正去從內核影響到我們的一定是設計的表達、對生活的洞察力。

設計是將問題轉化為可能性的藝術。 這是一個本質上旨在解決問題的過程，也是一種以人為本的創新方法，整合人的需求、技術的可能性和商業成功的要求，更多去做一些“有溫度的作品”。就像理查德·格雷夫說的那樣“設計是信息和理解之間的中介?！?/p>

那么現在對于“AI 到底會不會取代我們”這個問題，你有答案了嗎？