AI 生成 iOS 风格论坛 UI 的提示词
角色定义
你是一位资深 Apple UI 设计师，拥有丰富的 iOS 应用设计经验，精通 Human Interface Guidelines。请以专业 iOS 开发者的视角，基于 iOS 18 设计语言创建一个高质量论坛应用界面。
设计风格要求
- 视觉语言：遵循 iOS 18 设计规范，采用简洁现代的界面风格
- 色彩系统：使用 iOS 系统动态色彩，支持浅色 / 深色模式自动切换
- 圆角设计：应用控件采用 12px 统一圆角，卡片元素使用 16px 圆角
- 半透明效果：导航栏使用毛玻璃 (blur) 效果，背景透明度 60%
- 排版系统：使用 SF Pro 字体族，建立清晰的字体层级（标题 24pt / 粗体，副标题 18pt / 中等，正文 16pt / 常规，辅助文字 14pt / 轻量）
- 阴影效果：使用微妙的阴影分层（x:0, y:2px, blur:8px, rgba (0,0,0,0.08)）
技术栈规范
- HTML 结构：语义化标签，合理使用 header/nav/main/article/section/footer 等
- 样式实现：优先使用 Tailwind CSS v3 实现样式，需内嵌完整配置
- 交互逻辑：使用原生 JavaScript 实现交互效果，避免依赖框架
- 响应式设计：支持 iPhone SE 至 iPhone 15 Pro Max 的所有尺寸，使用流体布局
- 代码规范：代码需包含详细注释，遵循 W3C 标准，确保可维护性
核心功能组件
1. 导航系统
- 顶部导航栏：包含应用 logo、搜索按钮、用户头像
- 底部标签栏：首页、分类、发布、通知、我的（含未读消息标记）
- 分段控制器：热门 / 最新 / 关注标签切换
2. 帖子列表
- 帖子卡片：包含用户头像 (40px 圆形)、用户名、发布时间、标题、内容预览 (2 行)
- 互动数据：评论数、点赞数、收藏状态
- 标签系统：支持最多 2 个分类标签（圆角矩形，浅灰背景）
- 媒体预览：如包含图片则显示 16:9 缩略图（支持多图横向滑动）
3. 帖子详情
- 内容区域：完整文本、图片画廊（支持缩放查看）
- 互动区：点赞 / 评论 / 分享按钮（带点击反馈动画）
- 评论列表：嵌套式评论展示，支持回复功能
- 底部输入框：带表情选择器和发送按钮
4. 辅助功能
- 下拉刷新：带动画效果的刷新指示器
- 无限滚动：滚动到底部自动加载更多内容
- 骨架屏：内容加载时显示占位骨架
- 空状态：无数据时显示友好提示插图和文字
交互细节要求
- 点击反馈：所有可点击元素点击时有 0.15s 的缩放效果 (0.95 倍)
- 滑动操作：帖子支持左滑显示 "收藏" 和 "更多" 按钮
- 导航过渡：页面切换使用 iOS 原生滑动过渡动画 (0.3s)
- 模态框：从底部滑入，背景半透明黑色 (70% opacity)
- 输入反馈：表单输入实时验证，错误提示使用红色文本 + 抖动动画
- 手势支持：支持双击点赞、长按显示操作菜单
动画效果规范
- 进入动画：新页面从右侧滑入，同时当前页面轻微左移 (10%) 并变暗 (80%)
- 加载动画：使用 iOS 风格的菊花加载器，颜色为系统蓝
- 滚动效果：导航栏随滚动变化背景透明度 (从 60% 到 100%)
- 点赞动画：点击时出现扩散波纹 + 数字增长动画
- 列表动画：帖子加载时使用交错淡入效果 (0.1s 间隔)
- 转场效果：模态框弹出时使用弹簧动画 (damping: 0.7, stiffness: 100)
输出要求
- 完整可运行的 HTML 文件，包含内嵌的 Tailwind CSS 配置和 JavaScript 代码
- 所有交互功能需实现并注释关键逻辑
- 提供模拟数据填充 UI（5 条帖子，2 条带评论）
- 确保代码可直接保存为 HTML 文件运行，无需额外依赖
- 包含响应式设计适配方案（iPhone/iPad 不同尺寸）
- 代码中需注释说明实现的 iOS 设计规范要点