AI生成UI設計平台試用心得-UIzard, Framer, Galileo

AI to UI

前言

在去年Adobe宣布收購Figma的時候,凱瑞就期待著Figma之後會推出一些AI生成的功能,因為當時正是AI生成圖的浪潮最火熱的時候。

不過隨著收購破局,Figma在AI這方面也沒有重大的發表,只有一些小功能的發表,例如:Mulit Edit。

就這樣到了今年,AI生成風吹向了UI,幾款AI生成UI的設計工具開始冒了出來,陸續試用了幾款,像:UIzardFramerGalileo,就讓我們來看看這些工具到底要怎麼使用,以及是否有幫設計師增加效率。

UIzard AI

Uizard是一個結合AI技術的設計平台,專門用於快速創建網站原型和模擬圖。
Uizard除了擁有類似一般設計工具所提供的功能,最特別的是加入了AI生成的功能,比較特別的功能有:

AutoDesigner:透過輸入Prompt就可以產生出網站或是APP的UI,在輸入Prompt的同時,還可以把不同的style加入。產生的UI頁數不止一頁,而是有複數的頁面。

Generate Screen:功能類似AutoDesigner,透過輸入Prompt來產生單頁的UI。

Wireframe Scaner:上傳自己手繪的Wireframe(框線),透過AI讀取掃描後,產生出UI。

ScreenShot Scaner:上傳軟體的ScreenShot,透過AI讀取掃描後,產生出UI。

Theme Generator:透過參考網站的風格,讓AI將網站的風格,透用在現有的UI上。

在Uizard裡,透過AI所產生的UI,都還可以另外編輯,像是調整顏色或是尺寸,Layout…等等,另外如果是產出複數的UI介面,也自動幫你把Prototype展示給串連好。
然而,Uizard產生出的UI, 仔細去看,效果並不是太好,還需要花蠻多的時間去調整細節。

UIzard

(圖片來源:Uizard

Framer AI

Framer AI 是一個可讓用戶在幾秒鐘內生成網站的AI生成設計平台,並且可以快速發布網路上瀏覽,減少了開發的時間。

在使用上,Framer AI是透過輸入Prompt來自動生成網頁,在Prompt的輸入上,也是越詳細越好,並且同時生成三個RWD的尺寸。

Framer AI自動生成的頁面,也可以套用不同的風格以及文字來做修改,並且產出頁面的版型跟圖片都可以再做編輯,編輯調整好後,就可以直接發佈在網路上供瀏覽。

然而,Framer AI只能自動生成主頁,並沒有任何的內頁,所以也只適合拿來作為Landing Page,而且樣板風很重,凱瑞覺得實用性不高,就看之後的版本,在AI生成UI的部分,會不會再有所精進了。

Framer AI

(圖片來源:Framer AI

Galileo AI

Galileo AI也是一款AI生成UI的設計平台,創辦人Arnaud Benard 之前是在 Google 做 AI 模型研究,還參與了 Google AI 產品設計手冊的撰寫。

進入到Galileo AI的設計平台,會發覺非常的簡單,並沒有任何的線上編輯功能,而是直接提供了兩種方式生成設計:

Text to UI:直接透過文字下Prompt,下完Prompt之後, AI會跟你進行對話,問你問題,確認你的Prompt的意思以及是否還需要調整,然後才生成UI給你,就像是有經過你們一起思考討論一樣,而不是一股腦的就產生UI給你。

Image to UI:透過上傳圖片作為基礎,再加上Prompt來產生出UI。

值得一提的是,Galileo官網有提供 UI Prompt Guideline,讓你可以比較精準下Prompt,畢竟現在網路上比較少找得到針對生成UI 的 Prompt資料。

凱瑞在實測過後,發覺Galileo AI生成的UI相比其他類似的軟體,還蠻有一定的水準,已經幾乎接近完成品,而且最重要的,它可以讓你把生成的UI直接導入到Figma裡做編輯,連Auto Layout都幫你設定好了。

這點就感覺非常的聰明,減少了許多摩擦成本,畢竟熟悉Figma的設計師還是大多數,誰也不想再另外學一套新的設計軟體。

Galileo AI

(圖片來源:Galileo AI

結論:

在實際用過這些AI生成UI的工具,凱瑞還是覺得有蠻多地方需要改進的。

首先,我們可以看得出來AI生成的UI頁面,還是缺少許多的產品脈絡,例如:登入流程,不同場景下的介面,它們之間的關聯性就沒有很清晰。AI給的大概就是一個框架,但UIUX設計師還是得面對各種不同的場景和問題,然後通過好的設計,來引導用戶完成任務。

另外就是AI還無法建立一個完整的Design System,大部分還是像是圖像生成工具,但設計系統的完整性對於整體的UI來說,還是非常重要的。

再來就是AI還是無法準確的理解設計的意圖,目前看起來就是通過平台的數據,來生成一個看似符合我們要求的結果,跟本意還是有些出入,而且也無法準確的修改。

以上這些問題,也許未來AI還是有可能會解決,但設計師也不用太過緊張,畢竟設計師還是能做到AI做不到的事情。

簡略地來說,人類具備豐富的情感,我們可以在設計中融入更多的情感因素,再來就是,設計師能夠根據用戶需求提供客製化的解決方案,這需要深入的用戶研究和溝通,這都是AI做不到的。

AI最終還是受限於數據庫的範圍,而人類擅長吸取經驗,但好的設計師還是需要不斷的進步和創新,這樣才能在未來不被AI所取代。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關文章

Figma Config 2024

Figma 2024 Config 年會-改版內容解析

剛剛結束的Figma Config 2024 年度發表大會,讓人留下了許多的驚喜。

從軟體操作介面全面的更新-UI3,加入現在最火熱的AI生成,以及新的功能Figma Slide簡報,都可以更好的幫助設計師在工作流程以及協作上,達到更好的效率。

閱讀全文 »
2024年獲得UI/UX工作的6個關鍵

2024年獲得UI/UX工作的6個關鍵

現在因為大環境的關係,企業用人偏向比較保守,相對的來說UIUX設計師的職缺或是薪水也回到了一個平均值。

在這樣環境下,如果你想做一名UI/UX設計師或是產品設計師,該怎麼做才能脫穎而出,找到理想的工作呢?

以下我們將一起探討2024年你可以採取的6個關鍵方法,幫助你更有效率的順利找到工作。

閱讀全文 »