2023-9-12 ui設計分享達人
一、前言
人工智能的嶄新概念正在逐漸改變我們對設計的認識和實踐方式。在這個數字化時代，AI不再僅僅是一種輔助工具，它已經成為設計師的得力助手，能夠提供更高效、更智能的設計方案。在B端設計視覺中，AI的應用為我們開辟了一條通向更優(yōu)質設計的道路，本文將深入探討如何借助AI技術，輔助設計師完成B端設計視覺。無論你是剛剛踏入設計領域的小白，還是經驗豐富的資深設計師，都可以利用AI工具來提升設計效率、優(yōu)化視覺效果。
二、3D視覺banner設計
在B端項目中，公司通常希望展示自己在技術和創(chuàng)新方面的實力，3D視覺效果可以賦予設計以更高的專業(yè)感和現代感，也更加能夠吸引觀眾的眼球，讓設計在競爭激烈的商業(yè)環(huán)境中脫穎而出，但很多設計師小伙伴苦于不會建模、渲染，就讓AI來輔助你完成這種棘手的需求吧。
1、設計構思與參考
B端很多都是概念性的需求，所以我會先去參考網站上尋找參考圖，確定設計方向，以暗色系B端視覺為例，我們找到一堆參考圖：
確定參考方向后，腦袋里面大致有了畫面思路，主視覺在畫面右方，螺旋狀背景突出主視覺，文字排版在左邊，整體色調為藍色+青色光感。這里我們對所選參考圖進行拆分：
需要的視覺元素只有背景和3D主視覺，需要分開制作，現在就可以使用AI進行輔助設計了。
2、AI輔助生成素材
Midjourney生成圖片有兩條路徑：“文生圖”和“圖生圖”；
文生圖：顧名思義，需要自己腦暴出關鍵詞出圖，再通過修改關鍵詞，不斷踐行嘗試出圖。圖生圖：在有參考圖的情況下，用 /describe 圖生文命令，讓系統(tǒng)直接生成關鍵詞，再通過修改關鍵詞，不斷進行嘗試；我們先使用這種方式生成背景素材。
參考圖中的背景，我們需要使用 Photoshop Beta 先處理一下參考圖；
我們得到最終的背景圖，就可以在 Midjourney 里進行操作了，輸入命令 /describe ，把圖片拖入輸入框中，回車等待系統(tǒng)結果。
我們看到第一次關鍵詞直出的效果，并不理想，與我們的參考圖相差甚遠。
這個時候不要慌，也不要著急去改關鍵詞，我們只需要添加上一個神奇的后綴“--iw 2”,官方文檔的翻譯中，這個參數叫做“圖像權重參數”，用來調整關鍵詞中文本與參考圖的相似度，默認值為 1 ，范圍為 0~2 ，值越高，生成的圖與原圖更像，注意在 V5 和 niji 模型中使用才能生效。
使用 --iw 后綴參數時，需要“墊圖”，就是把參考圖的鏈接加到關鍵詞中，接下來我們看看關鍵詞不變的情況下，只加墊圖和后綴參數，能不能達到我們想要的效果。
最終關鍵詞：https://s.mj.run/8rHQ4ehBH-o a black and blue spiral background with blue and blue swirls, in the style of video installation, light purple and purple, pristine geometry, animated gifs, xbox 360 graphics, james turrell, multi-layered figures --iw 2 --v 5.2
盡管AI現在可以輔助我們進行設計，但設計師的審美和基本功仍然至關重要，在輸出核心素材時，我們需要通過不斷微調細節(jié)，從大量素材中精挑細選出最合適的那一個，最終得到我們需要的背景素材圖。
3D主視覺我們采用文生圖的方式制作，寫關鍵詞的基本公式參考下圖，具體寫關鍵詞時，需要靈活進行增減，然后不斷嘗試，直到出現自己滿意的效果。
我們大致構想一下圖形里面的元素、色彩、風格等關鍵詞，經過不斷嘗試，以下關鍵詞是我試出來最符合的：
A 3D cube icon, in the style of white and blue, translucent glass material, macro photography, emitting cyan fluorescent light --ar 3:4 -- v 5.2 一個 3D 立方體圖標，白色和藍色風格，半透明玻璃材質，微距拍攝，發(fā)出青色熒光
一般我們生成B端視覺，都是banner組圖等，不是單張出現，想要保持風格不變的同時，主題內容不同，只需要更改主體關鍵詞即可實現，最終我們就得到了下圖需要的所有主視覺元素。
但是我們發(fā)現現在得到的素材，色調不統(tǒng)一，有些看起來也沒有玻璃質感。所以我們還需要在PS Beta 里面進行視覺合成，讓整體視覺看起來更加統(tǒng)一協(xié)調。
3、視覺合成、排版
生成的素材我們需要先用 PS 處理一下，背景素材需要處理的地方：主視覺多余的部分需要刪掉、色調處理、圖片比例修改。
3D主視覺的部分，我們需要先進行摳圖，如果不想使用 PS 手動摳圖，這里推薦我常用的一鍵免費摳圖網站：https://pixian.ai/ ，處理簡單的圖片，直接把圖片扔進去就好了，簡單好用~
這一步考驗的是設計師的審美和手活，我們需要把背景和主視覺素材，進行視覺合成，其實也非常簡單：這里我定的主要色調是藍色+青色的光感，首先需要將色調整體統(tǒng)一；然后想要表現出玻璃質感的通透，我們需要加上一些光感；最后文字排版出圖即可~
4、排版出圖
其他的主視覺重復上面的步驟，就可以得到如下的多圖，以后碰到這樣的需求，大家知道如何搞定了吧~
使用AI出圖要憑運氣，像抽卡一樣，有時候可能很久才能抽到一張滿意的圖，以上的方法適用于不會建模渲染，但是工作中拿到了這樣的需求，現學3D軟件肯定是不現實的，AI可以幫助我們以最快的時間搞定這樣的需求；如果你本身是會3D的設計師，AI更適合用來輔助設計尋找靈感。
三、B端活動彈窗設計
B端活動彈窗一般需要傳達專業(yè)、正式的氛圍，符合商業(yè)環(huán)境的要求。顏色使用亮色系，會給人一種現代感和專業(yè)感，在企業(yè)環(huán)境中，例如亮藍色、亮橙色、以及漸變等這些顏色可以傳達創(chuàng)新、前瞻性和高科技的形象，這對于數字化轉型和業(yè)務優(yōu)化的主題非常合適。除此之外，中性色如灰色、白色等可以用于平衡設計，減少視覺沖擊，使主要內容更突出。插畫風格來說，扁平設計風格在B端設計中更為常見，它強調簡潔的圖形和顏色，適用于傳達清晰的信息和數據，或者使用抽象的圖形元素和幾何形狀可以營造出現代感，同時為活動彈窗帶來獨特的視覺吸引力。
1、確定創(chuàng)意方向
在沒有設計方向的時候，不妨讓AI大語言模型來幫助我們，它會根據需求的業(yè)務場景，給出合理的內容建議，以及畫面元素的建議。
在這些回答中，我大致確定了元素和畫面，標題、內容、背景圖、按鈕是已經在現有需求中的，我們主要聚焦于背景圖的元素生成；元素內容：數據分析與可視化（在背景中展示一組數據圖表，突出數字化轉型后數據分析和可視化的能力，如柱狀圖、折線圖等）、移動辦公（ 描繪員工在不同地點使用移動設備工作的場景）。
2、AI輔助生成素材
首先來生成“移動辦公”的場景，主體物的關鍵詞可以是正在趕路的工作人，拿著公文包，使用手機處理工作任務，凸顯出數字化辦公的優(yōu)勢，我們直接使用Midjourney生成素材。
主題內容：A man walking with phone and briefcase藝術風格：folk-inspired illustrations、animated gif, elegant lines色彩色調：blue and light blue
因為是單個元素生成，背景環(huán)境關鍵詞可以省略，大家在編寫關鍵詞時，注意靈活增減，不用一定按照所謂的公式來寫，藝術風格是插畫素材，我們直接使用niji模型，其中expressive風格會讓插畫更加富有表現力，可以直接在關鍵詞后面加上后綴“--style expressive ”，或者用“/settings”命令，更改設置。
A man walking with phone and briefcase, in the style of folk-inspired illustrations, animated gif, elegant lines, blue and light blue, illustration --ar 4:3 --niji 5 --style expressive 帶著手機和公文包行走的男子，民俗風格插圖，gif 動畫，優(yōu)雅線條，藍色和淺藍色，插圖
數據分析與可視化的背景，直接生成數據圖表的效果并不是很理想，把辦公室場景全部描繪出來生成的素材更加符合需求，但是還需要再手動對素材進行細化。
主題內容： a office worker standing in front of a dashboard with chart環(huán)境描述：in front of a dashboard with chart藝術風格：Flat illustration色彩色調：blue and cyan, gradient
Flat illustration of a office worker standing in front of a dashboard with chart, blue and cyan, gradient --ar 4:3 --niji 5 --style expressive 一名辦公室工作人員站在儀表板前的平面圖，上面有圖表、藍色和青色、漸變
把其中需要PS處理的圖片，一樣按照上面教過的方法進行處理就好了~
3、視覺合成、排版
最后使用figma，簡單合成，排版出圖。
根據得到的主視覺，還可以同時延展出其他物料：
四、總結
以上案例通過利用AI，設計師們可以更快速地生成創(chuàng)意、優(yōu)化設計，并在不斷的實驗中不斷改進。
隨著算力不斷提升，我們將能夠以更快的速度生成大量的設計作品。這將進一步推動創(chuàng)作的效率，使創(chuàng)作者能夠更迅速地實現他們的創(chuàng)意。盡管AIGC在設計領域尚處于早期階段，但已經展現出對設計帶來實質性提升和變革的潛力。同時人工智能也能夠以更豐富的方式生成內容，從而為創(chuàng)作過程增添更多創(chuàng)意的可能性。另外隨著各大公司的涉足，人工智能工具的性能將不斷改進，生成內容的可控性增強，使用工具的門檻降低。設計師將能夠更輕松地運用人工智能工具創(chuàng)作出更高質量的作品。
不過人工智能雖然在設計中具有巨大的潛力，但設計師的創(chuàng)造力和審美仍然是不可替代的核心因素。技術和行業(yè)的飛速發(fā)展，設計師需要保持持續(xù)學習的態(tài)度，以不斷提升自己的認知能力，緊跟變化的步伐。AI只是一個工具，最終的創(chuàng)作仍需要設計師的獨特思維和藝術靈感。我們可以期待它與人類設計師之間更深入的合作，共同創(chuàng)造出更加出色的設計作品。
作者：貓仔MAoMAo
鏈接：https://www.zcool.com.cn/article/ZMTU3NjIzNg==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯系作者獲得授權，非商業(yè)轉載請注明出處。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢～希望得到建議咨詢、商務合作，也請與我們聯系01063334945
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司