熱評 解決師Blue

從結果上來看,大部分UI輔助的都是圖標應用的案例,可以反向推導一下,還可以應用到手機應用主題類型的UI上。 另外,如果可以產出引導頁的設計,那么B端的使用是不是就不僅僅局限在在網頁圖標上,要知道,B端在單一場景下可以落地使用,但只是局部使用,真正B端應用廣泛的視覺還是整個項目的插圖系統,在設計具體的插圖時,我們需要根據插圖的內容、類型、價值以及應用場景等因素生成不同的元素的組合,合理的安排畫面結構。

AIGC如何落地?超多項目拆解之UI設計篇

AIGC如何落地?超多項目拆解之UI設計篇

一、AI 繪畫在工作中的流程

在 UI 設計工作中,我們都會用到相同的工作流程,首先接到產品給到的需求,然后我們會進行需求的分析,根據分析去找合適的參考,之后進行我們的初稿設計。

同樣,在使用 AI 工具時,我們的工作流程并沒有發生改變,改變的只是我們出圖的效率以及效果,比如我們在經過分析和找到參考后,我們進行設計時,會花費大量的時間進行設計。而現在,AI 繪畫完全可以幫助我們進行設計,我們只需要進行關鍵詞的調試,即可短時間做出不錯的設計,我預計可以提升大概 60%-70%的設計時間(這里還只是保守估計)。

往期教程:

AIGC如何落地?超多項目拆解之UI設計篇

而且,我們進行初稿設計后,會經歷令設計師感到非常痛苦的設計評審,公司的大佬們都會指點江山般的給你提出設計意見(我就是!!),然后你可能經歷 1 稿、2 稿、3 稿.....

我們可以利用 AI 繪畫來輔助設計工作。例如,在評審之前,我們可以使用 AI 生成五種設計方案(可以更多,嘿嘿),供評審大佬們選擇.......(狗頭保命)

AIGC如何落地?超多項目拆解之UI設計篇

廢話不多說,接下來為大家展示用 AI 創作一些可落地的工作參考:

二、引導頁設計

醫療 app——扁平插畫風格

這里我們以一個“醫療 app”為例子,我們接到的需求是做一組醫療 app 的引導頁設計,需要使用扁平插畫的設計風格,然后我們去找到合適的參考,根據參考出的特性進行關鍵詞的描述,提煉關鍵詞并進行 prompt 組合。

1. 需求分析

醫療 app 引導頁設計,風格:扁平插畫風格

AIGC如何落地?超多項目拆解之UI設計篇

2. 參考借鑒

去花瓣、站酷、behance 上找到合適的參考,我們根據參考的圖片來描述關鍵詞,比如畫面人物之間的動作描述。

AIGC如何落地?超多項目拆解之UI設計篇

3. 關鍵詞描述

我們按照 midjourney 的詞組順序來描述,這里我按照第一張參考圖的動作來進行描述

AIGC如何落地?超多項目拆解之UI設計篇

4. Midjourney 生成的圖片

可以看到,midjourney 生成的圖片顏色并不能保持統一,不過這個問題不大,我們只需要選取合適的圖片,然后后期用 PS 等工具稍微修飾一下即可了。

AIGC如何落地?超多項目拆解之UI設計篇

5. 應用項目中的效果

AIGC如何落地?超多項目拆解之UI設計篇

三、勛章設計

成就勛章設計

這里我得到的需求是做一個娛樂 app 的勛章設計,元素需要豐富、質感華麗、情感傳達熱烈、體型飽滿、勛章精致。得到需求后我們去拆解相關信息,然后根據整理的信息去找到類似的參考,這里我根據找到的風格直接用 Midjourney 的“喂圖”功能,然后輸入需求相關的關鍵詞并組合,如下:

1. 需求分析

娛樂 app 的勛章設計,元素需要豐富、質感華麗、情感傳達熱烈、體型飽滿、勛章精致。

AIGC如何落地?超多項目拆解之UI設計篇

2. 參考借鑒

參考來自花瓣,這種風格就是比較適合我們需求的設計,所以我們這里借鑒一下,把圖片喂給 Midjourney。

AIGC如何落地?超多項目拆解之UI設計篇

3. 關鍵詞描述

喂圖之后還需要輸入我們根據需求整理的關鍵詞,把這些關鍵詞和圖片鏈接一起發送給 midjourney。

AIGC如何落地?超多項目拆解之UI設計篇

完整關鍵詞:A shining badge with wings, Star, Badge logo, UI Design, Front view, Stereo, Bright. Black background, Digital illustration, Popular on Dribbble, noword, hyper detail, 4k --v 4

4. Midjourney 生成的圖片

這里生成的細節并不好,主要是中間標志區域,會出現變形的問題,不過問題不大,我們是設計師,后期調整一下,調整吃力的我們就多跑幾組圖片即可。

AIGC如何落地?超多項目拆解之UI設計篇

5. 應用項目中的效果

AIGC如何落地?超多項目拆解之UI設計篇

