设计新范式:AI 低代码工具实战

用户头像
杭州/产品设计师/1年前/4093浏览
设计新范式:AI 低代码工具实战
从创意到产品的“最后一公里”
UX 设计师的核心目标是确保用户体验可落地,但传统设计流程存在断层。你是否经常会遇见这些问题:
设计新范式:AI 低代码工具实战(图ZMTUxMDE0NjA=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
AI 低代码发展至今工具已从“玩具级”生产力辅助,进化为足以
重构设计-开发工作流的底层引擎
。其核心价值不仅在于降低技术门槛和加速创意落地,更在于打通了
从创意到产品的“最后一公里”。
设计新范式:AI 低代码工具实战(图ZMTUxMDE0NjQ=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
我们先不管这一变革背后的技术演进与跃迁。就最终结果来说,它切实的让设计师得以聚焦于体验创新而非像素调整
开发者则从重复劳动中解放,转向架构设计与算法优化
低代码 AI 工具本身承担了“翻译者”与“执行者”的角色,人与技术的协作模式正在经历一场静默却深远的范式转移。
本文将与大家分享近期我们集中课题研究与探索的结果,并深入解析:
如何高效合理的在实际的设计流中使用 AI 低代码工具。
为什么使用 AI 低代码工具将成为设计师必备技能?
AI 低代码开发工具通过
可视化界面
和 
AI 辅助编程
,大大降低了研发门槛。让单独的设计师角色,也可完成从“设计”到“上线”的全流程。
设计新范式:AI 低代码工具实战(图ZMTUxMDE0Njg=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
那么UX设计师的AI低代码能力,能在我们的工作中能带来哪些变化?下面我们将通过具体的实例,手把手的带各位了解AI低代码工具在实际设计中的实战效果。
案例1:通过纯自然语言驱动的体验优化 Demo ——弧墙绘制“手感”体验优化
应用工具:Cursor
设计工具内的弧墙绘制功能存在显著体验缺陷,我们发现核心痛点之一在于用户绘制时常常产生“失控感”。
但是单纯的静态展示,又过于单薄。没有实际的感受(使用),很难去评估这种“手感”的状态,评估优化是否正向。
设计新范式:AI 低代码工具实战(图ZMTUxMDE0NzI=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
那怎样才能更好地表述这种
看不见的问题
呢?
于是我通过 AI 低代码工具,模拟这种弧墙绘制的场景,生成了一份 Html demo 文档。
设计新范式:AI 低代码工具实战(图ZMTUxMDE0NzY=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
它完整的支持了这个阶段弧线绘制的能力,也让交互方案从原来的静态图和凭空想象,变成可直接操作试用的功能 Demo。同时研发可以直接从 Html 文档中获取绘制流程涉及参数的具体内容。
设计新范式:AI 低代码工具实战(图ZMTUxMDE0ODA=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
让“看不见的交互”不仅能够被感知,也让设计产出从“过程物”变成可直接交付开发的内容,有效提升设计协作效率以及设计产出价值。
设计新范式:AI 低代码工具实战(图ZMTUxMDE0ODQ=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
AI 低代码工具可以帮助我们解决“看不见”的问题,对于那些“看得见”的问题效果如何呢?
案例2:
通过低代码构建真实 Demo 交互 ,完成 POC 阶段概念验证——产品核心路径改造
使用工具:V0
公司某工具(以下简称“工具”),被高频使用的亮点功能却不在核心路径中。
对于这种直接影响产品整体架构的改造成本极高、影响巨大。但仅靠设计提案,又无法有效评估它的改造成本与方案有效性。
设计新范式:AI 低代码工具实战(图ZMTUxMDE0ODg=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
毕竟自己都没有用过,谁又敢拍板说用户一定会买单呢?
常规的小步快走式迭代,很容易导致整体项目节奏拉长、或错失市场先机。那怎样可以快速实现从“设计构想”到“可验证假设落地”,更快速的为产品 POC 阶段提供决策依据呢?
于是我们尝试把部分设计稿投喂给 V0 ,让「改造后的路径」嵌入用户核心操作链路。
设计新范式:AI 低代码工具实战(图ZMTUxMDE0OTI=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
确认了 AI 低代码工具进行复杂场景实现的可行性后,接着构建3大核心验证场景:
设计新范式:AI 低代码工具实战(图ZMTUxMDQxMzI=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
设计新范式:AI 低代码工具实战(图ZMTUxMDQxMzY=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
设计新范式:AI 低代码工具实战(图ZMTUxMDE1MDQ=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
(注:以上界面均为效果示意图示例展示,并非公司产品的最终呈现版本)
设计新范式:AI 低代码工具实战(图ZMTUxMDE1MDg=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
此阶段的工具 Demo 已经完成核心路径。我们用该 Demo 直接邀请用户进行可用性测试,并进行反馈回收。
原本1~2个月周期才能获取的用户反馈,直接压缩至9天,时间效率提升76%。
设计新范式:AI 低代码工具实战(图ZMTUxMDE1MTI=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
利用 AI 低代码工具,增加设计在各个节点渗透。在减少整个产研成本的基础上直面用户,帮助业务完成快速验证。
它的整体产出
设计可以自己投放
,减少研发成本和
等待周期
;同时投放产出物比原来
纯设计 Demo 效果更直观,回收的反馈偏差更小。
当然,我们还可以再进一步。直接达成「设计支持交付」效果:设计提供内容,支持内部产品使用或直接上线。
案例3:快速搭建新应用(网站/网页/App),生成可用性代码
使用工具:Cursor、Bolt
对于偏营销类的网站/网页,可以尝试通过低代码工具进行基础框架的设计,并生成可用代码。
基础网页/网站搭建:
通过输入提示词来创建应用。提示词中需要包含应用的布局结构、主体内容、功能矩阵、交互视觉效果等内容。考虑加入断点机制的描述,即可实现准确的响应式布局和多端适配。
设计新范式:AI 低代码工具实战(图ZMTUxMDE1MTY=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
设计稿还原并生成可用性网站代码:
提供 Figma 链接或设计稿图片让 AI 还原并生成可用性代码,可以辅以提示文案来确保还原效果。获取完整的基础框架以后,对于功能模块与设计稿偏离的地方可以通过对话进行针对性校准与修复,最后生成可落地应用的代码给到开发侧直接使用。
设计新范式:AI 低代码工具实战(图ZMTUxMDE1MjA=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
设计新范式:AI 低代码工具实战(图ZMTUxMDE1MjQ=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
那么除了利用AI低代码工具帮助我们在工作流中解决和消化部分成本问题。我们是否可以用它做更多的事情?
案例4: 基于现有功能打磨优化,生成前端组件 —— 「偏好设置」功能优化与组件封装
使用工具:V0
业务跨海过程中,我们发现工具内部的「偏好设置」在多语言场景会发生水土不服的情况。
设计新范式:AI 低代码工具实战(图ZMTUxMDE1Mjg=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
针对这个场景我们需要先确定:根据不同语言去呈现不同的布局的可行性。
设计新范式:AI 低代码工具实战(图ZMTUxMDE1MzI=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
确定方向可行后,下一步还需要尽可能解决新设置项的实现需要脱离人工、通过代码控制的问题。组件封装正是最有效的办法之一。
设计新范式:AI 低代码工具实战(图ZMTUxMDE1MzY=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
将 V0 生成的文件配合设计稿进行交付,避免了信息鸿沟造成的沟通成本与实现偏差。对于研发伙伴来说,也极大减少了信息理解的成本和部分研发实现成本。
未来趋势:UX 工作范式的颠覆性演进
通过以上几个 Demo,相信大家已经可以较为深入的了解 AI 低代码工具在实际设计流程中的可用性。它确实可以重塑 UX 设计师的核心能力。
目前主流的 AI 低代码工具有很多,针对市面上比较火的几款 AI 低代码工具,我们进行了多维度分析测试与差异化对比总结,供大家参考。
设计新范式:AI 低代码工具实战(图ZMTUxMDE1NDA=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
AI 低代码工具还在不停发展与迭代:对自然语言的理解能力越来越好/实现的内容越来越符合预期、产出物越来越丰富……当越来越多的人拥抱 AI,AI 回馈给我们的也将更多。
虽然目前的 AI 低代码工具依然有一些瑕疵,如 AI 生成的代码可能存在冗余,需结合人工审查优化性能;复杂功能实现如涉及支付、数据库等后端逻辑时,仍需与传统开发团队协作等等……
但是,它是一个切实的
「设计师创造力加速器」
,并且已经给我们带来了不小的改变。
设计新范式:AI 低代码工具实战(图ZMTUxMDE1NDQ=) - 观点 - 站酷设计师群核科技MCUX原创素材 - 站酷ZCOOL
收藏
我们也需要开放、积极的心态去迎接它带来的改变。学习与运用它,从思维出发、到能力落地。
用架构为基底,体验作调配,让设计的落地像点一杯奶茶一样灵活而精准——
「少糖、去冰、加个数据库,谢谢。」
为了帮助大家共同进步,这里也整理了一些实操教程与工具导航,供需使用。
最后:AI 虽好,但是想要进步还需要避免依赖,合理使用哦~
作者:图伊、张一、安吉、瑶—、风生
53
举报
|
181
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
科技医疗透明柜UI界面设计
UI 登录界面设计模板包
新拟态风格 UI设计组件库
新能源APP应用UIKit
【新年UI图标】体育icon
森系3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】旅行icon
UI通用设计素材1
高级表盘系列UI源文件
【新年UI图标】相机icon
钱包ui模板
【新年UI图标】美妆icon
【新年UI图标】美食icon
3D渐变流体抽象矢量UI背景图
手表表盘UI系列
智能家居中心 简约 UI设计组件库
户外旅行飞机情侣假日出行
UI界面 组件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
盲盒APP UI设计
【新年UI图标】银行卡icon
你可能喜欢
相关收藏夹
大家都在看
登录注册