下载 App

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

精华05/10950 浏览开发交流 包含 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 做了大量无效/重
精华
74 赞
23 回复
03:06
为了不被斩杀,我只能做到这些了截图
为了不被斩杀,我只能做到这些了
之前一直申请不到计划3,之前说太花哨,后面说体量完成度不足,在我一番小作文下,编辑终于给了我解答,什么原生质感,玩家开局体验啥的。 本来计划2也够用,准备以后再优化了,结果计划2赠送的积分要砍半了,学生党实在消费不起,于是只能再冲一波计划3了 从周六中午到现在一天半时间,优化了一遍角色卡,战斗卡,还有抽卡界面,优化了新手教程,该说不说确实比之前要舒服些。 前半部分为新版,后半部分为旧版。 明天再次
44 赞
9 回复
如何提升你游戏中的UI美术水平截图
如何提升你游戏中的UI美术水平
一、请为你的游戏挑选一款合适的字体 很多开发者没有注意到其实UI界面中最重要的元素是字体,一款合适的字体能给整个游戏的界面感官带来蜕变。 请看案例 那么如何挑选适合自己的字体呢? 我总结出了一些小经验可供参考: 黑体:通用 宋体:古风、武侠、修仙 楷体:古风、武侠、修仙 圆体:卡通、动漫、Q版 科技:科幻、未来、电子 顺手分享一个免费可商用字体网站: 当然 如果你不知道自己的游戏适合什么风格
精华
124 赞
44 回复
创作小队第一次集体大讨论,笑点最密的一集截图
创作小队第一次集体大讨论,笑点最密的一集
所有人灵感大爆发,谈美了。实际上,作为一个要参加21天计划的游戏,我们今天才正式开始拟大纲、起名字有些晚了,希望来得及。我们确认了双主角设定、故事主题与反转。计划按1:2人数分工完成主线、支线。我们准备用AI制作大部分游戏图,不过我们也就放弃了美术评选。计划后3天内尝试用workbuddy和塔啦啦搭建游戏雏形,希望我们可以。
5 赞
01:05
【开发日记】零号危城vol.1截图
【开发日记】零号危城vol.1
战斗模块的各项功能和UI布局基本调试完成,后续调优等待接入美术资产时继续进行。 有建议或者反馈欢迎沟通讨论。
4 赞
【UI教程】如何将已有的效果图应用为实际的UI界面截图
【UI教程】如何将已有的效果图应用为实际的UI界面
在经过了一些折腾和比较折磨的尝试后,我总算是摸清楚了嗒啦啦怎么把UI效果图转换为实际游戏中的UI组件,今天就给大家带来这部分的经验分享。 tips:1.本篇教程需要各位掌握最基本的ps使用,具体的操作部分我会大致讲解,但仍需各位自行学习ps的基本操作,部分可以由ai代劳的环节我会注明。 2.本篇教程需要在以我前两篇教程作为前置环节,请在阅读这两篇前置教程后再进行本篇教程内容的学习 在按照前
12 赞
5 回复
我的第一个游戏截图
我的第一个游戏
#开发心得 用ai制作了一个算不上游戏的游戏 非常简单甚至是没有可玩性 选择了像素风 做完以后发现ai味太浓了 而且几乎没有关卡 接下来想尝试一下比较有故事的游戏 或者试试视觉小说 第一次自己上手制作 虽然只需要向哒啦啦发送提示词 但是发现自己对游戏的基本知识和类型知之甚少 昨天晚上才开始慢慢学习 进度也很慢 但是发现自己很喜欢这种手搓感 让我感受到我的生命还存在着 手搓游戏也是一种游戏 活着本身
3 赞
熬夜2个月游戏从0做到了1,又从1回到了0截图
熬夜2个月游戏从0做到了1,又从1回到了0
8月26日,我不懂编程,不懂设计,从0开始手搓一款回合制挂机游戏。 10月14日,快两个月了,功能全部实现。总算实现了从0-1的过程。 阶段手测还算正常,今天信心满满全栈手测,惊喜地发现,实现过程从1回到了0[表情_豹哭] 因为之前用AI配的底层数值写死了,所有装备和技能要推倒重做。 熬夜1-2个月,实现了从0-1-0的闭环。 看着屏幕,不知道是坚持还是放弃。 大家遇到这种努力全白费的情况,是怎么
1 赞
00:54
等距场景编辑器——自行编辑2D瓦片场景地图截图
等距场景编辑器——自行编辑2D瓦片场景地图
一个可嵌入任何 UrhoX 项目的完整等距瓦片地图编辑器,适用于 RPG、策略、模拟经营等类型游戏的关卡设计。 SKILL审核已通过,各位创作者可以根据自己的需要对工具进行调整修改 声明:该工具仅作为场景编辑以及序列化,交互等功能需要用户自行在项目中定义 后续会根据实际情况补充rule tile相关逻辑,实现tile map编辑自由 目录 1. 界面总览 2. 六种编辑工具 3. 双视图模式 4.
精华
21 赞
11 回复
【UI教程】如何使用image2制作符合自己项目风格且高质量的UI界面截图
【UI教程】如何使用image2制作符合自己项目风格且高质量的UI界面
因为一直在追着各种新的ai生图模型跑,所以image2上线的第一时间我就去各种测试了一下。image2的各方面能力其实并不是那么均衡,强项主要在宣传图设计和平面设计上,而UI恰恰就属于平面设计的一种。 现在嗒啦啦也是接入了image2,喜大普奔,真正可以白嫖image2生图的地方出现了!( 好了,说正题,相信看过上一期UI教程或者没看过的朋友们,在使用嗒啦啦进行制作的时候都会有一个需求,那就是——
精华
35 赞
5 回复