skillhub-155-html-ppt-zhangzara-soft-editorial
wehub-skill-sync
1185 行
40 KiB
HTML
1185 行
40 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Soft Editorial — 幻灯片模板</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Work+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
|
|
<script src="assets/deck-stage.js"></script>
|
|
<style>
|
|
:root {
|
|
--paper: #F2EEDF; /* warm cream page */
|
|
--paper-2: #ECE6D2;
|
|
--ink: #2A241B; /* warm near-black */
|
|
--ink-soft: #5C5345;
|
|
--pink: #E1A4C2; /* dusty pink */
|
|
--lemon: #D6DD63; /* chartreuse */
|
|
--blush: #E8C9B6; /* soft peach */
|
|
--sage: #B7C7A8; /* sage (extra) */
|
|
--lilac: #C9BEDC; /* lilac (extra) */
|
|
}
|
|
html, body { margin:0; padding:0; background:#1a1a1a; }
|
|
body { font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ink); }
|
|
deck-stage { background: #1a1a1a; }
|
|
|
|
section.slide {
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Header / footer chrome shared across slides */
|
|
.eyebrow {
|
|
position: absolute;
|
|
top: 60px; left: 80px;
|
|
font-family: "Work Sans", sans-serif;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: var(--ink);
|
|
letter-spacing: -0.005em;
|
|
}
|
|
.footer {
|
|
position: absolute;
|
|
left: 80px; right: 80px; bottom: 50px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: "Cormorant Garamond", "Garamond", serif;
|
|
font-size: 26px;
|
|
font-style: italic;
|
|
color: var(--ink-soft);
|
|
}
|
|
.pagedot {
|
|
position: absolute;
|
|
right: 80px; top: 60px;
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 26px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
/* Typography */
|
|
h1, h2, h3, p { margin: 0; }
|
|
.serif { font-family: "Cormorant Garamond", "Garamond", serif; font-weight: 500; }
|
|
.serif-it { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; }
|
|
.display {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 188px;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
.title {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 124px;
|
|
line-height: 0.98;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.subtitle {
|
|
font-family: "Work Sans", sans-serif;
|
|
font-weight: 500;
|
|
font-size: 44px;
|
|
line-height: 1.1;
|
|
}
|
|
.body {
|
|
font-family: "Work Sans", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 26px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ============== 1. COVER ================================== */
|
|
.s-cover .stack {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex; flex-direction: column; gap: 36px;
|
|
}
|
|
.s-cover .kicker {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 38px;
|
|
color: var(--ink-soft);
|
|
}
|
|
.s-cover h1 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 232px;
|
|
line-height: 0.92;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.s-cover h1 em { font-style: italic; font-weight: 400; }
|
|
.s-cover .lede {
|
|
font-size: 30px;
|
|
line-height: 1.4;
|
|
max-width: 60ch;
|
|
color: var(--ink-soft);
|
|
}
|
|
.s-cover .swatches {
|
|
position: absolute;
|
|
right: 80px; top: 80px;
|
|
display: flex; gap: 14px;
|
|
}
|
|
.s-cover .swatches i {
|
|
width: 56px; height: 56px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
}
|
|
|
|
/* ============== 2. FOREWORD =============================== */
|
|
.s-foreword .col-l {
|
|
position: absolute;
|
|
left: 80px; top: 200px; width: 760px;
|
|
}
|
|
.s-foreword .col-l .opener {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 56px;
|
|
line-height: 1.1;
|
|
color: var(--ink);
|
|
margin-bottom: 36px;
|
|
}
|
|
.s-foreword .col-l .opener:first-letter {
|
|
font-size: 132px;
|
|
float: left;
|
|
line-height: 0.85;
|
|
padding: 8px 14px 0 0;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
.s-foreword .col-r {
|
|
position: absolute;
|
|
right: 80px; top: 200px; width: 760px;
|
|
}
|
|
.s-foreword .col-r p {
|
|
font-size: 24px;
|
|
line-height: 1.55;
|
|
margin-bottom: 22px;
|
|
color: var(--ink-soft);
|
|
}
|
|
.s-foreword .col-r p:first-child { color: var(--ink); }
|
|
.s-foreword .signoff {
|
|
margin-top: 24px;
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 30px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* ============== 3. THE METHOD ============================= */
|
|
.s-method .grid {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 220px; bottom: 140px;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 28px;
|
|
}
|
|
.s-method .step {
|
|
background: rgba(255,255,255,0.55);
|
|
border-radius: 32px;
|
|
padding: 36px 32px;
|
|
display: flex; flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.s-method .step .n {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 92px;
|
|
line-height: 0.9;
|
|
color: var(--ink);
|
|
}
|
|
.s-method .step h3 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 44px;
|
|
line-height: 1.05;
|
|
margin-top: 16px;
|
|
}
|
|
.s-method .step p {
|
|
font-size: 24px;
|
|
line-height: 1.45;
|
|
color: var(--ink-soft);
|
|
}
|
|
.s-method .step.pink { background: var(--pink); }
|
|
.s-method .step.lemon { background: var(--lemon); }
|
|
.s-method .step.blush { background: var(--blush); }
|
|
.s-method .step.sage { background: var(--sage); }
|
|
|
|
/* ============== 4. INSIGHTS (reference layout) ============ */
|
|
.s-insights .row {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 200px; bottom: 200px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 28px;
|
|
}
|
|
.s-insights .card {
|
|
border-radius: 36px;
|
|
padding: 64px 48px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 36px;
|
|
}
|
|
.s-insights .card.pink { background: var(--pink); }
|
|
.s-insights .card.lemon { background: var(--lemon); }
|
|
.s-insights .card.blush { background: var(--blush); }
|
|
.s-insights .card .head h3 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 72px;
|
|
line-height: 1;
|
|
letter-spacing: -0.01em;
|
|
margin-bottom: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
.s-insights .card .head .sub {
|
|
font-family: "Work Sans", sans-serif;
|
|
font-weight: 500;
|
|
font-size: 32px;
|
|
line-height: 1.1;
|
|
}
|
|
.s-insights .card p {
|
|
font-size: 24px;
|
|
line-height: 1.45;
|
|
max-width: 26ch;
|
|
}
|
|
|
|
/* ============== 5. A CLOSER LOOK (full-bleed) ============= */
|
|
.s-closer { background: var(--pink); }
|
|
.s-closer .eyebrow,
|
|
.s-closer .pagedot,
|
|
.s-closer .footer { color: var(--ink); }
|
|
.s-closer .footer { color: rgba(42,36,27,.7); }
|
|
.s-closer .center {
|
|
position: absolute;
|
|
left: 50%; top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 1100px;
|
|
text-align: center;
|
|
}
|
|
.s-closer .marker {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 38px;
|
|
color: var(--ink);
|
|
margin-bottom: 32px;
|
|
}
|
|
.s-closer h2 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 168px;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.015em;
|
|
margin-bottom: 36px;
|
|
}
|
|
.s-closer h2 em { font-style: italic; font-weight: 400; }
|
|
.s-closer p {
|
|
font-size: 28px;
|
|
line-height: 1.5;
|
|
max-width: 56ch;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ============== 6. BY THE NUMBERS ========================= */
|
|
.s-numbers .grid {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 200px; bottom: 140px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 28px;
|
|
}
|
|
.s-numbers .stat {
|
|
border-radius: 36px;
|
|
padding: 42px 44px;
|
|
display: flex; flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.s-numbers .stat .v {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 200px;
|
|
line-height: 0.9;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.s-numbers .stat .v em { font-style: italic; font-weight: 400; }
|
|
.s-numbers .stat .lab {
|
|
font-size: 24px;
|
|
line-height: 1.4;
|
|
color: var(--ink);
|
|
max-width: 28ch;
|
|
}
|
|
.s-numbers .a { background: var(--lemon); grid-column: span 2; grid-row: span 2; }
|
|
.s-numbers .a .v { font-size: 320px; }
|
|
.s-numbers .b { background: var(--pink); }
|
|
.s-numbers .c { background: var(--blush); }
|
|
|
|
/* ============== 7. IN THEIR WORDS ========================= */
|
|
.s-quote .center {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 50%;
|
|
transform: translateY(-50%);
|
|
text-align: center;
|
|
}
|
|
.s-quote .qmark {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 220px;
|
|
line-height: 0.7;
|
|
color: var(--blush);
|
|
margin-bottom: 12px;
|
|
}
|
|
.s-quote blockquote {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 88px;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.01em;
|
|
margin: 0 auto;
|
|
max-width: 28ch;
|
|
color: var(--ink);
|
|
}
|
|
.s-quote blockquote em { font-style: italic; font-weight: 400; }
|
|
.s-quote .attr {
|
|
margin-top: 48px;
|
|
font-family: "Work Sans", sans-serif;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
color: var(--ink);
|
|
}
|
|
.s-quote .attr .role {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
color: var(--ink-soft);
|
|
display: block;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ============== 8. WHAT WE'LL DO NEXT ===================== */
|
|
.s-next .grid {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 200px; bottom: 140px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 36px;
|
|
}
|
|
.s-next .panel {
|
|
border-radius: 36px;
|
|
padding: 48px 52px;
|
|
display: flex; flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
.s-next .panel.l {
|
|
background: rgba(255,255,255,0.55);
|
|
justify-content: center;
|
|
}
|
|
.s-next .panel.l h2 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 124px;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
.s-next .panel.l h2 em { font-style: italic; font-weight: 400; }
|
|
.s-next .panel.l p {
|
|
font-size: 24px;
|
|
line-height: 1.5;
|
|
color: var(--ink-soft);
|
|
max-width: 36ch;
|
|
margin-top: 12px;
|
|
}
|
|
.s-next .panel.r {
|
|
background: transparent;
|
|
padding: 0;
|
|
gap: 20px;
|
|
}
|
|
.s-next .item {
|
|
border-radius: 28px;
|
|
padding: 24px 32px;
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
.s-next .item.pink { background: var(--pink); }
|
|
.s-next .item.lemon { background: var(--lemon); }
|
|
.s-next .item.blush { background: var(--blush); }
|
|
.s-next .item .n {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 64px;
|
|
line-height: 1;
|
|
}
|
|
.s-next .item h3 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 38px;
|
|
line-height: 1.05;
|
|
margin-bottom: 4px;
|
|
}
|
|
.s-next .item p {
|
|
font-size: 24px;
|
|
line-height: 1.4;
|
|
color: var(--ink);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ============== CONSULT (text-dense) ====================== */
|
|
.s-consult .eyebrow,
|
|
.s-consult .pagedot,
|
|
.s-consult .footer { color: var(--ink-soft); }
|
|
.s-consult .action {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 130px;
|
|
background: var(--lemon);
|
|
border-radius: 24px;
|
|
padding: 24px 36px;
|
|
display: flex; align-items: center; gap: 24px;
|
|
}
|
|
.s-consult .action .tag {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 28px;
|
|
color: var(--ink);
|
|
flex-shrink: 0;
|
|
border-right: 1px solid rgba(42,36,27,.3);
|
|
padding-right: 24px;
|
|
}
|
|
.s-consult .action h2 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 40px;
|
|
line-height: 1.15;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
.s-consult .body {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 290px; bottom: 130px;
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr 1fr;
|
|
gap: 28px;
|
|
}
|
|
.s-consult .col {
|
|
background: rgba(255,255,255,0.55);
|
|
border-radius: 24px;
|
|
padding: 28px 30px;
|
|
display: flex; flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.s-consult .col h3 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
font-size: 32px;
|
|
line-height: 1.05;
|
|
color: var(--ink);
|
|
border-bottom: 1px solid rgba(42,36,27,.18);
|
|
padding-bottom: 14px;
|
|
}
|
|
.s-consult .col .meta {
|
|
font-family: "Work Sans", sans-serif;
|
|
font-size: 24px;
|
|
line-height: 1.4;
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
}
|
|
.s-consult .col p {
|
|
font-size: 24px;
|
|
line-height: 1.5;
|
|
color: var(--ink-soft);
|
|
}
|
|
.s-consult .col ul {
|
|
margin: 0; padding-left: 18px;
|
|
font-size: 24px; line-height: 1.45;
|
|
color: var(--ink-soft);
|
|
}
|
|
.s-consult .col ul li { margin-bottom: 8px; }
|
|
.s-consult .col ul li strong { color: var(--ink); font-weight: 500; }
|
|
.s-consult .source {
|
|
margin-top: auto;
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 24px;
|
|
color: var(--ink-soft);
|
|
padding-top: 12px;
|
|
border-top: 1px dashed rgba(42,36,27,.18);
|
|
}
|
|
|
|
/* ============== CHART =================================== */
|
|
.s-chart .left {
|
|
position: absolute;
|
|
left: 80px; top: 200px; bottom: 130px; width: 540px;
|
|
display: flex; flex-direction: column; gap: 24px;
|
|
}
|
|
.s-chart .left h2 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 96px;
|
|
line-height: 0.98;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.s-chart .left h2 em { font-style: italic; font-weight: 400; }
|
|
.s-chart .left p {
|
|
font-size: 24px; line-height: 1.5; color: var(--ink-soft);
|
|
}
|
|
.s-chart .left .legend {
|
|
display: flex; flex-direction: column; gap: 10px;
|
|
margin-top: auto;
|
|
}
|
|
.s-chart .left .legend .li {
|
|
display: flex; align-items: center; gap: 14px;
|
|
font-size: 24px; color: var(--ink);
|
|
}
|
|
.s-chart .left .legend .li i {
|
|
width: 28px; height: 12px; border-radius: 6px;
|
|
}
|
|
.s-chart .right {
|
|
position: absolute;
|
|
right: 80px; top: 200px; bottom: 200px; left: 680px;
|
|
background: rgba(255,255,255,0.55);
|
|
border-radius: 28px;
|
|
padding: 36px 40px 30px 80px;
|
|
display: flex; flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.s-chart .right .yhead {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 24px;
|
|
color: var(--ink-soft);
|
|
margin-bottom: 8px;
|
|
}
|
|
.s-chart .right .plot {
|
|
flex: 1; min-height: 0; position: relative;
|
|
border-left: 1.5px solid rgba(42,36,27,.35);
|
|
border-bottom: 1.5px solid rgba(42,36,27,.35);
|
|
padding: 12px 12px 0 12px;
|
|
}
|
|
.s-chart .right .gline {
|
|
position: absolute; left: 0; right: 0;
|
|
border-top: 1px dashed rgba(42,36,27,.12);
|
|
}
|
|
.s-chart .right .yticks {
|
|
position: absolute; left: -56px; top: 0; bottom: 0;
|
|
display: flex; flex-direction: column; justify-content: space-between;
|
|
font-size: 24px; color: var(--ink-soft);
|
|
font-family: "Cormorant Garamond", serif; font-style: italic;
|
|
}
|
|
.s-chart .right svg { width: 100%; height: 100%; display: block; position: absolute; inset: 12px 12px 0 12px; overflow: visible; }
|
|
.s-chart .right .xticks {
|
|
display: flex; justify-content: space-between;
|
|
margin-top: 12px;
|
|
font-size: 24px; color: var(--ink-soft);
|
|
font-family: "Cormorant Garamond", serif; font-style: italic;
|
|
}
|
|
|
|
/* ============== PROCESS DIAGRAM ========================= */
|
|
.s-process .head {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 130px;
|
|
display: flex; align-items: baseline; justify-content: space-between;
|
|
}
|
|
.s-process .head h2 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 88px;
|
|
line-height: 1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.s-process .head h2 em { font-style: italic; font-weight: 400; }
|
|
.s-process .head .sub {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 28px;
|
|
color: var(--ink-soft);
|
|
max-width: 32ch;
|
|
text-align: right;
|
|
}
|
|
.s-process .flow {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 320px; bottom: 240px;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 24px;
|
|
align-items: stretch;
|
|
}
|
|
.s-process .node {
|
|
border-radius: 28px;
|
|
padding: 26px 24px;
|
|
display: flex; flex-direction: column; gap: 10px;
|
|
position: relative;
|
|
}
|
|
.s-process .node .n {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 56px;
|
|
line-height: 0.9;
|
|
}
|
|
.s-process .node h3 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 32px;
|
|
line-height: 1.05;
|
|
}
|
|
.s-process .node p {
|
|
font-size: 24px;
|
|
line-height: 1.4;
|
|
color: var(--ink-soft);
|
|
}
|
|
.s-process .node.n1 { background: var(--pink); }
|
|
.s-process .node.n2 { background: var(--blush); }
|
|
.s-process .node.n3 { background: var(--lemon); }
|
|
.s-process .node.n4 { background: var(--sage); }
|
|
.s-process .node.n5 { background: var(--lilac); }
|
|
.s-process .node .arrow {
|
|
position: absolute;
|
|
right: -20px; top: 50%; transform: translateY(-50%);
|
|
width: 32px; height: 32px;
|
|
z-index: 2;
|
|
color: var(--ink);
|
|
}
|
|
.s-process .node.n5 .arrow { display: none; }
|
|
.s-process .timeline {
|
|
position: absolute;
|
|
left: 80px; right: 80px; bottom: 140px; top: auto;
|
|
height: 60px;
|
|
background: rgba(255,255,255,0.55);
|
|
border-radius: 18px;
|
|
padding: 14px 28px;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 24px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* ============== COMPARISON MATRIX ======================= */
|
|
.s-matrix .head {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 130px;
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 40px;
|
|
}
|
|
.s-matrix .head h2 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 76px;
|
|
line-height: 1;
|
|
letter-spacing: -0.01em;
|
|
flex-shrink: 0;
|
|
}
|
|
.s-matrix .head h2 em { font-style: italic; font-weight: 400; }
|
|
.s-matrix .head .sub {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 26px;
|
|
color: var(--ink-soft);
|
|
max-width: 36ch;
|
|
text-align: right;
|
|
margin-top: 8px;
|
|
}
|
|
.s-matrix .table {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 320px; bottom: 130px;
|
|
background: rgba(255,255,255,0.55);
|
|
border-radius: 28px;
|
|
padding: 8px;
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr 1fr 1fr;
|
|
grid-auto-rows: minmax(0, 1fr);
|
|
overflow: hidden;
|
|
}
|
|
.s-matrix .table .cell {
|
|
padding: 22px 24px;
|
|
display: flex; align-items: flex-start; gap: 12px;
|
|
font-size: 24px;
|
|
line-height: 1.4;
|
|
color: var(--ink);
|
|
border-bottom: 1px dashed rgba(42,36,27,.18);
|
|
border-right: 1px dashed rgba(42,36,27,.18);
|
|
}
|
|
.s-matrix .table .cell:nth-child(4n) { border-right: 0; }
|
|
.s-matrix .table .cell.head-row {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-size: 28px;
|
|
color: var(--ink);
|
|
border-bottom: 1.5px solid rgba(42,36,27,.4);
|
|
align-items: center;
|
|
}
|
|
.s-matrix .table .cell.row-label {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-weight: 500;
|
|
font-size: 28px;
|
|
color: var(--ink);
|
|
align-items: center;
|
|
}
|
|
.s-matrix .table .cell.last { border-bottom: 0; }
|
|
.s-matrix .pill {
|
|
display: inline-block;
|
|
border-radius: 999px;
|
|
padding: 4px 14px;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
margin-bottom: 4px;
|
|
}
|
|
.s-matrix .pill.yes { background: var(--lemon); }
|
|
.s-matrix .pill.part { background: var(--blush); }
|
|
.s-matrix .pill.no { background: var(--pink); }
|
|
.s-matrix .pill.note { background: rgba(255,255,255,0.6); border: 1px solid rgba(42,36,27,.18); color: var(--ink-soft); font-style: italic; font-family: "Cormorant Garamond", serif; font-weight: 400; }
|
|
|
|
/* ============== 9. DESIGN SYSTEM ========================== */
|
|
.s-system .wrap {
|
|
position: absolute;
|
|
left: 80px; right: 80px; top: 140px; bottom: 100px;
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-template-rows: auto 1fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
.s-system .wrap > * { background: rgba(255,255,255,.55); border-radius: 24px; padding: 22px 26px; }
|
|
.s-system h4 {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-size: 26px;
|
|
margin-bottom: 12px;
|
|
color: var(--ink);
|
|
}
|
|
.s-system .small { font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
|
|
.s-system .small li { margin-bottom: 6px; }
|
|
.s-system .small ul { margin: 0; padding-left: 18px; }
|
|
|
|
.s-system .pal { grid-column: 1 / span 5; grid-row: 1 / span 2; }
|
|
.s-system .pal .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
|
|
.s-system .pal .sw { aspect-ratio: 1/1.2; border-radius: 16px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; font-family: "Work Sans", sans-serif; font-size: 11px; color: var(--ink); }
|
|
.s-system .pal .sw.s1 { background: var(--paper); border: 1px solid rgba(0,0,0,0.06); }
|
|
.s-system .pal .sw.s2 { background: var(--pink); }
|
|
.s-system .pal .sw.s3 { background: var(--lemon); }
|
|
.s-system .pal .sw.s4 { background: var(--blush); }
|
|
.s-system .pal .sw.s5 { background: var(--sage); }
|
|
|
|
.s-system .type { grid-column: 6 / span 7; grid-row: 1 / span 2; }
|
|
.s-system .type .row {
|
|
display: flex; align-items: baseline; gap: 18px;
|
|
padding: 6px 0; border-bottom: 1px dashed rgba(42,36,27,.15);
|
|
}
|
|
.s-system .type .row:last-child { border-bottom: 0; }
|
|
.s-system .type .lbl {
|
|
font-family: "Work Sans", sans-serif;
|
|
font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
|
|
color: var(--ink-soft); margin-left: auto; white-space: nowrap;
|
|
}
|
|
|
|
.s-system .rules { grid-column: 1 / span 7; grid-row: 3; }
|
|
.s-system .dont { grid-column: 8 / span 5; grid-row: 3; }
|
|
.s-system .corners {
|
|
display: flex; gap: 12px; margin-top: 8px;
|
|
}
|
|
.s-system .corners .box {
|
|
width: 42px; height: 42px;
|
|
background: var(--pink);
|
|
}
|
|
.s-system .corners .box.r1 { border-radius: 14px; background: var(--lemon); }
|
|
.s-system .corners .box.r2 { border-radius: 22px; background: var(--blush); }
|
|
.s-system .corners .box.r3 { border-radius: 50%; background: var(--sage); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<deck-stage width="1920" height="1080">
|
|
|
|
<!-- 1. COVER -->
|
|
<section class="slide s-cover" data-label="01 Cover">
|
|
<div class="eyebrow">实地笔记</div>
|
|
<div class="swatches" aria-hidden="true">
|
|
<i style="background:var(--pink)"></i>
|
|
<i style="background:var(--lemon)"></i>
|
|
<i style="background:var(--blush)"></i>
|
|
</div>
|
|
<div class="stack">
|
|
<div class="kicker">研究简报 · 第三卷</div>
|
|
<h1>我们本季度的 <em>收获</em></h1>
|
|
<div class="lede">一份简短而坦诚的报告，呈现一月至三月期间客户对我们的反馈——哪些做得好，哪些悄然出了问题，以及我们接下来打算尝试什么。</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. FOREWORD -->
|
|
<section class="slide s-foreword" data-label="02 Foreword">
|
|
<div class="eyebrow">前言</div>
|
|
<div class="pagedot">ii</div>
|
|
<div class="col-l">
|
|
<p class="opener">我们花了八周时间倾听，听到的反馈以一种最善意的方式让我们感到惊讶。</p>
|
|
</div>
|
|
<div class="col-r">
|
|
<p>团队进行了二十八场深度访谈，在九个团队一年中最繁忙的一周里旁听观察，并连续十天翻阅了客服收件箱。</p>
|
|
<p>最终浮现的主题并非我们最初设定的研究方向。委托课题问的是用户引导，而得到的回答都关乎信任。于是我们顺着这条线索追了下去。</p>
|
|
<p>这套幻灯片是精简版。每一个洞察都是一扇门——打开那些对你团队本季度有意义的部分，其余的可以等下次再看。</p>
|
|
<div class="signoff">—— 研究团队</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. THE METHOD -->
|
|
<section class="slide s-method" data-label="03 The Method">
|
|
<div class="eyebrow">研究方法</div>
|
|
<div class="pagedot">iii</div>
|
|
<div class="grid">
|
|
<div class="step pink">
|
|
<div class="n">i.</div>
|
|
<div>
|
|
<h3>倾听</h3>
|
|
<p>与横跨四个细分市场、三个区域的客户进行了二十八场深度访谈。</p>
|
|
</div>
|
|
</div>
|
|
<div class="step lemon">
|
|
<div class="n">ii.</div>
|
|
<div>
|
|
<h3>观察</h3>
|
|
<p>在工作流程高峰期间开展了九场现场旁听。我们只做笔记，不录像。</p>
|
|
</div>
|
|
</div>
|
|
<div class="step blush">
|
|
<div class="n">iii.</div>
|
|
<div>
|
|
<h3>研读</h3>
|
|
<p>连续十天查阅客服收件箱，按意图和情绪色彩对每条消息进行标注。</p>
|
|
</div>
|
|
</div>
|
|
<div class="step sage">
|
|
<div class="n">iv.</div>
|
|
<div>
|
|
<h3>提炼</h3>
|
|
<p>与设计和策略团队进行了三轮主题聚类，最终归结为八大主题。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. INSIGHTS (reference) -->
|
|
<section class="slide s-insights" data-label="04 Insights">
|
|
<div class="eyebrow">核心洞察</div>
|
|
<div class="pagedot">iv</div>
|
|
<div class="row">
|
|
<div class="card pink">
|
|
<div class="head">
|
|
<h3 class="serif">洞察 #1</h3>
|
|
<div class="sub">信任就是用户引导</div>
|
|
</div>
|
|
<p>客户流失并非因为产品难用。他们流失是因为最初的三封邮件读起来像来自一个陌生人。</p>
|
|
</div>
|
|
<div class="card lemon">
|
|
<div class="head">
|
|
<h3 class="serif">洞察 #2</h3>
|
|
<div class="sub">资深用户害怕升级</div>
|
|
</div>
|
|
<p>那些我们最希望喜欢新功能的人，却在默默反感它们。他们想要的是更少的意外，而不是更大的惊喜。</p>
|
|
</div>
|
|
<div class="card blush">
|
|
<div class="head">
|
|
<h3 class="serif">洞察 #3</h3>
|
|
<div class="sub">客服就是产品</div>
|
|
</div>
|
|
<p>收件箱中一半的"功能请求"其实是已有功能，只是客户找不到入口。我们的问题出在发现层面，却被包装成了路线图问题。</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. A CLOSER LOOK (full bleed) -->
|
|
<section class="slide s-closer" data-label="05 A Closer Look">
|
|
<div class="eyebrow">深度聚焦 · 1 / 3</div>
|
|
<div class="pagedot">v</div>
|
|
<div class="center">
|
|
<div class="marker">关于洞察 #1</div>
|
|
<h2>信任就是 <em>用户引导</em></h2>
|
|
<p>产品在第一天可以完美无缺，但如果欢迎邮件读起来像一份合同，一半的新用户将永远不会再次登录。解决方法很简单，关乎文案而非技术。</p>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. BY THE NUMBERS -->
|
|
<section class="slide s-numbers" data-label="06 By the Numbers">
|
|
<div class="eyebrow">数据一览</div>
|
|
<div class="pagedot">vi</div>
|
|
<div class="grid">
|
|
<div class="stat a">
|
|
<div class="lab serif-it" style="font-size:30px">的新账户打开了第三封邮件，<br/>较上季度的 41% 有所提升。</div>
|
|
<div class="v">68<em>%</em></div>
|
|
</div>
|
|
<div class="stat b">
|
|
<div class="v">28</div>
|
|
<div class="lab">场深度客户访谈，覆盖四个细分市场。</div>
|
|
</div>
|
|
<div class="stat c">
|
|
<div class="v">9</div>
|
|
<div class="lab">个团队，我们在他们一年中最繁忙的一周进行了旁听。</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. IN THEIR WORDS -->
|
|
<section class="slide s-quote" data-label="07 In Their Words">
|
|
<div class="eyebrow">来自他们的声音</div>
|
|
<div class="pagedot">vii</div>
|
|
<div class="center">
|
|
<div class="qmark">"</div>
|
|
<blockquote>我并不需要一个 <em>更好</em> 的产品。我需要它表现得像是还记得我。</blockquote>
|
|
<div class="attr">
|
|
蕾妮，三年客户
|
|
<span class="role">里斯本，七人工作室</span>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 8. WHAT WE'LL DO NEXT -->
|
|
<section class="slide s-next" data-label="08 What's Next">
|
|
<div class="eyebrow">下一步行动计划</div>
|
|
<div class="pagedot">viii</div>
|
|
<div class="grid">
|
|
<div class="panel l">
|
|
<h2>在下一次汇报前<br/>的三项 <em>小行动</em></h2>
|
|
<p>每一项都小到可以在一个 sprint 内交付，并且结构明确，六周后我们就能判断它是否产生了效果。</p>
|
|
</div>
|
|
<div class="panel r">
|
|
<div class="item pink">
|
|
<div class="n">i.</div>
|
|
<div>
|
|
<h3>重写前三封邮件</h3>
|
|
<p>从模板化改为手写风格。负责人：生命周期团队。截止日期：5 月 17 日。</p>
|
|
</div>
|
|
</div>
|
|
<div class="item lemon">
|
|
<div class="n">ii.</div>
|
|
<div>
|
|
<h3>默认静默升级</h3>
|
|
<p>资深用户主动选择参与；其他用户平滑过渡。负责人：产品团队。截止日期：6 月 1 日。</p>
|
|
</div>
|
|
</div>
|
|
<div class="item blush">
|
|
<div class="n">iii.</div>
|
|
<div>
|
|
<h3>把收件箱变成搜索栏</h3>
|
|
<p>当用户请求与已有功能匹配时，直接在界面内展示帮助信息。负责人：客服团队 × 产品团队。截止日期：6 月 14 日。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 9. CONSULT -->
|
|
<section class="slide s-consult" data-label="09 Findings · Detail">
|
|
<div class="eyebrow">研究发现 · 详情</div>
|
|
<div class="pagedot">ix</div>
|
|
<div class="action">
|
|
<div class="tag">行动标题</div>
|
|
<h2>信任差距在最初的 72 小时内形成，而非最初的 7 天——而且这一成本会在整个用户生命周期中不断累积。</h2>
|
|
</div>
|
|
<div class="body">
|
|
<div class="col">
|
|
<h3>我们的发现</h3>
|
|
<p><strong style="color:var(--ink); font-weight:500">三个行为信号</strong> 在最初的 72 小时内对 18 个月留存率的预测能力，超过了我们追踪的所有功能使用指标。</p>
|
|
<ul>
|
|
<li><strong>打开第 2 封邮件</strong> —— 打开第二封生命周期邮件可将 D90 留存率提升 19 个百分点。</li>
|
|
<li><strong>个性化称呼</strong> —— 收到手写而非模板化欢迎语的账户，其群组留存率高出 2.4 倍。</li>
|
|
<li><strong>收到回复</strong> —— 在注册后 24 小时内获得一次真人回复，是我们测量过的最大单一杠杆。</li>
|
|
</ul>
|
|
<div class="source">数据来源：14,200 个分群账户，2026 年 1 月–3 月。</div>
|
|
</div>
|
|
<div class="col">
|
|
<h3>为何重要</h3>
|
|
<div class="meta">仅当前群组即可带来预计 410 万美元的年经常性收入留存增量。</div>
|
|
<p>最初三天是客户既在关注、又愿意回复的唯一窗口期。此窗口期内每次互动的效果，大约相当于第三周内四次互动的总和。</p>
|
|
<p>做错这件事的代价并非退款——而是一个不再回到收件箱的账户所导致的长期、无声的流失。</p>
|
|
<div class="source">基于 FY24 群组行为建模。</div>
|
|
</div>
|
|
<div class="col">
|
|
<h3>行动建议</h3>
|
|
<ul>
|
|
<li><strong>重写邮件 1–3</strong> —— 采用人性化语气；以 50/50 保留组方式上线。负责人：生命周期团队。截止日期：5 月 17 日。</li>
|
|
<li><strong>将每个新注册用户</strong> 分配给一位具名真人，在 24 小时内做一次个性化回复，每日上限为排名前 200 的账户。负责人：客户成功团队。截止日期：5 月 24 日。</li>
|
|
<li><strong>将 72 小时窗口</strong> 作为一级指标纳入每周回顾。负责人：分析团队。截止日期：6 月 1 日。</li>
|
|
</ul>
|
|
<div class="source">试点范围：按 ICP 评分排名前十分位的新注册用户。</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 10. CHART -->
|
|
<section class="slide s-chart" data-label="10 Retention Curve">
|
|
<div class="eyebrow">按群组分组的留存率</div>
|
|
<div class="pagedot">x</div>
|
|
<div class="left">
|
|
<h2>曲线在第三天 <em>开始</em><br/>发生转折</h2>
|
|
<p>收到手写欢迎语且 24 小时内获得真人回复的群组，留存率约为模板化群组的两倍，且这一差距在前九十天内保持稳定。</p>
|
|
<div class="legend">
|
|
<div class="li"><i style="background:var(--pink)"></i> 模板化欢迎语（对照组）</div>
|
|
<div class="li"><i style="background:var(--lemon)"></i> 手写欢迎语</div>
|
|
<div class="li"><i style="background:var(--ink); height:14px"></i> 手写欢迎语 + 真人回复</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="yhead">群组活跃百分比（按天）</div>
|
|
<div class="plot">
|
|
<div class="yticks">
|
|
<span>100</span><span>75</span><span>50</span><span>25</span><span>0</span>
|
|
</div>
|
|
<div class="gline" style="top:0%"></div>
|
|
<div class="gline" style="top:25%"></div>
|
|
<div class="gline" style="top:50%"></div>
|
|
<div class="gline" style="top:75%"></div>
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
|
|
<polyline fill="none" stroke="#E1A4C2" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"
|
|
points="0,4 16,28 32,46 48,60 64,72 80,80 100,86" />
|
|
<polyline fill="none" stroke="#D6DD63" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"
|
|
points="0,4 16,16 32,26 48,36 64,44 80,50 100,54" />
|
|
<polyline fill="none" stroke="#2A241B" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"
|
|
points="0,4 16,10 32,16 48,22 64,28 80,32 100,36" />
|
|
</svg>
|
|
</div>
|
|
<div class="xticks">
|
|
<span>D0</span><span>D7</span><span>D14</span><span>D30</span><span>D45</span><span>D60</span><span>D90</span>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 11. PROCESS -->
|
|
<section class="slide s-process" data-label="11 Process">
|
|
<div class="eyebrow">我们的工作方式</div>
|
|
<div class="pagedot">xi</div>
|
|
<div class="head">
|
|
<h2>从 <em>洞察</em><br/>到上线变更。</h2>
|
|
<div class="sub">每个试点项目在获准成为默认体验之前，都必须遵循这五个完整步骤。</div>
|
|
</div>
|
|
<div class="flow">
|
|
<div class="node n1">
|
|
<div class="n">i.</div>
|
|
<h3>定义</h3>
|
|
<p>将洞察转化为一个可证伪的单一行为假设。</p>
|
|
<svg class="arrow" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 16 H26 M20 9 L26 16 L20 23"/></svg>
|
|
</div>
|
|
<div class="node n2">
|
|
<div class="n">ii.</div>
|
|
<h3>设计</h3>
|
|
<p>设计最小规模的端到端变更，使其能够在一个 sprint 内完成假设检验。</p>
|
|
<svg class="arrow" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 16 H26 M20 9 L26 16 L20 23"/></svg>
|
|
</div>
|
|
<div class="node n3">
|
|
<div class="n">iii.</div>
|
|
<h3>试点</h3>
|
|
<p>在单一细分市场以 50/50 保留组方式上线。保持该状态运行满两个完整周期。</p>
|
|
<svg class="arrow" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 16 H26 M20 9 L26 16 L20 23"/></svg>
|
|
</div>
|
|
<div class="node n4">
|
|
<div class="n">iv.</div>
|
|
<h3>评估</h3>
|
|
<p>对照预注册指标审查群组数据。决定：终止、扩大或延期。</p>
|
|
<svg class="arrow" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 16 H26 M20 9 L26 16 L20 23"/></svg>
|
|
</div>
|
|
<div class="node n5">
|
|
<div class="n">v.</div>
|
|
<h3>默认</h3>
|
|
<p>将变更升级为默认体验。在同一版本发布中淘汰旧方案。</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline">
|
|
<span>第 1 周</span><span>第 2–3 周</span><span>第 3–6 周</span><span>第 7 周</span><span>第 8 周</span>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 12. COMPARISON MATRIX -->
|
|
<section class="slide s-matrix" data-label="12 Comparison">
|
|
<div class="eyebrow">三个试点方案并列对比</div>
|
|
<div class="pagedot">xii</div>
|
|
<div class="head">
|
|
<h2>每个 <em>试点</em><br/>的价值所在。</h2>
|
|
<div class="sub">根据本周期最重要的四个杠杆进行评分。我们只会推进在至少两项上胜出的方案。</div>
|
|
</div>
|
|
<div class="table">
|
|
<div class="cell head-row">杠杆</div>
|
|
<div class="cell head-row">重写欢迎邮件</div>
|
|
<div class="cell head-row">静默升级</div>
|
|
<div class="cell head-row">收件箱即搜索</div>
|
|
|
|
<div class="cell row-label">见效时间</div>
|
|
<div class="cell"><span class="pill yes">≤ 4 周</span></div>
|
|
<div class="cell"><span class="pill part">6–8 周</span></div>
|
|
<div class="cell"><span class="pill yes">≤ 4 周</span></div>
|
|
|
|
<div class="cell row-label">构建成本</div>
|
|
<div class="cell"><span class="pill yes">低</span></div>
|
|
<div class="cell"><span class="pill part">中</span></div>
|
|
<div class="cell"><span class="pill yes">低</span></div>
|
|
|
|
<div class="cell row-label">留存提升（模型预测）</div>
|
|
<div class="cell"><span class="pill yes">+19 点 D90</span></div>
|
|
<div class="cell"><span class="pill part">+7 点 D90</span></div>
|
|
<div class="cell"><span class="pill part">+5 点 D90</span></div>
|
|
|
|
<div class="cell row-label last">对资深用户的风险</div>
|
|
<div class="cell last"><span class="pill yes">无</span></div>
|
|
<div class="cell last"><span class="pill no">重大</span></div>
|
|
<div class="cell last"><span class="pill note">温和、可逆</span></div>
|
|
</div>
|
|
<div class="footer">
|
|
<span>2026 年 4 月 29 日</span>
|
|
<span>实地笔记 · 第三卷</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 13. DESIGN SYSTEM -->
|
|
</deck-stage>
|
|
|
|
</body>
|
|
</html>
|
|
```
|