KMP从零创业 Live Show(5)- UI + AI

kandra777
722 阅读5分钟

上集回顾

上集中,我们在后端python项目里配置了Dockerfile,把项目打包成了Docker Image,然后在本地环境通过Docker Engine把服务run起来了. 有了后台接口,我们就可以开始前端开发环节了,不过在开始前我们需要一套完整的移动端ui设计.听闻AI现在已经可以通过描述直接生成app套图了,我们今天就来试试水.

第五集-UI+AI

[!note] adobe ps,adobe xd,mastergo(蓝湖),sketch,figma就是我对一个app设计的所有认知范围了.adobe系列在我印象中偏重,那么我们另外三个里面找找看了

Figma

一上来就首选的Figma.原因很简单,目前国内外最流行的工具之一,也是最近几个项目跟ui师傅对接使用到的工具.并且社区活跃,资源教程都很完善. 开干吧!看学习教程,资料花了10分钟左右吧,迫不及待的想自己实操.然而打开Figma发现跟教程对不上(没有找到AI相关工具).折腾了2-3小时候后才弄明白,free档用户无法使用AI相关特性.壮着胆子看了一下收费标准,不是在下能消费的起的,直接弃了.

[!tip] 看了一些Figma AI演示片和大佬们使用Figma AI做出来的产品分享视频,效果非常惊艳,可玩性强!有条件的兄弟真心可以闭眼入.

Sketch

印象中没有网页端,只能用桌面端,桌面端还要下载破解版.都懒得去查Sketch有没有相关AI能力,刚在Figma碰壁让我觉得这条路估计也走不通.弃了!

MasterGo

前身好像是蓝湖,现在搞得感觉很像国内版的Figma.这个是有网页端的,打开看看发现是有AI功能的 image.png 点击AI生成页面 image.png 输入描述(我输入的是帮我生成一个海报的分享弹窗) image.png 这里可以先选择大体方案,然后根据选择方案可以继续微调效果,我们选择A然后继续微调 image.png 其他页面,如法炮制 image.png

说实话,效果有点差强人意.个人分析主要原因可能还是在跟AI沟通上缺乏技巧,关键字匹配度很低造成的.不过目前的设计图已经足够承载我们app的雏形了.

MasterGo这波免费的AI很给力.希望官方能推出相关的AI沟通技巧和提示词示范,相信这样能帮助非专业人士也能生成出专业级的设计.

给App取个名字并设计一个Logo

刚给孩子冲完奶,孩子属虎的.名字就暂定"小虫海报"得了(英文BigCat Poster). 好用的生图工具好像都收费,只能先省省,咱们用免费的看看效果.

巨硬的Copilot: image.png 还挺可爱的.再试试马老板家的Grok2: image.png 感觉效果不如巨硬家的.有机会等mj有免费活动的时候 咱们可以再试试收费的,目前我们就先用这个免费的吧.接着我们用之前KMP项目结构基础演示用空项目下载地址来开始替换Android,IOS双端应用图标.

IOS应用icon替换

image.png 回忆一下KMP项目结构,iosApp目录作为编译模块,在里面我们可以找到默认的应用logoapp-icon-1024.png,通过命名来看应该是个分辨率为10241024的png文件.验证一下也证实了我们的猜测 image.png 正好我们通过AI生成的logo也是10241024的分辨率,那就直接替换吧 image.png 直接替换后run一下看看效果 image.png

因为没有IOS开发经验,并不确定这里直接替换这个png知否就能做到全设备的适配,后面会找机会在真机上看看效果.欢迎大家对此留言指正!

Android应用icon替换

熟悉Android开发的朋友,一般都知道可以通过Android Studio的模板来生成icon.不管是Fleet还是Android Studio,都是通过Gradle编译成Android项目的,所以logo的设置同之前用AS开发项目应该一模一样.但是仔细点了一圈后,并没有在Fleet中找到类似模板生成的选项.当然我们可以用AS开个新项目并利用模板功能生成对应icon,然后复制粘贴到本项目.不过这样做总觉得有点麻烦,特别对电脑上本来就没有安装AS的朋友来说就更劝退了.网上搜了一下,搜到一个貌似能解决KMP替换应用icon的插件KMPAppIconGeneratorPlugin.下面我们试试

  1. 应用插件 image.png

  2. 重命名logo文件为icon,支持png和svg格式,并移动到对应目录 image.png

  3. 运行app,自定在ios和Android目录下生成替换icon image.png 运行的是Android应用,但是这里可以看到IOS目录下也生成了对应分辨率的logo image.png 双端完美替换!我们把代码上传到仓库,有需要的朋友可以下载跑一下看看效果.替换了logo的应用项目-点击下载 image.png

image.png

下集预告

KMP+CMP把双端的UI撸出来!

[!todo]

  • 做个什么?
  • 研究学习一下BeatPrints,把流程跑一跑,琢磨一下盈利点
  • 创建 python 项目提供接口,通过 docker 在本地运行,调通接口 (跪求好心python大佬们指导和支持,帮助我们快速实现预期的后台功能)
  • 通过 figma ai 生成 ui 图(用MasterGo代替了)
  • 通过 app 页面交互,最终完成封面下载
  • 接入三方平台分享 sdk
  • 接入支付 sdk
  • 前后端用户注册登录及等级系统建立
  • 接入网易云 api
  • 健壮后端项目,做好场景覆盖和错误捕捉等
  • 上架
  • 待续补充

[!info] 如果您觉得这篇文章对你有用或者有趣的话,请点赞,关注,收藏三连支持一下作者.

千万不要小看你随手善意的支持,每一份好心的善意最终都化为作者持续分享的动力

avatar
文章
阅读
粉丝