完成抽奖功能,只需1天,比传统流程更高效的设计研发的新范式:所想即所得

科技   2024-12-23 19:33   上海  

AI编程真的这么高效吗?听说能把3周的活缩短到1天?

#

对啊,薛志荣就有这种体验!

他说啥了?

他说有了AI IDE,设计和开发流程都无缝衔接了,特别直观。

像是上了高速公路,一路畅通?

哈哈,差不多!他开发MiX Copilot 3.9.0抽奖功能只用了1天!

1天?也太快了吧!

#

他用了AI IDE,省时省力。


如果你还不了解AI编程,可以阅读本文,体验下AI编程的高效率流程。对比传统的研发上线流程,一般需要3周左右,使用AI编程,只需要1天。
大家请看下图:
OK,大家是不是觉得这个很简单?就是一个按钮,一个转盘。其实整个抽奖功能我大概改了3遍以上,因为它挺复杂的。在过往一个抽奖模块算是一个大功能,总的来说3周时间大概率是需要的,它的流程包括:

产品经理:(大概率一周)
  • 确定抽奖模块怎么和付费流程打通
  • 确定抽奖模块怎么和用户系统打通

  • 生产需求文档
设计师(最快一周)
  • 和产品经理讨论需求文档
  • 调研竞品用了哪些抽奖设计(大转盘、老虎机等等)

  • 生产交互稿,评审

  • 生产视觉稿,评审
开发(最快一周)
  • 大转盘开发

  • 抽奖模块和付费流程打通

  • 抽奖模块和用户系统打通

  • 在不同界面实现抽奖模块的显示

  • 联调

  • 和产品经理、设计师、QA进行评审
在设计和开发过程中大概率会在大转盘开发的时候遇到阻碍,因为大转盘有很多交互细节需要梳理,以及要引入更多物理参数进去,不然这个大模块会显得很假,这时候很考验设计师和程序员的配合以及程序员的算法实现能力。

现在

我是怎么一天从0到1开发好一个抽奖模块的?大概可以分以下阶段。
  • 在没有任何想法的时候,我去Pinterest找了一下大家常用的“抽奖”图片是什么,大概花了10来分钟




  • 把找到的图片丢给V0.dev,给它交互了好几次,但发现生成的页面效果不怎么样



  • 我让Claude细化了一下产品需求,再让V0.dev重新生成,最后发现还是不写需求文档比较好,所以我用回了上一版的设计。整个流程大概花了我半小时的时间。



  • 我将项目下载下来让Cursor重构代码,因为V0用了很多Tailwind,同时因为这个抽奖系统是一个独立的模块,我需要Cursor帮我将它完全独立。这里大概花了我十来分钟


  • 接下来就是微调大转盘模块的细节,包括引入物理参数、调整交互动效、修理bug,中间我没有用到任何专业技巧,就是告诉Cursor我觉得哪里不好,哪里有bug。由于设计和代码层面有个Gap,但这些Gap我也不知道怎么表达,例如我怎么让大转盘转到指针的位置才是中奖区域?可能大家纯看文章觉得没什么难度,自己回去试一下就好了。中间我又想控制一下中奖几率,例如像拼多多一样,最后一次一定是大奖,结果发现前面的代码都是很真实地根据物理规律和随机性实现的中奖,如果要强行控制选项,这时候跟指针有冲突,反正一大堆问题花了我大概2小时,最后控制中奖选项没有实现出来,后面再看看。


  • 转盘设计好后要设计哪个时机显示抽奖的tag,尤其是怎么向非订阅用户、订阅快过期的用户显示而且不太打扰用户。这部分不能靠AI帮我设计,因为只有我自己了解整个系统只能自己亲手设计业务逻辑,这时候就很考验你的业务设计和用户体验设计了。这些工作大概花了我2小时


  • 用户抽完奖后如果不第一时间用,那么是不是要考虑做历史管理?这个功能涉及到界面的功能开发,Cursor一瞬间就能帮我把代码实现,不过整体时间也花了我半小时


  • 抽完奖应该用最短的流程发起付款流程,这部分涉及到商店系统,有些问题Cursor搞不定,所以只能我亲自下场看代码问题出自哪里,整体大约花了我2小时


  • 做完整个抽奖系统后发现如果抽奖概率放在本地会有问题,尽管可以发版更新,但对运营效果不好,所以我又几乎重做了整个抽奖系统,把抽奖的生效日期、中奖概率放在服务器,同时为了降低服务器成本又做了很多容错的工作,这里大概花了我一小时
