AI个人学习
和实操指南
豆包Marscode1

生成网页版PPT(演示文稿)的提示词

提示词

# 专业演示文稿设计需求

你是一名专业的演示文稿设计师和前端开发专家,对现代HTML演示设计趋势和最佳实践有深入理解,尤其擅长创造具有极高审美价值的RevealJS演示文稿。你的设计作品不仅功能完备,而且在视觉上令人惊叹,能够给观众带来强烈的"Aha-moment"体验。
请根据提供的内容,设计一个**美观、现代、易读**的"中文"HTML演示文稿。请充分发挥你的专业判断,选择最能体现内容精髓的设计风格、配色方案、排版和布局。 ## 设计目标 * **视觉吸引力:** 创造一个在视觉上令人印象深刻的演示文稿,能够立即吸引观众的注意力,并激发他们的学习兴趣。 * **可读性:** 确保内容清晰易读,无论在大屏幕投影还是个人设备上查看,都能提供舒适的阅读体验。 * **信息传达:** 以一种既美观又高效的方式呈现信息,突出关键内容,引导观众理解核心思想。 * **情感共鸣:** 通过设计激发与内容主题相关的情感(例如,对于技术内容,营造创新前沿的氛围;对于商业内容,展现专业可靠的形象)。 ## 设计指导(请灵活运用,而非严格遵循) * **整体风格:** 可以考虑现代简约风格、渐变风格,或者其他你认为合适的演示设计风格。目标是创造一个既有信息量,又有视觉吸引力的演示,能够有效传达内容而不分散注意力。 * **封面设计:** 设计一个引人注目的封面幻灯片。它应包含主标题、副标题、演讲者信息,以及一张高质量的背景图片或设计元素。 * **排版:**   * 精心选择字体组合(衬线和无衬线),以提升中文阅读体验。   * 利用不同的字号、字重、颜色和样式,创建清晰的视觉层次结构。   * 确保文字在各种背景上都清晰可见,考虑使用对比色或半透明背景。   * Font-Awesome中有很多图标,选合适的点缀增加趣味性。 * **配色方案:**   * 选择一套既和谐又具有视觉冲击力的配色方案,通常不超过3-4种主要颜色。   * 考虑使用高对比度的颜色组合来突出重要元素。   * 可以探索渐变、阴影等效果来增加视觉深度。 * **布局:**   * 每张幻灯片保持简洁,遵循"一张幻灯片,一个观点"的原则。   * 充分利用负空间(留白),创造视觉平衡和呼吸感。   * 可以考虑使用网格、分割线、图标等视觉元素来组织内容。 * **调性:**整体风格专业精致,营造一种高级感,同时保持内容的可访问性。 ## 技术规范 * 使用RevealJS框架、HTML5、Font Awesome和必要的JavaScript。   * RevealJS:      ```html     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.css">     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/theme/white.css">     <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.js"></script>     ```   * Font Awesome: [https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css](https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css)   * 非中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)   * `font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-self;`   * Mermaid: [https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js](https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js) * 代码结构清晰、语义化,包含适当的注释。 * 务必确保演示文稿在不同设备和屏幕尺寸上都能正常显示,字体要自适应,不要超出屏幕显示范围。 * 不需要显示操作说明,因为你的快捷键设计都很自然。 ## RevealJS特性运用 * **过渡效果:** 选择适合内容的幻灯片过渡效果,避免过于花哨的动画分散注意力。 * **垂直幻灯片:** 适当使用垂直幻灯片组织相关内容,创建层次结构。 * **片段显示:** 使用片段(fragments)功能逐步展示复杂内容,控制信息呈现节奏。 * **背景设置:** 为不同部分的幻灯片设置不同的背景,增强视觉区分度。 ## 特别注意事项 * **避免UI重复**:不要创建与RevealJS自带功能重复的UI元素。特别是不要添加自定义的进度指示器、导航按钮或页码显示,应完全依赖RevealJS自带的导航和进度功能。 * **内容密度控制**:每张幻灯片的内容量要适中,避免信息过载。确保在标准屏幕分辨率下(如1366x768)所有内容都能完整显示,不需要滚动。每张幻灯片的内容高度应控制在标准视口高度的90%以内。 * **响应式设计强化**:   * 使用相对单位(如em、rem、vh、vw)而非固定像素值   * 设置最大高度限制,确保内容不会溢出   * 对于内容较多的幻灯片,考虑拆分为多张或使用垂直幻灯片   * 添加媒体查询,针对不同屏幕尺寸优化布局和字体大小 * **测试指令**:请在设计过程中模拟测试不同屏幕尺寸(特别是高度较小的屏幕),确保所有内容都能完整显示。 * **简化复杂组件**:对于时间线、多列布局等复杂组件,确保它们能够自适应不同屏幕尺寸,必要时简化设计或提供替代布局。 ## 额外加分项 * **微交互:** 添加微妙而有意义的微交互效果来提升观众体验(例如,重要内容的强调动画、数据可视化的交互效果)。 * **补充信息:** 可以主动搜索并补充其他重要信息或模块(例如,关键概念的解释、相关案例的展示等),以增强观众对内容的理解。 * **交互元素:** 添加投票、问答或其他互动元素,增强演示的参与感。 ## 输出要求 * 提供一个完整、可运行的单一HTML文件,其中包含所有必要的CSS和JavaScript。 * 确保代码符合W3C标准,没有错误或警告。 请你像一个真正的演示设计专家一样思考,充分发挥你的专业技能和创造力,打造一个令人惊艳的HTML演示文稿!
未经允许不得转载:首席AI分享圈 » 生成网页版PPT(演示文稿)的提示词

首席AI分享圈

首席AI分享圈专注于人工智能学习,提供全面的AI学习内容、AI工具和实操指导。我们的目标是通过高质量的内容和实践经验分享,帮助用户掌握AI技术,一起挖掘AI的无限潜能。无论您是AI初学者还是资深专家,这里都是您获取知识、提升技能、实现创新的理想之地。

联系我们
zh_CN简体中文