Skip to content

Latest commit

 

History

History
158 lines (119 loc) · 5.19 KB

File metadata and controls

158 lines (119 loc) · 5.19 KB

设计指引 Design Guide

核心原则

每套PPT的风格必须为这个具体主题量身定做。 如果把你的配色换到一个完全不同主题的PPT里仍然"说得过去",那说明你的选色不够精准。


配色设计

选色思路

不要从色板里"挑一个"——而是问:这个主题在视觉上应该给人什么感受?

感受 色彩方向 典型场景
严肃/权威 深蓝、深灰、黑,搭配白/金点缀 法律、金融、咨询
科技/未来 深底色(黑/深蓝)+ 高饱和强调色(青/紫/绿) IT产品、AI、数据
自然/可持续 绿色系、土色系、米白 环保、农业、健康
活力/消费 暖色系(珊瑚、橙、黄)+ 深色压底 零售、营销、品牌
温暖/人文 赤陶、砖红、奶油、棕 教育、文化、社会
清新/医疗 浅蓝、薄荷绿、白,辅以深蓝 医疗、健康、科研
高端/奢华 深底(黑/深紫/深绿)+ 金/银点缀 地产、奢侈品、高端服务

颜色层次(必须遵守)

主色(60-70%):大背景、色块、主要视觉面积
辅色(20-30%):内容区域、次级背景
强调色(5-10%):关键数据、图标、按钮、重点文字
文字色:深背景用白/浅灰,浅背景用深灰/黑

深浅对比结构(推荐):

  • 封面 + 结尾页:深色背景(沉浸感、记忆点)
  • 内容页:浅色背景(易读性)
  • 或者:全深色贯穿(高级感,适合科技/金融主题)

版式设计

五种基础版式

封面页

方案A:左侧大色块(30-40%宽)+ 右侧标题/副标题
方案B:全幅深色背景 + 居中大字 + 几何装饰
方案C:顶部横向色条 + 下方标题区域

内容页(文字为主)

顶部色条(60-80px)锚定标题
内容区:3列卡片 / 图标+文字行 / 左文右图
每张必须有非文字视觉元素(形状/图标/色块)

双栏对比页

左:文字/列表/说明
右:图表/图片/数据
中间可用细竖线或留白分隔

数据页

顶部:2-4个KPI大数字(60-72px,有色背景框)
下方:图表占主体面积(不要让图表太小)

结尾页

呼应封面风格
核心结语大字居中
联系方式/Logo

视觉动机(选一个贯穿全程)

每套PPT选定一个独特装饰元素,在每张幻灯片上重复出现:

  • 左侧竖向色条(3-8px 细线或 60-120px 宽色块)
  • 标题左上角的小色块/圆点
  • 图标统一放在有色圆形背景内
  • 圆角卡片容器
  • 右下角半透明大圆(装饰,不抢焦点)

字体

搭配原则

  • 标题字体:有个性,视觉重量大
  • 正文字体:中性,易读,与标题形成对比
  • 不要两种字体都很"平",也不要都很"花"

推荐搭配

标题 正文 风格感受
Microsoft YaHei Bold Calibri 通用商务
思源黑体 Heavy 思源黑体 Regular 现代简约
Georgia Bold Calibri 人文/学术
Arial Black Arial 强势/直接
Cambria Bold Calibri Light 优雅/传统

字号层级

元素 字号 说明
主标题(封面) 48-64px 视觉焦点,要大
页面标题 36-44px 清晰标识当前页内容
小节标题 24-28px 内容分组
正文 16-20px 不要低于16px
KPI数字 52-72px 配小标签说明
注释/说明 12-14px 灰色,不抢主体

常见错误(必须避免)

  • 标题下方加装饰横线 — AI感最强的特征,绝对不用
  • 所有幻灯片用相同布局 — 至少3种版式交替出现
  • 纯文字+项目符号 — 每张幻灯片必须有视觉元素
  • 颜色平均分配 — 没有主次之分等于没有设计
  • 浅色背景+浅色文字 — 对比度不足,阅读困难
  • 图表太小 — 数据页的图表应占幻灯片面积40%以上
  • 内容堆砌 — 每张幻灯片一个核心信息,留白是设计的一部分

模板风格提取后的使用方式

style_profile.json 存在时,按以下方式将提取结果应用到HTML生成:

colors.background       → section.slide 的 background-color
colors.primary          → 主要色块、色条的 background 颜色
colors.text_main        → 主要文字的 color
colors.text_secondary   → 次级文字、说明文字的 color
colors.accent           → 强调色、KPI数字、图标背景

fonts.title.name        → 标题文字的 font-family
fonts.title.size_pt     → 标题字号(pt转px:×1.333)
fonts.title.bold        → 标题 font-weight
fonts.body.name         → 正文 font-family
fonts.body.size_pt      → 正文字号

layout.has_left_sidebar → 是否在封面/内容页左侧保留色块结构
layout.sidebar_width_pct→ 左侧色块宽度(占1280px的百分比)
layout.has_top_bar      → 是否在内容页顶部保留色条结构
layout.decorative_shapes→ 在相应位置加入同类型装饰形状

原则:还原品牌感,不要复刻布局。 用模板的颜色和字体重新自由创作版式,而不是把模板的每个元素位置都照搬过来。