有關(guān)AIGC的討論已經(jīng)有很多，現(xiàn)在，我們不妨看看實(shí)戰(zhàn)角度的分享。這篇文章里，作者結(jié)合實(shí)戰(zhàn)案例，分享了如何用AIGC去做界面，以及如何用AIGC來幫助我們做出優(yōu)化。一起來看看本文的梳理吧。

我們的行業(yè)不尊重傳統(tǒng)，只尊重創(chuàng)新。

“AI 到底會(huì)不會(huì)取代我們”？這個(gè)問題我們留在結(jié)尾與大家探討，現(xiàn)在我就開始學(xué)習(xí)如何用AIGC去做界面、以及怎樣指導(dǎo)我們進(jìn)行優(yōu)化。

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

一、UI 設(shè)計(jì)的基本原則與 AIGC 的融合

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

以下就是幾點(diǎn)“UI 設(shè)計(jì)的原則”與“AIGC”結(jié)合的理論分析。

1. 一致性與風(fēng)格化的 AIGC

• 原則：UI設(shè)計(jì)強(qiáng)調(diào)界面元素的一致性，包括顏色、字體、布局等。
• 融合： AIGC可以生成與應(yīng)用風(fēng)格一致的圖像或文本。例如，如果一個(gè)應(yīng)用的UI風(fēng)格是極簡(jiǎn)主義，那么AI可以生成簡(jiǎn)潔、風(fēng)格統(tǒng)一的圖像或文本內(nèi)容，以保證整體風(fēng)格的一致性。
• 技巧：利用Stable Diffusion訓(xùn)練模型、MidJourney（seed、tune）、文心一言、Chat GPT結(jié)合上下文的能力都可以為我們搞定一致性的問題

2. 反饋與交互式 AIGC

• 原則： 及時(shí)的反饋是提高用戶體驗(yàn)的關(guān)鍵。
• 融合： 使用AIGC實(shí)時(shí)生成反饋內(nèi)容。比如在一個(gè)線上教育平臺(tái)，學(xué)生提交答案后，AI立即生成個(gè)性化的反饋和建議，增強(qiáng)學(xué)習(xí)體驗(yàn)。
• 技巧：可以嘗試將“Chat GPT”的API接口嘗試容入產(chǎn)品，此方案也是各大教育類App經(jīng)常使用的方案。

3. 簡(jiǎn)化操作與智能化 AIGC

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

4. 可用性與適應(yīng)性 AIGC

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

5. 吸引力與創(chuàng)意 AIGC

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

通過與 AIGC 的結(jié)合我可以看到，它似乎在讓我們更高效、更豐富、更標(biāo)準(zhǔn)的去做設(shè)計(jì)，那么我們可以察覺到一個(gè)問題“更標(biāo)準(zhǔn)的去做設(shè)計(jì)”究竟是好還是壞？

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

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

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

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

文軒：你身為一名資深的交互設(shè)計(jì)師，如果現(xiàn)在想搭建一款工具類的產(chǎn)品，這款 App 的主要作用是“寄快遞、查快遞”，具體方法應(yīng)該怎么做。

那么我們看一下“Chat GPT Classic”和“文心一言”的回答，我們?cè)俑鶕?jù)共同的重點(diǎn)提煉關(guān)鍵詞。

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

Chat GPT Classic：

• 核心功能：寄快遞（包括填寫收發(fā)地址、選擇快遞公司、預(yù)估費(fèi)用、預(yù)約取件等）和查快遞（快遞追蹤、狀態(tài)更新通知等）。
• 附加功能：歷史記錄查詢、費(fèi)用估算、用戶評(píng)價(jià)系統(tǒng)、常用地址保存等。

文心一言：

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

這里“文心一言”的回答更加標(biāo)準(zhǔn)化，但是在理解思維上“Chat GPT”更勝一籌，因?yàn)槲覇栴}是“主要作用是寄快遞、查快遞”只有“Chat GPT”是圍繞這個(gè)展開的。

