(相關(guān)資料圖)
最近給大家分享了不少用 AI 生成前期素材、輔助需求落地的案例,確實能省不少時間。同時我們也在想,能不能讓 AI 幫我們做更多的事情,比如生成一整張 UI 設(shè)計稿。
01 選擇 AI 工具
輸入關(guān)鍵詞,讓 AI 生成一張電影網(wǎng)站首頁。
確實有那么點兒意思了,但生成的只是一張圖,可以看看布局和樣式,想要落地使用肯定是不行。
用 AI 生成一個圖標(biāo)時,我們可以通過多次生成來篩選,再用 PS 精修調(diào)整;但用 AI 生成 UI 設(shè)計稿的要求就高了,字體、樣式、組件都需要遵循設(shè)計規(guī)范,所以最好能生成可編輯的源文件。
翻遍全網(wǎng),終于讓我找到了一款滿足條件且立刻就能用上的工具——「即時 AI」,輸入文字就能生成可編輯 UI 設(shè)計稿,而且同時支持生成 APP 和 web 兩種尺寸。
「即時 AI」官網(wǎng):http://mtw.so/5LkTpb
先來簡單嘗試一下,讓 AI 生成一個電影播放網(wǎng)站首頁,等待幾十秒,得到了以下 4 個頁面。
基礎(chǔ)結(jié)構(gòu)都還比較清晰,界面 1 和 2 明顯完整性更高,可以先保留下來。
參考第一次生成的結(jié)果,我們對于這個「電影網(wǎng)站首頁」應(yīng)該包含哪些模塊有了一個大概的印象,可以將欄目進(jìn)一步劃分為熱門影片、近期上映、電影資訊等。
根據(jù)這些優(yōu)化描述語再生成一次,得到了又一張可用的設(shè)計稿。
描述語:生成一個電影播放網(wǎng)站首頁,包含熱門影片推薦、近期上映、電影行業(yè)資訊模塊
即時 AI 生成圖片如下:
看著效果已經(jīng)很不錯了,簡單修改下頂部的圖標(biāo)、替換一下 logo,拿去給老板看看布局、根據(jù)這個對齊細(xì)化需求肯定是沒問題的。
02 快速產(chǎn)出多個方案
正常我們做需求,畫一個方案已經(jīng)很耗費時間,最多再給出兩個備選方案,但用 AI 輔助產(chǎn)出完全沒有這個壓力。
每次只要等待 60s 左右就可以獲得 4 張不錯的設(shè)計稿,一共嘗試了四五次,就篩選出了以下可供參考、可二次編輯使用的 AI 作品。
除了出圖快,借助 AI 工具我們還可以不受限制地發(fā)揮創(chuàng)意。
我嘗試了繼續(xù)增加描述詞,讓即時 AI 生成更符合預(yù)期的設(shè)計稿;也試了試只保留對頁面主要內(nèi)容的描述,看看 AI 還能怎樣發(fā)揮創(chuàng)意。
當(dāng)我刪去關(guān)于內(nèi)容模塊的描述后,AI 非常有創(chuàng)意地在頁面中加上了電影詳情(包含劇情簡介、演職員表)。
在另一張生成結(jié)果中,AI 還幫我加上了「影評」和「購票信息」,直接“打通”線上線下觀影流程。
主要的功能用得差不多了,我的 10 個方案也攢夠了。
同樣需要 AI 幫忙設(shè)計初稿,給老板過方案的,現(xiàn)在就可以去試試了。全面開放使用,每天 20 次機會,最多可生成 80 張 APP/web 設(shè)計稿,完全夠用。
「即時 AI」官網(wǎng):http://mtw.so/5LkTpb
03 一鍵發(fā)布“上線”
「即時 AI」和即時設(shè)計工具是打通的,原本打算把我剛用 AI 做好的 10 個方案保存到即時設(shè)計,然后分享預(yù)覽給領(lǐng)導(dǎo)看,但我突然注意到還有個按鈕是【發(fā)布網(wǎng)頁】,點一下直接幫我把 AI 設(shè)計稿發(fā)布成可在線查看的網(wǎng)頁了。
發(fā)布成功后,復(fù)制鏈接或者截圖二維碼發(fā)給領(lǐng)導(dǎo)同事,就能在線打開查看“線上”效果,而且高度還原設(shè)計稿。
目前這個發(fā)布上線的功能只可以在「即時 AI」中使用,如果能在即時設(shè)計內(nèi)使用,那不僅能給前端開發(fā)同學(xué)節(jié)省時間,還能給我們 UI 設(shè)計師省去反復(fù)走查的痛苦,各種精美的設(shè)計效果也能被一一還原。
總結(jié)
以上就是和大家分享我使用「即時 AI」產(chǎn)出 UI 初版方案的全部內(nèi)容啦!
整個試下來,AI 生成的 UI 設(shè)計稿還比較初級,適合在前期探索階段用來獲取靈感、參考布局。但整體生成速度很快,且支持二次編輯,既能生成 APP 頁面,也支持生成 web 尺寸,覆蓋了大多數(shù) UI 設(shè)計場景。
平均 30~60s 的生成速度,也可以幫設(shè)計師們快速生成多張不同布局的高保真圖,提供除競品以外的頁面參考,試錯成本也大幅降低。搭配“發(fā)布上線”這個功能,快速生成可在線查看的預(yù)覽網(wǎng)頁,實用性大幅提升。
AI 工具發(fā)展很快,但我們也不必?fù)?dān)心被取代,因為 UI 設(shè)計需要考慮用戶交互的問題,而如何提升用戶體驗還是需要設(shè)計師去深入研究。但我很推薦大家用 AI 生成的 UI 界面來快速生成原型、設(shè)計初稿,以便進(jìn)行測試和驗證;又或者用參考 AI 作品來增強和改進(jìn)自己的設(shè)計。
總的來說,無論 AI 發(fā)展到什么程度,最終的設(shè)計決策仍需由設(shè)計師來做出。我們可以積極嘗試更多工具,讓 AI 成為最好的創(chuàng)作幫手!
希望以上內(nèi)容對大家有所幫助,如果感覺有用,請點個贊~
最后,感興趣的可以去試試「即時 AI」,復(fù)制鏈接到瀏覽器打開即可:
http://mtw.so/5LkTpb
標(biāo)簽:





