Back to Details

design-style-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Style Recipes - PPT视觉风格系统

Style Recipes - PPT Visual Style System

同一套设计可通过调整圆角（rectRadius）和间距呈现4种不同风格。根据场景选择合适的风格配方。
单位说明: PptxGenJS 使用英寸(inch)作为单位。幻灯片尺寸为 10" × 5.625" (LAYOUT_16x9)
The same design can present 4 different styles by adjusting the corner radius (rectRadius) and spacing. Choose the appropriate style recipe according to the scenario.
Unit Description: PptxGenJS uses inches as the unit. The slide size is 10" × 5.625" (LAYOUT_16x9)

风格概览

Style Overview

风格圆角范围间距范围适合场景
Sharp & Compact0 ~ 0.05"紧凑数据密集型、表格、专业报告
Soft & Balanced0.08" ~ 0.12"适中企业汇报、商务演示、通用PPT
Rounded & Spacious0.15" ~ 0.25"宽松产品介绍、营销演示、创意展示
Pill & Airy0.3" ~ 0.5"通透品牌展示、发布会、高端演示
StyleCorner Radius RangeSpacing RangeApplicable Scenarios
Sharp & Compact0 ~ 0.05"CompactData-intensive scenarios, tables, professional reports
Soft & Balanced0.08" ~ 0.12"ModerateCorporate reports, business presentations, general PPT
Rounded & Spacious0.15" ~ 0.25"LooseProduct introductions, marketing presentations, creative showcases
Pill & Airy0.3" ~ 0.5"AiryBrand showcases, press conferences, high-end presentations

Sharp & Compact（锐利紧凑）

Sharp & Compact

视觉特征: 方正、信息密度高、专业严肃感。
Visual Features: Square, high information density, professional and serious feel.

Token 配方

Token Recipe

类别值 (英寸)说明
圆角-小0"完全直角
圆角-中0.03"微圆角
圆角-大0.05"小圆角
元素内边距0.1" ~ 0.15"紧凑
元素间距0.1" ~ 0.2"紧凑
页面边距0.3"较窄
区块间距0.25" ~ 0.35"紧凑
CategoryValue (inch)Description
Small corner radius0"Fully right angle
Medium corner radius0.03"Slight rounded corner
Large corner radius0.05"Small rounded corner
Element padding0.1" ~ 0.15"Compact
Element spacing0.1" ~ 0.2"Compact
Page margin0.3"Narrow
Block spacing0.25" ~ 0.35"Compact

Soft & Balanced（柔和均衡）

Soft & Balanced

视觉特征: 适中的圆角、舒适的留白、专业又不失亲和。
Visual Features: Moderate rounded corners, comfortable white space, professional yet approachable.

Token 配方

Token Recipe

类别值 (英寸)说明
圆角-小0.05"小圆角
圆角-中0.08"中等圆角
圆角-大0.12"较大圆角
元素内边距0.15" ~ 0.2"适中
元素间距0.15" ~ 0.25"适中
页面边距0.4"标准
区块间距0.35" ~ 0.5"适中
CategoryValue (inch)Description
Small corner radius0.05"Small rounded corner
Medium corner radius0.08"Medium rounded corner
Large corner radius0.12"Relatively large rounded corner
Element padding0.15" ~ 0.2"Moderate
Element spacing0.15" ~ 0.25"Moderate
Page margin0.4"Standard
Block spacing0.35" ~ 0.5"Moderate

Rounded & Spacious（圆润宽松）

Rounded & Spacious

视觉特征: 大圆角、充裕留白、友好亲切、现代感。
Visual Features: Large rounded corners, ample white space, friendly and modern.

Token 配方

Token Recipe

类别值 (英寸)说明
圆角-小0.1"中等圆角
圆角-中0.15"大圆角
圆角-大0.25"很大圆角
元素内边距0.2" ~ 0.3"宽松
元素间距0.25" ~ 0.4"宽松
页面边距0.5"较宽
区块间距0.5" ~ 0.7"宽松
CategoryValue (inch)Description
Small corner radius0.1"Medium rounded corner
Medium corner radius0.15"Large rounded corner
Large corner radius0.25"Very large rounded corner
Element padding0.2" ~ 0.3"Loose
Element spacing0.25" ~ 0.4"Loose
Page margin0.5"Relatively wide
Block spacing0.5" ~ 0.7"Loose