2. 刨根問底

在我們得到答案后，借助“文本類 AI”聯(lián)系上下文的能力我們可以在跟深層次的回答，讓它們?yōu)槲覀冎苯永L制原型圖與信息架構(gòu)。

文軒：“請(qǐng)你根據(jù)以上的回答幫我繪制出這個(gè) App 的線框圖與信息架構(gòu)”。

信息架構(gòu)：

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

這個(gè)環(huán)節(jié)我們先去參考一下競(jìng)品“順風(fēng)、菜鳥、豐巢”看一下他們的布局結(jié)構(gòu)。

我們這里可以發(fā)現(xiàn)基本都是圍繞在“4 個(gè)”，問題在于初始 App 滿足核心功能產(chǎn)品可用就可以，所以我們將詳細(xì)對(duì)于“App 福利、生活服務(wù)”的方式去掉，最終我們將底部區(qū)域選擇為：“首頁、寄快遞、我的”。

3. 搭建詳細(xì)頁面

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

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

首頁：

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

“Chat GPT Classic”：

• 頂部區(qū)域：logo、應(yīng)用名稱、圖標(biāo)、登錄
• 主功能區(qū)：寄快遞、查快遞
• 快捷服務(wù)：提供如“歷史記錄”、“費(fèi)用估算”、“常用地址”等快捷服務(wù)入口
• 底部導(dǎo)航欄：首頁、寄快遞、我的

“文心一言”：

• 頂部區(qū)域：引導(dǎo)語、logo
• 主功能區(qū)：寄快遞、查快遞
• 特色服務(wù)：代購(gòu)、跑腿、廣告推薦
• 底部導(dǎo)航欄：首頁、寄快遞、我的

我們將這些信息梳理、結(jié)合競(jìng)品，我們可以總結(jié)大致的功能結(jié)構(gòu)如下：

• 頂部區(qū)域：特色標(biāo)識(shí)
• 主功能區(qū)：寄快遞、查快遞
• 信息區(qū)：快遞信息
• 底部導(dǎo)航欄：首頁、寄快遞、我的

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

文軒：“一個(gè)寄快遞、查快遞的工具類 App，首頁分為四個(gè)區(qū)域：頂部區(qū)域展示特色標(biāo)識(shí)，主功能區(qū)展示寄快遞、查快遞兩個(gè)功能，信息區(qū)域展示物流信息（包括未取件、已取件、派送中的狀態(tài)），底部導(dǎo)航欄為三個(gè)狀態(tài)”。

考慮 Wireframe Designer 準(zhǔn)確我們翻譯成英文：“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 插件、即時(shí) AI”的生成情況我們?cè)俅谓Y(jié)合“競(jìng)品”，就可以得出最終的布局。

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

4. AIGC 搭建可視化大屏

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

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

文軒：“您現(xiàn)在是一名“Mid journey”專家，我現(xiàn)在需要您使用“Mid journey”生成數(shù)據(jù)大屏，背景包含地球元素，請(qǐng)您將提示次制作成相應(yīng)的“Prompt”

（這里之所以讓“Chat GPT”以“Prompt”的形式是因?yàn)檫@樣他會(huì)以代碼形式發(fā)送我們們直接點(diǎn)擊“Copy code”就可以復(fù)制）

此指令當(dāng)然不是我們想要的因?yàn)槲覀儫o法編輯，那么我們就要換種方式去問：

文軒：“你現(xiàn)在是“Mid Journey”專家，我想生成關(guān)于“數(shù)據(jù)大屏”的圖像，我應(yīng)該輸入哪些相關(guān)的“Prompt””

我們可以看到他在詳細(xì)描述之后給我們了一個(gè)準(zhǔn)確的“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.”

這樣我們的主視覺與表單參考就大致搞明白了當(dāng)然這個(gè)樣子我們是無法當(dāng)作實(shí)際項(xiàng)目去用的僅作為視覺參考，那么開始繪制可實(shí)際應(yīng)用的效果。

