懶得刻網頁,來套 AI 組合拳

沒想到我做的網頁RhythmRider 受到熱烈歡迎。

這是個不用手寫 HTML 和 CSS、純軟體介面操作、所有文案和圖片動畫都用 AI 生成的 RWD 網頁。

https://rhythm-rider.akanelee.me

先說,我做的RhythmRider 還是需要人工拷貝貼上圖片文案、進行微調和設定動畫,不是打幾個關鍵字叫 AI 就生出一個網頁。

文案是 chatGPT、圖片產生是 Midjourney,這應該很好猜。

軟體我用 BLOCS,它不是 AI,是純視覺介面做 RWD 網站的軟體。

https://blocsapp.com

Blocs is fast, intuitive and powerful visual web design software, that lets you create responsive websites without writing code.

Blocs 很好用!但不適用完全不懂 HTML、CSS 的人。

起碼要有一點對 RWD 的基本認識,知道 Grid 系統、知道 HTML 和 CSS 的差別等,才能夠上手。

不用學到可以手寫碼的程度,Blocs 有很多樣板,套套樣板改改字,也能做出有模有樣的網頁。畢竟現在網頁版型大同小異,圖片、色彩選得好就能獲得不錯的評價。官方 Youtube 頻道的免費教學影片必看,有些操作藏的比較隱密不好懂。

最方便的部份是做「動畫」、做滾動視差,用滑鼠點一點就完成了,省很多寫碼的力氣。

以上是指「套樣板、點一點換圖換字」很方便的部份,真的想要微調細節、做出差異化、酷炫一點,還是需要一些 HTML、CSS 知識比較容易處理。

動畫我用Motionleap 在手機上製作。

對,就是把 Midjourney 產出的圖在手機裡用 Midjourney APP 加特效、輸出影片,傳回 MAC 放首頁底圖。

這個流程說穿了沒什麼,只是弄得很酷炫而已。

流程

畫 Wireframe

你不會以為啥草圖都沒有,直接開軟體就上了吧?怎麼可能。

網頁主題是什麼?有哪些文案要擺?需要產出幾張圖?這些規劃還是要自己想。

AI 可以減少想文案想破頭的痛苦,但沒辦法告訴你「客戶要求在這個網頁放上 6 個產品特色」。

不畫草圖不思考需求、腦子啥都不想動、只想直接叫 AI 產出,這叫賭人品通靈不叫科技。

手繪 Wireframe 非常非常重要,沒畫 Wirefame 你連「要不要副標題?」、「要不要畫 icon?要畫幾個 icon?」都答不出來。

BLOCS 裡再畫一次 Wireframe

手繪好 Wirefeame 後,我才開啟軟體。

BLOCS 有很多空白的樣板,照著手繪的 Wireframe 把畫面拼出來很簡單,這時候所有視覺元素(色彩、字型字體)都先不考慮,只考慮圖片(影片)、文字的擺放位置。

(暫時不用在意 LG、MD、SM、XS 的版型,等圖片套上去、字體字型色彩都設定好了,最後再來處理 RWD。)

文案

因為有畫 Wireframe,所以會知道需要幾個大標、幾個副標、幾個文案、幾個使用者見證…等文案。

把你需要的文案列出來扔進 chatGPT 裡叫它寫,再把 AI 產出的結果照樣 copy 去 BLOCS 貼上。

這個步驟沒啥難度。

圖片 Midjourney

因為有畫 Wireframe,所以會知道有幾張大底圖、幾張展示圖、幾顆 icon、幾張使用者人像要畫。

開 Midjourney,多算幾次,挑出風格適合的圖片,可以參考下列 Midjourney 教學文章。

Midjourney AI 繪圖教學系列

Photoshop AI

Midjourney 產出的圖通常無法完美符合我們想要的,比如首頁文字置左,底圖就希望人物靠右。

請參考這篇文Photoshop AI 試用(圖多) ,把底圖拉寬,用 Photoshop 的 AI 加上背景光暈線條。

