工作效率超高!我讓AI幫我做UI設計了!

AI 盛行,現如今任何人通過一些簡單的學習,都可以使用 AI 輕易生成好看的插畫、元素,設計師的價值好像一夜之間變得一文不值。真實情況是什么呢?

我們拿一個需求舉例,這個需求要求我們做一個搖錢樹的主視覺,并且可以領取紅包,先看看交互:

工作效率超高!我讓AI幫我做UI設計了!

可以看到最主要的其實就是中間這個搖錢樹了,要是按照以前的設計路徑要搞定這個搖錢樹,要么就是繪制,要么用 C4D 建模渲染。

時長肯定都是半天甚至一天以上了,現在呢?

Midjourney、Stable Diffusion,AI 一鍵就能生成,10 分鐘我生成了這么多(AI 你不要太離譜):

工作效率超高!我讓AI幫我做UI設計了!

生成了這么多,我們需要先挑選一個合適的出來,那怎么挑呢,這里考驗的就是大家的審美能力和對需求的理解能力了。

我們肯定得有幾個篩選維度:

  1. 風格符合
  2. 造型符合
  3. 細節完善
  4. 元素符合
  5. 光影符合

更多AI 的落地案例分享:

一、風格符合

一般這種需求都有很強的運營屬性,為了激發用戶的參與度,往往視覺氛圍比較熱烈,所以采用一些高飽和和 3d 質感的風格比較多,我們也往這個方向去挑選,一些 2d 扁平畫風的直接就可以 pass 掉:

工作效率超高!我讓AI幫我做UI設計了!

二、造型符合

這里主要就是審美了,怎么從這么多里面挑一個比較不錯的出來呢?

工作效率超高!我讓AI幫我做UI設計了!

飽滿度:

我們挑選的時候一定要注重元素的飽滿度,比如下面這種就是不行的:

工作效率超高!我讓AI幫我做UI設計了!

三、元素顏色符合

我們也可以從組成元素的協調性和顏色豐富度上面去做篩選,比如下面兩個搖錢樹造型都相對比較飽滿,但是左圖的樹葉很單薄、鋒銳、像是紙錢,這不是很符合我們的設計審美;右圖呢就是顏色整體基本只有一個黃色,色彩配比上會比較單調。

工作效率超高!我讓AI幫我做UI設計了!

四、光影立體

還有一個點我們采用的素材,立體度一定要夠,這樣才能出視覺優秀的圖,像下面的兩張圖,左圖的光影整體看過去沒有明顯的亮面和暗面,缺乏對比。就會比較平。相對的右圖就有明顯的明暗對比,就會顯得立體很多。

工作效率超高!我讓AI幫我做UI設計了!

最后我們選定了這一個素材,比較符合我們的預期,(其實也有點不是很完美)。

工作效率超高!我讓AI幫我做UI設計了!

我們把他放到頁面中看看:

工作效率超高!我讓AI幫我做UI設計了!

放是放進去了,那要怎么落地呢?

背景是怎樣?按鈕是怎樣?配色是怎樣?是不是有人又要麻瓜了?

這一步就提現設計師的重要性了,為了滿足項目不是單單會 AI 生圖就可以,最重要的是要保證項目的落地!

我們來發動一下專業技能!

第一步:首先是基礎配色!

我們可以用主體元素的同類色顏色去延展。

首先我們的元素主色先提出來:

工作效率超高!我讓AI幫我做UI設計了!

這樣我們就得輕易得到了兩個顏色,把他們用以鋪設畫面中:

工作效率超高!我讓AI幫我做UI設計了!

主色用以鋪色整個背景,而點綴色就可以用在按鈕這類比較小的部分上面。這樣的配色不會有多出彩,但是也不會出錯,非常的穩。

第二步:光影!

有了大色調,但是不是太生了點。

為了讓畫面更生動,富有沖擊力,那我們就需要光影的加入去塑造畫面!

首先可以給畫面設置一個光源。

光源應該設置在哪呢?

看下我們的現在的畫面,主元素是黃色,背景色也是黃色的,就會讓我們的搖錢樹沒有那么突出。

所以,我們可以把光源設置在元素的正后方,讓更亮的顏色來把主體元素襯托凸顯出來!

工作效率超高!我讓AI幫我做UI設計了!

可以看到我們加了光影之后主體元素得到很好的突出!

我們剛才只是加了光源,屬于是對亮部的調整;

那相對應的我們也要對暗部進行調整,讓暗部更暗一些,從而加強整體畫面的明暗對比,并且要加入色相的變化,比如我們亮部的光源是往檸檬黃去偏移了色相,暗部就可以往橙紅色去偏移色相:

工作效率超高!我讓AI幫我做UI設計了!

這樣子的話我們整個畫面的顏色就豐富了一層,多了一種顏色變化。但是還都是暖色,暗部的話還是希望盡量冷一些,讓畫面有冷暖對比才是最好的。

所以我們可以在暗部再加一種顏色:

工作效率超高!我讓AI幫我做UI設計了!

把這幾種顏色鋪設到畫面中去:

工作效率超高!我讓AI幫我做UI設計了!

可以看到,我們加入了光影之后,不僅對比加強了,畫面的配色也更豐富多彩了;所以其實,我們加入光影的同時,其實也是再豐富配色。這兩個是相輔相成的。如果我們只加入光影而不考慮顏色變化的話,就還是會保持很單調配色。我們看下不考慮色相變化的樣子是什么樣的:

工作效率超高!我讓AI幫我做UI設計了!

這種就很不好看,暗部顏色也很臟。

第三步:融合!

到這里我們的畫面的大感覺就差不多定性了,剩下一些主體的和光影的融合,讓畫面更整體自然。

工作效率超高!我讓AI幫我做UI設計了!

調整方法:

(1)利用顏色減淡提亮

直接復制一層主元素,改成顏色減淡模式,透明度 23%

工作效率超高!我讓AI幫我做UI設計了!

(2)疊加模式調色

新建一個圖層,疊加模式,適用高明度的紅色去涂抹暗部:

工作效率超高!我讓AI幫我做UI設計了!

(3)給主體邊緣打光

新建圖層,濾色模式,在主體和光源銜接的地方涂抹亮色:

工作效率超高!我讓AI幫我做UI設計了!

來對比一下融入前和融入后的區別:

工作效率超高!我讓AI幫我做UI設計了!

融入后顏色更好看,光影也更符合畫面的光影規律了!

第四步:豐富背景細節

目前背景我們只做了顏色光影的變化,有些空,我們可以加入一些景物或光線,以豐富畫面的細節。

工作效率超高!我讓AI幫我做UI設計了!

我們的畫面現在就比較豐富好看了對不。

最后我們來加入 UI 模塊,整體看下效果:

工作效率超高!我讓AI幫我做UI設計了!

完成!

整個流程下來,可以看到 AI 確實很好用,可以很快地輸出很多方向和素材,但在整個項目流程中其實只占了很小的一部分,前期的篩選能力考驗設計師的審美,后期的調整、背景的融入、細節的優化、UI 界面的設計考驗設計師的專業技能,整個都還是需要設計師去親力親為才能保證高視覺品質的去落地需求。

所以大家大可不必去焦慮,打鐵還需自身硬,把自己的專業做好,AI 的出現只會成為你快速進步的工具,讓你實現可以用更短的時間,輸出質量更高的作品,而不會成為你焦慮的原因!

歡迎關注作者的微信公眾號:「菜心設計鋪」

工作效率超高!我讓AI幫我做UI設計了!

收藏 142
點贊 115

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