Pill & Airy（胶囊通透）

Pill & Airy

视觉特征: 全圆角胶囊形、大量留白、轻盈通透、品牌展示感强。
Visual Features: Full rounded capsule shape, lots of white space, light and airy, strong brand presentation feel.

Token 配方

Token Recipe

类别值 (英寸)说明
圆角-小0.2"大圆角
圆角-中0.3"胶囊形
圆角-大0.5"完全胶囊
元素内边距0.25" ~ 0.4"通透
元素间距0.3" ~ 0.5"通透
页面边距0.6"宽
区块间距0.6" ~ 0.9"通透
CategoryValue (inch)Description
Small corner radius0.2"Large rounded corner
Medium corner radius0.3"Capsule shape
Large corner radius0.5"Full capsule shape
Element padding0.25" ~ 0.4"Airy
Element spacing0.3" ~ 0.5"Airy
Page margin0.6"Wide
Block spacing0.6" ~ 0.9"Airy

组件级风格映射表

Component-level Style Mapping Table

组件SharpSoftRoundedPill
按钮/标签rectRadius: 0rectRadius: 0.05rectRadius: 0.1rectRadius: 0.2
卡片/容器rectRadius: 0.03rectRadius: 0.1rectRadius: 0.2rectRadius: 0.3
图片容器rectRadius: 0rectRadius: 0.08rectRadius: 0.15rectRadius: 0.25
输入框形状rectRadius: 0rectRadius: 0.05rectRadius: 0.1rectRadius: 0.2
徽章/BadgerectRadius: 0.02rectRadius: 0.05rectRadius: 0.08rectRadius: 0.15
头像框rectRadius: 0rectRadius: 0.1rectRadius: 0.2rectRadius: 0.5 (圆形)
ComponentSharpSoftRoundedPill
Button/TagrectRadius: 0rectRadius: 0.05rectRadius: 0.1rectRadius: 0.2
Card/ContainerrectRadius: 0.03rectRadius: 0.1rectRadius: 0.2rectRadius: 0.3
Image ContainerrectRadius: 0rectRadius: 0.08rectRadius: 0.15rectRadius: 0.25
Input Field ShaperectRadius: 0rectRadius: 0.05rectRadius: 0.1rectRadius: 0.2
BadgerectRadius: 0.02rectRadius: 0.05rectRadius: 0.08rectRadius: 0.15
Avatar FramerectRadius: 0rectRadius: 0.1rectRadius: 0.2rectRadius: 0.5 (circle)

PptxGenJS 圆角示例

PptxGenJS Corner Radius Examples

javascript
// Sharp 风格卡片
slide.addShape("rect", {
  x: 0.5, y: 1, w: 4, h: 2.5,
  fill: { color: "F5F5F5" },
  rectRadius: 0.03
});

// Rounded 风格卡片
slide.addShape("rect", {
  x: 0.5, y: 1, w: 4, h: 2.5,
  fill: { color: "F5F5F5" },
  rectRadius: 0.2
});

// Pill 风格按钮 (高度0.4"时，rectRadius设为0.2"即为胶囊形)
slide.addShape("rect", {
  x: 3, y: 4, w: 2, h: 0.4,
  fill: { color: "4A90D9" },
  rectRadius: 0.2
});
javascript
// Sharp 风格卡片
slide.addShape("rect", {
  x: 0.5, y: 1, w: 4, h: 2.5,
  fill: { color: "F5F5F5" },
  rectRadius: 0.03
});

// Rounded 风格卡片
slide.addShape("rect", {
  x: 0.5, y: 1, w: 4, h: 2.5,
  fill: { color: "F5F5F5" },
  rectRadius: 0.2
});

// Pill 风格按钮 (高度0.4"时，rectRadius设为0.2"即为胶囊形)
slide.addShape("rect", {
  x: 3, y: 4, w: 2, h: 0.4,
  fill: { color: "4A90D9" },
  rectRadius: 0.2
});

混搭原则

Mixing Principles

1. 外层容器 ≥ 内层圆角

1. Outer container corner radius ≥ Inner element corner radius