首頁動畫 Motionleap

首頁動畫很酷炫吧!

我設定成 LG、MD 尺寸的螢幕才看得到首頁動畫,沒看到的可以再去看一次RhythmRider

其實說穿了人人都會做,不需要什麼專業設計軟體操作技巧。

Motionleap 免費版就能玩出很多花樣。把圖片套上特效,輸出影片。很多有在玩 IG 的人應該都玩過這個軟體,只是沒想到可以這樣幹…

把剛才修改過的底圖傳到手機裡,開 Motionleap 加特效。

建議動畫來個前、中、後景,配合圖片套 3 層不同特效。數值不要全滿、容易效果做過頭太誇張。

把動畫從手機傳回 MAC,塞進網頁裡。

動態效果

BLOCS 有現成的 UI 選單,滾動視差用滑鼠點幾下就好沒啥困難度,對不熟 CSS 的人非常友好。

麻煩的是 LG、MD、SM、XS 不同尺寸下看到的首頁動畫。版型歪了、圖片重心剛好被螢幕邊緣切掉、文字換行、動畫跑的方向不是自己要的…等等,這些微調比較麻煩。

我調得有點煩,不同螢幕尺寸下的動畫重心會偏移。乾脆做成兩種版型,SM、XS 首頁放靜態底圖,不搞影片了。

發佈上傳

這也沒啥難度,按下輸出,BLOCS 會直接產生一個資料夾,裡面有 HTML、CSS、JS 等等,整包扔到網路上就好。

我請老公看過原始碼,他說…

產出的碼能讓 RD 看懂、沒什麼雜七雜八的東西在裡面,沒有無用的元素、結構性處理得很好,不會看不懂它在寫什麼。

也就是說,BLOCS 產出的文件拿給 RD 們接手,設計師不會被蓋布袋

之前試過幾種設計稿直出網頁檔的外掛/軟體,那個碼很可怕,再加上 RWD 和動畫…嘖嘖,我看了都害怕,怕被前端打

結論

看到這裡不知道有多少人失望了呢?

AI 現在沒辦法打幾個 prompt 就給你做好網站啦!我試過幾個號稱 AI 做網站…預先做少量幾個樣版輪替,誆我咧。

文案的 AI ChatGPT 和圖片的 AI Midjourney 太多介紹,我來講講 Blocs 這套網頁製作軟體。

對於不熟 HTML 和 CSS 的人,我會大力推薦用 Blocs 來製作不怎麼需要套程式的靜態形象網站,但是電子商務類需要套程式的還是讓專業的工程師來處理。

一般民眾其實需要的大多也是靜態形象網頁,放個自己餐廳/店面/服務/產品的介紹,串 Google Map、粉絲團連結、偶爾換個菜單、加個簡單的表單意見回饋之類,Blocs 夠用了。

這套軟體非訂閱,一次付清買斷,還可以另外加購 Blocs Master ,更多更詳細的教學和更多樣板庫可以套用。

維護也很輕鬆,會操作 Keynote 就會用 Blocs 換圖打字,改完再輸出一包資料夾上傳替換。

圖片文案動畫 RWD 整套組合拳打下來,我覺得困難點不在 AI 產生的文案圖片不是自己要的,或是軟體操作不熟悉,而是偷懶不畫 Wireframe,基本框架都沒有,就想叫 AI 填內容進去

對、我一開始也偷懶沒畫 Wireframe,2 週工時有 1 週半都因為沒畫 Wireframe 卡死自己(活該)。這個網站真要說只花了我 3天,還是窩在沙發上邊看別人打電動邊做的 3 天。

如果你想做好網頁設計,最基本的 Wireframe 這種工作絕對不能跳過。Wireframe 不只是份文件,它最重要的功用是幫自己把腦海中的漿糊思緒整理好,有個想清楚的依據能照著做事,而不是「憑感覺」。

如果大家有興趣想學 ChatGPT+Midjourney+Motionleap+Blocs 綜合玩法的話,請跟我說,我再寫教學囉!

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close