我們可以在根“Chat GPT”前方的解析進(jìn)行描述繪制，關(guān)鍵詞：

“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”

這樣效果當(dāng)作背景看起來就會(huì)好一些，我們?cè)凇癙S/Figma”進(jìn)行需求的表單繪制就得到最終效果（PS/Figma 繪制過程省略）。其實(shí)用了好多時(shí)間真正完全用 AI 生成的其實(shí)只有背景，但是不斷嘗試的過程也發(fā)現(xiàn)了好多有趣的方法。

我們?cè)谇懊嫣岬竭^的“定義——發(fā)散——重組——原型——測(cè)試——修改”其實(shí)就是羅子雄老師在接受訪談時(shí)說表達(dá)的“發(fā)散（參考競(jìng)品）；尋找可能性、進(jìn)行組合（產(chǎn)品、設(shè)計(jì)重組）；最小的原型；測(cè)試（周圍人進(jìn)行測(cè)試，目標(biāo)客戶），量化評(píng)估（用戶是否找到目標(biāo)商品、用戶是否會(huì)找到目標(biāo)）；修改”，我們要嘗試多種可能，因?yàn)橹挥胁煌５膶で笞兓跁?huì)找到一個(gè)我們滿意的答案。

三、AIGC 在 UI 設(shè)計(jì)中的發(fā)展趨勢(shì)

分析當(dāng)前的趨勢(shì)和未來發(fā)展方向。

討論 AIGC 如何繼續(xù)影響和改變 UI 設(shè)計(jì)領(lǐng)域。

關(guān)于“AIGC 在 UI 設(shè)計(jì)中的發(fā)展趨勢(shì)”，這個(gè)問題我們不妨先來問下“Chat GPT”，看他是怎么回答：

文軒“深度分析一下：AIGC 在 UI 設(shè)計(jì)中的發(fā)展趨勢(shì)，以及 UI 設(shè)計(jì)師未來應(yīng)當(dāng)如何應(yīng)對(duì)”

“Chat GPT”兩次回答圍繞了幾個(gè)共同點(diǎn)，“創(chuàng)意的提升”“更加滿足用戶體驗(yàn)”，這兩點(diǎn)同時(shí)也是設(shè)計(jì)師應(yīng)該所具備的兩個(gè)點(diǎn)，總體來說，AIGC 在 UI 設(shè)計(jì)中的發(fā)展趨勢(shì)是朝著更加個(gè)性化、高效、智能化和用戶中心的方向發(fā)展的。

UI 設(shè)計(jì)其實(shí)和交互設(shè)計(jì)是密不可分的，只有了解用戶才能真正做出來一款好的產(chǎn)品，AI 的到來像是給了這些一個(gè)標(biāo)準(zhǔn)答案，但是這對(duì)于設(shè)計(jì)來說是不對(duì)的，不論是“烏爾姆”、“包豪斯”還是現(xiàn)在的各種課程，都無疑告訴我們?cè)O(shè)計(jì)師還是要“以人為本感受生活”，生活本身，就是設(shè)計(jì)的開始；而設(shè)計(jì)，歸根結(jié)底就是對(duì)生活的發(fā)言。

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

四、總結(jié)

其實(shí)我們?cè)谑褂谩癆I”工具時(shí)會(huì)發(fā)現(xiàn)不管是“Mid Journey”、“Stable Diffusion”、“Chat GPT”等他們看起來更像是一個(gè)理性的標(biāo)準(zhǔn)答案，但是設(shè)計(jì)的本質(zhì)他并不是理性的，理性可以幫助我們做到標(biāo)準(zhǔn)化、一致化，但是真正去從內(nèi)核影響到我們的一定是設(shè)計(jì)的表達(dá)、對(duì)生活的洞察力。

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

那么現(xiàn)在對(duì)于“AI 到底會(huì)不會(huì)取代我們”這個(gè)問題，你有答案了嗎？