从上面整个设计开发流程,你应该发现了我的整个设计流程没有提到Figma等设计工具,也没有出现调整设计细节、画ICON的流程。我都是将自己脑海里想到的通过文字输入告诉各种AI编程工具,它们会很智能地帮我把我要的功能实现出来。
在开发过程的9个小时内,最花费我时间的是思考和整理业务逻辑,尤其是边开发过程中,不断调整交互体验(交互体验背后是你想给用户带来哪些体验,以及如何提升产品收益),所以有了AI编程后,你的想法才是最重要的
当然拥有代码能力也很重要,或者说你对代码的理解很重要这才是对的。在上文提到的Gap还有付款部分都耗费了我不少时间是因为跟LLM的水平有关,尽管我已经用了最先进的Cursor和Claude 3.5 Sonnet,但有时候它们确实像智商骤降了一样不能解决你的问题,这时候就需要你了解你的代码并引导AI解决它们。
我们再回到交互体验设计的流程上。在以前,我们的设计都是接到需求,然后在脑海里设想这个需求怎么实现,然后通过设计工具将这个画面画出来。这个过程好听点叫脑补,难听点就是“yy”,因为在整个设计过程中,尽管我们会发散和细化我们的思路,但因为我们没有真实地感受和体验自己设计的产品会是什么样的,所以我们难以避免会忽略很多细节,尤其是各种容错。我见过很多设计师的交互稿都是将主流程设计了出来,其实这是不及格的,因为你的产品难用更多是在各种容错上没做好,而不是你的主流程设计得有多好,更不用说现在绝大部分产品都大同小异,用户上手门槛并不高。
你在设计时没实际体验过你的设计,你怎么知道你的设计不好并优化你的设计呢?这是以前我们做设计时存在的一个悖论。但现在这个问题已经可以被AI编程很好地解决,因为你可以在不懂编程的情况下,实现大部分设计并进行体验。
再回到上一篇文章提到的我们AI编程线下训练营,里面的学员几乎都是编程0基础,但学完AI编程后有88%的学员可以自己设计和开发出自己的项目来。这里有个数据我在之前的文章里没有提及,在我们第三期训练营里,12名学员中有10位学员在课程期间花了不到三小时就做出产品里,包括AI Chatbot、TodoList、博客、Chrome插件等小应用来,而且每个项目都不是标准的产品,都是有各自的想法在里面。
为什么大家都能做得这么快?这就回到标题提到的设计的新范式:所想即所得
只要你思路清晰,你知道自己想要什么,你可以通过各种画面(例如竞品图或者自己手画草稿)的方式驱动AI帮你把它实现出来。这样的生产方式已经不是未来的某一条可存在的路径,而是切切实实发生在我们身边了。
如果你是一名设计师,请思考一下现在以及未来如何善用AI,以及思考一下在AI的加持下,你还有哪些优点可以被大家看到,但更重要的是,你有没有想创造出来的产品,我相信这个才是各位最期待的事情。
如果你对AI编程感兴趣,可以关注最近在上海线下举办的AI编程训练营。
推荐阅读
Mixlab AI编程线下训练营@上海N5-全新升级
AI时代的设计师需要懂得什么?
在上海的四期AI编程训练营里,我看到的故事与感悟

无界社区mixlab
跨学科探索实验,让每个人无限可能。 def mixlab(人工智能,设计): ... return 无限可能
 最新文章