AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

前言

目前,人工智能技術的發展已經取得了令人矚目的成就。不論是自然語言處理還是計算機視覺,人工智能都有了顯著的進展。就視覺設計師而言,我們不得不承認 AI 通過不斷的算法學習與技術更新,其生成的圖像著實令人驚嘆,但我們也不難發現,當下 AI 繪圖還是有很多的局限性,比如生成質量不穩定、缺乏抽象能力等。

那么本文也將延續前文《AIGC 對設計行業的影響與啟發》、《AI 在 UX 設計流程中的應用大全》,繼續談一談 AI 在視覺設計工作中的應用。

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

一、AI 繪圖能代替視覺設計師嗎?

在實際使用中我們發現,AI 往往對于具象的需求表現得更好,而對于抽象需求表現得較差。

比如,AI 可能無法穩定地繪制出如下靠左的相機圖標,但可以快而穩定地繪制出右邊的相機圖像,而人工去繪制右邊的相機可能至少需要一天,還不一定有 AI 的效果好。

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

因此作為視覺設計師,AI 繪圖充當的依舊是協作伙伴的角色,而實際的產出還是依賴于我們本身的設計判斷和審美能力。

但哪怕僅僅只是這點,它能所帶來的改變也是無與倫比的。

以往面對大部分的設計需求,設計師首先需要在網上搜尋大量的參考,進行腦暴、制定情緒版、確定設計風格,然后才能開始設計。期間還要與需求方唇槍舌戰、來回改稿。而現在我們通過輸入指令、圖片和相關信息,AI 工具就可以快速生成滿足需求的視覺內容,這可以極大地縮減整體設計的時間。

而這種變革與提效,也正是 AI 為我們帶來的最大價值。

二、什么 AI 工具更好用?

當前市面有非常多的 AI 繪圖軟件可供選擇,典型如 Midjourney、Stable diffusion、Dall E 等,多是基于大模型通過文生圖、圖生圖的方式得到結果。

其中,Stable diffusion 的學習成本和部署難度不太友好,Dall E 的能力和可控度都相對較弱,Midjourney 算是其中綜合能力較強且上手難度較低的選擇。

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

下面我們也將以 Midjourney 為例,來為大家展現 AI 工具在視覺設計需求中的實際使用。

三、如何在產品視覺設計流程中應用 AI?

目前在群核科技的視覺設計團隊內部,AI 輔助設計工作已經有一段時間了,從前期需求溝通到設計方向確認、再到設計產出和調整都有對于 AI 工具的應用。

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

下面我們將從兩個實際案例出發,來為大家進行 AI 應用的展示:

案例一、VIP 會員日

Step1 需求溝通

①使用飛書妙計進行會議記錄,并使用 ChatGPT 總結需求(示意)

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

②使用即時 AI/UIzard 生成頁面框架,并確定需要由 AI 生成的主畫面內容(示意)

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

Step2 設計方向

①使用 Chatgpt 輔助構思核心創意

②書寫中文自然語言,讓 ChatGPT 翻譯成標準的提示詞

輸入主畫面描述:

畫面的中心是一個圓形平臺,周圍是城市中的高樓大廈,白色背景和白色建筑

得到英文文案:

The center of the picture is a circular platform surrounded by tall buildings in the city, with a white background and white buildings

添加風格,材質以及圖像參數設定

風格:藝術 3D,pop mart,,c4d

材質:粘土材料

參數:高品質,8k --s 50 --ar 16:9 --style scenic --niji 5

最終得到完整的提示詞文案:

The center of the picture is a circular platform surrounded by tall buildings in the city, with a white background and white buildings,Pop Mart and Cinema 4D,create 3D characters with cartoon-style,best quality,clay material,8k --s 50 --ar 16:9 --style scenic --niji 5

③輸入提示詞,用 Midjourney 產出相對應的風格圖片

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

Step3 設計素材

①基于情緒版提案,輸入初步確定方案的提示詞和相關風格圖片,產出對應圖片素材

