工作效率超高！我讓AI幫我做UI設(shè)計(jì)了！

AI 盛行，現(xiàn)如今任何人通過(guò)一些簡(jiǎn)單的學(xué)習(xí)，都可以使用 AI 輕易生成好看的插畫(huà)、元素，設(shè)計(jì)師的價(jià)值好像一夜之間變得一文不值。真實(shí)情況是什么呢？

我們拿一個(gè)需求舉例，這個(gè)需求要求我們做一個(gè)搖錢(qián)樹(shù)的主視覺(jué)，并且可以領(lǐng)取紅包，先看看交互：

可以看到最主要的其實(shí)就是中間這個(gè)搖錢(qián)樹(shù)了，要是按照以前的設(shè)計(jì)路徑要搞定這個(gè)搖錢(qián)樹(shù)，要么就是繪制，要么用 C4D 建模渲染。

時(shí)長(zhǎng)肯定都是半天甚至一天以上了，現(xiàn)在呢？

Midjourney、Stable Diffusion，AI 一鍵就能生成，10 分鐘我生成了這么多（AI 你不要太離譜）：

生成了這么多，我們需要先挑選一個(gè)合適的出來(lái)，那怎么挑呢，這里考驗(yàn)的就是大家的審美能力和對(duì)需求的理解能力了。

我們肯定得有幾個(gè)篩選維度：

1. 風(fēng)格符合
2. 造型符合
3. 細(xì)節(jié)完善
4. 元素符合
5. 光影符合

更多AI 的落地案例分享：

一、風(fēng)格符合

一般這種需求都有很強(qiáng)的運(yùn)營(yíng)屬性，為了激發(fā)用戶的參與度，往往視覺(jué)氛圍比較熱烈，所以采用一些高飽和和 3d 質(zhì)感的風(fēng)格比較多，我們也往這個(gè)方向去挑選，一些 2d 扁平畫(huà)風(fēng)的直接就可以 pass 掉：

二、造型符合

這里主要就是審美了，怎么從這么多里面挑一個(gè)比較不錯(cuò)的出來(lái)呢？

飽滿度：

我們挑選的時(shí)候一定要注重元素的飽滿度，比如下面這種就是不行的：

三、元素顏色符合

我們也可以從組成元素的協(xié)調(diào)性和顏色豐富度上面去做篩選，比如下面兩個(gè)搖錢(qián)樹(shù)造型都相對(duì)比較飽滿，但是左圖的樹(shù)葉很單薄、鋒銳、像是紙錢(qián)，這不是很符合我們的設(shè)計(jì)審美；右圖呢就是顏色整體基本只有一個(gè)黃色，色彩配比上會(huì)比較單調(diào)。

四、光影立體

還有一個(gè)點(diǎn)我們采用的素材，立體度一定要夠，這樣才能出視覺(jué)優(yōu)秀的圖，像下面的兩張圖，左圖的光影整體看過(guò)去沒(méi)有明顯的亮面和暗面，缺乏對(duì)比。就會(huì)比較平。相對(duì)的右圖就有明顯的明暗對(duì)比，就會(huì)顯得立體很多。

最后我們選定了這一個(gè)素材，比較符合我們的預(yù)期，(其實(shí)也有點(diǎn)不是很完美）。

我們把他放到頁(yè)面中看看：

放是放進(jìn)去了，那要怎么落地呢？

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

這一步就提現(xiàn)設(shè)計(jì)師的重要性了，為了滿足項(xiàng)目不是單單會(huì) AI 生圖就可以，最重要的是要保證項(xiàng)目的落地！

我們來(lái)發(fā)動(dòng)一下專業(yè)技能！

第一步：首先是基礎(chǔ)配色！

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

首先我們的元素主色先提出來(lái)：

這樣我們就得輕易得到了兩個(gè)顏色，把他們用以鋪設(shè)畫(huà)面中：

主色用以鋪色整個(gè)背景，而點(diǎn)綴色就可以用在按鈕這類比較小的部分上面。這樣的配色不會(huì)有多出彩，但是也不會(huì)出錯(cuò)，非常的穩(wěn)。

第二步:光影!

有了大色調(diào)，但是不是太生了點(diǎn)。

為了讓畫(huà)面更生動(dòng)，富有沖擊力，那我們就需要光影的加入去塑造畫(huà)面！

首先可以給畫(huà)面設(shè)置一個(gè)光源。

光源應(yīng)該設(shè)置在哪呢？

看下我們的現(xiàn)在的畫(huà)面，主元素是黃色，背景色也是黃色的，就會(huì)讓我們的搖錢(qián)樹(shù)沒(méi)有那么突出。

所以，我們可以把光源設(shè)置在元素的正后方，讓更亮的顏色來(lái)把主體元素襯托凸顯出來(lái)！

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

我們剛才只是加了光源，屬于是對(duì)亮部的調(diào)整；

那相對(duì)應(yīng)的我們也要對(duì)暗部進(jìn)行調(diào)整，讓暗部更暗一些，從而加強(qiáng)整體畫(huà)面的明暗對(duì)比，并且要加入色相的變化，比如我們亮部的光源是往檸檬黃去偏移了色相，暗部就可以往橙紅色去偏移色相：

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

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

把這幾種顏色鋪設(shè)到畫(huà)面中去：

可以看到，我們加入了光影之后，不僅對(duì)比加強(qiáng)了，畫(huà)面的配色也更豐富多彩了；所以其實(shí)，我們加入光影的同時(shí)，其實(shí)也是再豐富配色。這兩個(gè)是相輔相成的。如果我們只加入光影而不考慮顏色變化的話，就還是會(huì)保持很單調(diào)配色。我們看下不考慮色相變化的樣子是什么樣的：

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

第三步：融合！

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

調(diào)整方法：

（1）利用顏色減淡提亮

直接復(fù)制一層主元素，改成顏色減淡模式，透明度 23%

（2）疊加模式調(diào)色

新建一個(gè)圖層，疊加模式，適用高明度的紅色去涂抹暗部：

（3）給主體邊緣打光

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

來(lái)對(duì)比一下融入前和融入后的區(qū)別：

融入后顏色更好看，光影也更符合畫(huà)面的光影規(guī)律了！

第四步：豐富背景細(xì)節(jié)

目前背景我們只做了顏色光影的變化，有些空，我們可以加入一些景物或光線，以豐富畫(huà)面的細(xì)節(jié)。

我們的畫(huà)面現(xiàn)在就比較豐富好看了對(duì)不。

最后我們來(lái)加入 UI 模塊，整體看下效果：

完成！

整個(gè)流程下來(lái)，可以看到 AI 確實(shí)很好用，可以很快地輸出很多方向和素材，但在整個(gè)項(xiàng)目流程中其實(shí)只占了很小的一部分，前期的篩選能力考驗(yàn)設(shè)計(jì)師的審美，后期的調(diào)整、背景的融入、細(xì)節(jié)的優(yōu)化、UI 界面的設(shè)計(jì)考驗(yàn)設(shè)計(jì)師的專業(yè)技能，整個(gè)都還是需要設(shè)計(jì)師去親力親為才能保證高視覺(jué)品質(zhì)的去落地需求。

所以大家大可不必去焦慮，打鐵還需自身硬，把自己的專業(yè)做好，AI 的出現(xiàn)只會(huì)成為你快速進(jìn)步的工具，讓你實(shí)現(xiàn)可以用更短的時(shí)間，輸出質(zhì)量更高的作品，而不會(huì)成為你焦慮的原因！

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」