在 UI 設(shè)計(jì)工作中,我們都會(huì)用到相同的工作流程,首先接到產(chǎn)品給到的需求,然后我們會(huì)進(jìn)行需求的分析,根據(jù)分析去找合適的參考,之后進(jìn)行我們的初稿設(shè)計(jì)。
同樣,在使用 AI 工具時(shí),我們的工作流程并沒(méi)有發(fā)生改變,改變的只是我們出圖的效率以及效果,比如我們?cè)诮?jīng)過(guò)分析和找到參考后,我們進(jìn)行設(shè)計(jì)時(shí),會(huì)花費(fèi)大量的時(shí)間進(jìn)行設(shè)計(jì)。而現(xiàn)在,AI 繪畫(huà)完全可以幫助我們進(jìn)行設(shè)計(jì),我們只需要進(jìn)行關(guān)鍵詞的調(diào)試,即可短時(shí)間做出不錯(cuò)的設(shè)計(jì),我預(yù)計(jì)可以提升大概 60%-70%的設(shè)計(jì)時(shí)間(這里還只是保守估計(jì))。
往期教程:
而且,我們進(jìn)行初稿設(shè)計(jì)后,會(huì)經(jīng)歷令設(shè)計(jì)師感到非常痛苦的設(shè)計(jì)評(píng)審,公司的大佬們都會(huì)指點(diǎn)江山般的給你提出設(shè)計(jì)意見(jiàn)(我就是!?。缓竽憧赡芙?jīng)歷 1 稿、2 稿、3 稿.....
我們可以利用 AI 繪畫(huà)來(lái)輔助設(shè)計(jì)工作。例如,在評(píng)審之前,我們可以使用 AI 生成五種設(shè)計(jì)方案(可以更多,嘿嘿),供評(píng)審大佬們選擇.......(狗頭保命)
廢話不多說(shuō),接下來(lái)為大家展示用 AI 創(chuàng)作一些可落地的工作參考:
醫(yī)療 app——扁平插畫(huà)風(fēng)格
這里我們以一個(gè)“醫(yī)療 app”為例子,我們接到的需求是做一組醫(yī)療 app 的引導(dǎo)頁(yè)設(shè)計(jì),需要使用扁平插畫(huà)的設(shè)計(jì)風(fēng)格,然后我們?nèi)フ业胶线m的參考,根據(jù)參考出的特性進(jìn)行關(guān)鍵詞的描述,提煉關(guān)鍵詞并進(jìn)行 prompt 組合。
1. 需求分析
醫(yī)療 app 引導(dǎo)頁(yè)設(shè)計(jì),風(fēng)格:扁平插畫(huà)風(fēng)格
2. 參考借鑒
去花瓣、站酷、behance 上找到合適的參考,我們根據(jù)參考的圖片來(lái)描述關(guān)鍵詞,比如畫(huà)面人物之間的動(dòng)作描述。
3. 關(guān)鍵詞描述
我們按照 midjourney 的詞組順序來(lái)描述,這里我按照第一張參考圖的動(dòng)作來(lái)進(jìn)行描述
4. Midjourney 生成的圖片
可以看到,midjourney 生成的圖片顏色并不能保持統(tǒng)一,不過(guò)這個(gè)問(wèn)題不大,我們只需要選取合適的圖片,然后后期用 PS 等工具稍微修飾一下即可了。
5. 應(yīng)用項(xiàng)目中的效果
成就勛章設(shè)計(jì)
這里我得到的需求是做一個(gè)娛樂(lè) app 的勛章設(shè)計(jì),元素需要豐富、質(zhì)感華麗、情感傳達(dá)熱烈、體型飽滿、勛章精致。得到需求后我們?nèi)ゲ鸾庀嚓P(guān)信息,然后根據(jù)整理的信息去找到類似的參考,這里我根據(jù)找到的風(fēng)格直接用 Midjourney 的“喂圖”功能,然后輸入需求相關(guān)的關(guān)鍵詞并組合,如下:
1. 需求分析
娛樂(lè) app 的勛章設(shè)計(jì),元素需要豐富、質(zhì)感華麗、情感傳達(dá)熱烈、體型飽滿、勛章精致。
2. 參考借鑒
參考來(lái)自花瓣,這種風(fēng)格就是比較適合我們需求的設(shè)計(jì),所以我們這里借鑒一下,把圖片喂給 Midjourney。
3. 關(guān)鍵詞描述
喂圖之后還需要輸入我們根據(jù)需求整理的關(guān)鍵詞,把這些關(guān)鍵詞和圖片鏈接一起發(fā)送給 midjourney。
完整關(guān)鍵詞: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 生成的圖片
這里生成的細(xì)節(jié)并不好,主要是中間標(biāo)志區(qū)域,會(huì)出現(xiàn)變形的問(wèn)題,不過(guò)問(wèn)題不大,我們是設(shè)計(jì)師,后期調(diào)整一下,調(diào)整吃力的我們就多跑幾組圖片即可。
5. 應(yīng)用項(xiàng)目中的效果
淘寶閃屏頁(yè)設(shè)計(jì)
這里我得到的需求是做一個(gè)淘寶 app 的閃屏頁(yè):設(shè)計(jì)一個(gè)具有親和力和活力的大男孩形象,站在露營(yíng)場(chǎng)景中彈吉他,搭配舒適、美觀、吸引人的色彩和文案設(shè)計(jì),以展示休閑娛樂(lè)和自然風(fēng)光的美好。
1. 需求分析
我們分析需求的確定相應(yīng)的元素,如露營(yíng)場(chǎng)地,大男孩,彈吉他。
2. 參考借鑒
去素材網(wǎng)上參考一下,然后整理出素材圖片,根據(jù)參考的圖片得出相應(yīng)的關(guān)鍵詞。
3. 關(guān)鍵詞描述
我們按照 midjourney 的詞組順序來(lái)描述,這里我按照第一張參考圖的動(dòng)作來(lái)進(jìn)行描述
完整關(guān)鍵詞: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 生成的圖片
有些圖片比較夸張了,不過(guò)問(wèn)題不大,我們經(jīng)過(guò)多跑圖,進(jìn)行篩選就好啦,這是個(gè)體力活....
5. 應(yīng)用項(xiàng)目中的效果
3D 小元素設(shè)計(jì)
這里我得到的需求是做一個(gè)直播禮物的小元素,元素需要豐富、質(zhì)感華麗、情感傳達(dá)熱烈、體型飽滿。得到需求后我們?nèi)ゲ鸾庀嚓P(guān)信息,然后根據(jù)整理的信息去找到類似的參考,這里我根據(jù)找到的風(fēng)格直接用 Midjourney 的“喂圖”功能,然后輸入需求相關(guān)的關(guān)鍵詞并組合,如下:
1. 需求分析
娛樂(lè) app 的勛章設(shè)計(jì),元素需要豐富、質(zhì)感華麗、情感傳達(dá)熱烈、體型飽滿、勛章精致。
2. 參考借鑒
參考來(lái)自花瓣,這種風(fēng)格就是比較適合我們需求的設(shè)計(jì),所以我們這里借鑒一下,把圖片喂給 Midjourney。
3. 關(guān)鍵詞描述
喂圖之后還需要輸入我們根據(jù)需求整理的關(guān)鍵詞,把這些關(guān)鍵詞和圖片鏈接一起發(fā)送給 midjourney。
4. Midjourney 生成的圖片
同樣我們需要多跑幾組關(guān)鍵詞,才會(huì)有相對(duì)滿意的圖片,這里的風(fēng)格主要受到喂圖片的影響,多試試幾次,然后找到合適的,后期處理一下吧。
5. 應(yīng)用項(xiàng)目中的效果
b 端圖標(biāo)設(shè)計(jì)
這里我得到的需求是做一個(gè) B 端網(wǎng)頁(yè)設(shè)計(jì):設(shè)計(jì)一個(gè)符合 UI 規(guī)范和標(biāo)準(zhǔn)、能夠清晰傳達(dá)出現(xiàn)代科技感并與產(chǎn)品整體視覺(jué)風(fēng)格相符的網(wǎng)頁(yè)圖標(biāo),提升用戶品牌認(rèn)知和體驗(yàn)。
1. 需求分析
這類需求在 b 端中很常見(jiàn),科技風(fēng)的圖標(biāo),符合品牌調(diào)性。
2. 參考借鑒
參考來(lái)自花瓣,這種風(fēng)格就是比較適合我們需求的設(shè)計(jì),所以我們這里借鑒一下,這里需要喂圖控制下色調(diào)和視角,然后把圖片喂給 Midjourney。
3. 關(guān)鍵詞描述
喂圖之后輸入細(xì)節(jié)關(guān)鍵詞,讓關(guān)鍵詞控制主體樣式,這類圖標(biāo)的渲染器用 oc 渲染器,參考國(guó)外網(wǎng)站的風(fēng)格就沒(méi)啥問(wèn)題了。
完整關(guān)鍵詞: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 生成的圖片
這類圖標(biāo)生成的圖大部分沒(méi)啥問(wèn)題,細(xì)節(jié)稍微修修改就能用了,重要是細(xì)節(jié)是不是我們需要的,改細(xì)節(jié)的方式還是通過(guò)關(guān)鍵詞控制即可。
5. 應(yīng)用項(xiàng)目中的效果
以上就是本期為大家分享的商業(yè)案例,我們可以將 AI 視作一個(gè)工具,為自己的工作帶來(lái)增效,而無(wú)需感到恐慌和被替代的擔(dān)憂。祝大家生活愉快!
本次教學(xué)分享到此結(jié)束,如果您有任何問(wèn)題,可以與我私信聯(lián)系:
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。
熱評(píng) 解決師Blue