下载 App

【UI教程】更省积分,也更加精准还原布局的UI制作方案

精华05/10928 浏览开发交流 包含 AI 合成内容
相信各位使用嗒啦啦的maker在制作各种UI界面时,少不了跟嗒啦啦的斗智斗勇,然而这种斗智斗勇的结果往往是你盯着嗒啦啦给出的雷霆UI怀疑自己刚才到底给这个憨货交代了什么......
那么有没有一种既省积分,又还可以精确还原自己的布局意图,而且还轻松的方法呢?
(当然是有了,不然我发帖干嘛)
先展示一下嗒啦啦中实现的效果,在嗒啦啦中制作该界面效果只使用了这一次对话:
TapTap
嗒啦啦复现界面截图
然后就是我们这次教程中真正出力的核心,deepseekV4的识图模式,先给各位看一下在deepseek中调试完成,导入嗒啦啦前的效果:
TapTap
D指导调试界面截图
这种处理方式的好处相信各位已经看到了,不管是界面还原度上,还是积分消耗上,都要远优于你跟嗒啦啦进行反复对话得到的结果,下面我们就可以正经讲讲这到底是怎么做的。
首先,你需要一张UI布局图,可以是自己绘制的,也可以是ai跑的,总之,需要现有一张布局图。
(如果不知道怎么用ai跑出来质量相对较高的布局图,可以蹲下我后面的教程)
这次我们使用如下图片进行教学内容:
TapTap
教程使用的UI布局图
接着,登录网页版的deepseek,选择识图模式,打开深度思考,上传我们选择的这张布局图,输入“描述图片内容”:
TapTap
第一步
(上面这一步其实是可以省略的,不过我在测试过程中发现如果不加这一步,D指导给出的样式代码可能无法运行或者界面与图片布局有出入)
接下来就是真正开始的环节,输入指令“根据图片反推该界面的样式代码”
TapTap
第二步
这一步D指导通常就能给出一套如下图情况的可直接运行的样式代码,点击运行就可以直接看到对应的UI界面。如果出现无法运行的情况,可以直接告诉他“给你一个可以直接运行的代码版本”
TapTap
运行按钮位置
TapTap
运行效果
其实到这里,如果D指导给出的样式代码呈现出的UI效果你基本满意的话,就可以直接复制对应的样式代码到嗒啦啦进行复现了,不过考虑到肯定有maker会有在这里进一步修改的需求,所以我们多提一嘴如何在D指导中修改这个UI界面。
简单的,可以用文字语言描述的情况,我们直接对话即可:
TapTap
修改对话
各位应该已经注意到了,D指导在这次修改中给出的代码只是片段,实际运行出来的效果也并非之前的完整界面。
TapTap
代码片段的运行效果
这种情况我们只需要让他整合为完整代码就可以获得能够正常预览的可运行代码了。
TapTap
整合代码效果
可以看到修改也正常适配了。
如果是单凭文字描述无法精确表述的情况,使用任意截图工具,截图后对需要修改的部分进行标注,之后上传该图片,用文字辅助说明修改需求就行。
接下来就是如何将D指导给出的样式代码,在嗒啦啦中还原的办法了。
首先,复制我们在D指导中调整好的最终版本样式代码。在嗒啦啦中根据我们需要修改的UI页面输入以下指令,比如我这里是营地界面的UI,那么指令就是“根据以下样式代码,修改营地界面的UI布局:”
TapTap
嗒啦啦正在应用样式代码
通常只需要这一次对话,就可以完整还原你之前在D指导中调试出的UI界面。
TapTap
背景图是我后加的
如果已经应用到自己项目中之后,因为功能调整或者增加有了修改布局的需求,那么可以通过嗒啦啦自己的截图标记功能进行修改。
TapTap
点击预览窗口顶部的“截图插入对话”
TapTap
点击标注圈出需要修改调整区域
圈出修改区域后正常和嗒啦啦对话就行。如果是比较大的修改,比如界面重做一类的情况,那我还是更推荐去D指导里改或者干脆重新做一份。
至于UI做到这一步后,怎么精确替换为自己做好的美术素材,这个我也还在研究,欢迎交流讨论。
(另外,求积分,孩子激活晚了没蹭到老用户的计划2,现在就还剩1万出头了,填问卷的那3000也没到账,提档的申请也还没反应,现在随便一句话基本就是几百积分没了,剩的这点估计连主要功能模块都做不完,赈灾粮什么时候才能下来啊?!)
[TapFamily庆生-万物皆可联动_期待][TapFamily庆生-万物皆可联动_期待][TapFamily庆生-万物皆可联动_期待][TapFamily庆生-万物皆可联动_期待]
猜你想搜
taptap 制造ui教程
别再烧积分了!从每次 2000 到每次 50 的血泪经验截图
别再烧积分了!从每次 2000 到每次 50 的血泪经验
适用场景:所有在用 TapTap Code 开发游戏的小白 难度:★☆☆☆☆ 背景最近群里总有人"炫耀"一次操作花了几千积分,说实话这不是值得高兴的事——这是在告诉所有人你的开发方式有根本性问题。我也走过这条弯路,所以来说说怎么改。 积分消耗的本质是什么积分 = AI 处理的 token 数量 = 你发给 AI 的内容 + AI 回给你的内容所以烧积分的本质只有两种: 你让 AI 做了大量无效/重
精华
68 赞
21 回复
03:06
为了不被斩杀,我只能做到这些了截图
为了不被斩杀,我只能做到这些了
之前一直申请不到计划3,之前说太花哨,后面说体量完成度不足,在我一番小作文下,编辑终于给了我解答,什么原生质感,玩家开局体验啥的。 本来计划2也够用,准备以后再优化了,结果计划2赠送的积分要砍半了,学生党实在消费不起,于是只能再冲一波计划3了 从周六中午到现在一天半时间,优化了一遍角色卡,战斗卡,还有抽卡界面,优化了新手教程,该说不说确实比之前要舒服些。 前半部分为新版,后半部分为旧版。 明天再次
32 赞
6 回复
如何提升你游戏中的UI美术水平截图
如何提升你游戏中的UI美术水平
一、请为你的游戏挑选一款合适的字体 很多开发者没有注意到其实UI界面中最重要的元素是字体,一款合适的字体能给整个游戏的界面感官带来蜕变。 请看案例 那么如何挑选适合自己的字体呢? 我总结出了一些小经验可供参考: 黑体:通用 宋体:古风、武侠、修仙 楷体:古风、武侠、修仙 圆体:卡通、动漫、Q版 科技:科幻、未来、电子 顺手分享一个免费可商用字体网站: 当然 如果你不知道自己的游戏适合什么风格
精华
122 赞
44 回复
01:27
《大二暑假,我用AI做了一款属于自己的游戏》截图
《大二暑假,我用AI做了一款属于自己的游戏》
本人自制游戏现已加入taptap封闭测试(仅适配安卓机型)欢迎大家前来尝试(八月十号可以正式开始游玩) 如果有建议或者bug反馈可以加入qq群928501443 #发现好游戏 #游戏日常 #浅评一下 #今天游戏圈发生了啥
3 赞
01:05
【开发日记】零号危城vol.1截图
【开发日记】零号危城vol.1
战斗模块的各项功能和UI布局基本调试完成,后续调优等待接入美术资产时继续进行。 有建议或者反馈欢迎沟通讨论。
4 赞
开发心得-界面布局心得截图
开发心得-界面布局心得
大家好,我正在用 TapTap 制造制作一款2D 治愈林间徒步旅行游戏《徒步荒野》。 我分享一下我的开发心得,希望能有用,下面是一些界面布局的心得。 第一步:定版式、操作 先确定游戏是横版还是竖版、需要哪些操作按钮,敲定整体玩法思路。 我的玩法灵感参考《边境之旅》,主打散步看风景、沿途触发随机事件。 原版是 3D,考虑到自己是新手,选择2D 横版街机式来做,制作更简单、好上手。 第二步:敲定全局美
6 赞
3 回复
00:26
塔啦啦科研:三渲二(风格1)截图
塔啦啦科研:三渲二(风格1)
最近在研究像素风格的三渲二,一直想做小丑牌那种风格,但是塔啦啦一直做不出来,发现是有一部分的功能做不了,只能实现简单的材质制作和描边,因此,我从零直接搭建了一整套引擎基础。目前进度可以看视频。 @嗒啦啦 什么时候出shader 评论区随意提问 #TapTap制造 #TapTap制造社区 #TapTap制造
4 赞
5 回复
「游戏上新」秦王的游戏截图
「游戏上新」秦王的游戏
你是秦王嬴政身边的廷臣。 方士徐福献上一匣【帝王卡牌】,四张凶牌封死命运: 屠戮|淫欲|奢华|征伐 七日死限,必须一一折断卡牌对应的欲望任务。 办不成? 秦王殿上长剑出鞘,君臣性命,顷刻倾覆。 ⚔游戏核心玩法 ▪回合卡牌策略,抉择牵动秦廷朝堂势力 ▪朝堂派系博弈:王权、法家、军功贵族、方士暗流角力 ▪多重结局:功成辅秦王一统,或是任务失败血染咸阳宫 ▪随机事件触发,每一局嬴政的猜忌程度截然
4 赞
2 回复
2D 等轴测视角:完整理论截图
2D 等轴测视角:完整理论
2D 等轴测视角:完整理论 一、视角的本质 什么是等轴测 人站在高处斜着往下看地面,地面上的方格子不再是正方形,而变成了菱形。这就是等轴测的视觉本质。 俯视(正上方看下去): 等轴测(斜上方看下去): ┌──┬──┬──┐ ◇ ├──┼──┼──┤ ◇ ◇ ├──┼──┼──┤ ◇ ◇ ◇ └──┴──┴──┘ ◇ ◇ ◇ 正方形网格经过旋转 + 压缩,变成了菱形网格。 为什么是 2:1
6 赞
00:42
【开发日记】零号危城vol.2 战斗系统迭代截图
【开发日记】零号危城vol.2 战斗系统迭代
整体重做了战斗演出效果,以强化演出张力为导向对攻击特写进行了大幅度优化; 增加了追击和反击两类特殊攻击触发,配套了相应的攻击特写; 战斗界面的UI和角色帧动画制作进行中,会尽快更新一版替换美术素材的视频; 避难所建设和探索两个模块制作推进中,当前完成度较低,不便展示。
5 赞