javascript
// 正确：外 > 内
card:   rectRadius: 0.2
button: rectRadius: 0.1

// 错误：内 > 外 → 视觉溢出感
card:   rectRadius: 0.1
button: rectRadius: 0.2
javascript
// Correct: outer > inner
card:   rectRadius: 0.2
button: rectRadius: 0.1

// Wrong: inner > outer → visual overflow feeling
card:   rectRadius: 0.1
button: rectRadius: 0.2

2. 信息密度决定间距

2. Information density determines spacing

区域类型推荐风格
数据展示区Sharp / Soft（紧凑间距）
内容浏览区Rounded / Pill（宽松间距）
标题区域Soft / Rounded（适中间距）
Area TypeRecommended Style
Data Display AreaSharp / Soft (compact spacing)
Content Browsing AreaRounded / Pill (loose spacing)
Title AreaSoft / Rounded (moderate spacing)

3. 圆角与元素高度的关系

3. Relationship between corner radius and element height

元素高度SharpSoftRoundedPill
小 (< 0.3")0"0.03"0.08"高度/2
中 (0.3" ~ 0.6")0.02"0.05"0.12"高度/2
大 (0.6" ~ 1.2")0.03"0.08"0.2"0.3"
超大 (> 1.2")0.05"0.12"0.25"0.4"
Pill风格提示: 要实现完美胶囊形，设置 
rectRadius = 元素高度 / 2
Element HeightSharpSoftRoundedPill
Small (< 0.3")0"0.03"0.08"height/2
Medium (0.3" ~ 0.6")0.02"0.05"0.12"height/2
Large (0.6" ~ 1.2")0.03"0.08"0.2"0.3"
Extra Large (> 1.2")0.05"0.12"0.25"0.4"
Pill Style Tip: To achieve a perfect capsule shape, set 
rectRadius = element height / 2

Typography 排版规范 (PPT)

Typography Specification (PPT)

用途字号 (pt)说明
注释/来源10 ~ 12最小可读字号
正文/描述14 ~ 16标准正文
副标题18 ~ 22次要标题
标题28 ~ 36页面标题
大标题44 ~ 60封面/章节标题
数据高亮60 ~ 96关键数字展示
UsageFont Size (pt)Description
Annotation/Source10 ~ 12Minimum readable font size
Body Text/Description14 ~ 16Standard body text
Subtitle18 ~ 22Secondary title
Title28 ~ 36Page title
Headline44 ~ 60Cover/chapter title
Highlighted Data60 ~ 96Key number display

Spacing 间距规范 (PPT)

Spacing Specification (PPT)

基于10" × 5.625"幻灯片尺寸：
用途推荐值 (英寸)
图标与文字间距0.08" ~ 0.15"
列表项间距0.15" ~ 0.25"
卡片内边距0.2" ~ 0.4"
元素组间距0.3" ~ 0.5"
页面安全边距0.4" ~ 0.6"
主要区块间距0.5" ~ 0.8"
Based on 10" × 5.625" slide size:
UsageRecommended Value (inch)
Icon and text spacing0.08" ~ 0.15"
List item spacing0.15" ~ 0.25"
Card padding0.2" ~ 0.4"
Element group spacing0.3" ~ 0.5"
Page safe margin0.4" ~ 0.6"
Main block spacing0.5" ~ 0.8"

快速选择指南

Quick Selection Guide

演示类型推荐风格原因
财务/数据报告Sharp & Compact信息密度高，专业严谨
企业汇报/商务Soft & Balanced平衡专业与友好
产品介绍/营销Rounded & Spacious现代感，亲切感
发布会/品牌展示Pill & Airy高端感，视觉冲击
培训/教育Soft / Rounded清晰易读，友好
技术分享Sharp / Soft专业，信息清晰
Presentation TypeRecommended StyleReason
Financial/Data ReportSharp & CompactHigh information density, professional and rigorous
Corporate Report/Business PresentationSoft & BalancedBalances professionalism and friendliness
Product Introduction/MarketingRounded & SpaciousModern and approachable
Press Conference/Brand ShowcasePill & AiryHigh-end feel, visual impact
Training/EducationSoft / RoundedClear and readable, friendly
Tech SharingSharp / SoftProfessional, clear information