学习类APP综合型首页UI设计，尺寸750*1334px，整体风格简约现代扁平风，蓝白色调性，风格统一，界面干净清爽。 从上到下依次包含完整功能模块： 1. 顶部导航栏：左侧“学习助手”logo，右侧
1r1lc818ktO...
2026.05.19学习类APP综合型首页UI设计，尺寸750*1334px，整体风格简约现代扁平风，蓝白色调性，风格统一，界面干净清爽。 从上到下依次包含完整功能模块： 1. 顶部导航栏：左侧“学习助手”logo，右侧
1r1lc818ktO...
2026.05.19![[第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)
![[第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)
![[第8屏] 完整公开课APP列表页面总览，展示完整长列表滚动效果，整体视觉风格统一收尾。
[氛围/风格] 整体展示，统一视觉风格，现代简约设计。
[元素布局] 展示从顶部导航、搜索框、到3条完整公开课列表的完整页面，滚动布局自然，所有信息模块都展示到位，风格统一。
[光影质感] 统一光影，所有卡片和元素风格保持一致。
[配色色系] 整体白色背景，蓝色主色调，灰色文字层级，保持前面所有页面配色一致。
[视角构图] 正视图，完整移动端竖屏页面，从上到下完整展示。
[文字版式] 所有文字排版和前面页面保持一致，层级清晰，统一风格。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 风格不统一，布局错乱，文字模糊，变形，水印。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/5dce97c6-5b9e-40be-acd0-e93e74db55487004.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第8屏] 每日打卡复习机制，知识点巩固说明。氛围风格：清新简约打卡风，有日常学习氛围感。元素布局：顶部标题，中间模拟打卡日历界面，展示每日打卡打卡，底部说明复习优势。光影质感：日历区域清晰，文字明亮，整体均匀布光。配色色系：全局底色 #F5F9FF，日历浅灰色，打卡完成绿色打钩，文字深灰。视角构图：居中展示打卡日历，上下文字说明。文字版式：主标题“每天打卡复习 知识点记得牢”，中间展示20天打卡日历，部分打卡完成标注，底部说明“每日复习巩固，温故知新不遗忘”，文字清晰易读。比例分辨率：9:16竖版比例，4K分辨率，文字清晰可辨。负向提示词：文字错乱，变形，水印，颜色偏差，背景杂乱。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/260ac7ce-24a9-45ee-ab35-37d87e272ca211605.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)
![[第6屏] 详情页卖点屏，展示情绪价值赋能和错题重练个性化推荐优势。
[氛围/风格] 温暖鼓励的学习氛围，清晰专业，信息层级分明。
[元素布局] 分为上下两个模块，上半部分展示情绪价值，下半部分展示错题重练功能。顶部通栏大标题，每个模块占据一半左右高度，中间用浅蓝细线分隔，排版宽松，内容不拥挤。
[光影质感] 均匀柔和光线，每个模块内容清晰展示，无明暗遮挡，阅读舒适。
[配色色系] 全局底色 #F5F8FF；标题蓝 #4086FF；文字深蓝 #1E3A8A；分隔线浅蓝，整体配色温暖干净。
[视角构图] 从上到下竖版9:16构图，适配移动端浏览，两个卖点模块纵向排列，信息清晰有序。
[文字版式] 顶部蓝色通栏大标题，白色加粗文字"个性化备考 更懂你的需求"，居中；上半模块标题加粗蓝色文字"情绪价值赋能"，说明文字"每套题后配鼓励语、错误率分布、进度激励，备考从不孤单"；下半模块标题加粗蓝色文字"错题重练+个性化推荐"，说明文字"自动记录高频错题，推荐同类题目针对性练习，高效提分"。标题突出，说明文字清晰，字号适合手机阅读。
[比例分辨率] 9:16竖版比例，4K分辨率，文字清晰可辨，超高清。
[负向提示词] 文字错乱，排版拥挤，颜色偏差，水印，图形变形，背景杂乱。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/9ad8d6f8-d591-4b8e-966a-5c77c8b12449331.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
