![[第8屏] 完整公开课APP列表页面总览，展示完整长列表滚动效… - 图片创意预览](https://gd-cms.dancf.com/gd-cms/xi19e5/0/5dce97c6-5b9e-40be-acd0-e93e74db55487004.png)
[第8屏] 完整公开课APP列表页面总览，展示完整长列表滚动效…
[第8屏] 完整公开课APP列表页面总览，展示完整长列表滚动效果，整体视觉风格统一收尾。 [氛围/风格] 整体展示，统一视觉风格，现代简约设计。 [元素布局] 展示从顶部导航、搜索框、到3条完整公开课
乐清_
2026.06.08[第8屏] 完整公开课APP列表页面总览，展示完整长列表滚动效果，整体视觉风格统一收尾。 [氛围/风格] 整体展示，统一视觉风格，现代简约设计。 [元素布局] 展示从顶部导航、搜索框、到3条完整公开课
乐清_
2026.06.08![[第8屏] 完整公开课APP列表页面总览，展示完整长列表滚动效果，整体视觉风格统一收尾。
[氛围/风格] 整体展示，统一视觉风格，现代简约设计。
[元素布局] 展示从顶部导航、搜索框、到3条完整公开课列表的完整页面，滚动布局自然，所有信息模块都展示到位，风格统一。
[光影质感] 统一光影，所有卡片和元素风格保持一致。
[配色色系] 整体白色背景，蓝色主色调，灰色文字层级，保持前面所有页面配色一致。
[视角构图] 正视图，完整移动端竖屏页面，从上到下完整展示。
[文字版式] 所有文字排版和前面页面保持一致，层级清晰，统一风格。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 风格不统一，布局错乱，文字模糊，变形，水印。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/1ed88d4f-6983-4f8d-a0a2-af15a47ea8c66854.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第4屏] 公开课搜索功能页面展示，包含顶部搜索框、输入关键字后展示搜索结果列表。
[氛围/风格] 现代简约搜索界面设计，清晰交互反馈，干净清爽。
[元素布局] 顶部导航下方是搜索框，带放大镜搜索图标，搜索框内显示占位文字"搜索公开课关键字"，输入"数据分析"关键字后，下方展示匹配的搜索结果列表，展示2条匹配结果，每条结果和主列表样式一致。
[光影质感] 搜索框边框浅灰色，输入后高亮边框，结果列表和主列表风格一致，光影清晰，交互反馈明确。
[配色色系] 全局底色 #FFFFFF，搜索框 #F5F5F5，占位文字 #999999，输入文字 #111111，匹配结果配色和主列表一致。
[视角构图] 正视图，移动端竖屏，搜索框在顶部，结果列表向下延展，符合搜索界面交互逻辑。
[文字版式] 占位文字字号15px，搜索关键字清晰，结果列表文字排版统一规范，清晰可读。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 布局错乱，文字模糊，搜索框变形，交互逻辑错误，水印。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/04c717bd-2ae2-4ad8-b8c8-e648b6a853356783.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第1屏] 公开课APP首页头屏，展示移动端APP顶部导航区域，包含可切换的"公开课"和"我发布"两个标题标签，当前选中"公开课"标签，下方展示公开课列表页面框架。
[氛围/风格] 现代简约UI设计，专业干净的移动端界面风格，清晰信息层级，扁平化设计，商业UI界面质感，舒适干净色调。
[元素布局] 状态栏在最顶部，下方是导航标签栏，"公开课"标签默认蓝色选中状态，"我发布"标签灰色未选中状态，标签栏下方预留搜索框位置，再往下是公开课列表区域顶部，整体占比合理，界面元素间距舒适。
[光影质感] 扁平简约光影，清晰锐利，界面元素区分明显，无过多渐变阴影，保持清爽干净。
[配色色系] 全局底色 #FFFFFF，主选中色 #165DFF，未选中文字 #666666，分割线 #F5F5F5。
[视角构图] 正视图，移动端竖屏构图，阅读动线从上到下清晰自然。
[文字版式] 顶部导航主标题文字清晰，"公开课"字号18px加粗蓝色，"我发布"字号18px常规灰色，文字不挤压，留白舒适，信息层级区分明确。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 文字错乱，界面变形，布局拥挤，颜色怪异，水印，缺件错件，结构错误。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/ca78e1c2-c98a-403f-baa4-43884ef8cdc07006.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第5屏] "我发布"标签页面展示，点击顶部"我发布"标签后，展示用户自己发布的公开课列表。
[氛围/风格] 保持和公开课列表一致的设计风格，统一UI体验。
[元素布局] 顶部导航"我发布"标签蓝色选中状态，"公开课"未选中，下方展示用户发布的2条公开课列表，布局、信息展示和全部公开课列表保持一致，包含所有信息字段。
[光影质感] 和主列表一致的光影层次，保持整个APP风格统一。
[配色色系] 和主列表完全一致，全局白色底色，蓝色选中标签，文字颜色层级和主列表一致。
[视角构图] 正视图，移动端竖屏，和公开课页面结构完全一致，只切换列表内容。
[文字版式] 和主列表统一排版，文字大小、颜色层级完全一致，体验一致。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 风格不统一，布局错乱，文字错乱，变形，水印。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/c571dbd9-0f9a-46f8-972e-413b0d8fa5dc6785.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第8屏] 适用人群与课程规格说明页，明确适合和不适合的学习对象。
[氛围/风格] 简约信息图设计，清晰明了，专业干净。
[元素布局] 顶部主标题"适合谁学·课程规格"，主体分为两个模块：上方模块分两部分，"适合人群"列出：AI设计零基础、想学习新技能接单、设计师提升效率、新媒体内容创作者；下方模块列出"课程规格"：共计39节视频课程，永久观看可反复学习，课程持续更新；页面布局松弛，信息占比约80%。
[光影质感] 模块背景柔和阴影，文字清晰，整体亮度均匀，层次分明。
[配色色系] 全局底色 #f0f5fb，主色蓝色标题，浅蓝模块背景，深灰色文字，绿色对勾图标标注适合人群。
[视角构图] 竖向从上到下分块布局，模块间距合适，方便手机逐行阅读。
[文字版式] 主标题加粗蓝色居中，模块标题加粗，人群和规格信息分点，图标搭配文字，每行文字不超过12字，字号适中，手机阅读清晰。
[比例分辨率] 宽高比3:4，分辨率4K，文字清晰可辨，高清画质。
[负向提示词] 布局混乱，文字过小，颜色刺眼，信息错误，图标变形。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/2d03cc02-38f9-4a94-b80f-343ed7c0d84e77336.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第8屏] 行动号召与保障说明页。
[氛围/风格] 积极转化，专业可信，突出价值，引导用户报名学习。
[元素布局] 顶部课程价值总结，中部保障说明，底部行动号召按钮区域，层次分明，重点突出。
[光影质感] 行动号召区域高亮，整体光线均匀，清晰突出重点，阴影柔和。
[配色色系] 全局底色 #f5f7fa，行动按钮使用深蓝色底色，白色文字，保障模块使用浅蓝卡片，整体配色协调统一。
[视角构图] 竖版9:16，从上到下结构，行动号召放在底部最醒目的位置。
[文字版式] 顶部标题："系统实战学习 开启AI新能力"，中部保障说明：✅ 30节高清实操课程 ✅ 永久观看反复学习 ✅ 完整课件可参考 ，底部行动号召："立即报名 开启学习"，文字层级清晰，行动号召大字体加粗突出，保障信息清晰易读。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 文字错乱，重点不突出，排版混乱，变形，水印，违规诱导点击按钮，绝对化承诺用语](https://gd-cms.dancf.com/gd-cms/xi19e5/0/69d8e251-8215-46f1-b42b-1c0f21a22d4c63372.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第8屏] 行动号召与保障说明页。
[氛围/风格] 积极转化，专业可信，突出价值，引导用户报名学习。
[元素布局] 顶部课程价值总结，中部保障说明，底部行动号召按钮区域，层次分明，重点突出。
[光影质感] 行动号召区域高亮，整体光线均匀，清晰突出重点，阴影柔和。
[配色色系] 全局底色 #f5f7fa，行动按钮使用深蓝色底色，白色文字，保障模块使用浅蓝卡片，整体配色协调统一。
[视角构图] 竖版9:16，从上到下结构，行动号召放在底部最醒目的位置。
[文字版式] 顶部标题："系统实战学习 开启AI新能力"，中部保障说明：✅ 30节高清实操课程 ✅ 永久观看反复学习 ✅ 完整课件可参考 ，底部行动号召："立即报名 开启学习"，文字层级清晰，行动号召大字体加粗突出，保障信息清晰易读。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 文字错乱，重点不突出，排版混乱，变形，水印，违规诱导点击按钮，绝对化承诺用语](https://gd-cms.dancf.com/gd-cms/xi19e5/0/8786db67-0c84-428b-9bc2-26ba441c366963765.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第8屏] 行动号召与保障说明页。
[氛围/风格] 积极转化，专业可信，突出价值，引导用户报名学习。
[元素布局] 顶部课程价值总结，中部保障说明，底部行动号召按钮区域，层次分明，重点突出。
[光影质感] 行动号召区域高亮，整体光线均匀，清晰突出重点，阴影柔和。
[配色色系] 全局底色 #f5f7fa，行动按钮使用深蓝色底色，白色文字，保障模块使用浅蓝卡片，整体配色协调统一。
[视角构图] 竖版9:16，从上到下结构，行动号召放在底部最醒目的位置。
[文字版式] 顶部标题："系统实战学习 开启AI新能力"，中部保障说明：✅ 30节高清实操课程 ✅ 永久观看反复学习 ✅ 完整课件可参考 ，底部行动号召："立即报名 开启学习"，文字层级清晰，行动号召大字体加粗突出，保障信息清晰易读。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 文字错乱，重点不突出，排版混乱，变形，水印，违规诱导点击按钮，绝对化承诺用语](https://gd-cms.dancf.com/gd-cms/xi19e5/0/e044601b-503f-40f2-8462-77c60d005c9163272.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第6屏] 适用人群介绍页。
[氛围/风格] 亲和清晰，卡片式设计，专业简约，让用户快速判断是否适合自己。
[元素布局] 顶部主标题，中部五个适合人群卡片从上到下排列，每个卡片标注一个人群和对应学习收益，留白适中，排版不拥挤。
[光影质感] 均匀柔和布光，每个卡片增加轻微阴影提升立体感，文字清晰可读。
[配色色系] 全局底色 #f5f7fa，卡片用白色底色，标题深蓝色，文字深灰色，视觉清爽。
[视角构图] 纵向9:16排版，从上到下信息层级清晰，符合手机阅读顺序。
[文字版式] 主标题："适合这样的你学习"，依次列出：1. 零基础想要入门AI的新手，2. 想利用AI提升工作效率的职场人，3. 内容创作者想要提升产能，4. 想要通过AI技能拓展副业的朋友，5. 想学习最新AI工具使用的爱好者。每个人群用卡片呈现，标题加粗说明人群，小字补充说明学习收获，排版清晰。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 卡片重叠，文字错乱，文字过小，配色杂乱，变形，水印](https://gd-cms.dancf.com/gd-cms/xi19e5/0/e9e5491a-2f71-4c9b-9079-80487418651363542.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第6屏] 适用人群介绍页。
[氛围/风格] 亲和清晰，卡片式设计，专业简约，让用户快速判断是否适合自己。
[元素布局] 顶部主标题，中部五个适合人群卡片从上到下排列，每个卡片标注一个人群和对应学习收益，留白适中，排版不拥挤。
[光影质感] 均匀柔和布光，每个卡片增加轻微阴影提升立体感，文字清晰可读。
[配色色系] 全局底色 #f5f7fa，卡片用白色底色，标题深蓝色，文字深灰色，视觉清爽。
[视角构图] 纵向9:16排版，从上到下信息层级清晰，符合手机阅读顺序。
[文字版式] 主标题："适合这样的你学习"，依次列出：1. 零基础想要入门AI的新手，2. 想利用AI提升工作效率的职场人，3. 内容创作者想要提升产能，4. 想要通过AI技能拓展副业的朋友，5. 想学习最新AI工具使用的爱好者。每个人群用卡片呈现，标题加粗说明人群，小字补充说明学习收获，排版清晰。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 卡片重叠，文字错乱，文字过小，配色杂乱，变形，水印](https://gd-cms.dancf.com/gd-cms/xi19e5/0/a951f92d-41ed-47ff-909e-0a4f1960d4be63547.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第6屏] 适用人群介绍页。
[氛围/风格] 亲和清晰，卡片式设计，专业简约，让用户快速判断是否适合自己。
[元素布局] 顶部主标题，中部五个适合人群卡片从上到下排列，每个卡片标注一个人群和对应学习收益，留白适中，排版不拥挤。
[光影质感] 均匀柔和布光，每个卡片增加轻微阴影提升立体感，文字清晰可读。
[配色色系] 全局底色 #f5f7fa，卡片用白色底色，标题深蓝色，文字深灰色，视觉清爽。
[视角构图] 纵向9:16排版，从上到下信息层级清晰，符合手机阅读顺序。
[文字版式] 主标题："适合这样的你学习"，依次列出：1. 零基础想要入门AI的新手，2. 想利用AI提升工作效率的职场人，3. 内容创作者想要提升产能，4. 想要通过AI技能拓展副业的朋友，5. 想学习最新AI工具使用的爱好者。每个人群用卡片呈现，标题加粗说明人群，小字补充说明学习收获，排版清晰。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 卡片重叠，文字错乱，文字过小，配色杂乱，变形，水印](https://gd-cms.dancf.com/gd-cms/xi19e5/0/ccc1eb01-e5b8-4b08-9844-7296218f01da63458.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