提示詞:

主體:畫面中心是一個圓形平臺,周圍是城市中的高樓大廈

場景細節:白色背景和白色建筑,金線裝飾著建筑

風格:藝術 3D,pop mart,c4d

材質:粘土材料

參數:高品質,8k--s 50-ar 3:4--niji 5--niji 5The center of the picture is a circular platform surrounded by tall buildings in the city, with a white background and white buildings,Gold lines adorn the building,Pop Mart and Cinema 4D,3D characters,best quality,clay material,8k --s 50 --ar 16:9 --style scenic --niji 5

墊圖:

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

②多次調試得到滿意的初稿,挑選合適方向的畫面進行二次調整

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

③最終選取以下圖片為最終素材

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

Step4 設計產出

①將選定素材進行調色處理、局部調整

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

②根據畫面需要,使用 MJ 生成裝飾圖形,并在群核星辰素材平臺找到適合主題的 IP 形象

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

③合成畫面,加入 UI 界面元素,整體調整并輸出最終視覺稿

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

案例二、認證中心探索

Step1 需求溝通

①使用飛書妙計進行會議記錄,并使用 ChatGPT 總結需求

②使用即時 AI/UIzard 生成頁面框架,并確定需要由 AI 生成的主畫面內容

Step2 設計方向

①找到合適風格和構圖的靈感圖

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

Step3 設計素材

①基于情緒版提案,輸入初步確定方案的提示詞和相關風格圖片,產出對應圖片素材

主體:魔方顆粒

材質:磨砂玻璃白色丙烯酸材料

背景:黑色背景

風格:透明科技感

參數:8k,-iw 1-v 5-q 2-ar 16:9

Rubik's Cube Particle,frosted glass white acrylic material,white beckground,transparent technology sense,8k,—iw 1 —v 5 —q 2 —ar 16:9

墊圖:同上

②多次調試得到滿意的初稿,挑選合適方向的畫面進行二次調整

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

Step4 設計產出

①合成畫面,加入 UI 界面元素,整體調整并輸出最終視覺稿

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

四、AI 還能為我們帶來什么?

AI 工具所能帶來的顛覆性變化毋庸置疑,但我們也發現了一個問題,在設計同學利用 AI 工具進行業務產出時,大家的設計風格愈加地不統一,包括每個案例間的共性和差異都是盲盒。

所以我們也藉由 AI 探索小組的契機,去對一段時間內的產出進行了搜集與歸類,并將盲盒拆開,沉淀出了 AI 指令庫。畢竟業務在設計規范的框架下,設計產物都是指向明確且可被復制的。

而通過 AI 指令庫,我們可以快速定位到類似案例,并通過指令準確地生成我們想要的產物。

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

總結

以上是我們在視覺設計工作中應用 AI 的一些探索,雖然 AI 概念已經從熱轉冷,但整個行業其實仍處于起步階段。未來 AI 會怎么發展?我覺得大概有三點:

  1. 能力增強:硬件必然會提升,AI 也將持續提升技術水平,不僅僅是生圖的快速和準確,還包括增強學習、遷移學習和自適應學習。
  2. 交互升級:不局限于當前文生圖、圖生圖的方式,語音、視頻等自然語言處理技術的發展將使人與 AI 之間的交互更加多變且順暢。
  3. 門檻降低:隨著行業發展和各方入局,未來的使用門檻必定會進一步降低,包括也會隨著競爭而使其擁有更準確和定制化的服務和產品。

當然,時代一直在轉,不知道什么時候新的變革就會到來,我們裹挾其間,只能不斷改變自己以更加適應時代。

保持熱愛、積極擁抱,謹此獻給仍處一線卻依舊迎難而上的每個我們。

歡迎關注作者微信公眾號:「群核科技用戶體驗設計」

AI如何應用到產品視覺設計流程中?來看獨角獸團隊的實戰案例!

收藏 140
點贊 65

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