四、閃屏頁設計

淘寶閃屏頁設計

這里我得到的需求是做一個淘寶 app 的閃屏頁:設計一個具有親和力和活力的大男孩形象,站在露營場景中彈吉他,搭配舒適、美觀、吸引人的色彩和文案設計,以展示休閑娛樂和自然風光的美好。

1. 需求分析

我們分析需求的確定相應的元素,如露營場地,大男孩,彈吉他。

AIGC如何落地?超多項目拆解之UI設計篇

2. 參考借鑒

去素材網上參考一下,然后整理出素材圖片,根據參考的圖片得出相應的關鍵詞。

AIGC如何落地?超多項目拆解之UI設計篇

3. 關鍵詞描述

我們按照 midjourney 的詞組順序來描述,這里我按照第一張參考圖的動作來進行描述

AIGC如何落地?超多項目拆解之UI設計篇

完整關鍵詞:laughing child, symmetrical portrait, clear features, wearing a hat, rural summer, picnic, playing guitar, camping, tent, grass, flying a kite, hills, green, nature, poster, masterpiece, best quality, Pixar style 3d character, octane rendering, Hayao Miyazaki --ar 9:16 --niji

4. Midjourney 生成的圖片

有些圖片比較夸張了,不過問題不大,我們經過多跑圖,進行篩選就好啦,這是個體力活....

AIGC如何落地?超多項目拆解之UI設計篇

5. 應用項目中的效果

AIGC如何落地?超多項目拆解之UI設計篇

五、直播禮物元素

3D 小元素設計

這里我得到的需求是做一個直播禮物的小元素,元素需要豐富、質感華麗、情感傳達熱烈、體型飽滿。得到需求后我們去拆解相關信息,然后根據整理的信息去找到類似的參考,這里我根據找到的風格直接用 Midjourney 的“喂圖”功能,然后輸入需求相關的關鍵詞并組合,如下:

1. 需求分析

娛樂 app 的勛章設計,元素需要豐富、質感華麗、情感傳達熱烈、體型飽滿、勛章精致。

AIGC如何落地?超多項目拆解之UI設計篇

2. 參考借鑒

參考來自花瓣,這種風格就是比較適合我們需求的設計,所以我們這里借鑒一下,把圖片喂給 Midjourney。

AIGC如何落地?超多項目拆解之UI設計篇

3. 關鍵詞描述

喂圖之后還需要輸入我們根據需求整理的關鍵詞,把這些關鍵詞和圖片鏈接一起發送給 midjourney。

AIGC如何落地?超多項目拆解之UI設計篇

4. Midjourney 生成的圖片

同樣我們需要多跑幾組關鍵詞,才會有相對滿意的圖片,這里的風格主要受到喂圖片的影響,多試試幾次,然后找到合適的,后期處理一下吧。

AIGC如何落地?超多項目拆解之UI設計篇

5. 應用項目中的效果

AIGC如何落地?超多項目拆解之UI設計篇

六、B 端網頁設計

b 端圖標設計

這里我得到的需求是做一個 B 端網頁設計:設計一個符合 UI 規范和標準、能夠清晰傳達出現代科技感并與產品整體視覺風格相符的網頁圖標,提升用戶品牌認知和體驗。

1. 需求分析

這類需求在 b 端中很常見,科技風的圖標,符合品牌調性。

AIGC如何落地?超多項目拆解之UI設計篇

2. 參考借鑒

參考來自花瓣,這種風格就是比較適合我們需求的設計,所以我們這里借鑒一下,這里需要喂圖控制下色調和視角,然后把圖片喂給 Midjourney。

AIGC如何落地?超多項目拆解之UI設計篇

3. 關鍵詞描述

喂圖之后輸入細節關鍵詞,讓關鍵詞控制主體樣式,這類圖標的渲染器用 oc 渲染器,參考國外網站的風格就沒啥問題了。

AIGC如何落地?超多項目拆解之UI設計篇

完整關鍵詞:B2B 3D scenes, an operation center icon, white and blue, frosted glass, transparent technology sense, industrial design, isometric view, light gray background with simple linear detail, studio lighting, 3d, c4d, blender, OCrenderer, pinterest, dribbble, high detail, 8k --v 4

4. Midjourney 生成的圖片

這類圖標生成的圖大部分沒啥問題,細節稍微修修改就能用了,重要是細節是不是我們需要的,改細節的方式還是通過關鍵詞控制即可。

AIGC如何落地?超多項目拆解之UI設計篇

5. 應用項目中的效果

AIGC如何落地?超多項目拆解之UI設計篇

寫在最后

以上就是本期為大家分享的商業案例,我們可以將 AI 視作一個工具,為自己的工作帶來增效,而無需感到恐慌和被替代的擔憂。祝大家生活愉快!

本次教學分享到此結束,如果您有任何問題,可以與我私信聯系:

AIGC如何落地?超多項目拆解之UI設計篇

收藏 219
點贊 56

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