設(shè)計新范式:AI低代碼工具實(shí)戰(zhàn)
在當(dāng)今快速迭代的科技時代,AI低代碼工具正悄然改變著設(shè)計與開發(fā)的邊界。本文將深入探討AI低代碼工具如何成為設(shè)計師的“超級助手”,打破傳統(tǒng)設(shè)計流程中的效率瓶頸,實(shí)現(xiàn)從創(chuàng)意到產(chǎn)品的無縫銜接。
從創(chuàng)意到產(chǎn)品的“最后一公里”
UX設(shè)計師的核心目標(biāo)是確保用戶體驗(yàn)可落地,但傳統(tǒng)設(shè)計流程存在斷層。你是否經(jīng)常會遇見這些問題:
AI低代碼發(fā)展至今工具已從“玩具級”生產(chǎn)力輔助,進(jìn)化為足以重構(gòu)設(shè)計-開發(fā)工作流的底層引擎。其核心價值不僅在于降低技術(shù)門檻和加速創(chuàng)意落地,更在于打通了從創(chuàng)意到產(chǎn)品的“最后一公里”。
我們先不管這一變革背后的技術(shù)演進(jìn)與躍遷。就最終結(jié)果來說,它切實(shí)的讓設(shè)計師得以聚焦于體驗(yàn)創(chuàng)新而非像素調(diào)整,開發(fā)者則從重復(fù)勞動中解放,轉(zhuǎn)向架構(gòu)設(shè)計與算法優(yōu)化。
低代碼AI工具本身承擔(dān)了“翻譯者”與“執(zhí)行者”的角色,人與技術(shù)的協(xié)作模式正在經(jīng)歷一場靜默卻深遠(yuǎn)的范式轉(zhuǎn)移。
本文將與大家分享近期我們集中課題研究與探索的結(jié)果,并深入解析:如何高效合理的在實(shí)際的設(shè)計流中使用AI低代碼工具。
為什么使用AI低代碼工具將成為設(shè)計師必備技能?
AI低代碼開發(fā)工具通過可視化界面和AI輔助編程,大大降低了研發(fā)門檻。讓單獨(dú)的設(shè)計師角色,也可完成從“設(shè)計”到“上線”的全流程。
那么UX設(shè)計師的AI低代碼能力,能在我們的工作中能帶來哪些變化?下面我們將通過具體的實(shí)例,手把手的帶各位了解AI低代碼工具在實(shí)際設(shè)計中的實(shí)戰(zhàn)效果。
案例1:通過純自然語言驅(qū)動的體驗(yàn)優(yōu)化Demo——弧墻繪制“手感”體驗(yàn)優(yōu)化
應(yīng)用工具:Cursor
設(shè)計工具內(nèi)的弧墻繪制功能存在顯著體驗(yàn)缺陷,我們發(fā)現(xiàn)核心痛點(diǎn)之一在于用戶繪制時常常產(chǎn)生“失控感”。
但是單純的靜態(tài)展示,又過于單薄。沒有實(shí)際的感受(使用),很難去評估這種“手感”的狀態(tài),評估優(yōu)化是否正向。
那怎樣才能更好地表述這種看不見的問題呢?
于是我通過AI低代碼工具,模擬這種弧墻繪制的場景,生成了一份Html demo 文檔。
它完整的支持了這個階段弧線繪制的能力,也讓交互方案從原來的靜態(tài)圖和憑空想象,變成可直接操作試用的功能Demo。同時研發(fā)可以直接從Html文檔中獲取繪制流程涉及參數(shù)的具體內(nèi)容。
讓“看不見的交互”不僅能夠被感知,也讓設(shè)計產(chǎn)出從“過程物”變成可直接交付開發(fā)的內(nèi)容,有效提升設(shè)計協(xié)作效率以及設(shè)計產(chǎn)出價值。
AI低代碼工具可以幫助我們解決“看不見”的問題,對于那些“看得見”的問題效果如何呢?
案例2:通過低代碼構(gòu)建真實(shí)Demo交互 ,完成POC階段概念驗(yàn)證——產(chǎn)品核心路徑改造
使用工具:V0
公司某工具(以下簡稱“工具”),被高頻使用的亮點(diǎn)功能卻不在核心路徑中。
對于這種直接影響產(chǎn)品整體架構(gòu)的改造成本極高、影響巨大。但僅靠設(shè)計提案,又無法有效評估它的改造成本與方案有效性。
畢竟自己都沒有用過,誰又敢拍板說用戶一定會買單呢?
常規(guī)的小步快走式迭代,很容易導(dǎo)致整體項目節(jié)奏拉長、或錯失市場先機(jī)。那怎樣可以快速實(shí)現(xiàn)從“設(shè)計構(gòu)想”到“可驗(yàn)證假設(shè)落地”,更快速的為產(chǎn)品POC階段提供決策依據(jù)呢?
于是我們嘗試把部分設(shè)計稿投喂給V0,讓「改造后的路徑」嵌入用戶核心操作鏈路。
確認(rèn)了AI低代碼工具進(jìn)行復(fù)雜場景實(shí)現(xiàn)的可行性后,接著構(gòu)建3大核心驗(yàn)證場景:
(注:以上界面均為效果示意圖示例展示,并非公司產(chǎn)品的最終呈現(xiàn)版本)
此階段的工具Demo已經(jīng)完成核心路徑。我們用該Demo直接邀請用戶進(jìn)行可用性測試,并進(jìn)行反饋回收。
原本1~2個月周期才能獲取的用戶反饋,直接壓縮至9天,時間效率提升76%。
利用AI低代碼工具,增加設(shè)計在各個節(jié)點(diǎn)滲透。在減少整個產(chǎn)研成本的基礎(chǔ)上直面用戶,幫助業(yè)務(wù)完成快速驗(yàn)證。
它的整體產(chǎn)出設(shè)計可以自己投放,減少研發(fā)成本和等待周期;同時投放產(chǎn)出物比原來純設(shè)計Demo效果更直觀,回收的反饋偏差更小。
當(dāng)然,我們還可以再進(jìn)一步。直接達(dá)成「設(shè)計支持交付」效果:設(shè)計提供內(nèi)容,支持內(nèi)部產(chǎn)品使用或直接上線。
案例3:快速搭建新應(yīng)用(網(wǎng)站/網(wǎng)頁/App),生成可用性代碼
使用工具:Cursor、Bolt
對于偏營銷類的網(wǎng)站/網(wǎng)頁,可以嘗試通過低代碼工具進(jìn)行基礎(chǔ)框架的設(shè)計,并生成可用代碼。
基礎(chǔ)網(wǎng)頁/網(wǎng)站搭建:通過輸入提示詞來創(chuàng)建應(yīng)用。提示詞中需要包含應(yīng)用的布局結(jié)構(gòu)、主體內(nèi)容、功能矩陣、交互視覺效果等內(nèi)容??紤]加入斷點(diǎn)機(jī)制的描述,即可實(shí)現(xiàn)準(zhǔn)確的響應(yīng)式布局和多端適配。
將設(shè)計稿還原并生成可用性網(wǎng)站代碼:提供Figma鏈接或設(shè)計稿圖片讓AI還原并生成可用性代碼,可以輔以提示文案來確保還原效果。獲取完整的基礎(chǔ)框架以后,對于功能模塊與設(shè)計稿偏離的地方可以通過對話進(jìn)行針對性校準(zhǔn)與修復(fù),最后生成可落地應(yīng)用的代碼給到開發(fā)側(cè)直接使用。
那么除了利用AI低代碼工具幫助我們在工作流中解決和消化部分成本問題。我們是否可以用它做更多的事情?
案例4:基于現(xiàn)有功能打磨優(yōu)化,生成前端組件 ——「偏好設(shè)置」功能優(yōu)化與組件封裝
使用工具:V0
業(yè)務(wù)跨海過程中,我們發(fā)現(xiàn)工具內(nèi)部的「偏好設(shè)置」在多語言場景會發(fā)生水土不服的情況。
針對這個場景我們需要先確定:根據(jù)不同語言去呈現(xiàn)不同的布局的可行性。
確定方向可行后,下一步還需要盡可能解決新設(shè)置項的實(shí)現(xiàn)需要脫離人工、通過代碼控制的問題。組件封裝正是最有效的辦法之一。
將V0生成的文件配合設(shè)計稿進(jìn)行交付,避免了信息鴻溝造成的溝通成本與實(shí)現(xiàn)偏差。對于研發(fā)伙伴來說,也極大減少了信息理解的成本和部分研發(fā)實(shí)現(xiàn)成本。
未來趨勢:UX工作范式的顛覆性演進(jìn)
通過以上幾個Demo,相信大家已經(jīng)可以較為深入的了解AI低代碼工具在實(shí)際設(shè)計流程中的可用性。它確實(shí)可以重塑UX設(shè)計師的核心能力。
目前主流的AI低代碼工具有很多,針對市面上比較火的幾款A(yù)I低代碼工具,我們進(jìn)行了多維度分析測試與差異化對比總結(jié),供大家參考。
AI低代碼工具還在不停發(fā)展與迭代:對自然語言的理解能力越來越好/實(shí)現(xiàn)的內(nèi)容越來越符合預(yù)期、產(chǎn)出物越來越豐富……當(dāng)越來越多的人擁抱AI,AI回饋給我們的也將更多。
雖然目前的AI低代碼工具依然有一些瑕疵,如AI生成的代碼可能存在冗余,需結(jié)合人工審查優(yōu)化性能;復(fù)雜功能實(shí)現(xiàn)如涉及支付、數(shù)據(jù)庫等后端邏輯時,仍需與傳統(tǒng)開發(fā)團(tuán)隊協(xié)作等等……
但是,它是一個切實(shí)的「設(shè)計師創(chuàng)造力加速器」,并且已經(jīng)給我們帶來了不小的改變。
我們也需要開放、積極的心態(tài)去迎接它帶來的改變。學(xué)習(xí)與運(yùn)用它,從思維出發(fā)、到能力落地。
用架構(gòu)為基底,體驗(yàn)作調(diào)配,讓設(shè)計的落地像點(diǎn)一杯奶茶一樣靈活而精準(zhǔn)——「少糖、去冰、加個數(shù)據(jù)庫,謝謝。」
為了幫助大家共同進(jìn)步,這里也整理了一些實(shí)操教程與工具導(dǎo)航,供需使用。
最后:AI雖好,但是想要進(jìn)步還需要避免依賴,合理使用哦~
作者:圖伊、張一、安吉、瑤一、風(fēng)生 公眾號:群核科技用戶體驗(yàn)設(shè)計
本文由 @群核科技用戶體驗(yàn)設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自unsplash,基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
- 目前還沒評論,等你發(fā)揮!