Compare commits
2 Commits
feat/frame
...
feat/slide
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d79b2b499d | ||
|
|
e0bc29a648 |
1
.lark-slides-on9-readback.xml
Normal file
@@ -66,6 +66,7 @@ func PrepareDomainHelp(cmd *cobra.Command, skillFS fs.FS) bool {
|
||||
fmt.Fprintf(&b, "\n\nDomain guide (concepts, command choice, conventions): lark-cli skills read %s", skill)
|
||||
}
|
||||
}
|
||||
appendSlidesXMLQuickReference(&b, cmd, skillFS)
|
||||
cmd.Long = b.String()
|
||||
return true
|
||||
}
|
||||
@@ -116,6 +117,90 @@ const (
|
||||
shortcutBaseAnnotation = "affordance-shortcut-base"
|
||||
)
|
||||
|
||||
const slidesXMLQuickReferencePath = "lark-slides/references/xml-schema-quick-ref.md"
|
||||
|
||||
// slidesShortcutReferencePaths maps each Slides shortcut to its primary
|
||||
// command guide. XML-consuming shortcuts also include the shared schema
|
||||
// reference because their command guide accepts XML but does not repeat the
|
||||
// complete element grammar.
|
||||
var slidesShortcutReferencePaths = map[string][]string{
|
||||
"+create": {
|
||||
"lark-slides/references/lark-slides-create.md",
|
||||
slidesXMLQuickReferencePath,
|
||||
},
|
||||
"+xml-get": {
|
||||
"lark-slides/references/lark-slides-xml-presentations-get.md",
|
||||
},
|
||||
"+screenshot": {
|
||||
"lark-slides/references/lark-slides-screenshot.md",
|
||||
},
|
||||
"+media-upload": {
|
||||
"lark-slides/references/lark-slides-media-upload.md",
|
||||
},
|
||||
"+replace-slide": {
|
||||
"lark-slides/references/lark-slides-replace-slide.md",
|
||||
"lark-slides/references/lark-slides-edit-workflows.md",
|
||||
slidesXMLQuickReferencePath,
|
||||
},
|
||||
"+replace-pages": {
|
||||
"lark-slides/references/lark-slides-replace-pages.md",
|
||||
"lark-slides/references/lark-slides-edit-workflows.md",
|
||||
slidesXMLQuickReferencePath,
|
||||
},
|
||||
"+history-list": {
|
||||
"lark-slides/references/lark-slides-history.md",
|
||||
},
|
||||
"+history-revert": {
|
||||
"lark-slides/references/lark-slides-history.md",
|
||||
},
|
||||
"+history-revert-status": {
|
||||
"lark-slides/references/lark-slides-history.md",
|
||||
},
|
||||
}
|
||||
|
||||
// appendSlidesXMLQuickReference adds the embedded XML schema summary to the
|
||||
// slides domain help. The reference file is already shipped in the skill
|
||||
// content tree, so help and the standalone skill reader share one source of
|
||||
// truth instead of maintaining a second, drifting copy in Go.
|
||||
func appendSlidesXMLQuickReference(b *strings.Builder, cmd *cobra.Command, skillFS fs.FS) {
|
||||
if cmd.Name() != "slides" || skillFS == nil {
|
||||
return
|
||||
}
|
||||
content, err := fs.ReadFile(skillFS, slidesXMLQuickReferencePath)
|
||||
if err != nil || len(content) == 0 {
|
||||
return
|
||||
}
|
||||
b.WriteString("\n\nEmbedded XML syntax quick reference:\n")
|
||||
b.Write(content)
|
||||
}
|
||||
|
||||
func readSlidesShortcutReferences(cmd *cobra.Command, skillFS fs.FS) ([]string, bool) {
|
||||
if cmdmeta.Domain(cmd) != "slides" || skillFS == nil {
|
||||
return nil, false
|
||||
}
|
||||
paths, ok := slidesShortcutReferencePaths[cmd.Name()]
|
||||
if !ok {
|
||||
return nil, false
|
||||
}
|
||||
|
||||
var contents []string
|
||||
for _, path := range paths {
|
||||
content, err := fs.ReadFile(skillFS, path)
|
||||
if err != nil || len(content) == 0 {
|
||||
continue
|
||||
}
|
||||
contents = append(contents, fmt.Sprintf("Embedded command reference: %s\n%s", path, content))
|
||||
}
|
||||
return contents, len(contents) > 0
|
||||
}
|
||||
|
||||
func appendSlidesShortcutReferences(b *strings.Builder, contents []string) {
|
||||
for _, content := range contents {
|
||||
b.WriteString("\n\n")
|
||||
b.WriteString(content)
|
||||
}
|
||||
}
|
||||
|
||||
// setMethodHelpData records the coordinates PrepareMethodHelp needs (storing a
|
||||
// few strings is the only build-time cost; the overlay stays untouched).
|
||||
func setMethodHelpData(cmd *cobra.Command, service, methodID, schemaPath, paramsOnly string) {
|
||||
@@ -171,11 +256,11 @@ func PrepareMethodHelp(cmd *cobra.Command, skillFS fs.FS) bool {
|
||||
}
|
||||
|
||||
// PrepareShortcutHelp composes a +-prefixed shortcut's Long from its affordance
|
||||
// overlay — the same top layout as method help (description, Risk, guidance
|
||||
// block, related skills) minus the schema pointer, which shortcuts have none
|
||||
// of. Returns false when the command is not a shortcut or carries no overlay
|
||||
// entry, so shortcuts without guidance keep the default help plus the bottom
|
||||
// risk/tips append.
|
||||
// overlay and any embedded command references — the same top layout as method
|
||||
// help (description, Risk, guidance block, related skills) minus the schema
|
||||
// pointer, which shortcuts have none of. Returns false when the command is not
|
||||
// a shortcut, or when it has neither an overlay nor an embedded reference, so
|
||||
// ordinary shortcuts keep the default help plus the bottom risk/tips append.
|
||||
//
|
||||
// The lead is the command's pristine base (captureHelpBase): a shortcut that
|
||||
// set a hand-authored Long in PostMount (e.g. the docs shortcuts' "agents MUST
|
||||
@@ -191,12 +276,17 @@ func PrepareShortcutHelp(cmd *cobra.Command, skillFS fs.FS) bool {
|
||||
if src, _ := cmdmeta.SourceOf(cmd); src != cmdmeta.SourceShortcut {
|
||||
return false
|
||||
}
|
||||
raw, ok := affordanceRaw(cmd)
|
||||
if !ok {
|
||||
return false
|
||||
references, hasReferences := readSlidesShortcutReferences(cmd, skillFS)
|
||||
|
||||
var a meta.Affordance
|
||||
hasAffordance := false
|
||||
if raw, ok := affordanceRaw(cmd); ok {
|
||||
if parsed, parsedOK := (meta.Method{Affordance: raw}).ParsedAffordance(); parsedOK {
|
||||
a = parsed
|
||||
hasAffordance = true
|
||||
}
|
||||
}
|
||||
a, ok := (meta.Method{Affordance: raw}).ParsedAffordance()
|
||||
if !ok {
|
||||
if !hasAffordance && !hasReferences {
|
||||
return false
|
||||
}
|
||||
if len(a.Tips) == 0 {
|
||||
@@ -211,6 +301,7 @@ func PrepareShortcutHelp(cmd *cobra.Command, skillFS fs.FS) bool {
|
||||
b.WriteString(block)
|
||||
}
|
||||
writeRelatedSkills(&b, a.Skills, skillFS)
|
||||
appendSlidesShortcutReferences(&b, references)
|
||||
|
||||
cmd.Long = b.String()
|
||||
return true
|
||||
|
||||
@@ -264,6 +264,94 @@ func TestPrepareShortcutHelp_PreservesPostMountLong(t *testing.T) {
|
||||
}
|
||||
}
|
||||
|
||||
func TestPrepareShortcutHelp_SlidesReferenceWithoutAffordance(t *testing.T) {
|
||||
sc := &cobra.Command{Use: "+xml-get", Short: "Fetch presentation XML"}
|
||||
cmdmeta.SetSource(sc, cmdmeta.SourceShortcut, false)
|
||||
cmdmeta.SetDomain(sc, "slides")
|
||||
cmdmeta.SetAffordanceRef(sc, "slides", "+xml-get")
|
||||
cmdutil.SetRisk(sc, "read")
|
||||
|
||||
skillFS := fstest.MapFS{
|
||||
"lark-slides/references/lark-slides-xml-presentations-get.md": {
|
||||
Data: []byte("# slides +xml-get\n\nRead the presentation XML."),
|
||||
},
|
||||
}
|
||||
if !PrepareShortcutHelp(sc, skillFS) {
|
||||
t.Fatal("PrepareShortcutHelp returned false for a Slides shortcut with an embedded reference")
|
||||
}
|
||||
for _, want := range []string{
|
||||
"Fetch presentation XML",
|
||||
"Risk: read",
|
||||
"Embedded command reference: lark-slides/references/lark-slides-xml-presentations-get.md",
|
||||
"Read the presentation XML.",
|
||||
} {
|
||||
if !strings.Contains(sc.Long, want) {
|
||||
t.Errorf("Slides shortcut help missing %q:\n%s", want, sc.Long)
|
||||
}
|
||||
}
|
||||
PrepareShortcutHelp(sc, skillFS)
|
||||
if got := strings.Count(sc.Long, "Embedded command reference:"); got != 1 {
|
||||
t.Fatalf("embedded reference appended %d times after re-render, want 1:\n%s", got, sc.Long)
|
||||
}
|
||||
}
|
||||
|
||||
func TestSlidesShortcutReferenceMapping(t *testing.T) {
|
||||
want := map[string]string{
|
||||
"+create": "lark-slides/references/lark-slides-create.md",
|
||||
"+xml-get": "lark-slides/references/lark-slides-xml-presentations-get.md",
|
||||
"+screenshot": "lark-slides/references/lark-slides-screenshot.md",
|
||||
"+media-upload": "lark-slides/references/lark-slides-media-upload.md",
|
||||
"+replace-slide": "lark-slides/references/lark-slides-replace-slide.md",
|
||||
"+replace-pages": "lark-slides/references/lark-slides-replace-pages.md",
|
||||
"+history-list": "lark-slides/references/lark-slides-history.md",
|
||||
"+history-revert": "lark-slides/references/lark-slides-history.md",
|
||||
"+history-revert-status": "lark-slides/references/lark-slides-history.md",
|
||||
}
|
||||
|
||||
for command, path := range want {
|
||||
t.Run(command, func(t *testing.T) {
|
||||
sc := &cobra.Command{Use: command, Short: command}
|
||||
cmdmeta.SetSource(sc, cmdmeta.SourceShortcut, false)
|
||||
cmdmeta.SetDomain(sc, "slides")
|
||||
skillFS := fstest.MapFS{
|
||||
path: {Data: []byte("reference content")},
|
||||
}
|
||||
contents, ok := readSlidesShortcutReferences(sc, skillFS)
|
||||
if !ok || len(contents) == 0 {
|
||||
t.Fatalf("shortcut %q has no mapped reference", command)
|
||||
}
|
||||
if !strings.Contains(contents[0], "Embedded command reference: "+path) {
|
||||
t.Fatalf("shortcut %q mapped content does not include %q:\n%s", command, path, contents[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
func TestSlidesScreenshotHelpDoesNotIncludeXMLQuickReference(t *testing.T) {
|
||||
sc := &cobra.Command{Use: "+screenshot", Short: "Save screenshots"}
|
||||
cmdmeta.SetSource(sc, cmdmeta.SourceShortcut, false)
|
||||
cmdmeta.SetDomain(sc, "slides")
|
||||
skillFS := fstest.MapFS{
|
||||
"lark-slides/references/lark-slides-screenshot.md": {
|
||||
Data: []byte("# slides +screenshot\n\nSave screenshots."),
|
||||
},
|
||||
slidesXMLQuickReferencePath: {
|
||||
Data: []byte("# XML Schema Quick Reference"),
|
||||
},
|
||||
}
|
||||
|
||||
contents, ok := readSlidesShortcutReferences(sc, skillFS)
|
||||
if !ok {
|
||||
t.Fatal("screenshot shortcut should have a primary reference")
|
||||
}
|
||||
if len(contents) != 1 {
|
||||
t.Fatalf("screenshot reference count = %d, want 1: %#v", len(contents), contents)
|
||||
}
|
||||
if strings.Contains(contents[0], "XML Schema Quick Reference") {
|
||||
t.Fatalf("screenshot help must not include the XML quick reference:\n%s", contents[0])
|
||||
}
|
||||
}
|
||||
|
||||
// domainCmd wires a domain-tagged command with a subcommand under a root, the
|
||||
// shape PrepareDomainHelp expects.
|
||||
func domainCmd(short, long string) *cobra.Command {
|
||||
@@ -306,3 +394,51 @@ func TestPrepareDomainHelp_FallsBackToShort(t *testing.T) {
|
||||
t.Errorf("Short should seed Long when no hand-authored Long exists; got:\n%s", dom.Long)
|
||||
}
|
||||
}
|
||||
|
||||
func TestPrepareDomainHelp_SlidesIncludesEmbeddedXMLReference(t *testing.T) {
|
||||
root := &cobra.Command{Use: "root"}
|
||||
dom := &cobra.Command{Use: "slides", Short: "Slides"}
|
||||
cmdmeta.SetDomain(dom, "slides")
|
||||
dom.AddCommand(&cobra.Command{Use: "+create", Short: "Create", Run: func(*cobra.Command, []string) {}})
|
||||
root.AddCommand(dom)
|
||||
|
||||
const quickReference = `# XML Schema Quick Reference
|
||||
|
||||
<presentation xmlns="http://www.larkoffice.com/sml/2.0" width="960" height="540">
|
||||
<slide>
|
||||
<data>
|
||||
<shape type="text" topLeftX="80" topLeftY="80" width="800" height="120">
|
||||
<content textType="title"><p>Title</p></content>
|
||||
</shape>
|
||||
</data>
|
||||
</slide>
|
||||
</presentation>
|
||||
|
||||
<table><colgroup><col/></colgroup><tr><td><content><p>A</p></content></td></tr></table>
|
||||
<chart><chartPlotArea/><chartData/></chart>`
|
||||
skillFS := fstest.MapFS{
|
||||
"lark-slides/SKILL.md": {Data: []byte("# slides")},
|
||||
"lark-slides/references/xml-schema-quick-ref.md": {Data: []byte(quickReference)},
|
||||
}
|
||||
|
||||
if !PrepareDomainHelp(dom, skillFS) {
|
||||
t.Fatal("PrepareDomainHelp returned false for slides domain")
|
||||
}
|
||||
for _, want := range []string{
|
||||
"Embedded XML syntax quick reference:",
|
||||
`<presentation xmlns="http://www.larkoffice.com/sml/2.0"`,
|
||||
"<shape type=\"text\"",
|
||||
"<content",
|
||||
"topLeftX",
|
||||
"<table>",
|
||||
"<chart>",
|
||||
} {
|
||||
if !strings.Contains(dom.Long, want) {
|
||||
t.Errorf("slides help missing XML reference marker %q:\n%s", want, dom.Long)
|
||||
}
|
||||
}
|
||||
PrepareDomainHelp(dom, skillFS)
|
||||
if got := strings.Count(dom.Long, "Embedded XML syntax quick reference:"); got != 1 {
|
||||
t.Fatalf("slides XML reference appended %d times after re-render, want 1:\n%s", got, dom.Long)
|
||||
}
|
||||
}
|
||||
|
||||
63
skills/lark-slides/pie_chart_demo.xml
Normal file
@@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<presentation xmlns="http://www.larkoffice.com/sml/2.0" width="960" height="540">
|
||||
<title>资产处置类型分布</title>
|
||||
<theme>
|
||||
<textStyles>
|
||||
<headline fontColor="rgba(31, 35, 41, 1)"/>
|
||||
<body fontColor="rgba(31, 35, 41, 1)"/>
|
||||
<caption fontColor="rgba(155, 158, 162, 1)" fontSize="14"/>
|
||||
</textStyles>
|
||||
</theme>
|
||||
<slide>
|
||||
<style>
|
||||
<fill>
|
||||
<fillColor color="rgba(250, 248, 242, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<shape width="800" height="40" topLeftX="80" topLeftY="40" type="text">
|
||||
<content textType="headline" fontSize="24" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)" bold="true">
|
||||
<p>资产处置类型分布</p>
|
||||
</content>
|
||||
</shape>
|
||||
<chart width="700" height="440" topLeftX="130" topLeftY="80">
|
||||
<chartPlotArea>
|
||||
<chartPlot type="pie" yAxisPosition="right">
|
||||
<chartExtra/>
|
||||
<chartLabels position="outside" category="false" value="true" percentage="true" fontSize="14" color="rgba(60, 60, 60, 1)"/>
|
||||
<chartSeriesList>
|
||||
<chartSeries index="1">
|
||||
<chartSectors innerRadius="0.5" offsetRadius="0" startAngle="90"/>
|
||||
</chartSeries>
|
||||
</chartSeriesList>
|
||||
</chartPlot>
|
||||
</chartPlotArea>
|
||||
<chartLegend position="right" fontSize="16" color="rgba(60, 60, 60, 1)"/>
|
||||
<chartData>
|
||||
<dim1>
|
||||
<chartField name="类型">股权处置,土地经营权,停车泊位,供水污水,房产处置,保障房,林水经营</chartField>
|
||||
</dim1>
|
||||
<dim2>
|
||||
<chartField name="规模">24,19,8.5,7.5,5,4.15,2.7</chartField>
|
||||
</dim2>
|
||||
</chartData>
|
||||
<chartStyle>
|
||||
<chartBackground color="rgba(0, 0, 0, 0)"/>
|
||||
<chartBorder color="rgb(222, 224, 227)" width="0"/>
|
||||
<chartColorTheme>
|
||||
<color value="rgb(178, 34, 34)"/>
|
||||
<color value="rgb(205, 50, 50)"/>
|
||||
<color value="rgb(224, 80, 80)"/>
|
||||
<color value="rgb(238, 110, 110)"/>
|
||||
<color value="rgb(218, 165, 32)"/>
|
||||
<color value="rgb(238, 195, 55)"/>
|
||||
<color value="rgb(248, 222, 100)"/>
|
||||
</chartColorTheme>
|
||||
</chartStyle>
|
||||
</chart>
|
||||
</data>
|
||||
<note>
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
</presentation>
|
||||
52
skills/lark-slides/pie_chart_slide.xml
Normal file
@@ -0,0 +1,52 @@
|
||||
<slide xmlns="http://www.larkoffice.com/sml/2.0">
|
||||
<style>
|
||||
<fill>
|
||||
<fillColor color="rgba(250, 248, 242, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<shape width="800" height="40" topLeftX="80" topLeftY="40" type="text">
|
||||
<content textType="headline" fontSize="24" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)" bold="true">
|
||||
<p>资产处置类型分布</p>
|
||||
</content>
|
||||
</shape>
|
||||
<chart width="700" height="440" topLeftX="130" topLeftY="80">
|
||||
<chartPlotArea>
|
||||
<chartPlot type="pie" yAxisPosition="right">
|
||||
<chartExtra/>
|
||||
<chartLabels position="outside" category="false" value="true" percentage="true" fontSize="14" color="rgba(60, 60, 60, 1)"/>
|
||||
<chartSeriesList>
|
||||
<chartSeries index="1">
|
||||
<chartSectors innerRadius="0.5" offsetRadius="0" startAngle="90"/>
|
||||
</chartSeries>
|
||||
</chartSeriesList>
|
||||
</chartPlot>
|
||||
</chartPlotArea>
|
||||
<chartLegend position="right" fontSize="16" color="rgba(60, 60, 60, 1)"/>
|
||||
<chartData>
|
||||
<dim1>
|
||||
<chartField name="类型">股权处置,土地经营权,停车泊位,供水污水,房产处置,保障房,林水经营</chartField>
|
||||
</dim1>
|
||||
<dim2>
|
||||
<chartField name="规模">24,19,8.5,7.5,5,4.15,2.7</chartField>
|
||||
</dim2>
|
||||
</chartData>
|
||||
<chartStyle>
|
||||
<chartBackground color="rgba(0, 0, 0, 0)"/>
|
||||
<chartBorder color="rgb(222, 224, 227)" width="0"/>
|
||||
<chartColorTheme>
|
||||
<color value="rgb(178, 34, 34)"/>
|
||||
<color value="rgb(205, 50, 50)"/>
|
||||
<color value="rgb(224, 80, 80)"/>
|
||||
<color value="rgb(238, 110, 110)"/>
|
||||
<color value="rgb(218, 165, 32)"/>
|
||||
<color value="rgb(238, 195, 55)"/>
|
||||
<color value="rgb(248, 222, 100)"/>
|
||||
</chartColorTheme>
|
||||
</chartStyle>
|
||||
</chart>
|
||||
</data>
|
||||
<note>
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
186
skills/lark-slides/scripts/chart_overlay_harness.py
Normal file
@@ -0,0 +1,186 @@
|
||||
#!/usr/bin/env python3
|
||||
# Copyright (c) 2026 Lark Technologies Pte. Ltd.
|
||||
# SPDX-License-Identifier: MIT
|
||||
"""Black-box harness for the `chart_external_overlay` lint rule.
|
||||
|
||||
Runs xml_text_overlap_lint over every fixture named in a manifest and compares
|
||||
the observed `chart_external_overlay` issues against each page's expectation.
|
||||
|
||||
Usage:
|
||||
python3 chart_overlay_harness.py --plan <plan-dir> [--input-xml <file>] [--out <dir>]
|
||||
|
||||
--plan directory holding manifest.json and slides/ (the fixtures).
|
||||
--input-xml optional single presentation XML to lint instead of per-fixture
|
||||
files (used to lint a server readback deck); pages are matched to
|
||||
the manifest by slide order.
|
||||
--out output directory for results.json and report.md (default: --plan).
|
||||
|
||||
Exit code is 0 when false-negatives == 0 and false-positives == 0, else 1.
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import re
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
SCRIPTS_DIR = Path(__file__).resolve().parent
|
||||
sys.path.insert(0, str(SCRIPTS_DIR))
|
||||
import xml_text_overlap_lint as lint # noqa: E402
|
||||
|
||||
CODE = "chart_external_overlay"
|
||||
|
||||
|
||||
def chart_issues(slide_result: dict) -> list[dict]:
|
||||
return [i for i in slide_result.get("issues", []) if i.get("code") == CODE]
|
||||
|
||||
|
||||
def other_error_codes(slide_result: dict) -> list[str]:
|
||||
return sorted(
|
||||
{
|
||||
i.get("code")
|
||||
for i in slide_result.get("issues", [])
|
||||
if i.get("level") == "error" and i.get("code") != CODE
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
def slides_from_presentation(xml: str) -> list[str]:
|
||||
return re.findall(r"<slide\b[\s\S]*?</slide>", xml)
|
||||
|
||||
|
||||
def lint_page(slide_xml: str) -> dict:
|
||||
wrapped = (
|
||||
'<presentation xmlns="http://www.larkoffice.com/sml/2.0" width="960" height="540">'
|
||||
+ slide_xml
|
||||
+ "</presentation>"
|
||||
)
|
||||
result = lint.lint_xml(wrapped)
|
||||
return result["slides"][0] if result.get("slides") else {"issues": []}
|
||||
|
||||
|
||||
def evaluate(manifest: dict, plan_dir: Path, readback_xml: str | None) -> dict:
|
||||
pages = manifest["pages"]
|
||||
readback_slides = slides_from_presentation(readback_xml) if readback_xml else None
|
||||
rows = []
|
||||
fn = fp = unrelated = 0
|
||||
for idx, page in enumerate(pages):
|
||||
if readback_slides is not None:
|
||||
if idx >= len(readback_slides):
|
||||
rows.append({**_row_base(page), "status": "MISSING_IN_READBACK",
|
||||
"observed_issue_count": None})
|
||||
fn += 1 if page["expected_issue_count"] else 0
|
||||
continue
|
||||
slide_result = lint_page(readback_slides[idx])
|
||||
else:
|
||||
slide_xml = (plan_dir / page["fixture"]).read_text(encoding="utf-8")
|
||||
slide_result = lint_page(slide_xml)
|
||||
|
||||
issues = chart_issues(slide_result)
|
||||
observed = len(issues)
|
||||
expected = page["expected_issue_count"]
|
||||
others = other_error_codes(slide_result)
|
||||
if others:
|
||||
unrelated += 1
|
||||
|
||||
# A page is "correct" when observed presence matches expectation.
|
||||
expected_present = expected > 0
|
||||
observed_present = observed > 0
|
||||
if expected_present and not observed_present:
|
||||
status = "FALSE_NEGATIVE"
|
||||
fn += 1
|
||||
elif not expected_present and observed_present:
|
||||
status = "FALSE_POSITIVE"
|
||||
fp += 1
|
||||
elif expected_present and observed != expected:
|
||||
status = "COUNT_MISMATCH" # right presence, wrong number of chart issues
|
||||
else:
|
||||
status = "OK"
|
||||
|
||||
rows.append({
|
||||
**_row_base(page),
|
||||
"observed_issue_count": observed,
|
||||
"observed_elements": [i.get("elements") for i in issues],
|
||||
"unrelated_error_codes": others,
|
||||
"status": status,
|
||||
})
|
||||
|
||||
return {
|
||||
"mode": "readback" if readback_xml else "fixture",
|
||||
"summary": {
|
||||
"page_count": len(pages),
|
||||
"false_negatives": fn,
|
||||
"false_positives": fp,
|
||||
"pages_with_unrelated_errors": unrelated,
|
||||
"pass": fn == 0 and fp == 0,
|
||||
},
|
||||
"pages": rows,
|
||||
}
|
||||
|
||||
|
||||
def _row_base(page: dict) -> dict:
|
||||
return {
|
||||
"case_id": page["case_id"],
|
||||
"slide_number": page["slide_number"],
|
||||
"chart_type": page.get("chart_type"),
|
||||
"rendered_occlusion": page.get("rendered_occlusion"),
|
||||
"rendered_occlusion_source": page.get("rendered_occlusion_source"),
|
||||
"expected_issue_count": page["expected_issue_count"],
|
||||
}
|
||||
|
||||
|
||||
def render_markdown(results: dict) -> str:
|
||||
s = results["summary"]
|
||||
lines = [
|
||||
f"# chart_external_overlay black-box results ({results['mode']} mode)",
|
||||
"",
|
||||
f"- pages: **{s['page_count']}**",
|
||||
f"- false negatives: **{s['false_negatives']}**",
|
||||
f"- false positives: **{s['false_positives']}**",
|
||||
f"- pages with unrelated errors: **{s['pages_with_unrelated_errors']}**",
|
||||
f"- suite pass: **{s['pass']}**",
|
||||
"",
|
||||
"| # | case | type | occ | occ_src | exp | obs | unrelated | status |",
|
||||
"|--:|------|------|:---:|:-------:|:---:|:---:|-----------|--------|",
|
||||
]
|
||||
for r in results["pages"]:
|
||||
lines.append(
|
||||
f"| {r['slide_number']} | {r['case_id']} | {r.get('chart_type','')} | "
|
||||
f"{r.get('rendered_occlusion')} | {r.get('rendered_occlusion_source','')} | "
|
||||
f"{r['expected_issue_count']} | {r.get('observed_issue_count')} | "
|
||||
f"{','.join(r.get('unrelated_error_codes') or []) or '-'} | {r['status']} |"
|
||||
)
|
||||
return "\n".join(lines) + "\n"
|
||||
|
||||
|
||||
def main() -> int:
|
||||
ap = argparse.ArgumentParser()
|
||||
ap.add_argument("--plan", required=True)
|
||||
ap.add_argument("--input-xml")
|
||||
ap.add_argument("--out")
|
||||
args = ap.parse_args()
|
||||
|
||||
plan_dir = Path(args.plan).resolve()
|
||||
manifest = json.loads((plan_dir / "manifest.json").read_text(encoding="utf-8"))
|
||||
readback_xml = Path(args.input_xml).read_text(encoding="utf-8") if args.input_xml else None
|
||||
|
||||
results = evaluate(manifest, plan_dir, readback_xml)
|
||||
|
||||
out_dir = Path(args.out).resolve() if args.out else plan_dir
|
||||
out_dir.mkdir(parents=True, exist_ok=True)
|
||||
suffix = "_readback" if readback_xml else ""
|
||||
(out_dir / f"results{suffix}.json").write_text(
|
||||
json.dumps(results, ensure_ascii=False, indent=2) + "\n", encoding="utf-8"
|
||||
)
|
||||
(out_dir / f"report{suffix}.md").write_text(render_markdown(results), encoding="utf-8")
|
||||
|
||||
s = results["summary"]
|
||||
print(f"[{results['mode']}] pages={s['page_count']} FN={s['false_negatives']} "
|
||||
f"FP={s['false_positives']} unrelated={s['pages_with_unrelated_errors']} "
|
||||
f"pass={s['pass']}")
|
||||
return 0 if s["pass"] else 1
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
raise SystemExit(main())
|
||||
642
skills/lark-slides/scripts/collect_width_data.py
Normal file
@@ -0,0 +1,642 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Collect text width measurement data from slides presentation for character width estimation optimization."""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import csv
|
||||
import os
|
||||
import re
|
||||
import subprocess
|
||||
import sys
|
||||
import unicodedata
|
||||
from collections import defaultdict
|
||||
from pathlib import Path
|
||||
from typing import Any
|
||||
|
||||
|
||||
PRESENTATION_ID = "BUFBsLX2ZlzyMTdprLicd7rpneg"
|
||||
SCRIPT_DIR = Path(__file__).resolve().parent
|
||||
CSV_OUTPUT = SCRIPT_DIR / "width_measurement_data.csv"
|
||||
MD_OUTPUT = SCRIPT_DIR / "width_measurement_report.md"
|
||||
|
||||
|
||||
def estimate_character_width(character: str, font_size: int | float) -> int | float:
|
||||
if character.isspace():
|
||||
return font_size * 0.33
|
||||
if unicodedata.east_asian_width(character) in {"F", "W"}:
|
||||
return font_size
|
||||
return font_size * 0.55
|
||||
|
||||
|
||||
def estimate_text_width(text: str, font_size: int | float) -> int | float:
|
||||
return sum(estimate_character_width(character, font_size) for character in text)
|
||||
|
||||
|
||||
def extract_attribute(tag_source: str, name: str) -> str | None:
|
||||
match = re.search(
|
||||
fr"(?:^|\s){re.escape(name)}\s*=\s*(?:\"([^\"]+)\"|'([^']+)')", tag_source
|
||||
)
|
||||
if not match:
|
||||
return None
|
||||
return match.group(1) if match.group(1) is not None else match.group(2)
|
||||
|
||||
|
||||
def extract_numeric_attribute(tag_source: str, name: str) -> int | float | None:
|
||||
raw = extract_attribute(tag_source, name)
|
||||
if raw is None:
|
||||
return None
|
||||
try:
|
||||
value = float(raw)
|
||||
except ValueError:
|
||||
return None
|
||||
return int(value) if value.is_integer() else value
|
||||
|
||||
|
||||
def extract_bool_attribute(tag_source: str, name: str) -> bool:
|
||||
value = extract_attribute(tag_source, name)
|
||||
return value in {"true", "1", "yes"}
|
||||
|
||||
|
||||
def strip_xml(value: str, preserve_line_breaks: bool = False) -> str:
|
||||
stripped = re.sub(r"<!\[CDATA\[([\s\S]*?)\]\]>", r"\1", value)
|
||||
if preserve_line_breaks:
|
||||
stripped = re.sub(r"<br\b[^>]*>", "\n", stripped)
|
||||
stripped = re.sub(r"<[^>]+>", " ", stripped)
|
||||
stripped = stripped.replace(" ", " ")
|
||||
stripped = stripped.replace("&", "&")
|
||||
stripped = stripped.replace("<", "<")
|
||||
stripped = stripped.replace(">", ">")
|
||||
stripped = stripped.replace(""", '"')
|
||||
stripped = stripped.replace("'", "'")
|
||||
if preserve_line_breaks:
|
||||
return "\n".join(re.sub(r"\s+", " ", line).strip() for line in stripped.split("\n"))
|
||||
return re.sub(r"\s+", " ", stripped).strip()
|
||||
|
||||
|
||||
def strip_xml_paragraphs(value: str) -> str:
|
||||
paragraphs = re.findall(r"<p\b[^>]*>([\s\S]*?)</p\s*>", value)
|
||||
if paragraphs:
|
||||
return "\n".join(strip_xml(paragraph, preserve_line_breaks=True) for paragraph in paragraphs)
|
||||
return strip_xml(value, preserve_line_breaks=True)
|
||||
|
||||
|
||||
def normalize_text_no_whitespace(text: str) -> str:
|
||||
return re.sub(r"\s+", "", text)
|
||||
|
||||
|
||||
def classify_text_type(text: str) -> str:
|
||||
has_chinese = bool(re.search(r"[\u4e00-\u9fff]", text))
|
||||
has_english = bool(re.search(r"[A-Za-z]", text))
|
||||
has_digit = bool(re.search(r"[0-9]", text))
|
||||
has_punctuation = bool(re.search(r"[^\u4e00-\u9fffA-Za-z0-9\s]", text))
|
||||
|
||||
categories = []
|
||||
if has_chinese:
|
||||
categories.append("中文")
|
||||
if has_english:
|
||||
categories.append("英文")
|
||||
if has_digit:
|
||||
categories.append("数字")
|
||||
if has_punctuation and not categories:
|
||||
categories.append("标点")
|
||||
if not categories:
|
||||
return "其他"
|
||||
return "+".join(categories)
|
||||
|
||||
|
||||
def extract_text_spans(content: str, default_font_size: int | float, default_font_family: str | None,
|
||||
default_bold: bool, default_italic: bool) -> list[dict[str, Any]]:
|
||||
spans = []
|
||||
|
||||
p_matches = list(re.finditer(r"<p\b([^>]*)>([\s\S]*?)</p\s*>", content))
|
||||
if not p_matches:
|
||||
p_matches = [re.match(r"()([\s\S]*)", content)]
|
||||
|
||||
for p_match in p_matches:
|
||||
p_attrs, p_body = p_match.groups()
|
||||
p_text = strip_xml(p_body, preserve_line_breaks=True)
|
||||
if not p_text:
|
||||
continue
|
||||
|
||||
span_matches = list(re.finditer(r"<span\b([^>]*)>([\s\S]*?)</span\s*>", p_body))
|
||||
if not span_matches:
|
||||
span_text = strip_xml(p_body, preserve_line_breaks=True)
|
||||
if span_text:
|
||||
font_size = default_font_size
|
||||
if extract_numeric_attribute(p_attrs, "fontSize") is not None:
|
||||
font_size = extract_numeric_attribute(p_attrs, "fontSize")
|
||||
font_family = extract_attribute(p_attrs, "fontFamily") or default_font_family
|
||||
latin_font = extract_attribute(p_attrs, "latinFont")
|
||||
ea_font = extract_attribute(p_attrs, "eaFont")
|
||||
cs_font = extract_attribute(p_attrs, "csFont")
|
||||
bold = extract_bool_attribute(p_attrs, "bold") or default_bold
|
||||
italic = extract_bool_attribute(p_attrs, "italic") or default_italic
|
||||
letter_spacing = extract_numeric_attribute(p_attrs, "letterSpacing")
|
||||
|
||||
spans.append({
|
||||
"text": span_text,
|
||||
"font_size": font_size,
|
||||
"font_family": font_family,
|
||||
"latin_font": latin_font,
|
||||
"ea_font": ea_font,
|
||||
"cs_font": cs_font,
|
||||
"bold": bold,
|
||||
"italic": italic,
|
||||
"letter_spacing": letter_spacing,
|
||||
})
|
||||
else:
|
||||
last_end = 0
|
||||
for span_match in span_matches:
|
||||
span_attrs, span_body = span_match.groups()
|
||||
span_text = strip_xml(span_body, preserve_line_breaks=True)
|
||||
if not span_text:
|
||||
last_end = span_match.end()
|
||||
continue
|
||||
|
||||
font_size = default_font_size
|
||||
if extract_numeric_attribute(p_attrs, "fontSize") is not None:
|
||||
font_size = extract_numeric_attribute(p_attrs, "fontSize")
|
||||
if extract_numeric_attribute(span_attrs, "fontSize") is not None:
|
||||
font_size = extract_numeric_attribute(span_attrs, "fontSize")
|
||||
|
||||
font_family = extract_attribute(span_attrs, "fontFamily") or \
|
||||
extract_attribute(p_attrs, "fontFamily") or default_font_family
|
||||
latin_font = extract_attribute(span_attrs, "latinFont") or extract_attribute(p_attrs, "latinFont")
|
||||
ea_font = extract_attribute(span_attrs, "eaFont") or extract_attribute(p_attrs, "eaFont")
|
||||
cs_font = extract_attribute(span_attrs, "csFont") or extract_attribute(p_attrs, "csFont")
|
||||
bold = extract_bool_attribute(span_attrs, "bold") or \
|
||||
extract_bool_attribute(p_attrs, "bold") or default_bold
|
||||
italic = extract_bool_attribute(span_attrs, "italic") or \
|
||||
extract_bool_attribute(p_attrs, "italic") or default_italic
|
||||
letter_spacing = extract_numeric_attribute(span_attrs, "letterSpacing") or \
|
||||
extract_numeric_attribute(p_attrs, "letterSpacing")
|
||||
|
||||
spans.append({
|
||||
"text": span_text,
|
||||
"font_size": font_size,
|
||||
"font_family": font_family,
|
||||
"latin_font": latin_font,
|
||||
"ea_font": ea_font,
|
||||
"cs_font": cs_font,
|
||||
"bold": bold,
|
||||
"italic": italic,
|
||||
"letter_spacing": letter_spacing,
|
||||
})
|
||||
last_end = span_match.end()
|
||||
|
||||
tail_text = strip_xml(p_body[last_end:], preserve_line_breaks=True)
|
||||
if tail_text:
|
||||
font_size = default_font_size
|
||||
if extract_numeric_attribute(p_attrs, "fontSize") is not None:
|
||||
font_size = extract_numeric_attribute(p_attrs, "fontSize")
|
||||
font_family = extract_attribute(p_attrs, "fontFamily") or default_font_family
|
||||
latin_font = extract_attribute(p_attrs, "latinFont")
|
||||
ea_font = extract_attribute(p_attrs, "eaFont")
|
||||
cs_font = extract_attribute(p_attrs, "csFont")
|
||||
bold = extract_bool_attribute(p_attrs, "bold") or default_bold
|
||||
italic = extract_bool_attribute(p_attrs, "italic") or default_italic
|
||||
letter_spacing = extract_numeric_attribute(p_attrs, "letterSpacing")
|
||||
spans.append({
|
||||
"text": tail_text,
|
||||
"font_size": font_size,
|
||||
"font_family": font_family,
|
||||
"latin_font": latin_font,
|
||||
"ea_font": ea_font,
|
||||
"cs_font": cs_font,
|
||||
"bold": bold,
|
||||
"italic": italic,
|
||||
"letter_spacing": letter_spacing,
|
||||
})
|
||||
return spans
|
||||
|
||||
|
||||
def extract_text_elements(slide_xml: str) -> list[dict[str, Any]]:
|
||||
elements = []
|
||||
|
||||
for match in re.finditer(r"<(shape)\b([^>]*)>", slide_xml):
|
||||
kind, attrs = match.group(1), match.group(2)
|
||||
is_self_closing = attrs.rstrip().endswith("/")
|
||||
content = ""
|
||||
if kind in {"shape"} and not is_self_closing:
|
||||
close_index = slide_xml.find(f"</{kind}>", match.end())
|
||||
if close_index != -1:
|
||||
content = slide_xml[match.end() : close_index]
|
||||
|
||||
element_type = extract_attribute(attrs, "type")
|
||||
if element_type != "text":
|
||||
continue
|
||||
|
||||
element_id = extract_attribute(attrs, "id") or f"{kind}-{len(elements) + 1}"
|
||||
x = extract_numeric_attribute(attrs, "topLeftX")
|
||||
y = extract_numeric_attribute(attrs, "topLeftY")
|
||||
width = extract_numeric_attribute(attrs, "width")
|
||||
height = extract_numeric_attribute(attrs, "height")
|
||||
if any(v is None for v in [x, y, width, height]):
|
||||
continue
|
||||
|
||||
content_attrs_match = re.search(r"<content\b([^>]*)>", content)
|
||||
content_attrs = content_attrs_match.group(1) if content_attrs_match else ""
|
||||
|
||||
font_size = extract_numeric_attribute(content_attrs, "fontSize")
|
||||
if font_size is None:
|
||||
font_size = extract_numeric_attribute(attrs, "fontSize")
|
||||
if font_size is None:
|
||||
font_size = 16
|
||||
|
||||
font_family = extract_attribute(content_attrs, "fontFamily") or extract_attribute(attrs, "fontFamily")
|
||||
latin_font = extract_attribute(content_attrs, "latinFont")
|
||||
ea_font = extract_attribute(content_attrs, "eaFont")
|
||||
cs_font = extract_attribute(content_attrs, "csFont")
|
||||
bold = extract_bool_attribute(content_attrs, "bold") or extract_bool_attribute(attrs, "bold")
|
||||
italic = extract_bool_attribute(content_attrs, "italic") or extract_bool_attribute(attrs, "italic")
|
||||
letter_spacing = extract_numeric_attribute(content_attrs, "letterSpacing")
|
||||
|
||||
wrap = extract_attribute(content_attrs, "wrap")
|
||||
if wrap is None:
|
||||
wrap = "true"
|
||||
auto_fit = extract_attribute(content_attrs, "autoFit")
|
||||
if auto_fit is None:
|
||||
auto_fit = "none"
|
||||
text_align = extract_attribute(content_attrs, "textAlign")
|
||||
vertical_align = extract_attribute(content_attrs, "verticalAlign") or "middle"
|
||||
|
||||
padding_left = extract_numeric_attribute(content_attrs, "paddingLeft") or 0
|
||||
padding_right = extract_numeric_attribute(content_attrs, "paddingRight") or 0
|
||||
padding_top = extract_numeric_attribute(content_attrs, "paddingTop") or 0
|
||||
padding_bottom = extract_numeric_attribute(content_attrs, "paddingBottom") or 0
|
||||
|
||||
full_text = strip_xml_paragraphs(content)
|
||||
clean_text = normalize_text_no_whitespace(full_text)
|
||||
if not clean_text:
|
||||
continue
|
||||
|
||||
content_inner = ""
|
||||
if content_attrs_match:
|
||||
content_start = content_attrs_match.end()
|
||||
content_end = content.find("</content>", content_start)
|
||||
if content_end != -1:
|
||||
content_inner = content[content_start:content_end]
|
||||
|
||||
spans = extract_text_spans(content_inner, font_size, font_family, bold, italic)
|
||||
|
||||
hard_lines = full_text.split("\n")
|
||||
max_line_estimated_width = 0
|
||||
max_line_text = ""
|
||||
for line in hard_lines:
|
||||
line_clean = normalize_text_no_whitespace(line)
|
||||
if not line_clean:
|
||||
continue
|
||||
line_width = 0
|
||||
for span in spans:
|
||||
if span["text"] in line or line in span["text"]:
|
||||
line_width += estimate_text_width(normalize_text_no_whitespace(span["text"]), span["font_size"])
|
||||
if line_width == 0:
|
||||
line_width = estimate_text_width(line_clean, font_size)
|
||||
if line_width > max_line_estimated_width:
|
||||
max_line_estimated_width = line_width
|
||||
max_line_text = line_clean
|
||||
|
||||
available_width = width - padding_left - padding_right
|
||||
|
||||
elements.append({
|
||||
"id": element_id,
|
||||
"x": x,
|
||||
"y": y,
|
||||
"width": width,
|
||||
"height": height,
|
||||
"padding_left": padding_left,
|
||||
"padding_right": padding_right,
|
||||
"padding_top": padding_top,
|
||||
"padding_bottom": padding_bottom,
|
||||
"available_width": available_width,
|
||||
"font_size": font_size,
|
||||
"font_family": font_family,
|
||||
"latin_font": latin_font,
|
||||
"ea_font": ea_font,
|
||||
"cs_font": cs_font,
|
||||
"bold": bold,
|
||||
"italic": italic,
|
||||
"letter_spacing": letter_spacing,
|
||||
"wrap": wrap,
|
||||
"auto_fit": auto_fit,
|
||||
"text_align": text_align,
|
||||
"vertical_align": vertical_align,
|
||||
"text_raw": full_text,
|
||||
"text_clean": clean_text,
|
||||
"max_line_text": max_line_text,
|
||||
"estimated_width": max_line_estimated_width,
|
||||
"width_ratio": max_line_estimated_width / available_width if available_width > 0 else None,
|
||||
"spans": spans,
|
||||
})
|
||||
|
||||
return elements
|
||||
|
||||
|
||||
def run_lark_cli(args: list[str], env: dict[str, str]) -> subprocess.CompletedProcess:
|
||||
cmd = ["lark-cli"] + args
|
||||
return subprocess.run(
|
||||
cmd,
|
||||
env=env,
|
||||
capture_output=True,
|
||||
text=True,
|
||||
cwd=str(SCRIPT_DIR),
|
||||
timeout=120,
|
||||
)
|
||||
|
||||
|
||||
def get_presentation_xml(env: dict[str, str]) -> str:
|
||||
result = run_lark_cli(
|
||||
["slides", "+xml-get", "--presentation", PRESENTATION_ID, "--raw"],
|
||||
env,
|
||||
)
|
||||
if result.returncode != 0:
|
||||
print(f"Error getting presentation XML: {result.stderr}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
return result.stdout
|
||||
|
||||
|
||||
def get_slide_ids(xml: str) -> list[tuple[int, str]]:
|
||||
slides = []
|
||||
for index, match in enumerate(re.finditer(r"<slide\b([^>]*)>", xml)):
|
||||
attrs = match.group(1)
|
||||
slide_id = extract_attribute(attrs, "id")
|
||||
if slide_id:
|
||||
slides.append((index + 1, slide_id))
|
||||
return slides
|
||||
|
||||
|
||||
def get_slide_xml(slide_id: str, env: dict[str, str]) -> str:
|
||||
result = run_lark_cli(
|
||||
["slides", "+xml-get", "--presentation", PRESENTATION_ID, "--slide-id", slide_id, "--raw"],
|
||||
env,
|
||||
)
|
||||
if result.returncode != 0:
|
||||
print(f"Error getting slide {slide_id} XML: {result.stderr}", file=sys.stderr)
|
||||
return ""
|
||||
return result.stdout
|
||||
|
||||
|
||||
def take_screenshots(slide_ids: list[str], output_dir: Path, env: dict[str, str]) -> None:
|
||||
output_dir.mkdir(parents=True, exist_ok=True)
|
||||
batch_size = 10
|
||||
for i in range(0, len(slide_ids), batch_size):
|
||||
batch = slide_ids[i:i + batch_size]
|
||||
args = [
|
||||
"slides", "+screenshot",
|
||||
"--presentation", PRESENTATION_ID,
|
||||
"--output-dir", str(output_dir.relative_to(SCRIPT_DIR)),
|
||||
]
|
||||
for sid in batch:
|
||||
args.extend(["--slide-id", sid])
|
||||
result = run_lark_cli(args, env)
|
||||
if result.returncode != 0:
|
||||
print(f"Warning: screenshot failed for batch {i//batch_size + 1}: {result.stderr}", file=sys.stderr)
|
||||
|
||||
|
||||
def main() -> None:
|
||||
env = os.environ.copy()
|
||||
env["LARKSUITE_CLI_NO_UPDATE_NOTIFIER"] = "1"
|
||||
env["LARKSUITE_CLI_NO_SKILLS_NOTIFIER"] = "1"
|
||||
|
||||
print(f"Fetching presentation {PRESENTATION_ID}...")
|
||||
full_xml = get_presentation_xml(env)
|
||||
slides_info = get_slide_ids(full_xml)
|
||||
print(f"Found {len(slides_info)} slides")
|
||||
|
||||
screenshot_dir = SCRIPT_DIR / ".lark-slides" / "screenshots"
|
||||
print(f"Taking screenshots (this may take a while)...")
|
||||
take_screenshots([sid for _, sid in slides_info], screenshot_dir, env)
|
||||
|
||||
all_samples = []
|
||||
|
||||
for slide_num, slide_id in slides_info:
|
||||
print(f"Processing slide {slide_num} ({slide_id})...")
|
||||
slide_xml = get_slide_xml(slide_id, env)
|
||||
if not slide_xml:
|
||||
continue
|
||||
|
||||
elements = extract_text_elements(slide_xml)
|
||||
for elem in elements:
|
||||
text_type = classify_text_type(elem["text_clean"])
|
||||
is_single_line_hard = "\n" not in elem["text_raw"]
|
||||
wrap_enabled = elem["wrap"] not in {"false", "0"}
|
||||
has_auto_fit = elem["auto_fit"] in {"normal-auto-fit", "shape-auto-fit"}
|
||||
|
||||
sample = {
|
||||
"slide_number": slide_num,
|
||||
"slide_id": slide_id,
|
||||
"element_id": elem["id"],
|
||||
"x": round(elem["x"], 2),
|
||||
"y": round(elem["y"], 2),
|
||||
"shape_width": round(elem["width"], 2),
|
||||
"shape_height": round(elem["height"], 2),
|
||||
"padding_left": elem["padding_left"],
|
||||
"padding_right": elem["padding_right"],
|
||||
"available_width": round(elem["available_width"], 2),
|
||||
"font_size": elem["font_size"],
|
||||
"font_family": elem["font_family"] or "",
|
||||
"bold": str(elem["bold"]).lower(),
|
||||
"italic": str(elem["italic"]).lower(),
|
||||
"wrap": elem["wrap"] or "",
|
||||
"auto_fit": elem["auto_fit"] or "",
|
||||
"text_align": elem["text_align"] or "",
|
||||
"text_clean": elem["text_clean"],
|
||||
"text_length": len(elem["text_clean"]),
|
||||
"text_type": text_type,
|
||||
"is_single_line_hard": str(is_single_line_hard).lower(),
|
||||
"estimated_width": round(elem["estimated_width"], 2),
|
||||
"width_ratio": round(elem["width_ratio"], 4) if elem["width_ratio"] is not None else "",
|
||||
"likely_wraps_actual": "",
|
||||
"notes": "",
|
||||
}
|
||||
if elem["width_ratio"] is not None and not has_auto_fit:
|
||||
ratio = elem["width_ratio"]
|
||||
if not wrap_enabled:
|
||||
sample["likely_wraps_actual"] = "no_wrap"
|
||||
sample["notes"] = "wrap=false,不自动换行"
|
||||
elif ratio < 0.7:
|
||||
sample["likely_wraps_actual"] = "no_slack"
|
||||
sample["notes"] = f"估算宽度 < 70% 可用宽度({ratio:.2f}),明显有留白"
|
||||
elif ratio < 0.85:
|
||||
sample["likely_wraps_actual"] = "no"
|
||||
sample["notes"] = f"估算宽度 {ratio:.2f}x 可用宽度,大概率单行"
|
||||
elif ratio <= 1.0:
|
||||
sample["likely_wraps_actual"] = "tight_single"
|
||||
sample["notes"] = f"估算宽度 {ratio:.2f}x 可用宽度,接近填满,需确认是否单行"
|
||||
elif ratio <= 1.2:
|
||||
sample["likely_wraps_actual"] = "borderline"
|
||||
sample["notes"] = f"估算宽度 {ratio:.2f}x 可用宽度,边界情况,需截图确认是否换行"
|
||||
elif ratio <= 1.5:
|
||||
sample["likely_wraps_actual"] = "likely_wrap"
|
||||
sample["notes"] = f"估算宽度 {ratio:.2f}x 可用宽度,大概率换2行"
|
||||
else:
|
||||
sample["likely_wraps_actual"] = "yes"
|
||||
sample["notes"] = f"估算宽度 {ratio:.2f}x 可用宽度,肯定换行(多行)"
|
||||
elif has_auto_fit:
|
||||
sample["likely_wraps_actual"] = "autofit"
|
||||
sample["notes"] = "autoFit开启,字体会自动缩放"
|
||||
else:
|
||||
sample["likely_wraps_actual"] = "unknown"
|
||||
sample["notes"] = "无法判断"
|
||||
|
||||
all_samples.append(sample)
|
||||
|
||||
print(f"\nCollected {len(all_samples)} text shape samples")
|
||||
|
||||
csv_fields = [
|
||||
"slide_number", "slide_id", "element_id", "x", "y",
|
||||
"shape_width", "shape_height", "padding_left", "padding_right", "available_width",
|
||||
"font_size", "font_family", "bold", "italic", "wrap", "auto_fit", "text_align",
|
||||
"text_clean", "text_length", "text_type", "is_single_line_hard",
|
||||
"estimated_width", "width_ratio", "likely_wraps_actual", "notes",
|
||||
]
|
||||
|
||||
with open(CSV_OUTPUT, "w", encoding="utf-8", newline="") as f:
|
||||
writer = csv.DictWriter(f, fieldnames=csv_fields)
|
||||
writer.writeheader()
|
||||
writer.writerows(all_samples)
|
||||
print(f"CSV saved to: {CSV_OUTPUT}")
|
||||
|
||||
key_categories = {"tight_single", "borderline", "likely_wrap", "yes"}
|
||||
tight_samples = [s for s in all_samples if s["likely_wraps_actual"] == "tight_single"]
|
||||
borderline_samples = [s for s in all_samples if s["likely_wraps_actual"] == "borderline"]
|
||||
likely_wrap_samples = [s for s in all_samples if s["likely_wraps_actual"] == "likely_wrap"]
|
||||
yes_wrap_samples = [s for s in all_samples if s["likely_wraps_actual"] == "yes"]
|
||||
|
||||
type_stats = defaultdict(list)
|
||||
for s in all_samples:
|
||||
if s["width_ratio"] != "":
|
||||
type_stats[s["text_type"]].append(s)
|
||||
|
||||
md_lines = [
|
||||
"# 字符宽度测量数据报告",
|
||||
"",
|
||||
f"**Presentation**: {PRESENTATION_ID}",
|
||||
f"**总样本数**: {len(all_samples)}",
|
||||
f"**关键测量样本(比值≥0.85)**: {len(tight_samples) + len(borderline_samples) + len(likely_wrap_samples) + len(yes_wrap_samples)}",
|
||||
f" - 接近填满(0.85-1.0): {len(tight_samples)}",
|
||||
f" - 边界情况(1.0-1.2): {len(borderline_samples)}",
|
||||
f" - 大概率换行(1.2-1.5): {len(likely_wrap_samples)}",
|
||||
f" - 肯定换行(>1.5): {len(yes_wrap_samples)}",
|
||||
"",
|
||||
"## 按文本类型统计(所有样本)",
|
||||
"",
|
||||
"| 文本类型 | 样本数 | 平均估算/可用比 | 最小比值 | 最大比值 |",
|
||||
"|----------|--------|------------------|----------|----------|",
|
||||
]
|
||||
|
||||
for text_type in sorted(type_stats.keys()):
|
||||
samples = type_stats[text_type]
|
||||
ratios = [float(s["width_ratio"]) for s in samples if s["width_ratio"] != ""]
|
||||
if not ratios:
|
||||
continue
|
||||
avg_ratio = sum(ratios) / len(ratios)
|
||||
min_ratio = min(ratios)
|
||||
max_ratio = max(ratios)
|
||||
md_lines.append(
|
||||
f"| {text_type} | {len(samples)} | {avg_ratio:.4f} | {min_ratio:.4f} | {max_ratio:.4f} |"
|
||||
)
|
||||
|
||||
def add_sample_table(title: str, samples: list[dict], max_rows: int = 50):
|
||||
md_lines.extend([
|
||||
"",
|
||||
f"## {title}",
|
||||
"",
|
||||
"| 页码 | 元素ID | 字体 | 字号 | Bold | 文本类型 | 硬换行 | 文本 | 估算宽度 | 可用宽度 | 比值 |",
|
||||
"|------|--------|------|------|------|----------|--------|------|----------|----------|------|",
|
||||
])
|
||||
for idx, s in enumerate(samples[:max_rows]):
|
||||
text_preview = s["text_clean"][:50] + ("..." if len(s["text_clean"]) > 50 else "")
|
||||
md_lines.append(
|
||||
f"| {s['slide_number']} | {s['element_id']} | {s['font_family']} | {s['font_size']} | "
|
||||
f"{s['bold']} | {s['text_type']} | {s['is_single_line_hard']} | {text_preview} | {s['estimated_width']} | "
|
||||
f"{s['available_width']} | {s['width_ratio']} |"
|
||||
)
|
||||
if len(samples) > max_rows:
|
||||
md_lines.append(f"| ... | ... | ... | ... | ... | ... | ... | (共 {len(samples)} 个样本) | ... | ... | ... |")
|
||||
|
||||
add_sample_table("接近填满样本(估算比值 0.85-1.0,最适合校准单行宽度)", tight_samples)
|
||||
add_sample_table("边界换行样本(估算比值 1.0-1.2,需截图确认是否换行)", borderline_samples)
|
||||
add_sample_table("大概率换行样本(估算比值 1.2-1.5)", likely_wrap_samples)
|
||||
add_sample_table("肯定换行样本(估算比值 > 1.5)", yes_wrap_samples, max_rows=20)
|
||||
|
||||
md_lines.extend([
|
||||
"",
|
||||
"## 字体统计",
|
||||
"",
|
||||
"| 字体 | 样本数 |",
|
||||
"|------|--------|",
|
||||
])
|
||||
|
||||
font_stats = defaultdict(int)
|
||||
for s in all_samples:
|
||||
font = s["font_family"] or "(default)"
|
||||
font_stats[font] += 1
|
||||
for font, count in sorted(font_stats.items(), key=lambda x: -x[1]):
|
||||
md_lines.append(f"| {font} | {count} |")
|
||||
|
||||
md_lines.extend([
|
||||
"",
|
||||
"## 字号+粗体统计",
|
||||
"",
|
||||
"| 字号 | Bold | 样本数 | 平均比值 |",
|
||||
"|------|------|--------|----------|",
|
||||
])
|
||||
|
||||
size_bold_stats = defaultdict(list)
|
||||
for s in all_samples:
|
||||
if s["width_ratio"] != "":
|
||||
key = (s["font_size"], s["bold"])
|
||||
size_bold_stats[key].append(float(s["width_ratio"]))
|
||||
for (font_size, bold), ratios in sorted(size_bold_stats.items()):
|
||||
avg = sum(ratios) / len(ratios)
|
||||
md_lines.append(f"| {font_size} | {bold} | {len(ratios)} | {avg:.4f} |")
|
||||
|
||||
md_lines.extend([
|
||||
"",
|
||||
"## 说明",
|
||||
"",
|
||||
"- **估算宽度**: 使用当前 `estimate_character_width` 函数计算(中文=1em,西文=0.55em,空格=0.33em)",
|
||||
"- **可用宽度**: shape.width - paddingLeft - paddingRight",
|
||||
"- **width_ratio**: 估算宽度 / 可用宽度(针对最长硬换行段落计算)",
|
||||
"- **硬换行**: 文本中是否包含显式 \\n 分段",
|
||||
f"- 截图保存在: {screenshot_dir}",
|
||||
"",
|
||||
"### 比值解读建议",
|
||||
"- ratio < 0.7: 明显留白,估算宽度可能偏宽,或文本确实很短",
|
||||
"- 0.7-0.85: 大概率单行,有少量留白",
|
||||
"- 0.85-1.0: 接近填满,是校准西文/中文字符宽度系数的最佳样本",
|
||||
"- 1.0-1.2: 边界情况,需要看截图确认:是刚好填满单行还是换行了",
|
||||
"- 1.2-1.5: 大概率换2行",
|
||||
"- >1.5: 肯定换行(多行文本)",
|
||||
"",
|
||||
"### 校准建议",
|
||||
"1. 先看 ratio 0.85-1.0 的样本:如果截图中这些文本**确实单行且接近填满**,说明当前估算大致准确;如果有较多留白,说明估算偏宽,需要减小西文字符系数",
|
||||
"2. 再看 ratio 1.0-1.2 的样本:结合截图判断实际是单行还是换行,反推合理系数",
|
||||
"3. 重点关注纯英文、纯数字、纯中文、中英混合这几类分别统计",
|
||||
"4. Bold 字体通常比常规字体稍宽,Italic 稍窄,需要分别考虑",
|
||||
"",
|
||||
"请人工核对截图确认边界样本的实际换行情况,用于校准字符宽度系数。",
|
||||
])
|
||||
|
||||
with open(MD_OUTPUT, "w", encoding="utf-8") as f:
|
||||
f.write("\n".join(md_lines))
|
||||
print(f"Markdown report saved to: {MD_OUTPUT}")
|
||||
|
||||
print("\n=== Summary ===")
|
||||
print(f"Total samples: {len(all_samples)}")
|
||||
print(f" Tight single (0.85-1.0): {len(tight_samples)}")
|
||||
print(f" Borderline (1.0-1.2): {len(borderline_samples)}")
|
||||
print(f" Likely wrap (1.2-1.5): {len(likely_wrap_samples)}")
|
||||
print(f" Definite wrap (>1.5): {len(yes_wrap_samples)}")
|
||||
print()
|
||||
for text_type in sorted(type_stats.keys()):
|
||||
samples = type_stats[text_type]
|
||||
ratios = [float(s["width_ratio"]) for s in samples if s["width_ratio"] != ""]
|
||||
if ratios:
|
||||
avg_ratio = sum(ratios) / len(ratios)
|
||||
print(f" {text_type}: {len(samples)} samples, avg ratio = {avg_ratio:.4f}")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
265
skills/lark-slides/scripts/text-measure/cli.ts
Normal file
@@ -0,0 +1,265 @@
|
||||
#!/usr/bin/env -S npx tsx
|
||||
// Copyright (c) 2026 Lark Technologies Pte. Ltd.
|
||||
// SPDX-License-Identifier: MIT
|
||||
//
|
||||
// CLI: measure single-line text width via CanvasKit, reusing ee/slide's core
|
||||
// measure function so widths match the on-line renderer.
|
||||
//
|
||||
// Input is a Slide XML string (or an explicit --text). XML paragraph/style
|
||||
// extraction mirrors xml_text_overlap_lint.py (extract_text_paragraphs /
|
||||
// extract_max_span_font_size / style attribute names).
|
||||
//
|
||||
// Usage:
|
||||
// tsx cli.ts --font "Noto Sans SC=/abs/NotoSansSC.ttf" [--font ...] --file slide.xml
|
||||
// tsx cli.ts --font "Arial=/abs/Arial.ttf" --text "Hello" --font-size 16 [--bold] [--italic] [--letter-spacing 0]
|
||||
// cat slide.xml | tsx cli.ts --font "Arial=/abs/Arial.ttf"
|
||||
//
|
||||
// Output: JSON to stdout. Progress/warnings to stderr.
|
||||
|
||||
import { readFile } from 'node:fs/promises';
|
||||
|
||||
import { StandaloneMeasureRuntime, type FontSpec } from './runtime.ts';
|
||||
import { measureSingleLineText, type SingleLineStyle } from './measure.ts';
|
||||
|
||||
interface CliArgs {
|
||||
fonts: FontSpec[];
|
||||
file?: string;
|
||||
xml?: string;
|
||||
text?: string;
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
letterSpacing: string;
|
||||
bold: boolean;
|
||||
italic: boolean;
|
||||
}
|
||||
|
||||
interface Segment {
|
||||
shapeId: string | null;
|
||||
text: string;
|
||||
style: SingleLineStyle;
|
||||
}
|
||||
|
||||
function parseArgs(argv: string[]): CliArgs {
|
||||
const args: CliArgs = {
|
||||
fonts: [],
|
||||
fontFamily: '',
|
||||
fontSize: '16px',
|
||||
letterSpacing: '0px',
|
||||
bold: false,
|
||||
italic: false,
|
||||
};
|
||||
for (let i = 0; i < argv.length; i++) {
|
||||
const arg = argv[i];
|
||||
const next = () => {
|
||||
const value = argv[++i];
|
||||
if (value === undefined) {
|
||||
throw new Error(`Missing value for ${arg}`);
|
||||
}
|
||||
return value;
|
||||
};
|
||||
switch (arg) {
|
||||
case '--font': {
|
||||
// "Family Name=/abs/path.ttf" — split on the FIRST '=' so family names
|
||||
// may not contain '=', which is fine for font-family strings.
|
||||
const spec = next();
|
||||
const eq = spec.indexOf('=');
|
||||
if (eq < 0) {
|
||||
throw new Error(`--font expects "family=path", got: ${spec}`);
|
||||
}
|
||||
args.fonts.push({ family: spec.slice(0, eq).trim(), path: spec.slice(eq + 1).trim() });
|
||||
break;
|
||||
}
|
||||
case '--file':
|
||||
args.file = next();
|
||||
break;
|
||||
case '--xml':
|
||||
args.xml = next();
|
||||
break;
|
||||
case '--text':
|
||||
args.text = next();
|
||||
break;
|
||||
case '--font-family':
|
||||
args.fontFamily = next();
|
||||
break;
|
||||
case '--font-size':
|
||||
args.fontSize = next();
|
||||
break;
|
||||
case '--letter-spacing':
|
||||
args.letterSpacing = next();
|
||||
break;
|
||||
case '--bold':
|
||||
args.bold = true;
|
||||
break;
|
||||
case '--italic':
|
||||
args.italic = true;
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Unknown argument: ${arg}`);
|
||||
}
|
||||
}
|
||||
return args;
|
||||
}
|
||||
|
||||
async function readStdin(): Promise<string> {
|
||||
const chunks: Buffer[] = [];
|
||||
for await (const chunk of process.stdin) {
|
||||
chunks.push(chunk as Buffer);
|
||||
}
|
||||
return Buffer.concat(chunks).toString('utf8');
|
||||
}
|
||||
|
||||
// --- XML extraction (mirrors xml_text_overlap_lint.py) ---
|
||||
|
||||
function stripXml(value: string, preserveLineBreaks: boolean): string {
|
||||
let stripped = value.replace(/<br\s*\/?>/gi, '\n').replace(/<[^>]+>/g, '');
|
||||
stripped = stripped
|
||||
.replace(/ /g, ' ')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'");
|
||||
if (preserveLineBreaks) {
|
||||
return stripped
|
||||
.split('\n')
|
||||
.map(line => line.replace(/\s+/g, ' ').trim())
|
||||
.join('\n');
|
||||
}
|
||||
return stripped.replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
|
||||
function extractAttribute(attrs: string, name: string): string | null {
|
||||
const match = attrs.match(new RegExp(`\\b${name}\\s*=\\s*"([^"]*)"`, 'i'));
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
function extractNumericAttribute(attrs: string, name: string): number | null {
|
||||
const raw = extractAttribute(attrs, name);
|
||||
if (raw === null) {
|
||||
return null;
|
||||
}
|
||||
const value = parseFloat(raw);
|
||||
return Number.isFinite(value) ? value : null;
|
||||
}
|
||||
|
||||
function extractBoolAttribute(attrs: string, name: string): boolean {
|
||||
return extractAttribute(attrs, name) === 'true';
|
||||
}
|
||||
|
||||
// Largest span fontSize wins, falling back to the content default (mirrors
|
||||
// extract_max_span_font_size).
|
||||
function extractMaxSpanFontSize(body: string, defaultFontSize: number): number {
|
||||
const sizes = [defaultFontSize];
|
||||
for (const [, spanAttrs] of body.matchAll(/<span\b([^>]*)>/gi)) {
|
||||
const size = extractNumericAttribute(spanAttrs, 'fontSize');
|
||||
if (size !== null) {
|
||||
sizes.push(size);
|
||||
}
|
||||
}
|
||||
return Math.max(...sizes);
|
||||
}
|
||||
|
||||
function detectAnySpanBool(body: string, name: string): boolean {
|
||||
for (const [, spanAttrs] of body.matchAll(/<span\b([^>]*)>/gi)) {
|
||||
if (extractBoolAttribute(spanAttrs, name)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Extract one segment per <p> inside each <shape ...><content ...>. Each hard
|
||||
// paragraph is measured independently (single-line scope).
|
||||
function extractSegments(xml: string): Segment[] {
|
||||
const segments: Segment[] = [];
|
||||
for (const [, shapeAttrs, shapeBody] of xml.matchAll(/<shape\b([^>]*)>([\s\S]*?)<\/shape\s*>/gi)) {
|
||||
const shapeId = extractAttribute(shapeAttrs, 'id');
|
||||
const contentMatch = shapeBody.match(/<content\b([^>]*)>([\s\S]*?)<\/content\s*>/i);
|
||||
if (!contentMatch) {
|
||||
continue;
|
||||
}
|
||||
const [, contentAttrs, contentBody] = contentMatch;
|
||||
const contentFontSize = extractNumericAttribute(contentAttrs, 'fontSize') ?? 16;
|
||||
const contentFontFamily = extractAttribute(contentAttrs, 'fontFamily') ?? '';
|
||||
const contentLetterSpacing = extractNumericAttribute(contentAttrs, 'letterSpacing');
|
||||
const contentBold = extractBoolAttribute(contentAttrs, 'bold');
|
||||
const contentItalic = extractBoolAttribute(contentAttrs, 'italic');
|
||||
|
||||
const paragraphs = [...contentBody.matchAll(/<p\b([^>]*)>([\s\S]*?)<\/p\s*>/gi)];
|
||||
const iter = paragraphs.length > 0 ? paragraphs : [['', '', contentBody] as unknown as RegExpMatchArray];
|
||||
|
||||
for (const [, , body] of iter) {
|
||||
const text = stripXml(body, true);
|
||||
if (!text) {
|
||||
continue;
|
||||
}
|
||||
const fontSize = extractMaxSpanFontSize(body, contentFontSize);
|
||||
const bold = contentBold || detectAnySpanBool(body, 'bold');
|
||||
const italic = contentItalic || detectAnySpanBool(body, 'italic');
|
||||
const letterSpacing = contentLetterSpacing ?? 0;
|
||||
segments.push({
|
||||
shapeId,
|
||||
text,
|
||||
style: {
|
||||
fontSize: `${fontSize}px`,
|
||||
fontFamily: contentFontFamily,
|
||||
letterSpacing: `${letterSpacing}px`,
|
||||
bold,
|
||||
italic,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return segments;
|
||||
}
|
||||
|
||||
async function main(): Promise<void> {
|
||||
const args = parseArgs(process.argv.slice(2));
|
||||
|
||||
const runtime = new StandaloneMeasureRuntime();
|
||||
await runtime.ensureReady(args.fonts);
|
||||
|
||||
// Each segment may itself contain hard line breaks; measure each visual line
|
||||
// and report the max width (single-line scope: no wrapping).
|
||||
const measureSegment = (text: string, style: SingleLineStyle) => {
|
||||
const lines = text.split('\n');
|
||||
const widths = lines.map(line => measureSingleLineText(line, style, runtime));
|
||||
return { widthPx: Math.max(...widths, 0), lineWidths: widths };
|
||||
};
|
||||
|
||||
let output: unknown;
|
||||
|
||||
if (args.text !== undefined) {
|
||||
const style: SingleLineStyle = {
|
||||
fontSize: args.fontSize,
|
||||
fontFamily: args.fontFamily,
|
||||
letterSpacing: args.letterSpacing,
|
||||
bold: args.bold,
|
||||
italic: args.italic,
|
||||
};
|
||||
const { widthPx, lineWidths } = measureSegment(args.text, style);
|
||||
output = { mode: 'text', text: args.text, style, widthPx, lineWidths };
|
||||
} else {
|
||||
const xml = args.xml ?? (args.file ? await readFile(args.file, 'utf8') : await readStdin());
|
||||
if (!xml.trim()) {
|
||||
throw new Error('No XML input provided (use --file, --xml, --text, or pipe via stdin).');
|
||||
}
|
||||
const segments = extractSegments(xml);
|
||||
output = {
|
||||
mode: 'xml',
|
||||
segmentCount: segments.length,
|
||||
segments: segments.map(seg => {
|
||||
const { widthPx, lineWidths } = measureSegment(seg.text, seg.style);
|
||||
return { shapeId: seg.shapeId, text: seg.text, style: seg.style, widthPx, lineWidths };
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
runtime.dispose();
|
||||
process.stdout.write(JSON.stringify(output, null, 2) + '\n');
|
||||
}
|
||||
|
||||
main().catch((error: unknown) => {
|
||||
process.stderr.write(`${error instanceof Error ? error.stack ?? error.message : String(error)}\n`);
|
||||
process.exit(1);
|
||||
});
|
||||
95
skills/lark-slides/scripts/text-measure/measure.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
// Copyright (c) 2026 Lark Technologies Pte. Ltd.
|
||||
// SPDX-License-Identifier: MIT
|
||||
//
|
||||
// Core single-line text measurement, transcribed verbatim from ee/slide
|
||||
// modules/text-measure-module/src/util/canvaskit/text-layout.ts
|
||||
// (function measureSingleLineText, lines 1717-1776) so that the width produced
|
||||
// here is identical to what the Slides renderer computes on-line.
|
||||
//
|
||||
// Only the single-line path is reproduced (per the agreed scope). The multi-run
|
||||
// measureTextWithCanvasKit path — which needs an editor-kit ZoneDelta — is not
|
||||
// included here.
|
||||
|
||||
import type { CanvasKit, FontCollection, TypefaceFontProvider } from 'canvaskit-wasm';
|
||||
|
||||
/**
|
||||
* Read-only runtime view the measure function depends on. Mirrors
|
||||
* CanvasKitMeasureRuntime in text-measure-module/src/type/canvaskit.type.ts.
|
||||
* Initialization (WASM load, font registration) is the runtime's job, not the
|
||||
* measure function's.
|
||||
*/
|
||||
export interface CanvasKitMeasureRuntime {
|
||||
readonly getCanvasKit: () => CanvasKit | null;
|
||||
readonly getFontProvider: () => TypefaceFontProvider | null;
|
||||
readonly getFontCollection: () => FontCollection | null;
|
||||
readonly getDefaultFontFamily: () => string;
|
||||
readonly isFontRegistered: (fontFamily: string) => boolean;
|
||||
readonly hasWghtAxis: (fontFamily: string) => boolean;
|
||||
}
|
||||
|
||||
export interface SingleLineStyle {
|
||||
fontSize: string;
|
||||
fontFamily: string;
|
||||
letterSpacing: string;
|
||||
bold: boolean;
|
||||
italic: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Verbatim transcription of measureSingleLineText from text-layout.ts:1717.
|
||||
* Returns the natural (unwrapped) width in px via Skia's getMaxIntrinsicWidth.
|
||||
*/
|
||||
export function measureSingleLineText(
|
||||
text: string,
|
||||
style: SingleLineStyle,
|
||||
runtime: CanvasKitMeasureRuntime,
|
||||
): number {
|
||||
const ck = runtime.getCanvasKit();
|
||||
const fontProvider = runtime.getFontProvider();
|
||||
if (!ck || !fontProvider) {
|
||||
throw new Error('CanvasKit runtime not ready, call ensureReady() before measuring');
|
||||
}
|
||||
|
||||
const fontSize = parseInt(style.fontSize, 10) || 16;
|
||||
const letterSpacing = parseFloat(style.letterSpacing) || 0;
|
||||
const rawFontFamily = style.fontFamily.split(',')[0].trim().replace(/['"]/g, '');
|
||||
const defaultFont = runtime.getDefaultFontFamily();
|
||||
const fontFamilies = runtime.isFontRegistered(rawFontFamily) ? [rawFontFamily, defaultFont] : [defaultFont];
|
||||
|
||||
const textStyle = new ck.TextStyle({
|
||||
fontSize,
|
||||
fontFamilies,
|
||||
letterSpacing,
|
||||
fontStyle: {
|
||||
weight: style.bold ? ck.FontWeight.Bold : ck.FontWeight.Normal,
|
||||
slant: style.italic ? ck.FontSlant.Italic : ck.FontSlant.Upright,
|
||||
},
|
||||
});
|
||||
|
||||
const paraStyle = new ck.ParagraphStyle({
|
||||
textStyle: {
|
||||
fontSize,
|
||||
fontFamilies,
|
||||
},
|
||||
});
|
||||
|
||||
const builder = ck.ParagraphBuilder.MakeFromFontProvider(paraStyle, fontProvider);
|
||||
|
||||
try {
|
||||
builder.pushStyle(textStyle);
|
||||
builder.addText(text);
|
||||
builder.pop();
|
||||
|
||||
const paragraph = builder.build();
|
||||
|
||||
try {
|
||||
// Unbounded width: measure the full natural width of a single line.
|
||||
paragraph.layout(Infinity);
|
||||
return paragraph.getMaxIntrinsicWidth();
|
||||
} finally {
|
||||
paragraph.delete();
|
||||
}
|
||||
} finally {
|
||||
builder.delete();
|
||||
}
|
||||
}
|
||||
21
skills/lark-slides/scripts/text-measure/package.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "lark-slides-text-measure",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Standalone CanvasKit single-line text measurement, reusing ee/slide text-measure-module's core measure function.",
|
||||
"bin": {
|
||||
"measure-text": "./cli.ts"
|
||||
},
|
||||
"scripts": {
|
||||
"measure": "tsx cli.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"canvaskit-wasm": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "*",
|
||||
"tsx": "*",
|
||||
"typescript": "*"
|
||||
}
|
||||
}
|
||||
133
skills/lark-slides/scripts/text-measure/runtime.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
// Copyright (c) 2026 Lark Technologies Pte. Ltd.
|
||||
// SPDX-License-Identifier: MIT
|
||||
//
|
||||
// Standalone CanvasKit runtime that satisfies CanvasKitMeasureRuntime without
|
||||
// the @slide/modular DI container. The CanvasKit init and font-provider setup
|
||||
// are distilled from ee/slide text-measure-module:
|
||||
// - createCanvasKit() <- provide/canvaskit/canvaskit.service.implement.ts:64
|
||||
// - TypefaceFontProvider <- provide/canvaskit-font/canvaskit-font.service.base.ts:67
|
||||
// - registerFont() <- canvaskit-font.service.base.ts:108
|
||||
// - Node wasm path resolve <- provide/canvaskit/canvaskit.node.util.ts:6
|
||||
|
||||
import { createRequire } from 'node:module';
|
||||
import { readFile } from 'node:fs/promises';
|
||||
|
||||
import type { CanvasKit, FontCollection, TypefaceFontProvider } from 'canvaskit-wasm';
|
||||
import type { CanvasKitMeasureRuntime } from './measure.ts';
|
||||
|
||||
const nodeRequire = createRequire(import.meta.url);
|
||||
|
||||
function resolveNodeCanvasKitWasmPath(): string {
|
||||
return nodeRequire.resolve('canvaskit-wasm/bin/canvaskit.wasm');
|
||||
}
|
||||
|
||||
export interface FontSpec {
|
||||
/** font-family name the XML references (matched by measureSingleLineText). */
|
||||
family: string;
|
||||
/** absolute path to the font file (.ttf/.otf/.ttc). */
|
||||
path: string;
|
||||
/** true for variable fonts exposing a `wght` axis. */
|
||||
hasWghtAxis?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Minimal runtime: loads CanvasKit WASM, creates one TypefaceFontProvider, and
|
||||
* registers caller-supplied font files. The first registered font becomes the
|
||||
* default family (mirrors registerDefaultFont in the base service).
|
||||
*/
|
||||
export class StandaloneMeasureRuntime implements CanvasKitMeasureRuntime {
|
||||
private canvasKit: CanvasKit | null = null;
|
||||
private fontProvider: TypefaceFontProvider | null = null;
|
||||
private fontCollection: FontCollection | null = null;
|
||||
private readonly registeredFonts = new Set<string>();
|
||||
private readonly wghtAxisFonts = new Set<string>();
|
||||
private defaultFontFamily = 'sans-serif';
|
||||
|
||||
async ensureReady(fonts: readonly FontSpec[]): Promise<void> {
|
||||
if (!this.canvasKit) {
|
||||
const canvasKitModule = await import('canvaskit-wasm');
|
||||
const wasmUrl = resolveNodeCanvasKitWasmPath();
|
||||
this.canvasKit = await canvasKitModule.default({
|
||||
locateFile: (file: string) => (file.endsWith('.wasm') ? wasmUrl : file),
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.fontProvider) {
|
||||
this.fontProvider = this.canvasKit.TypefaceFontProvider.Make();
|
||||
}
|
||||
|
||||
if (!this.fontCollection) {
|
||||
this.fontCollection = this.canvasKit.FontCollection.Make();
|
||||
this.fontCollection.setDefaultFontManager(this.fontProvider);
|
||||
this.fontCollection.enableFontFallback();
|
||||
}
|
||||
|
||||
for (const [index, font] of fonts.entries()) {
|
||||
await this.registerFont(font, index === 0);
|
||||
}
|
||||
|
||||
if (!this.hasAnyRegisteredFont()) {
|
||||
// CanvasKit embeds no fonts; with none registered Skia finds no glyphs and
|
||||
// measures 0 width while resolving successfully — worse than failing.
|
||||
throw new Error('No font registered; measurement would be unreliable. Pass at least one --font family=path.');
|
||||
}
|
||||
}
|
||||
|
||||
private async registerFont(font: FontSpec, isDefault: boolean): Promise<void> {
|
||||
if (!this.fontProvider) {
|
||||
throw new Error('Font provider not initialized');
|
||||
}
|
||||
const data = await readFile(font.path);
|
||||
const buffer = new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
|
||||
const result = this.fontProvider.registerFont(buffer, font.family) as null | undefined;
|
||||
if (result === null) {
|
||||
console.warn(`[CanvasKit] registerFont failed for ${font.family} (${font.path})`);
|
||||
return;
|
||||
}
|
||||
this.registeredFonts.add(font.family);
|
||||
if (font.hasWghtAxis) {
|
||||
this.wghtAxisFonts.add(font.family);
|
||||
}
|
||||
if (isDefault) {
|
||||
this.defaultFontFamily = font.family;
|
||||
}
|
||||
}
|
||||
|
||||
hasAnyRegisteredFont(): boolean {
|
||||
return this.registeredFonts.size > 0;
|
||||
}
|
||||
|
||||
getCanvasKit(): CanvasKit | null {
|
||||
return this.canvasKit;
|
||||
}
|
||||
|
||||
getFontProvider(): TypefaceFontProvider | null {
|
||||
return this.fontProvider;
|
||||
}
|
||||
|
||||
getFontCollection(): FontCollection | null {
|
||||
return this.fontCollection;
|
||||
}
|
||||
|
||||
getDefaultFontFamily(): string {
|
||||
return this.defaultFontFamily;
|
||||
}
|
||||
|
||||
isFontRegistered(fontFamily: string): boolean {
|
||||
return this.registeredFonts.has(fontFamily);
|
||||
}
|
||||
|
||||
hasWghtAxis(fontFamily: string): boolean {
|
||||
return this.wghtAxisFonts.has(fontFamily);
|
||||
}
|
||||
|
||||
dispose(): void {
|
||||
this.fontCollection?.delete();
|
||||
this.fontProvider?.delete();
|
||||
this.fontCollection = null;
|
||||
this.fontProvider = null;
|
||||
this.canvasKit = null;
|
||||
this.registeredFonts.clear();
|
||||
this.wghtAxisFonts.clear();
|
||||
}
|
||||
}
|
||||
15
skills/lark-slides/scripts/text-measure/tsconfig.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"lib": ["ES2020"],
|
||||
"types": ["node"],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"resolveJsonModule": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
354
skills/lark-slides/scripts/verify_width_calibration.py
Normal file
@@ -0,0 +1,354 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Verify character width calibration by comparing new estimates against visual evidence."""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import csv
|
||||
import sys
|
||||
import unicodedata
|
||||
from pathlib import Path
|
||||
from typing import Any
|
||||
|
||||
SCRIPT_DIR = Path(__file__).resolve().parent
|
||||
sys.path.insert(0, str(SCRIPT_DIR))
|
||||
|
||||
import xml_text_overlap_lint as lint
|
||||
|
||||
|
||||
def old_estimate_character_width(character: str, font_size: float) -> float:
|
||||
if character.isspace():
|
||||
return font_size * 0.33
|
||||
if unicodedata.east_asian_width(character) in {"F", "W"}:
|
||||
return font_size
|
||||
return font_size * 0.55
|
||||
|
||||
|
||||
def old_estimate_text_width(text: str, font_size: float) -> float:
|
||||
return sum(old_estimate_character_width(c, font_size) for c in text)
|
||||
|
||||
|
||||
def make_element(
|
||||
width: float,
|
||||
height: float,
|
||||
text: str,
|
||||
font_size: float,
|
||||
*,
|
||||
padding_left: float = 0,
|
||||
padding_right: float = 0,
|
||||
padding_top: float = 0,
|
||||
padding_bottom: float = 0,
|
||||
bold: bool = False,
|
||||
wrap: str = "true",
|
||||
auto_fit: str | None = None,
|
||||
font_family: str = "",
|
||||
) -> dict[str, Any]:
|
||||
return {
|
||||
"id": "test",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": width,
|
||||
"height": height,
|
||||
"paddingLeft": padding_left,
|
||||
"paddingRight": padding_right,
|
||||
"paddingTop": padding_top,
|
||||
"paddingBottom": padding_bottom,
|
||||
"fontSize": font_size,
|
||||
"fontFamily": font_family,
|
||||
"bold": bold,
|
||||
"italic": False,
|
||||
"text": text,
|
||||
"wrap": wrap,
|
||||
"autoFit": auto_fit,
|
||||
"letterSpacing": 0,
|
||||
"paragraphs": [
|
||||
{
|
||||
"text": p,
|
||||
"fontSize": font_size,
|
||||
"lineSpacing": None,
|
||||
"beforeLineSpacing": None,
|
||||
"afterLineSpacing": None,
|
||||
"letterSpacing": None,
|
||||
}
|
||||
for p in text.split("\n")
|
||||
if p
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
def count_chars(text: str) -> dict[str, int]:
|
||||
counts = {"cjk": 0, "upper": 0, "lower": 0, "digit": 0, "punct": 0, "space": 0}
|
||||
for c in text:
|
||||
if c.isspace():
|
||||
counts["space"] += 1
|
||||
elif unicodedata.east_asian_width(c) in {"F", "W"}:
|
||||
counts["cjk"] += 1
|
||||
elif c.isupper():
|
||||
counts["upper"] += 1
|
||||
elif c.islower():
|
||||
counts["lower"] += 1
|
||||
elif c.isdigit():
|
||||
counts["digit"] += 1
|
||||
else:
|
||||
counts["punct"] += 1
|
||||
return counts
|
||||
|
||||
|
||||
def test_case(
|
||||
name: str,
|
||||
text: str,
|
||||
available_width: float,
|
||||
font_size: float,
|
||||
*,
|
||||
expected_single_line: bool | None = None,
|
||||
note: str = "",
|
||||
) -> dict[str, Any]:
|
||||
elem = make_element(available_width, 1000, text, font_size)
|
||||
new_width = lint.estimate_text_max_line_width(elem)
|
||||
new_ratio = new_width / available_width
|
||||
new_lines = lint.estimate_text_line_count_for_text(elem, text)
|
||||
|
||||
old_width = max(old_estimate_text_width(p, font_size) for p in text.split("\n") if p)
|
||||
old_ratio = old_width / available_width
|
||||
|
||||
counts = count_chars(text)
|
||||
|
||||
result = {
|
||||
"name": name,
|
||||
"text_preview": text[:60] + ("..." if len(text) > 60 else ""),
|
||||
"font_size": font_size,
|
||||
"available_width": available_width,
|
||||
"char_counts": counts,
|
||||
"new_estimated_width": round(new_width, 2),
|
||||
"new_ratio": round(new_ratio, 4),
|
||||
"new_line_count": new_lines,
|
||||
"old_estimated_width": round(old_width, 2),
|
||||
"old_ratio": round(old_ratio, 4),
|
||||
"expected_single_line": expected_single_line,
|
||||
"note": note,
|
||||
}
|
||||
|
||||
if expected_single_line is True:
|
||||
result["new_correct"] = new_ratio <= 1.02
|
||||
result["old_correct"] = old_ratio <= 1.02
|
||||
elif expected_single_line is False:
|
||||
result["new_correct"] = new_ratio > 1.0
|
||||
result["old_correct"] = old_ratio > 1.0
|
||||
else:
|
||||
result["new_correct"] = None
|
||||
result["old_correct"] = None
|
||||
|
||||
return result
|
||||
|
||||
|
||||
def print_result(r: dict[str, Any]) -> None:
|
||||
status_new = ""
|
||||
status_old = ""
|
||||
if r["expected_single_line"] is not None:
|
||||
status_new = "✓" if r["new_correct"] else "✗"
|
||||
status_old = "✓" if r["old_correct"] else "✗"
|
||||
|
||||
print(f"--- {r['name']} {status_new} ---")
|
||||
print(f" Text: {r['text_preview']}")
|
||||
print(f" Font: {r['font_size']}pt, Available: {r['available_width']}px")
|
||||
cc = r["char_counts"]
|
||||
print(f" Chars: CJK={cc['cjk']} Upper={cc['upper']} Lower={cc['lower']} "
|
||||
f"Digit={cc['digit']} Punct={cc['punct']} Space={cc['space']}")
|
||||
print(f" NEW: width={r['new_estimated_width']}px ratio={r['new_ratio']:.4f} lines={r['new_line_count']} {status_new}")
|
||||
print(f" OLD: width={r['old_estimated_width']}px ratio={r['old_ratio']:.4f} {status_old}")
|
||||
if r["note"]:
|
||||
print(f" Note: {r['note']}")
|
||||
print()
|
||||
|
||||
|
||||
def main() -> None:
|
||||
print("=" * 70)
|
||||
print("Character Width Calibration Verification")
|
||||
print("=" * 70)
|
||||
print()
|
||||
|
||||
results = []
|
||||
|
||||
# Test cases based on visual evidence from screenshots
|
||||
# Page 17 line 2: "在 Natural Language Processing 领域,大语言模型 LLM 的出现彻底改变了人机交互方式。"
|
||||
# Visually: single line, fills ~93-95% of 800px
|
||||
results.append(test_case(
|
||||
"p17 bbR line2 (mixed CJK+English, 18pt, 800px, expected single)",
|
||||
"在 Natural Language Processing 领域,大语言模型 LLM 的出现彻底改变了人机交互方式。",
|
||||
available_width=800,
|
||||
font_size=18,
|
||||
expected_single_line=True,
|
||||
note="Visually single line, ~93% fill"
|
||||
))
|
||||
|
||||
# Page 17 line 3: "从 ChatGPT 到 文心一言,从 GPT-4 到 Claude 3,AI 助手正在成为人们工作生活的标配。"
|
||||
# Visually: single line
|
||||
results.append(test_case(
|
||||
"p17 bbR line3 (mixed CJK+English, 18pt, 800px, expected single)",
|
||||
"从 ChatGPT 到 文心一言,从 GPT-4 到 Claude 3,AI 助手正在成为人们工作生活的标配。",
|
||||
available_width=800,
|
||||
font_size=18,
|
||||
expected_single_line=True,
|
||||
note="Visually single line"
|
||||
))
|
||||
|
||||
# Page 6 paragraph 3: "中文与英文混排测试:The quick brown fox jumps over the lazy dog. 敏捷的棕色狐狸跳过了懒狗。"
|
||||
# Visually: single line, very tight (was borderline with old model)
|
||||
results.append(test_case(
|
||||
"p6 bNf para3 (mixed tight line, 18pt, 800px, expected single)",
|
||||
"中文与英文混排测试:The quick brown fox jumps over the lazy dog. 敏捷的棕色狐狸跳过了懒狗。",
|
||||
available_width=800,
|
||||
font_size=18,
|
||||
expected_single_line=True,
|
||||
note="Borderline case - visually fits on one line"
|
||||
))
|
||||
|
||||
# Page 6 paragraph 2 (English): "Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed."
|
||||
# Visually: wraps to 2 lines
|
||||
results.append(test_case(
|
||||
"p6 bNf para2 (English paragraph, 18pt, 800px, wraps)",
|
||||
"Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.",
|
||||
available_width=800,
|
||||
font_size=18,
|
||||
expected_single_line=False,
|
||||
note="Visually wraps to 2 lines"
|
||||
))
|
||||
|
||||
# Page 28 right column line 1: "This is the right column body text in 15pt size."
|
||||
# Visually: single line, ~92% fill of 400px
|
||||
results.append(test_case(
|
||||
"p28 bZQ line1 (English, 15pt, 400px, expected single)",
|
||||
"This is the right column body text in 15pt size.",
|
||||
available_width=400,
|
||||
font_size=15,
|
||||
expected_single_line=True,
|
||||
note="Visually single line, ~92% fill"
|
||||
))
|
||||
|
||||
# Page 28 right column paragraph: "Multi-column layout optimizes space and information density."
|
||||
# Visually: wraps to 2 lines ("density." on its own line)
|
||||
results.append(test_case(
|
||||
"p28 bZQ para (English, 15pt, 400px, wraps)",
|
||||
"Multi-column layout optimizes space and information density.",
|
||||
available_width=400,
|
||||
font_size=15,
|
||||
expected_single_line=False,
|
||||
note="Visually wraps - 'density.' on next line"
|
||||
))
|
||||
|
||||
# Page 28 left column line 1: "这是左栏的正文内容,使用 15pt 字号,1.7 倍行间距。"
|
||||
# Visually: single line in 420px column
|
||||
results.append(test_case(
|
||||
"p28 bZm line1 (CJK+digits, 15pt, 420px, expected single)",
|
||||
"这是左栏的正文内容,使用 15pt 字号,1.7 倍行间距。",
|
||||
available_width=420,
|
||||
font_size=15,
|
||||
expected_single_line=True,
|
||||
note="Visually single line"
|
||||
))
|
||||
|
||||
# Page 23: 2.0 line spacing body (14pt, 270px) - wraps to multiple lines
|
||||
# "这是一段测试文字,用于展示2.0倍行间距的效果。行间距较大时,文字显得疏朗透气,阅读体验轻松。适合需要留白感的设计。"
|
||||
results.append(test_case(
|
||||
"p23 bZc body (CJK+digits, 14pt, 270px, wraps)",
|
||||
"这是一段测试文字,用于展示2.0倍行间距的效果。行间距较大时,文字显得疏朗透气,阅读体验轻松。适合需要留白感的设计。",
|
||||
available_width=270,
|
||||
font_size=14,
|
||||
expected_single_line=False,
|
||||
note="Visually wraps to ~4 lines"
|
||||
))
|
||||
|
||||
# Page 21 English line: "Underline is used for links and key annotations, strikethrough for deleted content."
|
||||
# Visually: single line at 18pt in 800px, fills ~92%
|
||||
results.append(test_case(
|
||||
"p21 bbT English line (18pt, 800px, expected single)",
|
||||
"Underline is used for links and key annotations, strikethrough for deleted content.",
|
||||
available_width=800,
|
||||
font_size=18,
|
||||
expected_single_line=True,
|
||||
note="Visually single line, ~92% fill"
|
||||
))
|
||||
|
||||
# Page 12 Helvetica paragraph: "Sans-serif fonts are clean, modern, and highly legible. Widely used in UI design, branding, and digital media."
|
||||
# 16pt, 800px, wraps to 2 lines
|
||||
results.append(test_case(
|
||||
"p12 bak paragraph (English, 16pt, 800px, wraps)",
|
||||
"Sans-serif fonts are clean, modern, and highly legible. Widely used in UI design, branding, and digital media.",
|
||||
available_width=800,
|
||||
font_size=16,
|
||||
expected_single_line=False,
|
||||
note="Visually wraps to 2 lines"
|
||||
))
|
||||
|
||||
# Pure uppercase test: "ABCDEFGHIJKLMNOPQRSTUVWXYZ" at 28pt bold, should be ~50% of 800px
|
||||
results.append(test_case(
|
||||
"p12 uppercase alphabet (28pt bold, 800px, single)",
|
||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZ",
|
||||
available_width=800,
|
||||
font_size=28,
|
||||
expected_single_line=True,
|
||||
note="Centered test string, ~50% width"
|
||||
))
|
||||
|
||||
# Pure lowercase test: "abcdefghijklmnopqrstuvwxyz" at 28pt
|
||||
results.append(test_case(
|
||||
"p12 lowercase alphabet (28pt bold, 800px, single)",
|
||||
"abcdefghijklmnopqrstuvwxyz",
|
||||
available_width=800,
|
||||
font_size=28,
|
||||
expected_single_line=True,
|
||||
note="Centered test string, similar width to uppercase"
|
||||
))
|
||||
|
||||
# Digits+symbols: "0123456789!@#$%^&*()" at 28pt, shorter than alphabets
|
||||
results.append(test_case(
|
||||
"p12 digits+symbols (28pt bold, 800px, single)",
|
||||
"0123456789!@#$%^&*()",
|
||||
available_width=800,
|
||||
font_size=28,
|
||||
expected_single_line=True,
|
||||
note="Shorter than alphabet lines"
|
||||
))
|
||||
|
||||
for r in results:
|
||||
print_result(r)
|
||||
|
||||
# Summary statistics
|
||||
print("=" * 70)
|
||||
print("SUMMARY")
|
||||
print("=" * 70)
|
||||
new_correct = sum(1 for r in results if r["new_correct"] is True)
|
||||
old_correct = sum(1 for r in results if r["old_correct"] is True)
|
||||
total_evaluated = sum(1 for r in results if r["expected_single_line"] is not None)
|
||||
print(f"Test cases with known expectation: {total_evaluated}")
|
||||
print(f"New model correct: {new_correct}/{total_evaluated}")
|
||||
print(f"Old model correct: {old_correct}/{total_evaluated}")
|
||||
print()
|
||||
|
||||
# Show ratio distribution for single-line cases
|
||||
print("Single-line cases (ratio should be 0.85-1.02):")
|
||||
for r in results:
|
||||
if r["expected_single_line"] is True:
|
||||
print(f" {r['name'][:50]:50s} new_ratio={r['new_ratio']:.4f} old_ratio={r['old_ratio']:.4f}")
|
||||
print()
|
||||
|
||||
print("Wrapping cases (ratio should be >1.0):")
|
||||
for r in results:
|
||||
if r["expected_single_line"] is False:
|
||||
print(f" {r['name'][:50]:50s} new_ratio={r['new_ratio']:.4f} old_ratio={r['old_ratio']:.4f}")
|
||||
print()
|
||||
|
||||
# Check for tight_single samples (0.85-1.0) ratio target
|
||||
tight_single = [r for r in results if r["expected_single_line"] is True and r["new_ratio"] >= 0.80]
|
||||
if tight_single:
|
||||
avg_new_ratio = sum(r["new_ratio"] for r in tight_single) / len(tight_single)
|
||||
avg_old_ratio = sum(r["old_ratio"] for r in tight_single) / len(tight_single)
|
||||
print(f"Average ratio for near-full single lines:")
|
||||
print(f" New model: {avg_new_ratio:.4f}")
|
||||
print(f" Old model: {avg_old_ratio:.4f}")
|
||||
print(f" Target: ~0.90-0.98 (some margin but mostly filled)")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
159
skills/lark-slides/scripts/width_measurement_data.csv
Normal file
@@ -0,0 +1,159 @@
|
||||
slide_number,slide_id,element_id,x,y,shape_width,shape_height,padding_left,padding_right,available_width,font_size,font_family,bold,italic,wrap,auto_fit,text_align,text_clean,text_length,text_type,is_single_line_hard,estimated_width,width_ratio,likely_wraps_actual,notes
|
||||
1,pmm,bNA,80,160,800,120,0,0,800,64,思源黑体,true,false,true,none,center,字体排版测试样张,8,中文,true,512,0.64,no_slack,估算宽度 < 70% 可用宽度(0.64),明显有留白
|
||||
1,pmm,bNj,80,300,800,60,0,0,800,24,思源黑体,true,false,true,none,center,TypographyTestSample·30Pages,28,英文+数字,true,369.6,0.462,no_slack,估算宽度 < 70% 可用宽度(0.46),明显有留白
|
||||
1,pmm,bNV,80,420,800,40,0,0,800,16,思源黑体,false,false,true,none,center,包含字号/字体/中英文/数字/样式/间距/颜色等全面测试,28,中文,true,404.8,0.506,no_slack,估算宽度 < 70% 可用宽度(0.51),明显有留白
|
||||
2,pmZ,bNt,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,02·超大字号测试72pt,13,中文+英文+数字,true,275.8,0.3283,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
2,pmZ,bNh,60,140,840,110,0,0,840,72,思源黑体,true,false,true,none,center,汉字测试ABC123,10,中文+英文+数字,true,525.6,0.6257,no_slack,估算宽度 < 70% 可用宽度(0.63),明显有留白
|
||||
2,pmZ,bNn,60,270,840,100,0,0,840,72,思源黑体,true,false,true,none,center,排版设计Typography,14,中文+英文,true,684.0,0.8143,no,估算宽度 0.81x 可用宽度,大概率单行
|
||||
2,pmZ,bNk,60,400,840,60,0,0,840,14,思源黑体,false,false,true,none,center,72pt超大字号·用于标题展示·测试字重与字间距,24,中文+英文+数字,true,298.2,0.355,no_slack,估算宽度 < 70% 可用宽度(0.35),明显有留白
|
||||
3,pmY,bNw,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,03·大字号测试48pt,12,中文+英文+数字,true,247.8,0.295,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
3,pmY,bNv,60,130,840,80,0,0,840,48,思源黑体,true,false,true,none,center,中华人民共和国2024,11,中文+数字,true,441.6,0.5257,no_slack,估算宽度 < 70% 可用宽度(0.53),明显有留白
|
||||
3,pmY,bNe,60,230,840,80,0,0,840,48,思源黑体,true,false,true,none,center,TheQuickBrownFox,16,英文,true,422.4,0.5029,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
3,pmY,bNz,60,330,840,80,0,0,840,48,思源黑体,true,false,true,none,center,0123456789数字测试,14,中文+数字,true,456.0,0.5429,no_slack,估算宽度 < 70% 可用宽度(0.54),明显有留白
|
||||
3,pmY,bNp,60,440,840,50,0,0,840,14,思源黑体,false,false,true,none,center,48pt大字号·常用于主标题·中英文数字混排测试,24,中文+英文+数字,true,298.2,0.355,no_slack,估算宽度 < 70% 可用宽度(0.35),明显有留白
|
||||
4,pma,bNc,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,04·中大号字号测试36pt,14,中文+英文+数字,true,303.8,0.3617,no_slack,估算宽度 < 70% 可用宽度(0.36),明显有留白
|
||||
4,pma,bNZ,80,130,800,60,0,0,800,36,思源黑体,true,false,true,none,,科技创新驱动未来发展Innovation,20,中文+英文,true,558.0,0.6975,no_slack,估算宽度 < 70% 可用宽度(0.70),明显有留白
|
||||
4,pma,bNd,80,210,800,60,0,0,800,36,思源黑体,true,false,true,none,,人工智能改变生活方式AI2024,16,中文+英文+数字,true,478.8,0.5985,no_slack,估算宽度 < 70% 可用宽度(0.60),明显有留白
|
||||
4,pma,bNB,80,290,800,60,0,0,800,36,思源黑体,true,false,true,none,,数据可视化DataVisualization,22,中文+英文,true,516.6,0.6458,no_slack,估算宽度 < 70% 可用宽度(0.65),明显有留白
|
||||
4,pma,bNN,80,370,800,60,0,0,800,36,思源黑体,true,false,true,none,,云计算CloudComputing99%,20,中文+英文+数字,true,444.6,0.5558,no_slack,估算宽度 < 70% 可用宽度(0.56),明显有留白
|
||||
4,pma,bNb,80,450,800,40,0,0,800,14,思源黑体,false,false,true,none,center,36pt中大号·副标题级·多行对比测试,19,中文+英文+数字,true,228.2,0.2853,no_slack,估算宽度 < 70% 可用宽度(0.29),明显有留白
|
||||
5,pmW,bNs,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,05·中号字号测试28pt,13,中文+英文+数字,true,275.8,0.3283,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
5,pmW,bNT,80,120,800,50,0,0,800,28,思源黑体,true,false,true,none,,一、项目背景与目标Background,19,中文+英文,true,406.0,0.5075,no_slack,估算宽度 < 70% 可用宽度(0.51),明显有留白
|
||||
5,pmW,bNI,80,185,800,50,0,0,800,28,思源黑体,true,false,true,none,,二、市场分析与调研Market2024,19,中文+英文+数字,true,406.0,0.5075,no_slack,估算宽度 < 70% 可用宽度(0.51),明显有留白
|
||||
5,pmW,bNY,80,250,800,50,0,0,800,28,思源黑体,true,false,true,none,,三、技术方案与架构Technology,19,中文+英文,true,406.0,0.5075,no_slack,估算宽度 < 70% 可用宽度(0.51),明显有留白
|
||||
5,pmW,bNq,80,315,800,50,0,0,800,28,思源黑体,true,false,true,none,,四、实施计划与时间表Plan12月,17,中文+英文+数字,true,400.4,0.5005,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
5,pmW,bNr,80,380,800,50,0,0,800,28,思源黑体,true,false,true,none,,五、预期效果与收益BenefitROI,19,中文+英文,true,406.0,0.5075,no_slack,估算宽度 < 70% 可用宽度(0.51),明显有留白
|
||||
5,pmW,bNM,80,450,800,40,0,0,800,14,思源黑体,false,false,true,none,center,28pt中号·章节标题级·目录式排列测试,20,中文+英文+数字,true,242.2,0.3027,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
6,pmL,bNO,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,06·正文字号测试18pt,13,中文+英文+数字,true,275.8,0.3283,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
6,pmL,bNf,80,120,800,320,0,0,800,18,思源黑体,false,false,true,none,,"这是一段正文测试文字,使用18pt字号,是幻灯片中最常用的正文字号。Typographyistheartandtechniqueofarrangingtypetomakewrittenlanguagelegible,readable,andappealingwhendisplayed.中文与英文混排测试:Thequickbrownfoxjumpsoverthelazydog.敏捷的棕色狐狸跳过了懒狗。数字测试:2024年12月25日,增长率12.5%,用户数1,234,567人。",242,中文+英文+数字,false,1079.1,1.3489,likely_wrap,估算宽度 1.35x 可用宽度,大概率换2行
|
||||
6,pmL,bNE,80,460,800,30,0,0,800,14,思源黑体,false,false,true,none,center,18pt正文·行间距1.8倍·中英文数字混排,22,中文+英文+数字,true,251.3,0.3141,no_slack,估算宽度 < 70% 可用宽度(0.31),明显有留白
|
||||
7,pmy,bNK,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,07·小号字号测试14pt,13,中文+英文+数字,true,275.8,0.3283,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
7,pmy,bNU,80,120,800,340,0,0,800,14,思源黑体,false,false,true,none,,"小号正文测试14pt这是一段使用14pt字号的正文文字,适合用于内容较多的页面或说明性文字。在信息密度较高的幻灯片中,14pt是一个兼顾可读性与信息量的选择。Thisisaparagraphofbodytextin14ptsize.Itiscommonlyusedfordetaileddescriptions,footnotes,orcontent-heavyslideswhereinformationdensitymatters.中英文数字混排:2024年度报告显示,公司营收达到1,234.56万元,同比增长23.45%,用户满意度98.6%。常用标点符号测试:逗号,句号。感叹号!问号?冒号:分号;引号""""括号()省略号……破折号——",322,中文+英文+数字,false,1070.3,1.3379,likely_wrap,估算宽度 1.34x 可用宽度,大概率换2行
|
||||
7,pmy,bNF,80,475,800,30,0,0,800,12,思源黑体,false,false,true,none,center,14pt小号正文·行间距1.6倍·高密度信息展示,24,中文+英文+数字,true,239.4,0.2992,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
8,pmX,bNX,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,08·极小字号测试10pt,13,中文+英文+数字,true,275.8,0.3283,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
8,pmX,bNm,80,120,800,360,0,0,800,10,思源黑体,false,false,true,none,,"极小字号测试10pt—用于脚注、注释、数据来源说明等本页测试10pt极小字号的可读性。在正式演示中,10pt通常仅用于数据来源标注、脚注说明、版权信息等非核心内容,不建议用于正文。Datasource:NationalBureauofStatistics,2024AnnualReport.AllfiguresareinRMB10,000unlessotherwisenoted.Growthratesarecalculatedyear-over-year.数据来源:国家统计局2024年度报告。所有金额单位为万元,另有说明除外。增长率按同比计算。样本量n=10,234,置信区间95%。©2024TypographyTestLab.Allrightsreserved.版权所有,翻印必究。",345,中文+英文+数字,false,764.5,0.9556,tight_single,估算宽度 0.96x 可用宽度,接近填满,需确认是否单行
|
||||
8,pmX,bNl,80,490,800,30,0,0,800,10,思源黑体,false,false,true,none,center,10pt极小字号·脚注/注释级·测试极限可读性,23,中文+英文+数字,true,198.5,0.2481,no_slack,估算宽度 < 70% 可用宽度(0.25),明显有留白
|
||||
9,pmE,baa,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,09·字号阶梯对比测试,11,中文+数字,true,270.2,0.3217,no_slack,估算宽度 < 70% 可用宽度(0.32),明显有留白
|
||||
9,pmE,bao,100,115,760,70,0,0,760,60,思源黑体,true,false,true,none,,60pt标题字号Title,13,中文+英文+数字,true,537.0,0.7066,no,估算宽度 0.71x 可用宽度,大概率单行
|
||||
9,pmE,bac,100,185,760,55,0,0,760,44,思源黑体,true,false,true,none,,44pt大标题Headline,15,中文+英文+数字,true,422.4,0.5558,no_slack,估算宽度 < 70% 可用宽度(0.56),明显有留白
|
||||
9,pmE,bNg,100,245,760,45,0,0,760,32,思源黑体,true,false,true,none,,32pt副标题Sub-headline,19,中文+英文+数字,true,377.6,0.4968,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
9,pmE,bNL,100,295,760,38,0,0,760,24,思源黑体,false,false,true,none,,24pt小标题Section,14,中文+英文+数字,true,217.2,0.2858,no_slack,估算宽度 < 70% 可用宽度(0.29),明显有留白
|
||||
9,pmE,baN,100,340,760,32,0,0,760,18,思源黑体,false,false,true,none,,18pt正文字号BodyText,16,中文+英文+数字,true,190.8,0.2511,no_slack,估算宽度 < 70% 可用宽度(0.25),明显有留白
|
||||
9,pmE,bab,100,380,760,28,0,0,760,14,思源黑体,false,false,true,none,,14pt小号正文SmallBody,17,中文+英文+数字,true,156.1,0.2054,no_slack,估算宽度 < 70% 可用宽度(0.21),明显有留白
|
||||
9,pmE,bad,100,415,760,24,0,0,760,11,思源黑体,false,false,true,none,,11pt注释字号Caption/Footnote,24,中文+英文+数字,true,165.0,0.2171,no_slack,估算宽度 < 70% 可用宽度(0.22),明显有留白
|
||||
9,pmE,baB,100,455,760,30,0,0,760,13,思源黑体,false,false,true,none,center,从60pt到11pt·七级字号阶梯对比·一目了然,24,中文+英文+数字,true,253.5,0.3336,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
10,pms,baw,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,10·中文字体测试·黑体,12,中文+数字,true,285.6,0.34,no_slack,估算宽度 < 70% 可用宽度(0.34),明显有留白
|
||||
10,pms,bav,80,120,800,80,0,0,800,48,思源黑体,true,false,true,none,center,思源黑体SourceHanSans,17,中文+英文,true,535.2,0.669,no_slack,估算宽度 < 70% 可用宽度(0.67),明显有留白
|
||||
10,pms,bae,80,220,800,60,0,0,800,32,思源黑体,true,false,true,none,center,现代简洁清晰易读专业稳重,12,中文,true,384,0.48,no_slack,估算宽度 < 70% 可用宽度(0.48),明显有留白
|
||||
10,pms,baz,80,300,800,150,0,0,800,18,思源黑体,false,false,true,none,center,黑体字笔画均匀、结构方正,具有现代感和力量感。广泛应用于标题、标语、UI界面等场景。Thequickbrownfoxjumpsoverthelazydog.0123456789,88,中文+英文+数字,false,455.4,0.5692,no_slack,估算宽度 < 70% 可用宽度(0.57),明显有留白
|
||||
10,pms,bap,80,470,800,30,0,0,800,12,思源黑体,false,false,true,none,center,思源黑体·无衬线中文字体·现代商务风格首选,21,中文,true,241.2,0.3015,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
11,pmV,baA,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,11·中文字体测试·宋体,12,中文+数字,true,285.6,0.34,no_slack,估算宽度 < 70% 可用宽度(0.34),明显有留白
|
||||
11,pmV,baj,80,120,800,80,0,0,800,48,思源宋体,true,false,true,none,center,思源宋体SourceHanSerif,18,中文+英文,true,561.6,0.702,no,估算宽度 0.70x 可用宽度,大概率单行
|
||||
11,pmV,bau,80,220,800,60,0,0,800,32,思源宋体,true,false,true,none,center,典雅端庄文化底蕴传统韵味,12,中文,true,384,0.48,no_slack,估算宽度 < 70% 可用宽度(0.48),明显有留白
|
||||
11,pmV,baW,80,300,800,150,0,0,800,18,思源宋体,false,false,true,none,center,宋体字横细竖粗,笔画末端有装饰性衬线,具有传统文化气息,适合正式、庄重的场合。Thequickbrownfoxjumpsoverthelazydog.0123456789,85,中文+英文+数字,false,455.4,0.5692,no_slack,估算宽度 < 70% 可用宽度(0.57),明显有留白
|
||||
11,pmV,baJ,80,470,800,30,0,0,800,12,思源黑体,false,false,true,none,center,思源宋体·衬线中文字体·学术文化风格首选,20,中文,true,229.2,0.2865,no_slack,估算宽度 < 70% 可用宽度(0.29),明显有留白
|
||||
12,pmD,ban,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,12·英文字体测试·无衬线体,14,中文+数字,true,341.6,0.4067,no_slack,估算宽度 < 70% 可用宽度(0.41),明显有留白
|
||||
12,pmD,bay,80,120,800,80,0,0,800,52,Helvetica,true,false,true,none,center,HelveticaNeue,13,英文,true,371.8,0.4648,no_slack,估算宽度 < 70% 可用宽度(0.46),明显有留白
|
||||
12,pmD,baf,80,210,800,50,0,0,800,28,Helvetica,true,false,true,none,center,ABCDEFGHIJKLMNOPQRSTUVWXYZ,26,英文,true,400.4,0.5005,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
12,pmD,baU,80,265,800,50,0,0,800,28,Helvetica,true,false,true,none,center,abcdefghijklmnopqrstuvwxyz,26,英文,true,400.4,0.5005,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
12,pmD,bah,80,320,800,50,0,0,800,28,Helvetica,true,false,true,none,center,0123456789!@#$%^&*(),20,数字,true,308.0,0.385,no_slack,估算宽度 < 70% 可用宽度(0.39),明显有留白
|
||||
12,pmD,bak,80,390,800,60,0,0,800,16,Helvetica,false,false,true,none,center,"Sans-seriffontsareclean,modern,andhighlylegible.WidelyusedinUIdesign,branding,anddigitalmedia.",94,英文,false,422.4,0.528,no_slack,估算宽度 < 70% 可用宽度(0.53),明显有留白
|
||||
12,pmD,baO,80,475,800,30,0,0,800,12,思源黑体,false,false,true,none,center,无衬线体Sans-serif·现代简洁·数字界面首选,26,中文+英文,true,247.2,0.309,no_slack,估算宽度 < 70% 可用宽度(0.31),明显有留白
|
||||
13,pmA,bai,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,13·英文字体测试·衬线体,13,中文+数字,true,313.6,0.3733,no_slack,估算宽度 < 70% 可用宽度(0.37),明显有留白
|
||||
13,pmA,bam,80,120,800,80,0,0,800,52,Georgia,true,false,true,none,center,GeorgiaSerif,12,英文,true,343.2,0.429,no_slack,估算宽度 < 70% 可用宽度(0.43),明显有留白
|
||||
13,pmA,bal,80,210,800,50,0,0,800,28,Georgia,true,false,true,none,center,ABCDEFGHIJKLMNOPQRSTUVWXYZ,26,英文,true,400.4,0.5005,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
13,pmA,baq,80,265,800,50,0,0,800,28,Georgia,true,false,true,none,center,abcdefghijklmnopqrstuvwxyz,26,英文,true,400.4,0.5005,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
13,pmA,bar,80,320,800,50,0,0,800,28,Georgia,true,false,true,none,center,0123456789!@#$%^&*(),20,数字,true,308.0,0.385,no_slack,估算宽度 < 70% 可用宽度(0.39),明显有留白
|
||||
13,pmA,baM,80,390,800,60,0,0,800,16,Georgia,false,false,true,none,center,"Seriffontshavesmalllinesattheendsofcharacters,conveyingtradition,elegance,andauthority.",87,英文,false,404.8,0.506,no_slack,估算宽度 < 70% 可用宽度(0.51),明显有留白
|
||||
13,pmA,baC,80,475,800,30,0,0,800,12,思源黑体,false,false,true,none,center,衬线体Serif·优雅传统·印刷出版首选,20,中文+英文,true,202.2,0.2527,no_slack,估算宽度 < 70% 可用宽度(0.25),明显有留白
|
||||
14,pmi,baY,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,14·数字测试·阿拉伯数字,13,中文+数字,true,313.6,0.3733,no_slack,估算宽度 < 70% 可用宽度(0.37),明显有留白
|
||||
14,pmi,baK,80,120,800,100,0,0,800,72,思源黑体,true,false,true,none,center,0123456789,10,数字,true,396.0,0.495,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
14,pmi,baP,80,240,800,60,0,0,800,36,思源黑体,true,false,true,none,center,0123456789零壹贰叁肆伍陆柒捌玖,20,中文+数字,true,558.0,0.6975,no_slack,估算宽度 < 70% 可用宽度(0.70),明显有留白
|
||||
14,pmi,bax,80,320,800,120,0,0,800,20,思源黑体,false,false,true,none,center,"金额:¥12,345,678.90元百分比:99.99%增长率:+23.45%日期:2024-12-25时间:14:30:00",63,中文+数字,false,318.0,0.3975,no_slack,估算宽度 < 70% 可用宽度(0.40),明显有留白
|
||||
14,pmi,baD,80,460,800,30,0,0,800,12,思源黑体,false,false,true,none,center,阿拉伯数字·等宽比例·金额/百分比/日期格式测试,24,中文,true,266.4,0.333,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
15,pmK,bag,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,15·数字测试·中文数字,12,中文+数字,true,285.6,0.34,no_slack,估算宽度 < 70% 可用宽度(0.34),明显有留白
|
||||
15,pmK,bba,80,120,800,80,0,0,800,48,思源黑体,true,false,true,none,center,小写:〇一二三四五六七八九十,14,中文,true,672,0.84,no,估算宽度 0.84x 可用宽度,大概率单行
|
||||
15,pmK,baX,80,210,800,80,0,0,800,48,思源黑体,true,false,true,none,center,大写:零壹贰叁肆伍陆柒捌玖拾,14,中文,true,672,0.84,no,估算宽度 0.84x 可用宽度,大概率单行
|
||||
15,pmK,baG,80,310,800,130,0,0,800,20,思源黑体,false,false,true,none,center,人民币壹佰贰拾叁万肆仟伍佰陆拾柒元捌角玖分二千零二十四年十二月二十五日第一百二十届第三季度百分之八十五,51,中文,false,420,0.525,no_slack,估算宽度 < 70% 可用宽度(0.53),明显有留白
|
||||
15,pmK,bbN,80,465,800,30,0,0,800,12,思源黑体,false,false,true,none,center,中文数字·大小写·财务/正式文书场景,18,中文,true,199.8,0.2497,no_slack,估算宽度 < 70% 可用宽度(0.25),明显有留白
|
||||
16,pmQ,bbc,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,16·数字测试·罗马数字,12,中文+数字,true,285.6,0.34,no_slack,估算宽度 < 70% 可用宽度(0.34),明显有留白
|
||||
16,pmQ,bbd,80,130,800,80,0,0,800,48,思源黑体,true,false,true,none,center,IIIIIIIVVVIVIIVIIIIXX,21,英文,true,554.4,0.693,no_slack,估算宽度 < 70% 可用宽度(0.69),明显有留白
|
||||
16,pmQ,bbB,80,225,800,60,0,0,800,36,思源黑体,true,false,true,none,center,XLLXCCCDDCMM,12,英文,true,237.6,0.297,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
16,pmQ,bbv,80,300,800,140,0,0,800,20,思源黑体,false,false,true,none,center,ChapterXXIV·VolumeIII·EditionIXKingHenryVIII·PopeJohnPaulII第XXI届冬季奥林匹克运动会·第III季度报告MMXXIV年·MCMLXXI年,98,中文+英文,false,397.0,0.4963,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
16,pmQ,bbb,80,465,800,30,0,0,800,12,思源黑体,false,false,true,none,center,罗马数字·古典风格·章节编号/正式命名场景,21,中文,true,235.8,0.2947,no_slack,估算宽度 < 70% 可用宽度(0.29),明显有留白
|
||||
17,pme,bbe,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,17·中英文混排测试,10,中文+数字,true,242.2,0.2883,no_slack,估算宽度 < 70% 可用宽度(0.29),明显有留白
|
||||
17,pme,bbz,80,120,800,60,0,0,800,32,思源黑体,true,false,true,none,center,人工智能ArtificialIntelligence技术,28,中文+英文,true,579.2,0.724,no,估算宽度 0.72x 可用宽度,大概率单行
|
||||
17,pme,bbR,80,200,800,200,0,0,800,18,思源黑体,false,false,true,none,,随着AI技术的快速发展,MachineLearning与DeepLearning已经渗透到各行各业。在NaturalLanguageProcessing领域,大语言模型LLM的出现彻底改变了人机交互方式。从ChatGPT到文心一言,从GPT-4到Claude3,AI助手正在成为人们工作生活的标配。2024年被称为AI应用元年,GenerativeAI创造了无限可能。,184,中文+英文+数字,false,709.2,0.8865,tight_single,估算宽度 0.89x 可用宽度,接近填满,需确认是否单行
|
||||
17,pme,bbp,80,420,800,60,0,0,800,16,思源黑体,false,false,true,none,center,"测试中英文之间的间距、基线对齐、字号协调等混排效果Testingspacing,baselinealignment,andsizeharmonybetweenCJKandLatinscripts",97,中文+英文,false,633.6,0.792,no,估算宽度 0.79x 可用宽度,大概率单行
|
||||
18,pmF,bbj,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,18·中英文数字混排测试,12,中文+数字,true,298.2,0.355,no_slack,估算宽度 < 70% 可用宽度(0.35),明显有留白
|
||||
18,pmF,bbu,80,115,800,55,0,0,800,28,思源黑体,true,false,true,none,,2024Q4季度业绩报告QuarterlyReport,27,中文+英文+数字,true,491.4,0.6142,no_slack,估算宽度 < 70% 可用宽度(0.61),明显有留白
|
||||
18,pmF,bbA,80,180,800,250,0,0,800,17,思源黑体,false,false,true,none,,"核心数据KeyMetrics:总营收Revenue:¥1,234.56万元,同比增长+23.45%用户数Users:567,890人,月活MAU达89%净利润NetProfit:¥234.56万元,利润率19.0%客户满意度CSAT:4.8/5.0分,NPS达72产品迭代Version:v3.2.1,发布于2024-12-15",164,中文+英文+数字,false,402.05,0.5026,no_slack,估算宽度 < 70% 可用宽度(0.50),明显有留白
|
||||
18,pmF,bbW,80,450,800,40,0,0,800,14,思源黑体,false,false,true,none,center,中文+英文+数字+符号+列表·综合混排测试,21,中文,true,262.5,0.3281,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
19,pmz,bbD,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,19·字重测试·粗体Bold,14,中文+英文+数字,true,291.2,0.3467,no_slack,估算宽度 < 70% 可用宽度(0.35),明显有留白
|
||||
19,pmz,bbs,80,120,380,60,0,0,380,32,思源黑体,true,false,true,none,,常规Regular,9,中文+英文,true,187.2,0.4926,no_slack,估算宽度 < 70% 可用宽度(0.49),明显有留白
|
||||
19,pmz,bbF,500,120,380,60,0,0,380,32,思源黑体,true,false,true,none,,粗体Bold,6,中文+英文,true,134.4,0.3537,no_slack,估算宽度 < 70% 可用宽度(0.35),明显有留白
|
||||
19,pmz,bbK,80,200,380,60,0,0,380,32,思源黑体,true,false,true,none,,正常字重400,7,中文+数字,true,180.8,0.4758,no_slack,估算宽度 < 70% 可用宽度(0.48),明显有留白
|
||||
19,pmz,bbI,500,200,380,60,0,0,380,32,思源黑体,true,false,true,none,,加粗字重700,7,中文+数字,true,180.8,0.4758,no_slack,估算宽度 < 70% 可用宽度(0.48),明显有留白
|
||||
19,pmz,bbY,80,290,800,150,0,0,800,18,思源黑体,false,false,true,none,,"在正文中,粗体文字用于强调关键信息,引导读者视线。Inbodytext,boldtexthighlightskeyinformationandguidesthereader.数字加粗:1234567890对比常规:1234567890",117,中文+英文+数字,false,613.8,0.7672,no,估算宽度 0.77x 可用宽度,大概率单行
|
||||
19,pmz,bbU,80,460,800,30,0,0,800,12,思源黑体,false,false,true,none,center,粗体vs常规·字重对比·强调效果测试,18,中文+英文,true,194.4,0.243,no_slack,估算宽度 < 70% 可用宽度(0.24),明显有留白
|
||||
20,pmd,bbE,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,20·字体样式测试·斜体Italic,18,中文+英文+数字,true,378.0,0.45,no_slack,估算宽度 < 70% 可用宽度(0.45),明显有留白
|
||||
20,pmd,bbS,80,120,380,60,0,0,380,32,思源黑体,true,false,true,none,,正体Upright,9,中文+英文,true,187.2,0.4926,no_slack,估算宽度 < 70% 可用宽度(0.49),明显有留白
|
||||
20,pmd,bbk,500,120,380,60,0,0,380,32,思源黑体,true,true,true,none,,斜体Italic,8,中文+英文,true,169.6,0.4463,no_slack,估算宽度 < 70% 可用宽度(0.45),明显有留白
|
||||
20,pmd,bbO,80,200,380,60,0,0,380,32,思源黑体,true,false,true,none,,NormalText,10,英文,true,176.0,0.4632,no_slack,估算宽度 < 70% 可用宽度(0.46),明显有留白
|
||||
20,pmd,bbf,500,200,380,60,0,0,380,32,思源黑体,true,true,true,none,,ItalicText,10,英文,true,176.0,0.4632,no_slack,估算宽度 < 70% 可用宽度(0.46),明显有留白
|
||||
20,pmd,bbJ,80,290,800,150,0,0,800,18,思源黑体,false,false,true,none,,"斜体常用于引用、书名、外来词等场景,增添文字的韵律感。Italictextisoftenusedforquotes,booktitles,andforeignwords.数字斜体:1234567890对比正体:1234567890",115,中文+英文+数字,false,574.2,0.7177,no,估算宽度 0.72x 可用宽度,大概率单行
|
||||
20,pmd,bbn,80,460,800,30,0,0,800,12,思源黑体,false,false,true,none,center,斜体vs正体·引用/书名/强调场景,17,中文+英文,true,177.0,0.2213,no_slack,估算宽度 < 70% 可用宽度(0.22),明显有留白
|
||||
21,pmG,bbM,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,21·文字装饰测试·下划线/删除线,17,中文+数字,true,413.0,0.4917,no_slack,估算宽度 < 70% 可用宽度(0.49),明显有留白
|
||||
21,pmG,bbq,80,120,800,60,0,0,800,32,思源黑体,true,false,true,none,center,下划线文字UnderlineText,18,中文+英文,true,388.8,0.486,no_slack,估算宽度 < 70% 可用宽度(0.49),明显有留白
|
||||
21,pmG,bbi,80,200,800,60,0,0,800,32,思源黑体,true,false,true,none,center,删除线文字StrikethroughText,22,中文+英文,true,459.2,0.574,no_slack,估算宽度 < 70% 可用宽度(0.57),明显有留白
|
||||
21,pmG,bbT,80,290,800,150,0,0,800,18,思源黑体,false,false,true,none,,"下划线常用于链接、重点标注等场景,删除线用于表示已删除或作废的内容。Underlineisusedforlinksandkeyannotations,strikethroughfordeletedcontent.组合效果:加粗加下划线·斜体加下划线",124,中文+英文,false,712.8,0.891,tight_single,估算宽度 0.89x 可用宽度,接近填满,需确认是否单行
|
||||
21,pmG,bbC,80,460,800,30,0,0,800,12,思源黑体,false,false,true,none,center,下划线·删除线·组合样式测试,14,中文,true,157.2,0.1965,no_slack,估算宽度 < 70% 可用宽度(0.20),明显有留白
|
||||
22,pmq,bZa,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,22·字间距测试LetterSpacing,21,中文+英文+数字,true,386.4,0.46,no_slack,估算宽度 < 70% 可用宽度(0.46),明显有留白
|
||||
22,pmq,bbg,80,120,800,50,0,0,800,28,思源黑体,true,false,true,none,center,紧凑字间距-2pxTight,14,中文+英文+数字,true,278.6,0.3483,no_slack,估算宽度 < 70% 可用宽度(0.35),明显有留白
|
||||
22,pmq,bbG,80,185,800,50,0,0,800,28,思源黑体,true,false,true,none,center,正常字间距0pxNormal,14,中文+英文+数字,true,278.6,0.3483,no_slack,估算宽度 < 70% 可用宽度(0.35),明显有留白
|
||||
22,pmq,bZN,80,250,800,50,0,0,800,28,思源黑体,true,false,true,none,center,宽松字间距3pxLoose,13,中文+英文+数字,true,263.2,0.329,no_slack,估算宽度 < 70% 可用宽度(0.33),明显有留白
|
||||
22,pmq,bZb,80,315,800,50,0,0,800,28,思源黑体,true,false,true,none,center,超宽字间距8pxWide,12,中文+英文+数字,true,247.8,0.3098,no_slack,估算宽度 < 70% 可用宽度(0.31),明显有留白
|
||||
22,pmq,bbl,80,390,800,80,0,0,800,16,思源黑体,false,false,true,none,center,字间距影响文字的呼吸感和阅读节奏标题常用宽松字间距营造高级感,正文用正常字间距保证可读性,44,中文,false,448,0.56,no_slack,估算宽度 < 70% 可用宽度(0.56),明显有留白
|
||||
22,pmq,bbX,80,485,800,25,0,0,800,11,思源黑体,false,false,true,none,center,从-2px到8px·四级字间距对比,17,中文+英文+数字,true,147.4,0.1842,no_slack,估算宽度 < 70% 可用宽度(0.18),明显有留白
|
||||
23,pmS,bZB,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,23·行间距测试LineSpacing,19,中文+英文+数字,true,355.6,0.4233,no_slack,估算宽度 < 70% 可用宽度(0.42),明显有留白
|
||||
23,pmS,bZZ,60,115,270,340,0,0,270,14,思源黑体,false,false,true,none,,1.0倍行距这是一段测试文字,用于展示1.0倍行间距的效果。行间距较小时,文字显得紧凑,但可能影响可读性。紧凑排版适合空间有限的场景。,67,中文+数字,false,639.1,2.367,yes,估算宽度 2.37x 可用宽度,肯定换行(多行)
|
||||
23,pmS,bZo,345,115,270,340,0,0,270,14,思源黑体,false,false,true,none,,1.5倍行距这是一段测试文字,用于展示1.5倍行间距的效果。这是最常用的行间距设置,兼顾可读性和信息密度。适合大多数正文排版场景。,65,中文+数字,false,639.1,2.367,yes,估算宽度 2.37x 可用宽度,肯定换行(多行)
|
||||
23,pmS,bZc,630,115,270,340,0,0,270,14,思源黑体,false,false,true,none,,2.0倍行距这是一段测试文字,用于展示2.0倍行间距的效果。行间距较大时,文字显得疏朗透气,阅读体验轻松。适合需要留白感的设计。,64,中文+数字,false,322,1.1926,borderline,估算宽度 1.19x 可用宽度,边界情况,需截图确认是否换行
|
||||
23,pmS,bZH,60,475,840,30,0,0,840,12,思源黑体,false,false,true,none,center,1.0/1.5/2.0倍行距对比·三列并排展示,23,中文+数字,true,211.2,0.2514,no_slack,估算宽度 < 70% 可用宽度(0.25),明显有留白
|
||||
24,pmM,bZR,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,24·对齐方式测试Alignment,18,中文+英文+数字,true,352.8,0.42,no_slack,估算宽度 < 70% 可用宽度(0.42),明显有留白
|
||||
24,pmM,bZu,80,115,800,50,0,0,800,24,思源黑体,true,false,true,none,left,←左对齐LeftAlign,13,中文+英文,true,204.0,0.255,no_slack,估算宽度 < 70% 可用宽度(0.25),明显有留白
|
||||
24,pmM,bZe,80,180,800,50,0,0,800,24,思源黑体,true,false,true,none,center,居中对齐CenterAlign,15,中文+英文,true,241.2,0.3015,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
24,pmM,bZz,80,245,800,50,0,0,800,24,思源黑体,true,false,true,none,right,右对齐RightAlign→,14,中文+英文,true,217.2,0.2715,no_slack,估算宽度 < 70% 可用宽度(0.27),明显有留白
|
||||
24,pmM,bZp,80,310,800,120,0,0,800,16,思源黑体,false,false,true,none,justify,两端对齐Justify:这是一段用于测试两端对齐效果的较长文字,文字的左右两边都会对齐,形成整齐的文字块边缘,适合报纸、杂志等正式排版。Thequickbrownfoxjumpsoverthelazydog.Typographyistheartandtechniqueofarrangingtype.,150,中文+英文,true,1759.2,2.199,yes,估算宽度 2.20x 可用宽度,肯定换行(多行)
|
||||
24,pmM,bZV,80,455,800,30,0,0,800,12,思源黑体,false,false,true,none,center,左对齐·居中·右对齐·两端对齐·四种对齐方式,22,中文,true,242.4,0.303,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
25,pmP,bZt,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,25·文字颜色测试Colors,15,中文+英文+数字,true,306.6,0.365,no_slack,估算宽度 < 70% 可用宽度(0.36),明显有留白
|
||||
25,pmP,bZk,80,115,800,45,0,0,800,26,思源黑体,true,false,true,none,center,深蓝DarkBlue·主色Primary,20,中文+英文,true,332.8,0.416,no_slack,估算宽度 < 70% 可用宽度(0.42),明显有留白
|
||||
25,pmP,bZO,80,170,800,45,0,0,800,26,思源黑体,true,false,true,none,center,亮蓝BrightBlue·辅色Secondary,24,中文+英文,true,390.0,0.4875,no_slack,估算宽度 < 70% 可用宽度(0.49),明显有留白
|
||||
25,pmP,bZA,80,225,800,45,0,0,800,26,思源黑体,true,false,true,none,center,青绿Teal·成功色Success,17,中文+英文,true,301.6,0.377,no_slack,估算宽度 < 70% 可用宽度(0.38),明显有留白
|
||||
25,pmP,bZJ,80,280,800,45,0,0,800,26,思源黑体,true,false,true,none,center,琥珀Amber·警告色Warning,18,中文+英文,true,315.9,0.3949,no_slack,估算宽度 < 70% 可用宽度(0.39),明显有留白
|
||||
25,pmP,bZn,80,335,800,45,0,0,800,26,思源黑体,true,false,true,none,center,红色Red·危险色Danger,15,中文+英文,true,273.0,0.3413,no_slack,估算宽度 < 70% 可用宽度(0.34),明显有留白
|
||||
25,pmP,bZS,80,390,800,45,0,0,800,26,思源黑体,true,false,true,none,center,灰色Gray·辅助色Neutral,17,中文+英文,true,301.6,0.377,no_slack,估算宽度 < 70% 可用宽度(0.38),明显有留白
|
||||
25,pmP,bZy,80,455,800,30,0,0,800,12,思源黑体,false,false,true,none,center,六色系统·主/辅/成功/警告/危险/中性·色彩对比测试,27,中文,true,286.2,0.3577,no_slack,估算宽度 < 70% 可用宽度(0.36),明显有留白
|
||||
26,pmh,bZU,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,26·特殊符号测试Symbols,16,中文+英文+数字,true,322.0,0.3833,no_slack,估算宽度 < 70% 可用宽度(0.38),明显有留白
|
||||
26,pmh,bZD,80,115,800,50,0,0,800,28,思源黑体,true,false,true,none,center,"标点符号:,。!?:;""""''()【】",29,中文+英文,true,635.6,0.7945,no,估算宽度 0.79x 可用宽度,大概率单行
|
||||
26,pmh,bZE,80,180,800,50,0,0,800,28,思源黑体,true,false,true,none,center,数学符号:+-×÷=≈≠≤≥±%,16,中文,true,347.2,0.434,no_slack,估算宽度 < 70% 可用宽度(0.43),明显有留白
|
||||
26,pmh,bZF,80,245,800,50,0,0,800,28,思源黑体,true,false,true,none,center,货币符号:¥$€£₩₹¢,12,中文,true,247.8,0.3098,no_slack,估算宽度 < 70% 可用宽度(0.31),明显有留白
|
||||
26,pmh,bZK,80,310,800,50,0,0,800,28,思源黑体,true,false,true,none,center,单位符号:℃℉°‰㎡kgms,14,中文+英文,true,291.2,0.364,no_slack,估算宽度 < 70% 可用宽度(0.36),明显有留白
|
||||
26,pmh,bZI,80,375,800,50,0,0,800,28,思源黑体,true,false,true,none,center,其他符号:@#&*§¶©®™,14,中文,true,278.6,0.3483,no_slack,估算宽度 < 70% 可用宽度(0.35),明显有留白
|
||||
26,pmh,bZP,80,450,800,30,0,0,800,12,思源黑体,false,false,true,none,center,标点·数学·货币·单位·特殊符号·全面测试,21,中文,true,225.0,0.2812,no_slack,估算宽度 < 70% 可用宽度(0.28),明显有留白
|
||||
27,pml,bZY,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,27·段落与列表测试Lists,15,中文+英文+数字,true,319.2,0.38,no_slack,估算宽度 < 70% 可用宽度(0.38),明显有留白
|
||||
27,pml,bZq,80,115,380,340,0,0,380,16,思源黑体,false,false,true,none,,无序列表UnorderedList第一项ItemOne第二项ItemTwo第三项ItemThree第四项ItemFour第五项ItemFive,71,中文+英文,false,178.4,0.4695,no_slack,估算宽度 < 70% 可用宽度(0.47),明显有留白
|
||||
27,pml,bZi,500,115,380,340,0,0,380,16,思源黑体,false,false,true,none,,有序列表OrderedList第一步StepOne第二步StepTwo第三步StepThree第四步StepFour第五步StepFive,69,中文+英文,false,160.8,0.4232,no_slack,估算宽度 < 70% 可用宽度(0.42),明显有留白
|
||||
27,pml,bZr,80,470,800,30,0,0,800,12,思源黑体,false,false,true,none,center,无序列表·有序列表·中英文列表项对比,18,中文,true,205.2,0.2565,no_slack,估算宽度 < 70% 可用宽度(0.26),明显有留白
|
||||
28,pmB,bZl,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,28·综合排版测试Layout,15,中文+英文+数字,true,306.6,0.365,no_slack,估算宽度 < 70% 可用宽度(0.36),明显有留白
|
||||
28,pmB,bZG,60,110,420,50,0,0,420,26,思源黑体,true,false,true,none,,左栏标题LeftColumn,14,中文+英文,true,247.0,0.5881,no_slack,估算宽度 < 70% 可用宽度(0.59),明显有留白
|
||||
28,pmB,bZM,500,110,400,50,0,0,400,26,思源黑体,true,false,true,none,,右栏标题RightColumn,15,中文+英文,true,261.3,0.6533,no_slack,估算宽度 < 70% 可用宽度(0.65),明显有留白
|
||||
28,pmB,bZm,60,170,420,280,0,0,420,15,思源黑体,false,false,true,none,,"这是左栏的正文内容,使用15pt字号,1.7倍行间距。多栏排版可以有效利用页面空间,提升信息密度。要点一:重点信息加粗显示要点二:引用内容斜体标注要点三:关键数据下划线强调数字测试:123,456,789·百分比:99.9%",112,中文+英文+数字,false,357.75,0.8518,tight_single,估算宽度 0.85x 可用宽度,接近填满,需确认是否单行
|
||||
28,pmB,bZQ,500,170,400,280,0,0,400,15,思源黑体,false,false,true,none,,"Thisistherightcolumnbodytextin15ptsize.Multi-columnlayoutoptimizesspaceandinformationdensity.Point1:BoldforemphasisPoint2:ItalicforquotesPoint3:UnderlineforkeydataNumbers:123,456,789·Percent:99.9%",196,英文+数字,false,445.5,1.1138,borderline,估算宽度 1.11x 可用宽度,边界情况,需截图确认是否换行
|
||||
28,pmB,bZg,60,470,840,30,0,0,840,12,思源黑体,false,false,true,none,center,双栏布局·中英对照·列表+强调+数字·综合测试,23,中文,true,249.0,0.2964,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
29,pmU,bdZ,60,40,840,50,0,0,840,28,思源黑体,true,false,true,none,,29·字符密度测试Density,16,中文+英文+数字,true,322.0,0.3833,no_slack,估算宽度 < 70% 可用宽度(0.38),明显有留白
|
||||
29,pmU,bdN,60,110,840,360,0,0,840,13,思源黑体,false,false,true,none,,"高密度文字排版测试·小字号大信息量场景排版设计(Typography)是一门关于文字排列和视觉呈现的艺术与技术。它涉及字体选择、字号大小、行间距、字间距、对齐方式、颜色搭配等多个方面。好的排版设计不仅能让文字更易读,还能传递情感和品牌调性。Typographyistheartandtechniqueofarrangingtypetomakewrittenlanguagelegible,readable,andappealingwhendisplayed.Thearrangementoftypeinvolvesselectingtypefaces,pointsizes,linelengths,line-spacing,andletter-spacing,andadjustingthespacebetweenpairsofletters.中文排版与英文排版有许多不同之处:中文是方块字,每个字符宽度基本一致;英文是比例字体,字符宽度各不相同。中文排版需要考虑标点符号的位置、中英文混排的间距等问题。数字0123456789在中英文混排时也需要特别注意基线对齐和宽度协调。数据:2024年全球字体市场规模达$12.34亿美元,年增长率8.5%。Top5字体:Helvetica,Arial,TimesNewRoman,Calibri,Garamond。",578,中文+英文+数字,false,1801.8,2.145,yes,估算宽度 2.15x 可用宽度,肯定换行(多行)
|
||||
29,pmU,bda,60,485,840,25,0,0,840,11,思源黑体,false,false,true,none,center,13pt高密度·多段落·中英文数字混排·信息密度测试,26,中文+英文+数字,true,251.35,0.2992,no_slack,估算宽度 < 70% 可用宽度(0.30),明显有留白
|
||||
30,pmv,bdB,80,180,800,100,0,0,800,56,思源黑体,true,false,true,none,center,测试样张·完,6,中文,true,310.8,0.3885,no_slack,估算宽度 < 70% 可用宽度(0.39),明显有留白
|
||||
30,pmv,bdc,80,300,800,50,0,0,800,22,思源黑体,true,false,true,none,center,EndofTypographyTestSample,25,英文,true,302.5,0.3781,no_slack,估算宽度 < 70% 可用宽度(0.38),明显有留白
|
||||
30,pmv,bdd,80,380,800,80,0,0,800,14,思源黑体,false,false,true,none,center,共30页·涵盖字号/字体/中英文/数字/样式/间距/颜色/排版30Pages·Size/Font/CJK&Latin/Numbers/Style/Spacing/Color/Layout,93,中文+英文+数字,false,477.4,0.5967,no_slack,估算宽度 < 70% 可用宽度(0.60),明显有留白
|
||||
|
115
skills/lark-slides/scripts/width_measurement_report.md
Normal file
@@ -0,0 +1,115 @@
|
||||
# 字符宽度测量数据报告
|
||||
|
||||
**Presentation**: BUFBsLX2ZlzyMTdprLicd7rpneg
|
||||
**总样本数**: 158
|
||||
**关键测量样本(比值≥0.85)**: 12
|
||||
- 接近填满(0.85-1.0): 4
|
||||
- 边界情况(1.0-1.2): 2
|
||||
- 大概率换行(1.2-1.5): 2
|
||||
- 肯定换行(>1.5): 4
|
||||
|
||||
## 按文本类型统计(所有样本)
|
||||
|
||||
| 文本类型 | 样本数 | 平均估算/可用比 | 最小比值 | 最大比值 |
|
||||
|----------|--------|------------------|----------|----------|
|
||||
| 中文 | 24 | 0.4099 | 0.1965 | 0.8400 |
|
||||
| 中文+数字 | 21 | 0.6316 | 0.2514 | 2.3670 |
|
||||
| 中文+英文 | 38 | 0.5405 | 0.2213 | 2.1990 |
|
||||
| 中文+英文+数字 | 56 | 0.4992 | 0.1842 | 2.1450 |
|
||||
| 数字 | 3 | 0.4217 | 0.3850 | 0.4950 |
|
||||
| 英文 | 14 | 0.4805 | 0.2970 | 0.6930 |
|
||||
| 英文+数字 | 2 | 0.7879 | 0.4620 | 1.1138 |
|
||||
|
||||
## 接近填满样本(估算比值 0.85-1.0,最适合校准单行宽度)
|
||||
|
||||
| 页码 | 元素ID | 字体 | 字号 | Bold | 文本类型 | 硬换行 | 文本 | 估算宽度 | 可用宽度 | 比值 |
|
||||
|------|--------|------|------|------|----------|--------|------|----------|----------|------|
|
||||
| 8 | bNm | 思源黑体 | 10 | false | 中文+英文+数字 | false | 极小字号测试10pt—用于脚注、注释、数据来源说明等本页测试10pt极小字号的可读性。在正式演示中,... | 764.5 | 800 | 0.9556 |
|
||||
| 17 | bbR | 思源黑体 | 18 | false | 中文+英文+数字 | false | 随着AI技术的快速发展,MachineLearning与DeepLearning已经渗透到各行各业。... | 709.2 | 800 | 0.8865 |
|
||||
| 21 | bbT | 思源黑体 | 18 | false | 中文+英文 | false | 下划线常用于链接、重点标注等场景,删除线用于表示已删除或作废的内容。Underlineisusedf... | 712.8 | 800 | 0.891 |
|
||||
| 28 | bZm | 思源黑体 | 15 | false | 中文+英文+数字 | false | 这是左栏的正文内容,使用15pt字号,1.7倍行间距。多栏排版可以有效利用页面空间,提升信息密度。要... | 357.75 | 420 | 0.8518 |
|
||||
|
||||
## 边界换行样本(估算比值 1.0-1.2,需截图确认是否换行)
|
||||
|
||||
| 页码 | 元素ID | 字体 | 字号 | Bold | 文本类型 | 硬换行 | 文本 | 估算宽度 | 可用宽度 | 比值 |
|
||||
|------|--------|------|------|------|----------|--------|------|----------|----------|------|
|
||||
| 23 | bZc | 思源黑体 | 14 | false | 中文+数字 | false | 2.0倍行距这是一段测试文字,用于展示2.0倍行间距的效果。行间距较大时,文字显得疏朗透气,阅读体验... | 322 | 270 | 1.1926 |
|
||||
| 28 | bZQ | 思源黑体 | 15 | false | 英文+数字 | false | Thisistherightcolumnbodytextin15ptsize.Multi-colum... | 445.5 | 400 | 1.1138 |
|
||||
|
||||
## 大概率换行样本(估算比值 1.2-1.5)
|
||||
|
||||
| 页码 | 元素ID | 字体 | 字号 | Bold | 文本类型 | 硬换行 | 文本 | 估算宽度 | 可用宽度 | 比值 |
|
||||
|------|--------|------|------|------|----------|--------|------|----------|----------|------|
|
||||
| 6 | bNf | 思源黑体 | 18 | false | 中文+英文+数字 | false | 这是一段正文测试文字,使用18pt字号,是幻灯片中最常用的正文字号。Typographyisthea... | 1079.1 | 800 | 1.3489 |
|
||||
| 7 | bNU | 思源黑体 | 14 | false | 中文+英文+数字 | false | 小号正文测试14pt这是一段使用14pt字号的正文文字,适合用于内容较多的页面或说明性文字。在信息密... | 1070.3 | 800 | 1.3379 |
|
||||
|
||||
## 肯定换行样本(估算比值 > 1.5)
|
||||
|
||||
| 页码 | 元素ID | 字体 | 字号 | Bold | 文本类型 | 硬换行 | 文本 | 估算宽度 | 可用宽度 | 比值 |
|
||||
|------|--------|------|------|------|----------|--------|------|----------|----------|------|
|
||||
| 23 | bZZ | 思源黑体 | 14 | false | 中文+数字 | false | 1.0倍行距这是一段测试文字,用于展示1.0倍行间距的效果。行间距较小时,文字显得紧凑,但可能影响可... | 639.1 | 270 | 2.367 |
|
||||
| 23 | bZo | 思源黑体 | 14 | false | 中文+数字 | false | 1.5倍行距这是一段测试文字,用于展示1.5倍行间距的效果。这是最常用的行间距设置,兼顾可读性和信息... | 639.1 | 270 | 2.367 |
|
||||
| 24 | bZp | 思源黑体 | 16 | false | 中文+英文 | true | 两端对齐Justify:这是一段用于测试两端对齐效果的较长文字,文字的左右两边都会对齐,形成整齐的文... | 1759.2 | 800 | 2.199 |
|
||||
| 29 | bdN | 思源黑体 | 13 | false | 中文+英文+数字 | false | 高密度文字排版测试·小字号大信息量场景排版设计(Typography)是一门关于文字排列和视觉呈现的... | 1801.8 | 840 | 2.145 |
|
||||
|
||||
## 字体统计
|
||||
|
||||
| 字体 | 样本数 |
|
||||
|------|--------|
|
||||
| 思源黑体 | 145 |
|
||||
| Helvetica | 5 |
|
||||
| Georgia | 5 |
|
||||
| 思源宋体 | 3 |
|
||||
|
||||
## 字号+粗体统计
|
||||
|
||||
| 字号 | Bold | 样本数 | 平均比值 |
|
||||
|------|------|--------|----------|
|
||||
| 10 | false | 2 | 0.6018 |
|
||||
| 11 | false | 3 | 0.2335 |
|
||||
| 12 | false | 17 | 0.2784 |
|
||||
| 13 | false | 2 | 1.2393 |
|
||||
| 14 | false | 12 | 0.8339 |
|
||||
| 15 | false | 2 | 0.9828 |
|
||||
| 16 | false | 8 | 0.7480 |
|
||||
| 17 | false | 1 | 0.5026 |
|
||||
| 18 | false | 8 | 0.7501 |
|
||||
| 20 | false | 3 | 0.4729 |
|
||||
| 22 | true | 1 | 0.3781 |
|
||||
| 24 | false | 1 | 0.2858 |
|
||||
| 24 | true | 4 | 0.3225 |
|
||||
| 26 | true | 8 | 0.4544 |
|
||||
| 28 | true | 49 | 0.4030 |
|
||||
| 32 | true | 14 | 0.4931 |
|
||||
| 36 | true | 6 | 0.5820 |
|
||||
| 44 | true | 1 | 0.5558 |
|
||||
| 48 | true | 8 | 0.6644 |
|
||||
| 52 | true | 2 | 0.4469 |
|
||||
| 56 | true | 1 | 0.3885 |
|
||||
| 60 | true | 1 | 0.7066 |
|
||||
| 64 | true | 1 | 0.6400 |
|
||||
| 72 | true | 3 | 0.6450 |
|
||||
|
||||
## 说明
|
||||
|
||||
- **估算宽度**: 使用当前 `estimate_character_width` 函数计算(中文=1em,西文=0.55em,空格=0.33em)
|
||||
- **可用宽度**: shape.width - paddingLeft - paddingRight
|
||||
- **width_ratio**: 估算宽度 / 可用宽度(针对最长硬换行段落计算)
|
||||
- **硬换行**: 文本中是否包含显式 \n 分段
|
||||
- 截图保存在: /Users/bytedance/go/src/github.com/larksuite/cli/skills/lark-slides/scripts/.lark-slides/screenshots
|
||||
|
||||
### 比值解读建议
|
||||
- ratio < 0.7: 明显留白,估算宽度可能偏宽,或文本确实很短
|
||||
- 0.7-0.85: 大概率单行,有少量留白
|
||||
- 0.85-1.0: 接近填满,是校准西文/中文字符宽度系数的最佳样本
|
||||
- 1.0-1.2: 边界情况,需要看截图确认:是刚好填满单行还是换行了
|
||||
- 1.2-1.5: 大概率换2行
|
||||
- >1.5: 肯定换行(多行文本)
|
||||
|
||||
### 校准建议
|
||||
1. 先看 ratio 0.85-1.0 的样本:如果截图中这些文本**确实单行且接近填满**,说明当前估算大致准确;如果有较多留白,说明估算偏宽,需要减小西文字符系数
|
||||
2. 再看 ratio 1.0-1.2 的样本:结合截图判断实际是单行还是换行,反推合理系数
|
||||
3. 重点关注纯英文、纯数字、纯中文、中英混合这几类分别统计
|
||||
4. Bold 字体通常比常规字体稍宽,Italic 稍窄,需要分别考虑
|
||||
|
||||
请人工核对截图确认边界样本的实际换行情况,用于校准字符宽度系数。
|
||||
@@ -935,6 +935,96 @@ def estimate_text_width(
|
||||
return base + max(len(text) - 1, 0) * letter_spacing
|
||||
|
||||
|
||||
def is_cjk_char(character: str) -> bool:
|
||||
"""CJK-like characters may wrap between any two adjacent glyphs.
|
||||
|
||||
Mirrors the isCJKLike ranges used by ee/slide text-measure-module so that
|
||||
line-count estimation matches DOM/Skia wrapping: CJK breaks per glyph while
|
||||
latin words stay atomic.
|
||||
"""
|
||||
code = ord(character)
|
||||
return (
|
||||
0x2E80 <= code <= 0x9FFF
|
||||
or 0x3000 <= code <= 0xD7AF
|
||||
or 0xF900 <= code <= 0xFAFF
|
||||
or 0xFE30 <= code <= 0xFE4F
|
||||
or 0xFF01 <= code <= 0xFF60
|
||||
or 0xFFE0 <= code <= 0xFFE6
|
||||
)
|
||||
|
||||
|
||||
def tokenize_for_wrap(text: str) -> list[tuple[str, str]]:
|
||||
"""Split a hard line into wrap tokens: latin words are atomic, CJK glyphs
|
||||
are individually breakable, whitespace runs are collapse points."""
|
||||
tokens: list[tuple[str, str]] = []
|
||||
index = 0
|
||||
length = len(text)
|
||||
while index < length:
|
||||
character = text[index]
|
||||
if character.isspace():
|
||||
start = index
|
||||
while index < length and text[index].isspace():
|
||||
index += 1
|
||||
tokens.append(("space", text[start:index]))
|
||||
elif is_cjk_char(character):
|
||||
tokens.append(("cjk", character))
|
||||
index += 1
|
||||
else:
|
||||
start = index
|
||||
while index < length and not text[index].isspace() and not is_cjk_char(text[index]):
|
||||
index += 1
|
||||
tokens.append(("word", text[start:index]))
|
||||
return tokens
|
||||
|
||||
|
||||
def count_wrapped_lines(
|
||||
text: str,
|
||||
font_size: int | float,
|
||||
letter_spacing: int | float,
|
||||
bold: bool,
|
||||
font_family: str | None,
|
||||
available_width: int | float,
|
||||
) -> int:
|
||||
"""Greedy word-aware wrapped line count.
|
||||
|
||||
Unlike ceil(width / available), latin words are never split mid-word (unless
|
||||
a single word is wider than the line, in which case it breaks like DOM
|
||||
overflow-wrap:break-word). This avoids under-counting lines for word-heavy
|
||||
text and matches how ee/slide reconciles Skia wrapping with the DOM.
|
||||
"""
|
||||
tokens = tokenize_for_wrap(text)
|
||||
if not tokens:
|
||||
return 1
|
||||
lines = 1
|
||||
current = 0.0
|
||||
|
||||
def token_width(token: str) -> int | float:
|
||||
return estimate_text_width(token, font_size, letter_spacing, bold, font_family)
|
||||
|
||||
for kind, token in tokens:
|
||||
width = token_width(token)
|
||||
# letter-spacing applies at every glyph boundary, including the seam
|
||||
# between two tokens on the same line; add it back so a packed line
|
||||
# matches estimate_text_width of the concatenated run.
|
||||
junction = letter_spacing if current > 0 else 0
|
||||
if kind == "space":
|
||||
if current > 0:
|
||||
current += junction + width
|
||||
continue
|
||||
if current > 0 and current + junction + width <= available_width:
|
||||
current += junction + width
|
||||
continue
|
||||
if current > 0:
|
||||
lines += 1
|
||||
if kind == "word" and width > available_width:
|
||||
extra = math.ceil(width / available_width) - 1
|
||||
lines += extra
|
||||
current = width - extra * available_width
|
||||
else:
|
||||
current = width
|
||||
return lines
|
||||
|
||||
|
||||
def resolve_letter_spacing(element: dict[str, Any], paragraph: dict[str, Any] | None = None) -> int | float:
|
||||
if paragraph is not None:
|
||||
value = paragraph.get("letterSpacing")
|
||||
@@ -967,6 +1057,11 @@ def is_short_metric_text(text: str) -> bool:
|
||||
return re.fullmatch(r"[+\-–—]?[0-9A-Za-z,.,/%%\-–—\u4e00-\u9fff]+", compact) is not None
|
||||
|
||||
|
||||
def is_labeled_short_metric_text(text: str) -> bool:
|
||||
"""Return whether a short metric contains a separate label before its value."""
|
||||
return is_short_metric_text(text) and re.search(r"[A-Za-z]+\s+[+\-–—]?\d", text) is not None
|
||||
|
||||
|
||||
def is_single_line_visual_candidate(
|
||||
element: dict[str, Any],
|
||||
paragraph: dict[str, Any] | None,
|
||||
@@ -976,7 +1071,7 @@ def is_single_line_visual_candidate(
|
||||
) -> bool:
|
||||
if "\n" in text or logical_width <= effective_width:
|
||||
return False
|
||||
if is_short_metric_text(text):
|
||||
if is_short_metric_text(text) and not is_labeled_short_metric_text(text):
|
||||
return logical_width <= effective_width * SINGLE_LINE_METRIC_WIDTH_RATIO
|
||||
|
||||
text_align = (paragraph or {}).get("textAlign") or element.get("textAlign")
|
||||
@@ -995,7 +1090,12 @@ def estimate_text_max_line_width(element: dict[str, Any]) -> int | float:
|
||||
bold = element.get("bold", False)
|
||||
font_family = element.get("fontFamily", "")
|
||||
letter_spacing = resolve_letter_spacing(element)
|
||||
paragraphs = [paragraph for paragraph in re.split(r"\n+", element["text"]) if paragraph]
|
||||
# Visual width ignores trailing whitespace: like Skia (which trims line-end
|
||||
# spaces), a run's rightmost visible glyph bounds the box. Counting trailing
|
||||
# spaces inflates the right edge and manufactures overlap false positives.
|
||||
paragraphs = [
|
||||
stripped for paragraph in re.split(r"\n+", element["text"]) if (stripped := paragraph.rstrip())
|
||||
]
|
||||
return max(
|
||||
[estimate_text_width(paragraph, font_size, letter_spacing, bold, font_family) for paragraph in paragraphs]
|
||||
or [1]
|
||||
@@ -1033,7 +1133,9 @@ def estimate_text_line_count_for_text(
|
||||
if is_single_line_visual_candidate(element, paragraph, hard_line, logical_width, effective_width):
|
||||
line_count += 1
|
||||
continue
|
||||
line_count += max(1, math.ceil(logical_width / effective_width))
|
||||
line_count += count_wrapped_lines(
|
||||
hard_line, font_size, letter_spacing, bold, font_family, effective_width
|
||||
)
|
||||
return line_count
|
||||
|
||||
|
||||
|
||||
@@ -814,6 +814,28 @@ class XmlTextOverlapLintGeometryTest(unittest.TestCase):
|
||||
]
|
||||
self.assertEqual(overflow_issues, [])
|
||||
|
||||
def test_lint_xml_reports_labeled_short_metric_when_it_wraps(self) -> None:
|
||||
result = xml_text_overlap_lint.lint_xml(
|
||||
"""
|
||||
<slide xmlns="http://www.larkoffice.com/sml/2.0">
|
||||
<data>
|
||||
<shape id="sheet-success" type="text" topLeftX="520" topLeftY="385" width="180" height="50">
|
||||
<content textType="headline" fontSize="32" bold="true" autoFit="no-auto-fit">
|
||||
<p>Sheet 98.5%</p>
|
||||
</content>
|
||||
</shape>
|
||||
</data>
|
||||
</slide>
|
||||
"""
|
||||
)
|
||||
overflow_issues = [
|
||||
issue
|
||||
for issue in result["slides"][0]["issues"]
|
||||
if issue["code"] == "text_may_overflow_shape"
|
||||
]
|
||||
self.assertEqual(len(overflow_issues), 1)
|
||||
self.assertEqual(overflow_issues[0]["elements"], ["sheet-success"])
|
||||
|
||||
def test_lint_xml_reports_plain_short_metric_when_it_wraps(self) -> None:
|
||||
result = xml_text_overlap_lint.lint_xml(
|
||||
"""
|
||||
|
||||
189
switch_env.sh
Executable file
@@ -0,0 +1,189 @@
|
||||
|
||||
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
TYPES_FILE="${SCRIPT_DIR}/internal/core/types.go"
|
||||
SECHEADER_FILE="${SCRIPT_DIR}/internal/cmdutil/secheader.go"
|
||||
|
||||
usage() {
|
||||
echo "Usage: $0 --env <boe|online|pre> --x-tt-env <value> [--build]"
|
||||
echo ""
|
||||
echo "Options:"
|
||||
echo " --env Set environment: 'boe' for feishu-boe.cn, 'online' for feishu.cn, 'pre' for feishu-pre.cn"
|
||||
echo " --x-tt-env Set x-tt-env header value. Empty string to remove the header."
|
||||
echo " --build Build and install lark-cli after switching environment"
|
||||
echo ""
|
||||
echo "Examples:"
|
||||
echo " $0 --env boe --x-tt-env boe_sun_ai"
|
||||
echo " $0 --env online --x-tt-env ''"
|
||||
echo " $0 --env pre --x-tt-env pre_env --build"
|
||||
exit 1
|
||||
}
|
||||
|
||||
ENV=""
|
||||
XTTENV=""
|
||||
BUILD=false
|
||||
|
||||
while [[ $# -gt 0 ]]; do
|
||||
case $1 in
|
||||
--env)
|
||||
ENV="$2"
|
||||
shift 2
|
||||
;;
|
||||
--x-tt-env)
|
||||
XTTENV="$2"
|
||||
shift 2
|
||||
;;
|
||||
--build)
|
||||
BUILD=true
|
||||
shift
|
||||
;;
|
||||
-h|--help)
|
||||
usage
|
||||
;;
|
||||
*)
|
||||
echo "Unknown option: $1"
|
||||
usage
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
if [[ -z "$ENV" ]]; then
|
||||
echo "Error: --env parameter is required"
|
||||
usage
|
||||
fi
|
||||
|
||||
if [[ "$ENV" != "boe" && "$ENV" != "online" && "$ENV" != "pre" ]]; then
|
||||
echo "Error: --env must be 'boe', 'online' or 'pre'"
|
||||
usage
|
||||
fi
|
||||
|
||||
update_endpoints() {
|
||||
local env="$1"
|
||||
local domain
|
||||
local mcp_domain
|
||||
|
||||
if [[ "$env" == "boe" ]]; then
|
||||
domain="feishu-boe.cn"
|
||||
mcp_domain="feishu-boe.cn"
|
||||
elif [[ "$env" == "pre" ]]; then
|
||||
domain="feishu-pre.cn"
|
||||
mcp_domain="feishu.cn"
|
||||
else
|
||||
domain="feishu.cn"
|
||||
mcp_domain="feishu.cn"
|
||||
fi
|
||||
|
||||
echo "Updating endpoints to use domain: ${domain} (MCP: ${mcp_domain})"
|
||||
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
sed -i '' "s|feishu-boe\.cn|TEMP_DOMAIN_PLACEHOLDER|g" "$TYPES_FILE"
|
||||
sed -i '' "s|feishu-pre\.cn|TEMP_DOMAIN_PLACEHOLDER|g" "$TYPES_FILE"
|
||||
sed -i '' "s|feishu\.cn|TEMP_DOMAIN_PLACEHOLDER|g" "$TYPES_FILE"
|
||||
sed -i '' "s|TEMP_DOMAIN_PLACEHOLDER|${domain}|g" "$TYPES_FILE"
|
||||
sed -i '' "s|mcp\.${domain}|mcp.${mcp_domain}|g" "$TYPES_FILE"
|
||||
else
|
||||
sed -i "s|feishu-boe\.cn|TEMP_DOMAIN_PLACEHOLDER|g" "$TYPES_FILE"
|
||||
sed -i "s|feishu-pre\.cn|TEMP_DOMAIN_PLACEHOLDER|g" "$TYPES_FILE"
|
||||
sed -i "s|feishu\.cn|TEMP_DOMAIN_PLACEHOLDER|g" "$TYPES_FILE"
|
||||
sed -i "s|TEMP_DOMAIN_PLACEHOLDER|${domain}|g" "$TYPES_FILE"
|
||||
sed -i "s|mcp\.${domain}|mcp.${mcp_domain}|g" "$TYPES_FILE"
|
||||
fi
|
||||
|
||||
echo "Endpoints updated successfully"
|
||||
}
|
||||
|
||||
update_xtt_env_header() {
|
||||
local xtt_env="$1"
|
||||
|
||||
if [[ -z "$xtt_env" ]]; then
|
||||
echo "Removing x-tt-env header..."
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
sed -i '' '/h\.Set("x-tt-env",/d' "$SECHEADER_FILE"
|
||||
else
|
||||
sed -i '/h\.Set("x-tt-env",/d' "$SECHEADER_FILE"
|
||||
fi
|
||||
echo "x-tt-env header removed"
|
||||
else
|
||||
echo "Setting x-tt-env header to: ${xtt_env}"
|
||||
if grep -q 'h\.Set("x-tt-env",' "$SECHEADER_FILE"; then
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
sed -i '' "s/h\.Set(\"x-tt-env\", \"[^\"]*\")/h.Set(\"x-tt-env\", \"${xtt_env}\")/g" "$SECHEADER_FILE"
|
||||
else
|
||||
sed -i "s/h\.Set(\"x-tt-env\", \"[^\"]*\")/h.Set(\"x-tt-env\", \"${xtt_env}\")/g" "$SECHEADER_FILE"
|
||||
fi
|
||||
else
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
sed -i '' "s/h\.Set(HeaderUserAgent, UserAgentValue())/h.Set(HeaderUserAgent, UserAgentValue())\n\th.Set(\"x-tt-env\", \"${xtt_env}\")/g" "$SECHEADER_FILE"
|
||||
else
|
||||
sed -i "s/h\.Set(HeaderUserAgent, UserAgentValue())/h.Set(HeaderUserAgent, UserAgentValue())\n\th.Set(\"x-tt-env\", \"${xtt_env}\")/g" "$SECHEADER_FILE"
|
||||
fi
|
||||
fi
|
||||
echo "x-tt-env header updated"
|
||||
fi
|
||||
|
||||
if [[ "$xtt_env" == ppe* ]]; then
|
||||
echo "Adding x-use-ppe header (x-tt-env starts with 'ppe')..."
|
||||
if ! grep -q 'h\.Set("x-use-ppe",' "$SECHEADER_FILE"; then
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
sed -i '' 's/h\.Set("x-tt-env", "\(.*\)")/h.Set("x-tt-env", "\1")\'$'\n''\th.Set("x-use-ppe", "1")/g' "$SECHEADER_FILE"
|
||||
else
|
||||
sed -i 's/h\.Set("x-tt-env", "\(.*\)")/h.Set("x-tt-env", "\1")\n\th.Set("x-use-ppe", "1")/g' "$SECHEADER_FILE"
|
||||
fi
|
||||
fi
|
||||
echo "x-use-ppe header added"
|
||||
else
|
||||
if grep -q 'h\.Set("x-use-ppe",' "$SECHEADER_FILE"; then
|
||||
echo "Removing x-use-ppe header..."
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
sed -i '' '/h\.Set("x-use-ppe",/d' "$SECHEADER_FILE"
|
||||
else
|
||||
sed -i '/h\.Set("x-use-ppe",/d' "$SECHEADER_FILE"
|
||||
fi
|
||||
echo "x-use-ppe header removed"
|
||||
fi
|
||||
fi
|
||||
}
|
||||
|
||||
build_and_install() {
|
||||
echo "Building and installing lark-cli..."
|
||||
|
||||
rm -rf ~/.lark-cli/cache
|
||||
rm -f "${SCRIPT_DIR}/lark-cli"
|
||||
|
||||
cd "$SCRIPT_DIR"
|
||||
./build.sh
|
||||
|
||||
local lark_cli_path
|
||||
lark_cli_path=$(which lark-cli 2>/dev/null || echo "")
|
||||
|
||||
if [[ -n "$lark_cli_path" ]]; then
|
||||
cp "${SCRIPT_DIR}/lark-cli" "$(dirname "$lark_cli_path")/"
|
||||
echo "lark-cli installed to $(dirname "$lark_cli_path")/"
|
||||
else
|
||||
echo "Warning: lark-cli not found in PATH, binary is at ${SCRIPT_DIR}/lark-cli"
|
||||
fi
|
||||
|
||||
echo "Build and install completed"
|
||||
}
|
||||
|
||||
echo "=== Environment Switch Script ==="
|
||||
echo "Environment: ${ENV}"
|
||||
echo "x-tt-env: ${XTTENV:-<empty - will remove header>}"
|
||||
echo "Build: ${BUILD}"
|
||||
echo ""
|
||||
|
||||
update_endpoints "$ENV"
|
||||
update_xtt_env_header "$XTTENV"
|
||||
|
||||
if [[ "$BUILD" == true ]]; then
|
||||
echo ""
|
||||
build_and_install
|
||||
fi
|
||||
echo ""
|
||||
echo "=== Done ==="
|
||||
|
||||
|
||||
46
tmp/ghost_text_check/npwp_slide2.xml
Normal file
@@ -0,0 +1,46 @@
|
||||
<slide id="pWs">
|
||||
<style>
|
||||
<fill id="fWs">
|
||||
<fillColor color="rgba(255, 85, 0, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<shape width="920" height="350" topLeftX="20" topLeftY="20" type="text" id="bdp">
|
||||
<content textType="title" fontSize="240" fontFamily="思源黑体" color="rgba(255, 255, 255, 0.102)" bold="true" letterSpacing="-5" textAlign="left">
|
||||
<p>PULSE</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="800" height="120" topLeftX="80" topLeftY="160" type="text" id="bdX">
|
||||
<content textType="title" fontSize="72" fontFamily="思源黑体" color="rgba(255, 255, 255, 1)" bold="true" letterSpacing="2" textAlign="left">
|
||||
<p>MOVE BEYOND.</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="600" height="80" topLeftX="80" topLeftY="280" type="text" id="bdy">
|
||||
<content textType="headline" fontSize="36" fontFamily="思源黑体" color="rgba(255, 255, 255, 1)" bold="true" textAlign="left">
|
||||
<p>超越边界,脉动不止</p>
|
||||
</content>
|
||||
</shape>
|
||||
<line id="bdd" startX="80" startY="380" endX="200.00416659433122" endY="380">
|
||||
<border color="rgba(255, 255, 255, 1)" width="3"/>
|
||||
</line>
|
||||
<shape width="500" height="80" topLeftX="80" topLeftY="400" type="text" id="bdZ">
|
||||
<content fontSize="14" fontFamily="思源黑体" color="rgba(255, 255, 255, 0.851)" lineSpacing="multiple:1.8" textAlign="left">
|
||||
<p>我们相信运动不只是竞技,更是一种生活态度。</p>
|
||||
<p>PULSE 为街头而生,为每一个不甘平凡的灵魂。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="40" height="380" topLeftX="750" topLeftY="80" rotation="90" type="text" id="bdm">
|
||||
<content textType="caption" fontSize="11" fontFamily="思源黑体" color="rgba(255, 255, 255, 0.6)" letterSpacing="6" textAlign="left">
|
||||
<p>BRAND MANIFESTO / 品牌宣言</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="200" height="20" topLeftX="60" topLeftY="490" type="text" id="bdc">
|
||||
<content textType="caption" fontSize="10" fontFamily="思源黑体" color="rgba(255, 255, 255, 0.6)" letterSpacing="2" textAlign="left">
|
||||
<p>02 / 12</p>
|
||||
</content>
|
||||
</shape>
|
||||
</data>
|
||||
<note id="bdH">
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
89
tmp/ghost_text_check/uorc_slide7.xml
Normal file
@@ -0,0 +1,89 @@
|
||||
<slide id="pBU">
|
||||
<style>
|
||||
<fill id="fBU">
|
||||
<fillColor color="rgba(55, 42, 30, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<shape width="360" height="200" topLeftX="600" topLeftY="20" type="text" id="bqp">
|
||||
<content textType="title" fontSize="180" fontFamily="思源宋体" color="rgba(180, 130, 80, 0.078)" bold="true" textAlign="right">
|
||||
<p>土</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="150" height="30" topLeftX="80" topLeftY="60" type="text" id="bqR">
|
||||
<content textType="caption" fontSize="12" fontFamily="思源宋体" color="rgba(200, 150, 100, 1)" letterSpacing="2">
|
||||
<p>06 / 品牌价值</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="600" height="80" topLeftX="80" topLeftY="100" type="text" id="bqg">
|
||||
<content textType="title" fontSize="40" fontFamily="思源宋体" color="rgba(240, 230, 215, 1)" bold="true">
|
||||
<p>我们坚持的三件事</p>
|
||||
</content>
|
||||
</shape>
|
||||
<line id="bqx" startX="80" startY="185" endX="120.01249804748511" endY="185">
|
||||
<border color="rgba(200, 150, 100, 1)"/>
|
||||
</line>
|
||||
<shape width="60" height="60" topLeftX="80" topLeftY="230" type="text" id="bqF">
|
||||
<content textType="title" fontSize="48" fontFamily="思源宋体" color="rgba(200, 150, 100, 1)" bold="true">
|
||||
<p>壹</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="200" height="30" topLeftX="150" topLeftY="235" type="text" id="bqu">
|
||||
<content fontSize="18" fontFamily="思源宋体" color="rgba(240, 220, 190, 1)" bold="true">
|
||||
<p>全手工制作</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="200" height="30" topLeftX="150" topLeftY="268" type="text" id="bqc">
|
||||
<content fontSize="13" fontFamily="思源宋体" color="rgba(220, 205, 185, 1)">
|
||||
<p>拒绝模具量产,每一件都是孤品</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="60" height="60" topLeftX="380" topLeftY="230" type="text" id="bqj">
|
||||
<content textType="title" fontSize="48" fontFamily="思源宋体" color="rgba(200, 150, 100, 1)" bold="true">
|
||||
<p>贰</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="200" height="30" topLeftX="450" topLeftY="235" type="text" id="bqk">
|
||||
<content fontSize="18" fontFamily="思源宋体" color="rgba(240, 220, 190, 1)" bold="true">
|
||||
<p>天然原矿釉</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="200" height="30" topLeftX="450" topLeftY="268" type="text" id="bqh">
|
||||
<content fontSize="13" fontFamily="思源宋体" color="rgba(220, 205, 185, 1)">
|
||||
<p>安全无毒,可食用级釉料</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="60" height="60" topLeftX="680" topLeftY="230" type="text" id="bqC">
|
||||
<content textType="title" fontSize="48" fontFamily="思源宋体" color="rgba(200, 150, 100, 1)" bold="true">
|
||||
<p>叁</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="180" height="30" topLeftX="750" topLeftY="235" type="text" id="bqB">
|
||||
<content fontSize="18" fontFamily="思源宋体" color="rgba(240, 220, 190, 1)" bold="true">
|
||||
<p>高温烧制</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="180" height="30" topLeftX="750" topLeftY="268" type="text" id="bqV">
|
||||
<content fontSize="13" fontFamily="思源宋体" color="rgba(220, 205, 185, 1)">
|
||||
<p>1280°C高温,坚固耐用</p>
|
||||
</content>
|
||||
</shape>
|
||||
<line id="bql" startX="80" startY="350" endX="880.0006249997559" endY="350">
|
||||
<border color="rgba(200, 150, 100, 0.3)" width="1"/>
|
||||
</line>
|
||||
<shape width="800" height="80" topLeftX="80" topLeftY="380" type="text" id="bqe">
|
||||
<content fontSize="14" fontFamily="思源宋体" color="rgba(180, 165, 145, 1)" lineSpacing="multiple:2" textAlign="center">
|
||||
<p>我们相信,好的器物应该陪伴人很久很久</p>
|
||||
<p>在日复一日的使用中,包浆、温润,成为生活的一部分</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="60" height="30" topLeftX="860" topLeftY="490" type="text" id="bqW">
|
||||
<content textType="caption" fontSize="10" fontFamily="思源黑体" color="rgba(140, 125, 110, 1)" textAlign="right">
|
||||
<p>07 / 10</p>
|
||||
</content>
|
||||
</shape>
|
||||
</data>
|
||||
<note id="bqG">
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
261
tmp/ghost_text_sample/readback.xml
Normal file
@@ -0,0 +1,261 @@
|
||||
<presentation id="A4fSsAeq4lEE6Gd7JbVcZZQ2n0g" xmlns="/sml/2.0" width="960" height="540">
|
||||
<title>幽灵字样张 Ghost Type Specimen</title>
|
||||
<theme>
|
||||
<textStyles>
|
||||
<headline fontColor="rgba(31, 35, 41, 1)"/>
|
||||
<sub-headline fontColor="rgba(31, 35, 41, 1)"/>
|
||||
<body fontColor="rgba(31, 35, 41, 1)"/>
|
||||
<caption fontColor="rgba(155, 158, 162, 1)" fontSize="14"/>
|
||||
</textStyles>
|
||||
</theme>
|
||||
<slide id="pqq">
|
||||
<style>
|
||||
<fill id="fqq">
|
||||
<fillColor color="rgba(6, 9, 18, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<img id="bJv" src="ZaCqbgcWZo0ByFxBg39c1IZ1nSg" width="960" height="540" topLeftX="0" topLeftY="0">
|
||||
<crop leftOffset="0" rightOffset="0" topOffset="0" bottomOffset="0"/>
|
||||
</img>
|
||||
<shape width="960" height="540" topLeftX="0" topLeftY="0" presetHandlers="0" type="rect" id="bJN">
|
||||
<fill>
|
||||
<fillColor color="rgba(3, 7, 16, 0.48)"/>
|
||||
</fill>
|
||||
<border color="rgba(3, 7, 16, 0)" width="0"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="892" height="154" topLeftX="34" topLeftY="296" alpha="0.24" type="text" id="bJo">
|
||||
<content textType="title" fontSize="124" fontFamily="Source Han Sans" color="rgba(235, 248, 255, 1)" bold="true" lineSpacing="multiple:0.9" textAlign="center" autoFit="normal-auto-fit">
|
||||
<p>GHOST</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="260" height="32" topLeftX="72" topLeftY="62" type="text" id="bJy">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>TYPE SPECIMEN / 01</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="560" height="102" topLeftX="70" topLeftY="126" type="text" id="bJY">
|
||||
<content textType="title" fontSize="42" fontFamily="Source Han Sans" color="rgba(247, 251, 255, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>幽灵字样张</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="520" height="56" topLeftX="74" topLeftY="222" type="text" id="bJF">
|
||||
<content verticalAlign="top" fontSize="15" fontFamily="Source Han Sans" color="rgba(207, 224, 232, 1)" lineSpacing="multiple:1.4" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>把文字从“标题”改造成雾、残影和空间层。重叠不是事故,而是建立气氛的材料。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="214" height="86" topLeftX="672" topLeftY="64" presetHandlers="0" type="rect" id="bJZ">
|
||||
<fill>
|
||||
<fillColor color="rgba(5, 13, 25, 0.54)"/>
|
||||
</fill>
|
||||
<border color="rgba(126, 255, 238, 0.52)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="174" height="48" topLeftX="690" topLeftY="82" type="text" id="bJz">
|
||||
<content fontSize="13" fontFamily="Source Han Sans" color="rgba(229, 245, 250, 1)" lineSpacing="multiple:1.2" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>低透明度 / 大字号 / 贴边裁切 / 图文压叠</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="460" height="22" topLeftX="72" topLeftY="476" type="text" id="bJb">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(157, 179, 190, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Sample deck generated with Lark Slides XML</p>
|
||||
</content>
|
||||
</shape>
|
||||
</data>
|
||||
<note id="bJJ">
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
<slide id="pqb">
|
||||
<style>
|
||||
<fill id="fqb">
|
||||
<fillColor color="rgba(8, 11, 20, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<shape width="960" height="540" topLeftX="0" topLeftY="0" presetHandlers="0" type="rect" id="bJL">
|
||||
<fill>
|
||||
<fillColor color="rgba(8, 11, 20, 1)"/>
|
||||
</fill>
|
||||
<border color="rgba(8, 11, 20, 0)" width="0"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<img id="bJC" src="QsRqbf41WoqOsDxkBFHcQWVAnmd" width="291.99999999999994" height="328" topLeftX="612" topLeftY="112">
|
||||
<crop type="rect" leftOffset="145.55555555555554" rightOffset="145.5555555555556" topOffset="0" bottomOffset="0"/>
|
||||
</img>
|
||||
<shape width="292" height="328" topLeftX="612" topLeftY="112" presetHandlers="0" type="rect" id="bJx">
|
||||
<fill>
|
||||
<fillColor color="rgba(1, 5, 13, 0.32)"/>
|
||||
</fill>
|
||||
<border color="rgba(120, 255, 238, 0.42)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="872" height="96" topLeftX="43.99999999999992" topLeftY="381.99999999999994" rotation="2" alpha="0.16" type="text" id="bJd">
|
||||
<content textType="headline" fontSize="78" fontFamily="Source Han Sans" color="rgba(224, 247, 255, 1)" bold="true" lineSpacing="multiple:0.9" textAlign="center" autoFit="normal-auto-fit">
|
||||
<p>LAYER</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="420" height="48" topLeftX="56" topLeftY="35" type="text" id="bJK">
|
||||
<content textType="headline" fontSize="30" fontFamily="Source Han Sans" color="rgba(244, 250, 255, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Layer Grammar</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="360" height="34" topLeftX="542" topLeftY="42" type="text" id="bJQ">
|
||||
<content textType="caption" fontSize="11" fontFamily="Source Han Sans" color="rgba(156, 178, 189, 1)" lineSpacing="multiple:1.0" textAlign="right" autoFit="normal-auto-fit">
|
||||
<p>幽灵字不是压住信息,而是给信息制造深度。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="166" height="242" topLeftX="56" topLeftY="112" presetHandlers="0" type="rect" id="bJH">
|
||||
<fill>
|
||||
<fillColor color="rgba(238, 248, 255, 0.08)"/>
|
||||
</fill>
|
||||
<border color="rgba(238, 248, 255, 0.16)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="130" height="28" topLeftX="74" topLeftY="132" type="text" id="bJk">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>01 / SAFE TEXT</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="130" height="116" topLeftX="74" topLeftY="174" type="text" id="bJf">
|
||||
<content verticalAlign="top" fontSize="13" fontFamily="Source Han Sans" color="rgba(231, 241, 245, 1)" lineSpacing="multiple:1.3" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>主信息必须留在安全区。它可以靠近幽灵字,但不依赖幽灵字才能被读懂。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="130" height="28" topLeftX="74" topLeftY="304" type="text" id="bJW">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(158, 180, 190, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Readability first</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="166" height="242" topLeftX="246" topLeftY="112" presetHandlers="0" type="rect" id="bJr">
|
||||
<fill>
|
||||
<fillColor color="rgba(238, 248, 255, 0.08)"/>
|
||||
</fill>
|
||||
<border color="rgba(238, 248, 255, 0.16)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="130" height="28" topLeftX="264" topLeftY="132" type="text" id="bJP">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>02 / OVERLAP</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="130" height="116" topLeftX="264" topLeftY="174" type="text" id="bJg">
|
||||
<content verticalAlign="top" fontSize="13" fontFamily="Source Han Sans" color="rgba(231, 241, 245, 1)" lineSpacing="multiple:1.3" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>允许图像、暗色块和大字交叠;让重叠发生在低对比背景层,而不是正文层。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="130" height="28" topLeftX="264" topLeftY="304" type="text" id="bJM">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(158, 180, 190, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Depth, not noise</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="146" height="242" topLeftX="436" topLeftY="112" presetHandlers="0" type="rect" id="bJE">
|
||||
<fill>
|
||||
<fillColor color="rgba(238, 248, 255, 0.08)"/>
|
||||
</fill>
|
||||
<border color="rgba(238, 248, 255, 0.16)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="110" height="28" topLeftX="454" topLeftY="132" type="text" id="bJA">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>03 / BLEED</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="110" height="116" topLeftX="454" topLeftY="174" type="text" id="bJu">
|
||||
<content verticalAlign="top" fontSize="13" fontFamily="Source Han Sans" color="rgba(231, 241, 245, 1)" lineSpacing="multiple:1.3" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>大字可靠近边界,被画布切出张力;核心内容仍保留完整轮廓。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="110" height="28" topLeftX="454" topLeftY="304" type="text" id="bJR">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(158, 180, 190, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Intentional crop</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="248" height="42" topLeftX="632" topLeftY="364" type="text" id="bJS">
|
||||
<content fontSize="14" fontFamily="Source Han Sans" color="rgba(238, 247, 250, 1)" bold="true" lineSpacing="multiple:1.1" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Three layers: image, ghost word, readable claim.</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="500" height="24" topLeftX="56" topLeftY="468" type="text" id="bJO">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(148, 170, 181, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Rule sheet: keep the readable layer calm, then let the atmosphere get aggressive.</p>
|
||||
</content>
|
||||
</shape>
|
||||
</data>
|
||||
<note id="bJm">
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
<slide id="pqE">
|
||||
<style>
|
||||
<fill id="fqE">
|
||||
<fillColor color="rgba(5, 7, 14, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<img id="bJl" src="WYcVbbQfgo5qitxHrsBcJqBJnKh" width="960" height="540" topLeftX="0" topLeftY="0">
|
||||
<crop leftOffset="0" rightOffset="0" topOffset="0" bottomOffset="0"/>
|
||||
</img>
|
||||
<shape width="960" height="540" topLeftX="0" topLeftY="0" presetHandlers="0" type="rect" id="bJI">
|
||||
<fill>
|
||||
<fillColor color="rgba(2, 5, 12, 0.5)"/>
|
||||
</fill>
|
||||
<border color="rgba(2, 5, 12, 0)" width="0"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="892" height="168" topLeftX="34.000000000000014" topLeftY="78.00000000000001" rotation="1" alpha="0.22" type="text" id="bJt">
|
||||
<content textType="title" fontSize="138" fontFamily="Source Han Sans" color="rgba(238, 250, 255, 1)" bold="true" lineSpacing="multiple:0.9" textAlign="center" autoFit="normal-auto-fit">
|
||||
<p>BLEED</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="270" height="72" topLeftX="630" topLeftY="248" alpha="0.18" type="text" id="bJn">
|
||||
<content textType="headline" fontSize="54" fontFamily="Source Han Sans" color="rgba(142, 255, 239, 1)" bold="true" lineSpacing="multiple:0.9" textAlign="center" autoFit="normal-auto-fit">
|
||||
<p>OFF EDGE</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="516" height="126" topLeftX="62" topLeftY="316" presetHandlers="0" type="rect" id="bJX">
|
||||
<fill>
|
||||
<fillColor color="rgba(5, 12, 24, 0.7)"/>
|
||||
</fill>
|
||||
<border color="rgba(128, 255, 240, 0.46)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="468" height="52" topLeftX="86" topLeftY="336" type="text" id="bJV">
|
||||
<content textType="headline" fontSize="28" fontFamily="Source Han Sans" color="rgba(248, 252, 255, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>让字先离开屏幕</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="454" height="34" topLeftX="88" topLeftY="390" type="text" id="bJi">
|
||||
<content fontSize="14" fontFamily="Source Han Sans" color="rgba(204, 222, 232, 1)" lineSpacing="multiple:1.3" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>越界感留给幽灵字;行动语句、页码、结论仍留在可读安全区。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="232" height="70" topLeftX="646" topLeftY="362" presetHandlers="0" type="rect" id="bJs">
|
||||
<fill>
|
||||
<fillColor color="rgba(122, 255, 238, 0.12)"/>
|
||||
</fill>
|
||||
<border color="rgba(122, 255, 238, 0.38)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="196" height="38" topLeftX="664" topLeftY="378" type="text" id="bJD">
|
||||
<content fontSize="13" fontFamily="Source Han Sans" color="rgba(226, 245, 249, 1)" lineSpacing="multiple:1.2" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>大胆设计可以失控,但信息层不能失联。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="270" height="28" topLeftX="62" topLeftY="60" type="text" id="bJq">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>TYPE SPECIMEN / 03</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="154" height="22" topLeftX="744" topLeftY="474" type="text" id="bJe">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(154, 176, 187, 1)" lineSpacing="multiple:1.0" textAlign="right" autoFit="normal-auto-fit">
|
||||
<p>Ghost typography sample</p>
|
||||
</content>
|
||||
</shape>
|
||||
</data>
|
||||
<note id="bJp">
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
</presentation>
|
||||
261
tmp/ghost_text_sample/readback_after_drag.xml
Normal file
@@ -0,0 +1,261 @@
|
||||
<presentation id="A4fSsAeq4lEE6Gd7JbVcZZQ2n0g" xmlns="/sml/2.0" width="960" height="540">
|
||||
<title>幽灵字样张 Ghost Type Specimen</title>
|
||||
<theme>
|
||||
<textStyles>
|
||||
<headline fontColor="rgba(31, 35, 41, 1)"/>
|
||||
<sub-headline fontColor="rgba(31, 35, 41, 1)"/>
|
||||
<body fontColor="rgba(31, 35, 41, 1)"/>
|
||||
<caption fontColor="rgba(155, 158, 162, 1)" fontSize="14"/>
|
||||
</textStyles>
|
||||
</theme>
|
||||
<slide id="pqq">
|
||||
<style>
|
||||
<fill id="fqq">
|
||||
<fillColor color="rgba(6, 9, 18, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<img id="bJv" src="ZaCqbgcWZo0ByFxBg39c1IZ1nSg" width="960" height="540" topLeftX="0" topLeftY="0">
|
||||
<crop leftOffset="0" rightOffset="0" topOffset="0" bottomOffset="0"/>
|
||||
</img>
|
||||
<shape width="960" height="540" topLeftX="0" topLeftY="0" presetHandlers="0" type="rect" id="bJN">
|
||||
<fill>
|
||||
<fillColor color="rgba(3, 7, 16, 0.48)"/>
|
||||
</fill>
|
||||
<border color="rgba(3, 7, 16, 0)" width="0"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="892" height="154" topLeftX="380.7158671586716" topLeftY="344" alpha="0.24" type="text" id="bJo">
|
||||
<content textType="title" fontSize="124" fontFamily="Source Han Sans" color="rgba(235, 248, 255, 1)" bold="true" lineSpacing="multiple:0.9" textAlign="center" autoFit="normal-auto-fit">
|
||||
<p>GHOST</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="260" height="32" topLeftX="72" topLeftY="62" type="text" id="bJy">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>TYPE SPECIMEN / 01</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="560" height="102" topLeftX="70" topLeftY="126" type="text" id="bJY">
|
||||
<content textType="title" fontSize="42" fontFamily="Source Han Sans" color="rgba(247, 251, 255, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>幽灵字样张</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="520" height="56" topLeftX="74" topLeftY="222" type="text" id="bJF">
|
||||
<content verticalAlign="top" fontSize="15" fontFamily="Source Han Sans" color="rgba(207, 224, 232, 1)" lineSpacing="multiple:1.4" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>把文字从“标题”改造成雾、残影和空间层。重叠不是事故,而是建立气氛的材料。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="214" height="86" topLeftX="672" topLeftY="64" presetHandlers="0" type="rect" id="bJZ">
|
||||
<fill>
|
||||
<fillColor color="rgba(5, 13, 25, 0.54)"/>
|
||||
</fill>
|
||||
<border color="rgba(126, 255, 238, 0.52)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="174" height="48" topLeftX="690" topLeftY="82" type="text" id="bJz">
|
||||
<content fontSize="13" fontFamily="Source Han Sans" color="rgba(229, 245, 250, 1)" lineSpacing="multiple:1.2" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>低透明度 / 大字号 / 贴边裁切 / 图文压叠</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="460" height="22" topLeftX="72" topLeftY="476" type="text" id="bJb">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(157, 179, 190, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Sample deck generated with Lark Slides XML</p>
|
||||
</content>
|
||||
</shape>
|
||||
</data>
|
||||
<note id="bJJ">
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
<slide id="pqb">
|
||||
<style>
|
||||
<fill id="fqb">
|
||||
<fillColor color="rgba(8, 11, 20, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<shape width="960" height="540" topLeftX="0" topLeftY="0" presetHandlers="0" type="rect" id="bJL">
|
||||
<fill>
|
||||
<fillColor color="rgba(8, 11, 20, 1)"/>
|
||||
</fill>
|
||||
<border color="rgba(8, 11, 20, 0)" width="0"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<img id="bJC" src="QsRqbf41WoqOsDxkBFHcQWVAnmd" width="291.99999999999994" height="328" topLeftX="612" topLeftY="112">
|
||||
<crop type="rect" leftOffset="145.55555555555554" rightOffset="145.5555555555556" topOffset="0" bottomOffset="0"/>
|
||||
</img>
|
||||
<shape width="872" height="96" topLeftX="175.99999999994805" topLeftY="369.18694025920706" rotation="2" alpha="0.16" type="text" id="bJd">
|
||||
<content textType="headline" fontSize="78" fontFamily="Source Han Sans" color="rgba(224, 247, 255, 1)" bold="true" lineSpacing="multiple:0.9" textAlign="center" autoFit="normal-auto-fit">
|
||||
<p>LAYER</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="420" height="48" topLeftX="56" topLeftY="35" type="text" id="bJK">
|
||||
<content textType="headline" fontSize="30" fontFamily="Source Han Sans" color="rgba(244, 250, 255, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Layer Grammar</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="360" height="34" topLeftX="542" topLeftY="42" type="text" id="bJQ">
|
||||
<content textType="caption" fontSize="11" fontFamily="Source Han Sans" color="rgba(156, 178, 189, 1)" lineSpacing="multiple:1.0" textAlign="right" autoFit="normal-auto-fit">
|
||||
<p>幽灵字不是压住信息,而是给信息制造深度。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="166" height="242" topLeftX="56" topLeftY="112" presetHandlers="0" type="rect" id="bJH">
|
||||
<fill>
|
||||
<fillColor color="rgba(238, 248, 255, 0.08)"/>
|
||||
</fill>
|
||||
<border color="rgba(238, 248, 255, 0.16)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="130" height="28" topLeftX="74" topLeftY="132" type="text" id="bJk">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>01 / SAFE TEXT</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="130" height="116" topLeftX="74" topLeftY="174" type="text" id="bJf">
|
||||
<content verticalAlign="top" fontSize="13" fontFamily="Source Han Sans" color="rgba(231, 241, 245, 1)" lineSpacing="multiple:1.3" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>主信息必须留在安全区。它可以靠近幽灵字,但不依赖幽灵字才能被读懂。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="130" height="28" topLeftX="74" topLeftY="304" type="text" id="bJW">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(158, 180, 190, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Readability first</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="166" height="242" topLeftX="246" topLeftY="112" presetHandlers="0" type="rect" id="bJr">
|
||||
<fill>
|
||||
<fillColor color="rgba(238, 248, 255, 0.08)"/>
|
||||
</fill>
|
||||
<border color="rgba(238, 248, 255, 0.16)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="130" height="28" topLeftX="264" topLeftY="132" type="text" id="bJP">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>02 / OVERLAP</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="130" height="116" topLeftX="264" topLeftY="174" type="text" id="bJg">
|
||||
<content verticalAlign="top" fontSize="13" fontFamily="Source Han Sans" color="rgba(231, 241, 245, 1)" lineSpacing="multiple:1.3" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>允许图像、暗色块和大字交叠;让重叠发生在低对比背景层,而不是正文层。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="130" height="28" topLeftX="264" topLeftY="304" type="text" id="bJM">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(158, 180, 190, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Depth, not noise</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="146" height="242" topLeftX="436" topLeftY="112" presetHandlers="0" type="rect" id="bJE">
|
||||
<fill>
|
||||
<fillColor color="rgba(238, 248, 255, 0.08)"/>
|
||||
</fill>
|
||||
<border color="rgba(238, 248, 255, 0.16)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="110" height="28" topLeftX="454" topLeftY="132" type="text" id="bJA">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>03 / BLEED</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="110" height="116" topLeftX="454" topLeftY="174" type="text" id="bJu">
|
||||
<content verticalAlign="top" fontSize="13" fontFamily="Source Han Sans" color="rgba(231, 241, 245, 1)" lineSpacing="multiple:1.3" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>大字可靠近边界,被画布切出张力;核心内容仍保留完整轮廓。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="110" height="28" topLeftX="454" topLeftY="304" type="text" id="bJR">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(158, 180, 190, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Intentional crop</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="248" height="42" topLeftX="632" topLeftY="364" type="text" id="bJS">
|
||||
<content fontSize="14" fontFamily="Source Han Sans" color="rgba(238, 247, 250, 1)" bold="true" lineSpacing="multiple:1.1" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Three layers: image, ghost word, readable claim.</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="500" height="24" topLeftX="56" topLeftY="468" type="text" id="bJO">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(148, 170, 181, 1)" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>Rule sheet: keep the readable layer calm, then let the atmosphere get aggressive.</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="292" height="328" topLeftX="612" topLeftY="112" presetHandlers="0" type="rect" id="bJx">
|
||||
<fill>
|
||||
<fillColor color="rgba(1, 5, 13, 0.32)"/>
|
||||
</fill>
|
||||
<border color="rgba(120, 255, 238, 0.42)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
</data>
|
||||
<note id="bJm">
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
<slide id="pqE">
|
||||
<style>
|
||||
<fill id="fqE">
|
||||
<fillColor color="rgba(5, 7, 14, 1)"/>
|
||||
</fill>
|
||||
</style>
|
||||
<data>
|
||||
<img id="bJl" src="WYcVbbQfgo5qitxHrsBcJqBJnKh" width="960" height="540" topLeftX="0" topLeftY="0">
|
||||
<crop leftOffset="0" rightOffset="0" topOffset="0" bottomOffset="0"/>
|
||||
</img>
|
||||
<shape width="960" height="540" topLeftX="0" topLeftY="0" presetHandlers="0" type="rect" id="bJI">
|
||||
<fill>
|
||||
<fillColor color="rgba(2, 5, 12, 0.5)"/>
|
||||
</fill>
|
||||
<border color="rgba(2, 5, 12, 0)" width="0"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="892" height="168" topLeftX="-339.39807418048235" topLeftY="203.22902033583466" rotation="1" alpha="0.22" type="text" id="bJt">
|
||||
<content textType="title" fontSize="138" fontFamily="Source Han Sans" color="rgba(238, 250, 255, 1)" bold="true" lineSpacing="multiple:0.9" textAlign="center" autoFit="normal-auto-fit">
|
||||
<p>BLEED</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="270" height="72" topLeftX="793.4022140221402" topLeftY="307" alpha="0.18" type="text" id="bJn">
|
||||
<content textType="headline" fontSize="54" fontFamily="Source Han Sans" color="rgba(142, 255, 239, 1)" bold="true" lineSpacing="multiple:0.9" textAlign="center" autoFit="normal-auto-fit">
|
||||
<p>OFF EDGE</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="516" height="126" topLeftX="62" topLeftY="316" presetHandlers="0" type="rect" id="bJX">
|
||||
<fill>
|
||||
<fillColor color="rgba(5, 12, 24, 0.7)"/>
|
||||
</fill>
|
||||
<border color="rgba(128, 255, 240, 0.46)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="468" height="52" topLeftX="86" topLeftY="336" type="text" id="bJV">
|
||||
<content textType="headline" fontSize="28" fontFamily="Source Han Sans" color="rgba(248, 252, 255, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>让字先离开屏幕</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="454" height="34" topLeftX="88" topLeftY="390" type="text" id="bJi">
|
||||
<content fontSize="14" fontFamily="Source Han Sans" color="rgba(204, 222, 232, 1)" lineSpacing="multiple:1.3" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>越界感留给幽灵字;行动语句、页码、结论仍留在可读安全区。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="232" height="70" topLeftX="646" topLeftY="362" presetHandlers="0" type="rect" id="bJs">
|
||||
<fill>
|
||||
<fillColor color="rgba(122, 255, 238, 0.12)"/>
|
||||
</fill>
|
||||
<border color="rgba(122, 255, 238, 0.38)" width="1"/>
|
||||
<content fontSize="16" fontFamily="思源黑体" color="rgba(31, 35, 41, 1)"/>
|
||||
</shape>
|
||||
<shape width="196" height="38" topLeftX="664" topLeftY="378" type="text" id="bJD">
|
||||
<content fontSize="13" fontFamily="Source Han Sans" color="rgba(226, 245, 249, 1)" lineSpacing="multiple:1.2" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>大胆设计可以失控,但信息层不能失联。</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="270" height="28" topLeftX="62" topLeftY="60" type="text" id="bJq">
|
||||
<content textType="caption" fontSize="12" fontFamily="Source Han Sans" color="rgba(115, 255, 235, 1)" bold="true" lineSpacing="multiple:1.0" textAlign="left" autoFit="normal-auto-fit">
|
||||
<p>TYPE SPECIMEN / 03</p>
|
||||
</content>
|
||||
</shape>
|
||||
<shape width="154" height="22" topLeftX="744" topLeftY="474" type="text" id="bJe">
|
||||
<content textType="caption" fontSize="10" fontFamily="Source Han Sans" color="rgba(154, 176, 187, 1)" lineSpacing="multiple:1.0" textAlign="right" autoFit="normal-auto-fit">
|
||||
<p>Ghost typography sample</p>
|
||||
</content>
|
||||
</shape>
|
||||
</data>
|
||||
<note id="bJp">
|
||||
<content/>
|
||||
</note>
|
||||
</slide>
|
||||
</presentation>
|
||||
BIN
tmp/kimi-slides.skill
Normal file
104
tmp/kimi-slides/SKILL.md
Normal file
@@ -0,0 +1,104 @@
|
||||
---
|
||||
name: kimi-slides
|
||||
description: 创建和编辑 PPTX 格式的演示文稿。此技能定义了 .pptd 中间格式来简化 OOXML 操作。任何涉及生成或编辑 PPTX 文件的任务都必须使用此技能,而不是其他方法。该技能还可以用于读取上传的PPTX文件并将PPTX文档转换为图像。当用户请求信息图或海报而不指定图像或 HTML 格式时,该技能同样可以用于将其创建为 PPTX 文件。
|
||||
---
|
||||
|
||||
# 定义
|
||||
kimi-slides 是 Moonshot AI 作为第一方技能构建的 ppt 生成技能。它定义了 YAML 格式的中间 DSL (.pptd),进一步抽象了 OOXML,使演示文稿生成变得毫不费力。 DSL 可用于生成和渲染 PPT,现有的 pptx 文件也可以转换为此 DSL 进行编辑。
|
||||
|
||||
## pptd 格式
|
||||
.pptd 格式是 OOXML 上的简化抽象层,遵循基本 YAML 语法。这种抽象保留了 OOXML 的核心内容(主题、页面布局、元素位置和定义等),同时删除了复杂的嵌套逻辑,例如 Masters;每个页面都是独立的——所见即所得。请阅读 reference/pptd.md 以了解此 DSL 的完整定义。
|
||||
|
||||
## 配套 CLI
|
||||
该技能还附带一个配套的 CLI 工具(预安装在环境中),用于 pptd 和 pptx 之间的双向转换、pptd 验证、pptd/pptx 屏幕截图渲染等。
|
||||
请阅读 reference/cli.md 以获取完整的 CLI 使用说明。
|
||||
|
||||
## PPT制作流程
|
||||
|
||||
### 步骤1。仔细阅读上下文
|
||||
阅读**用户上传的所有文件**、提供的URL以及pptd格式指南“reference/pptd.md”,以充分了解用户的需求。
|
||||
|
||||
### 步骤2。了解用户的需求
|
||||
根据上下文了解用户的需求:
|
||||
1.首先确定请求的目的
|
||||
- 创建 PPT:创建一个新的演示文稿(从头开始,或从现有的 pptx 模板)
|
||||
- 编辑PPT:编辑用户上传的PPT(本地修改、单页美化等)
|
||||
- 复制 PPT:将演示文稿从非 pptx 格式(图像、PDF 等)复制为 pptx 格式
|
||||
|
||||
2.然后确定设计方向
|
||||
- 自主设计:没有偏好,或者只给出简单的风格约束;您需要填写或创建设计
|
||||
- 设计系统:指定技能预设的设计系统,或者用户提供涵盖所有颜色、字体、布局和组件规格的完整详细的设计方案
|
||||
- 使用模板:提供了模板并且必须使用
|
||||
- 风格迁移:提供风格参考源(图片、网页等)
|
||||
|
||||
3.然后确定输入类型
|
||||
- 仅主题:仅给出PPT主题方向或演示的内容要求,没有具体内容
|
||||
- 完整文档:用户提供完整的文档(论文、研究报告、新闻稿等)
|
||||
- 大纲:用户提供逐页大纲、演讲稿或类似内容
|
||||
* 当“用户输入类型”为【完整文档】或【大纲】且未指定是否允许扩展时:由于逐页大纲、演讲稿或用户文档很难支持演示的全部内容,优先使用搜索来扩展更相关的材料、案例等,除非用户明确表示不扩展
|
||||
|
||||
4. 页数
|
||||
- 如果用户请求特定页数,则用户的要求优先
|
||||
- 提供逐页大纲/脚本:与大纲/脚本中的页数匹配
|
||||
- 当提供完整且相对结构化的文档时:使用ask工具与用户确认一页应涵盖多少文档内容,并给出预计的总页数;当仅提供主题时:使用询问工具建议建议的页数并与用户确认#### 澄清和后续问题
|
||||
当出现以下情况时,通过提问工具解决
|
||||
1. 要求不明确
|
||||
- 用户的意图不明确或难以理解
|
||||
- 用户提供的文件/URL 无法访问
|
||||
2. 意图冲突
|
||||
- 用户的意图相互矛盾。例如:
|
||||
* 选择设计系统的同时还要求与该设计系统完全不一致的样式(例如,使用麦肯锡样式,同时要求页面上有大面积的空白)/使用模板/引用图像样式
|
||||
* 请求“制作 10 页”和“交付 30 多页输出”
|
||||
3、无法自行确定用户的需求
|
||||
- 当目的、设计方向、输入类型、页数等难以自行确定时
|
||||
|
||||
### 步骤3。根据用户需求生成演示文稿
|
||||
|
||||
在生成之前,首先阅读“reference/pptd.md”以了解 pptd 格式定义和约束,并阅读“reference/cli.md”以了解如何使用配套的 CLI
|
||||
|
||||
#### 复制 PPT
|
||||
- 分析图像以估计元素位置、字体和大小等,并**尽可能地按 1:1 复制**。
|
||||
- 当图像包含难以直接复制且无法用图标/形状近似的元素(例如照片、头像)时,您可以使用bash或python等工具对原始图像进行裁剪和截图
|
||||
|
||||
#### 编辑 PPT
|
||||
- 将用户上传的pptx文件转换为.pptd格式
|
||||
- 截取转换后的文件的屏幕截图,然后拼接并压缩屏幕截图以获得概览。之后单独阅读几个关键页面。
|
||||
- 找到要编辑的页面,并注意不要影响预期范围之外的部分。
|
||||
> `kimi-slides Convert` 命令并不是完美的无损转换。如果用户后期报告格式错误、乱码内容等,与原pptx进行比对,并参考比对修复pptd
|
||||
|
||||
#### 生成 PPT
|
||||
制作PPT时,针对不同的用户采取不同的制作方式【设计方向】
|
||||
#####自主设计
|
||||
1.阅读设计指南`reference/slides_categories.md`,并阅读用户查询对应的场景文档
|
||||
2. 根据以上内容制作演示文稿
|
||||
|
||||
#### 生成其他格式的内容
|
||||
- 当用户明确要求信息图、海报或高度视觉化的单页设计时,请阅读“reference/general-poster.md”并将其实现为单页或几页可编辑的 PPTD;当用户只要求一张图片时,仍然先用PPTD构建,然后通过截图或渲染的方式输出图片。对于普通 PPT 请求,请勿加载此参考文件。
|
||||
|
||||
#####设计系统
|
||||
1.阅读《reference/slides_categories.md》指南的一般约束部分,并阅读用户查询对应的场景文档作为设计基础
|
||||
2. 阅读正在使用的设计系统文档作为演示风格。严禁引用或混用其他设计风格
|
||||
3. 参考上述内容制作演示文稿
|
||||
|
||||
##### 使用模板
|
||||
1.使用`kimi-slides Convert`将用户上传的pptx文件转换为pptd形式
|
||||
2. 对转换后的文件进行截图,然后拼接并压缩截图以概览,了解模板的视觉风格(配色方案、字体风格、元素特征、布局特征、内容密度等)
|
||||
3. 识别页面类型;重点阅读特殊页面,例如封面、摘要页面和章节分隔符(单页屏幕截图、.page 文件),提取其页面布局、内容结构、可重用组件(图标、形状、smartart、可重用正文布局方案等)和元素样式(例如空格/线条/卡片分隔符、方角/圆角等)
|
||||
4. 使用模板制作演示文稿##### 风格转移
|
||||
1. 分析参考文件的视觉风格(配色方案、字体风格、元素特征、布局特征、内容密度等)、页面布局、内容结构、可重用组件(图标、形状、smartart、可重用正文布局方案等)和元素样式(例如,空白/线条/卡片分隔符、方角/圆角等)。
|
||||
- 如果用户提供样式参考URL,不要只阅读文本内容;多参考和学习页面的视觉效果,有助于理解风格
|
||||
2. 使用参考文件的风格特征制作演示文稿。我们鼓励您重复使用原始 pdf/url 中的插图、字体、字体大小层次结构、元素等
|
||||
|
||||
### 步骤4。 PPT验证
|
||||
1. 使用 kimi-slides check 命令对生成的文件进行多轮验证和修复
|
||||
2.使用`kimi-slides snapshot`进行截图,
|
||||
- 截图后,先拼接并压缩单页截图,以便快速概览
|
||||
- 细化有问题的页面并运行多轮验证和修复
|
||||
|
||||
注意:当前的屏幕截图 CLI 可能存在错误,导致结果与实际渲染不同。已知问题:
|
||||
1.图标退化成圆圈
|
||||
2. 渐变文本可能会降级为纯色
|
||||
这些问题仅存在于截图CLI中,不影响用户交付;它们可以被忽略。
|
||||
|
||||
###第5步。 PPT交付
|
||||
使用 kimi_ref 将 .pptd 文件传送给用户。该路径直接指向.pptd文件; **严格禁止转换为 pptx 格式进行交付**。用户使用 .pptd 文件的唯一方法是单击下面的卡片进入编辑器,在其中可以预览、编辑、演示和导出为 pptx 格式。
|
||||
113
tmp/kimi-slides/reference/cli.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# kimi-slides cli
|
||||
|
||||
本节列出了 kimi-slides CLI 支持的所有命令。这篇文档是权威参考! `kimi-slides --help` 返回的指南不正确 - 无需运行该命令。
|
||||
|
||||
## 转换
|
||||
|
||||
```bash
|
||||
kimi-slides convert path/deck.pptx
|
||||
kimi-slides convert path/deck.pptx -o path/output/
|
||||
```
|
||||
|
||||
`-o, --output`:指定输出目录;选修的。如果省略,则会在输入旁边创建一个同名(不带扩展名)的目录:
|
||||
|
||||
```text
|
||||
path/deck.pptx -> path/deck/
|
||||
```
|
||||
|
||||
输出目录结构:
|
||||
|
||||
```text
|
||||
deck/
|
||||
deck.pptd
|
||||
pages/
|
||||
page-1.page
|
||||
media/
|
||||
<hash>.png
|
||||
```
|
||||
|
||||
> 转换过程中,PPTX 中嵌入的图像将被提取到 `media/` 目录中,并且页面文件中的图像路径将被重写为相对于输出目录的路径:
|
||||
|
||||
```yaml
|
||||
src: ./media/<hash>.png
|
||||
```
|
||||
|
||||
## 检查
|
||||
|
||||
```bash
|
||||
kimi-slides check path/deck
|
||||
kimi-slides check path/deck -p 1,3 -s all
|
||||
kimi-slides check path/deck -p 2-10 --level keep
|
||||
kimi-slides check path/deck --level auto
|
||||
```
|
||||
|
||||
`check` 的输入必须是包含 `.pptd` 文件的目录。默认情况下,它检查主 `.pptd` 文件和所有页面文件。
|
||||
|
||||
参数:
|
||||
|
||||
- `-p, --page <spec>`:指定页码,从1开始;默认为所有页面。支持`3`、`1,2`、`2-10`。
|
||||
- `-s, --severity <spec>`:指定要输出的问题。支持 `all`、`error`、`warning` 以及特定问题类型,例如`MissingField,SrcNotFound`。
|
||||
- `--level <level>`:处理级别。 `keep` 只检查不修改; `auto` 尝试安全修复。
|
||||
|
||||
目前已检查以下问题:
|
||||
- `YamlParseError`:每个检查的文件必须使用 YAML 解析器正确解析。
|
||||
- `FileReadError`:对输入目录、`.pptd` 文件、页面文件或资源路径的访问异常。
|
||||
- `MissingField`:缺少必填字段,例如`.pptd.pages`、`.pptd.size` 或必需的元素字段。
|
||||
- `InvalidType`:字段类型与其定义不匹配,例如字符串、数字、布尔值、元组、数组、填充、边框等。
|
||||
- `OutOfRange`:字段值超出可接受范围,例如非正页面大小、非正边界、非法枚举值。
|
||||
- `InvalidTheme`:引用的主题令牌不存在,例如`$primary` 不存在于 `theme.colors` 中。
|
||||
- `PageNotFound`:`.pptd.pages` 引用的 `.page` 文件不存在,或者指定的页码超出范围。
|
||||
- `UnknownField`:发现当前模式无法识别的字段。
|
||||
- `BoundsOutside`:元素的边界超出页面尺寸。
|
||||
- `SrcNotFound`:`src`引用的本地资源(图像、图像填充、自定义字体等)不存在。
|
||||
- `TextOverflow`:文本可能会溢出其文本框。
|
||||
- `TextUnderFill`:文本可能占据文本框高度的 50% 以下。
|
||||
- `TextOcclusion`:文本可能会被稍后绘制的元素遮挡。
|
||||
- `TextDrift`:文本框可以跨越其下方元素的边界。
|
||||
|
||||
> 文本相关检查当前使用具有模拟文本尺寸的启发式方法,因此可能存在一些偏差。
|
||||
|
||||
`--level auto` 仅执行确定性修复:
|
||||
|
||||
- 简单的类型转换,例如`"12"` 为数字,`12` 为字符串,`"true"` 为布尔值。
|
||||
- 删除无效的可选字段。
|
||||
- 删除无法安全修复的无效元素。
|
||||
- 重写修复文件的 YAML 格式。
|
||||
|
||||
`check` 以以下格式输出问题:
|
||||
|
||||
```text
|
||||
[whether deterministically fixed][issue type:issue name] file path id="element id" issue details
|
||||
[fixed: false][Error:InvalidType] pages/page-1.page id="title" Expected 4 numbers for elements[0].bounds
|
||||
[fixed: false][Warning:TextOverflow] pages/page-2.page id="body" Text may overflow its bounds
|
||||
```
|
||||
|
||||
## 截图
|
||||
|
||||
```bash
|
||||
kimi-slides screenshot path/deck -o path/screenshots/
|
||||
kimi-slides screenshot path/deck -p 1,3,5 -o path/screenshots/
|
||||
kimi-slides screenshot path/deck -p 2-6 -o path/screenshots/
|
||||
```
|
||||
|
||||
`screenshot` 的输入必须是包含 `.pptd` 文件的目录。此命令将 `.pptd` 演示文稿渲染为图像以检查页面的视觉结果。
|
||||
|
||||
`-o, --output` 是可选的。如果省略,则会在输入旁边创建一个屏幕截图目录:
|
||||
|
||||
```text
|
||||
path/deck/ -> path/deck-screenshots/
|
||||
```
|
||||
|
||||
输出目录结构通常为:
|
||||
|
||||
```text
|
||||
pages/
|
||||
page-1.png
|
||||
page-2.png
|
||||
page-3.png
|
||||
```
|
||||
|
||||
参数:
|
||||
|
||||
- `-p, --page <spec>`:指定页码,从1开始;默认为所有页面。支持`3`、`1,2`、`2-10`。
|
||||
- `-o, --output <path>`:指定截图输出目录。
|
||||
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,165 @@
|
||||
# 组织名称 — 生产力回报风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
面向高管、战略团队和研究读者的咨询思想领导报告式 PPT。支持可读的长文本、定量图表、版块导航,具有品牌化、前瞻性的视觉感受;它不是一个低字数的销售推介页面或视觉海报式的单页页面。
|
||||
|
||||
核心页面语法:
|
||||
|
||||
1. **浅蓝色报告页**:柔和的淡蓝色-浅紫色渐变背景,带有黑色长文本、多栏解释和紫色关键数字。
|
||||
2. **黑色背景证据页**:图表位于大型黑色画布上,白色文本和紫色/粉色/橙色条或线形成强烈对比。
|
||||
3. **深色摄影部分分隔线**:封面和部分过渡使用“前进路径”图像,例如光迹、山脊线/道路/人物。
|
||||
4. **固定报告骨架**:底部有白色部分导航条,左下角有紫色“>”身份标记,右边缘有垂直的报告名称,右下角有页码。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. **证据优先于视觉戏剧**:图表、来源、数字和结论必须可读;黑色背景、紫色和摄影光效果不得模糊数据或削弱对比度。
|
||||
2. **高密度必须有稳定的骨架**:允许多个文本段落、多列模块和复杂的图表,但每个页面必须有标题区域、正文区域、页脚导航和足够的填充——避免自由浮动堆叠。
|
||||
3. **页面变化服务章节节奏**:摄影页面用于开场和章节过渡,黑色背景页面用于模型/数据证据,浅蓝色页面用于解释和建议;不要仅仅为了多样性而在每个页面上发明一个新模板。
|
||||
|
||||
## 2. 页面骨架- **画布比例**:宽屏 16:9;使用完整的矩形画布——没有肖像或社交媒体比例。
|
||||
- **默认边距**:内容页保留相对较宽的外边距;机身从左上向右中延伸,底部预留固定导航带。黑色图表块和摄影块可以几乎全出血,但仍必须避免页脚和页码。
|
||||
- **后台系统**:内容页面和目录采用淡蓝色、冰蓝色、浅紫色渐变;图表页面在浅蓝色页面上覆盖一个黑色矩形证据区域,或者让单个黑色块占据页面的大部分;部分/封面使用全出血深色摄影。
|
||||
- **标题区域**:通常位于左上角。浅蓝色页面上的黑色或紫色;黑色背景图表页面上黑色区域内的白色;放置在摄影页面上的黑暗或平静区域。
|
||||
- **正文区域**:分为文字说明区域、图表证据区域、图像区域和数字强调区域。内容页面大多为2-3栏;图表页面通常是一个大的黑色背景图表+说明性侧边栏;案例页面通常是文本+右侧或上方的照片。
|
||||
- **标题**:没有强大的标题栏;报告名称在右边缘显示为垂直文本,而不是水平顶部标题。
|
||||
- **页脚导航**:大多数非封面页面底部都有一个白色导航带。左下角有一个紫色的“>”符号;部分名称水平布置在中间,并用细垂直线分隔;当前部分更暗或更粗;右下角的页码。保持其高度低、线条细且位置稳定。
|
||||
- **右侧垂直报告名称**:内容页面、目录和某些图表页面将报告标题/副标题放置在右侧边缘。不要让它成为显眼的装饰——它应该小而不引人注目。
|
||||
- **徽标**:在封面右下角,使用完整的品牌文字标记(呈现为纯小文本,写新主题名称;不要绘制图形徽标);在内容页面上,紫色“>”身份标记主要取代了完整的文字标记;封底或封页可以恢复完整的品牌文字标记。
|
||||
- **目录页**:浅蓝色渐变背景,标题位于左上角,章节条目布置在多个水平列中;页码范围放置在章节标题上方或附近;关键部分可能带有小缩略图网格;列由细垂直线分隔。
|
||||
- **作者页**:浅蓝色渐变背景,左上角紫色标题;作者头像排列在网格中——头像、姓名、标题和一个小的专业社交平台图标形成了标准的作者卡。
|
||||
- **默认阅读路径**:左上角标题/引入→正文左栏文本→中心图表或数字→右栏补充/照片→确认该部分的底部导航。
|
||||
|
||||
## 3. 内容组织- **标题风格**:使用报告风格的陈述——判断语句、章节名称或“图X”图表标题;重要的部分分隔页可以使用大标题来提出问题或方向。不要追逐简短而有力的口号。
|
||||
- **关键信息句子**:在标题下方或图表上方放置 1-2 个解释性句子,说明发现、定义或如何阅读图表。除非是剖面摄影页面,否则不要将整个页面变成一个大的陈述句。
|
||||
- **正文组织**:短段落,左对齐;单个段落的长度为中短;每栏 2-4 个段落。避免长而不间断的文字墙。
|
||||
- **分组逻辑**:包括“问题—证据—含义”、“模型要素”、“行为/推荐列表”、“案例解释”、“数字比较”;使用列、浅色卡片、黑色背景区域或细分隔线来分隔它们,而不是使用大量图标。
|
||||
- **每页点数**:一个内容页包含1个主要主题加2-4个支撑点;高密度页面可以包含多个子模块,但必须有一个统一的整体标题,布局清晰。
|
||||
- **项目符号风格**:更喜欢小标题+段落解释;谨慎使用传统的项目符号列表;列表项应该简短,缩进要克制。
|
||||
- **关键字强调**:使用粗体、紫色数字或紫色副标题;避免浓重的彩色突出显示。每个模块最多突出显示 1-2 个关键字或数字。
|
||||
- **数字/单位/时间范围**:大量数字可能单独作为紫色或黑色信息块,并附有说明;百分比、倍数和时间范围必须与图表标签保持一致。数字不得用装饰性图形代替。
|
||||
- **来源脚注**:将小的来源/注释放置在图表和研究页面的底部或图表边缘,对比度低但可读。来源不得进入主标题层次结构,也不得用装饰颜色来吸引注意力。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A.浅蓝色多栏报告页面
|
||||
|
||||
用于概念解释、背景、建议、案例文本和少量关键数据。淡蓝色/浅紫色渐变背景,标题位于左上角,正文分为 2-3 列:左列包含引言或主要论点,中间列包含补充段落/项目符号,右列包含大量数字、图像或简短结论。使用紫色数字、粗体副标题和清晰的列宽来建立焦点并保持段落间距。如果需要复杂的数据比较,不要强迫它进入这种布局 - 切换到黑色背景图表页面。
|
||||
|
||||
### B. 黑色背景图表证据页+解释性侧边栏
|
||||
|
||||
适用于复杂的条形图、折线图、分组比较、模型推导和“图”型证据。一侧或中心是一个大的黑色矩形图表区域,内部有白色标题和说明文字;另一侧保留浅蓝色文本栏,以黑色正文文本解释调查结果。图表区域是视觉重心;使用紫色/粉色/橙色数据系列、白键注释和局部箭头/连接线。如果图表仅包含一个简单的数字,请不要使用大的黑色背景 - 它会感觉太重。
|
||||
|
||||
### C. 摄影部分/问题页面
|
||||
|
||||
用于封面、章节过渡、重要问题或临时结论。使用全出血暗摄影——山脊线、道路、剪影、科技设备、紫色光迹很常见;一个大的白色标题位于一个黑暗的区域上,还有一个较小的副标题。除了必要的标题、简短说明和品牌文字标记(纯小文本;不要绘制图形徽标)之外,不要覆盖长正文或复杂的图表。
|
||||
|
||||
### D.文字+图片案例页面用于行业案例、场景描述或具体证据。真实照片或部分设备/场景位于右侧或上方的大矩形区域中;文本位于左侧或旁边的列中。该图像不作为整页背景,也不使用任何插图。如果照片背景很杂乱,请勿将文本直接放在其上 - 将文本放在浅色区域。
|
||||
|
||||
### E.高密度模块/框架页面
|
||||
|
||||
适用于 3-5 个行为、元素、阶段或模型组件。使用水平卡片、垂直列、紫色底部标签或黑色背景公式区域进行组织;每个模块包含一个小标题、一个简短的解释段落以及必要的数字或关键字。当模块较多时,使用等宽的列和一致的padding;不要用复杂的 SmartArt 装饰代替文本逻辑。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **浅蓝色背景**:大约#D6ECFE / #E4F4FF / #DFF3FF。用于内容页、目录、作者和案例页的大背景区域;可能会逐渐渐变为浅紫色,但不得变得过饱和。可替代性低——这是该风格的核心。
|
||||
- **浅紫色背景过渡**:大约#DAE3F9 / #D8E3FA / #C2A1BC。用于背景渐变边缘、卡底或局部氛围;中低区域。同一色系内可调整;不建议改用大的暖色底色。
|
||||
- **黑色/近黑色证据基础**:大约#08151C / #201F20 / #000000。用于图表画布、公式模型、暗部页面的文本承载区域;区域范围可以从半页到大部分页;不得破碎成碎片与浅蓝色正文文本混合。
|
||||
- **主要文本黑色**:大约#111111 / #201F20。用于淡蓝色背景上的正文、副标题、页脚导航和表格文本;高对比度是强制性的。不得以浅灰色代替作为主体颜色。
|
||||
- **反转白色文本**:#FFFFFF 或接近白色。用于黑色背景图表、摄影页面标题和封面标题;仅在深色背景上。
|
||||
- **品牌紫色/强调紫色**:大约#A100FF / #8A00E6 / #7F35FF。用于“">”身份标记、关键数字、关键图表系列、标签和一些副标题;中小面积。可以向品牌的原色进行微调,但不得用多种不相关的鲜艳颜色代替。
|
||||
- **粉紫色/洋红色数据颜色**:大约#D000FF / #C000C8。用于图表或黑色背景卡片中的第二个强调系列;仅提供数据分组服务,不提供大块正文文本。
|
||||
- **橙色/珊瑚色数据颜色**:大约#D38778 / #D7AA9F。用于封面灯光效果、图表中的对比系列或暖色调;面积小;不得成为主体颜色。
|
||||
- **灰色支持**:大约#8C95A4 / #A8ABBC / #C7CAD6。用于轴、分隔符、注释、非键标签和导航分隔符;保持不显眼。
|
||||
- **桌子底座/灯卡底座**:大约#E8F3FC / #DCEFF8。用于高密度表格或信息框,与背景略有区别。
|
||||
|
||||
保留蓝紫色系列 + 黑/白/灰 + 1 种暖色数据中的单个页面。状态颜色不突出;如果需要正/负状态,则更喜欢文本标签和紫色/灰色深度变化,并谨慎引入红色/绿色。
|
||||
|
||||
## 6. 字体和文本层次结构- **字体字符**:正文主要使用Arial系列无衬线字体;标题、章节或目录条目可以使用 Times New Roman 类衬线;少量粗体投石机用于特殊标题或品牌文本。总体上避免使用手写体、手写体和圆形卡通字体。
|
||||
- **正文**:1x,用于段落、解释、作者标题和页脚导航。
|
||||
- **脚注/来源/页码**:大约0.6–0.8x,低调但可读;页码不应放大为装饰数字。
|
||||
- **副标题/模块标题**:大约 1.1–1.4 倍,可能是粗体或紫色。
|
||||
- **图表标签/轴**:约 0.7–0.9x,黑色背景上白色/灰色,浅色背景上黑色/灰色;保持清晰,不与头衔竞争。
|
||||
- **关键信息句子/重点强调**:约 1.2–1.6x,位于标题和正文之间。
|
||||
- **页面标题**:大约 2–3x,在内容页面上左上角对齐;目录/作者页标题可能会稍大一些。
|
||||
- **封面/部分大标题**:约 3–5 倍,白色或黑色,具体取决于背景;整个页面的第一个视觉层次。
|
||||
- **大数字**:约 2.5–4x,通常是紫色,搭配 0.9–1x 说明文字;数字必须带有单位或上下文。
|
||||
|
||||
文本主要是左对齐的。居中的副本可能仅出现在封面或摄影部分的页面上;避免内容页面上出现大的居中块。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
主要图表类型有条形图、分组条形图、折线/趋势图、公式/模型类型图以及少量矩阵比较。
|
||||
|
||||
- **图表画布**:更喜欢黑色或接近黑色的矩形,边缘干净,没有粗边框或阴影;浅蓝色文本区域的清晰边界。
|
||||
- **标题和编号**:将“图 X”加上解释性标题放在图表区域的左上角,为白色;标题应说明阅读图表的目的,而不仅仅是图表类型。
|
||||
- **轴和网格线**:使用低亮度的细灰色线,数量较少。不要用密集的网格产生噪音。
|
||||
- **数据系列**:主要是紫色、粉紫色和橙色/珊瑚色;非重点系列采用灰色或深紫色;系列的数量应该受到限制——避免彩虹色。
|
||||
- **标签**:关键数据可以直接标记在条形顶部或线附近;白色或浅灰色的小标签。避免所有标签堆放得难以辨认。
|
||||
- **图例**:小而清晰,放置在图表右侧或上方;色样/线段必须与系列相匹配。
|
||||
- **关键注释**:白色箭头、弯曲连接器、括号或简短注释可能会强调趋势/差距;注释必须服务于结论,而不是装饰。
|
||||
- **预测/目标/基线**:使用虚线、细线或带有文字说明的单一强调色;不要用大的半透明带覆盖数据。
|
||||
- **边界**:在图表很少的页面上不强行插入图表;当没有数据时,使用文本模块或数字卡代替。
|
||||
|
||||
## 8. 表格和高密度信息- **标题**:使用黑底白字、浅紫色/浅蓝色黑字或粗体文字;限制高度,左对齐文本。
|
||||
- **行/列结构**:用细灰线或浅色基块分隔;避免重型网格;按重要性分配列宽——第一列可能稍宽。
|
||||
- **行高**:容纳 1-3 行文本;高密度页面可以压缩,但文本绝不能接触线条或重叠。
|
||||
- **基色**:普通细胞为浅蓝色/浅紫色,高对比度证据表为黑色背景;如果使用斑马条纹,它应该非常微妙。
|
||||
- **关键行/列**:用紫色文本、紫色条、粗体或深色底色上的反白突出显示;不要同时使用多种状态颜色进行标记。
|
||||
- **数字对齐**:数字、百分比、金额和年份按列对齐,并使用统一单位;解释性文字左对齐。
|
||||
- **符号/评级点**:可以使用简单的点、短划线、勾号或紫色标记;它们必须是低装饰且明确的。避免使用彩色图标评级系统。
|
||||
- **摘要行**:使用粗体、顶部分隔线或深色底座处理 - 无凸起阴影。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
- **底部导航**:细白带+紫色“>”+水平部分名称+细垂直线+页码;不得被正文内容覆盖。
|
||||
- **右侧垂直报告名称**:小,靠近边缘,对比度低。不要把它变成一个大的侧边栏。
|
||||
- **紫色“>”品牌符号**:用于左下角并用于本地品牌提示;面积小——不能成为到处使用的大装饰箭头。
|
||||
- **标题栏/图表标题块**:位于黑色图表区域的左上方,由“图X+结论标题”组成,白色文字分层,紧凑,左对齐。
|
||||
- **数字强调块**:大的紫色百分比/值+短的黑色说明文字;通常每页 1-3 个;避免过度使用。
|
||||
- **浅色信息框**:用于“工作中的知识”式补充、定义、提示或行动建议;底色比背景稍深,填充稳定,文字密度中等。
|
||||
- **紫色标签/卡座**:用于模型或行为页面上的简短推荐或关键句子;适合作为黑色区域内的重点强调,但保持较低的计数。
|
||||
- **图片框**:矩形真实照片,边缘干净,无粗边框;可以占据页面的一半或三分之一,与文本分开。
|
||||
- **流程箭头/模型符号**:使用简单的箭头、乘号、加号、连接线来表达公式或关系;线条细,颜色主要有白色、灰色、紫色。
|
||||
- **图标**:仅使用一些功能性小图标,例如专业社交平台标记。不要扩展到彩色图标系统。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
一种扁平、内敛、类似报告的技术咨询风格,通过深色摄影、黑白对比、紫色品牌口音和数据图表来构建视觉焦点——而不是复杂的装饰。
|
||||
|
||||
**禁止**:
|
||||
|
||||
- 表情符号、卡通贴纸、社交媒体风格的图标、大型彩色插图。
|
||||
- 3D 字体、立体按钮、发光轮廓、浓重阴影、玻璃形态卡片。
|
||||
- 复杂的纹理背景、华丽的边框、彩虹渐变、无意义的装饰线条。
|
||||
- 大块居中的正文、放置在繁忙照片上的文本、低对比度的浅灰色正文。
|
||||
- 没有数据源的假图表,纯粹为了美观而添加的仪表板组件。
|
||||
|
||||
**谨慎使用**:- 渐变:仅浅蓝色-浅紫色背景或摄影光轨氛围;没有强烈的多色渐变。
|
||||
- 阴影:源文件几乎不依赖阴影;生成时避免它们;如果用于图像分层,请保持它们非常微妙。
|
||||
- 圆角:不是主要特征;卡片和图像应该有方形或略圆的角——不要成为圆角的 SaaS 风格。
|
||||
- 彩色图标:仅在功能标记中可见,例如作者页面上的专业社交平台图标;不应在正文页面中大量使用。
|
||||
- 照片:可用于内容中的案例或场景,但必须分区;不要将每一页都设置为摄影背景。
|
||||
|
||||
**可在特殊页面上使用**:
|
||||
|
||||
- 全出血深色照片、强光轨迹、大白色标题:用于封面和部分过渡。
|
||||
- 大黑色背景:用于图表证据、模型推导和深色结束/附录样式页面。
|
||||
- 完整的品牌字标(纯小文字,写新主题名称;不绘制图形标志):更适合封面和封底;内容页面主要使用紫色“>”。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 是 16:9 的报告页而不是海报/社交卡吗?
|
||||
- 页面类型是否明显属于以下之一:浅蓝色内容页、黑色背景证据、摄影部分、案例文本+图像、作者/目录?
|
||||
- 是否保留底部白色导航带,左下角有紫色“>”、章节名称和页码;内容页面右侧是否有垂直报告名称?
|
||||
- 标题是否左对齐且采用报告格式;正文中的段落是否过长?
|
||||
- 调色板是否以蓝紫黑白灰为主,暖色仅补充少量数据/光迹?
|
||||
- 紫色是否用于品牌、数字和关键点,而不是大面积泛滥?
|
||||
- 图表是否有标题、标签、图例/来源以及黑色背景的足够对比度?
|
||||
- 表格是否使用细线、统一对齐、基色克制、数字单位一致?
|
||||
- 图像是否是真正的摄影,并且与文本分开,没有将长文本压在繁忙的背景上?
|
||||
- 是否避免使用表情符号、3D、重阴影、复杂装饰、彩虹色和无意义的图标?
|
||||
- 您是否检查过文本溢出、截断、乱码、重叠、低对比度、遮挡、空内容、覆盖页脚和错误比例?
|
||||
- 每一页是否都有一个主要主题和清晰的阅读路径,且不会因模板重复或元素堆叠而削弱信息?
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 1.4 MiB |
@@ -0,0 +1,198 @@
|
||||
# PJ Mountain — 业务 DD 报告(组织名称)风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适用于商业尽职调查、市场研究、战略诊断、管理决策报告等高信息密度场景。它使用白色风景画布、黑色结论标题、薄灰色分隔线、深海军蓝结构块、蓝色数据强调以及密集的图表和表格。标题区写明“本页判断/分析主题”;条形图、堆积条形图、折线图、热图、矩阵和多列文本提供了证据;页脚固定地包含来源、公司名称和页码。大图像、插图和装饰图形很少出现;品牌颜色只服务于结构和强调,而不服务于氛围。
|
||||
|
||||
**基本原则**
|
||||
|
||||
1. **证据优先于装饰。** 必须首先保留图表、表格、脚注、来源和测量基础注释;如果页面拥挤,请压缩装饰和空白,而不是删除数据标签或源。
|
||||
2. **一致性优先于每页变化。** 允许使用右侧解释栏、左侧深色意见栏、目录突出显示或基于灰色的解释区域等变体,但标题区域、页脚、分隔符、字体层次结构和品牌颜色语法必须保持稳定。
|
||||
3. **品牌颜色具有可读性。** 结构和关键类别采用深海军蓝;亮蓝色表示数据强调和选定状态;当品牌颜色降低对比度或混淆数据时,首选黑色、灰色、白色和清晰的标签。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
**画布比例:** 宽屏 16:9 横向。默认白色背景;目录页和说明栏可以使用浅灰色;部分/意见页面可以使用深海军蓝垂直块。内容页面不使用全屏图像背景。
|
||||
|
||||
**边距和网格:**保持左右外边距稳定;标题区域位于顶部,正文的矩形工作区位于标题规则下方,固定的页脚区域位于底部。正文通常使用 2 列、3 列、图像-左-文本-右、表格-左-注释-右或图表-上-上-脚注-下。
|
||||
|
||||
**标题区:**左上角的主标题通常为1-2行,采用大号黑色衬线粗体或粗体标题样式;下面是无衬线副标题,说明主题、范围、单位或测量基础。标题下的一条细灰色/黑色水平线分隔了证据区域。
|
||||
|
||||
**正文区域:**包含图表、表格、流程图/结构图、并行模块和解释性文本。通常主要证据位于左侧;右侧的解释、背景、结论或补充材料;多模块页面从上到下、从左到右阅读。
|
||||
|
||||
**页脚:**固定包含来源/脚注、公司名称和页码。来源位于左下方或图表下方,其尺寸明显小于正文; “组织名称”和页码位于右下角。页脚上方通常有一条细线将正文分开。
|
||||
|
||||
**徽标和品牌:** 封面的左上角带有品牌文字标记,以纯小文本形式显示新主题名称或留空 - 未绘制图形徽标;内容页面通过页脚公司名称来传达品牌,而不是通过在每个模块中重复放大的徽标。
|
||||
|
||||
**页面类型:**- **封面:**左侧包含品牌字标、项目名称、报告类型、日期和保密声明;右侧采用蓝色线性曲线图形作为唯一强烈的视觉元素。封面不使用内容页页脚和页码结构。
|
||||
- **目录页:**大尺寸内容位于左侧白色区域,章节结构位于右侧浅灰色区域;当前部分可能会用深海军蓝水平条突出显示。 TOC页面强调导航,没有数据图表。
|
||||
- **内容页:**以白色背景为主,顶部结论标题+规则+正文证据+底部来源/页码。
|
||||
- **部分/进度页面:**重用内容结构,并用深海军栏标记当前位置;它们可以作为各部分之间的过渡,但不得推广到普通内容页面。
|
||||
- **高密度附录/分析页面:**允许更小的文本、更密集的表格和更强的栏目,但保留标题、脚注和页码。
|
||||
|
||||
**默认阅读路径:**标题判断→副标题/单位→图表或表格中最大差异→右侧/底部说明→来源和脚注。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
**标题风格:**使用分析性主题或结论句,而不是营销口号。常见的结构是“主题+趋势/判断+关键数字/范围/原因”,控制在1-2行;当标题已包含结论时,副标题仅添加测量依据。
|
||||
|
||||
**关键信息句子:**放置在图表上方或右侧,说明数据范围、单位、复合年增长率、市场定义、样本或情景;他们直接为图表提供服务——没有抽象的促销路线。
|
||||
|
||||
**正文组织:** 使用短段落、项目符号、编号或副标题组,每个项目符号表达一个事实或原因。避免长居中的副本。使用粗体关键字、缩进、规则和模块标题组织密集的文本。
|
||||
|
||||
**每页点数:** 一个标准的内容页围绕1个主要判断,最多包含2-4个支持论点。高密度页面可能包含多个证据块,但它们必须共享相同的分析问题;不要将不相关的图表拼贴到一页上。
|
||||
|
||||
**分组逻辑:**按市场/客户/产品/竞争/组织,或按时间、地区、细分、增长动力或影响程度分组。并行模块必须是同构的:标题位置、度量定义和基础、颜色含义一致。
|
||||
|
||||
**关键字强调:** 使用粗体、深海军蓝副标题、亮蓝色数字和浅灰色底框。避免使用彩色荧光笔、表情符号、夸张的感叹号或装饰性下划线。
|
||||
|
||||
**数字和单位:**数字必须带有单位、时间范围和必要的计量基础;增长率、复合年增长率、份额和金额在图表标题、轴标签或脚注中指定。预测、目标和实际情况通过颜色、破折号或标签来区分,而不仅仅是通过文本解释来区分。
|
||||
|
||||
**来源脚注:**所有数据图表和表格必须有来源/注释/测量基础注释。使用最小的文本级别,放置在图表底部或页脚左侧;从来不在视觉中心。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
**A。结论标题+单一主图+右侧说明栏**
|
||||
|
||||
用于核心趋势或规模判断。左边 65%–75% 持有条形图、堆积条形图或折线图;右边的 20%–30% 拥有浅灰色背景说明栏或白色标题栏,其中包含背景、增长动力和管理含义。使用亮蓝色系列、粗体数字、箭头或一些椭圆形标签来强调。不适合多主题并排布局或需要逐项扩展的复杂分类页面。
|
||||
|
||||
**B。结论标题+多栏文字分析页**用于文本论证,例如趋势、市场特征、驱动因素和风险点。正文分为 2-3 栏,每栏都有一个编号的副标题和一小段解释;列之间的间距较窄或线条较细,并保留粗体关键字。这种布局信息密集,但视觉证据较弱——不要在太多连续页面上使用它;如果有关键数字,请切换到图表页面。
|
||||
|
||||
**C。图表+机制/流程说明组合页**
|
||||
|
||||
用于从传统状态到新状态、价值链、业务流程或组织转型的迁移。趋势图位于左侧或中间;垂直流块、箭头或舞台音符位于右侧;深海军蓝/亮蓝色块标记目标状态、关键步骤或强调的链接。流程组件有助于解释——它们不能取代数据证据。
|
||||
|
||||
**D。高密度表格/矩阵页**
|
||||
|
||||
用于对客户、竞争对手、产品、功能、KBF 或机会点进行多维度比较。正文是一个大表格或矩阵,具有清晰的标题和精细的行/列分隔;关键单元格使用蓝色、灰色底座、评级点或符号标记。右侧可能有一个深度海军意见专栏,总结 2-4 个关键发现。不适合讲述单一趋势,也不适合缺乏可比维度的内容。
|
||||
|
||||
**E。深色侧边栏意见页面**
|
||||
|
||||
用于章节开头、强烈意见摘要或将“解释”与“证据”分开。左侧或右侧的深海军蓝垂直列大约占宽度的四分之一到三分之一,内部有白色文本和亮蓝色副标题;另一侧持有白色背景图表/表格。深色柱不得被滥用作为装饰背景——仅在需要指导、结论压力或部分识别时才使用它。
|
||||
|
||||
**F。目录/进度导航页面**
|
||||
|
||||
用于部分过渡。左侧为内容,右侧为浅灰色内容区域,当前部分以深海军蓝突出显示。它只负责导航——不进行身体分析。生成新主题时,保留章节编号、层次结构、页面范围和突出显示语法。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
**背景白色#FFFFFF**:内容页的主背景,面积最大。不能用彩色背景代替;除 TOC/解释列外,不建议使用大色基。
|
||||
|
||||
**浅灰色背景#E6E6E6 / #E9E9E9**:用于目录的右侧区域、侧面说明栏、表格基础和本地背景。用于结构区分;明度可能会略有调整,但不建议更换为高饱和度的品牌颜色。
|
||||
|
||||
**主要文本黑色 #000000 / 深灰色 #222222**:用于标题、正文、图表标签和表格文本。低对比度灰色不得取代正文。
|
||||
|
||||
**品牌深海军蓝#051C2C**:用于深色侧边栏、关键结构块、一些栏系列、标题栏和流程块。可以用同等深度的公司原色代替,但白色文本必须保持可读。
|
||||
|
||||
**亮蓝色#2150FE / #1F5BFF**:用于强调数据系列、当前状态、关键标签、所选项目和关键流程块。不得大面积分布;如果用品牌颜色代替,它必须保持高饱和度、高对比度,并且与深海军蓝不同。
|
||||
|
||||
**浅蓝色#BBD5EE / #DAE7F3 / #E6EEF6**:用于辅助数据系列、浅色面积图、覆盖线性图形和弱表格强调。不能携带白色正文;避免太轻而失去边缘。
|
||||
|
||||
**中性灰色#747474 / #8E9294 / #A4A4A4 / #D0D0D0**:用于辅助条形图、轴、网格线、表格线、标题和不强调的类别。灰色步骤可以被替换,但层次结构必须保持。**状态颜色边界:**没有建立红绿黄状态系统。当需要正/负状态时,更喜欢深度变化、标签和箭头;红色/绿色只能谨慎且谨慎地用于明确的正面/负面效果——它们不得改变套牌平静的蓝灰色气质。
|
||||
|
||||
**每页原色限制:**内容页使用黑/白/灰+深海军蓝+亮/浅蓝色。除非必须区分数据,否则不要引入第三种高饱和度颜色。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
**字体字符:**正文和大多数标签使用 Arial 级无衬线字体;封面主标题和内容页大标题可以使用Times New Roman Bold 级衬线粗体。斜体 Arial 很少用于注释、脚注或源代码行中的解释性文本。
|
||||
|
||||
**相对层次:**
|
||||
|
||||
- **封面项目名称:** 大约 3.5–4.5 倍正文大小,衬线粗体,甲板上最大的文本之一。
|
||||
- **内容页主标题:** 大约 2-3 倍正文大小,黑色,允许 1-2 行,结论在前。
|
||||
- **章节/TOC 标题:** 大约是正文大小的 2-3 倍,通常与大量空白或浅灰色内容区域配对。
|
||||
- **副标题/图表标题:** 大约 1.1–1.4 倍正文大小,可以是粗体;说明主题、单位和测量基础。
|
||||
- **正文和项目符号:** 定义为 1x,行间距紧凑但从不重叠。
|
||||
- **表格文本/图表标签:** 大约 0.75–1x 主体大小;数字标签可能稍小,但必须保持可读。
|
||||
- **注释、来源、脚注、页码:** 大约 0.55–0.75 倍正文大小,信息完整,但视觉上凹进。
|
||||
|
||||
**粗细规则:**粗体用于标题、副标题、表格标题、关键词和关键数字;不要加粗大段的长正文段落。斜体仅用于音符音调或来源归属,而不是主要强调手段。
|
||||
|
||||
**对齐方式:**标题和正文以左对齐为主;表格中的数字右对齐或小数点后对齐,类别文本左对齐。避免大的中心块。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
商业分析图表包括条形图、堆积条形图、折线/趋势线、组合图、市场规模预测、份额/排名图以及一些散点/气泡型标记。图表必须证明标题——它们不是装饰。
|
||||
|
||||
**坐标轴和网格:**坐标轴使用细灰色或黑色;网格线非常细,不需要时可以省略。轴标签较短;单位位于图表标题中或轴旁边。横轴通常是年份、细分市场或类别;纵轴包含金额、份额、指数等。
|
||||
|
||||
**系列颜色:**重点系列采用深海军蓝或亮蓝色;次要/历史/其他类别使用灰色或浅蓝色。堆叠栏中相同类别的相同颜色必须在页面之间保持一致 - 不要随机更改页面之间的颜色。
|
||||
|
||||
**数据标签:**直接标记关键柱、最近一年、CAGR、预测端点和比较差异。让标签靠近数据点;避免让读者依赖复杂的传说。
|
||||
|
||||
**预测和基线:**预测年份、复合年增长率、目标或基线可以用虚线、箭头、括号、椭圆标签或不同的灰蓝色调来区分。必须说明实际/预测间隔——仅靠颜色是不够的。
|
||||
|
||||
**图例:**放置在图表上方或图表内部的空白区域;系列较少,更喜欢直接标签。色样必须与图形相匹配;小无衬线文本。
|
||||
|
||||
**注释:** 避免使用短箭头、括号、CAGR 标签、圆形/椭圆形小标记。没有发光、阴影、3D 条形或透视效果。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格用于比较竞争对手、客户、产品、功能、市场属性和机会点——作为分析工具,而不是装饰性列表。**标题:**使用粗体、深色文本或深海军蓝/浅灰色底色。列标题可以有多行,但必须使用可比较的定义和测量基础。如果标题很长,请将其拆分为主标题 + 副标题 - 不要将其挤得难以辨认。
|
||||
|
||||
**行/列和分隔:**主要是细灰色线,水平方向多于垂直方向;浅灰色底色可以区分标题、组行或说明列。避免厚重的边框和复杂的网格。
|
||||
|
||||
**行高和密度:**允许高密度,但每行需要稳定的基线和足够的间距。长文本应该分成几行或作为片段来表述——切勿溢出单元格。
|
||||
|
||||
**关键标记:**关键行/列可以使用深海军蓝条、浅蓝色底色、亮蓝色文本、粗体、评级点、检查/符号或小标签。翼形符号可以谨慎地用于状态/标记,但不得成为彩色图标系统。
|
||||
|
||||
**对齐方式:** 文本左对齐;右对齐数字或对齐数字位置;以统一的格式保存百分比、金额和年份。排名、分数和状态点居中对齐。
|
||||
|
||||
**斑马条纹和底色:**浅灰色斑马条纹或局部浅灰色底色可以提高可扫描性,但不能太暗。表格基色必须保持黑色文本的高对比度。
|
||||
|
||||
**摘要和注释:**摘要行、平均值或关键结论位于表格底部或右侧注释栏中;来源和测量基础注释位于表格正下方。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
**细水平线:**分隔标题区域、正文区域和页脚。线条是细的、灰色的或黑色的;不要用粗彩色线代替它们。
|
||||
|
||||
**深海军蓝侧边栏:**用于高密度表格旁边的章节意见、结论摘要、解释栏或指南。白色文字,亮蓝色副标题,里面有短项目符号;它是一个信息容器,而不是装饰色块。
|
||||
|
||||
**浅灰色说明框:**用于背景、增长动力、假设和补充说明。放置在页面右侧或表格旁边;必须有副标题。
|
||||
|
||||
**目录突出显示栏:** 深海军蓝水平栏用反白文本标记当前部分。仅用于目录/进度页面。
|
||||
|
||||
**数据标签和徽章:** CAGR、最新值、预测值和关键类别可以使用小标签、省略号或胶囊标记;颜色保持深海军蓝、亮蓝色或灰色;将它们放在相应数据附近。
|
||||
|
||||
**流程块和箭头:**用于迁移路径、阶段和机制说明。形状为矩形、圆角矩形或深蓝色/亮蓝色/灰色的简单箭头。没有复杂的 SmartArt 样式、尺寸箭头或渐变箭头。
|
||||
|
||||
**图像框架:**如果使用屏幕截图/系统界面,请将它们仅作为证据材料嵌入,保留矩形边界和标题 - 没有大的情感图像。
|
||||
|
||||
**图标:**彩色图标并不是这种风格的稳定语言。如果必须显示状态,请使用单一颜色或蓝灰色系列的简单符号、点、检查、箭头或文本标签。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
总体而言,扁平、克制、数据驱动、咨询报告的质感,通过排版、线条、表格、图表和有限的色块构建专业精神。
|
||||
|
||||
**禁止:**
|
||||
|
||||
- 大照片背景、视频静态背景或情感全屏图像;
|
||||
- 表情符号、卡通插图、复杂的彩色图标、贴纸式装饰;
|
||||
- 3D 图表、透视条、发光、强烈阴影、玻璃形态、纹理背景;
|
||||
- 大渐变色块作为身体背景;
|
||||
- 大型居中文案、营销口号标题、无源数据;
|
||||
- 随机多调色板或多个高饱和度颜色在一页上竞争。
|
||||
|
||||
**谨慎使用:**- 圆角:可用于小标签、流块、椭圆标记;一定不能概括为卡片式的 UI 风格;
|
||||
- 阴影:源文件几乎不依赖它们;如果用于嵌入式屏幕截图,请使其保持极轻;
|
||||
- 红/绿状态颜色:仅用于明确的积极/消极/风险/机会,谨慎使用;
|
||||
- 屏幕截图:仅作为事实证据——它们需要标题、边界、来源或说明。
|
||||
|
||||
**可用于特殊页面:**封面可使用蓝色直线曲线图形; TOC可以使用大的浅灰色内容区域和深海军蓝高亮条;部分进度页面可以加强空白和导航,但不得引入类似海报的视觉效果。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 是 16:9 横向,以白色背景为主,有稳定的标题区、正文区和页脚区吗?
|
||||
- 标题是分析性主题还是结论句,而不是空洞的口号?是否控制在1-2行?
|
||||
- 页面是否只有一个主要判断,并有图表/表格直接支持该判断?
|
||||
- 是否保留来源、脚注、单位、时间范围以及实际与预测的基础?
|
||||
- 调色板是否仅限于黑/白/灰+深海军蓝+亮/浅蓝色,仅在关键点上使用亮蓝色?
|
||||
- 正文是否为 Arial 级无衬线字体,且标题允许采用正式衬线粗体?是否避免了对特定点大小的依赖?
|
||||
- 图表是否使用平条、堆叠条、线条、标签和细灰轴,避免 3D、渐变和过多的图例?
|
||||
- 表格是否有清晰的标题、细小的分隔符、统一的对齐方式、可读的行高和必要的关键标记?
|
||||
- 右侧的说明栏或深色侧边栏是否具有结论/背景功能而不是纯粹的装饰?
|
||||
- 是否避免使用照片背景、表情符号、复杂的图标、阴影、发光、纹理和随机颜色?
|
||||
- 您是否检查过文本溢出、截断、乱码、重叠、低对比度、遮挡、空内容、错误比例以及缺失页码/来源?
|
||||
- 生成多个页面时,目录突出显示、页脚、颜色语法、图表编码和标题层次结构是否一致 - 避免每个页面看起来像不同的模板?
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 1.0 MiB |
@@ -0,0 +1,141 @@
|
||||
# 组织名称 · 2023.05 报告名称 CEO 生成式 AI 风格设计系统路线图
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
咨询公司向首席执行官、高管和商业领袖进行的演讲,内容涵盖趋势洞察、战略路线图、风险识别和组织行动建议。它使用高密度的商业论证:每一页首先给出结论,然后用图表、表格、比较框、案例摘录或行动列表来支持它。
|
||||
|
||||
核心设计:带有标题的深色科技照片横幅;白色/极浅灰色的机身让阅读变得轻松;薄荷绿和品牌绿组织层次结构;带有小脚注的高密度网格保持了报告的感觉。阅读路径是“论点优先+证据展开+来源作为支撑”。
|
||||
|
||||
基本原则:
|
||||
- **论证优先于装饰**:每页的顶部必须是一个独立的判断或面向行动的标题;图表、表格和组件仅服务于该判断。
|
||||
- **绿色仅用于结构和强调**:浅绿色用于背景分区和标注块,深绿色用于关键数字、标签、路径、条形和积极状态;绿色不得扩展为任意整版装饰色。
|
||||
- **网格必须驯服高密度**:多个证据点必须位于列、行、卡片、矩阵、流或表中;避免自由浮动的分散、未对齐的拼贴和任意放大的局部元素。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
- **画布比例**:水平 16:9 宽屏,专为报告阅读而不是大型舞台演示而设计。
|
||||
- **默认背景**:内容页面使用白色或极浅灰色;浅灰色用于表格底座、模块底座或底部摘要带。封面、封底和一些章节/过渡页使用深色技术摄影。
|
||||
- **标题区域**:内容页面顶部有一个固定的深色窄横幅,嵌入深色照片或近乎黑色的基色;标题左对齐,白色,粗体,一个完整的判断语句。小节编号或进度标签(例如“1a / 1b / 2b”)可能会出现在标题的下边缘或正文的左上角。
|
||||
- **身体区域**:位于横幅下方。常见的排列方式有左右分栏、三栏卡片、象限/矩阵、图表+注释、表格+旁注、中心模型+周围说明等;边距紧凑且严格对齐,由细线、浅灰色底色或空白分隔。
|
||||
- **页脚**:底部的一个小灰色脚注/来源/版权区域,左对齐;右下角或底部边缘的小页码。脚注通过空格或细线与正文分开,并且永远不会混合到正文中。
|
||||
- **徽标和品牌**:在封面的左上角,组织名称和报告名称的纯小文本组合(写下新主题名称)或留空;封底上,品牌文字标记位于深色照片上;两者都没有绘制图形标志。内容页面没有大规模重复徽标——黑色横幅、绿色系统和脚注风格带有品牌识别度。
|
||||
- **封面骨架**:全出血暗化照片;左上角有一个浅绿色的品牌块;页面中部向左/中心的水平浅绿色半透明标题块;标题为黑色粗体;小衬线/斜体级别的日期。绿色块的下边缘可能带有细垂直条纹。
|
||||
- **章节/过渡页面**:左侧浅绿色块或深色照片块承载章节主题,右侧有项目符号列表;增加空白并保持左对齐。
|
||||
- **关闭/免责声明页面**:免责声明页面使用白色底色、浅绿色副标题和灰色正文块;后盖恢复深色摄影和白色品牌字标。
|
||||
- **默认阅读路径**:顶部横幅结论→左上角数字/模块标题→主图表或中心模型→右侧/下方解释→脚注来源。## 3. 内容组织
|
||||
|
||||
- **标题风格**:使用结论句、判断句或动作句——而不仅仅是名词;表达诸如“正在发生什么”、“为什么重要”、“首席执行官应该如何行动”、“风险在哪里”等含义。标题可以更长,但必须在横幅内的一到两行内保持可读性。
|
||||
- **关键信息句**:标题下方或正文左上角,可能会出现“数字+短语”阶段标签;数字使用绿色或黑色小标签。
|
||||
- **正文组织**:以短段落和项目符号组织的微点。避免连续全出血的长段落;将长解释分成卡片、左右列或表格行。
|
||||
- **分组逻辑**:偏好时间/阶段递进、左右对比、矩阵比较、“三并列”、“二类对比”、“核心/非核心”、“传统/新类型”、“机会/风险/行动”。
|
||||
- **每页点数**:每页一个主要判断,内有3-6个证据点、项目符号或比较维度。如果需要6个以上的并行点,请转换为表格或拆分为两页。
|
||||
- **关键字强调**:使用粗体、绿色文本、绿色标签、浅绿色基块、环或边框;风险或警告可以使用小面积的洋红色/玫瑰色标记。不要使用荧光多色、高饱和度红蓝混合或大彩虹强调。
|
||||
- **数字和单位**:数字直接位于条形图、标签、表格单元格或关键结论旁边;单位和时间范围位于图表标题、轴标题或脚注中。增长率、年份、市场规模和股票类型数据应该比解释性文字更加突出。
|
||||
- **引述和案例**:外部引述使用引号、浅绿色引述块或新闻摘录框;引用是提供证据的,不能取代页面的主要结论。
|
||||
- **来源脚注**:图表、市场规模、案例截图和报价均保留其来源;使用极小的灰色文本,最好是左对齐,远离主要阅读流程。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 顶部横幅 + 三列/多列意见卡
|
||||
|
||||
针对概念差异、能力特征、风险类别和组织要求。正文分为三栏或四栏,每栏都有一个小图标/副标题/简短标题/一些项目符号;列标题为绿色,列由浅灰色垂直线或空格分隔。关键列可以添加浅绿色底座或深绿色标签;每栏包含一个小要点和 2-4 个支持注释。当必须显示连续数据或复杂因果链时,请勿使用此布局。
|
||||
|
||||
### B. 主图+右侧证据/说明卡
|
||||
|
||||
了解增长趋势、市场规模、采用率和预算变化。该图表大约占一半到三分之二;解释框、新闻摘录或要点位于右侧或上方。图表采用绿色初级系列和灰色次级系列,直接标注关键数据;卡片使用浅灰色或白色底色,带有细边框和一些绿色标题。每页只有一个主要图表结论 - 避免堆叠多个不相关的图表。
|
||||
|
||||
### C. 左侧大意见块+右侧行动说明
|
||||
|
||||
针对 CEO 行动建议、路线图提示和核心问题定义。左边一个大的浅绿色基块承载着核心判断、问题或分类模型;右侧用项目符号、短段落或案例解释了行动的含义。环、双圆、箭头或分隔线可以将它们连接起来。如果页面的重点是数据证明,请减少大意见块的区域以避免挤压图表。
|
||||
|
||||
### D. 比较矩阵/表格页用于比较技术阶段、业务用例、风险维度、组织能力和部门职责。使用列标题+行尺寸;浅绿色或深绿色的标题,包含短语或项目符号的单元格。关键列/行使用绿色底色、粗体或图形标记。如果维度少于 2×2,请使用卡片而不是表格。
|
||||
|
||||
### E.中心模型+周边讲解
|
||||
|
||||
用于框架、能力系统、治理模型或价值链。圆、环或矩阵核心位于中心,周围有 4-8 个解释节点,通过细线、箭头或空间关系连接。中心通常为绿色,外围为浅灰色/浅绿色。这种布局强调结构关系,不适合长文本段落或精确值。
|
||||
|
||||
### F. 流程/路线图布局
|
||||
|
||||
对于诸如“发现——选择——构建——治理——规模”之类的行动步骤。使用水平或垂直步进条,绿色标记当前/关键阶段,灰色标记辅助阶段;每个步骤下方都有一个简短的标题。流向箭头应该是轻量且扁平的——没有复杂的尺寸箭头。如果步骤不连续,请转换为矩阵卡或并行卡。
|
||||
|
||||
### G. 新闻/案例拼贴页面
|
||||
|
||||
对于外部事件、公众情绪、风险实例或现实世界的证据。新闻卡片、截图或摘录必须遵守网格边界和统一标题横幅;屏幕截图不应填满整个页面,并应带有解释性标签。此布局是证据页面,不得成为常规内容模板。
|
||||
|
||||
### H. 联系人/附录列表页面
|
||||
|
||||
对于团队、作者、联系人和免责声明。使用头像或文本卡网格;姓名/头衔以粗体显示,角色、电子邮件和链接位于较小的级别。减少图表并强调重点。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **近黑色/深木炭 #0B0C0D、#0D0F0F、#191E1F**:用于标题横幅、深色照片叠加层、封底背景和主要正文文本。不能用鲜艳的品牌色来代替——那会破坏咨询报告的权威性。
|
||||
- **白色/极浅灰色#F1F1F1、#F2F2F0、#ECEDED**:用于主页背景、内容库、表格空白区域和卡片库。可以在白色和浅灰色之间切换,但不得成为高饱和度的彩色背景。
|
||||
- **薄荷浅绿色,大约#9CDDAA、#92C9A0、#8FC49B、#BFEFD0**:用于封面标题块、章节块、标注框、大左意见库和弱表格强调。文本必须保持黑色/深色;替换颜色也必须是低饱和度、浅色背景。
|
||||
- **品牌原色绿色#23B871、#35BA7A、#408A5A**:用于关键栏、标签、关键数字、图标、当前流程步骤和核心环。不要同时引入几种相似的果岭,以免造成层次混乱。
|
||||
- **深绿色#26633B、#2E6F47、#5F877B**:用于小标题标签、深色图表系列、强调边框和结构线;不适合作为长正文文本的基色。
|
||||
- **中灰色#748687、#A6AB9E、#B7B7B7、#D2D2D2**:用于分隔线、表格线、轴、辅助文本、非键系列和禁用/基线状态;不得替换主要文本颜色。
|
||||
- **洋红色/玫瑰色,大约#C2185B、#B0185A**:仅适用于风险、反例、警告和负面类别的小区域标记 - 环、标签、关键字。不得大面积使用作为第二品牌颜色。
|
||||
- **图表系列边界**:主色调为绿色;只有灰色、浅绿色和一点洋红色作为辅助色。如果数据系列超过 3-4,最好用绿色深度步长和灰色来区分 - 不要引入彩虹色。
|
||||
|
||||
## 6. 字体和文本层次结构- **字体字符**:正文使用 Arial 系列,标题和副标题为粗体,引文或注释为斜体; Trebuchet MS 很少用于脚注/版权;封面“报告名称”可以使用衬线字体。
|
||||
- **页面标题**:1.8–2.5x正文大小,粗体,白色,放置在深色横幅中;长标题可能会换行,保持左对齐且行间距较小。
|
||||
- **封面主标题**:2.5–4倍主体大小,黑色粗体,放置在浅绿色半透明块上;日期/系列名称较小,可以使用斜体或衬线。
|
||||
- **关键信息句子/引导**:1.2–1.6x 正文大小,可以是粗体或绿色,放置在正文的左上方或浅绿色块上。
|
||||
- **正文**:定义为 1x、常规 Arial、紧行距、左对齐;避免居中的长段落。
|
||||
- **小标题/卡片标题**:1.1–1.4x 正文大小,粗体、绿色或深色;文字简短而明确。
|
||||
- **表格和图表标签**:0.75–1x 主体尺寸;数字可以加粗或放大至 1.1–1.4 倍;轴标签和图例较小,保持灰色。
|
||||
- **注释/脚注/来源/页码**:0.45–0.7x 正文大小,灰色。脚注不得用绿色来吸引注意力。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
- **实际存在的类型**:主要是条形图、堆积条形图、折线/趋势图、圆环/气泡式关系图和简化坐标图。
|
||||
- **轴和网格线**:轴线和网格线极细,浅灰色;背景网格可以被削弱或省略,但必要的坐标信息被保留。
|
||||
- **系列颜色**:主系列使用品牌绿色或绿色深度的组合;辅助系列采用灰色、浅黄绿色、或浅灰色;预测、目标或关键年份使用更深的绿色和直接数字注释。
|
||||
- **数据标签**:直接注释关键条、端点、峰值或增长率;黑色或绿色的数字。避免让读者仅仅依赖图例来获取关键点。
|
||||
- **图例**:小尺寸,放置在图表上方或下方。如果只有 1-2 个系列,请直接在图形旁边进行标记。
|
||||
- **注释和解释**:使用细线、箭头、浅绿色框或小文字来解释关键转折点;新闻摘录可以作为支持证据卡。注释不得覆盖数据主体。
|
||||
- **边界**:没有 3D 条、渐变填充、重阴影、彩虹热调色板或复杂的动画图表效果;图表的美观必须服从于数据的清晰度。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
- **表格作用**:用于多维度比较、风险列表、行动职责、能力评估和用例筛选;通常是页面的主要证据结构,而不是装饰性布局。
|
||||
- **标题**:深绿色、浅绿色或深色文本,背景主要为浅绿色/白色/浅灰色;文本简短,强调维度名称而不是长句子。
|
||||
- **行/列结构**:允许多列,但需要严格对齐;使用细灰色线或浅灰色底线来分隔行 - 不要依赖粗黑色边框。
|
||||
- **底色和斑马条纹**:浅灰色或浅绿色底色区域;斑马线对比度不宜太强。
|
||||
- **关键行/列**:用浅绿色底色、绿色文本、粗体、点等级或边框进行强调;风险/负面项目使用小的洋红色标记。没有全行亮红色或高饱和度警告色。
|
||||
- **数字和文本对齐**:数字右对齐或居中,文本左对齐;短评级、符号和点可以居中;单位统一在列标题或脚注中注明。
|
||||
- **行高和密度**:紧凑的行高;每个单元格仅限于一个短语、短句或 1-2 个项目符号。如果单元格需要很长的解释,请转换为卡片页。
|
||||
- **符号标记**:可以使用最少的符号,例如点、格子、短划线和水平色块;需要图例或语义必须保持一致。
|
||||
|
||||
## 9. 组件和图形元素- **深色标题横幅**:核心识别组件,横跨顶部,包含深色技术照片或近乎黑色的底座,带有白色结论标题;所有内容页面的首选。
|
||||
- **浅绿色标题/意见块**:用于封面主标题、章节提示、关键问题和行动原则;矩形或大色块,没有复杂的效果。
|
||||
- **数字标签**:如“1a / 1b / 2b”,表示路线图进度;绿色/深色,位于主体的左上方。
|
||||
- **卡片**:白色或浅灰色底座,细边框或无边框,包含副标题、短标题、图标/数字;通过对齐和空白来区分,没有沉重的阴影。
|
||||
- **分隔线**:细灰色线、浅绿色线或列之间、表行之间的空白间隙,并隔离脚注区域;线条应该很轻,不会产生笼状网格的感觉。
|
||||
- **环形/双圆/矩阵标记**:用于核心/非核心、正/负、键/非键;绿色表示核心或积极,洋红色表示非核心/风险/警告。环内的文字必须短。
|
||||
- **图标**:少量单色绿色/灰色线性图标或简化符号,仅用于帮助模块识别。禁止使用彩色拟物图标。
|
||||
- **箭头和流线**:表达过程、因果关系或转换关系;扁平细线,绿色或灰色。避免使用粗的尺寸箭头。
|
||||
- **屏幕截图/新闻卡**:仅在案例证据页面上,放置在带有短标题的白色卡片或浅灰色区域;必须有边界和对齐——切勿随意倾斜或堆叠。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
扁平、内敛、咨询报告式的科技感;品牌感觉来自品牌绿色、深色照片横幅、Arial字体系统和严格的网格——而不是复杂的装饰。
|
||||
|
||||
- **禁止**:3D图表、发光效果、重阴影、复杂渐变、彩虹调色板、表情符号、卡通插图、彩色拟物图标、无意义的装饰线、大块居中副本、整页无网格自由格式布局、低对比度浅色文本以及跨内容页面滥用的封面式照片背景。
|
||||
- **谨慎使用**:照片、屏幕截图、洋红色警告色、环模型、流动箭头、大浅绿色基块。它们必须具有证据、分类、行动或强调功能;如果它们只填补空白,请将其删除。
|
||||
- **可用于特殊页面**:封面、封底和章节过渡页可以使用大的深色照片和浅绿色块;案例证据页面可以使用新闻截图拼贴;联系页面可以使用头像网格。常规内容页面应保留白色底色、横幅和图表/表格/卡片。
|
||||
- **圆角和阴影**:卡片应该只有轻微的圆角或接近正方形;阴影基本没用过。模块由基色、线条和空白分隔。
|
||||
- **图像依赖性**:内容页面不依赖大图像来营造气氛;图像仅出现在标题横幅或证据卡中。每张图像都需要变暗、裁剪和对齐,并且不得破坏文本的可读性。
|
||||
|
||||
## 11. 一代清单- 骨架:是16:9吗?内容页面是否有深色顶部横幅;身体是否落入清晰的网格中?页脚来源/版权/页码是否位于小底部?
|
||||
- 文案:标题是结论还是行动句;是否每一页只有一个主判断;段落是否被分成短句、项目符号、卡片或表格?
|
||||
- 层次结构:标题、关键信息、正文、副标题、图表标签和脚注是否形成相对大小差异;是否避免了特定点大小依赖性和无层次堆叠?
|
||||
- 颜色:基础为白色/浅灰色,文字为黑色,强调绿色;洋红色仅用于小风险区域;每个页面是否保持在绿色+灰色+少量警告色范围内?
|
||||
- 布局:图表、表格、卡片和流程各司其职;是否避免了多个不相关的主视觉效果之间的竞争;左右/多列排列是否对齐?
|
||||
- 图表:使用的是扁平的绿灰色系列;轴线和网格线是否亮;关键数据直接标注; 3D、渐变和过多的系列颜色是否被禁止?
|
||||
- 表格:标题、行/列、分隔符、关键行/列以及数字/文本对齐是否一致;单元格是否可以避免长段落溢出?
|
||||
- 组件:标题横幅、数字标签、浅绿色意见块、卡片、分隔线和环形/流线是否具有明确的语义;图标是单色且简单的吗?
|
||||
- 禁止物品:是否没有表情符号、卡通插图、彩色拟物化图标、发光、浓重阴影、复杂装饰、大型居中身体块或滥用的照片背景?
|
||||
- 质量:检查文本是否溢出、截断、乱码、重叠、对比度低、遮挡、内容空洞、比例错误、压在正文上的脚注以及与信息结构不匹配的模板重复。
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 1.5 MiB |
@@ -0,0 +1,176 @@
|
||||
#F030·顶级管理咨询与策略全套PPT模板风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
用于针对管理层、项目所有者或决策委员会提供有关战略咨询、成本优化、运营诊断、效率改进、路线图规划、机会评估和结果审查的管理报告。采用“白色咨询报告骨架+高饱和度红色焦点+灰度数据组件”:封面近黑/深红色,标题超大;内容页面使用白色或极浅灰色的底色,标题位于左上角或左上角,基于图表的校样,基于卡片的摘要和路线图进展。照片、插图和装饰图标不构成主要视觉效果。
|
||||
|
||||
基本原则:
|
||||
- **每页一个红色焦点**:它可能适用于主卡、关键栏、关键字、最高强度的热图单元或 CTA - 不要将其均匀分布在同一页面的多个区域。
|
||||
- **装饰前的结构**:通过左右分栏、卡片矩阵、图表组合、时间线、热力图来组织页面;不要依赖纹理、阴影、复杂图形或大图像。
|
||||
- **数据清晰胜过图表表演**:条形图、圆环图、热度矩阵、简单表格和数字卡直接得出结论;弱化轴、图例和网格线以突出比较关系和关键值。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为水平 16:9 商业演示比例。内容页面默认为白色或#F6F6F6级别的极浅灰色背景,具有相对较宽的安全边距。基本结构为“左上标题区+中央正文区+小标题/脚注区”,包含阅读路径运行标题、红色焦点、图表/卡片/表格详细信息。
|
||||
|
||||
标题区域:通常位于左上角,在右上角或左上中的几个图表页面上,包含主题、问题或结论 - 没有装饰性标题栏。标题下方的 1-2 行可以说明分析目的、范围或行动含义;身体在其下方或右侧展开。
|
||||
|
||||
车身区域:分柱式、模块化;常见内容包括大类型定义、饼图/圆环图、条形图、热矩阵、路线图卡、胶囊标签流、数字度量卡和表格式比较。卡片保持均匀对齐和间隔;浅灰色块划分页面;红色块标记优先级。
|
||||
|
||||
标题:非强制。小品牌文字标记或小标记可能位于左上角;日期、简短说明或小标题可以位于右上角;它必须保持较低的姿态,并且决不能形成沉重的单杠。
|
||||
|
||||
页脚:没有很强的导航功能;可能包含脚注、来源、联系信息或小型 CTA。如果添加页码,请使用塞在角落里的极小的黑灰色文本——它不能从正文中窃取。
|
||||
|
||||
分隔线:使用浅灰色细线、卡片边界或背景块。避免粗黑线和复杂的边框。轴和参考线也使用浅灰色低对比度。
|
||||
|
||||
封面:近黑/深红色背景,超大白色粗体标题,红色按钮式标签,深红色大字水印,右侧少量说明文字;这种处理不得迁移到普通内容页面。
|
||||
|
||||
结束页:带有一些联系方式/CTA 的大标题,白色或浅灰色底色;红色可以强调关键动作词,但不应添加照片墙或复杂的装饰。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题使用问题型、主题型或行动型短语,例如“为什么……重要”、“目标……”、“路线图概述”、“识别……机会”。更喜欢名词短语或动宾结构;避免长句子。
|
||||
|
||||
在标题附近放置 1-2 行关键信息,说明结论、分析依据或下一步行动——它们不能取代身体图。解释性内容分为简短的标题、项目符号卡或脚注。正文内容遵循“一个要点+三到五个支撑点”。支持点可以是卡片、流程阶段、度量列、图表标签或表格行;每张卡片通常包含一个小标题和一个压缩说明,以空白、浅灰色底色和编号来区分。
|
||||
|
||||
关键词可以使用红色文本、红色文本上的白色文本、黑色胶囊标签、粗体副标题、放大的数字或局部红色图表元素。红色仅对应“关键点、当前、推荐、高价值、风险或行动”——绝不对应普通装饰。
|
||||
|
||||
百分比、金额、改进幅度、节省和阶段编号等数字作为独立的块,单位和解释紧邻。时间、阶段、序号保持一致;路线图使用清晰的编号,例如 01/02/03/04,并且不会混合复杂的层次结构。
|
||||
|
||||
来源和注释使用极小级别的浅灰色或深灰色文本,放置在底部、图表旁边或标题右侧;它们仅陈述数据源、假设或测量基础——它们不包含关键结论。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 大字定义/意见页面
|
||||
用于介绍概念、定义问题或陈述战略立场。一个小的引入线位于顶部或左上角;正文以超大文本陈述观点,关键字标记为红色;下面可能跟随一行指标、类别或关键字模块。信息密度低到中等。如果文本超出几行或需要多个数据组,请勿使用此布局。
|
||||
|
||||
### B. 左标题+右/中图表分析页
|
||||
用于现状、分布、趋势、比较和原因分析。标题和说明文字位于左侧或右上角;主体持有圆环图、条形图、组合条形线图或小公制卡;关键部分、关键条或当前值使用红色,其他所有内容使用灰色。适合1个主图+2-4个注释点;不适合塞入多个同等权重的大型图表中。
|
||||
|
||||
### C. 路线图/阶段卡页面
|
||||
用于显示 3-5 个阶段、目标、任务或执行路径。一张大红牌标志着第一阶段、当前阶段或核心举措;其余为浅灰色卡片;放大的编号位于顶部或左侧。强调阶段名称、行动和预期结果。超过五个阶段,分页或转换为时间线;不适合无序的杂项列表。
|
||||
|
||||
### D. 热度矩阵/机会识别页面
|
||||
用于影响、复杂性、优先级或节省空间的二维评估。主体是红-粉-浅粉红色网格,深红色标记高强度或优先级,旁边有一个小图例、轴注释和红色结论卡。矩阵服务于相对定位和聚类,而不是精确的值读取;当需要精确值时,请切换到表格或条形图。
|
||||
|
||||
### E.胶囊标签流程+推荐卡页面
|
||||
用于流程节点、操作步骤、类别分组或优化机会列表。黑色胶囊标记一级类别或路径节点,红色胶囊标记关键节点,浅灰色胶囊标记普通项; 2-3 张推荐卡可能位于底部或右侧。标签必须短且避免缠绕;当标签太多时,将它们分组——没有复杂的连接线。
|
||||
|
||||
### F. 多指标仪表板/案例结果页面
|
||||
用于结果、案例、预测、节省或绩效变化。由大数字卡片、条形图、迷你圆环图、标题列表组成;红色数字卡或红色图表元素是结果焦点,灰色卡提供比较。每个大数字都必须有一个解释——不要堆叠孤立的指标。### G.简单表格/比较矩阵页面
|
||||
用于比较计划、部门、成本项目、时间段或机会类别。该表占据主体的中下部分,具有简单的标题和红色或浅红色底座的关键列/行。标题和结论句是强制性的——表格不能成为无法解释的数据堆。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
背景颜色:
|
||||
- **#FFFFFF**:主要内容基础、卡片内部和大空白区域 - 最大的区域。不能用高饱和度的颜色代替。
|
||||
- **#F6F6F6 / #F7F7F7 / #F8F8F8**:整页背景、浅色分区、表格底座或图表容器底座;必须保持白卡清晰可见。
|
||||
|
||||
主要文本颜色:
|
||||
- **#070302 / #0F0605 / #1C0B0B**:标题、重要正文、封面主标题和关键图表文本。
|
||||
- **#2F2929 / #454545 / #484545**:正文标题、副标题、图例文本和表格文本。
|
||||
|
||||
主要强调红色:
|
||||
- **#FF4D4D / #FF5454 / #FF5C5B / #FE6464**:用于红卡、关键数字、关键图表栏、当前阶段、重要标签和 CTA。每页最多一个大面积红块;其他红色仅显示为点状回声。
|
||||
- 可以更换为品牌原色,但必须保留“单一高饱和度强调+灰度系统”,并保持白字/黑字对比。
|
||||
|
||||
辅助粉红色:
|
||||
- **#FED8D8 / #FFC5C4 / #FFDFE0 / #FFF1F1 / #F1CCCC**:热图渐变、弱强调背景、面积图填充和红卡的亮度级别。不得用于小尺寸的主要正文文本 - 避免低对比度。
|
||||
|
||||
辅助灰度和分离:
|
||||
- **#BDBDBD / #C1C1C1 / #D9D6D6 / #DDDBDB / #E7E6E6**:轴、网格线、卡片边界、普通条形、表格线、禁用或次要状态;不得与正文相冲突。
|
||||
|
||||
覆盖深色:
|
||||
- **#070302 / #120706 / #210E0D / #2F0505**:仅适用于封面或极少数暗调部分页面的背景和暗红色水印。内容页面不使用大型深色底座。
|
||||
|
||||
单个页面仅使用红色+灰度的一种色调。图表系列以红色、粉色、灰色为主;避免引入蓝色/绿色/紫色的多色业务图表,除非必须区分源数据状态并保持低饱和度。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
现代无衬线商业字体。正文主要使用ArialUnicodeMS / LiberationSans-class sans-serif;封面的超大标题采用了较重的Arial-Black风格。整体干净、紧凑、理性——没有手写字体、装饰性衬线字体或卡通字体。
|
||||
|
||||
相对层次结构:
|
||||
- 封面主标题:约5-6倍正文大小,超粗体,白色,行距紧凑。
|
||||
- 内容页面主标题:大约 2.5–3 倍正文大小,常规或中等粗细,黑色,位于左上方或顶部。
|
||||
- 大字体意见/定义:大约是正文大小的 3-4 倍,可以跨多行,关键字为红色。
|
||||
- 副标题/卡片标题:大约是正文大小的 1-1.2 倍,通常为粗体或更深的黑色。
|
||||
- 正文标题:body=1x,短线条,低装饰。
|
||||
- 表格文本/图表标签:大约是正文尺寸的 0.75–0.9 倍。
|
||||
- 脚注、来源、标题小文本、页码:大约 0.55–0.7 倍正文大小,灰色或黑灰色。
|
||||
- 数量指标:大约是身体尺寸的 2-4 倍;单位和解释下降到正文或注释级别。
|
||||
|
||||
文本主要是左对齐;大的中心通道不是系统的一部分;封面可以局部使用左对齐的超大标题。避免段落过长,并避免卡片内出现多级项目符号。在同一页面中使用一种一致的大写样式。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
实际出现的图表主要是圆环图/饼图、条形图、组合条线图、面积/趋势图、热矩阵、小仪表和公制卡——服务于咨询分析,而不是追求复杂的可视化。
|
||||
|
||||
圆环图/饼图:使用红色、深红色、灰色和黑灰色扇形,中间有一个短标签或核心值;简短的外部注释,低存在的图例。红色部分标记关键成本项目或关键对象。条形图:红色条标记关键点、当前值、目标或高值;灰色条是比较。轴极小,网格线浅灰色,条形间距清晰;短值或标签可以位于条形顶部——避免密集的注释。组合图表中的线条使用细笔划和小节点作为趋势或目标参考。
|
||||
|
||||
热矩阵:浅粉色到红色表示强度;轴文本保持简单;网格边界被软化。太多的暗块会破坏优先判断。需要解释颜色强度的图例或注释。
|
||||
|
||||
公制卡/迷你图表:嵌入红卡、灰卡或白色容器中。大量数字引人注目,并有简短的标题解释了它们发生变化的原因。迷你条形图和圆环图只是补充——它们不能成为页面的第二个主要焦点。
|
||||
|
||||
图例和注释:图例保持较小且靠近图表,颜色与系列相匹配。关键点可以使用红色胶囊、小点、箭头或短标签,但不能使用复杂的标注。预测线、目标线或基线线使用浅灰色线或带有简短注释的细红色线。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格用于“证明、比较、分解和优先排序”;它们通常位于正文的中下或右侧,与标题和结论句配对。
|
||||
|
||||
表头:浅灰色底,或白色底细线;文本加粗或加暗。关键列可以使用红色标题或红色顶栏,但整个表格不得高饱和度。
|
||||
|
||||
行和列:行高均匀,表述为短句。保持较低的列数 - 优先考虑名称、指标、影响、操作和状态字段。较长的解释应分解为卡片或脚注;避免细胞内多线拥挤。
|
||||
|
||||
分隔符和基色:使用浅灰色细线,例如#E7E6E6、#DDDBDB;浅灰色块可以对内容进行分组;斑马条纹不是一个强大的系统——如果使用,请保持非常微妙。关键行/列可以使用浅红色底座或红色条标记。
|
||||
|
||||
对齐方式:文本左对齐,数字右对齐或在小数/单位上视觉对齐。百分比、金额和变化值保持一致的单位。状态使用红点、黑点、浅灰色标签或短徽章 - 没有复杂的图标集。
|
||||
|
||||
摘要和要点:摘要行使用深色文本、浅灰色底色或细红色线。不要同时用多种颜色标记级别;喜欢用红/粉/灰三个级别来表示高/中/低或重点/普通/弱。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
标题组件:左上角有一个大的黑色标题+下面或旁边的标题——没有沉重的标题栏。封面标题是一种特殊的超大白色文本例外。
|
||||
|
||||
红色钥匙卡:当前阶段的关键结论、核心指标、建议行动或 CTA;可以是红色底上的白色文本,也可以是红色到浅色底色上的黑色文本。每页仅保留一张主红卡;其他红色元素降级为标签或图表点。
|
||||
|
||||
浅灰/白卡:用于并行信息、阶段说明、度量注释和比较内容。光边界,内敛圆角,无阴影依赖;均匀的间距和对齐方式形成网格。
|
||||
|
||||
胶囊标签:黑色、红色、浅灰色三种。黑色标记类别或主路径节点,红色标记关键节点,浅灰色标记普通节点。标签文本很短,不包含长句子,并且不会包装成多行胶囊。
|
||||
|
||||
编号部分:使用01/02/03/04或大数字。红底白字标记当前或初级阶段;其余部分用灰黑标记。数字必须与卡片标题绑定在一起,而不是孤立的装饰。
|
||||
|
||||
分隔符和轴线:浅灰色细线组织图表、表格和模块;它们不得变厚或变成装饰性边框。
|
||||
|
||||
徽章/按钮:封面和 CTA 可以使用红色按钮式标签;内容页面可以使用小的红色/黑色标签。按钮不具有真正的交互性——没有浓重的阴影或高光。图标:彩色图标不是系统的核心。如果使用的话,它们只能是极小的单色功能标记——点、箭头、加号、位置点——用于指导或注释;禁止使用彩色插图图标集。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体扁平、克制、类似咨询报告,通过强烈的对齐、空白、红色焦点和数据结构构建视觉吸引力。
|
||||
|
||||
禁止:
|
||||
- 大面积照片背景、大人物图片或场景摄影作为内容页面的主视觉。
|
||||
- 表情符号、卡通插图、3D 图形、发光、光泽玻璃纹理、复杂纹理。
|
||||
- 彩色图标集,混合多种品牌颜色,如蓝色/绿色/紫色,彩虹式图表。
|
||||
- 浓重的阴影、强烈的渐变背景、复杂的边框、装饰曲线和华丽。
|
||||
- 大型居中副本、无层次结构的长段落、整页项目符号列表。
|
||||
|
||||
谨慎使用:
|
||||
- 渐变:仅适用于红色到浅红色的卡基、热图或面积图,不适用于整页耀斑背景。
|
||||
- 阴影:如果必须区分卡片,请使用极其微妙的阴影或简单的浅灰色底色;不要形成浮卡风格。
|
||||
- 圆角:可用于胶囊标签和按钮;卡片的角应仅有轻微的倒圆角;不得变成互联网UI风格。
|
||||
- 图标/箭头:仅用于流向、关键点注释或状态点——数量少,单色。
|
||||
|
||||
适用于特殊页面:封面可使用深色背景、深红色水印、超大标题、按钮式红色标签;结束页面可能会使用更大的 CTA 消息以及联系方式。章节分隔页可以少量采用封面的深色氛围或白底大字,但不能取代内容页系统。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 骨架:是否是16:9的横向商业页面;标题区域、正文区域和说明/脚注区域是否清晰;内容是否远离边缘?
|
||||
- 文案:每一页是否只有一个要点;标题是否简短且具体;标题是否控制在 1-2 行;卡片上的文字是短句吗?
|
||||
- 层次结构:标题、关键信息、正文、图表标签和脚注是否显示出明显的相对大小差异;是否避免了无层次结构的文本堆叠?
|
||||
- 颜色:是否保留白色/浅灰色背景+黑灰色文本+单一红色强调;红色是否只对应关键点?是否避免使用多色图表?
|
||||
- 布局:在大字体意见、图表分析、路线图、热矩阵、标签流、指标案例或简单表格中选择合适的方案;不相关的信息是否会被强制放到同一页面上?
|
||||
- 图表:红色仅标记关键系列;轴和网格线是否软化;标签是否可读;图例是否简单且接近图表?
|
||||
- 表格:标题、分隔符、关键行/列、数字对齐是否一致;是否避免了长单元格段落和过于密集的线框?
|
||||
- 部件:红钥匙卡、浅灰卡、胶囊标签、编号、分隔符是否功能清晰;没有添加任何组件只是为了装饰吗?
|
||||
- 禁止物品:照片背景、表情符号、3D、发光、浓阴影、复杂纹理、彩色图标和彩虹调色板是否不存在?
|
||||
- 质量:检查文本溢出、截断、乱码、重叠、对比度低、图表遮挡、空卡、错误比例、模板过多相同或红色焦点过多。
|
||||
|
After Width: | Height: | Size: 456 KiB |
@@ -0,0 +1,151 @@
|
||||
# 组织名称·2025.08 通信功能的GenAI变革STYLE DESIGN SYSTEM
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
用于咨询公司数据包、功能转型评估、人工智能/技术影响量化、方法论解释和执行层报告。针对企业主、沟通/职能领导者和咨询项目团队;每一页都必须快速得出结论,同时图表定义和测量基础、方法假设和来源仍然可追溯。
|
||||
|
||||
一言以蔽之:**一种深色的咨询数据包风格,深灰色的画布和深绿色的科技氛围承载着密集的分析,青绿色的数据编码凸显了 GenAI 的转型机会和方法论水平。**
|
||||
|
||||
稳定的功能:深灰色/深绿色全底色、TrebuchetMS 字体系统、左上角的结论式标题、大正文图表/矩阵、右侧的短段落解释、底部的微小来源/版权线、细线框架、荧光绿/青绿色口音以及封面/结束页上的 AI 肖像视觉效果。
|
||||
|
||||
- **结论为先,证据为正文**:标题直接陈述判断;图表、表格、矩阵或流程具有说服力;装饰不能代替证据。
|
||||
- **深色统一,绿色层次感**:深灰色和深绿色定义了整个甲板;亮绿色仅标记关键数据、标签、图表系列和状态——没有无意义的颜色填充。
|
||||
- **高密度但可扫描**:使用栏、分隔符、标题、标签、脚注和对齐来构建阅读路径;避免无层次结构的文本堆叠。
|
||||
|
||||
## 2. 页面骨架- **画布比例**:宽屏横向 16:9。所有页面都为脚注、版权和页码保留底部空间。
|
||||
- **默认背景**:内容页面位于深灰色#2C2C2C上,覆盖深绿色#0A3021–#0D4430区域或右上角/右侧的绿色光芒;部分分隔符和免责声明页面可以使用近乎纯的深灰色。
|
||||
- **边际**:狭窄的安全边际;标签和标题位于顶部,来源和页码位于底部,正文位于中间。
|
||||
- **标题区域**:左上角的一个小选项卡/层次结构标签,后面是主标题和一行副标题或关键消息。左对齐,在页面顶部跨越大约一半到全宽;从未居中。
|
||||
- **正文区**:内容页主要是左侧或中心的图表/表格+右侧解读;方法论页面使用水平流或矩阵;概念页面使用多列/节点关系。标题区域和正文之间的间距很小。
|
||||
- **标题/导航**:左上角有一个绿色小标签,例如功能级别、任务级别、方法论;它仅表示部分和分析级别——没有大的导航栏。
|
||||
- **页脚**:固定在底部,包含来源、假设注释和版权,其大小明显小于正文;右下角的页码。脚注可以水平跨页或聚集在图表下方。
|
||||
- **Logo**:品牌标志主要出现在封面和封页上;内容页不放大Logo。
|
||||
- **分隔线**:细线、表格线、轴线、矩形轮廓;颜色为深灰色、灰绿色或低饱和度绿色——仅用于组织功能。
|
||||
- **背景图形**:封面和尾页可能使用人工智能肖像/生成视觉效果;内容页面仅使用抽象的绿色发光或渐变 - 没有大的人物图像。
|
||||
- **页面类型骨架**:
|
||||
- 封面:左侧为深灰色品牌和标题栏,右侧为带有深绿色光效的AI人像;标题位于细线框架或半框架区域内。
|
||||
- 内容数据页:标题位于左上角,大中央图表,解释位于右侧,来源位于底部。
|
||||
- 方法论部分分隔线:近乎纯深灰色,左下/中左的大标题,一些小方块作为视觉锚点。
|
||||
- 方法论内容页面:标签+标题位于顶部,流程、矩阵或步骤卡位于下方,补充测量基础注释位于底部。
|
||||
- 免责声明页面:左侧大标题,右侧密集法律文本,深灰色背景。
|
||||
- 结束页:品牌标识结合AI人像/绿光效果,信息量极少。
|
||||
- **默认阅读路径**:左上标签→主标题/副标题→主图表或矩阵核心数据→右侧解释→底部来源/测量基础注释→页码。
|
||||
|
||||
## 3. 内容组织- **标题风格**:使用咨询式的结论句,直接陈述排名、影响、机会、方法范围或比较判断;避免使用“概述”或“背景”等模糊标题。可能包括百分比、排名、主题和结果。
|
||||
- **副标题/关键信息**:在主标题下方,一小行说明量化范围、阶段、指标定义或基础,或“为什么重要”;颜色为浅绿色或浅灰色。
|
||||
- **正文结构**:短段落、短句子和项目符号;右侧解释通常有 2-4 段,每段支持一个发现。不要使用大块的中心叙述。
|
||||
- **分组逻辑**:按功能、任务类别、影响类型、AI 类型、自动化阶段、方法步骤、成本池或工作流程分组;标题更喜欢简短的名词短语。
|
||||
- **每页点数**:每页 1 个要点,搭配 2-4 个子发现;高密度的表格页可以添加更多条目,但一个标题结论必须引导所有条目。
|
||||
- **正文密度**:允许更多标签、脚注和数据,按列宽、标题、行组和色块分层。当文本超过 4-5 个短段落时,拆分页面或切换到表格/矩阵。
|
||||
- **项目符号样式**:使用短项目符号、短破折号、分号或换行符;以动词或名词短语开头;避免完整的长段落。
|
||||
- **关键字强调**:使用亮绿色、青绿色、粗体或在深色基础上局部突出显示百分比、排名、目标对象和舞台名称;没有下划线、发光轮廓或多色强调。
|
||||
- **数字/单位/时间范围**:突出显示百分比、范围、近似值、排名和阶段差异。数字和单位保持相邻;尽可能直接在图表内进行注释,而不是依赖图例。
|
||||
- **来源脚注**:底部必须保留来源、估计假设、样本范围、版权等;多个源用分号或短语水平压缩。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A.左图+右解释
|
||||
|
||||
用于定量结论,例如排名、横截面比较、成本影响、生产力提升和功能基准测试。左侧或中间 60-70% 包含水平条形图、堆叠条形图或范围条形图;右侧 20-30% 包含解释性文字;顶部是结论标题和测量依据,底部是来源。目标物体采用亮绿色/青绿色,其他物体采用灰白色或深绿色;细垂直线可以标记平均值、目标或阶段边界。不适合维度太多且标签无法保持可读性的场景,也不适合需要长解释的叙事页面。
|
||||
|
||||
### B.全角高密度表/矩阵
|
||||
|
||||
用于任务列表、工作流程、AI 类型比较、自动化潜力、成本池和方法输入/输出。身体几乎填满了宽度;列标题位于深绿色或青绿色底座上,行组位于深灰色侧边栏或色带上。文本列左对齐,数字列右对齐或居中,状态列带有点/检查十字/色块;通过青绿色底座、亮绿色数字、红/绿色状态点或粗体行来强调。不要在数据少于 3×3 的情况下使用它——它看起来会是空的;如果比较很复杂但数字较少,请切换到卡片或流程。
|
||||
|
||||
### C. 堆叠条形/瀑布式分解
|
||||
|
||||
用于分解总机会。左侧列出类别,右侧水平堆叠条显示阶段、类型或潜在范围,底部有一个小样本图例解释该系列。关键行标签或条形使用高亮绿色;非关键部分保持低饱和度。不要使用太多系列颜色——避免将深色页面变成彩色噪音。
|
||||
|
||||
### D. 方法流程用于诊断模型、评估步骤、量化逻辑和输入到输出路径。使用 4-5 个水平步骤卡或由箭头/线条连接的节点;每个步骤都包含一个简短的标题、一个类似图标的圆圈或小卡片以及 2-3 个说明点。使用绿色标题、圆形节点、细线箭头和阶段标签来表达层次结构。不适合携带大量精确数字。
|
||||
|
||||
### E. 多列概念/比较
|
||||
|
||||
对于影响类型、传统 AI/GenAI/Agent AI 差异、评估维度或能力分类。使用 3-4 栏,每栏一个概念,里面有短句、状态标记或小矩阵;列标题使用绿条、白卡或圆形色块。适合中等信息密度,不适用于复杂的财务建模。
|
||||
|
||||
### F. 部分分隔符/分隔页
|
||||
|
||||
用于方法论和免责声明等结构转变。使用空的深灰色字段,大标题左对齐或位于左下角,仅保留最少的装饰方块/线条。不要添加图表、卡片组或解释性段落——这会破坏部分分隔符的节奏。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **主背景深灰色#2C2C2C**:内容页面、分区分隔线和免责声明页面的基色;不能用浅色背景代替——风格会被篡改。
|
||||
- **深绿色背景#0A3021 / #0B3928 / #0D4430**:用于内容页面、图表底板以及封面/结束页面的右侧氛围上的渐变区域。可大面积低饱和度使用;可以在同一系列内进行微调 - 不要切换到蓝紫色或橙红色。
|
||||
- **中绿色#125E42 / #176F4E / #197352**:用于主要图表系列、标题标签、模块基础和分组栏。可以用类似品牌的绿色代替,但必须与深绿色背景形成足够的对比。
|
||||
- **明亮的青绿色#1A835B / #35AA7E / #74D1A9**:用于关键数据、目标对象、强调栏、状态点、图例突出显示和一些强调文本。中小区域——避免填满整个页面;不适用于普通正文。
|
||||
- **白色/近白色#F2F4F2**:用于主标题、正文、表格文本和图表标签。不要将所有正文替换为纯灰色 - 可读性会下降。
|
||||
- **浅灰色 #B8B9B9 / #D7D7D7**:用于辅助标签、非关键栏、轴标签和脚注。
|
||||
- **深灰绿色#35594C / #5B7067 / #61746C**:用于网格线、表格分隔、弱化模块和边界线 - 仅结构颜色。
|
||||
- **红色/粉色状态,#C83A5A 周围**:仅在非常小的区域内标记低能力、限制、风险或负面状态的矩阵中。禁止作为主要装饰色。
|
||||
- **图表系列边界**:单页停留在绿色系列中,以灰色/白色为参考;红色状态仅作为例外。不要一次引入多个蓝色/黄色/紫色数据系列;如果不可避免地需要更多系列,请选择相同绿色的亮度阶梯。
|
||||
|
||||
## 6. 字体和文本层次结构- **字体字符**:整个牌组使用TrebuchetMS,具有TrebuchetMS-粗体和斜体建筑层次结构。不要混合使用衬线或手写字体。
|
||||
- **层次结构比率**:主体 = 1x;主标题约 1.7–2.4 倍;封面标题约 2.5–3.2 倍;部分分隔符大标题约 3-4 倍;字幕/关键信息约 1.2–1.5 倍;图表轴标签和表格主体约 0.8–1x;脚注、版权、页码约为 0.45–0.65x。
|
||||
- **标题**:左对齐,行距较紧,可以部分加粗或换行;不超过三行。
|
||||
- **关键信息/副标题**:在标题下方,以浅绿色或浅灰色说明测量基础 - 不要重复标题。
|
||||
- **正文**:以常规权重为主;关键短语可以是粗体或亮绿色;段落短,线宽适中,右侧解释左对齐。
|
||||
- **副标题/标签**:较小尺寸,绿色底座或绿色文本;保持文字简短。
|
||||
- **表格文本**:列标题可以是粗体,正文是常规的;文本列左对齐,数字/百分比列居中或右对齐。表格内没有频繁出现的斜体。
|
||||
- **图表标签**:轴标签和数据标签小于正文,但必须保持清晰;关键数据可能会放大到接近身体大小,并以亮绿色强调。
|
||||
- **注释/脚注/页码**:极小的级别,位于底部或右边缘垂直页码区域;必须清晰可辨,并且绝不能混入正文中。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
图表主要是水平条形图、堆积条形图、矩阵比较和一些流程图/节点图——没有复杂的多图表系统。
|
||||
|
||||
- **条形图**:深色基底,水平布局;左侧为类别标签,右侧为条形图和值。使用绿色梯子或浅灰色参考,关键栏采用明亮的青绿色;轴线和网格线细且对比度低。
|
||||
- **范围/阶段表达**:在同一行内,平行条或范围条可以表达当前与未来阶段、部署与重新发明。用不同的绿色亮度台阶或灰绿色基数进行区分,并直接在图例或条形上进行注释。
|
||||
- **堆叠条**:用于任务组合或工作流程分解。片段来自相同的绿色序列;标签嵌入或靠近条形,底部有一个简单的图例。
|
||||
- **矩阵图**:清晰的行/列标题,列标题可以使用绿条;单元格使用点、勾/叉或短文本短语来表示状态。绿色为正极,红色为负极/受限,灰白色为普通参考。
|
||||
- **流程/节点图**:圆形节点、白卡和细线箭头;节点可以包含简化的图标或首字母视觉效果,但它们必须服务于步骤的含义。
|
||||
- **图例**:位于图表的上方、下方或底部,绝不位于视觉中心;样本小而整齐,文字短。
|
||||
- **注释**:使用右侧解释文本而不是复杂的气泡标注;图表内仅保留必要的数字、基线和阶段注释。禁止大量浮动音符覆盖小节。
|
||||
- **图表边界**:无 3D 图表、饼图、圆环图、透视图或装饰曲线图;没有证据支持复杂的动画图表或插图图表。
|
||||
|
||||
## 8. 表格和高密度信息- **表格作用**:承载方法、任务、类型、评分、多维度对比——核心证据载体。
|
||||
- **标题**:深绿色或中绿色底座,白色/近白色文本,短列名称;多层标题可以使用不同的绿色步骤或细线分区。
|
||||
- **行/列结构**:行标签左对齐,指标/状态列居中,值列右对齐或居中。复杂的任务描述需要更宽的栏目;评级/潜力栏变得狭窄。
|
||||
- **行高和密度**:紧凑行高但保持间距;将长文本压缩为短语——单元格中没有完整的段落。
|
||||
- **分隔符**:细灰线、灰绿线或深色边界来分隔行组、列组和标题 - 没有厚重的外框。
|
||||
- **底色**:深灰色为底色;组行或关键列可以使用深绿色/青绿色底座;一般避免使用大的灯座以保护暗系统。
|
||||
- **关键行/列**:目标行、汇总列和关键百分比可以使用亮绿色、粗体、基色块或边框;仅选择 1-2 个焦点——切勿突出整个表格。
|
||||
- **斑马条纹**:允许极其微妙的深灰/深绿交替,绝不明显艳丽;当细线分隔已经存在时省略它。
|
||||
- **符号标记**:点、勾/叉、红绿状态点和评级色块可以表达能力/风险/自动化水平;需要图例或者必须可以从上下文推断出含义。
|
||||
- **摘要/脚注**:注释、来源和假设可能位于表格底部;摘要行或结果列必须与普通行区分开来。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
- **左上选项卡**:一个小的绿色矩形或文本标签,显示功能级别、任务级别、方法等。宽度跟随文本 - 无长横幅。
|
||||
- **标题框/封面细线框**:封面标题位于绿色/灰绿色细线框或半框内;内容页面很少使用大标题框。
|
||||
- **右侧解读栏**:在图表旁边,包含短段落、关键词突出显示和一些数字;它解释了“那又怎样”,并且不重复所有数据。
|
||||
- **卡片/步骤块**:方法页面使用深色卡片、小白色卡片或包含步骤名称和项目符号的绿色标题栏;边界清晰,四舍五入非常克制(如果有的话)。
|
||||
- **圆形节点**:对于影响类型或方法步骤,颜色为绿色、黄绿色、蓝绿色或小红色节点。数量很少——不是大量的装饰性气泡。
|
||||
- **分隔符和轮廓**:用于图表轴、表格边界和模块分区;薄、低对比度、功能至上。
|
||||
- **图例样本**:小矩形/点+解释阶段、状态、系列的短标签;保持靠近图表的底部或顶部。
|
||||
- **页码/版权垂直侧边栏**:页码位于右下角或沿右边缘,版权/来源沿底部。
|
||||
- **图像框架**:仅在封面和封页上放置AI肖像;如果图像出现在内容页面上,它必须保持深绿色覆盖层 - 没有屏幕截图拼贴。
|
||||
- **图标**:方法页面可能使用一些线性/简化的图标或圆形图标。禁止使用彩色拟物图标库;图标必须与步骤/状态直接相关。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体质感**黑暗、扁平、内敛、数据密集、技术咨询**;视觉焦点来自绿光、数据亮点和结构化信息。- **禁止**:大浅色背景、彩虹调色板、3D图表、发光轮廓文本、复杂纹理、表情符号、卡通插图、社交媒体风格贴纸、无意义的大图标、长居中副本、装饰波浪线、过度圆形卡片、强阴影浮动层。
|
||||
- **谨慎使用**:渐变、阴影、圆形节点、图标、红色状态。渐变仅适用于深绿色背景氛围;阴影,如果有的话,也极其微弱;红色仅针对负/限制状态;仅用于方法步骤的图标。
|
||||
- **可在特殊页面上使用**:人工智能肖像/生成图像仅在封面和结束页上,作为主题视觉效果;部分分隔线可以使用最小的几何正方形;免责声明页面可能会使用密集的法律文本。
|
||||
- **图像依赖边界**:内容页面不依赖照片、屏幕截图或插图来讲述故事,除非图像本身就是数据证据;否则转换为图表、表格或流程。
|
||||
- **品牌感觉边界**:品牌标志不应在每页上放大和重复;品牌感觉来自于深色基底、绿色系统、版式和脚注结构。
|
||||
- **密度控制**:永远不要牺牲对齐、对比度和脚注可读性。如果文本重叠、表格挤压或图表标签变得难以辨认,请先剪切内容,而不是将其缩小到难以阅读。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 这是一个 16:9 的深色咨询报告页面,而不是海报、信息图表或社交卡吗?
|
||||
- 左上角是否有清晰的标签/标题区域,标题是否是结论句而不是模糊的主题词?
|
||||
- 单页是否仅包含 1 个要点,并通过图表、表格、矩阵或流程证明?
|
||||
- 背景是否以深灰色和深绿色为主,亮绿色仅用于关键数据/标签?
|
||||
- 正文是否组织为以下之一:左图 + 右解释、全角矩阵、流程步骤或多列比较?
|
||||
- 右侧解释是带有关键词突出显示的短段落,而不是长篇正文吗?
|
||||
- 图表是否使用水平条形图、堆叠条形图、矩阵或流节点;是否避免使用 3D、饼图和艳丽的系列颜色?
|
||||
- 表格是否有清晰的标题、分组、对齐、细分隔符和关键行/列?
|
||||
- 页脚是否保留来源、假设、版权和页码而不与正文重叠?
|
||||
- 该类型是否保留 TrebuchetMS 特征,并通过相对大小、重量和颜色表示层次结构?
|
||||
- 是否避免了照片/屏幕截图/插图滥用,人工智能肖像仅出现在封面或结束页上?
|
||||
- 是否出现溢出、截断、乱码、重叠、对比度低、遮挡、内容空、比例错误、机械模板重复等情况?
|
||||
- 如果更换品牌颜色,深色底色、高对比度白色文字和单一基色的原则是否仍然有效?
|
||||
|
After Width: | Height: | Size: 404 KiB |
@@ -0,0 +1,121 @@
|
||||
# 制图策略·地图策略风格设计系统
|
||||
|
||||
> 预期主页标签:战略规划/战略
|
||||
> 视觉隐喻:当代图集+策略室
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
国际化、区域扩张、业务组合、生态系统布局、资源配置和长期路线图。它不是传统的咨询蓝白模板,而是“将策略放入空间”的地图式叙事:温暖的白色纸张、深邃的海军蓝、内敛的钴蓝色、朱红色的坐标,通过路线、区域、比例、编号和图例构建方向感。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. 每一页首先回答一个决策问题,然后显示位置、路径或优先级证据。
|
||||
2. 地图语言服务于比较和顺序——等高线和经纬网格不是装饰壁纸。
|
||||
3、一张主图引领页面;标题、数字和标签都是围绕它组织的。
|
||||
4. 当地理信息不足时,使用抽象的位置图、路线图或合成地图——切勿捏造精确的边界。
|
||||
5. 标题读起来就像管理层实际上会说的判断——避免使用“战略蓝图”或“共同走向未来”等模糊口号。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为 16:9 横向。内容页面以暖白色为主;部分分隔页可以使用深海军蓝。外部利润保持稳定;微小的坐标刻度可能会出现在四个角,但内容永远不会接触边缘。
|
||||
|
||||
顶部是标题和页码坐标区,约占页面的14%~18%;中间是主地图工作区,65%–72%;底部为来源、假设和图例保留了空间。标题下没有全角粗线,而是用短刻度线、页码和细线代替。
|
||||
|
||||
封面采用“大标题+抽象区域图+一条主要路线”。标题位于左侧或左下角;地图占据右侧的 45%–60%。内容页面在地图、矩阵、路线和时间线之间切换,但始终保持相同的坐标和图例语法。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题使用结论句或明确的问题,例如“中东提供最快的首次进入验证窗口”。副标题添加范围、年份、评估维度或数据定义和测量基础。
|
||||
|
||||
一页只有一个战略判断,最多有3个支持证据。正文使用短句、编号和直接标签——没有长的解释性段落。
|
||||
|
||||
空间分组优先考虑区域、市场、阶段、进入模式、能力节点和风险水平。每条路线都必须有起点、目的地、顺序和意义;每种颜色都必须在图例中进行解释。
|
||||
|
||||
数字紧邻其对象,带有单位、时间和测量基础。来源和假设位于页脚中,而不是隐藏在视觉中心。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 战略地图页面
|
||||
|
||||
左边25%~32%持有结论和2~3个关键解释;右边有一张抽象的区域地图。点标记市场或能力节点,线宽表示优先级,实线/虚线区分已经到位的内容和必须构建的内容。适合市场选择、网络布局、资源迁移。
|
||||
|
||||
### B. 三个市场比较区间
|
||||
|
||||
页面水平划分为三个平行区域,每个区域包含一个市场名称、一个主号码、一张小位置图和2-3个评价维度。三列必须同构;推荐的选项可以用钴色边缘线或朱红色坐标点来强调。
|
||||
|
||||
### C. 机会-难度矩阵
|
||||
|
||||
矩阵占据了页面的60%~70%,推荐结论在右侧。点标签直接命名市场,而不依赖于复杂的图例。象限名称是可操作的判断,例如“首先进入”、“建立伙伴关系”、“持续关注”——而不是抽象的明星/摇钱树陈词滥调。
|
||||
|
||||
### D. 路线和阶段页面一条从左下到右上的主干道连接着3-5个阶段。每个阶段都有其时间安排、关键操作、阈值和退出条件。路线可能会转弯;不使用等宽堆叠工艺卡。
|
||||
|
||||
### E. 能力网页
|
||||
|
||||
中央功能锚定页面,连接渠道、交付、合规性、产品和人才节点。连接线表达依赖性;节点大小表示优先级。仅显示真正影响实施的 5-8 个节点。
|
||||
|
||||
### F. 决策页面
|
||||
|
||||
左边有一个大结论;右侧是“立即决定/进入条件/90 天行动”的三部分列表。缩小的路线图可以回顾整个旅程——这不是一个普通的感谢页面。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- 暖纸白色#F4F0E8:主要内容背景。
|
||||
- 深海军#0B1F33:标题、章节基础、主要路线和核心文本。
|
||||
- 钴蓝色#2F5BFF:推荐选项、关键路径和关键数字。
|
||||
- Vermilion #E4572E:风险、关键坐标和必须决定的节点;它的面积严格小于钴。
|
||||
- 雾青#9BD5D8:次要区域、历史阶段和去强调的数据。
|
||||
- 石墨灰色 #5B6570:标题、轴、来源和未选择的选项。
|
||||
|
||||
常规页面使用纸白+海军蓝+钴色;朱红色只出现一次。禁止使用彩虹图、荧光渐变和大型红绿对立。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
中文使用思源黑体或苹果方;英语使用 Arial/Helvetica 级无衬线字体;部分分隔符大标题可以与一行乔治亚级衬线英文搭配以获得地图集的感觉,但切勿混合使用两种以上的字体。
|
||||
|
||||
- 封面标题:4–5 倍正文大小,粗体,最多两行。
|
||||
- 页面标题:正文大小的 2–2.6 倍,左对齐。
|
||||
- 关键数字:主体尺寸的 2.5–3.5 倍,优选等宽或压缩数字。
|
||||
- 正文:1x,短句。
|
||||
- 坐标、图例、来源:0.55–0.75x,保持可读。
|
||||
|
||||
数字、年份和区域代码可以使用等宽字体。没有全大写的长句子、斜体长段落或多层阴影。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
喜欢点图、气泡图、斜率图、路径图、二维矩阵、区域小倍数地图和带有直接注释的条形图。
|
||||
|
||||
图表背景保持透明或纸白色;网格线采用极细的雾灰色。重点系列使用钴;历史/基线使用雾青色或灰色;风险阈值使用单一朱红色线。
|
||||
|
||||
地图必须带有图例、方向或比例提示。抽象地图必须清楚地标记为“示意图”——不允许出现虚假的管理精度。关键差异直接在点旁边注释,减少了独立的图例。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格提供市场评分、进入条件和风险列表。标题使用深海军蓝文本或浅雾青色底色;行与行之间有细线,没有粗边框。
|
||||
|
||||
推荐的行通过左侧的钴坐标条进行强调;风险单元格使用小朱红色点或文本标签——切勿将整个单元格涂成红色。数字右对齐,文本左对齐,评分标准和依据在表底部注明。
|
||||
|
||||
高密度内容最好分成“地图/矩阵+右侧解释”——不要将其压缩成十列宽的表格。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
稳定的组件包括坐标点、路线、区域轮廓、短刻度、页码代码、图例、比例式分隔符和细线注释。
|
||||
|
||||
节点采用实心圆或同心圆;线路分为三种类型——主线路、备用线路和依赖线路。仅当方向很重要时才会出现箭头。
|
||||
|
||||
照片不是默认元素。如果使用城市或场景照片,则仅允许一张经过去饱和处理的大图像 - 不允许使用库存照片拼贴。
|
||||
|
||||
## 10. 质地和违禁物品总体而言就像一本当代战略地图集:精确、安静、方向明确。纸基可能具有极轻的质感;深色页面保持纯净;无玻璃态。
|
||||
|
||||
禁止:默认咨询蓝卡墙、随机世界地图水印、假国家边界、3D地球仪、发光路线、彩虹热图、圆形UI面板、表情符号、装饰指南针和没有结论的整页地图。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 每个页面都可以用一句话说明它要求做出什么决定吗?
|
||||
- 地图、矩阵或路线是否真正具有比较关系?
|
||||
- 所有颜色、线条样式和节点大小是否都有明确的含义?
|
||||
- 区域和路径是否有明确标记,没有捏造的精确地理信息?
|
||||
- 推荐的选项是否清晰突出,而替代方案仍然可见?
|
||||
- 页面是否保持纸白色、海军蓝、钴蓝色和朱红色的稳定语法?
|
||||
- 标题、图例、来源、单位和假设是否完整?
|
||||
- 是否避免使用卡片墙、3D 地球仪、随机装饰线和类似模板的标语?
|
||||
- 您是否检查过重叠、裁剪、乱码、低对比度和文本换行?
|
||||
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,166 @@
|
||||
# 项目报告名称 — 组织名称联合备忘录风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
私募股权/投资银行备忘录类型,高密度报告风格,适用于银团备忘录、投资委员会材料、尽职调查摘要、交易批准、融资方案和管理业务计划材料。针对金融和行业分析读者,支持快速审查交易条款、投资逻辑、客户和市场证据、财务预测、估值、风险和执行计划;目标是“可审查、可接受后续质疑、可追溯”。
|
||||
|
||||
固定样式:16:9风景,高利用率画布;浅奶油白色背景;左侧有一条细橙色垂直线;顶部灰色/深海军蓝分段导航;右上角的小品牌文字标记(显示新主题名称的纯小文本;不要绘制图形徽标);一个大的橙色标题;标题下有一个灰色的信息句。正文使用表格、条形图、桥图、并排模块、评级点、流程框和文本证据块。字体绝对以Arial家族为主;粗体用于标题、表格标题、字段名称和关键数字;斜体仅用于注释或特别强调。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. 信息完整性是第一位的,但必须将其结构化为表格、列、编号、色块标题、脚注和细分隔线系统;长段文字不得自由浮动。
|
||||
2、橙色仅用于页面标题、当前章节、关键数据、关键栏、左侧竖线和少量标签;它不用作大面积的装饰填充,并且不会牺牲正文的可读性。
|
||||
3、身体面积可能有所不同;导航、标题区域、身份标记、左边界和脚注/页码保持稳定。图表美观必须服从于数据的清晰度、可比性和可追溯性。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为16:9横向宽屏,页边距较窄,正文区域占据绝大多数。默认背景是浅乳白色/近白色,大约`#FCF8F5`、`#FEFBF7`、`#F4F0EC`;允许使用非常微弱的品牌几何水印或浅灰色图形,但不透明度较低,因此不会影响数字的阅读。
|
||||
|
||||
封面采用全出血的深蓝色城市夜景照片,叠加半透明的深蓝色品牌几何图形。标题组位于右中区域:主标题为白色粗体,副标题为白色常规字体,日期位于一个橙色小标签内;垂直保密/时间/电子邮件信息位于左侧,橙色品牌字标位于右上角(纯小文本呈现新主题名称;请勿绘制图形徽标)。封面不使用内容页顶部导航。
|
||||
|
||||
部分分隔线使用浅乳白色背景、左侧橙色线、右上角的身份标记(表示新主题名称的纯小文本;不要绘制图形徽标)和大量空白。章节编号是一个大的橙色数字,章节标题是大的深海军字体;它们只是切换部分,并不进行复杂的论证。示例包括“行业和公司概况”、“商业计划”、“估值和退出”以及“融资、尽职调查和关键 IC 发现”。
|
||||
|
||||
标准内容页面骨架:- 顶部导航:页面最顶部的水平分段箭头/带;当前部分具有深海军蓝背景和白色文本,其他部分具有浅灰色背景或低对比度灰色文本。它的高度很低,仅用于定向。
|
||||
- 右上角身份标记:一个橙色的小品牌文字标记(表示新主题名称的纯小文本;不要绘制图形徽标),固定在右上角,周围保留清晰的空间,不重叠图表标题或导航。
|
||||
- 左侧橙色线:大多数内容页面从上到下保留一条细橙色垂直线;内容从右侧开始。
|
||||
- 标题区域:导航下方左对齐;主标题通常是橙色粗体,后面是单个灰色/深灰色信息句子。
|
||||
- 正文区域:紧接标题下方,包含表格、图表、模块、流程、并排证据或长文本,底部保留狭窄的脚注带。
|
||||
- 页脚:底部的来源、注释、保密措辞和页码。脚注明显小于正文,呈浅灰色;页码通常位于右下角或底部边缘。
|
||||
|
||||
阅读路径:顶部导航→橙色标题→信息句→正文区域从左到右、从上到下→底部脚注。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题使用判断型或主题型短语,例如“交易摘要”、“执行摘要”、“为什么我们喜欢组织名称”、“客户概述”、“商业计划:并购”;可以直接陈述强有力的结论,例如“强大的游戏发布渠道推动游戏开发支出”——没有营销口号。
|
||||
|
||||
标题下的信息句通常为一行,用于陈述结论、数据依据或页面的意义;它的颜色比正文浅,语气专业克制,没有感叹号、修辞或大段居中的段落。
|
||||
|
||||
身体规则:
|
||||
|
||||
- 长文本使用粗体副标题+正文解释+项目符号/编号点;每个段落都必须有明确的副标题或左侧标签。
|
||||
- 摘要页面可以使用左侧垂直导航卡或右侧带有密集项目符号的编号框;每个项目符号首先给出一个粗体关键字,然后给出解释。
|
||||
- 按交易条款、投资亮点、行业/客户、财务、估值、风险、融资和尽职调查等专业维度进行分组。
|
||||
- 将单个页面压缩为3-6个模块或4-8个表行;不鼓励只包含一个大语句的页面。
|
||||
- 使用粗体、橙色数字、深蓝色表格标题、浅色方框或点来强调;没有荧光突出、手绘圆圈或夸张的贴纸。
|
||||
- 保持数据旁边的数字、单位和时基,例如 FY、CY、24E、25E、CAGR、EV、EBITDA、bps、%;表格列标题解释了基础。
|
||||
- 来源脚注以小号浅灰色字体位于底部;多个碱基通过上标或括号连接——不要在正文中堆放长音符。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 交易摘要/条款清单类型
|
||||
|
||||
用于交易概述、资本结构、估值、来源和用途以及关键术语。主体是一个大表:左列包含深色或灰色字段名称,右侧包含解释和数据;中间可能会嵌入一个带有橙色标题的小型评估表或来源和使用表。阅读顺序为字段名→值→注释。适合多基础事实;不适合复杂的因果关系或多阶段过程。
|
||||
|
||||
### B. 执行摘要/多结论长文本类型
|
||||
|
||||
用于投资亮点、主要风险和论点摘要。垂直部分的卡片/编号模块位于左侧,密集的子弹位于右侧;深海军色卡片标记主要类别,橙色卡片标记当前或关键项目。每个项目符号都以粗体关键字开头。适合专业读者扫描;不适合非专业观众或谈话式演示。### C. 投资理由/逐项论证类型
|
||||
|
||||
典型的页面是“为什么我们喜欢组织名称”。正文用圆形 A/B/C/D 编号或标签组织水平参数带;每个波段都包含一个深海军蓝字幕栏、一个橙色数字、正文项目符号和关键人物。适合3-5个并行原因;不适合超过 6 个项目或每个项目都需要复杂图表的内容。
|
||||
|
||||
### D. 水平比较表/对等矩阵类型
|
||||
|
||||
用于比较公司、客户、产品、竞争对手或同行指标。左列包含公司名称或类别标签,顶部包含指标,单元格包含数字、文本、评级点或短标签。标头可以使用浅橙色/深蓝色;关键行和列可以使用浅蓝色或浅橙色填充。适合横向比较;不适合长时间的定性解释。
|
||||
|
||||
### E.图表+说明混合类型
|
||||
|
||||
用于收入趋势、市场规模、增长率、客户渗透率、财务预测、桥图和运营 KPI。主图表占据了大部分宽度,上面有结论栏/标题,下面或侧面有说明框。橙色突出核心系列,深蓝色/青色用于对比系列,灰色用于背景或历史项目。适合数据论证;没有明确的数据基础,不适合概念图。
|
||||
|
||||
### F. 流程/业务计划类型
|
||||
|
||||
用于并购渠道、运营计划和价值创造计划。由水平流程框、阶段箭头、小表格和底部图表组成;深蓝色条作为阶段标题,橙色节点标记关键操作或关键结果,灯箱带有说明。适用于阶段、路径、漏斗、执行杆;它不应该被滥用于普通列表。
|
||||
|
||||
### G. 高密度并排模块类型
|
||||
|
||||
用于客户概述、管理/顾问观点、风险缓解和尽职调查结果。页面分为多个相同大小的卡片或水平模块,每个模块包含副标题、短项目符号、图标式标记或微型图表;模块间距小,用细线和浅色填充进行分隔。不适合单个大图像或情感故事讲述。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- 背景颜色:浅乳白色/近白色`#FCF8F5`、`#FEFBF7`、`#F4F0EC`。用于内容页面的大面积基础;可以用相同亮度的暖白色代替——不要切换到高饱和度背景。
|
||||
- 正文:深灰色`#4D4E53`、`#3E3E42`。用于正文、表格文本和注释文本;必须保持高对比度,不得用浅灰色代替。
|
||||
- 标题/品牌重音橙色:`#C4794A`、`#D8752A`、`#F07A00`。用于主标题、左侧垂直线、日期标签、当前项目、关键数字、重要栏和表格标题;中小面积。可以用品牌原色代替,但暖色调的作用必须保留。
|
||||
- 结构深海军蓝:`#12234E`、`#263660`、`#293B60`。用于当前导航部分、深色侧边栏、表格标题、流程阶段栏和封面覆盖;通常与白色文本配对。可以用深品牌蓝色代替,但必须保持严肃和高对比度。
|
||||
- 辅助灰度:`#BEB6B3`、`#D9D5D5`、`#E8E3E1`、`#C6C6C9`。用于分隔线、表格边框、非当前导航、填充、轴和网格线。
|
||||
- 辅助浅蓝色/青色:`#5E9BB9`、`#9BA8AF`、`#C6CED6`。用于辅助图表系列、客户/竞争对手比较、关键行块或状态区域;它不得与橙色竞争主要口音角色。
|
||||
- 正/负/状态颜色:主要是橙色、深蓝色、青色和灰色,少量绿色表示成长或正数。应谨慎使用绿色以实现积极的改变;红色不属于稳定的原色系统。将单页的主色调控制为橙色、深蓝色、灰色以及少量的水青色。图表系列不应扩展到彩虹色;状态颜色仅用于判断,而不是装饰。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
字体以 Arial / Arial Bold 为主。 Helvetica Bold 仅用于封面或特殊保密覆盖文本; Calibri、Segoe UI 等不是主系统的一部分。更喜欢 Arial 或等效的无衬线字体。
|
||||
|
||||
- 封面主标题:3–4x 正文,白色粗体。
|
||||
- 内容页面主标题:2.5–3x 正文,橙色粗体,左对齐。
|
||||
- 部分分隔标题:3–4x 正文,深海军蓝;部分编号可能更大,呈橙色。
|
||||
- 信息句/副标题:1–1.2x 正文,灰色常规或半粗体,位于标题下方。
|
||||
- 正文:1x,深灰色;行距要紧,但不能重叠。
|
||||
- 副标题/字段名称/表标题:1–1.15x 正文文本,粗体;可能是深蓝色背景上的白色文本或浅色背景上的深灰色文本。
|
||||
- 表格和图表标签:0.75–0.95x 正文;必要时压缩但保持清晰。
|
||||
- 注释、来源、页码:0.55–0.7x 正文,浅灰色。
|
||||
|
||||
文本主要是左对齐的;表数字右对齐或按小数点视觉对齐;根据数据类型,列标题居中或左对齐。禁止大型中心身体通道。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
使用堆积柱形图、分组柱形图、水平条形图、桥图、时间序列柱线组合、小评级/点阵以及矩阵表内的迷你图;图表嵌入在内容页面的正文区域中,而不是全屏的单个图表。
|
||||
|
||||
轴线和网格线使用浅灰色;图例位于图表顶部附近或标题旁边,使用小色样+短标签。数据标签直接放置在列或条的末端或表格单元格内。
|
||||
|
||||
橙色标志着核心系列、当前项目或关键增长;深蓝色标记基线/历史/主要比较;青色-蓝色标记第二个比较;灰色标记背景、其他项目或非关键数据。预测、目标和估计年份通过 E、FY、CY、虚线、浅色阴影区域或列标题中的明确标签和定义来表达,而不是通过复杂的视觉效果。
|
||||
|
||||
关键数据可以使用橙色数字、粗体、注释框或深色标签。请勿使用 3D 图表、渐变柱、维度饼图、重阴影或没有数据标签的装饰图形。如果图表无法比表格更清楚地表达比较,则更喜欢表格。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格包含条款、财务、同行、客户、尽职调查结论和模型假设。标题使用深海军蓝背景搭配白色文本、橙色背景搭配白色文本或浅橙色背景搭配深色文本;左字段列使用深灰色/深蓝色背景和白色文本,或浅灰色背景和粗体文本。
|
||||
|
||||
行列紧凑,行高低;边框是浅灰色的细线。背景在白色、浅乳白色、浅灰色、浅橙色和浅蓝色之间交替形成区域;宽桌子可以使用斑马条纹,但不宜太浓。关键行和列使用橙色标题、浅橙色填充、深蓝色侧边栏或粗体数字;摘要行使用较暗的填充或顶部边框线。
|
||||
|
||||
金额、百分比、倍数和年份尽可能在其列内右对齐或居中;文本左对齐;单位写在列标题或第一行中,而不是在每个单元格中重复。评级点、圆圈、复选标记或短标签在视觉上位于同一列的中心。
|
||||
|
||||
脚注和上标向下移动到底部,不会挤压数据区域。避免将多行长句子塞入单元格中;当需要解释时,请使用表格下方的注释或右侧的说明框。## 9. 组件和图形元素
|
||||
|
||||
- 顶部导航栏:当前部分为深蓝色,其他部分为灰色;它不能变成一个大的菜单或图标导航。
|
||||
- 左侧橙色竖线:不承载任何内容的品牌边界;保留在大多数内容页面上。
|
||||
- 橙色主标题:页面主题的入口点;必须左对齐,与正文保持清晰的间距。
|
||||
- 信息句:标题下的一行判断语句。
|
||||
- 深蓝色字幕栏:用于分组、参数带、流程阶段和表格模块标题,带有简短的白色文本标题。
|
||||
- 橙色编号/圆形徽章:用于 A/B/C/D、步骤、要点或强调的项目。
|
||||
- 光填充卡/模块盒:用于并排证据、客户模块、风险和缓解措施;浅灰色边框,填充浅奶油色/浅灰色/浅橙色。
|
||||
- 流程箭头和连接器:用于并购、管道和价值创造步骤;线条平坦,没有阴影。
|
||||
- 公司标识符:用于客户、同行和竞争对手页面上表格的左列;以统一大小的文本名称或中性占位符块的形式呈现,避免掩盖内容 - 不要绘制图形徽标。
|
||||
- 脚注/来源带:位于底部,采用小浅灰色类型。
|
||||
|
||||
彩色图标并不是一种稳定的语言;如果必须使用,请使用很少的、单一颜色或品牌颜色的,以服务于餐桌识别。可以使用矩阵标记、点等级和复选标记,但需要统一的样式。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
总体而言,保持扁平、克制、专业和轻度品牌化。除了封面照片外,内容页面几乎不依赖大图像背景;照片、屏幕截图和插图不是主要语言。圆角仅用在少数标签或卡片上,半径较小;阴影、渐变、发光、3D 和复杂纹理不属于此风格。
|
||||
|
||||
禁止:
|
||||
|
||||
- 内容页面上的大照片背景或图像上压有低对比度文本。
|
||||
- 3D 图表、渐变柱、发光边框、浓重阴影、拟物化按钮。
|
||||
- 表情符号、卡通插图、社交媒体风格的贴纸、手绘涂鸦、高饱和度彩虹图标。
|
||||
- 大段居中的文案、无结构的长段落、纯粹的口号页面。
|
||||
- 一页上的原色过多,或与橙色/深海军蓝系统冲突的强烈颜色。
|
||||
|
||||
谨慎使用:
|
||||
|
||||
- 公司标识符和客户标识符:仅在比较表和客户页面上,以统一大小的文本名称或中性占位符块形式呈现 - 请勿绘制图形徽标。
|
||||
- 浅色水印/品牌几何形状:可以用作低不透明度背景,但不得穿过文本或表格。
|
||||
- 绿色/红色状态颜色:仅用于明确的语义,例如增长、下降或风险。
|
||||
- 圆形标签和小图标:它们可能仅有助于识别;它们不能取代文本证据。
|
||||
|
||||
特殊页面:封面可以使用全出血的深蓝色照片,并叠加半透明的几何图形;部分分隔符可以使用大量的空白和大数字;内容页面必须返回到表格化、基于证据、导航一致的系统。
|
||||
|
||||
## 11. 一代清单- 骨架:是16:9吗?内容页面是否保留顶部导航、右上角品牌文字标记、左侧橙色线、标题区域和底部脚注/页码?
|
||||
- 文案:标题简短且专业;信息句是否在一行中陈述了判断;正文是由字段、项目符号、表格还是模块组成的?
|
||||
- 层次结构:橙色标题、深蓝色分组、正文和注释是否具有明显的相对大小差异;是否避免了对特定字体大小的依赖?
|
||||
- 颜色:背景为浅乳白色;原色仅限于橙色、深蓝色、灰色和少量的青色;橙色只是为了强调吗?
|
||||
- 布局:正文是否可从左到右、从上到下扫描;高密度内容是否有列、标题、编号和分隔线?
|
||||
- 图表:是否使用扁平柱/条/桥/矩阵;轴和网格是浅灰色的;关键数据是否直接标注;是否避免使用 3D 和彩虹色?
|
||||
- 表格:标题、字段列、边框、填充、关键行和列、数字对齐和单位基数是否一致?
|
||||
- 组件:导航栏、深蓝色标题栏、橙色编号、浅色卡片和脚注来源是否统一,而不是逐页任意重塑?
|
||||
- 禁止项目:内容页面上是否没有表情符号、插画风格的图标、浓重的阴影、渐变、发光、复杂的纹理或大面积的照片?
|
||||
- 技术质量:检查是否有溢出、截断、乱码、重叠、低对比度、遮挡、空内容或比例错误;当连续使用相同的模板时,身体结构应该发生变化,而骨架则不会。
|
||||
- 没有默认使用卡片:除非用户明确要求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式 - 线段、空白以及字体和字体大小差异是更好的解决方案。
|
||||
- 无等分组合:除非没有其他布局可用,否则不要默认三向分割、四向分割或2×2矩阵——包括三向分割+标题+结论等三部分结构。
|
||||
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,116 @@
|
||||
# PJ Mountain — 投资备忘录(组织名称风格)风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适用于私募股权投资委员会、交易审批、尽职调查报告和投资备忘录的高密度专业 PPT 风格,适合具有财务、战略、运营和会计背景的读者。每一页构建了一条可追溯的“结论-证据-假设-来源”链,强调数据密度、比较维度和可审查性。
|
||||
|
||||
核心是白色背景的全画布、左上角的标题、标题下的斜体结论线、紫色结构条、蓝色/青色/灰色分类颜色、细网格表格、紧凑的 Calibri 系列字体以及底部脚注和页码。正文主要由图表、表格、流程框、并排模块和少量证据图像组成;装饰极少,颜色仅起到剖面、分类、数据系列和风险提示的作用。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. 清晰胜过空白:优先保留关键结论、数据、测量基础、来源和比较维度,通过分隔线、标题栏、浅灰色填充和层次结构维持顺序。
|
||||
2、颜色是信息词典,而不是装饰:紫色用于结构和标题;蓝色/青色/灰色表示业务类别或图表系列;红色仅表示风险、差异、敏感假设或黑框强调。
|
||||
3. 页面可能很复杂,但骨架必须保持稳定:正文可以混合图表、表格、流程、地图和图像,但标题区域、结论行、底部来源、页码和颜色语法在整个甲板上保持一致。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为 16:9 横向,默认白色背景;内容页面使用窄边距和高内容利用率。顶部是标题区域,底部是脚注和页码区域,中间是主要证据区域。阅读路径:左上部分标签/标题→标题下斜体结论线→主要区域从左到右,从上到下→底部脚注→右下页码。
|
||||
|
||||
封面页:左侧有纯文本小字体身份标记(写新主题名称;不要绘制图形标志)、项目名称、文档类型和日期;右边是一个大的蓝色线条艺术抽象图形;左下角有红色斜体的保密说明。它使用大量的空白和品牌线条艺术,并且不采用内容页脚注系统;这种抽象线条仅适合封面,不应扩散到内容页面背景中。
|
||||
|
||||
免责声明页面:左上角有一个大标题;正文是一列密集的小字体段落,几乎没有颜色或图形,只保留页码。充分披露优先;不得将其强制放入显示型模块中。
|
||||
|
||||
内容页:左上角可能有一个细边框矩形或一个小编号部分标签;主标题位于其下方或右侧,呈紫色或深灰色;标题下方有一条斜体灰色结论线。正文分为2-4个模块,模块标题采用紫色横条或细边框标题栏。底部保留了来源、注释和假设陈述,右下角有一个很小的页码。
|
||||
|
||||
部分/分隔页保留白色背景和左上角标题逻辑,没有大图像背景。没有持久的顶部标题导航,没有整页水印,也没有大照片背景。来源和脚注是固定的底部信息层,不得被图表或表格覆盖。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题采用陈述性、分析性的“主题+判断维度”措辞,如公司概况、市场展望、对标分析、结构性解决方案等;避免广告式的短标题。在标题下,一两个斜体信息行表达最重要的判断、发现或问题;它们不具备正文的全部功能。主体被组织成证据块。每个模块必须有一个清晰的副标题,说明比较对象、指标或结论的方向;在里面,使用项目符号、短句、数字、表格或图表。一页可以包含多个要点,但它们必须属于一个主要问题;当平行点超过 4 组时,使用编号、色带或列来建立路径。
|
||||
|
||||
段落应该简短,最好使用项目符号和缩写表达;每一个项目符号包含一个行动/判断+一个事实依据;不要写连续的散文。关键词可以用粗体、紫色、红色框或背景颜色强调,但每页不得超过两个强调级别。
|
||||
|
||||
数字、单位和时基与数据相邻,并在图表标题、表标题或脚注中说明。财务和运营数据保持列对齐;百分比、倍数、年份和货币单位不得混合。来源脚注以小灰色字体位于底部;多个外部数据源按图表或模块排序。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
1. **基于文本的摘要页面**:适合执行摘要、投资论文和主要发现。结构:大标题+斜体概述+多组紫色字幕+项目符号;每组仅包含一个判断类别,并通过字幕、粗体关键词和稀疏编号来强调;不要插入破坏摘要阅读的复杂图表。
|
||||
|
||||
2. **左侧编号导航 + 右侧结论列表**:适合并排展示 4 个尽职调查主题、投资论文或风险应对。左侧放置垂直色块或编号标签;右侧有相应的结论和项目符号。色块代表部分或问题类别,不能纯粹是装饰性的;如果主题没有明确的分组关系,请勿使用此布局。
|
||||
|
||||
3. **多图表仪表板页面**:适合市场规模、业务组合、成本基准和增长动力等多指标比较。正文采用2×2网格或一大二小垂直排列,每个区块有一个紫色标题栏;旁边的简短注释框可以解释异常值。避免拼贴不相关的图表;所有图表必须共同回答标题下的信息线。
|
||||
|
||||
4. **图表+右侧说明/注释页**:适合趋势线、柱形图、箱线图、瀑布图。将主图表放在左侧或中间;在右侧,使用亮色框、红色框或短项目符号来标记结论;红色笔划、箭头、标签或对比数据点可用于强调。如果图表本身已经很拥挤,请将说明文字移至底部或拆分页面。
|
||||
|
||||
5. **表格/矩阵页面**:适合财务模型、可比公司、交易结构、尽职调查清单和收益桥梁。主体是一张大桌子或几张小桌子;紫色标题建立主要分组,浅灰色填充用于辅助标题或摘要行。仅用于自然具有行列维度的信息;不要将叙述性文本强行放入表格中。
|
||||
|
||||
6. **流程/结构图页面**:适合交易结构、融资路径、组织关系或价值创造路径。使用矩形框、细线箭头和少量颜色来区分阶段或聚会。箭头代表真实流程或资本/信息流,不得用作装饰性运动线。复杂的结构图保留图例和脚注解释。
|
||||
|
||||
7. **证据图像/姓名文字混合页面**:可放置少量地图、办公地点、人物、客户姓名文字列表或业务截图。图像必须受边框、标题和说明文字的约束,并且通常面积小于图表/表格主体;它们不是情感背景或整页视觉主角。
|
||||
|
||||
## 5. 颜色系统- **背景:#FFFFFF**。所有内容页、摘要页、表格页的绝对主背景。无法更换为深色背景;如果模块需要区分,请使用浅灰色填充,而不是重新着色整个页面。
|
||||
- **正文:#333333–#4A4A4A**。用于正文、表格内容和图表标签;每个输出设备可能会稍微变暗,但不应该使用纯黑色,因为这样感觉太压抑。
|
||||
- **标题/结构紫色:#470D59**。用于中小型区域的内容页标题、部分标签、模块标题栏、表格标题和关键分隔线;不应覆盖整个页面。可以用深色品牌颜色代替,但必须保持高对比度和金融机构的严肃性。
|
||||
- **封面/商业深蓝色:#0020AC / #0126AE**。用于封面的抽象线条、部分分类颜色、柱形图系列、强调块;可以用作部分颜色或主图表系列颜色,但其在内容页面上的区域应保持在白色和灰色背景下方。
|
||||
- **辅助蓝色:#3E58B5 / #7B8DC7**。用于辅助图表系列、堆叠柱、标签和浅色调类别;不得与紫色争夺冠军角色。
|
||||
- **青色/蓝绿色:大约#00A6B2–#20B8C6**。用于业务类别、流程阶段、图表系列以及部分模块彩条;可以用品牌辅助色代替,但必须与紫色和深蓝色区分开来。
|
||||
- **浅灰色背景/表格填充:#F2F2F3、#F6F7F7、#E8EAEB**。用于表格着色、模块背景、图表绘图区域和灯光分区;可能会占据大面积。不能用高饱和度的颜色代替。
|
||||
- **分隔线/网格灰色:#C8CACE、#D0D4D7、#BBBBBB**。用于表格线、轴、模块边框和分隔线;应该是细的、轻的、低存在感的——避免粗黑线。
|
||||
- **强调/风险红色:大约#B00020–#C00000**。用于封面保密说明、负面警报、敏感假设和红框注释;仅小面积,不是常规系列颜色。
|
||||
|
||||
将单个页面的主色调保持为紫色+蓝色/青色+灰色,红色仅用于警告。图表系列颜色在同一页面上保持一致的字典;避免使用相同的颜色来表示不同的企业或州。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
字体以 Calibri Light、Calibri 和 Calibri Italic/Bold 为主。浅色用于封面和大标题,常规用于正文和表格,粗体用于关键词和表格标题,斜体用于结论行和免责声明。不要引入衬线字体、手写字体或个性很强的中文字体。
|
||||
|
||||
正文 = 1x:覆盖主标题约。 3–4 倍;内容页面主标题大约。 2–2.8 倍;页面信息行约1.1–1.3x,大部分是斜体;模块标题大约1–1.2x,通常设置在颜色条内; 1x 身体子弹;表格内容和图表标签大约。 0.75–0.9x;注释、来源和页码大约。 0.45–0.65 倍。免责声明页面正文文本可能低于正常正文大小,但必须保持可读。
|
||||
|
||||
文本主要是左对齐的。表中的数字右对齐或按小数点对齐;年份、类别和指标名称可以居中或左对齐。大段居中的文案不属于这种风格;除盖部分外,不使用它。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
真实图表主要有堆积柱形图、分组柱形图、折线图、箱线图/分布图、散点图/气泡图、桥图、面积/成分图和基准比较图。图表嵌入模块框架中,上方有短标题或紫色标题栏,底部注明数据源和测量基础。轴线和网格线使用浅灰色细线;避免使用粗黑轴。图例位于图表的上方、下方或右侧,使用带有系列色样的小字体文本。柱形图系列以深蓝色、浅蓝色、青色、灰色、紫色为主;堆叠顺序保持稳定。折线图可以并行放置多条线,但颜色、线型和结束标签应该会降低阅读成本。
|
||||
|
||||
关键数据使用红色笔划框、红色注释框、箭头、小标签或深色数据标签。预测、目标和基线使用虚线、浅色线或单独的标签,不得与实际数据混淆。图表美化不能牺牲数字清晰度:避免3D、渐变柱、阴影、夸张的圆角和无意义的图标。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
标题使用深紫色背景搭配白色文字或浅灰色背景搭配深色文字;第一级分组使用紫色水平条,第二级分组使用浅灰色填充。行列分隔板又薄又轻;表格行高紧凑,但文本不得重叠。
|
||||
|
||||
数字列右对齐或按小数位对齐;文本列左对齐;年份、阶段和评级符号可以居中。重要的列、摘要行、关键假设或输出结果可以用浅灰色填充、紫色文本、粗体或边框来强调。负值、风险项或需要注意的差异可以使用红色,但不能全表大面积变红。
|
||||
|
||||
斑马条纹不是强制性的;对于许多行,可以使用极浅灰色的交替背景。矩阵式页面可以使用点、复选标记、评级符号、色块和短标签,但每个符号必须有图例或直观易懂。表格担负着“证据和模型”的作用,切不可作为纯粹的布局装饰。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
- **标题栏/章节标签**:左上角的小矩形标签,通常带有数字、章节名称和紫色/蓝色/青色边框或填充。其功能是定位甲板的结构;不要在页面之间随意移动它。
|
||||
- **模块标题栏**:深紫色或剖面色水平栏,带有白色或深色文本;紧凑的条形高度、宽度与模块匹配。
|
||||
- **卡片/盒装模块**:白色或浅灰色背景,带有细灰色边框,用于图表、说明、地图和流程节点。四舍五入难以察觉或不存在;没有阴影来营造卡片的感觉。
|
||||
- **注释/标志框**:红色或紫色细边框,带有解释异常、假设或风险的短句。只针对本地高价值信息;不要框定每一个结论。
|
||||
- **流向箭头**:连接矩形节点的细线箭头,表示真实的顺序、因果关系、资金流向或组织关系;颜色遵循部分颜色或灰色。避免使用粗的装饰箭头。
|
||||
- **图像框架和名称网格**:图像需要边界、标题和说明文字;客户、合作伙伴或类似公司的名称被排列为纯文本小型网格(或用中性占位符块替换)作为证据 - 没有绘制图形徽标。禁止使用彩色图标作为装饰性卖点。
|
||||
- **分隔线**:表格的浅灰色细线、脚注的上边缘和模块分隔。紫色粗线仅用于表标题或模块标题。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体扁平、内敛、制度化、高密度;几乎不依赖照片、插图、纹理、灯光效果或尺寸效果。品牌感觉来自紫色结构条、蓝色封面线条艺术、字体和脚注系统。禁止:大面积图像背景、3D图表、发光、复杂渐变、重阴影、表情符号、卡通插图、装饰性彩色图标、大片居中副本、无来源的数据图表、低对比度浅色文本以及与信息无关的背景纹理。
|
||||
|
||||
谨慎使用:照片、屏幕截图、地图、肖像、客户姓名文本、红色注释、圆形卡片。它们必须作为证据或解释工具出现,并控制面积和数量。
|
||||
|
||||
允许特殊页面:封面可以使用大面积的蓝色抽象线条和更多的留白;免责声明可能使用极高密度的单栏法律文本;附录/模型页面可以使用更密集的表格,但仍必须保留标题、来源和页码。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 是否为 16:9、白色背景、窄边距、高内容利用率、保留顶部标题区域和底部脚注/页码区域?
|
||||
- 标题是一个分析性主题,下面有一个清晰的斜体结论行或一页论文吗?
|
||||
- 紫色是否仅用于标题、部分、标题和结构重点,而蓝色/青色/灰色则按类别或数据系列稳定使用?
|
||||
- 页面的要点是否围绕一个主要问题,模块之间有清晰的分组逻辑吗?
|
||||
- 图表是否有标题、图例、轴/标签、来源和测量基础,没有 3D、渐变、阴影或其他装饰?
|
||||
- 表格的行列是否对齐,标题是否清晰,分隔线是否清晰,并且对关键行和列的强调有所限制?
|
||||
- 组件是否具有信息功能:用于定位的标签、用于分组的彩条、用于聚合的框架、用于流向的箭头、用于风险警报的红框?
|
||||
- 是否避免使用照片背景、表情符号、说明性图标、复杂纹理、眩光和无意义的大色块?
|
||||
- 您是否检查过溢出、截断、乱码、重叠、低对比度、遮挡、空模块、页码缺失、比例错误和来源缺失?
|
||||
- 模板变体是否服务于信息结构而不是仅仅使页面看起来不同?
|
||||
- 没有默认使用卡片:除非用户明确要求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式 - 线段、空白以及字体和字体大小差异是更好的解决方案。
|
||||
- 无等分组合:除非没有其他布局可用,否则不要默认三向分割、四向分割或2×2矩阵——包括三向分割+标题+结论等三部分结构。
|
||||
|
After Width: | Height: | Size: 1.2 MiB |
@@ -0,0 +1,171 @@
|
||||
# 组织名称 — 报告名称 2025 风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
社论年度研究出版物PPT风格:温暖的米白色纸张、超重的黑色观点标题、部分彩色荧光突出、密集的数据图表和稳定的页脚。适合行业年度报告、投资研究、技术趋势、市场格局和政策/生态系统分析。每一页都先给出判断,然后给出证据。
|
||||
|
||||
固定特性:16:9风景画布;机身多采用类似#F2EFE6的暖白色背景;左上角有一个小部分标签;顶部有强烈观点的标题;由部分颜色矩形支持的关键字;正文使用图表、表格、时间线、卡片或案例网格;底部带有固定的品牌文字标记、来源和版权。部分分隔线使用带有像素块的深色/高饱和度背景,而内容页面则保持克制。
|
||||
|
||||
1. **观点在前,证据在后。** 每一页都必须有一个独立的判断标题;图表/表格/模块的存在只是为了证明判断;没有证据就没有口号页。
|
||||
2. **高密度来自结构,而不是堆积的文字。** 使用栏、表格、卡片、图例、注释和脚注来分层信息,清晰地分隔标题区域、正文区域和页脚区域。
|
||||
3. **颜色承载信息作用。** 暖白、黑、灰处理阅读;部分颜色处理识别和强调;图表系列颜色区分数据。品牌颜色不得牺牲轴、标签和正文的可读性。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
**画布和边距**:标准宽屏 16:9。内容页使用稳定、相当窄的左、右、上安全边距,底部保留页脚带;正文水平展开,避免居中的窄栏长文本。
|
||||
|
||||
**默认内容页面骨架**:
|
||||
- 左上角的小部分标签:小色块/短条或小标题+大写部分名称。
|
||||
- 左上角标题区域约占页面高度的15%–25%;超重的黑色判断语句可以换行,关键词可以用半透明截面颜色矩形突出显示。
|
||||
- 标题下方是正文区域,包含图表、表格、矩阵、左右栏或案例模块。
|
||||
- 页脚横跨底部:品牌文字标记位于左下角,来源/来源位于中左下角,版权位于右下角。
|
||||
- 阅读路径:左上章节标签→大标题判断→高亮关键词→正文证据→图例/注释→来源和版权。
|
||||
|
||||
**封面**:暖白色背景,中间有水平绿色像素块;超大的黑色标题堆叠并居中,带有斜体衬线“of”;年份在下方居中。可以覆盖一些浅蓝色/紫色半透明方块。没有照片,没有纹理,没有复杂的背景。
|
||||
|
||||
**披露/声明页**:全版高饱和度绿色背景;左上角有一个小期刊名称和一个超大的黑色标题;多个小字长文本段落覆盖中下区域。仅用于合法披露——请勿迁移到普通内容页面。
|
||||
|
||||
**目录页**:暖白色背景;左侧有一个大的内容标题和绿色像素块;右侧包含由数字、部分名称、细规则和末尾的小部分颜色块组成的部分列表。没有缩略图样式的目录。
|
||||
|
||||
**部分分隔线**:深蓝色、紫色、绿色等纯色背景;左边或中间有章节编号和大标题;像素块可能位于右上角或角落;没有复杂的数据。
|
||||
|
||||
**水印/背景图形**:除了封面、目录和部分分隔符上的像素块外,内容页面不使用水印或大背景图形。
|
||||
|
||||
## 3. 内容组织**标题写作**:使用完整的观点句子,而不是名词标签,例如“某种趋势正在增长/趋同/占主导地位”。保持两到三行,仅突出显示一个关键短语或单词,并避免给整个句子着色。
|
||||
|
||||
**信息行和正文**:使用短段落或小注释,放置在图表或内部卡片的旁边或下方;它们说明了测量基础、样本范围、例外情况或结论的含义。避免大范围的居中副本。
|
||||
|
||||
**分组逻辑**:趋势图解释随时间的变化,堆积图解释组成,表格解释比较,卡片解释案例,时间线解释阶段。多模块页面使用等宽列、等高卡片或统一表格框架。
|
||||
|
||||
**每页点数**:每页1个主要判断点,2-4个从属支撑点;不要同时提出多个不相关的结论。
|
||||
|
||||
**正文密度**:允许高密度,但文本块必须短,并且必须保留图表标签和来源。除了一张主图表之外,更喜欢左右栏或两个堆叠的证据区域。
|
||||
|
||||
**项目符号书写**:谨慎使用传统的点列表;喜欢图表旁注、卡片标题、表格列标题、图例和标签。使用粗体、色块背景或局部彩色文本来强调关键字——没有下划线或花哨的标记。
|
||||
|
||||
**数字/单位/时间基准**:数字接近图表或卡片;单位、时间范围和估计基础都包含在副标题、轴或脚注中。估计范围可以使用高可见度的彩色文本或引导线。
|
||||
|
||||
**来源脚注**:每个数据页底部必须有来源/来源;本地图表注释无法替代页脚源。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
**A。单张大图+右侧说明栏**
|
||||
左边/中间有一个大的折线图、面积图、堆积面积图或柱形图;右侧窄栏包含大胆的结论、关键数字或图例解释。使用标题突出显示、图表内注释点、结束标签或右侧的彩色说明框进行强调。不适合比较具有不同测量基础的多个图表。
|
||||
|
||||
**B。热门观点+全角图表**
|
||||
标题位于顶部,图表横跨整个正文宽度,具有清晰的轴和网格线。适合时间序列、市场份额和长期变化;不要在图表上覆盖太多卡片。
|
||||
|
||||
**C。左文本右图表/左图表右文本两列**
|
||||
用于“判断+证据+解释”。文本栏包含短段落、关键数字和源补充;图表栏是主要证据,比率可能有利于图表。正文栏不能变成一篇长文章——最多是几个要点。
|
||||
|
||||
**D。高密度并排模块/卡网格**
|
||||
用于案例、公司、流程链或链接、产品或指标比较。卡片大小统一,用浅色填充或细线分隔;标题为粗体黑色,内部包含小图像、数字或简短注释;部分颜色小标签或卡片背景颜色可以提供强调。如果每张卡片都需要很长的解释,请拆分页面。
|
||||
|
||||
**E。表格/矩阵式页面**
|
||||
用于多实体、多指标比较。清晰的标题、细线和浅色填充区分行和列;关键列可以使用部分颜色、深色填充或图标点。表格是证据的主角,不会与大图表竞争同一页。
|
||||
|
||||
**F。半圆/仪表式估算图**
|
||||
用于表达范围估计、层次关系以及从大量群体到较小活跃群体的嵌套。必须与左侧的数字标签和引导线配对;不适合精确的趋势比较。**G。图表 + 案例备注卡**
|
||||
将特定项目/案例放在趋势图旁边。案例卡具有浅色或白色背景,带有略圆/近矩形的角,包含项目文本名称/产品图像、一个短段落和 2-3 个关键指标。案例卡是辅助证据,不得掩盖主图表。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
**背景 — 温暖的米白色#F2EFE6 / #F5F2E9**:用于页面基础、浅表填充和图表背景。除非源图像/嵌入图表需要,否则不能用纯白色或冷灰色替换。
|
||||
|
||||
**主要文本 — 近乎黑色 #111111 / #1A1A1A**:用于标题、正文、关键轴文本和页脚品牌字标。主标题不得替换为浅灰色。
|
||||
|
||||
**辅助文本/线条 — 灰色 #83817D / #9B9D9D / #C5C0BA**:用于脚注、来源、网格线、表格分隔符和辅助标签;不包含主要结论。
|
||||
|
||||
**品牌/部分绿色 — #52DA92 / #79D497**:用于封面像素块、披露页面背景、目录像素块、部分颜色和标题关键字突出显示。大面积使用仅限于封面、目录、披露页或章节页;在内容页面上,它仅用作小区域突出显示、标签和图表系列。
|
||||
|
||||
**深蓝色/部分暗色调 - 大约#342B56 / #39374F / #0B2D3A**:用于部分分隔符背景、深色图表系列和强调块。深色背景使用白色或亮色文本;在内容页面上谨慎使用大面积区域。
|
||||
|
||||
**蓝色系列 — #2351EC / #4168C5 / #A4C9FE**:用于图表系列、范围填充、部分颜色和强调标签。浅蓝色可以填充较大的图形区域;深蓝色用于线条和关键系列。
|
||||
|
||||
**橙色系列 — #F6A031 / #F6931C / #F9961F**:用于重要的图表系列、标签、正增长或一个资产/类别标识符。不应在一页上与太多其他高饱和度颜色一起出现。
|
||||
|
||||
**紫色/洋红色系列 — 大约 #DB76ED / #9D8C7F / #7B3FF2**:用于分区分隔线、图表系列和标签卡;与橙色/蓝色形成鲜明对比,在内容页面上控制区域。
|
||||
|
||||
**绿色图表系列 — 大约 #70AF87 / #2FBF72**:用于面积图、增长趋势和状态强调。品牌绿色用于部分/突出显示;绿色数据代表系列。
|
||||
|
||||
**每页颜色边界**:内容页面仅限于 1 个部分颜色 + 2-4 个数据系列颜色。高饱和度的颜色只是为了区分数据,而不是随意的装饰。没有强烈的正/负状态颜色系统;在表达涨跌时,更喜欢图例文字解释,避免采用红绿金融惯例。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
强大的无衬线出版系统:标题极其粗体、紧凑、黑色;正文和脚注采用清晰的无衬线字体;封面上的“of”为斜体衬线。
|
||||
|
||||
- **主标题**:大约。 2.5–4x 正文,超重,紧行距,主要左对齐;盖子可能会更大。
|
||||
- **部分分隔符标题/编号**:可能超过正文文本的 4 倍,粗体黑色或白色。
|
||||
- **小部分标签**:约。 0.7–0.9x 正文,全部大写或短语,通常带有小色块。
|
||||
- **正文解释**:正文 = 1x,黑色或深灰色短段落,行间距宽松;避免长而密集的列。
|
||||
- **图表标题/副标题**:大约。 0.9–1.2x 正文文本,粗体或半粗体,放置在图表上方。
|
||||
- **表格文本/图例标签**:大约。 0.75–0.95x 正文;数字可以是半粗体。
|
||||
- **注释/来源/页脚**:大约。 0.55–0.7x 正文,灰色或低粗黑色;必须保持可读性。
|
||||
- **页码**:不是显眼的导航设备;如果添加,它们应该被抑制并折叠到页脚中——它们不能成为视觉焦点。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
主要图表类型:堆积面积图、折线图、柱形图、组合柱线图、半圆形嵌套/仪表式估计图、小时间序列、比较图。**轴和网格**:细的灰色轴;浅色、规则的网格线;暖白色或浅色背景。轴标签小而清晰;时间轴通常水平延伸。
|
||||
|
||||
**图例和标签**:图例位于图表的内边缘或图表旁边,使用色块/线条样本+类别名称。关键数据直接标注在图表上或右侧说明栏中。
|
||||
|
||||
**系列颜色**:采用橙色、蓝色、紫色、绿色、浅蓝色等高辨识度颜色。堆积面积图必须保持边界清晰;折线图中的强调线可能更粗或更饱和。
|
||||
|
||||
**强调注释**:使用部分颜色突出显示、水平基线、解释框、关键数字标签或本地彩色卡;注释靠近相关数据点,不会作为装饰而浮动。
|
||||
|
||||
**预测/目标/基线**:新预测使用虚线/浅色阴影范围,并在图例中进行解释;不要将它们与坚实的历史线索混淆。
|
||||
|
||||
**边界**:没有 3D 图表、透视图、发光图表或过度拟物化的仪表。轴和源不得省略。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格用于专业证据和多实体比较。标题使用粗体文本、浅色填充或顶部分隔线;行和列由细灰色线划分;填充物有暖白色、浅米色或浅灰色;关键单元格可以使用部分颜色或深色块。
|
||||
|
||||
**行列规则**:行高紧凑,不拥挤;长文本左对齐,数字右对齐或按小数点/单位视觉对齐;栏目标题保持简短;多列指标保持统一的单位和时间基础。
|
||||
|
||||
**强调处理**:使用突出显示的列、彩色标签、粗体数字、深色摘要行或小点标记。突出显示仅用于关键比较——不要对整个表格进行模式化。
|
||||
|
||||
**斑马条纹和分隔**:更喜欢细线和浅色填充分区;如果使用斑马条纹,它必须很轻。避免厚重的边框。
|
||||
|
||||
**高密度模块**:并排卡片、公制块、格子和表格必须具有统一的尺寸、标题级别和间距;每个模块仅包含必要的数字、注释和图例。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
**像素块**:由阶梯式矩形块组成,通常用于封面、目录和部分分隔符,很少用于导航。大面积使用仅限于结构页面;在内容页面上,不要重复铺上像素块作为背景装饰。
|
||||
|
||||
**章节标签**:一个小色块+大写的章节名称,固定在左上角,用于章节定位。
|
||||
|
||||
**标题高亮条**:位于关键字后面的半透明或实心矩形,具有像荧光笔一样的直边。仅突出显示关键字或短语;切勿突出显示整个正文段落。
|
||||
|
||||
**卡片/标注框**:用于案例、图例解释、关键数字和类别注释。矩形或略圆角;填充可以是橙色、紫色、深色或浅色,并带有高对比度文本;放置在相应图表附近。
|
||||
|
||||
**分隔线**:用于目录、表格、图表网格和模块边界的灰色细线。线条内敛、笔直;没有装饰曲线。
|
||||
|
||||
**图标/身份标记**:仅少量用作小类别图标;品牌/项目标识符以纯小文本形式呈现(写下新主题名称)——不绘制图形徽标。彩色图标不是一种全球语言;它们只能用于案例卡、图例或项目文本标识符。
|
||||
|
||||
**流程箭头/矩阵标记**:用于流程或阶段说明;保持它们平坦、细线、颜色少;不要构建复杂的流程图。
|
||||
|
||||
**图像框架**:放置在卡片内或图表旁边的少量产品/设备图像,仅辅助 - 绝不是整页背景。
|
||||
|
||||
## 10. 质地和违禁物品整体扁平、出版级、内敛、高密度、带有强烈的品牌色彩;识别来自于字体重量、温暖的米白色纸张、像素块和部分颜色,而不是来自照片跨页或维度纹理。
|
||||
|
||||
**禁止**:大面积摄影背景、复杂插图背景、表情符号、3D图表、发光效果、玻璃形态、强烈阴影、复杂纹理、花边装饰、随意渐变、大片居中副本、无源数据图表、低对比度浅色文本以及无标题判断的纯图像页面。
|
||||
|
||||
**谨慎使用**:彩色图标、产品屏幕截图、圆形卡片、整页深色背景、渐变填充、高度饱和的多色图表。它们必须提供信息功能并仅限于案例/图表/章节页面范围。
|
||||
|
||||
**允许特殊页面**:整版高饱和度绿色用于披露;用于部分分隔符的整页深蓝色/紫色/绿色背景;封面和目录上的大面积像素块;案例页面上有少量物理/产品图像。普通内容页面仍然以暖白色背景和数据证据为中心。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 骨架:是16:9吗?它是否保留左上角部分标签、顶部意见标题、正文证据区域和底部品牌字标/来源/版权?
|
||||
- 文案:标题是否为完整的判断语句;每页有一个要点吗?关键词高亮是否受到限制?
|
||||
- 层次结构:标题、图表标题、正文、注释和页脚是否有明显的相对大小差异;页码不用作主要导航。
|
||||
- 颜色:背景是暖米白色;部分颜色仅用于识别/强调;一页上是否有太多高饱和度颜色;文字对比度是否足够?
|
||||
- 布局:图表、表格和卡片是否对齐;利润率是否稳定;页脚没有被身体挤压吗?
|
||||
- 图表:是否有轴、图例、单位、时间范围和来源;重点注释是否接近数据;没有使用 3D/发光/无意义的装饰?
|
||||
- 表格:标题、分隔符、数字对齐和单位基数是否清晰;突出显示仅用于关键行和列吗?
|
||||
- 组件:是仅在封面/目录/部分分隔符上使用或用于稀疏导航的像素块;卡片是否起到解释作用?图标有实际意义吗?
|
||||
- 禁止使用的物品:禁止使用大图像背景、表情符号、复杂插图、重阴影、玻璃态、过度渐变或大段居中副本。
|
||||
- 质量:检查溢出、截断、乱码、重叠、低对比度、遮挡、空内容、错误比例和机械模板重复。
|
||||
- 没有默认使用卡片:除非用户明确要求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式 - 线段、空白以及字体和字体大小差异是更好的解决方案。
|
||||
- 无等分组合:除非没有其他布局可用,否则不要默认三向分割、四向分割或2×2矩阵——包括三向分割+标题+结论等三部分结构。
|
||||
|
After Width: | Height: | Size: 780 KiB |
@@ -0,0 +1,192 @@
|
||||
#设计系统:消费趋势监测·景观呈现版
|
||||
|
||||
> 逆向工程来自:36页肖像(美国信件612×792)投资监测季刊的真实视觉证据(封面+所有35页的逐页图像)。
|
||||
> 该系统仅保留其**视觉方法** - 报纸风格的网格、与数据图表混合的衬线标题、青色/琥珀色/深红色图表语言和纸米色页脚 -
|
||||
> 不复制任何第三方徽标、品牌名称、商标或源文本;根据任务要求,将纵向报告语法转换为16:9横向呈现系统。
|
||||
> 任何无法从像素证据中精确确认的值都被标记为“近似值”。
|
||||
|
||||
---
|
||||
|
||||
## 1.视觉DNA(一句话)
|
||||
|
||||
**财经报纸式的数据监测报告**:内敛的黑白版式+大衬线标题+密集的柱线组合图表+深海蓝色封面米色页脚;整体气质是“值得信赖的行业仪表板”,而不是营销海报。
|
||||
|
||||
四项可执行原则:
|
||||
1. **结论用斜体衬线表达,证据由图表给出**——每个信息块都是“斜体衬线结论句+图表/正文”的配对。
|
||||
2. **图表是主角**:页面区域先到图表;文本是图表的注释。
|
||||
3. **颜色仅编码,从不装饰**:青色=主要系列,深青色=次要系列,琥珀色/黄色=比较线,深红色=警告或第二主题,米色仅出现在页脚和分隔带中。
|
||||
4. **密集但不拥挤**:小字体,多列,紧密的前导 - 但模块之间有清晰的空白。
|
||||
|
||||
---
|
||||
|
||||
## 2.画布和网格(16:9横向转换)
|
||||
|
||||
|项目 |价值|注意|
|
||||
|---|---|---|
|
||||
|帆布| 960 × 540 像素 | 16:9 演示标准 |
|
||||
|左/右页边距 | 44 像素 |源纵向边距 ≈ 页面宽度的 7%,引入横向(大约)|
|
||||
|内容区 | y = 20 ~ 508 | y = 20 ~ 508 |米色页脚带上方|
|
||||
|页脚带| y = 512 ~ 540 (28 高) |米色水平带,参见§9|
|
||||
|立柱系统| 12 列心理网格,通常分为 2 / 3 列;装订线 24 px |源码正文采用固定3窄列布局|
|
||||
|基线节律| 4 px 的倍数 |所有间距均为 4 的倍数(近似值)|
|
||||
|
||||
纵向→横向转换规则:
|
||||
- 来源“全页大图像 + 下面三栏正文” → 横向变为“左侧 60% 图表 + 右侧 40% 文本栏”或“图表在顶部,文本在下方,图表跨越整个宽度”。
|
||||
- 源 2×2 图表矩阵页面(垂直排列)→ 景观变成自然的 2×2 网格 — 天生适合。
|
||||
- 源码唯一的横向页面(区域地图+两侧堆叠条)证明本系统支持横向;将密度与该页面对齐。
|
||||
|
||||
---
|
||||
|
||||
## 3. 字体层次结构
|
||||
|
||||
中文字体受运行时字体库约束;映射如下(字体名称必须与库完全匹配):
|
||||
|
||||
|角色 |字体|尺寸/款式 |用途 |证据|
|
||||
|---|---|---|---|---|
|
||||
|显示衬线 | `{latin: Oranienbaum, ea: 思源宋体}`,粗体 |封面 40~48 / 页标题 26~28 |封面主标题、各页大标题|源标题是乔治亚型粗体衬线(近似映射)|
|
||||
|结论线/图表标题 |与上面相同,斜体+粗体| 14~15 |每页的结论线、每个图表的斜体标题 |源图表标题为斜体衬线(近似值)|
|
||||
|无衬线体 (Sans) | `MiSans` | 10~10.5,行高1.45~1.5 |多列正文、图例、轴标签 |源正文 ≈ 9px 无衬线三列(近似值)|
|
||||
|眉毛| `MiSans`,字母间距2~3 | 9~10,全部大写感觉被粗体取代了 |页面标题上方的列标识符 |来源“DEALS BY SECTOR”式小型眉毛|
|
||||
|数据标签| `MiSans` 粗体 | 9~10 |列内/行内的值 |来源列内白色粗体值 |
|
||||
|大数字(统计)|显示衬线粗体或 MiSans 粗体 | 28~36 |关键指标卡|源码封底和内页大数字处理(近似值)|
|
||||
|页脚/来源注释| `MiSans` | 8~9,灰色 |页脚带文本,图表下源注释 |来源页脚的小号大写灰色类型 |
|
||||
|
||||
规则:
|
||||
- 一页内,衬线仅用于“标题+结论线+图表标题”;正文和图表注释始终为无衬线。
|
||||
- 没有超出上述两个系列的字体;没有书法/手写的面孔。
|
||||
|
||||
---
|
||||
|
||||
## 4. 颜色标记(十六进制;都是像素采样近似值)
|
||||
|
||||
|代币|十六进制 |角色 |抽样依据|
|
||||
|---|---|---|---|
|
||||
| `ink` 深海蓝| `#06223F` |封面/章节页底、表格标题、最暗图表系列、强调文本 |封面底座#051C38,标题#2C4057,最暗的地图状态#001830 |
|
||||
| `ink-soft` | `#14324F` |深蓝色辅助(卡片、辅助标题)|近似|
|
||||
| `teal` | `#2FBFC4` |主系列列颜色、主线、强调图标 |主图表栏#30C0C0~#3CC0C0 |
|
||||
| `teal-dark` 深青色 | `#1B6E72` |二级系列立柱,第二堆叠段 |深青色柱#186C6C~#246C78 |
|
||||
| `teal-pale` 浅青色 | `#BFE5E6` |最轻堆叠段、浅面积图表层、图表背景块 |浅青色段#C0E4E4 |
|
||||
| `amber` | `#D9A62E` |比较线(柱线组合中的“线”)、增长率注释 |金线#CCA80C~#E4C09C |
|
||||
| `yellow`亮黄色| `#DCC83C` |单系列黄柱(行业页原色),堆叠段|黄柱#D6D470~#CCA80C |
|
||||
| `orange` | `#E5862E` |第三主题栏颜色、堆叠段|橙色柱#E48430 |
|
||||
| `crimson` | `#76101A` |警告/第二主题列颜色,深色堆叠段|深红柱#6C0000~#780C0C |
|
||||
| `salmon` | `#F0A89A` |中间堆叠部分(深红色和浅青色之间)|粉红色段样本#FEF1EE 增亮估计(近似值)|
|
||||
| `slate` 石板蓝| `#5E84A0` |地图/图表中间色调、辅助线 |中色调地图状态#60849C |
|
||||
| `paper`纸白| `#FFFFFF` |内容页库 | — |
|
||||
| `beige` | `#EDE7D6` |页脚带、水平分隔带、注释框填充 |页脚带#EFEBDE |
|
||||
| `beige-line` | `#D8D2C2` |米色带顶边,细桌线|带边缘#D2D1C9 |
|
||||
| `text` 机身墨水 | `#262626` |正文 |近似|
|
||||
| `muted` 灰色 | `#8A8A8A` |轴标签、图例、源注释、页脚文本 |近似|
|
||||
| `grid` 格灰| `#E7E7E7` |桌子外框,薄隔板 |近似|
|
||||
|
||||
对比地板:在 `ink` 上,仅白色/浅青色文字;深 `teal`/`crimson`/`orange` 色谱柱上的数据标签为白色或以深灰色放置在色谱柱上方;在米色带上,仅显示 `#6B6B6B` 深度或更暗的文本。
|
||||
|
||||
---
|
||||
|
||||
## 5. 页面骨架(内容页面通用)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ ▪ wordmark "Specialty Coffee Consumption Monitor" │ ← header row y≈20~44
|
||||
│ version at right: 2026 Annual Insights · sample setting │
|
||||
│ │
|
||||
│ Eyebrow (9px, wide letter spacing, gray) │ ← y≈56
|
||||
│ Serif display headline 26~28px │ ← y≈74~104
|
||||
│ Italic serif conclusion line 14px (the page's only conclusion) │ ← directly under the title
|
||||
│ │
|
||||
│ ┌────────────────── content area y≈130~486 ────────────────────────┐ │
|
||||
│ │ chart / multi-column body / table / cards (choose layout per §6) │ │
|
||||
│ └──────────────────────────────────────────────────────────────────┘ │
|
||||
│ page number (centered, 9px serif gray) │ ← y≈496
|
||||
│ ▔▔▔▔▔▔▔▔▔▔ beige footer band: report name centered 9px ▔▔▔▔▔▔▔▔▔▔ │ ← y≈512~540
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- 标题左侧文字标记:实心青色小方块 (10×10) + 粗体无衬线报告名称;右侧是一个小的灰色版本标识符。 **禁止任何真实的品牌标志。**
|
||||
- 页码位于米色带上方的中心(源样式);页脚区域以小字体显示居中的完整报告名称。
|
||||
|
||||
---
|
||||
|
||||
## 6. 可重用布局 (8)
|
||||
|
||||
1. **封面(深海蓝色)**:全出血 `ink` 底座 + 右侧同心细弧/细线信号图案(低不透明度蓝灰色椭圆笔划,完全在画布内)+ 大衬线标题(可以混合斜体和罗马字)+ 一行版本信息 + 底部关键数字带(3 个统计数据,青色/白色文本)。
|
||||
2. **结论页(封面变体)**:与封面相同的骨架,但标题是页面的结论句,下面有3~4个数据统计带作为证据。
|
||||
3. **大图表+文字栏**:左边55~60%持有一张柱线组合图表(斜体图表标题+图例+来源注释);右 40% 拥有一栏正文 + 一张统计卡或小图表。
|
||||
4. **全角图表+三栏正文**:顶部为全角组合图表(占高度的45~50%),下方三栏10px正文文本,每栏可选择以粗体开头句开头。
|
||||
5. **2×2图表矩阵**:每个象限一个小图表,每个图表标题为“斜体衬线图表标题+小字体副标题+图表+源注释”,象限之间有24px空白。
|
||||
6. **横条+右侧统计轨迹**:左侧60%为横条排名图;右 40% 垂直堆叠 2~3 张统计卡(米色或浅青色填充、大衬线数字 + 小字体注释)。
|
||||
7. **比较配对栏+解释栏**:中间偏左的比较图,有2~4个大栏(在栏上方和栏外标记值),右侧1个解释文本栏+1个“x倍差”箭头注释。
|
||||
8. **表格页/卡片页**:一个深青色标题白色文本表格(参见§7)或2~3张等宽操作卡(卡片=浅青色顶栏+衬线字幕+无衬线正文+底部数据锚芯片)。
|
||||
|
||||
---
|
||||
|
||||
## 7. 图表和表格语言
|
||||
|
||||
### 一般图表
|
||||
- 图表标题:斜体衬线粗体 14px `ink`,左对齐;下面的行是一个 9 像素的灰色字幕(公制)。
|
||||
- 轴:没有 y 轴网格线 (`gridLine: false`)、没有轴线或只有一条细 `#E7E7E7` 基线;轴标签 9px `muted`;货币轴带有单位缩写。
|
||||
- 图例:图表下方水平,小色样+ 9px 灰色文本。
|
||||
- 来源说明:图表右下角8px灰色文字——“中国精品咖啡消费趋势监测·样本数据(内部估算)”。
|
||||
- 值标签:9~10px;列系列标签最好在列内使用白色粗体,或者在不适合时在列上方使用深灰色(如果渲染器不支持位置控制,请将它们均匀地放置在上方和外部,视为源的近似值)。
|
||||
- 线系列标签位于端点上方,呈 `muted` 灰色。
|
||||
|
||||
### 图表型食谱(按证据频率排序)
|
||||
1. **柱线组合(本系统的标志图)**:实心柱(`teal` / `crimson` / `orange` / `yellow`之一)+对比细线(`amber`或`teal`),双轴;标有金额的列,标有计数/比率的行。
|
||||
2. **多线**:4~5条1.5~2px的细线,颜色顺序`ink`→`teal`→`amber`→`crimson`→`slate`,端点值直接标记在右端。
|
||||
3. **100% 堆叠条**:从 `teal`/`teal-pale`/`salmon`/`crimson` 或 `teal`/`teal-dark`/`ink` 的每个主题分段颜色,分段内带有白色 % 文本。
|
||||
4. **水平条排名**:单色系列(`teal` 或 `ink`),值标记在条末端,类别轴位于左侧。
|
||||
5. **分层区域**:`ink`→`teal-dark`→`teal`→`yellow`自下而上,仅用于“库存积累”语义。
|
||||
6. **比较配对列**:深色和浅色的两个同族列,它们之间有“x 倍差异”箭头和文本。
|
||||
|
||||
### 表格
|
||||
- 标题:`ink` 背景,白色粗体 9~10px 文本,左对齐(数字列右对齐)。
|
||||
- 数据行:白色背景,行间只有 `#E7E7E7` 0.75~1px 基线,没有垂直线,没有斑马条纹(源表没有斑马条纹)。
|
||||
- 行高 22~26px,单元格内边距左右各 8px。
|
||||
- 表格下面还有源注释。
|
||||
|
||||
---
|
||||
|
||||
## 8. 图像裁剪和图形组件
|
||||
|
||||
- **图像**:只有封面/章节页面可以使用全帧图像,始终为 `fit: cover` 全出血裁剪;风景中的人像图像仅取中间波段(`crop: {top, bottom}` 各修剪 15~25%);内容页面不使用照片,而是使用图表和图形组件。源肖像为右栏小方块(约120×150)+灰文简介;仅在真正需要时才使用相同规格的占位符。
|
||||
- **信号图案(封面装饰)**:3~4个同心椭圆细笔画(`slate`/`teal`,不透明度0.15~0.3),所有边界在画布内;或一条 2px 青色“脉冲”折线。
|
||||
- **统计卡**:`teal-pale` 或 `beige` 填充(无描边,无阴影),大衬线 `ink` 数字 + 9px 灰色注释;在深蓝色页面上切换为透明填充+青色大数字。
|
||||
- **动作卡**:白色底座 + 4px `teal` 实心顶栏 + 衬线字幕 + 10px 正文 + 底部数据芯片(`beige` 填充圆形小字体)。
|
||||
- **图标**:仅限 Font Awesome 免费实心 (`fas:`),单色 `teal` 或 `ink`,16~20px,无混合样式。
|
||||
- **分隔**:始终为 1 像素 `#E7E7E7` 细线或空白;无阴影,无渐变块(覆盖信号图案除外)。
|
||||
|
||||
---
|
||||
|
||||
## 9. 密度、间距和页脚
|
||||
|
||||
- 信息密度与来源一致:1个结论+1~2个图表+每页不超过3栏正文;正文10px,行高1.45,段落间距6~8px。
|
||||
- 模块间距:标题区域→内容区域20~24px;图表矩阵象限相距 24px;卡片间隔 16~20px。
|
||||
- 页脚:米色带(`beige`,28px高)横跨整个宽度,居中9px `muted`报告名称“中国精品咖啡消费趋势监测·2026”;页码为 9 像素衬线灰色,中心位于条带上方 6 像素处。
|
||||
- 每页右下角的图表注释均使用统一的 §7 源注释措辞。
|
||||
|
||||
---
|
||||
|
||||
## 10. 禁止事项
|
||||
|
||||
1. 不含第三方徽标、品牌名称、赞助商标志、商标或源手稿原文。
|
||||
2. 份额排名没有饼图/圆环图(来源根本没有饼图);股票始终使用 100% 堆叠条形图或水平条形图。
|
||||
3. 没有阴影、渐变填充块、磨砂玻璃、3D 图表或动画风格的图表装饰。
|
||||
4. 没有圆角半径大于8px的卡片;图表列保持直角。
|
||||
5. 文本不得压在图像上,图表元素不得渗出画布(所有边界必须保持在 960×540 以内)。
|
||||
6、米色页脚带以外的正文区域不得大面积米色填充;米色只是一个“带”,而不是一个“块”。
|
||||
7. 禁止捏造数字:所有值必须来自任务查询;定性判断必须标注“内部判断”。
|
||||
---
|
||||
|
||||
## 11. 交付前检查表
|
||||
|
||||
- [ ] 每一页都有一个且仅有一个明确的结论,以斜体衬线句子的形式直接位于标题下方。
|
||||
- [ ] 6页构成一个完整的叙述:结论→市场结构→消费者细分→渠道和会员经济学→机会图→行动建议。
|
||||
- [ ] 每个号码都可以一一追踪到query.md;没有捏造的东西,没有外部数据。
|
||||
- [ ] 所有颜色均来自 §4 标记;图表着色遵循 §7 配方;没有渐变/阴影。
|
||||
- [ ] 只有两种字体系列:serif `{Oranienbaum, 思源宋体}` 和 sans-serif `MiSans`;尺寸遵循§3。
|
||||
- [ ] 页眉文字标记、米色页脚带 + 页码和图表下源注释出现在每个页面上的一致位置。
|
||||
- [ ] `kimi-ppt check` 报告没有错误;逐页屏幕截图显示没有重叠、没有裁剪、没有溢出、没有意外换行;深色背景白色文本对比通过。
|
||||
- [ ] 最终目录:`deck.pptx`(唯一的PPTX)+完整的PPTD捆绑包+`final-screenshots/pages/1.jpg~6.jpg`。
|
||||
|
||||
- 没有默认使用卡片:除非用户明确要求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式 - 线段、空白以及字体和字体大小差异是更好的解决方案。
|
||||
- 无等分组合:除非没有其他布局可用,否则不要默认三向分割、四向分割或2×2矩阵——包括三向分割+标题+结论等三部分结构。
|
||||
|
After Width: | Height: | Size: 1.0 MiB |
@@ -0,0 +1,153 @@
|
||||
# 组织名称 — 2025 年第 2 季度加密货币行业报告风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
一个黑暗的、数据驱动的季度加密行业研究报告PPT设计系统,面向精通跨市场、资产、交易量、ETF、DeFi、NFT和交易所指标的专业读者,支持高密度数据、较长的解释文本和多系列图表。车身采用深色研究型仪表板,搭配组织名称的绿色视觉标识;封面、分区和产品/结束页使用高饱和度的绿色或紫色框架、大圆形卡片和吉祥物插图。
|
||||
|
||||
整个甲板是16:9的风景画布;内容页面使用近乎黑色的背景,带有白色现代无衬线粗体标题、正文和脚注,采用 Geist/Inter-type 无衬线;标题带有固定的小品牌文字标记;页脚包含报告名称、版权、来源和页码。主要内容包括折线图、柱状图、堆积柱状图、面积图、时间线、表格、文本列表/头像矩阵;强调色有荧光绿、紫色、粉色、黄色等高饱和度颜色。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. **数据重于装饰。** 页面优先考虑图表、表格、数字和解释性文本;插图、边框、亮色和身份标记仅用于品牌识别、分类、强调或部分过渡。
|
||||
2. **身体骨架一致,胜过布局炫耀。** 普通数据页保留黑色背景,左上角品牌标记,白色标题,右侧或上方洞察线,底部出处和页码;大面积绿色/紫色品牌页面仅出现在封面、部分分隔线、产品或结束位置。
|
||||
3. **强调色必须带有语义。** 荧光绿用于品牌、积极/增长价值观、关键系列或按钮状组件;紫色/粉色表示洞察线、部分过渡和特殊注释;红色仅适用于负面变化或风险类型数据。如果明亮的颜色妨碍读取值,请优先考虑轴、标签、单位和图例的清晰度。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为 16:9 横向宽屏。内容页面背景为纯黑色或接近黑色;封面/章节/结束页使用亮绿色的外部背景,或带有深色圆形内卡的紫色外框。保持稳定的边距,外缘无关键数据;高密度页面可能接近全出血,但页眉、标题和页脚必须保留其安全区域。
|
||||
|
||||
**封面**:亮绿色外底,中央有一张大的深绿色圆形卡片,顶部有缺口式分体或双卡结构。左上角是身份标记——带有新主题名称的纯小文本,或者留空;没有绘制图形标志。主标题巨大,年份或关键词可能有深绿色/浅绿色渐变的感觉,报告名称为白色/浅绿色;中下部分为组织名称吉祥物插图、细线趋势线和半色调点;赞助商文字列表位于右侧或右下,面积小于主标题和吉祥物。
|
||||
|
||||
**目录页**:黑色背景,左上角有一个大的“内容”样式标题;正文是一个多列内容列表,一级部分标题较大且白色,条目采用较小的白色/灰色文本,页码右对齐;作者头像、姓名和头衔可能位于下方。内容页面没有使用大图表和很少的装饰。
|
||||
|
||||
**部分分隔线**:亮绿色或紫色的外框/背景,内部有一张大的深绿色或深蓝黑色圆形卡片。左边有部分名称和一个小标签;右侧或底部有大型组织名称吉祥物和主题图形。章节标题占主导地位,信息很少。**内容数据页**:左上角有一个固定的小品牌文字标记,其下方或右侧有白色页面标题;标题区域在顶部占据了一个紧凑的水平带。洞察线位于标题右侧、页面右上角或说明栏顶部,通常以紫色开头,并以灰白色文本继续。正文可以使用单个大图表、左右栏、图表+说明栏、时间线、表格或矩阵。左下角包含报告名称/版权,来源位于图表下方或左下角,页码位于右下角。阅读路径:品牌和标题→紫色洞察线/关键信息线→主图表或表格→解释性文字/图例→来源和页码。
|
||||
|
||||
分隔线仅用于图表轴、表格线、卡片边框和时间线规则 - 不设置繁重的标题规则。内容页面不使用水印或大背景图形;背景保持干净。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题为对象型或指标型,例如“某种资产的价格和交易量”、“某种市场份额”、“值得注意的事件”或“交易所交易量”,负责主题定位;结论由洞察线表达。标题应为 1 行,必要时为 2 行;避免超过两条线,这会压缩图表区域。
|
||||
|
||||
每页优先显示一条信息行,位于标题右侧或解释栏顶部,结构为“关键变化/结论+数据定义和测量依据/时间范围+原因或影响”。使用紫色突出显示开头短语或核心编号,其余部分为灰白色。不要将多个结论堆放在一个段落中;每一页都优先考虑一个主要判断。
|
||||
|
||||
正文使用短段落和项目符号,通常位于图表左侧或右侧的窄栏中;每一段都解释一个原因、数据发现或影响。保持段落断断续续,行长适中;左右布局中的文本栏是为了解释图表而存在的,它本身不会成为一篇长文章。
|
||||
|
||||
按市场类别、资产类别、时间、平台、链、交易所或指标定义和基础进行分组。高密度页面使用字幕、标签、图例、彩色系列和细线分隔。一页包含一个核心问题;它可以包含多个数据系列,但不得同时讨论多个不相关的主题。
|
||||
|
||||
数字和单位靠近数据标签或轴,保留相关格式和单位——百分比、美元、倍数、日期和季度。时间轴保持连续且可读;大数字可能会在洞察线或图表注释中突出显示。源脚注位于图表下方或页脚中,采用小灰白色文本,不与主要数据竞争。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
**A。左边说明栏+右边大图表**
|
||||
适合价格、交易量、指数、资金流向等单一主题时间序列。左栏包含标题、见解、2-4 个解释段落和来源;右侧的大图表占据了正文的大部分宽度,包含轴、图例和数据注释。使用亮线、峰值标签、垂直注释线或关键点文本进行强调。不适合需要广泛分类比较的表格类型内容。
|
||||
|
||||
**B。顶部标题和见解 + 下面的全角图表**
|
||||
适合水平时间轴图表,例如多系列线、堆积柱形图和市场份额变化。一个紧凑的标题和一条洞察线位于顶部;主图表横跨整个页面;图例位于图表顶部或右侧附近,系列颜色保持高对比度。如果解释太多,请切换到左右栏,以避免压缩图表高度。**C。大图表+右侧注释/赞助商/备注栏**
|
||||
适合需要补充事件背景的页面,如IPO、ETF、交易量等。主图表位于左侧或中间;右边的窄栏包含简短的注释、文字标记或辅助图例;右栏的宽度不得超过主图表。此布局不适合多个长段落或多个不相关的文字标记。
|
||||
|
||||
**D。时间线/事件带布局**
|
||||
适合“重大事件”类型的内容。使用多行水平日期栏;日期块用高饱和度的绿色、粉色、紫色等区分时期或类别,下方有小尺寸的事件注释;标题区域很小。不要添加复杂的图表;事件文案一定要短——长的解释会打破时间线的节奏。
|
||||
|
||||
**E。表格/排名/矩阵页面**
|
||||
适合资产回报、稳定币、交易所、链生态系统以及团队或平台比较。正文使用暗表、排名栏、文本列表或多列卡片;注释栏可能位于左侧,彩色条、点、图标或文本颜色突出显示表格内的正/负变化。这种布局适合高密度分类,而不是连续趋势。
|
||||
|
||||
**F。品牌/产品/截面风格车身变型**
|
||||
使用绿色或紫色卡片、按钮、屏幕截图式界面以及吉祥物进行产品宣传、章节介绍或结束页面;信息内容比数据页少。不得滥用作为普通研究页面的模板。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
**背景黑色/近黑色#000000–#080808**:内容页面的主要背景,面积最大。不能用浅色代替;即使新主题使用品牌颜色,也要保持主体背景为深色。
|
||||
|
||||
**深绿色卡片#183F2D / #1A412E**:封面、分区分隔线和品牌卡片的主要基色,通常搭配亮绿色外框。品牌页面可能会大面积使用它;普通内容页面仅使用少量标签或边框 - 它不应该替换大面积的黑色背景。
|
||||
|
||||
**荧光绿#A6F05F / #9EE45A / #4BCC00**:用于封面外底座、剖面框架、身份标记、正值、关键数据线、按钮状标签和一些图表系列。品牌页面上的区域可能较大,而内容页面上的区域可能较小到中等。它可能会被替换为新的品牌原色,但必须保持暗背景高对比度和一致的“积极/关键”语义。
|
||||
|
||||
**白色#FFFFFF /浅灰白色#DDE5E0**:用于标题、关键标签、主轴文本和高优先级数字。不能用低对比度的颜色代替。
|
||||
|
||||
**灰蓝色/灰绿色文本#8A9492 / #B9BCA6 / #808963**:用于正文、注释、辅助图例文本、轴标签、来源和页脚;亮度低,但绝不会低到难以辨认。
|
||||
|
||||
**紫色 #7A54FF / #6B4CFF**:用于中小型区域的分区分隔线、洞察线开口、关键线、标签和品牌变体;默认不代表正/负状态。
|
||||
|
||||
**粉色#F19EE2 / #F4A0E5**:用于小区域的事件时间线、图表系列和强调块,表达类别。避免大量与紫色同时使用,会显得花哨。
|
||||
|
||||
**黄色#FAEB6A / #E7D84A**:用于柱形图、键值、事件或返回类型系列;不适用于长文本段落。
|
||||
|
||||
**红色/珊瑚色#FF5A6A / #BE827F**:用于负回报、下降、风险或负值。仅用于状态/数据,绝不作为装饰。
|
||||
|
||||
内容页面的主要色调为黑-白-灰 + 1 个品牌强调色 + 2-4 个数据系列颜色。多系列图表可以添加颜色,但图例必须保持清晰;颜色仅用于分类/状态——没有无意义的装饰。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
字体为现代无衬线字体,以 Geist-Regular、Geist-Medium、Geist-SemiBold、Geist-Bold 和 Inter 系列为主。不要混用衬线字体或手写字体;特殊赞助商/徽标字体仅作为图像或标记存在。正文注释文本 = 1x:
|
||||
|
||||
- **封面主标题/年份**:大约。 4–6x、粗体或半粗体、允许紧密的字母间距。
|
||||
- **章节标题**:大约。 3–5x,白色或浅绿色,通常为 1–2 条线。
|
||||
- **内容页面标题**:大约。 2–3x,白色,中粗体到粗体。
|
||||
- **洞察线/信息线**:约。 1.4–2x,通常是中粗体,紫色关键词+灰白色延续。
|
||||
- **字幕/组标题**:大约。 1.1–1.4x,中粗体或半粗体,白色/浅灰色。
|
||||
- **正文段落和项目符号**:1x,常规重量,灰白色或灰蓝色。
|
||||
- **表格文本/图表标签**:大约。 0.7–1x,按空间压缩,保持数字可读。
|
||||
- **脚注、来源、页脚、页码**:大约。 0.6–0.8x,灰色,低级别,但从未消失。
|
||||
|
||||
数字标签使用与正文相同的字体,但粗细增加或颜色不同;没有装饰性的数字形式。标题和正文通过大小、粗细和颜色构建层次结构,而不依赖于阴影或笔画。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
核心图表包括折线图、柱形图、堆积柱形图、面积图、双轴价格/交易量图表、水平条排名、时间线、份额/市场份额图表、甜甜圈/饼图迷你小部件和表格排行榜。
|
||||
|
||||
图表使用深色底色;轴线和网格线是低亮度的灰色细线;没有白色背景的图表框。主数据线采用荧光绿、黄色、紫色、粉色、青色等高对比度颜色;次要系列较低的饱和度或线宽。柱形图使用明亮的柱形与暗网格相对应,并且成交量柱形图可以与价格线结合。多系列堆积柱需要清晰的图例,放置在图表上方、右侧或空白图表区域中。
|
||||
|
||||
关键数据使用峰/谷标签、垂直事件线、端点值、本地文本注释、颜色增亮以及负值的红色。注释紧扣要点,不应形成长段落。预测、目标或基线使用虚线/细线和明确的标签,与历史数据区分开来;永远不要让预测线模糊成实际线。
|
||||
|
||||
轴保留单位和时间基准——尤其是美元、百分比、季度、日期和交易量。网格线必须细、暗且少;没有繁重的边界。页面标题说明图表的主题;图表本身只保留必要的副标题和图例,避免重复。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格用于排名、资产比较、交易所/链/协议指标、回报、市场份额和团队/作者信息。它们采用深色底色、高密度样式:标题为白色或浅灰色中粗体文本,行列分隔线为低亮度细灰色,单元格通常没有明显的填充;必要时,使用深灰色/深绿色进行光分区。
|
||||
|
||||
数字列右对齐或在视觉上按小数点对齐;文本列左对齐;名称列可以添加小图标或圆形标记占位符块。正/负值以绿/红区分;排名或强度可以使用水平条、色块长度、热色或小点。摘要行或关键行使用更亮的文本、细边框或浅色填充,但没有浓重的突出显示填充。
|
||||
|
||||
高密度并排模块使用卡片、列组、文本列表或小型图表集合。每个模块都有一个标题、一个键值和一个最小的解释;模块通过对齐、间距和细线分隔开——没有大的阴影。斑马条纹不是主要语言;可以谨慎使用对比度极低的深灰色,并且在分隔线足够的情况下,不添加斑马条纹。
|
||||
|
||||
如果表格超出了一个屏幕可以扫描的范围,请将其拆分为多个页面或重点关注前 N 个页面 - 不要将其压缩至难以辨认。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
**品牌字标标题**:固定在内容页左上角,尺寸较小,白色品牌字+绿色“研究”。将其保留在新页面上;不要将其放大为装饰。**洞察线组件**:紫色关键词/开头+灰白色解释,位于标题右侧或正文栏上方;每页至多一个主要见解——避免多个紫色句子相互竞争。
|
||||
|
||||
**圆形品牌卡片**:封面、章节页和产品页面使用大圆形深绿色/深蓝色卡片,外框为亮绿色或紫色。默认情况下,内容数据页面不会将所有内容框入大卡片中。
|
||||
|
||||
**标签/徽章**:用于部分代码、资产符号、按钮式 CTA 或图表类别;轮廓圆角矩形或带有短文本的明亮填充。不能带长句子。
|
||||
|
||||
**细分隔线和轴线**:表格、图表和时间线的低亮度灰线;细而内敛——没有装饰性的粗线条。
|
||||
|
||||
**事件时间线块**:水平日期颜色块+下方的事件注释,按日期期间或类别着色。适合事件列表,而不是数字趋势。
|
||||
|
||||
**文本列表/头像矩阵**:用于内容页面作者、赞助商、交易所、生态系统项目等;机构名称以文本列表或中性占位符块的形式呈现,头像可能会保留;统一尺寸、对齐方式和标签文本。请勿混入彩色图标装饰;没有绘制任何图形标志。
|
||||
|
||||
**吉祥物插图**:组织名称绿色/紫色字符用于封面、章节分隔符和结束页。在普通数据页面上,它只能出现在特殊品牌/产品页面上,并且不得覆盖图表。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体扁平、黑暗、数据驱动、品牌内敛;内容页面依赖于颜色对比度、字体大小层次结构、图表密度和对齐方式,而不是摄影、复杂纹理、阴影或 3D。
|
||||
|
||||
**禁止**:普通内容页面、大面积照片背景、复杂渐变背景、3D图形、发光笔画、表情符号、花哨的插图、装饰性彩色图标、大片居中副本、浓重阴影、低对比度灰色文本、无源图表、无单位数字或覆盖轴的装饰。
|
||||
|
||||
**谨慎使用**:圆形卡片、大面积亮绿色底座、大紫色块、文本列表、头像、截图式界面、甜甜圈迷你图表、斑马条纹表格。它们必须提供信息功能或品牌节点功能——绝不是为了填充空白而添加的。
|
||||
|
||||
**允许特殊页面**:封面、分区、产品页面和结束页面可以使用吉祥物、大圆形卡片、亮绿色/紫色外框、半色调点、趋势线背景和赞助商文本列表。即使在特殊页面上,也要保持标题的可读性,并且永远不要让品牌元素掩盖主要信息。
|
||||
|
||||
图片/截图不是身体的核心语言;如果必须使用它们,请将它们放置在带有标题和来源的固定边界内 - 不要全屏摄影讲故事。如果出现渐变,也仅限于对封面标题或品牌氛围的微妙处理,而不是主体背景系统。
|
||||
|
||||
## 11. 一代清单- 骨架:是16:9吗?内容页面是否以黑人为主;左上角有一个小品牌字标吗?页脚是否包含报告名称/版权、来源和页码?
|
||||
- 文案:标题是否是一个明确的对象/指标;每页是否只有一个主要见解;正文是短段落或项目符号;数字是否带有单位、时间范围和测量基础?
|
||||
- 层次结构:标题、洞察线、正文、图表标签和脚注按相对大小和颜色分隔;是否避免了对特定字体大小的依赖?
|
||||
- 颜色:是否保持黑白灰+荧光绿/紫色+必要的数据颜色;正/负状态明显为绿色/红色;一页上是否有太多鲜艳的颜色?
|
||||
- 布局:主图表/表格是否占据最大面积;解释栏对图表有帮助吗?是否存在无意义的空白或过度拥挤?
|
||||
- 图表:轴、单位、图例、网格线、数据标签和重点注释是否完整;多系列颜色是否可区分;是否标记了预测/基线?
|
||||
- 表格:标题、对齐方式、分隔线、关键行/列以及正/负颜色是否一致;文本可读;是否避免了过度压缩?
|
||||
- 组件:圆形卡片、标签、时间线、文字标记和吉祥物是否仅出现在适当的页面上;它们提供信息而不是装饰吗?
|
||||
- 禁止使用的物品:禁止使用照片背景、表情符号、3D、发光、浓重阴影、复杂纹理、无意义的图标或大段居中副本。
|
||||
- 质量:检查溢出、截断、乱码、重叠、低对比度、遮挡、空内容、图表比例错误、页码缺失、来源缺失和机械模板重复。
|
||||
- 没有默认使用卡片:除非用户明确要求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式 - 线段、空白以及字体和字体大小差异是更好的解决方案。
|
||||
- 无等分组合:除非没有其他布局可用,否则不要默认三向分割、四向分割或2×2矩阵——包括三向分割+标题+结论等三部分结构。
|
||||
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,162 @@
|
||||
#F001·科技风格橙色年度报告&商业洞察计划提案PPT模板风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适合正式的业务报告,例如年度绩效评估、业务洞察、业务回顾、战略计划建议和投资者/管理层更新。它针对具有商业和数据背景的读者,通过大标题、关键数字、图表、表格和简短的解释段落来呈现结论。
|
||||
|
||||
信息密度适中、克制:白底内容页保留大量留白,通常只放一张主图表或结构化模块,旁边附有短卡片;表格页面和路线图页面可能是局部高密度的,但要避免全出血包装。
|
||||
|
||||
- 白色/浅灰色内容页面用于数据分析;
|
||||
- 橙色是唯一的高饱和度主色调,用于图表、关键数字、圆形关系图、节点以及黑色背景上的灯光效果;
|
||||
- 黑色背景页面使用橙色渐变光带、同心圆/弧线框和最小文本,用于封面、过渡、引文线和结束页面。
|
||||
|
||||
基本原则:
|
||||
- **一页仅设置一个视觉锚点。** 大标题、核心百分比、循环关系图、柱形图、甜甜圈、表格或引文占据主导地位 - 其余的是解释层。
|
||||
- **品牌橙色服务于信息层次结构,而不是装饰性堆叠。**它首先用于数据系列、关键行、节点、关键字和重要数字;大面积背景使用白色、近黑色或浅灰色。
|
||||
- **结构清晰,信息详尽。** 保留结论、关键指标和一些支持点;复杂的细节被分成单独的页面或降级为注释——不要用正文段落和小标签填充图片。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为 16:9 横向宽屏。它使用宽边距、低噪音背景和左右列;常见的阅读路径是“左上标题→中/左主视觉→右侧说明卡/数字→底部脚注”。主体位于画面中央,四周留白清晰,避免了抱边排列。
|
||||
|
||||
### 封面/结束页面骨架
|
||||
- 近乎黑色的全版背景,底部或上下边缘有橙色渐变光带;局部覆盖深色矩形框、细线同心圆或弧形纹理。
|
||||
- 左上角有一个小品牌标志;主标题居中或接近居中,可能会分成多行,并且可能包含轻微的字体变化;标语和签名位于底部或右下角,远小于主标题。
|
||||
- 中央深色透明框架可以带有标题,但不得形成粗边框。
|
||||
|
||||
### 黑色背景部分/引用行页面骨架
|
||||
- 近乎黑色的背景,橙色的光芒,文本居中或接近居中,内容量极低。
|
||||
- 低对比度同心圆线框可以形成焦点,而不与文本的层次竞争。
|
||||
- 不携带复杂的图表、表格或密集的小字体。
|
||||
|
||||
### 常规内容页面骨架
|
||||
- 白色或非常浅的灰白色背景;左上角是标题区,标题下允许有简短的注释。
|
||||
- 图表或结构图位于左侧/中间;解释卡、关键数字或短段落位于右侧。
|
||||
- 浅灰色细线、表格线和时间线仅用于组织 - 它们不是装饰主角。
|
||||
- 页码没有稳定、突出的风格,不宜强行生成;来源/脚注在底部或图表附近使用微小的灰色文本。### 目录/导航和水印
|
||||
源文件没有显示强大的目录页面,也没有持久的标题导航;默认情况下不要添加进度条、部分导航、页码栏或大水印。部分提示使用黑色背景过渡页面,而不是每个页面上的顶部导航。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题倾向于简洁的商业短语,通常是 2-3 个单词的名词组或简短的主题名称,例如概述、财务、收入细分、时间表、产品性能、后续步骤等。语气平静——没有夸张的问题或营销口号;常规页面标题位于左上角,而章节/引用行页面可能居中。
|
||||
|
||||
信息分为三层:
|
||||
- **宣言/引文行:**用于封面后的开头、可引文行和结束页;明显大于正文,可以分成 2-4 行,允许使用局部斜体。
|
||||
- **简短的解释性段落:** 在标题下方或图表旁边,解释页面的目的、结论的背景或指标含义。
|
||||
- **卡片要点:**在右侧说明区,一般为2-4项,每项一个副标题/关键词+一句说明。
|
||||
|
||||
一页 = 1 个主要结论 + 2-4 个支持点。清单不应超过 4 项;时间线在 Q1-Q4 或 3-4 阶段最为稳定;圆形关系图以 3 个圆或 3 个节点为中心。正文保持短段落,避免居中布局的长段。可以使用橙色文本、黑色小胶囊标签、粗体无衬线、橙色数字或浅橙色行填充来强调关键字。
|
||||
|
||||
百分比、货币、季度、年份和增长率应保持在相应的数字或结论附近;主要数字大于正文,单位和注释较小且相邻。来源、注释和测量基础在页面底部或图表附近使用低对比度灰色文本,而不会破坏主要阅读路径。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 左侧标题+中心图表+右侧说明卡
|
||||
适合财务概况、收入构成、成本和利润以及市场表现。左上方放置标题和简短的引言,中间放置柱形图、圆环图、面积图或水平条,右侧放置 2-4 张浅灰色说明卡;图表提供证据,卡片解释原因、行动或影响。使用主橙色图形、黑色小标签和橙色数字来强调。如果数据维度超过5组或说明超过4条,则拆分页面。
|
||||
|
||||
### B. 中心循环关系/能力模型
|
||||
适合非精确比较的内容,如公司概况、能力组合、团队构成、战略关系等。主体使用3个相交的半透明橙色圆圈,或单个发光圆形节点,文字放置在圆心或交叉点附近;右派可能持有很大的比例和一个简短的说明。这种布局强调关系和组合,不适合精确的数字排名或复杂的流程依赖性。
|
||||
|
||||
### C. 时间表/里程碑页面
|
||||
适合季度业绩、阶段进展和关键事件审查。左边是标题和背景说明;身体用浅灰色的细线划分阶段; Q1–Q4 节点使用浅橙色四分之一标记和浅灰色事件卡。保持单行叙述,从左到右或从上到下。不要将其扩展为多项目甘特图,也不要在每个节点放置多个段落。
|
||||
|
||||
### D. 大图表+旁注说明页
|
||||
适合利润曲线、趋势变化、排名比较。大图表占据左半部分或中央主要区域;旁注解释了峰值、拐点、增长率和管理影响。面积图使用从深到浅的橙色层,条形图使用按长度排序的橙色条。旁注保持简短,并且不能超过图表。### E.表格比较页面
|
||||
适用于产品性能、指标比较和功能检查表。标题位于左上角;表格向左或居中展开;简短的结论可能位于右侧或上方。只保留关键列;关键行或关键单元格使用浅橙色填充。如果细节太多,可以用汇总表+注释代替缩字来填满页面。
|
||||
|
||||
### F. 高密度并排模块页面
|
||||
适合团队架构、成本分配、资金部署等多维度汇总。多个浅灰色卡片、短列表或小数字块并排放置,具有统一的宽度、行高和对齐基线;每个模块承载一个指标或一组短文本。不要混合过多的图标、照片或复杂的边框。
|
||||
|
||||
### G. 黑色背景情绪/过渡页面
|
||||
适合封面、分节符、战略引文和结束致谢。核心是近乎黑色的背景+橙色发光+少量居中的副本,通常是一条声明或感谢语加上一个小签名。不适合常规数据页、表格页或小型注释页。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **近黑色背景#1D1D1D / #191919**:用于封面、过渡、引用行和结束页的整页背景。白色内容页面不得在大面积上使用接近黑色的颜色——仅适用于小标签、图例点或高对比度文本。
|
||||
- **主体文本黑色#111111–#222222**:用于内容页标题、关键注释、表格正文文本和主标签;对于长正文文本,不得将其替换为橙色。
|
||||
- **中性灰色#5B5B5B / #837571 / #A09C9A**:用于解释性文本、图表辅助标签、脚注和辅助信息。必须与白色底色保持对比;不适用于关键数字。
|
||||
- **浅灰色背景#F7F7F7 / #F1EFEF / #E9E9EA**:用于卡片填充、表格区域、浅色页面分区和信息容器;面积可以为中等,但不得超过空白区域。可以更换为相同亮度的品牌浅灰色。
|
||||
- **分隔线灰色#D0D0D1 / #E1DEDC**:用于表格线、时间线、卡片边框和辅助轴线。薄且低对比度——没有粗黑框。
|
||||
- **初级橙色#FC7C3D / #F16736 / #FA8555**:用于柱形图、甜甜圈初级系列、关键数字、节点、关键词和按钮状小标签。在白页上,它作为本地主要视觉效果,不得覆盖大面积的背景区域。可以替换为品牌原色,前提是保持高辨识度和足够的明度差。
|
||||
- **深橙色/红橙色#DC4A21 / #C22B0C / #BF5732**:用于图表高值区域、深区域图表图层、圆环段和黑底光效的黑暗部分;不适用于长文本。
|
||||
- **浅橙色#FECEAA / #FDAA74 / #FCC8B3 / #FBE6DC**:用于半透明圆圈、辅助图表系列、表格关键行、软背景块以及预测或弱化系列。区域可能比主要橙色稍大,但必须保持浅色 - 切勿让页面变成橙色为主。
|
||||
- **白色#FFFFFF /近白色#F8F8F9**:用于内容页面主背景和黑色页面上的反白文本。
|
||||
|
||||
在一页内,仅使用橙色 + 中性色 - 不要引入额外的主色调,例如蓝色、绿色或紫色。数据系列通过橙色的深浅和色调来区分;正/负状态没有独立的红绿系统——如果必须表达正/负,最好使用标签文本和箭头/符号,不要自行添加鲜艳的绿色或警告红色。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
现代无衬线商业风格,以LiberationSans和ArialUnicodeMS为主体,少量Arial-Black用于字幕/强调标签,少量浅色和斜体用于封面或引文。对于中文,选择几何或中性无衬线字体;避免书法、手写和装饰性较强的字体。- **封面主标题:** 大约。 5-7x 正文、居中、多行措辞、允许局部浅色或斜体部分。
|
||||
- **部分/引用行大句子:**大约。 3-4 倍正文、宽松的行间距、低字数。
|
||||
- **内容页面标题:** 大约。正文文本的 2.5–3.5 倍,左上对齐,中等至较轻的粗细,无粗笔画。
|
||||
- **关键信息数字:** 大约。 2-3x 正文,可能比标题稍小或同等,带有小单元/注释文本。
|
||||
- **字幕/卡片标题:** 大约。 1–1.2x 正文,可以加粗或带有 Arial-Black 气质;保持简短。
|
||||
- **正文注释:** 1x,比例基线;控制行长并避免全角长段落。
|
||||
- **图表标签/表格文本:** 大约。 0.8–1x 正文;保持清晰——不要过度缩小以塞满内容。
|
||||
- **注释/来源/页脚:** 大约。 0.55–0.7x 正文,低对比度灰色。
|
||||
|
||||
文本主要是左对齐的;黑色背景情绪页面和封面可能居中。标题和正文之间保持清晰的间距;不要在一页上混合太多粗细——通常常规、粗体和斜体就足够了。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
主要图表类型有柱形图、水平条形图、圆环图、面积/瀑布感趋势图、圆形关系图和一些小指标图表。图表被简化,网格和轴装饰很少,突出显示橙色区域和直接标签。
|
||||
|
||||
- **柱形图:**大多是 2-4 个带有方角或略圆角的柱形图;主柱为主橙色,次柱为浅橙色。值标签位于列的顶部或旁边;小黑色胶囊可能标记关键数量/值。轴和网格线非常弱——直接标记优先。
|
||||
- **甜甜圈:**用于成分比例,中心留空,部分为原橙色、深橙色和浅橙色。图例位于底部或旁边,使用小色点+短标签。不要引入太多细分——超过 4-5 个类别,识别度就会下降。
|
||||
- **面积/趋势图:** 使用深橙色、原色橙色和浅橙色进行分层或褪色效果,注释增长率、拐点或关键阶段;网格线几乎看不见,水平轴标签很短。适合趋势和利润结构,而不是精确读数。
|
||||
- **水平条:** 橙色条按长度排序,旁边有短标签或值;保持在 3-5 个小节。
|
||||
- **圆形关系图:**半透明橙色圆圈重叠以表达交叉点、组合和能力关系。它们不是严格的数据图表——不附加精确的轴或复杂的比例。
|
||||
|
||||
图表强调是通过色调、标签位置和局部大数字来实现的;不要使用 3D 图表、重阴影、维度饼图、彩虹系列、密集网格线或复杂图例。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格服务于“管理比较”和“指标总结”——它们不是详细的数据库。标题为浅灰色或白色,带有粗体黑色文本和短列名称;正文使用黑色/深灰色文本。文本列左对齐,数字和百分比整齐对齐,数字列可以居中或右对齐。
|
||||
|
||||
- 分隔线使用浅灰色细线;避免粗黑边框和全封闭的重型框架。
|
||||
- 行高宽松,桌子周围有明显的空白——不是边到边。
|
||||
- 关键行、关键单元格或当前项目使用浅橙色填充,并限制强调区域。
|
||||
- 浅灰色底座可以占据桌子区域,但不要用高饱和度填充覆盖整个桌子。
|
||||
- 斑马条纹不是很强的特征,可以省略;如果使用的话,只有极浅的灰色交替。
|
||||
- 摘要/结论行可以加粗或用浅橙色填充,但不能使用复杂的多级标题。高密度并排信息使用浅灰色卡、短列表、四分之一节点和公制块。块保持统一的大小和对齐方式,在一句话中包含简短的标题和解释。符号使用小黑点、小彩点、细线和短标签——没有大量的彩色图标或表情符号。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
- **黑色小胶囊标签:** 标记关键金额、图表高点或小类别;反白文字,小面积。它们不应该在页面上成组堆积。
|
||||
- **浅灰色说明卡:**用于右侧说明列表、时间线事件和补充说明;浅灰色填充,无明显阴影,包含一个副标题和一句话。将计数保持在 2-4。
|
||||
- **橙色圆圈/半透明圆圈:**用于关系模型、节点和关键视觉效果;它们可能会重叠成交叉点,但文本必须保持可读。不要将圆圈变成复杂的气泡图。
|
||||
- **细分隔线/时间线:**用于阶段分隔、表格行和列以及布局分区;浅色,细线。
|
||||
- **环形/同心圆线框:**用于黑色背景过渡、科技感页面或一些居中视觉页面;低对比度,绝不是信息图的主体。
|
||||
- **橙色光带/发光:**仅适用于黑色背景封面、章节页面、结尾和其他情绪页面。白色内容页面不使用大面积光效。
|
||||
- **标题栏/导航:** 尚未建立持久标题导航,并且不得强制到每个页面上。标题本身就是主要导航。
|
||||
- **图像框架:** 仅看到占位符矩形/灰色块的轻微倾向 - 这不是照片驱动的风格。如果使用图像,请将它们限制为矩形辅助工具,永远不要占据图表和文本的水平。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体扁平、内敛、务实;黑色背景页面可能会使用微妙的科技灯光效果,而内容页面则依赖于排版、空白、图表和橙色强调。
|
||||
|
||||
禁止:
|
||||
- 3D 图表、维度饼图、透视柱、发光描边文本、强烈阴影、金属纹理、大型玻璃形态组件;
|
||||
- 彩虹调色板、混合多品牌颜色、表情符号、卡通插图、手绘箭头、夸张的图标堆叠;
|
||||
- 大段居中的正文、整页密集的小字体、复杂的多层边框、粗重的表格线;
|
||||
- 常规数据页上的大面积图像背景或黑色背景小型表格。
|
||||
|
||||
谨慎使用:
|
||||
- 渐变:仅适用于黑底橙色发光、柔和的面积图分层和浅橙色过渡;从来没有整页彩色渐变背景。
|
||||
- Shadows:源文件不依赖阴影;如果必须区分层次结构,请仅使用极其微妙的阴影或改用浅灰色填充。
|
||||
- 圆角:可能会轻微软化卡片或列,但这不是重圆角卡片样式。
|
||||
- 图标:如果必须使用,则只有最少的线条图标或小符号,黑色/灰色/橙色 - 没有多色图标。
|
||||
- 照片/截图:可作为辅助证据或占位符,但不是核心语言;他们需要矩形裁剪、低装饰并且没有全出血背景。
|
||||
|
||||
特殊页面可以使用黑底灯光效果、同心圆、低对比度技术线框、居中引用线、最小斜体和反白文本 - 仅适用于封面、章节、引文和结束页。
|
||||
|
||||
## 11. 一代清单- 骨架:是16:9吗?内容页面是白色/浅灰色的,覆盖/过渡接近黑色+橙色的灯光效果;利润充足吗?
|
||||
- 文案:标题是短语;每页是否只有 1 个主要结论;解释是否控制在短段落或 2-4 张卡片内?
|
||||
- 层次结构:标题、正文、脚注是否有明确的相对比例;是否避免了特定的字体大小依赖性和层次结构混乱?
|
||||
- 颜色:仅使用橙色+中性色;橙色用于强调而不是淹没页面;低对比度灰色文本仍然可读吗?
|
||||
- 布局:是否有清晰的阅读路径;主视觉、解释区域和脚注各司其职;是否避免了多个竞争锚点?
|
||||
- 图表:使用简化的柱形图/甜甜圈图/面积图/水平条/圆形关系图;是否避免了 3D、彩虹色、密集网格和复杂图例?
|
||||
- 表格:表头、行、列、关键行是否清晰;线条是否轻薄;数字是否对齐;是否避免了细节过多?
|
||||
- 组成部分:浅灰色卡片、黑色胶囊、橙色节点和细线是否提供信息?页码、导航和水印从未被强制添加过吗?
|
||||
- 违禁物品:禁止表情符号、卡通插图、浓重阴影、复杂装饰、大图像背景、粗边框或发光文字。
|
||||
- 质量:检查文本溢出、截断、乱码、重叠、低对比度、遮挡、空内容、错误比例以及过度重复的模板感觉。
|
||||
|
After Width: | Height: | Size: 346 KiB |
@@ -0,0 +1,124 @@
|
||||
# 公民简报·公共服务简报风格设计系统
|
||||
|
||||
> 预期主页标签:工作报告
|
||||
> 视觉隐喻:市政导视系统+公共服务运营简述
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适用于季度回顾、公益运营、项目进展更新、跨部门汇报、基层工作总结等。页面应该感觉像一个清晰、值得信赖的公民寻路系统:暖白色底座、深靛蓝文本、天蓝色路线和安全黄色提示,使用车站、路线、数字和状态来明确“做了什么、有效了以及下一步要改变什么”。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. 工作报告以运营结论为开头,然后给出覆盖范围、效率、问题和行动的证据。
|
||||
2. 寻路语言必须带有位置、顺序、责任或状态;它不能退化为装饰性图标。
|
||||
3. 一页仅包含一个管理问题,最多突出显示 3 个数字或操作。
|
||||
4. 成就、问题和待决决策使用独特但稳定的视觉语义。
|
||||
5、不得模仿政府公文、标志、红金礼仪风格;不要制造虚假的权威感。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为 16:9 横向。内容页面以暖白色为主;部分分隔符或结论页可以使用深靛蓝。页面保持较宽的安全边距;狭窄的“路线编号条”可能会沿着左侧延伸,标题、季度和页码位于顶部,数据定义、测量基础和责任信息位于底部。
|
||||
|
||||
标题区域占 15%–20%,主要工作区域 65%–72%,页脚 6%–8%。标题下不要使用粗横线;使用短蓝线段或站号来定位它。
|
||||
|
||||
封面采用“一个大标题+一条服务线路+3个重点站点”。内容页面在覆盖图、需求带、运行路线、问题诊断、行动列表之间切换;避免在每一页上重复三列卡片布局。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题使用管理结论,例如“现在覆盖了整个地区的需求,但周一早上仍然是最明显的拥堵点。”字幕说明了地区、时期、受众以及数据定义或测量基础。
|
||||
|
||||
每个页面的组织方式为“当前状态 - 证据 - 含义 - 下一步”。成就必须表明它们对所服务的人民意味着什么;问题必须与原因或负责的流程步骤或所有者相关;行动必须带有截止日期、所有者或接受标准。
|
||||
|
||||
数字位于相应的站、进程或人口旁边,并且必须保留单位、周期和分母。不要在同一范围内比较访问次数、比率和百分比。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 操作概述页面
|
||||
|
||||
用一根横向业务线连接覆盖、处理、解析、反馈4个节点。每个节点只保存一个主数和一个判断;该行的末尾给出了该季度的总体评估。适合开口;不要建造 KPI 卡墙。
|
||||
|
||||
### B. 覆盖范围和客流量页面
|
||||
|
||||
将简化的地区地图或服务点网络放在左侧,将人流结构和高峰时间放在右侧。地图仅传达枢纽、移动站、压力点;不要制造精确的地理边界。
|
||||
|
||||
### C. 需求构成带
|
||||
|
||||
使用宽度随份额变化的水平带来显示主要服务类型;在其下方,使用2-3个直接注释来解释需求集中的地方。将次要类别合并到“其他”以保留主要-次要层次结构。
|
||||
|
||||
### D. 服务流程页面
|
||||
|
||||
将居民到达、取票、办案、移交、办结视为一条连续路径。时间或通过率显示在节点上方,障碍物显示在下方。在节点前画连接线;线条不得与文本交叉。
|
||||
|
||||
### E. 问题-责任页面左边列出了他们的证据的三个问题;右侧将每个问题与材料、系统或协调责任联系起来。注意事项采用安全黄色;仅针对真正阻碍服务的问题保留朱红色。
|
||||
|
||||
### F. 下一季度行动页面
|
||||
|
||||
使用3条行动路线来呈现“行动/所有者/截止日期/接受标准”;在右下角单独列出需要领导签字的项目。以明确的工作决定结束,而不是通用的感谢页面。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- 暖白色#F5F2EA:内容页面的主要背景。
|
||||
- 深靛蓝 #17324D:标题、正文、部分分隔符和主要路线。
|
||||
- 天蓝色#3D8CC9:正常运行、主要路线、关键数据。
|
||||
- 安全黄色#F2C14E:注意点、等待状态和待协调事项。
|
||||
- 绿色服务#4D8B72:已完成的项目、有效的试点和稳定的状态。
|
||||
- 朱红色#D95D39:堵塞、投诉和必须升级的问题;区域受到严格限制。
|
||||
- 道路灰色#A8AFB5:次要线、基线和来源。
|
||||
|
||||
单个页面通常使用靛蓝加一种状态颜色。红色和绿色不能成为唯一的区别;它们必须与文本或符号配对。禁止使用大红色背景、蓝紫色渐变和五色状态灯。
|
||||
|
||||
## 6. 版式和文本层次结构
|
||||
|
||||
中文使用思源黑体或苹果方,英文使用 Arial/Helvetica 型无衬线字体;数字、代码和时间可以使用等宽字体。整个平台上不超过两个字体系列角色。
|
||||
|
||||
- 封面标题:4-5 倍正文大小,最多两行。
|
||||
- 页面标题:正文大小的 2–2.6 倍,左对齐。
|
||||
- 主要数字:3-4x 身体尺寸,单位紧邻。
|
||||
- 动作标题:1.2–1.5 倍身体尺寸。
|
||||
- 正文:1x,短句。
|
||||
- 页脚、数据定义和测量基础注释以及路线代码:0.6–0.75x,但必须保持清晰。
|
||||
|
||||
层次结构主要依赖于字体大小、粗细和位置,而不是彩色圆形背景框。切勿将标题缩小为小文本以适应长句子;首先修剪副本。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
更喜欢服务路线图、直接标记的条形图、时间热带、点图、斜率图、简化的覆盖网络和 100% 堆叠条形图。
|
||||
|
||||
正常运行时使用天蓝色或服务绿色,压力点使用安全黄色,严重堵塞时仅使用朱红色。网格线是极细的灰色线;图表标题必须说明发现结果。
|
||||
|
||||
时间和比率不得共用同一轴。将百分比变化明确表述为“百分点”;不要将它们写成百分比增长。每个图表必须标明其周期、样本定义和抽样基础。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格仅用于服务中心比较、问题列表和行动分类帐。标题使用深靛蓝文本,底部有细线;在行与行之间留出喘息空间;不要使用封闭的重边框。
|
||||
|
||||
状态由小方块、短标签、文字共同表达;有问题的行可能会得到一个安全黄色的左标记,而朱红色的橙色则保留给逾期或阻塞的行。所有者、截止日期和验收标准必须位于同一阅读线上。
|
||||
|
||||
如果表格超过6列,最好将其拆分为“主要结论图表+精简分类账”;不要将完整的后端表塞进一页。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
稳定的组件包括路线、车站点、服务号码、方向箭头、状态方块、短勾、区域轮廓和责任标签。
|
||||
|
||||
站位大小表明层次,而非任意审美;线路样式区分正常、试点和尚未连接的路线。保持图标数量较少;仅使用清晰的公共服务线路符号。照片不是默认元素。如果使用服务场景照片,请放置单个纪实照片并标记其是说明性的还是真实的来源;不要使用舞台照片拼贴画。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体感觉是现代城市服务运营的简述:克制、清晰、对公众负责。视觉重心是路线和动作,而不是装饰。
|
||||
|
||||
禁止:红金政府模板、假徽章印章、领导讲话式封面、KPI卡墙、圆形SaaS面板、卡通人物、彩虹图标、3D地图、千分表、整版标语、无问题报告成绩。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 每一页是否首先陈述一个运营结论或管理问题?
|
||||
- 覆盖范围、效率、问题和行动是否构成完整的审核链?
|
||||
- 所有路线、站点和状态都具有商业意义吗?
|
||||
- 数字是否带有句点、单位、分母和正确的百分比措辞?
|
||||
- 问题是否与负责任的流程步骤或责任人相关,行动是否包含责任人和验收标准?
|
||||
- 颜色是否补充有文字/符号以避免单独依赖红色与绿色?
|
||||
- 暖白色、靛蓝色和单一状态颜色的稳定语法是否保持不变?
|
||||
- 是否避免模仿官方文件、卡片墙、仪表板和空洞的成就口号?
|
||||
- 是否检查了重叠、裁剪、换行、低对比度、乱码和过小的页脚?
|
||||
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则切勿使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 没有均匀划分的构图:除非没有其他可用的布局,否则不要默认为三分之一、四分之一或二乘二矩阵。这包括三部分结构,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,171 @@
|
||||
# 报告名称 风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
社论式研究报告PPT,面向旅游、酒店、目的地和行业决策领域的读者。以杂志阅读体验来组织“观点——证据——解释”:旅行/酒店场景摄影设置背景,浅蓝色和深海军蓝色形成报告界面,段落、专家引述、调查数据和章节叙述交替推进。它既不是面向销售的演示,也不是纯粹的数据仪表板。
|
||||
|
||||
它采用风景宽屏画布、品牌定制的低装饰无衬线字体、深蓝色/亮蓝色/浅报告蓝色的品牌颜色、大矩形照片和色块、低调的页脚、超大零件号(部分分隔板上有半屏摄影)、带有跳转箭头的列表项内容页、蓝紫色图形和细线分隔的数据页。允许相对较高的信息密度,但通过矩形分区、宽边距、标题层次结构和摄影空白来保持清晰度。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. **场景优先,信息嵌入**:使用真实的旅行/酒店照片构建场景;将文本、引言和数据放在单独的色块或白卡上,避免将它们直接放在复杂的照片上。
|
||||
2. **品牌蓝为阅读服务,绝不抢夺阅读**:深蓝色用于最高强调和反转区域,浅蓝色承载长文本和章节底板,亮蓝色仅用于导航、标签和小区域强调;正文的可读性不得降低。
|
||||
3. **出版一致性胜过页面表演**:照片、两栏布局、表格和图表可能会有所不同,但标题位置、页脚、矩形分区、排版层次结构和冷蓝色调色板必须在整个平台上保持一致。
|
||||
|
||||
## 2. 页面骨架- **画布比例**:统一的横向宽屏报告页面,接近PDF/杂志排版;不要使用大字体、宽空白的演示模板。保持可见的外边距;内容永远不会触及页面边缘。
|
||||
- **基本边距**:内容页面在所有四个边上保持稳定的白色或浅蓝色边框;左、右和上边距保留了杂志的感觉,下边距为页脚、报告名称或页码保留了空间。大图像可以接近内容区域的边缘,但不得突破安全边界。
|
||||
- **标题区**:正文标题位于左上角或顶部,使用短问句、章节名称或结论性短句;分区标题可能会占据屏幕的左半部分或一个大的浅蓝色区域;封面标题设置在覆盖在照片上的深蓝色信息卡中。分层只能通过字体大小、位置、背景颜色和水平线来实现。
|
||||
- **正文区域**:组织在矩形网格上 - 通常为左/右两列,上/下两个带,照片+文本卡,深蓝色侧边栏,完整的浅蓝色底板以及多列文本/图表组合。用空格或细线分隔块;不要堆叠浮动元素。
|
||||
- **标题**:常规内容页面没有复杂的标题导航;章节信息以小文本形式融入标题或页脚。不要添加持久的顶部导航栏。
|
||||
- **页脚和页码**:内容页面底部稳定地带有品牌洞察标记、报告名称和页码。字体明显小于正文,为深蓝色/灰黑色;页码位于底部边缘附近,不会与主图表竞争注意力。
|
||||
- **Logo**:封面左上角出现身份标记,呈现为小纯文本(写入新主题名称),不绘制图形徽标;内部页面通过小的页脚文本或品牌信息来弱化它;封底/封页可以强化品牌文字标记。不要在每个页面上放置大徽标。
|
||||
- **内容导航**:左侧窄蓝色渐变/抽象曲面图形+右侧内容列表。条目由章节名称、开头附近或左侧栏中的数字页码以及右侧/尾部的“↗”组成;条目之间用细线分隔。
|
||||
- **分隔线**:细灰色/浅蓝色线用于内容、列之间、表格中、引用属性和数据列表中;它们的粗细和对比度低,而不是装饰性的粗边框。
|
||||
- **水印和背景图形**:浅蓝色部分分隔线可能使用非常微弱的弧线/曲线阴影;深蓝色页面可能使用低对比度纹理或线性背景。这些仅用作背景,不得损害正文和照片的易读性。
|
||||
- **默认阅读路径**:左上角标题或零件号→主照片/深色强调区→正文或图表→脚注和页脚。两列布局从左到右、从上到下阅读;在照片 + 侧边栏布局中,首先是照片,然后是关键数据或引言。
|
||||
|
||||
## 3. 内容组织- **标题的书写方式**:封面采用主标题+副标题+系列/品牌标签;目录页列出了章节;章节分隔符使用“第十部分”+一句话章节主题;正文页使用疑问句或明确的主题句。具体且可读;没有夸张的营销口号。
|
||||
- **信息句子**:观点和引用页面可以使用完整的报告式段落,而不是被切成许多简短的口号。突出显示的句子使用超大引号、浅蓝色引号框或深蓝色反转区域。
|
||||
- **正文组织**:段落短、行长窄、段落间距清晰;前言/方法页可以密集地设置在 2-3 列中。不要将长段落拉伸到整个页面宽度。
|
||||
- **分组逻辑**:套牌按部分分为章节;每个页面的组织方式为“主题标题 - 解释段落 - 照片/引用 - 数据或列表”。每一页都围绕一个主要问题;不掺杂任何不相关的主题。
|
||||
- **每页观点数量**:常规内容页面包含 1 个主要观点,可选附有 1 条专家引述或 1 组数据;一个数据复合页面可以并列 2-4 个指标/图表,但它们必须共享相同的问题、定义和测量基础。
|
||||
- **如何编写项目符号**:更喜欢短标题、百分比、细线分隔符、图标/小标记或并排卡片 - 而不是传统的大项目符号点;保持项目的长度相似,并避免任何单个项目变成长段落。
|
||||
- **关键词强调**:使用粗体、色块、字体大小、位置、放大数据;谨慎使用文本内颜色突出显示。斜体仅用于报告名称、引用来源或语气强调,切勿大面积使用。
|
||||
- **数量/单位/时间基础**:百分比、年份、样本量及其解释保持相邻;大数字必须附有对其定义和测量基础的简短解释。单位设置得小于数字,但必须保持清晰。
|
||||
- **来源脚注**:图表来源、调查样本定义和方法说明位于图表下方、页面底部或侧边栏底部;低对比度但清晰,不要与页脚混淆。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 大摄影+深蓝色信息侧栏
|
||||
|
||||
用于专家观点、主要发现、排名列表和百分比数据。一面放旅游/酒店场景照片;另一侧是深海军蓝矩形侧边栏,设置有白色文本、浅蓝色细线、小图标或百分比列表。关键点在顶部;报价可能会以超大引号开头,出处位于底部。
|
||||
|
||||
它携带 1 个报价或 4-6 个短数据项;照片和侧边栏不得相互重叠。如果文本需要长篇解释或复杂表格,请勿使用此布局。
|
||||
|
||||
### B.浅蓝色底板+照片/文字两栏
|
||||
|
||||
用于章节开头、个人引言、较长的解释性段落和方法论注释。浅报告蓝色作为整页底板或半页载体层,一侧为照片,另一侧为标题、段落和出处;文本为深蓝色/近乎黑色,并用分隔线将属性与正文分开。
|
||||
|
||||
强调来自大标题、左对齐和浅蓝色空间。如果页面包含多色数据图表,请减少浅蓝色区域或切换为白色背景,以避免混色。
|
||||
|
||||
### C.白色报表页+多栏正文
|
||||
|
||||
用于前言、引言、方法论和解释性章节。大标题位于顶部或左上角;正文分为 2-3 列,两侧可选择肖像照片、浅蓝色作者信息框或小记事卡;列由空格或细线分隔。控制列宽;避免全角长行。这种布局不适合情感章节的过渡,也不适合呈现需要强烈视觉冲击力的大量数字。
|
||||
|
||||
### D. 部分分隔符:超大零件号 + 半屏摄影
|
||||
|
||||
用于分隔章节。左侧或上层的浅蓝色区域上有一个超大的“Part X”,下面是章节主题句;屏幕的右侧或一半带有肖像/旅行场景照片。浅蓝色区域可能包含非常微弱的曲线。
|
||||
|
||||
它仅提供导航和章节氛围——没有复杂的正文、图表、脚注或多个观点。零件编号明显大于章节主题。
|
||||
|
||||
### E. 数据综合页面:主题解释 + 多个图表/指标
|
||||
|
||||
用于调查结果、投资方向和偏好比较。顶部包含主题标题和简要说明;正文分为图表区域、数字度量区域和解释性文本区域。常见元素包括圆环图、条形列表、百分比卡和小图标列表,颜色主要为蓝紫色和深蓝色。
|
||||
|
||||
强调来自于大百分比、深蓝色背景上的白色文本以及亮蓝色/紫色系列颜色。如果数据定义或测量基础复杂或注释较多,请拆分页面或将其转换为表格/方法页面。
|
||||
|
||||
### F. 高密度并行模块页面
|
||||
|
||||
用于多个发现、多个市场/细分市场或多个战略维度的横向比较。使用 2-4 张等宽的卡片或列,每张卡片或列包含一个副标题、一个短段落、一个数字或一个小图表;严格对齐,用浅色分隔线组织,并在白色和浅蓝色之间交替背景颜色。
|
||||
|
||||
不适合大的情感照片;照片可能仅显示为小缩略图以帮助分类。所有模块必须共享相同的语法,否则报告的一致性就会中断。
|
||||
|
||||
## 5. 颜色系统- **深海军蓝#000735 / #020D3E / #051954**:用于封面信息卡、深蓝色侧边栏、强调区域、封底、深色图表背景和标题文本;区域范围可以从小标签到半页/全页暗块。它可以替换为其他品牌的深色,但白色文本必须保持高对比度,并且颜色不得转变为灰色或黑色,以致失去其蓝色身份。
|
||||
- **浅报告蓝色#C6D4F9 / #C7D5FA**:用于分区分隔板底板、报价页背景、方法/注释框、浅表填充和大型载体层 - 最多半页甚至整页。可以换成低饱和度的品牌浅色,但一定要保持冷色调,明度足够。
|
||||
- **明亮的品牌蓝色#1E77F8 / #3781F9 / #5D8DF4**:用于内容页面左侧的抽象图形、标签、小强调、链接样式箭头和图表系列颜色;它仅用作小区域指导。不能大面积铺展来代替浅蓝色,否则结果会变得过于科技味,失去杂志感。
|
||||
- **白色#FFFFFF /近白色#F1F3FA**:用于内容页面背景、卡片、图表背景和空白区域;它们上面的文字是深蓝色或接近黑色的。
|
||||
- **主要文本接近黑蓝色 #030208 / #07090F / #2B3A5C**:用于正文、标题、表格文本和图表标签。浅灰色不得用作主体颜色。
|
||||
- **中性灰色#8D92A1 / #9FA0A9 / #B3B6C3**:用于分隔线、辅助标签、轴、脚注和非必要信息;面积小,对比度低但可辨别。它不得携带关键信息。
|
||||
- **照片暖色调#A87C39 / #C06712 / #CB9742 /棕褐色系列**:这些主要来自旅行/酒店摄影,不是系统原色;它们可能只会少量地呼应图表或当地口音——不要将它们提升为主要品牌颜色。
|
||||
- **紫色/蓝紫色辅助色**:用于少量图表系列、关键指标或比较组;它们的区域受到控制,不得同时与亮蓝色和深蓝色竞争。
|
||||
|
||||
每一页都以蓝色家族为中心;除照片的自然色外,系统颜色的数量不应超过2-3种色调。首先通过明暗对比、标签文本、箭头或图例来解释正/负状态;谨慎引入红色和绿色,切勿使用高饱和度的红绿组合,破坏报告的冷色调。
|
||||
|
||||
## 6. 版式和文本层次结构
|
||||
|
||||
使用现代无衬线字体。 Regular中品牌定制字体占绝大多数;粗体很少用于标题/强调,常规斜体用于报告名称或引用强调,中/浅仅很少使用。正常体重占主导地位;避免过度加粗。- **封面主标题**:主体尺寸的 3.5–4.5 倍,设置在深蓝色信息卡内或照片上方明确定义的区域;行距紧但不拥挤。
|
||||
- **封面字幕/系列标签**:字幕为正文尺寸的 1.5–2 倍;系列/标签是主体尺寸的 0.7–0.9 倍,通常设置在亮蓝色或浅蓝色条内。
|
||||
- **部分分隔件零件号**:4-6 倍主体尺寸,轻量或常规重量 — 无需加粗。
|
||||
- **章节主题句**:1.6–2.5x 正文大小,左对齐,自然断开多行。
|
||||
- **内容页标题**:1.5–2.2x 身体尺寸,通常为常规重量;短标题可以放大。不要使用过于沉重的标题,以免产生商业海报的感觉。
|
||||
- **正文**:1x;宽大的行距和清晰的段落间距。
|
||||
- **副标题/卡片标题**:1–1.2x 正文大小,可以是粗体或中号。
|
||||
- **图表标签/表格文本**:0.75–0.95x 主体尺寸;键数可放大至 1.5–3 倍。
|
||||
- **引号文本**:长引号是正文大小的 1–1.2 倍;引号可以放大到 2-3 倍并设置为深蓝色。
|
||||
- **注释、来源、页脚、页码**:0.55–0.75 倍正文大小,低调但清晰。脚注不能太小而难以阅读。
|
||||
|
||||
默认情况下,文本左对齐。除封面信息卡的局部区域外,请勿使用大块居中副本。标题可以使用标题大小写或句子大小写,但同一级别必须统一。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
图表是嵌入在报告叙述中的证据组件,而不是主要的仪表板。样式包括圆环/环百分比、条形/排名列表、多指标卡、小图标列表、表格比较和少量坐标图表。
|
||||
|
||||
- **图表类型**:更喜欢百分比环、水平条、排名条、指标卡、简单的柱/线和比较表。避免复杂的交互式仪表板、雷达图、3D 饼图和包含太多系列的折线图。
|
||||
- **轴和网格线**:使用浅灰色/浅蓝色低对比度线;网格线仅有助于阅读。轴标签比正文小,呈中性灰色或深蓝色。
|
||||
- **标签和图例**:尽可能在图形附近直接标记值,并尽量减少远处的图例;将百分比保持在其指标名称附近;传说样本小而整洁。
|
||||
- **系列颜色**:使用深蓝色、亮蓝色、浅蓝色和蓝紫色,并控制每页的系列数量。照片暖色调不会进入常规数据系列,除非它们与本地内容相呼应。
|
||||
- **关键数据**:使用大数字、深蓝色背景上的白色文本、粗线或高饱和度蓝紫色。不要同时堆叠多个强调点,例如阴影、分解饼图和荧光色。
|
||||
- **预测/目标/基线**:使用带有短标签的细虚线或细实线。不要添加复杂的渐变填充。
|
||||
- **注释**:使用白色卡片或带有细线的浅蓝色方框,并谨慎使用箭头;它们不得掩盖图表的主要读数。
|
||||
|
||||
保持图表的简洁和精致;如果不能快速掌握一页上的金额,请拆分页面或将其移动到附录表中。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格用于方法论、样本描述、市场/指标比较以及浓缩高密度信息。它们使用浅色边框、微妙的背景色调和报告式排版——而不是办公软件默认的厚重网格。- **标题**:使用浅蓝色、近白色或深蓝色底白色;文本可能会稍微加粗,大小接近正文文本或稍小;保持足够的高度和空白。
|
||||
- **行/列结构**:按内容函数分配列宽;左侧通常包含类别/维度,右侧通常包含值或解释;用细线或空格分隔。
|
||||
- **分隔线**:使用浅灰色/浅蓝色细线,避免使用粗的全黑边框。水平规则比垂直规则更常见;仅当需要进行强比较时才保留垂直分隔符。
|
||||
- **背景填充**:使用白色、浅蓝色或微妙的斑马条纹;斑马条纹必须是低对比度的并且仅有助于扫描。
|
||||
- **关键行/列**:用深蓝色文本、浅蓝色填充、粗体或小标签突出显示。不要用高度饱和的颜色填充大面积区域。
|
||||
- **摘要行**:用稍深的浅蓝色填充或上方的细线进行区分 - 而不是粗边框。
|
||||
- **数字对齐**:右对齐或小数点对齐百分比、金额、年份等;左对齐文本;单位紧跟在数字后面或移动到列标题中。
|
||||
- **符号标记/评级点**:可以使用小点、复选标记、箭头或短标签,保持在单色蓝色/灰色系统内。彩色图标不是默认的表格标记。
|
||||
|
||||
保留标题、描述和脚注;不要让表格填满整个页面。表格压缩证据;它们不能取代叙事。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
- **深蓝色信息卡/侧边栏**:用于关键结论、引述和数据列表;白色文字和内部浅蓝色细线,无阴影;非常适合与照片并排放置。
|
||||
- **浅蓝色载体盒**:用于长引用、章节主题、解释性段落和方法论信息;文本为深蓝色/接近黑色;它可能没有轮廓,区域由色块和空白定义。
|
||||
- **封面标题卡**:覆盖在照片上的深蓝色矩形卡,顶部可选择亮蓝色/浅蓝色标签条;直角,位于中心右侧或中心右侧,避免遮盖人脸。
|
||||
- **目录条目**:由页码、章节名称、细线分隔符和“↗”组成;可以少量用于导航,但不应淹没正文中的每个列表。
|
||||
- **超大引号组件**:用于专家引述或观点摘录;引号是深蓝色或白色,并且明显大于正文;接下来是该段落,出处位于底部。
|
||||
- **百分比/指标列表**:每个项目包含一个小图标或短标签、百分比和说明文字;项目之间用细线或空格分隔;适合深蓝色侧边栏或白色卡片。
|
||||
- **图像框**:矩形、直角裁剪,通常占据半页或较大面积;主题包括人物、酒店、自然、交通/旅行场景。通过直边与文本分开,没有相框阴影。
|
||||
- **抽象蓝色曲面/曲线**:内容和分区页面可以使用蓝色渐变曲面或淡线条;这些仅用于章节/导航氛围,而不是每个页面上的装饰。
|
||||
- **细线分隔线**:低对比度,长度跟随内容块的宽度;绝不整版重装饰线。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体质感扁平、内敛,像社论杂志,页面通过摄影、矩形色块、排版层次和蓝色系统进行组织。**禁止**:
|
||||
- 3D 图表、透视文本、发光轮廓、霓虹灯效果、复杂纹理、浓重阴影和玻璃形态。
|
||||
- 表情符号、卡通贴纸、大量彩色图标和社交媒体风格的表情符号。
|
||||
- 大块居中文案、海报式口号堆叠以及整页非结构化超大文本。
|
||||
- 将长正文文本直接放置在复杂的照片上,或用低对比度文本覆盖人物/场景主题。
|
||||
- 使用高饱和度的红色、绿色或黄色作为大面积状态颜色,打破了蓝色报告系统。
|
||||
|
||||
**谨慎使用**:
|
||||
- 渐变:仅限于内容页抽象图形、蓝色曲面或极其微妙的背景;不适用于按钮或大面积的身体接地。
|
||||
- 阴影:源样式几乎不依赖于阴影;如果必须区分白色卡片,请仅使用非常浅的阴影或切换到空白/背景颜色。
|
||||
- 圆角:源文件以直角矩形为主;圆角不得成为系统功能。
|
||||
- 图标:数据列表中可以使用小的单色线图标;大的彩色图标不合适。
|
||||
- 插图:不被视为核心语言;它不能取代真实的摄影。
|
||||
|
||||
**允许在特殊页面上**:
|
||||
- 大面积的摄影背景可用于封面、分区、结束页面或一些情感过渡;长文本正文页面不应使用全图像背景。
|
||||
- 抽象的蓝色渐变形状可用于内容或导航页面;普通内容的页面应该受到限制。
|
||||
- 整页或半页深蓝色可用于强调结论/引文/封底,但内容量必须小,并且反转的文本必须保持清晰。
|
||||
|
||||
## 11. 一代清单- 骷髅:是统一的风景宽屏吗?外边距和底部页脚是否保留?标题区、正文区、脚注区是否划分清楚?
|
||||
- 复制语法:标题是具体的主题/问题/章节句子吗?每一页是否只包含一个主要观点?段落是否太长或太宽?
|
||||
- 层次结构:封面、部分、内容页标题、正文、图表标签和脚注的相对大小是否明确定义?粗体是否被过度使用?
|
||||
- 颜色:核心调色板是深蓝色、浅蓝色、亮蓝色和白色/近黑色吗?一页上的系统颜色是否过多?深色背景上的文字对比度是否足够?
|
||||
- 布局:照片、文本和图表是否与矩形网格对齐?是否存在随机浮动、被覆盖的面或不一致的边距?
|
||||
- 图表:图表简单易读吗?百分比及其定义和测量基础是否相邻?图例、轴和网格线是否被低估了?是否有3D或过多的装饰?
|
||||
- 表格:标题、行/列、分隔线、数字对齐和脚注是否标准化?是否使用了厚重的黑色网格或高度饱和的填充?
|
||||
- 组件:深蓝色侧边栏、浅蓝色载体盒、内容箭头、引号和指标列表是否携带信息而不仅仅是装饰?
|
||||
- 禁止物品:是否避免使用表情符号、复杂插图、大型彩色图标、强烈阴影、发光、3D、复杂纹理和大块居中副本?
|
||||
- 可读性:是否存在溢出、截断、乱码、重叠、对比度低、遮挡、内容空、图像长宽比错误、页脚压入正文等问题?
|
||||
- 一致性:页面可能有所不同,但它们是否仍然保留蓝色系统、页脚、直角矩形、左对齐和报告杂志字符?避免使每个页面成为不相关的模板。
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则切勿使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 没有均匀划分的构图:除非没有其他可用的布局,否则不要默认为三分之一、四分之一或二乘二矩阵。这包括三部分结构,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,158 @@
|
||||
# 机构名称 AR 23 24 · 2023年年度报告 24 STYLE DESIGN SYSTEM
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
上市公司年报、投资者关系、ESG和治理披露、财务附注和审计报表的风景报告式PPT。它为投资者、董事会、监管机构和内部管理层服务,强调长篇阅读、快速导航、可审查性和可追溯性。正文、表格、脚注和图表采用温暖的灰白色纸张背景、稳定的网格、小尺寸密集排版、Tahoma/Caladea、黑灰色文字、细灰色线条和少量金棕色进行组织。摄影仅用于封面、内容/章节页面或少数品牌页面;正文页面以多栏文本、数据指标、圆环图/柱形图、宽表和治理矩阵为主。
|
||||
|
||||
基本原则:
|
||||
- **披露阅读胜过视觉表现**:标题、正文、数据、脚注和来源必须沿着网格连续阅读;装饰、图像和色块不得破坏审查路径。
|
||||
- **低饱和度一致性战胜强刺激**:卡组以灰白色、黑灰色、浅灰色、金棕色为主;只有黑色封底、摄影页和必要的图表可能会表现出更强的对比度。
|
||||
- **信息通过位置、尺寸比例、线条和空白进行分层**:使用很少的大面积颜色模块,没有强烈的阴影或复杂的图形;高密度页面通过列宽、细线分隔线、副标题和表格标题来组织信息。
|
||||
|
||||
## 2. 页面骨架- **画布比例**:横向宽屏报告页面,接近16:9;将其视为“可打印的年度报告页”,而不是舞台演示页。
|
||||
- **默认背景**:整个正文页面是暖白色,大约为`#FBF9ED`;纹理、渐变或图案通常不会分层到背景上。
|
||||
- **边距**:所有四个边都有稳定的空白;上边距有一个小章节/报告标记,下边距有页码和报告名称;主体作为多列网格插入。
|
||||
- **标题**:左上角通常显示三个短条/章节名称迷你导航; “年度报告 2023/24”样式的报告标记位于顶部中心或右上角;非常小且对比度低。
|
||||
- **页脚和页码**:小页码、页面名称或报告信息位于底角,呈黑灰色或浅灰色。页脚一定要轻,不能与正文争夺注意力。
|
||||
- **标题区**:标题位于左上角或左上角;正文页使用简短的报告式标题,而章节/目录页可能会覆盖照片或与其并排放置。数据或文字直接跟在标题后面,没有任何夸张的装饰。
|
||||
- **身体区域**:2-4 列网格。文本页面采用等宽多栏;数据页面将关键指标放在左侧,将解释/图表/表格放在右侧;宽表格占据页面的中下部分或右侧的较大区域。
|
||||
- **分隔线**:细线用于列之间、表格、脚注、度量区域、注释框和图表基线中;浅灰色/中灰色,重量有限。
|
||||
- **徽标**:身份标记(拼写报告名称的小纯文本;没有绘制图形徽标)主要出现在封面/封底或少数品牌位置。正文页不得在每一页上放大徽标——最多显示为极小的报告信息。
|
||||
- **导航**:目录页由章节标题、条目、页码组成;部分页面可以使用大图像+内容样式列表。正文页面仅保留浅色标题 - 没有彩色进度条。
|
||||
- **水印/背景图形**:正文页没有稳定的水印;圆形产品/品牌缩略图或照片仅作为元素出现在几页上。
|
||||
- **默认阅读路径**:左上角标题/章节和标题→左侧或第一正文列的关键指标→从左到右、从上到下→图表、表格注释和页脚来源。
|
||||
|
||||
页面类型骨架:
|
||||
- **封面**:整页或大面积的内部/产品照片,超大标题覆盖在中心稍偏左的位置,白色文本高对比度,底部有身份标记(小纯文本拼写报告名称;未绘制图形徽标)。
|
||||
- **内容页面**:左侧有一个垂直的摄影栏,带有重叠的标题,右侧的灰白色区域包含多栏内容列表;章节标题为粗体,条目较小,页码右对齐。
|
||||
- **身体报告页面**:灰白色背景,浅色页眉和页脚,左上角标题,多列文本/图表/表格。
|
||||
- **章节/注释页**:左侧是摄影或色调统一的图像,右侧是内容风格的条目列表。
|
||||
- **封底/特别结束页**:可以使用黑色背景和白色身份标记(小纯文本;不绘制图形徽标);这是一个特殊页面,不得应用于正文页面。
|
||||
|
||||
## 3. 内容组织- **标题如何书写**:简短、客观、报告风格——例如概述、展望、地区名称、治理主题、审计/注释标题。避免营销口号、长问句和过于情绪化的措辞。
|
||||
- **信息句子**:标题下可有 1-3 行描述或摘要;不要将大块的居中副本作为内容页的主体。
|
||||
- **正文组织**:使用短段落、副标题和必要的项目符号。较长的财务、治理和审计文本分为 2-4 栏;避免单列长行。
|
||||
- **分组逻辑**:按年度报告章节、管理回顾、战略展望、治理、财务、附注和审计进行组织;同一级别的信息采用统一的标题样式、栏宽、间距。
|
||||
- **每页观点数量**:常规商业页面包含一个主题 + 3-5 个小节/指标;纯粹的披露页面可能会添加更多文本,但每列都必须有副标题或段落分隔符。大字体的观点页面不是主流,切不可过度使用。
|
||||
- **如何书写要点**:使用破折号、点或不超过两层的缩进;使用空白和细线进行分组,并谨慎使用彩色图标。
|
||||
- **关键字强调**:使用粗体、位置、放大数字、金棕色或表格背景填充。不要使用荧光突出显示、堆叠下划线或多色强调。
|
||||
- **数字/单位/时间**:关键数字形成独立的块,并且大于其解释文字;单位紧贴数字或作为小标签位于其上方/下方。财务范围、百分比、丹麦克朗、年份等必须保留其定义和计量基础注释。
|
||||
- **来源脚注**:脚注、星号、括号注释和监管引文放置在底部或表格下方,设置小于正文文本,对比度低但可读。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 多栏报告正文页面
|
||||
|
||||
适用于审计意见、治理声明、政策说明、ESG 披露、财务说明和其他长文本。左上角有一个简短的标题;正文由 3-4 列等宽的文本组成,每列使用副标题+密集段落;列由空格或细线分隔,而不是颜色块。重点取决于粗体副标题、第一段位置和段落间距。如果内容需要强烈的视觉叙事、单个大视点或许多图像,请不要使用此布局。
|
||||
|
||||
### B. 公司/主题概述页面
|
||||
|
||||
适合“一目了然”式的摘要、业务构成、产品类别和渠道/市场概况。中间是圆环图或核心解释;关键数字、简短描述、类别标签或最小图形位于左侧和右侧。圆环图表达成分关系,不负责精确比较;当需要精确的趋势、排名或多维度比较时,可以使用柱形图/表格。
|
||||
|
||||
### C. 展望和假设页面
|
||||
|
||||
适合年度展望、目标范围、假设、敏感性和风险说明。左侧的垂直关键指标区域包含 2-4 个大数字/范围;右侧分为“假设”、“注释”、“敏感性”或小表格。金棕色用于目标范围或关键值;灰色填充的盒子带有附加条件。当没有明确的量化结论时,不要强行将内容强行放入 Outlook 页面中。
|
||||
|
||||
### D. 地区/业务评论页面
|
||||
|
||||
适合对地区、业务部门或业务线进行审核。区域名称和关键数据位于左侧,小柱形图/指标比较位于中间,右侧 2-3 列解释原因、行动和结果。切入点是地区名称和号码,而不是摄影。如果只有叙述而没有指标,请切换到多列正文页面。
|
||||
|
||||
### E. 宽表披露页面适用于财务报表、治理矩阵、董事会信息和薪酬/审计详细信息。简短的标题和描述位于顶部;横向宽工作台占用面积最大;必要时,左侧说明,右侧表格。键列、总行或标题使用灰色填充、粗体或深灰色规则。如果表被压缩到无法读取,则必须将其拆分为多个页面。
|
||||
|
||||
### F. 人员/治理卡页面
|
||||
|
||||
适用于董事、管理层和委员会的信息。使用等宽垂直卡片:顶部是黑白或低饱和度肖像,下面是姓名、角色、任期、职责和委员会信息,卡片之间有细垂直线。照片经过统一裁剪和灰度/低饱和度;没有彩色头像墙社交媒体风格。
|
||||
|
||||
### G. 摄影部分页面
|
||||
|
||||
适合封面、内容、注释和章节开头。内部/产品摄影占据左侧或整个页面,章节标题和内容列表位于右侧或覆盖区域。照片必须有低噪音区域来承载文字,其色调必须与灰白色/金棕色一致。正文披露页面不得依赖大图像背景。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **纸背景灰白色 `#FBF9ED` / `#FEFCF0`**:正文页面的主要背景。不得用纯白色或高饱和度的浅色代替;迁移品牌时,可以用同样低饱和度的暖白色代替。
|
||||
- **主要文本黑灰色`#171717`–`#2B2B2B`**:标题、正文和表格的主要文本。浅灰色不得取代正文,以避免对比度低。
|
||||
- **辅助文本灰色`#5A5E6B`/`#7D7A72`**:页眉、页脚、注释、图表标签和辅助注释。用于降低层级;不应该用于长段落的主体。
|
||||
- **浅灰色分隔线 `#D9D7CB` / `#C6C4BB`**:列规则、表格网格线、图表轴和注释框边界。避免粗的纯黑线。
|
||||
- **表格/注释框灰色填充`#A09C93`,浅灰色填充`#E5E3D8`**:用于标题、摘要区域、敏感框或需要强调的表格;较深的灰色填充与浅色文本配对,浅灰色填充提供二次区分。不要大规模覆盖整个页面。
|
||||
- **品牌金棕色 `#B59D71` / `#AB8F62` / `#97754C`**:关键数字、圆环图强调、一些图表系列以及摄影色调的呼应;面积小到中等。它可能会迁移到品牌的主色,但必须保持低饱和度、暖色调,并与灰白色和谐。
|
||||
- **`#6F5435`**周围的深金色/棕黑色:仅用于金棕色系统内的更深层次或用于图表对比;谨慎使用。
|
||||
- **黑色特殊颜色`#000000`/深黑灰色**:封底或极少数封页的背景,搭配白色身份标记(小纯文本;未绘制图形徽标)/文本。正文页面禁止使用大的黑色背景。
|
||||
- **图表系列颜色**:使用金棕色、深灰色、浅灰色、黑灰色;通常每页不超过 2 个主要色调,根据亮度和透明度而变化。如果出现正负状态,首先用文字/符号和明暗对比来区分;除非数据合规性需要,否则不要引入红绿强对比度系统。
|
||||
|
||||
## 6. 版式和文本层次结构- **类型字符**:Caladea-Regular 和 Tahoma 是主流,Tahoma-Bold 用于副标题/部分强调;该组合可以用类似的衬线字体 + 人文主义者 sans 来复制。该字体不追求科技或手写的感觉。
|
||||
- **主体 = 1x**:甲板宽度基线;高密度、紧凑但可读;长文本使用常规粗细。
|
||||
- **脚注/标题/页码 = 0.75–0.9x**:报告名称、页码、注释、来源和监管引文,颜色较浅。
|
||||
- **副标题/表标题 = 1.2–1.6x**:章节内的小节、表标题、卡片名称或内容章节名称;可能会加粗。
|
||||
- **正文页标题 = 2–3x**:左上对齐,黑灰色;不需要夸张的装饰。
|
||||
- **章节/封面大标题 = 4–6x**:仅用于封面、内容摄影区和注释/章节开头页;可能是图像上覆盖的白色文本或灰白色区域中的黑色文本。
|
||||
- **关键数字 = 2.5–4x**:用于展望、概述和区域页面;单位和注释为 0.8-1x,与数字紧密相关。
|
||||
- **图表标签 = 0.8–1x**:轴、图例和数据标签小而清晰;关键的可以加粗或使用金棕色。
|
||||
- **表格文本= 0.8–1x**:可能比正文稍小,但绝不能太小而难以阅读;标题和摘要行可以加粗。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
主要是圆环图、小柱形图、表格数据和少量的度量区域——没有复杂的可视化系统。
|
||||
|
||||
- **圆环图**:用于成分份额或类别比例。置于页面中部或下部;金棕色标记关键类别,灰色/黑灰色标记其他类别。标签环绕在环上,线条很少;避免爆炸饼图、3D 饼图和过多的切片。
|
||||
- **柱形图**:用于区域或年度比较。条形狭窄而干净,层次分明,有金棕色、黑灰色和浅灰色;轴和网格线非常微弱。小柱形图可以证实指标,但不包含整个页面的视觉效果。
|
||||
- **公制区域**:大数字+小注释+单位/时间基础,通常在左侧;关键值可以使用金棕色。解释性文字必须与数字紧密结合——避免让数字孤立。
|
||||
- **轴和网格**:轴线、刻度线和网格线是低对比度的;图表框架尽可能保持明亮。
|
||||
- **图例**:放置在图表附近,带有小文本和简单的样本。传奇绝不能成为一条独立的彩色装饰条。
|
||||
- **注释**:预测、目标和基线使用细线、浅灰色框或小注释;不要使用大箭头、发光标记或夸张的标注。
|
||||
- **边界**:不要引入彩色信息图表、复杂地图、动画图形或拟物化仪表板。图表美观遵循数据清晰度和完整的定义、范围和计算基础。
|
||||
|
||||
## 8. 表格和高密度信息- **表角色**:作为财务、治理、董事会、薪酬、审计、ESG 指标等的精确披露和证据工具;它们可以承载页面的主体。
|
||||
- **标题**:使用浅灰色或中灰色填充和粗体文本;深灰色标题与浅色文本配对。高度紧凑,与数据行明显区分。
|
||||
- **行/列结构**:浅灰色细网格线;窄数字列和宽文本列。避免粗边框和过多的斑马条纹。
|
||||
- **行高**:高密度但不拥挤;长文本可能会换行,并且不得强制压缩为截断。
|
||||
- **关键行/列**:总计、关键年份、委员会隶属关系或状态列可以使用粗体、灰色填充或深色分隔线。不要用多种明亮的背景颜色来标记它们。
|
||||
- **数字对齐**:数字右对齐或按小数位/单位对齐,文本左对齐;百分比、货币和年份使用一致的格式和测量基础。
|
||||
- **符号标记**:可以使用低调的符号,例如小点、星号和复选标记/评级点;翅膀/符号字符只是辅助性的,不是彩色图标系统。
|
||||
- **斑马条纹**:如果使用,只有极浅的灰色/灰白色亮度差异。大的黑行填充保留用于标题或摘要区域。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
- **轻标题组件**:左上角迷你导航/三个短栏+章节名称,报告名称位于右上角或顶部;仅用于定向,不得加粗或放大。
|
||||
- **内容组件**:粗体章节标题、小条目、右对齐页码、排列在多列中;适合内容和备注页,并可与左侧摄影栏相结合。
|
||||
- **键数组件**:大数、单位、短注垂直组合;用于概述、展望和区域页面。使用黑灰色和金棕色,以空白作为入口点。
|
||||
- **细线分隔组件**:水平线、垂直线、表格网格和列规则建立顺序 - 它们不是装饰性的细工。
|
||||
- **灰色填充注释框**:用于假设、敏感性、脚注强化或本地表格注释;低饱和度填充,文字小,边界清晰。多个颜色鲜艳的警报箱不得堆叠。
|
||||
- **卡片/人物列**:顶部为肖像,下方为文字,列之间有细线;没有可见的阴影——边界由网格和空白定义。
|
||||
- **图像框架**:摄影使用矩形裁剪,边缘干净,没有圆角或阴影;用于封面、内容、章节页面和一些品牌/人物页面。
|
||||
- **图标**:只有少量的最小符号/社交标记/状态点。彩色图标、表情符号和插图不属于该系统。
|
||||
- **流程箭头/SmartArt**:不是稳定的主要组件。如果必须表达一个过程,请仅使用细线、编号和文本框;避免使用尺寸箭头和模板化 SmartArt。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体感觉保持平淡、内敛、纸质、饱和度低;圆角、阴影、渐变、发光、3D 和复杂的装饰并不是主要风格的证据。
|
||||
|
||||
**禁止:**
|
||||
- 正文页面上的大面积渐变、发光、3D、投影卡、玻璃形态或复杂纹理。
|
||||
- 彩虹图、荧光突出显示、表情符号、卡通插图和社交媒体风格的彩色图标。
|
||||
- 居中排版长段落,或用演示海报大小的巨型文本替换报告内容。
|
||||
- 反复放大正文页上的徽标,使用全版黑色背景,或用强烈的色块覆盖灰白色的纸系统。
|
||||
- 表格中的文本被截断、重叠或低对比度,或者为了修饰而牺牲数据定义或测量基础。**谨慎使用:**
|
||||
- 摄影:仅在封面、内容、章节、人物或品牌相关页面上;正文披露页面应谨慎使用它。
|
||||
- 金棕色强调:可用于关键数字和图表系列,但不要将其撒满整个页面。
|
||||
- 灰色填充框:用于注释/标题/摘要;不要将它们变成密集的卡墙。
|
||||
- 图标和符号:仅用于方向或状态支持;保持它们单色且较小。
|
||||
|
||||
**允许在特殊页面上使用:**
|
||||
- 封面可以使用带有大白色标题的全图像背景。
|
||||
- 封底可以使用黑色背景,带有白色身份标记(小纯文本;不绘制图形徽标)。
|
||||
- 章节开头/注释可以使用左侧的大照片+右侧的内容列表。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 骨架:是否为景观报告页面;灰白色背景占主导地位;页眉、页脚和页码是否轻量且对齐?
|
||||
- 文案:标题是否简短且类似于报告;正文是按副标题、段落和列表组织的;是否避免使用营销口号和大段居中文案?
|
||||
- 层次结构:body=1x 清晰;标题、关键数字、小标题和脚注是否按相对比例构建层次结构,而没有超出大小逻辑的夸张变化?
|
||||
- 颜色:每页控制在灰白色、黑灰色、浅灰色、金棕色左右;是否避免使用高饱和度的多色和纯装饰色?
|
||||
- 布局:使用 2-4 列网格;关键指标、文本、图表和表格的功能是否有明确定义;阅读路径从左上角到右下角是否流畅?
|
||||
- 图表:仅使用源样式的甜甜圈、小柱形图、度量区域和表格数据;轴、图例和标签是否低调且可读?
|
||||
- 表格:标题、网格、数字对齐、摘要行和脚注是否清晰;是否有截断、乱码、重叠、过密、对比度低等情况?
|
||||
- 组成部分:细线、灰色填充框、内容、关键号码和人员卡片是否提供信息;没有模板化的 SmartArt 或堆叠的彩色图标吗?
|
||||
- 禁止项目:禁止阴影、渐变、发光、3D、表情符号、复杂插图、社交媒体卡片样式或大型黑色背景正文页?
|
||||
- 完整性:检查是否存在空内容、遮挡、比例错误、低质量拉伸图像、页码错位、标题溢出或重复模板导致的无意义页面。
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则切勿使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 没有均匀划分的构图:除非没有其他可用的布局,否则不要默认为三分之一、四分之一或二乘二矩阵。这包括三部分结构,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 1023 KiB |
@@ -0,0 +1,159 @@
|
||||
#T035·2023年影响总结风格设计体系
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适合面向政策制定者、投资者、合作伙伴、媒体和员工的长篇外部交流 PPT,例如上市公司影响摘要、责任报告、ESG/AI 治理、社会价值、技能推广和环境行动。它通过“可信的报告+人类故事+数据证据”来建立机构问责制,而不是销售路演式的视觉冲击。
|
||||
|
||||
内容页面允许 3-5 列文本、脚注链接、引文和小数据卡共存。核心视觉效果:“#FFF9F3”灰白色背景、Arial 无衬线正文、偶尔的 Times New Roman 衬线显示标题、彩色章节条/胶囊导航、真人或场景照片以及平面矩形数据卡。
|
||||
|
||||
基本原则:
|
||||
- **可信度胜过视觉表演**:用文字、来源、归属、照片和数据来说服;装饰遵循阅读——没有复杂的背景或运动感。
|
||||
- **章节颜色用于导航,而不是彩色显示**:每个主题都有一种主要颜色用于顶部条、当前导航项、数据卡或报价背景;避免多种高度饱和的颜色在同一页面上竞争。
|
||||
- **必须结构化**:用栏、细线、卡片、副标题和脚注分割内容;不要通过缩小文本或压缩行间距来堆积内容。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
- **画布比例**:横向宽屏 16:9。
|
||||
- **全局背景**:主页使用暖灰白色 `#FFF9F3` / `#FFFAF4`;不要将其更改为纯白色、深色或渐变背景。分区分隔页和某些视点页面可能会使用占据顶部 20%–30% 高度的纯色条。
|
||||
- **边距**:左上角起始边距相对较宽,外边距宽松,列间隙清晰;没有边到边排版;右上角保留用于页码或小符号的小空间。
|
||||
- **标题区**:
|
||||
- 章节/方法页面:顶部彩色条带有章节标题、简短描述和胶囊导航,左对齐。
|
||||
- 案例/观点页面:左侧或左上角有大标题,右侧或右半部分有照片;标题可以设置为衬线字体。
|
||||
- 常规内容页面:左上角标题,后跟多栏正文或卡片区域,间距清晰。
|
||||
- **正文区**:多栏正文文本、左/右分割、图文并置、嵌入数据卡;从左到右、从上到下阅读。
|
||||
- **标题导航**:顶部的圆形胶囊标签;当前章节使用填充色或高亮色,其他章节使用带有细轮廓的白色/灰白色底色。高度较低,因此不会窃取头衔等级。
|
||||
- **页脚和页码**:页码位于右上角或角落,处于极低的位置;封面/封底可以带有纯文本身份标记(写新主题名称;不绘制图形标志)和日期。内容页面不需要大徽标,也没有沉重的页脚栏。
|
||||
- **身份标记**:身份标记(拼写组织名称的小纯文本;未绘制图形徽标)主要出现在封面、封底或报告身份页上;在内容页面上,它应该小而安静——避免品牌水印式的重复。
|
||||
- **来源/链接**:放置在正文的末尾、卡片的底部或页面的下部,位于较小的位置,带有蓝色/紫色下划线。
|
||||
- **背景图形**:无持久的几何纹理、水印或装饰图案;依赖纯色、照片和矩形色块。封面可以使用方形瓷砖的彩色照片墙。
|
||||
|
||||
默认路径:顶部章节颜色和导航→左上角标题/问题句→分栏正文→右侧的照片、引言、数据卡和脚注链接。
|
||||
|
||||
## 3. 内容组织- **标题如何书写**:短句、问句或行动陈述,例如“我们如何工作”、“我们对负责任的人工智能的方法”、“我们如何保护基本权利?”;不要堆叠营销字幕。
|
||||
- **信息句**:一行上下文、一个人的名字或一个角色注释可以位于标题下方 - 补充上下文而不重复标题。
|
||||
- **正文组织**:以几个项目符号为主的报告段落;左对齐,列窄,段落之间间隙小。
|
||||
- **分组逻辑**:按承诺、行动、进展、案例和展望进行组织;并行模块通常有 3-5 个,每个模块包含一个副标题、正文、链接/源或一小段数据。
|
||||
- **每页观点数量**:高密度内容页可能包含3-5个平行主题;案例页面集中于一个问题、一张照片、一条引言或一项数据证据;大字体的观点页面只保留一个核心问题/立场。
|
||||
- **如何写要点**:副标题很短,正文使用完整的句子;不要把整页变成支离破碎的口号。项目符号应该短——避免多级缩进。
|
||||
- **关键字强调**:使用 Arial Bold 进行局部加粗;链接使用蓝色/紫色下划线。避免荧光笔效果、轮廓文本和彩虹式强调。
|
||||
- **数字定义及计量依据**:大数字卡片代表重要数字;该数字与其单位紧密结合——百万、十亿、货币符号、百分比——下面有一个解释性句子。请勿将不同定义或计量基准的数字混放在同一张号码卡中。
|
||||
- **时间和来源**:年份、报告期和来源链接使用小级别;脚注必须可读。报价需要姓名/标题/归属或支持照片。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 彩章条+多栏承诺页
|
||||
|
||||
用于方法、工作原则、年度优先事项和责任框架。顶部 20%–30% 是章节彩色条带,包含胶囊导航、标题和简短描述;下面是 4-5 个正文栏,每个栏都有副标题、段落、链接或脚注。重点来自当前导航项、突出显示的链接和本地粗体。请勿将其用于单故事页面或需要大图像情感影响的内容。
|
||||
|
||||
### B.灰白色多柱体+嵌入式数据卡
|
||||
|
||||
用于“行动+结果+投资”证据页面。正文为3-4栏文字,右下或中下嵌有1-2张彩色数据卡;每张卡片上都有一个超大的数字、一个简短的说明和一个小图标/标记。如果需要横向比较的数据点超过 3 个,请切换到表格或图表 - 不要在页面上塞满卡片。
|
||||
|
||||
### C. 左文本/右图像案例页面
|
||||
|
||||
用于有关人、社区、教育、环境和慈善事业的案例。左侧灰白色区域包含大标题/问题句、短段落、链接按钮或引用;右侧 40%–55% 包含一张真实照片,可以是全高的,也可以是大矩形的。照片必须与案件直接相关——不得使用不相关的库存图像。
|
||||
|
||||
### D. 观点问题页面/大衬线页面
|
||||
|
||||
用于章节过渡、核心问题和价值立场。衬线标题远大于正文且左对齐;它可能与短的彩色下划线或色块按钮配对,右侧有照片,只有少量说明。不要在此处放置 4 列正文或复杂的图表。
|
||||
|
||||
### E. 签名信/领导留言页
|
||||
|
||||
用于打开职位和来自领导者的消息。两列或三列长文本,搭配圆形肖像、姓名和头衔以及手写签名;大标题可能是衬线体,正文是 Arial。当没有签名、肖像或明确标识的发言者时,请勿应用此布局。
|
||||
|
||||
### F. 封面和封底身份页封面左侧有纯文本身份标记(写有组织名称;没有绘制图形徽标)、报告标题和日期,右侧是方形瓷砖的彩色照片墙;封底或关闭页以狭窄的照片墙和链接/报告名称关闭。仅用于打开和关闭页面 - 不在正文内重复复制。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **背景纸颜色`#FFF9F3`/`#FFFAF4`**:整个甲板的主要背景。不得用纯黑色或浓灰色代替;在印刷中,它可能会接近白色,但必须保持其暖色调。
|
||||
- **主要文本黑色`#131323`/`#1E171F`**:正文、标题和表格文本的主要颜色。浅灰色不得取代正文。
|
||||
- **中性灰色`#9E9E9F`、`#C5BFBB`、`#EDE8E4`**:细线分隔线、表格规则、次要注释、照片边界和弱背景;它们不携带主要信息。
|
||||
- **紫色章节`#6F2572`**:AI/责任章节的顶条、当前导航、引言或强调卡;在正文中,它仅显示为链接、标签或数据强调。更换时,保持足够的深度和白字对比度。
|
||||
- **黄色章`#FFB901`**:顶部条带、数据卡和技能/学习章节的右侧强调块;与黑色文本配对——避免在黄色上使用低对比度的白色文本。
|
||||
- **浅紫色 `#C6B3E4` / `#C5B3E3`**:报价框、辅助数据卡和软强调区;它带有黑色或深紫色文本,不作为主体文本的基础而大规模传播。
|
||||
- **蓝色`#0978DE`**:链接、少量图表系列、强调标记或封面照片中的品牌颜色;面积小。
|
||||
- **绿色/青色`#6D7A62`、`#B8DCD2`、`#152C27`**:环境或可持续发展章节、数据卡和照片回声;深青色卡底与浅色文字搭配,浅青色作为辅助底色。
|
||||
- **橙红色系列(靠近`#FF5A3D`)**:章节条、标签或强调线;每页使用一种原色,不要让它同时与黄色和紫色大规模竞争。
|
||||
|
||||
一页只能有1章原色+灰白+黑灰;数据卡可添加1种辅助颜色。不要凭空发明红绿上/下系统。品牌颜色可能会取代章节颜色,但“顶部条/导航/卡片”角色保持不变。
|
||||
|
||||
## 6. 版式和文本层次结构
|
||||
|
||||
- **类型字符**:正文以Arial字体为主;标题和观点页面有时会使用 Times New Roman。请勿将装饰字体或手写字体混合到正文中。
|
||||
- **正文**:1x — 多列段落、表格注释和案例文本的基线。
|
||||
- **副标题/栏标题**:大约 1.1–1.3x,通常为 Arial 粗体。
|
||||
- **页面标题**:常规内容页面约 2–3x;章节标题可以达到 3-4x,左对齐。
|
||||
- **衬线显示标题**:Times New Roman 标题可能达到 3.5–5 倍,行间距紧凑但不重叠。
|
||||
- **数据数量**:约 4–6x;单位按数字分组; 0.8–1x 的解释性文字。
|
||||
- **信息句/属性**:约 0.9–1x。
|
||||
- **脚注/链接/页码**:约 0.55–0.75x;页码极其薄弱,脚注可读。
|
||||
- **强调方法**:更喜欢粗体、色块背景和链接颜色;不要使用轮廓文本、阴影文本、渐变文本或大块居中排版。
|
||||
|
||||
## 7. 图表语言图表保持简单,以数据卡、小表格和少量简化图形为主。
|
||||
- **类型边界**:适合小型柱形图/条形图、进度条、简单比较和数据标签卡;不适合复杂的仪表板、雷达图、3D 饼图或多轴财务图表。
|
||||
- **轴和网格**:网格线极其微弱,呈中性灰色;轴不再被强调——避免粗的黑色轴线。当可以直接标记值时,图例不是必需的。
|
||||
- **系列颜色**:当前章节主色+浅灰/浅辅色;单个图表不应超过 3-4 种颜色。
|
||||
- **数据标签**:关键值位于图形附近或卡片上;关键数据使用章节颜色或超大数字。
|
||||
- **基线/目标线**:使用带有短标注的细线 - 避免红色警报式的粗线。
|
||||
- **图例**:小,接近图表,带有简单的样本;不要构建大型独立图例区域。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
- **标题**:副标题级和粗体;背景为灰白色、浅灰色或浅色章色调。避免深色标题主导视觉效果。
|
||||
- **行/列结构**:浅灰色细线,以空白和细线分隔;行高仍然可读,而不是压缩成密集数据库的感觉。
|
||||
- **背景填充**:大面积的灰白色;关键单元可以用浅紫色、黄色、浅绿色或蓝色卡片化。
|
||||
- **数字对齐**:数字右对齐或按小数点/单位统一,文本左对齐;大量的卡可能会成为独立的卡。
|
||||
- **关键行/列**:使用小章节颜色标签、浅色填充或粗体;避免用高度饱和的颜色填充整行。
|
||||
- **斑马条纹**:不是一个强有力的规则;如果使用,只有极浅的灰色/灰白色差异。
|
||||
- **符号和评级**:可以使用小点、破折号、复选标记或短颜色条,但不得发展成复杂的图标系统。
|
||||
- **溢出控制**:宁愿分成多列或两页,也不要让文本接触边缘、脚注重叠或表格覆盖页码。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
- **胶囊导航**:顶部有小圆形标签;当前章节用章节颜色填充或突出显示,其他章节有白色/灰白色底色和细轮廓。文本非常短——它不能成为次要内容列表。
|
||||
- **章节色条**:顶部约页面高度的五分之一到三分之一,带有标题、描述和导航。请勿在同一页面上堆叠多个大色条。
|
||||
- **数据卡**:长方形或略呈圆形,填充有黄色、浅紫色、绿色、蓝色等;包含大量数字、简短说明和小标记。适合 1-2 个核心数 - 不适合堆积成九个方格。
|
||||
- **引号框**:浅紫色、灰白色或章节色块,包含引号、短句和姓名/肖像/签名;他们必须有一个来源。
|
||||
- **相框**:长方形裁剪的真实照片,往往占据右侧大片区域,可能会用色块拼接。照片没有厚边框、阴影或复杂的蒙版。
|
||||
- **链接按钮/源栏**:小的彩色圆角栏或带下划线的文本,靠近相关正文文本 - 从不浮动。
|
||||
- **分隔线**:细灰色线或短彩色线,用于列之间、用于强调标题以及表格边界;线条应该很轻,并且不能形成笼状网格。
|
||||
- **肖像和签名**:用于领导信息和引言页面;不得在普通数据页上过度使用。
|
||||
- **图标**:只有一些小标记/简单符号;它们不得扩展为大型彩色图标集合;它们必须支持标签,并且不能单独表达复杂的概念。
|
||||
|
||||
## 10. 质地和违禁物品整体感觉扁平、内敛、类似报告——排版、色块、照片和数据——不依赖视觉效果。
|
||||
|
||||
**禁止:**
|
||||
- 大面积渐变背景、发光、3D、拟物按钮、厚阴影、玻璃形态和复杂纹理。
|
||||
- 表情符号、卡通插图、无源装饰图标和社交媒体海报风格的大型居中标语。
|
||||
- 将大量正文直接压到全图像背景上,或使用低对比度浅灰色正文。
|
||||
- 多个高度饱和的章节颜色并列在同一页面上,争夺主视觉。
|
||||
|
||||
**谨慎使用:**
|
||||
- 圆角:导航胶囊、按钮、数据卡可能会略微呈圆角;大型容器不应全部变成圆形卡片。
|
||||
- 照片:应该是真实人物/场景的证据;没有与内容无关的上演库存镜头。
|
||||
- 彩色图标:仅作为极小的辅助标记,无法成为主要视觉系统。
|
||||
- 表格/图表:仅在真正需要进行数据比较时使用,保留细线和直接标签。
|
||||
|
||||
**允许在特殊页面上使用:**
|
||||
- 封面/封底可以使用方形瓷砖的彩色照片墙或大图像拼贴画。
|
||||
- 观点页面可以使用超大衬线标题、短彩色下划线和半页照片。
|
||||
- 领导留言页可以使用肖像、签名和长文本排版。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 是否是16:9的暖灰白色报告地面,没有错误地使用纯白色/深色/渐变背景?
|
||||
- 页面是否有清晰的左上角标题、正文阅读路径以及足够的外边距和栏间距?
|
||||
- 部分分隔页是否使用带有胶囊导航的单个章节颜色条,并且当前项目是否突出显示?
|
||||
- 文案风格是短标题+报告段落/平行小标题,而不是堆叠的营销口号?
|
||||
- 正文文本是否基于 Arial 1x,标题、编号和脚注级别相对清晰且不受绝对字体大小依赖性?
|
||||
- 单页原色是否控制为 1 章颜色 + 中性底色,并限制链接/数据强调?
|
||||
- 多栏体是否有碰边、重叠、截断、乱码、行距过紧、对比度低等现象?
|
||||
- 照片是否真实、相关且经过矩形裁剪,没有厚重的阴影或复杂的遮罩?
|
||||
- 数据卡是否仅突出显示几个关键数字,并且数字/单位/解释完整?
|
||||
- 图表是否是浅网格、弱轴、直接标记、没有 3D、多轴或太多系列颜色?
|
||||
- 表格是否细线且填充较少,文本左对齐/数字均匀对齐,没有过多填充?
|
||||
- 组件是否来自系统——胶囊导航、章节条、数据卡、报价框、相框、细线分隔线——而不是新添加的装饰?
|
||||
- 是否避免使用表情符号、复杂的插图、发光、渐变、厚阴影、大块居中正文文本和空内容占位符?
|
||||
- 封面、正文、章节、案例和结束页是否有所不同,但仍保持相同的报告框架?
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则切勿使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 没有均匀划分的构图:除非没有其他可用的布局,否则不要默认为三分之一、四分之一或二乘二矩阵。这包括三部分结构,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 897 KiB |
@@ -0,0 +1,147 @@
|
||||
#C007·2023年组织名称影响报告重点介绍风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适用于企业影响报告、ESG/可持续发展摘要以及技术产品和环境数据叙述,面向投资者、媒体、政策/行业观察者和内部管理层。信息密度中等至稍高,在“可读报告页面”和“沉浸式摄影页面”之间交替。核心视觉效果:近乎白色的背景,黑色/灰色的无衬线文本,极细的浅灰色线条,低饱和度的绿色点缀,真实的汽车/工厂/自然/人群摄影,极简的装饰,宽敞的空白。
|
||||
|
||||
基本原则:
|
||||
- **可信度高于装饰**:页面应该感觉像是一份正式的报告,而不是营销海报;要素必须服务于论证、数据定义和测量基础,或者真实场景的证据。
|
||||
- **空白过度填充**:当信息太多时,分页、使用列或使用表格 - 不要缩小字体大小或塞入组件。
|
||||
- **绿色仅用于积极/环境/数据强调**:它不得扩展为大的装饰背景颜色或无意义的突出显示。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
- **画布比例**:宽屏 16:9 横向。内容页面大多是近白色/白色背景;封面、章节过渡和结束页可以使用全出血深色摄影或黑色背景。
|
||||
- **边距系统**:所有四个边都有宽边距 - 内容永远不会触及边缘;标题、正文、图表和照片都有清晰的外部边界。照片可能接近页面宽度的一半,但必须保留喘息空间。
|
||||
- **标题区**:位于左上或左上中,使用黑色/深灰色的简短短语或完整的判断句;接下来是 1-2 段浅灰色的解释。标题区域不使用彩色条、粗体框架或大背景面板。
|
||||
- **正文区域**:承载照片、图表、指标组、产品关系图或多栏文本。常见结构:左侧文本/右侧图像、左侧图像/右侧文本、顶部标题/下方图表、中心关系图或水平度量卡。
|
||||
- **标题**:在最顶部,一个非常小的浅灰色报告名称/部分名称/辅助导航左对齐或居中 - 没有突出的导航栏。
|
||||
- **页脚和页码**:页码通常位于右上角或边缘,呈现极小且浅灰色;脚注/来源位于图表底部或附近。
|
||||
- **徽标**:品牌徽标不会在每个页面上以大徽标形式重复出现。
|
||||
- **封面/章节页**:全出血或大比例摄影,文本覆盖在左下/左侧。封面可以将大标题和年份分开;部分页面可以使用覆盖有白色文本的深色照片。
|
||||
- **分隔线**:仅在图表轴、表格、度量卡或文本列之间使用,使用极细的浅灰色线条。禁止使用粗线、彩色水平条和装饰性边框。
|
||||
- **水印/背景图形**:默认情况下,不使用抽象水印、纹理或几何背景;黑暗的气氛来自于摄影或纯黑色的背景。
|
||||
- **默认阅读路径**:左上角标题→潜台词/度量解释→右侧或下方证据区域→脚注来源。
|
||||
|
||||
## 3. 内容组织- **标题风格**:使用独立的结论句、动作句或论文句,例如“产品产生了一定的影响”或“一项行动减少了一定的足迹”。避免模糊的口号和文字堆叠。
|
||||
- **关键信息句子**:在标题下方,使用比标题浅的颜色对背景、测量基础或因果关系进行简短的报告式解释。
|
||||
- **正文组织**:使用短段落、2-3 个文本栏或少量项目符号点;较长的政策/解释性内容可以分成具有较大行距和列间隙的列。
|
||||
- **每页点数**:每页一个核心点,最多辅以一张照片、一张图表或一组指标。多个子点使用水平卡片、列或表格,而不是分散放置。
|
||||
- **项目符号样式**:谨慎使用传统的项目符号列表;喜欢短段落、小标题、公制卡和表格单元格;当必须使用子弹时,标志物应小、轻、克制。
|
||||
- **关键字强调**:使用大数字、暗/亮对比度、低饱和度绿色和空白。请勿在正文中使用霓虹灯突出显示、下划线或多色强调。
|
||||
- **数字/单位/时间范围**:关键数字可以放大并单独显示;单位直接跟在数字后面或显示为小标签。百分比、吨位、里程、年数等必须保留其定义和计量基准注释;时间表或年份应与数据图表一致。
|
||||
- **来源脚注**:数据页必须包含一个非常小的浅灰色脚注或来源注释,放置在图表底部或下方;它只是补充测量基础,并不承载主要叙述。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. Text-left/image-right 或 image-left/text-right 类型
|
||||
适用于产品场景、制造设施、能源设施以及涉及人员或地点的证据。文本侧包含标题、1-2 个解释段落、脚注或小状态点;图片一侧包含一张真实照片,约占页面视觉宽度的 40%–55%。图像是矩形或略呈圆形,裁剪干净。文字给出结论;照片提供了现场证据。不适合多组数据比较、流程复杂或正文较长。
|
||||
|
||||
### B. 大图像沉浸式
|
||||
适用于封面、章节页面、主题过渡、宣言式结尾和情绪页面。照片填满整个页面或大部分画布,文字覆盖在左下/左侧;必要时将照片调暗以确保白色文本仍然可读。可以使用更大的标题和年份/章节信息。不适合大量数字、表格或细粒度图表。
|
||||
|
||||
### C.标题+水平度量组类型
|
||||
用于气候影响、排放份额、累积结果和效率指标等摘要。将标题和简要说明放在顶部或左上角,下面水平排列 4-6 个指标;每个都包含一个大数字和一个小单元/解释,由极浅的背景或细线分隔。用薄荷绿突出显示关键数字,用深灰色或浅灰色突出显示其他数字。当度量定义或测量基础差异太大或解释性文本太长时不应使用。
|
||||
|
||||
### D. 图表参数类型
|
||||
对于单一定量参数,例如趋势变化、累积影响、避免量或效率下降。标题位于左上角或顶部,图表占据下半部分或右侧的大部分区域。使用浅灰色网格、极细的轴线、很少的系列颜色、直接标注;绿色趋势线/基线表达了核心结论。不要使用多色商业仪表板式图表;当系列超过 2-3 个时,拆分页面或简化。### E. 中心关系/产品替代图类型
|
||||
用于产品生态系统、替代关系和能源系统组成。围绕中心节点、小型产品图像或简化的对象构建,通过极细的浅灰色线条连接;文字标签很小,背景是白色的。依靠中心位置、空白和连接关系来强调——不要使用彩色图标。当节点过多、交叉复杂或流程步骤较多时不宜使用。
|
||||
|
||||
### F. 多列报告文本类型
|
||||
适用于政策解释、供应链、道德、劳动力、材料等面向阅读的内容。标题位于左上角,正文分为 2-3 列,列宽和列距保持平衡;可以在侧面或底部添加一张小照片。使用副标题或绿色数字来提取关键点——不要使用大的背景色块。不适合演示场景或快速扫描页面。
|
||||
|
||||
### G.表格/高密度比较型
|
||||
用于结构化比较,例如车辆型号、指标、区域或项目状态。标题位于顶部,表格居中或占据下方较大区域;用浅灰色线条和浅色背景进行组织,谨慎使用粗边框。仅突出显示关键列、摘要行或状态点。如果说明性文本超出了表格本身,请切换到多列文本页。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **主要背景白色/近白色**:#FAF9F7、#F8F8F8、#F5F6F6、#F1F2F2。用于大部分内容页面,占用面积最大。不得用彩色背景代替;品牌只能稍微调整白色的暖色/冷色。
|
||||
- **主要文本黑色/灰色**:#111111、#111215、#23272E、#262F35。用于标题、关键数字、轴标签和正文强调;标题接近黑色,正文可能是深灰色。不得用彩色标题替换。
|
||||
- **辅助文本灰色**:#64726D、#93A299、#ABB3B1、#BCC8C5。用于字幕、段落、脚注、弱标签、轴文本;一定不能轻到消失。
|
||||
- **分隔线/网格灰色**:#EDEFEE、#ECEDED、#D6DAD9、#C6C9C9。用于图表网格、表格线、卡片分隔线和浅色背景;对比度必须较低,以避免沉重的、类似桌子的感觉。
|
||||
- **环境强调绿色/薄荷绿**:#95BFA9、#BBE6D1、#65A889、#2E9B73。用于关键百分比、环境指标、趋势线、积极状态点和小标签。中小面积;不用作整页背景色或普通装饰。
|
||||
- **深色照片/黑色背景页面**:#060608、#0D1708、#121C25、#202611、#404720。用于夜景、森林、工厂、暗化照片、沉浸式页面和宣言页面;文本使用白色/浅灰色。
|
||||
- **自然照片颜色**:森林绿、道路黑、天蓝灰色、工厂灰和车辆白/黑/红来自真实摄影,不会提升为成分颜色。照片颜色不得任意提取为图表系列颜色。
|
||||
- **图表系列颜色边界**:单页主色调保持在黑/灰+绿色范围内;对于多个系列,请使用不同的灰色亮度级别加上一种绿色强调色。避免使用多颜色图例,例如红色/橙色/紫色/蓝色,除非原始数据状态确实需要区分。
|
||||
- **积极/消极状态**:积极/改善使用绿色;负面/风险默认为深灰色文本或注释——谨慎引入红色。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
使用现代的无衬线字体,给人干净、科技、报告般的感觉,与组织或工业技术品牌的视觉基调一致。不得使用衬线字体、手写字体、卡通字体或装饰字体。- **正文 = 1x**:段落说明和表格正文,深灰色或中灰色,行距相对宽松。
|
||||
- **标题 = 2.5–4x**:页面的要点,黑色/深灰色,中等至轻微粗体;封面/章节页可能会更大。
|
||||
- **关键信息/副标题 = 1.1–1.4x**:位于标题下方,颜色比标题浅。
|
||||
- **副标题/组标题 = 1.1–1.6x**:用在表格、图表标题和列引言上方,权重稍强。
|
||||
- **关键数字 = 3–6x**:与单位和小标签配对;不需要额外的粗体框架。
|
||||
- **图表标签/表格文本 = 0.8–1x**:清晰但弱于正文标题;图表轴标签可能更轻。
|
||||
- **注释/脚注/页码 = 0.5–0.7x**:极小,浅灰色,靠近边缘。
|
||||
- **文本布局**:文本较多或数字的页面大多左对齐;避免大的中心块。标题换行符遵循语义划分。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
使用报告式的简洁折线图、条形图/小指标图、份额指标和少量关系图 - 无业务仪表板。
|
||||
|
||||
- **图表类型**:线趋势、简单的水平/垂直条、百分比度量卡、单个基线或比较线。关系图使用小产品图像+细连接线。
|
||||
- **轴**:极细的轴线,浅灰色或深灰色,不透明度低;很少的刻度线,避免密集的鳞片。
|
||||
- **网格线**:极浅的细灰色线,仅用于帮助读取值,不形成网格背景。
|
||||
- **标签**:更喜欢直接标记关键值或在数据点附近放置小标签,减少图例;使用灰色、深灰色和绿色来强调。
|
||||
- **系列颜色**:核心系列使用薄荷/绿线,对比系列使用浅灰色或深灰色。不要在同一图表中使用大量高饱和度的颜色。
|
||||
- **关键数据**:通过绿线、放大的数字、局部粗体或旁注进行强调。不要使用爆炸形状、发光或粗箭头。
|
||||
- **预测/目标/基线**:使用细虚线或浅灰色线,并在线条附近添加小的说明文字。不要添加梯度预测带。
|
||||
- **图表边界**:保留充足的空白和清晰的标题。当需要长图例、多层过滤器或复杂的交互解释时,这种风格不适合。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
- **标题**:使用浅灰色文本或稍重的字体,背景接近白色/极浅灰色。标题不使用带有反白文本的深色背景。
|
||||
- **行/列结构**:用浅灰色细线分隔,削弱外边框,并在列之间留出充足的空白以避免拥挤。
|
||||
- **行高**:比较宽松;即使是高密度的页面也不应该被压缩成密集的财务报表式网格。
|
||||
- **基色**:极浅灰色的块可以区分标题、摘要或卡片区域;如果使用斑马条纹,则必须非常微妙。
|
||||
- **关键行/列**:用绿色数字、小状态点、浅色背景或粗体标记。避免用浓烈的颜色填充整行。
|
||||
- **数字和文本对齐**:文本左对齐;数字按列右对齐或按小数位对齐;百分比、吨位、数量等的单位、定义和计量基础是一致的。
|
||||
- **符号标记**:可以使用小点、短划线或极简状态符号;不要使用色彩丰富、复杂的图标。
|
||||
- **页面角色**:表格上方必须有清晰的观点标题,下方可能有脚注解释测量基础。
|
||||
|
||||
## 9. 组件和图形元素- **标题栏/标题微导航**:顶部边缘的极小的浅灰色报告名称、部分名称或页码,仅用于定向。
|
||||
- **公制卡**:由大数字、小标签、浅色背景或薄分隔线组成;适用于3-6个并行指标;绿色仅用于关键数字或正值。
|
||||
- **小状态点/徽章**:小绿点或简化标记,与脚注、解释或积极状态配对;尺寸小——一定不能发展成一个大的图标系统。
|
||||
- **相框**:真正的摄影使用矩形或略圆形的框架,剪裁干净;圆角应该小而现代。照片没有添加粗边框或阴影。
|
||||
- **提示/说明块**:与浅灰色背景或空白分组,通过使用浅灰色来减少文本的视觉重量。不得使用彩色警告框或气泡对话框。
|
||||
- **分隔线**:用于表格、图表、列分隔和关系连接的极细浅灰色线。所有线条都保持轻量级——没有粗箭头或粗笔画。
|
||||
- **流程/关系箭头**:使用细线、淡箭头或节点连接来表达替代关系或流程;优先减少节点和线路交叉。
|
||||
- **产品图像/小对象**:使用真实的产品渲染或裁剪的照片对象作为节点,优先于通用图标。彩色插图风格的图标不应取代它们。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
总体而言,保持平面、克制、类似报告,并由真实摄影驱动,通过布局和照片创建页面变化。
|
||||
|
||||
**禁止:**
|
||||
- 大渐变背景、发光、3D 装饰、玻璃形态、复杂纹理、霓虹灯线。
|
||||
- 卡通插图、表情符号、社交媒体贴纸、夸张的彩色图标、手绘箭头。
|
||||
- 厚重的边框、强烈的阴影、厚重的彩色标题栏、全页品牌色背景。
|
||||
- 大量居中的副本、没有来源的大量数字、没有明确定义或测量基础的修饰数据。
|
||||
- 多色图例堆叠、仪表板式复杂图表、覆盖在照片明亮区域上的低对比度文本。
|
||||
|
||||
**谨慎使用:**
|
||||
- 圆角:仅适用于相框或灯卡,半径较小——不得变得卡通化。
|
||||
- 阴影:源文件显示没有稳定的阴影系统;默认情况下不使用;如果需要图像分层,请保持极其微妙。
|
||||
- 彩色车辆/照片颜色:可能来自真实摄影,但不得扩展到页面的颜色系统。
|
||||
- 深色页面:仅用于封面、章节、结束语或强烈的情感过渡 - 不应广泛用于内容数据页面。
|
||||
|
||||
**可在特殊页面上使用:**
|
||||
- 全出血照片背景,覆盖白色文本,用于封面/章节/结束页。
|
||||
- 黑色背景宣言页,用于最终摘要或强烈的观点陈述。
|
||||
- 高密度多栏文本页面,适合报告阅读场景,但必须保持清晰的栏间距和脚注。
|
||||
|
||||
## 11. 一代清单- 是 16:9 横向,内容页面默认为接近白色的背景和宽边距吗?
|
||||
- 标题是否是一个清晰的观点句子,位于左上/左阅读起点?
|
||||
- 每一页是否仅包含一个核心点,证据区域仅选择照片、图表、指标组或表格之一作为主要元素?
|
||||
- 正文是否以短段落/列的形式组织,避免大的居中块和密集的列表?
|
||||
- 颜色是否保持在黑/灰/白+低饱和度绿色范围内,而不引入毫无根据的多色系统?
|
||||
- 绿色是否仅用于强调环境、积极或关键数据,并有限制区域?
|
||||
- 图表是否使用细轴线、光网格、少量系列和直接标签,以避免仪表板的感觉?
|
||||
- 表格是否使用细线、浅色背景和宽大的行高,重点仅限于绿色数字或浅色背景标记?
|
||||
- 照片是否真实、裁剪清晰、没有粗边框或阴影、文本覆盖的地方有足够的对比度吗?
|
||||
- 页眉、页码和脚注是否小而轻,不会成为突出的装饰?
|
||||
- 是否避免使用渐变、发光、3D、复杂的插图、表情符号、强烈的阴影和粗边框?
|
||||
- 是否检查过溢出、截断、乱码、重叠、低对比度、遮挡、内容空、比例错误、机械模板重复等情况?
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线条、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 2.1 MiB |
@@ -0,0 +1,176 @@
|
||||
# 组织名称·业务报告风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
一份旨在咨询公司雇主品牌、人才吸引、企业文化和组织能力信息传递的景观 PPT。受众是外部候选人、员工或一般商业人群;它通过少量的事实、奖项、地图、照片和强有力的口号传达了一个可信的、全球性的、以人为本的品牌形象。
|
||||
|
||||
- **每页一篇论文,证据为论文服务**:每一页仅设置一个明确的标题或结论;照片、地图、奖项、标志、图表或三联画组件都围绕着这个结论——不要让多个点相互竞争。
|
||||
- **红色用于品牌基调设置和结论着陆点**:它可以用于封面、过渡、标题带、底部结论栏或图标核心,而不会分裂成许多小装饰点。
|
||||
- **可读性优于装饰**:黑白/灰度视觉效果、白色背景信息区域和 Verdana 粗体大标题形成高对比度;照片、手写文本、徽章和图表不得压倒文本结论。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
- **画布比例**:横向宽屏呈现比例;以全出血风景构图为主,白底内容页、红底标语页、黑白照片页和混合拼贴页之间交替。
|
||||
- **边距系统**:红条、照片和封面对角切割色块可能会接近画布边缘;正文、徽标墙、地图和徽章组保持清晰的外边距。底部的红色条通常跨越大部分宽度,包含结论。
|
||||
- **标题区域**:
|
||||
- 顶部红色水平栏,带有白色、全部大写、粗体标题,用于部分/主题。
|
||||
- 白色背景左上角的大红色标题,用于意见或愿景页面。
|
||||
- 特殊标语页面使用居中或底部的大白色文本,而不依赖于传统的标题。
|
||||
- **身体区域**:使用黑白照片、地图、奖章、徽标墙、圆形三联画、简单的折线/面积图或大量数字;单个页面仅保留一个主要视觉逻辑。
|
||||
- **页眉/页脚**:少数咨询内容页面可能会在底部边缘放置极小的保密声明、文档说明或页脚信息;通信页面通常没有复杂的标题导航。
|
||||
- **页码**:没有明确的页码系统;新页面可能会省略它们,或者仅将它们放在较弱的脚注级别。
|
||||
- **徽标**:品牌徽标用于封面和闭页等身份页面。结束页是红色背景,居中的白色徽标和小手写风格的标语;徽标不会在每页上重复和放大。
|
||||
- **导航/水印**:没有稳定的目录导航、章节进度条或水印系统 - 不应强制添加任何内容。
|
||||
- **分隔线和背景图形**:使用实心红色矩形、对角切割红色块、黑色水平带和圆形裁剪;不要使用复杂的线框背景、渐变纹理或抽象装饰网络。
|
||||
- **默认阅读路径**:首先阅读红色标题带或大标语,然后查看主要视觉证据,然后阅读小注释/脚注。在图像左/文本右页面上,首先查看照片,然后阅读右侧的项目符号和粗体关键字。
|
||||
|
||||
## 3. 内容组织- **标题风格**:主要是简洁、面向动作的动词或名词短语,通常在适当的时候全部大写。一般为1行,最多2行;避免长句子、问答式标题和堆叠的多层字幕。
|
||||
- **关键信息句子**:手写风格的文本可能带有简短的标签、引用风格的口号或小组名称,例如“顶尖商业人才的最佳职业”或“结果故事”,而不是正式的长正文。
|
||||
- **正文组织**:左对齐项目符号,每页 3-5 项,每项跨 1-3 行;关键字使用 Verdana-Bold 进行局部粗体显示,而不依赖于彩色突出显示。
|
||||
- **分组逻辑**:三向分组用于平行证据、奖项或结果类别;双向分组用于照片+文字、红块+照片或标题+证明;标志墙是按视觉重量排列的,而不是严格的网格。
|
||||
- **每页点数**:默认1个要点+1个证据类别;复杂的页面可能有 2-4 个证据点,但它们必须全部围绕相同的结论。不要同时放置愿景、指标、流程、案例和多个图表。
|
||||
- **数字和单位**:关键数字采用超大粗体文字,与结论短语组合成“数量+对象+范围”;可以放置在底部红色栏或页面中心。
|
||||
- **来源脚注**:保密声明、来源和注释放置在图表底部或附近,使用极小的文本,仅解释来源和限制,而不会扩展到业务叙述。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 左图像/右文本简介页面
|
||||
|
||||
了解机构事实、能力范围或背景信息。左侧放置一张黑白或低饱和度照片;右侧为白色背景,包含手写风格的小标题和项目符号列表,正文为黑色,关键词加粗。适合中等量的文字;不适合复杂的表格、多个图表或太多的小图标。
|
||||
|
||||
### B. 地图+底部红色结论栏
|
||||
|
||||
适用于全球覆盖、办事处或区域分布。正文是浅灰色点阵/线画地图,位置用红点和细线标记,城市标签用黑色/灰色小文字表示;底部的红色条带有大量白色文本结论。不适合精确的地理分析或密集的路线解释。
|
||||
|
||||
### C. 红底大标语页
|
||||
|
||||
用于章节转换、主题重点或价值主张。大型纯红色背景,大型白色 Verdana-Bold 文本居中或偏心,可能与大符号或短语配对。仅表达一篇论文;项目符号、长段落或复杂的图表不得分层。
|
||||
|
||||
### D.白底意见+红块/照片拼贴页
|
||||
|
||||
人才愿景、文化表述和情感表达。顶部白底红色大标题;下面,红色矩形文本块和黑白肖像照片并排放置。红色块带有手写风格的白色文本或短语;不适合细粒度的数据解释。
|
||||
|
||||
### E. 奖章/标志证据墙页
|
||||
|
||||
寻求外部认可、合作伙伴或认可。主要是白色背景,顶部或底部有一个红色条表明主题;徽章/徽标排列成 2-3 行,尺寸根据品牌视觉重量进行微调。文字解释很少,保留空白。不适合冗长的解释或强制徽标大小相同,导致拥挤。
|
||||
|
||||
### F.三圈平行证据页
|
||||
|
||||
对于三类结果、三种挑战或三种类型的认可。三个圆形视觉对象水平均匀划分,顶部有手写式标签;圆圈可能包含黑白照片、红色图形图标或灰度肖像。最多可容纳三件物品;超过三个应切换到列表或分组墙。
|
||||
|
||||
### G.图表+水平强调带页面对于少量的趋势数据。顶部有简短的标题式解释,以简洁的折线/面积图作为正文,覆盖黑色水平带或手写式白色文字结论。图表作为证据,波段作为解释;当数据系列过多或需要精确读数时请勿使用。
|
||||
|
||||
### H.黑白照片标语页
|
||||
|
||||
用于文化陈述或情感终结。照片填充了主体或大部分框架,大的粗体白色全大写文本放置在黑暗区域上,可能与底部红色条配对。必须保证照片足够暗,文字对比度足够;白色文本不得直接位于明亮区域上方。
|
||||
|
||||
### 一、文字+底部红色结论页
|
||||
|
||||
用于支持系统、原则列表或行动承诺。顶部或左侧有红色粗体标题,旁边有项目符号;底部的红条承载着最终的承诺。用于将支持点汇聚成一个口号;不适合列出超过 5-6 个子项目。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **背景白色:#FFFFFF**
|
||||
- 用作内容页面、证据墙、地图页面、徽章页面、图表页面和大多数信息页面的主要背景。
|
||||
- 不要添加暖色纸张纹理、浅色渐变或复杂的背景图案;切不可随意更换品牌浅色。
|
||||
|
||||
- **品牌原色红色:#CC0001 / #C00000 / #CE2222**
|
||||
- 用于封面覆盖、全页红色背景、标题栏、底部结论栏、关键图形和红色文本标题。
|
||||
- 可用作小强调或整个页面;过渡/封底可能会以它为主,而内容页面通常会在 10%–30% 的区域中使用它。
|
||||
- 不与其他高饱和度的原色竞争;不要用于长正文。
|
||||
- 迁移品牌时,可能会被新品牌的单一基色取代,但必须保持高饱和度、强对比度和一致的使用。
|
||||
|
||||
- **黑色主要文本:#111111 / #1B1B1B / #292929**
|
||||
- 用于照片页面上的正文、项目符号、标签、图表文本和深色文本。
|
||||
- 避免在正文中使用浅灰色;黑色文本仅放置在白色或浅灰色背景上;不建议使用彩色正文文本。
|
||||
|
||||
- **中性灰色:#4B4B4B / #747474 / #B6B5B5 / #D7D7D7**
|
||||
- 用于黑白照片、地图背景纹理、图表坐标、城市标签和分隔线辅助元素。
|
||||
- 可在照片和地图页面上大面积使用;灰度应该只是起辅助作用——它不应该使整个页面对比度低,也不应该变成彩色插图背景。
|
||||
|
||||
- **黑色口音带:#222222 / #2A2A2A**
|
||||
- 用于图表页面上的水平解释带和一些照片文本叠加层,带有白色手写风格/结论文本。
|
||||
- 不要将其用作与红条并列的同等级别的标题,以避免竞争焦点。
|
||||
|
||||
- **证据绿色:#53951A / #306937**
|
||||
- 仅用作奖章的真正来源颜色——它是外部认证的原始颜色。
|
||||
- 不是全局强调色;不得扩展为图表的主要颜色或标题颜色。
|
||||
|
||||
- **图表/状态颜色边界**:单个页面的主色调通常只有红色加黑/白/灰;徽章/徽标可以保留其原始颜色,但不得进一步扩展。正面/负面状态更喜欢文本、箭头和红色强调,而不是多色交通灯系统。
|
||||
|
||||
## 6. 字体和文本层次结构- **字体字符**:主要是 Verdana 和 Verdana-Bold;少量的手写风格字体用于情感标签,而不是作为正文字体。
|
||||
- **标题层次结构**:主要标题使用 Verdana-Bold,全部大写,大约是正文大小的 2.5–4 倍;红色背景使用白色文字,白色背景通常使用红色文字;行距很紧。
|
||||
- **标语/大量层次结构**:封面、过渡、地图结论和照片标语可能达到正文大小的 3-5 倍,并且必须简短且粗体。
|
||||
- **关键信息/副标题**:大约是正文大小的 1.2–1.8 倍,可以是常规或粗体,不得压倒主标题。
|
||||
- **正文项目符号**:正文 = 1x,主要是 Verdana 常规字体,关键短语以相同大小的 Verdana-Bold 粗体显示;项目符号标记很简单,压痕很浅。
|
||||
- **副标题/组标签**:手写风格字体或 Verdana-Bold,大约是正文大小的 0.9–1.3 倍;手写式标签必须简短。
|
||||
- **表格/图表标签**:大约是正文大小的 0.55–0.8 倍,黑色/灰色,不得与主标题竞争注意力。
|
||||
- **注释、脚注、保密声明**:约正文大小的0.25-0.35倍,置于底部,灰黑色,视觉重量极低。
|
||||
- **页码**:如果存在,则与脚注处于同一级别,不构成视觉元素。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
- **图表类型**:使用单一趋势图,或叠加折线图/面积图,来证明“结果随时间变化”;不要构建复杂的多图表仪表板。
|
||||
- **轴和网格线**:轴很细,灰黑色;网格线变弱或极少;轴标签很小。
|
||||
- **系列颜色**:数据主体使用红色区域/线条,必要时搭配黑色/灰色基线;不要引入多个系列颜色。
|
||||
- **关键数据**:用红色数据区域、峰值标记或水平黑色解释带进行强调;避免出现大量标注气泡。
|
||||
- **图例**:尽可能省略或保持极少;当只有一两个数据类别时,直接在图表中进行标记。
|
||||
- **预测/目标/基线**:没有稳定的预测线系统;如果需要,请使用细灰色或黑色线 - 不要使用华丽的虚线。
|
||||
- **注释语言**:手写字体或白字横带可以表达简短的结论;图表仅作为证据,而不是完整的叙述。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
没有传统的大表系统;高密度信息主要通过项目符号列表、标志墙、城市标记地图和徽章收藏来承载。
|
||||
|
||||
- **表格使用边界**:当必须使用表格时,保留白色背景、黑色/灰色文本和细灰色分隔线;红色仅用于标题或摘要结论,没有粗边框或多色背景。
|
||||
- **标题**:可以使用红色背景和白色文本,或黑色/灰色粗体文本;保持紧凑,避免装饰性渐变。
|
||||
- **行和列**:行高优先考虑可读性,列数不宜过多;文本左对齐,数字右对齐或按小数点对齐。
|
||||
- **分隔线**:使用浅灰色细线;不要使用厚重的黑色网格或许多垂直线。
|
||||
- **基色**:默认白色背景;极浅的灰色可以区分群体;不建议使用过于强烈的斑马条纹。
|
||||
- **关键行/列**:使用红色条、红色标题文本或粗体突出显示摘要 - 不要用红色填充表格的许多部分。
|
||||
- **符号/评级点**:没有稳定的评级系统;如果需要,限制为黑色、灰色和红色,并搭配文字说明。
|
||||
- **页面作用**:表格只能作为证据模块——它不应该取代一页一篇论文的结构。
|
||||
|
||||
## 9. 组件和图形元素- **红色标题带**:一个水平矩形,带有白色、全大写、粗体标题,放置在顶部或底部;用于陈述主题或结论,不用于普通的章节装饰。
|
||||
- **底部红色结论栏**:用于地图、奖励和支持系统页面,持有大量或一个承诺;作为阅读终点,保留为简短、高对比度的短语。
|
||||
- **对角切割红色盖块**:覆盖左侧的红色块,沿对角边缘切入照片;适合封面/身份页,而不是在每个页面上重复。
|
||||
- **黑白相框**:灰度肖像或场景照片,可以是全出血矩形、半页或圆形裁剪,服务于红黑白品牌对比。
|
||||
- **圆形裁剪组件**:用于三向平行证据,可以容纳照片、头像或红色图形符号;间距均匀,没有添加粗轮廓。
|
||||
- **手写式标签**:用于群组名称、情感短语和图表水平带标题;仅用于简短短语——不能代替正式标题和正文。
|
||||
- **徽章/徽标墙**:保留外部徽标的原始形式,排列在红色主题栏周围;标志尺寸根据视觉重量进行调整。
|
||||
- **简单的图形图标**:包括红色箭头、网格和扁平、简化的符号,例如人物/地球仪;图标必须大、少且概念清晰;避免彩色图标集。
|
||||
- **地图标注**:灰图底+红点+细线+城市标签;不适合复杂的地理数据编码。
|
||||
- **分隔线和叠加**:使用黑色水平带、红色矩形和照片的深色区域;不要使用阴影卡或玻璃形态。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
保持平面、高对比度和咨询风格的克制;装饰仅来自色块、照片裁剪、圆形构图和字体层次结构。
|
||||
|
||||
- **禁止**:
|
||||
- 大型彩色插图、表情符号、3D 图形、发光、霓虹灯、复杂纹理、玻璃形态、拟物化按钮。
|
||||
- 多色图标集、彩虹式图表、精美的渐变背景。
|
||||
- 大的居中文本块、填充红色背景的长段落、低对比度的灰色正文。
|
||||
- 每个页面上重复出现的大徽标、复杂的导航栏、社交媒体卡片式贴纸装饰。
|
||||
|
||||
- **谨慎使用**:
|
||||
- 阴影:源文件几乎不依赖阴影;除了外部徽章已经固有的效果之外,不要主动添加它们。
|
||||
- 圆角:可以使用圆形裁剪,但圆角卡角不是主要样式。
|
||||
- 彩色标志/徽章:仅以其原始形式保留作为外部证据;未扩展到页面的配色方案中。
|
||||
- 手写式字体:仅用于简短标签和情感标语;过度使用会削弱咨询感。
|
||||
- 大面积照片:必须是黑白或低饱和度,保证文字可读性。
|
||||
|
||||
- **可在特殊页面上使用**:
|
||||
- 全版红色背景:用于过渡、封底和强烈的口号,不用于承载信息密集的正文。
|
||||
- 全出血黑白照片:用于文化陈述或情感终结,搭配大白色文本或红色结论栏。
|
||||
- 对角切割的红色盖块:用于在开口处建立身份;不应成为所有内容页面的模板。
|
||||
|
||||
## 11. 一代清单- 骨架:是横向宽屏吗?是否保留白色背景/红条/黑白照片结构;是否没有强制目录导航或水印。
|
||||
- 副本:每页是否有一篇论文;标题是否简短、直接且倾向于全部大写;正文是项目符号,关键字是粗体而不是随机颜色。
|
||||
- 层次结构:主标题、口号/编号、正文、标签、脚注是否形成清晰的相对比例;是避免使用小而难以阅读的文本的关键信息。
|
||||
- 颜色:红色+黑色/白色/灰色为主调色板;外部标志/徽章颜色是否仅限于证据区域;多种原色之间不存在竞争吗?
|
||||
- 布局:是根据内容选择的真实布局——图左/文字右、地图+结论栏、红底标语、三圈平行、标志墙、图表+条带等;避免混合多个模板。
|
||||
- 图表:是否简洁、系列少、网格弱、红色强调;促销页面避免成为复杂的仪表板。
|
||||
- 表格:如果使用表格,是否为白色背景,带有细灰色线,红色仅突出显示标题/摘要;没有厚重的网格或多色背景吗?
|
||||
- 组成部分:红色标题带、底部结论栏、圆形裁剪、手写标签和黑白照片是否具有信息功能,而不是堆积起来作为装饰。
|
||||
- 禁止物品:是否没有表情符号、3D、发光、复杂渐变、彩色图标集、玻璃形态或大型居中副本。
|
||||
- 质量:检查文本溢出、截断、乱码、重叠、低对比度、照片遮挡文本、空占位符、拉伸比例、扭曲徽标以及模板重复造成的单调节奏。
|
||||
|
After Width: | Height: | Size: 298 KiB |
@@ -0,0 +1,123 @@
|
||||
#文化拼贴·文化拼贴风格设计系统
|
||||
|
||||
> 预期主页标签:促销
|
||||
> 视觉隐喻:当代文化海报+触觉社论拼贴
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适用于文化节庆、城市活动、品牌合作、展会招募、社区推广、合作伙伴邀请等。这些页面感觉就像一系列可以不断翻阅的当代文化海报:大胆的排版、裁剪的图像、纸片色块、胶印编号和手工制作的纹理共同构建了气氛,同时仍然可以快速找到信息。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. 每个页面首先营造出清晰的感觉,然后让日期、地点、节目和行动自然地就位。
|
||||
2. 拼贴画必须围绕主题、路线或节奏进行组织——不能是一堆随机的贴纸。
|
||||
3、字体、色块、图像比例必须形成清晰的层次;关键事实不能隐藏在艺术效果中。
|
||||
4、单个页面最多使用一种原色和一种对比色——避免将“青春”等同于全彩。
|
||||
5. 当事件是虚构概念时,仅使用原始抽象图像、许可资产或诚实的占位符 - 不要盗用现有的品牌视觉效果。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
16:9 风景。元素可能已控制出血和偏移,但所有关键信息必须保留在安全区域内。背景在乳白色、墨黑色和单一高饱和度颜色之间切换。
|
||||
|
||||
页面不固定传统的标题栏。标题可以垂直、跨栏或靠近主图像,但每一页仍然需要一个清晰的第一阅读点。日期、页码和路线编号作为稳定的导航,固定在边缘或角落。
|
||||
|
||||
封面就像主海报一样:活动名称占据画面的 35%–55%,搭配一张原创主视觉图和一张具体邀请函。身体在节目拼贴、路线海报、时间表条、票务信息和合作伙伴动作之间形成快慢节奏。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题使用观众可以大声说出的邀请或声明,例如“重新聆听这座城市的七个夜晚”。字幕添加日期、地点或参与方式。
|
||||
|
||||
每页最多包含一个主要叙述和 3-5 个基本事实。使用短句、日期、动词和直接标签——不要使用长的品牌宣言。
|
||||
|
||||
内容的组织方式是“被吸引——了解体验——选择路线——计划参与——检查参与要求或资格——立即行动”。组织者角度的制作说明、促销策略和设计评论不得出现在面向观众的页面上。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 海报主页面
|
||||
|
||||
活动名称、日期和一句邀请句构成了大字体,主视觉占据了一半以上。信息稀疏而清晰——不要在封面上列出每个项目和合作伙伴。
|
||||
|
||||
### B. 程序拼贴页面
|
||||
|
||||
形成一组 3-5 个不同比例的图像或色块,并将节目计数和类别以大数字形式嵌入到构图中。每个类别仅保留其名称、计数和一个代表性操作。
|
||||
|
||||
### C. 主题路线页面
|
||||
|
||||
将3条主题路线呈现为3条不同方向的视觉轨迹,每一条都有一个体验描述、主要节目以及适合的受众。三个路线不必是等宽的卡片,但它们必须具有可比性。
|
||||
|
||||
### D. 城市时间表页面
|
||||
|
||||
使用水平的 7 天节奏带或四区域地图来组织日期和场地。通过放大字体大小或使用裁剪色块来突出显示关键会议 - 不要使用密集的日历表。
|
||||
|
||||
### E. 参与信息页面
|
||||
|
||||
门票价格、免费入场比例、容量以及如何登记都围绕一张主图排列。数字必须清晰——旋转、纹理或遮挡不得牺牲其可读性。
|
||||
|
||||
### F. 合作伙伴和行动页面左侧说明合作伙伴可以参加哪些活动;右侧给出了促销资源、截止日期和明确的联系行动。结尾必须是具体的动词,例如“注册/提交/联系/参加”——没有含糊的感谢语。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- 奶油色纸#F3E8D4:浅色主背景。
|
||||
- 墨水黑色 #171717:标题、正文和深色页面。
|
||||
- 橙色海报#F05A38:主要邀请函、日期和能量焦点。
|
||||
- 群青#2557D6:路线、夜间内容和对比信息。
|
||||
- 酸性石灰黄#D9F04A:极少量的高光、贴纸和操作提示。
|
||||
- 粉色雾#E8A7B3:辅助纸片和柔和的背景。
|
||||
- 纸灰色#B8B0A4:标题、页码和纹理。
|
||||
|
||||
页面以奶油色纸/黑色为底色,仅选择橙色或群青色作为主色;酸性石灰黄占页面面积不足 5%。彩虹渐变色、紫粉色霓虹色以及多种均匀分布的高饱和度颜色都是被禁止的。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
中文将粗体 sans 与中性 sans 配对;英语可以使用紧凑的 grotesk sans-serif;必要时,一个衬线字体可以作为非常短的文化脚注。最多三个字体角色。
|
||||
|
||||
- 活动名称:6–9x 正文;可以跨行,但不能分割主词。
|
||||
- 页面标题:2.5–4x 正文。
|
||||
- 日期和关键数字:3–6x 正文。
|
||||
- 程序标签:1–1.3x 正文。
|
||||
- 描述和票务:1x;必须保持舒适的可读性。
|
||||
- 页码和脚注:0.6–0.75x。
|
||||
|
||||
少量文本可以旋转 90 度作为导航,但正文、价格、日期和操作信息绝不能旋转。不要使用手写风格的字体来承载关键信息。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
促销页面默认不使用商业图表。定量关系优选通过大数字、比例条、程序矩阵、时间节奏和区域分布来表达。
|
||||
|
||||
当需要比较时,使用直接标记的单系列条形图、堆叠条形图或气泡图,没有多余的轴。数据图形应融入海报布局,但值必须保持精确。
|
||||
|
||||
不要使用 3D 饼图、仪表板、复杂的雷达图或不包含任何信息的波形装饰。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
时间表和合作伙伴信息使用编辑风格的列表:宽大的行间距、清晰的日期、地点和项目名称 - 没有 Excel 风格的完整边框。
|
||||
|
||||
关键会议可以用橙色海报块或粗黑色下划线来强调;其他项目保持黑白。超过 10 个条目的完整时间表不应缩小到塞满一页 - 而是显示可选择的主线程和注册条目。
|
||||
|
||||
门票价格和容量必须以大字号的正常方向显示。合作伙伴的利益并未纳入定价卡墙。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
稳定的组件包括裁剪的相框、撕边的纸片、套印不准、路线箭头、日期戳、超大数字、短下划线和小星芒。
|
||||
|
||||
每页最多使用两种纹理技术。撕裂的边缘、纹理和套准不准只是轻微的触觉触摸,不得降低文本或照片的清晰度。
|
||||
|
||||
主要视觉效果可能包括原创抽象摄影、物体特写、纸雕或几何结构。如果有人出现,他们必须来自可用的资产,而不是捏造的身份、引言或故事。
|
||||
|
||||
## 10. 材质和违禁物品
|
||||
|
||||
整体应该感觉像是来自一个独立文化机构的完整视觉形象:有触觉、有节奏、有明确的邀请。反模板的感觉来自构图和规模,而不是故意的混乱。禁止:随机贴纸包、整页撕纸、堆叠复古滤镜、紫蓝色霓虹灯、表情符号阵列、社交媒体 UI 模型、圆角卡片墙、不相关的潮流人物、被盗的品牌海报、遮挡关键信息、无法参与的心情。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 封面是否在 3 秒内传达了活动名称、日期和诉求?
|
||||
- 这六页是否形成了从吸引到实际参与的连续路径?
|
||||
- 拼贴画中的每个图像、色块和数字是否都服务于主题或导航?
|
||||
- 日期、地点、价格、容量和行动是否完整且可读?
|
||||
- 每页是否都保留单一原色,而不会变成彩虹海报?
|
||||
- 是否使用原创/可用的视觉效果,而不盗用现有品牌或编造人们的故事?
|
||||
- 是否避免使用卡片墙、社交用户界面、随机贴纸和模糊的品牌宣言?
|
||||
- 是否检查了出血安全、文本遮挡、旋转误用、重叠、裁剪和乱码文本?
|
||||
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 没有均匀划分的构图:除非没有其他可用的布局,否则不要默认为三分之一、四分之一或二乘二矩阵。这包括三部分结论,例如三向分割加标题加结论
|
||||
|
After Width: | Height: | Size: 2.1 MiB |
@@ -0,0 +1,151 @@
|
||||
# 组织名称 趋势报告 2025 风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
风景杂志式的PPT/PDF设计系统,用于创意产业趋势报告、奖项洞察、案例研究和年度回顾,针对视觉敏感、能接受高信息密度的读者——设计师、广告创意、品牌所有者、机构经理。它以“编辑杂志+奖项档案+趋势评论”的方式组织正文、案例图片、引用、统计数据和专题组,通过强烈的色块、大胆的标题、栏目布局和硬边卡片建立秩序。
|
||||
|
||||
富兰克林哥特式无衬线字体构成了印刷的核心;黑色、灰白色和品牌黄色构成了身份基础,并结合了粗粒/半色调图像、硬边色块、杂志风格的栏目和小型导航标签。黑色和灰白色背景交替;黄色作为品牌锚;大标题使用超重无衬线字体,可能会占据半页;正文被分成窄栏、卡片或引用块;图像用例截图、工作图像、现场照片或颗粒图像;页眉和页脚包含报告名称、部分标签、页码和一个小的黄色身份标记。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. **先建立对比强烈的页面结构,然后填写内容。** 黑色/灰白色/黄色/主题色块进行分区;细线和阴影不是主要的结构手段。
|
||||
2. **允许高密度;无锚的长文本则不然。** 每一页至少包含一个扫描入口点:标题标签、粗体信息句子、卡片边界、图像或引言。
|
||||
3. **品牌标识优先于装饰变化。** 保持小黄色标识、富兰克林哥特式字符、硬边矩形和颗粒图像一致;因布局和主题颜色而异——不添加新效果。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布是横向宽屏比例,接近 16:9。使用左右分区、三列网格、半页文本图像布局或全页部分视觉效果;各方面都保持狭窄的安全边际。图像可以裁剪为全高或全宽;文本和身份标记需要边缘间隙。
|
||||
|
||||
**封面/部分分隔线:** 大图像或颗粒背景覆盖有超大标题。标题位于左侧或占据左半部分;图像覆盖整页或位于右侧。封面可能包括合作伙伴名称(纯文本)和报告名称;部分分隔符保留主题标签、巨大标题和底部的黄色小身份标记。阅读路径:小标签→巨型标题→背景图片意境→页脚身份标记。
|
||||
|
||||
**目录/趋势概览页面:** 多色硬边卡片网格;每张卡片都包含趋势名称和简短描述;没有圆角,没有阴影——通过色调和位置来区分。顶部保留章节标签或报告名称,底部保留身份标记;从左到右、从上到下扫描。
|
||||
|
||||
**内容解读页:**灰白色或黑色背景;顶部带有一个矩形块或短文本导航的部分标签;正文包含正文列、引用列、图像区域或案例卡。至少保留一个明确的视觉锚点。阅读路径:标题标签→大标题/信息句→主图或主卡→正文解释→引用/来源。
|
||||
|
||||
**案例文字-图片页面:**图片占据页面一半到三分之二;另一面包含简短的正文、引言或标题。在黑色背景上,图像嵌入为硬边矩形;在灰白色背景上,图像可能是全高和中心裁剪的。文本和图像由空白或色块边界分隔,很少由细线分隔。**高密度并行模块页面:**使用多列矩形卡片或并排文本块,间距狭窄、清晰;标题、正文和作者/来源都有明确的分级。当内容超过 4-6 个模块时,首先用色块分组,而不是进一步缩小正文。
|
||||
|
||||
标题的左上角包含部分标签或主题名称;顶部中心/右上角可以包含报告名称,例如小字体的“TREND REPORT 2025”。页脚带有页码、小的垂直侧面文本或底部中心的黄色小身份标记。身份标记仍然很小,而不是大水印。结构依赖于背景切换、卡片边界、图像裁剪和空白,而不是分隔线;没有稳定的大水印或复杂的背景图形。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题简短且具有概念性,通常为 2-5 个单词,采用标题首字母大写或全部大写标签;趋势标题使用名词短语、对比短语或充满态度的概念词——没有解释性句子。一页仅包含一个主要概念。
|
||||
|
||||
信息句是一个完整的判断句或一个简短的引导段,大约是正文大小的1.3-1.8倍,重量为常规或重型;不超过一小段,用于解释页面的价值。
|
||||
|
||||
正文以段落为基础,很少使用传统的圆项目符号;它被分成 2-3 个窄列或嵌入卡片中。对于枚举,请使用带有短标题+短正文段落的硬边卡片——而不是普通的项目符号列表。
|
||||
|
||||
分组可以按趋势主题、案例/意见/引用、读者群体、奖项或统计条目或色卡进行组织。一个分区包含 1 个主题;意见页包含1个主要判决+1-2个证据;概述页面并列有 4-6 张主题卡;一个案例页面包含 1 个案例图片 + 1 个解释性段落 + 1 个引用。
|
||||
|
||||
关键字通过粗重、黄色背景、黑底白字或主题色卡片进行强调。请勿使用下划线、斜体、荧光笔涂抹或混合字体。数字可以放大并与粗体关键字组合;单位、年份和奖项名称就位于数字旁边,而不是分散在脚注中。来源、作者、标题和页码使用小字体,放置在引号下方、页脚或侧面。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
**A。黑色背景数据/奖励卡页**
|
||||
有关年度业绩、关键人物、奖项条目和列表式信息。左侧为简介或背景;右侧使用黄色硬边矩形卡片来承载数字和条目。主要数字是正文的 2.5–4 倍;关键词使用Heavy;卡片紧密地排列在一起,它们之间有黑色的缝隙。请勿用于需要精致、冗长解释的内容 - 黑色正文过长会降低阅读舒适度。
|
||||
|
||||
**B。多色趋势概览网格**
|
||||
适合 4-6 个同级主题。主体是水平拼贴网格;每个块使用不同的背景颜色并包含一个短标题和一个摘要段落;标题 重,体重正常。色块具有相似的区域——避免无缘无故地放大一个主题。这种布局不适合承载大量案例图像或复杂数据。
|
||||
|
||||
**C。灰白色三部分文本图像页面**
|
||||
深度解读、案例讲解、陪审员意见。结构是左侧正文栏,中间或右侧有大图片,另一侧是引文/补充说明。灰白色背景、黑色或深灰色文本、硬边裁剪图像。如果没有高质量的案例图像,请使用报价卡或主题色块来完成视觉锚点。**D。剖面大型视觉页面**
|
||||
用于打开趋势部分。覆盖有超大重型标题的整页颗粒照片或双色调半色调图像。标题左对齐,约占页面的一半,颜色为白色、粉色、黄色或浅色调,具体取决于下面的图像。仅用于章节过渡或强烈的陈述——不要用于连续的几页,否则节奏变得太重。
|
||||
|
||||
**E。黑色背景案例截图页面**
|
||||
适用于移动屏幕截图、视频剧照和现场工作。屏幕截图以硬边矩形或设备纵横比并列,在右侧或上方有简短的解释和引用;小黄色身份标记用作页脚锚点。不要在屏幕截图中添加逼真的阴影或设备框架 - 保持编辑存档的感觉。
|
||||
|
||||
**F。报价/评论卡页**
|
||||
获取专家意见、作者引言和结论段落。报价位于浅绿色、粉色或白色色块内,搭配颗粒图形或案例图像;引用文本略大于正文,而作者信息明显小于引用文本。不要让整个页面成为一个大的居中引用——保留标题标签、来源和布局结构。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
**背景黑色#070809 / #1D1D1B**:用于部分分隔符、数据页和案例屏幕截图页面,最多整页。黑色文本使用白色、灰白色或黄色;避免使用深灰色的小字体。
|
||||
|
||||
**灰白色/暖灰色#E3E2DD / #DAD8D0 / #DCDBD6**:用于面向阅读的内容页面和引用页面,最多整页。可能会被接近暖灰色的品牌中性色所取代,但绝不会被蓝白色或明亮的冷白色所取代。
|
||||
|
||||
**品牌黄色#FFD200 / #FFD900**:核心品牌口音,用于标签、数据卡、关键数字、黄色小页脚身份标记和一些整块背景,范围从小徽章到半页卡片。当页面上大面积使用黄色时,减少其他高饱和度颜色。不可随意更换;如果迁移到另一个品牌,请保留同样可识别的主要强调色。
|
||||
|
||||
**主要文本黑色 #181917 / #232A31**:适用于灰白色和浅色卡片上的标题和正文。不要使用过浅的灰色作为主体颜色。
|
||||
|
||||
**白色/近白色#F5F3EA**:适用于黑色、反转标签和卡片上的文本;其面积通常小于黑底,或者作为文字颜色;确保黑色小文字保持清晰。
|
||||
|
||||
**主题粉色/珊瑚#F8B3A6 / #DB5B52**:用于趋势卡、部分图像叠加和强调模块 - 不是整个报告的主要品牌颜色。可以将每个部分交换为相同饱和度的主题颜色,但每页不超过 1-2 个主题颜色。
|
||||
|
||||
**主题蓝色#004370 / #114691 / #6D8BB0 / #8BBFE6**:用于案例图像、部分色块和冷静科技主题页面;深蓝色可以用作文本或背景,浅蓝色可以用作卡片填充。不要将高饱和度的黄色、粉色、绿色和蓝色并排放置,概览网格中除外。
|
||||
|
||||
**主题绿色#A3B9A3 / #7A876D / #E0FDBA / #E3FDBE**:适用于自然、设计和引用类型模块;浅荧光绿作为强调填充,灰绿色作为图像或背景辅助。避免太接近灰白色,否则会导致对比度低。
|
||||
|
||||
常规页面使用黑色/灰白色/黄色+1种主题色;概述页面可以并置多种颜色,但每个块都保留单色基础+黑色文本。不要发明红绿上/下系统;状态首先用文本标签和粗体表示——没有新的交通灯配色方案。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
字体以 FranklinGothicATF-Regula 和 FranklinGothicATF-Heavy 为中心。迁移时,选择中等宽度和实心字体的怪诞/哥特式无衬线字体;避免使用圆形科技字体、衬线字体或手写字体。- **巨型章节标题**:6–10x 正文,重,紧前导,左对齐;可能跨越图像或占据半个页面。
|
||||
- **页面主标题/关键数字**:2.5–4x 正文,Heavy 或 Regular + Heavy 混合,并使用 Heavy 强调单词。
|
||||
- **信息句/引导**:1.3–1.8x 正文,大部分为常规;关键短语可能很重。
|
||||
- **正文**:1x,常规,段落式排版,具有受控的窄列行长度。
|
||||
- **副标题/卡片标题**:1–1.3x 正文,重,放置在段落上方或卡片顶部。
|
||||
- **引用文本**:1–1.5x 正文文本,可以是常规文本;作者和标题为 0.55–0.75x。
|
||||
- **表格/卡片条目**:0.8–1x 正文,标题为重,描述为常规。
|
||||
- **页眉、页脚、页码、来源**:0.45–0.65x 正文、常规、全部大写或短标签。
|
||||
|
||||
文本主要是左对齐;大的中心块并不常见。报告导航和标签精简全部大写,趋势标题精简标题大小写,正文使用普通句子。领先保持弹匣密度;黑色的小文本变得稍微更领先。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
与复杂的数据图表相比,更喜欢统计数据、卡片、案例图像和编辑信息块。传统的条形图、折线图和饼图仅在趋势比较真正需要时才使用。
|
||||
|
||||
稳定词汇包括:大数字+文字解释、黄色数据卡、同级入门卡、主题矩形网格。轴、网格线、图例和复杂的多系列颜色不是默认元素。
|
||||
|
||||
当必须生成图表时:使用黑色或灰白色背景;细而低调的轴线;很少有浅灰色网格线;黄、黑、蓝、粉、绿中选择1-3个系列颜色;标签靠近数据点或条形,最大限度地减少独立图例;关键数据用黄色填充、粗重或放大数字标记。请勿使用渐变条、3D 饼图、发光线、复杂的仪表板或彩虹系列。
|
||||
|
||||
如果必须添加预测、目标或基线,请使用细线+小号全大写标签;它们不得压倒主标题或数据本身。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
高密度信息最好使用硬边卡片、色块网格和列表条目;表格用于归档和并排比较,而不是装饰性数据墙。
|
||||
|
||||
标题使用大号、小号全大写或短标题,背景为黄色、黑色或浅灰色。行和列由背景块、间距和粗细一致的细线分隔——没有复杂的边框。行高紧凑但不局促;文本可能会完全换行。数字右对齐或位于其单位旁边;文本左对齐。当一列包含太多文本时,请将其拆分为卡片,而不是进一步压缩列宽。
|
||||
|
||||
关键统计数据或奖励项目可能会用黄色焦点行/焦点卡突出显示;总行数使用黑底白字或黄底黑字。斑马条纹不是主要特征——如果使用的话,它应该非常微妙,接近灰白色和暖灰色之间的差异。符号标记和评级点显示不稳定,不应默认添加。高密度并行模块必须包括标题、正文和来源/作者级别——避免给所有文本赋予相同的权重。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
**矩形部分标签**:左上角有一个小的硬边矩形,带有黄色、白色、浅绿色、浅蓝色或黑色填充和全大写的小文本;用于导航和版块定位,不会像装饰贴那样数量分散。
|
||||
|
||||
**黄色页脚身份标记**:底部中心或底角的黄色小身份点,以纯小文本形式呈现新主题名称 - 不绘制图形徽标。迁移品牌时,可以将其替换为同等重量的身份标记,但不要将其放大为水印。**硬边色块卡**:用于趋势摘要、数据输入、报价和列表。无圆角、无阴影、无描边或极弱的描边;内部使用标题+正文,标题为Heavy,正文为Regular。
|
||||
|
||||
**粗粒/半色调图像处理**:用于封面、分区分隔符和一些案例页;适用于照片、作品图像和抽象纹理。不得损害正文的可读性;文本区域需要纯色底色或足够的对比度。
|
||||
|
||||
**引用块**:带有作者信息的独立段落或浅色卡片;不需要夸张的引号图形。
|
||||
|
||||
**小侧边文本/垂直导航**:用于页码、部分或补充源,放置在边缘附近;避免填写每一页的两面。
|
||||
|
||||
**图片框/截图框**:硬边矩形裁剪;可以并置两张移动屏幕截图或一张大图像。请勿添加玻璃形态、圆形设备外壳或阴影覆盖层。
|
||||
|
||||
流程箭头、矩阵标记、彩色图标不是稳定的核心组件;流程使用简单的硬边箭头或编号卡,保持在黑色/黄色/灰白色系统内。
|
||||
|
||||
## 10. 材质和违禁物品
|
||||
|
||||
整体:平面、硬边、印刷纹理、社论杂志纹理;视觉冲击力来自大标题、黑黄对比、主题色块和粗粒度图像,而不是三维效果。
|
||||
|
||||
**禁止:** 3D图表、发光笔画、玻璃形态、复杂的渐变背景、华丽的阴影、拟物化按钮、表情符号、卡通插图、通用彩色图标库、圆形名片、大居中文本块、低对比度浅灰色正文、整页未分组长文本以及与富兰克林哥特式字符冲突的装饰字体。
|
||||
|
||||
**谨慎使用:**大图像背景、丰富多彩的主题颜色、半色调纹理、垂直边注、传统图表、流程箭头。它们必须服务于区域氛围、案件证据或导航;如果它们损害了正文的可读性,请使用纯色底色和硬边卡片。
|
||||
|
||||
**允许在特殊页面上使用:**封面和章节分隔符可以使用全出血颗粒图像、超大标题和浓色叠加;概述页面可以使用多色拼贴;案例页面可能会用大面积的区域来显示屏幕截图或工作图像。内容页面必须在黑色背景影响和灰白色阅读之间形成节奏——封面强度不应无限期地维持。
|
||||
|
||||
照片/屏幕截图/工作图像必须具有案例值或纹理值 - 不要用不相关的库存照片填充空间。大图像背景仅适合封面、分区分隔线和一些过渡页面。渐变、阴影、发光和 3D 不属于该系统。当屏幕截图固有时,可以保留圆角,但布局容器默认情况下是硬边的。
|
||||
|
||||
## 11. 一代清单- 它是一个横向宽屏页面,安全边距很窄,没有内容接触边缘、溢出或被裁剪?
|
||||
- 页眉是否有小部分标签/报告名称,页脚是否有页码或小品牌锚,而不与正文竞争?
|
||||
- 每个页面是否仅包含一个主要观点或一组清晰的同级模块,以避免扁平的文本堆?
|
||||
- 标题是否简短且概念化,正文是否分为列、卡片或与图像配对——而不是整页连续的长文本?
|
||||
- 字体是否保留富兰克林哥特式无衬线字符,并通过相对大小和重/常规来区分级别?
|
||||
- 颜色是否以黑色、灰白色和黄色为基础,控制每页主题颜色且文本对比度足够?
|
||||
- 图片是案例、作品、截图还是颗粒材料,避免不相关的库存和过度装饰?
|
||||
- 图表是否克制,喜欢大数字/卡片;如果存在轴和网格线,它们是否足够低调?
|
||||
- 表格和高密度信息是否使用硬边卡片、清晰的标题、对齐的数字和可读的行高?
|
||||
- 组件是否使用矩形标签、硬边卡片、引用块和黄色小身份标记等系统元素,而不是新发明的样式?
|
||||
- 是否避免使用 3D、发光、复杂渐变、表情符号、彩色图标、软圆形业务模板和大型居中文本块?
|
||||
- 是否检查过乱码文本、重叠、遮挡、低对比度、空内容、错误比例、拉伸图像、错位页码和机械模板重复?
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 没有均匀划分的构图:除非没有其他可用的布局,否则不要默认为三分之一、四分之一或二乘二矩阵。这包括三部分结论,例如三向分割加标题加结论
|
||||
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,161 @@
|
||||
#报告名称·趋势报告2025风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适用于商业电影趋势报告、创意资产库介绍、广告电影导演提案以及研究导演/摄影风格的 PPT。针对具有电影审美和商业创意语境的读者:用电影画面营造感觉,然后用短标题、短段落、特色标签完成判断。
|
||||
|
||||
中高信息密度:内容页通常包含1个趋势观点、2-3组窄栏文本、1组特征标签以及单张大图或多图拼贴。它使用黑色背景、白色文本、粗体标题、窄体栏和大面积图像;强烈的色彩主要来自图像,而不是来自装饰系统。
|
||||
|
||||
基本原则:
|
||||
1. **图像为先,文字概括**:图像提供情绪、色彩、证据;标题指明了趋势,正文解释道——装饰性图形不能替代图像证据。
|
||||
2. **黑底优先,可读性高于图像完整性**:核心文本必须位于黑色或足够暗的载体上;必要时,牺牲图像区域以保持白色文本清晰。
|
||||
3. **一页一个趋势,整个报告一个骨架**:拼贴的方式可能有所不同,但每一页只服务一个核心概念,稳定地保留页眉、页码、标题、正文和特征标签。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
- **画布比例**:横向宽屏 16:9。图像可以是全高、全宽或边到边拼贴的——传统的白色画布不会被保留。
|
||||
- **基础背景**:黑色或暗色调图像。内容页面使用“纯黑信息区+图像区”或“全黑图像与覆盖文本”。白色页面背景和浅灰色办公模板库不属于该系统。
|
||||
- **边距**:外边距较窄 - 标题、页码和图像接近边缘;正文文本保持稳定的内部填充。图像拼贴使用硬剪切或极窄的间隙。
|
||||
- **标题区**:位于黑色信息区的左侧、中左或上半部分;可能会重叠图像,但必须落在黑暗区域。趋势页面标题通常紧凑地分为 2-3 行。
|
||||
- **正文区**:由“文字说明区+图像证据区”组成。文字区域大约占三分之一到二分之一;图像区域可以是单个图像、双区域或多图像网格。
|
||||
- **标题**:小型全大写导航稳定地放置在左上角、右上角和右上角 - 例如,品牌名称、商业、电影制作、趋势报告。字母间距较小、层次较低——它不包含主要信息。
|
||||
- **页脚/页码**:左下角的一个小白色页码,靠近边缘但不接触它。不要使用大页码、水印页码或复杂的页脚栏。
|
||||
- **徽标**:一个小的身份标记可能位于右上角,将新主题名称显示为纯小文本或留空 - 不绘制图形徽标;白色且非常小。不要将其放大为关键视觉标志。
|
||||
- **来源/脚注**:如果添加来源,请将它们放置在正文区域的底部或页脚附近、正文文本下方 - 不要构建独立的脚注栏。
|
||||
- **导航**:没有目录式侧边栏、面包屑或部分颜色块;持续阅读依赖于小的顶部导航和页码。
|
||||
- **分隔线**:明确的线条很少见;区域由黑块边界、图像剪切线和文本列间距划分。
|
||||
- **水印/背景图形**:封面可能有高饱和度的粉色竖条纹块;内容页面构建无重复水印系统。背景图形不得扩展为常规装饰。
|
||||
- **默认阅读路径**:大标题→大图/拼贴→短正文→特征标签→页眉/页码。
|
||||
|
||||
## 3. 内容组织- **标题风格**:使用短语趋势名称或强烈的观点句子。趋势标题可以是 2-4 个单词,例如“模拟镜头”、“纪录片风格”、“一次性广告”、“大胆、饱和的色彩”;介绍页面可以使用完整的句子。避免使用长字幕样式的标题。
|
||||
- **标题换行**:允许硬换行,每一行形成一个有力的短语;行距很紧,文本块很重。不要将标题设置为横跨页面的一条细长线。
|
||||
- **信息句**:开头页或结尾页可以使用一个强有力的陈述;内容趋势页面不需要超大的副标题——避免削弱趋势名称。
|
||||
- **正文组织**:窄栏小字体,通常为 2-3 个短段落块;解释趋势的背景、视觉特征和商业使用价值——没有列表式的长篇论证。
|
||||
- **分组逻辑**:“趋势名称→解释段落→特征标签→图像证据”。多个图像仅仅是同一趋势的多个样本——它们不充当平行部分。
|
||||
- **每页观点**:每页仅涵盖一个趋势或一个报告操作。不要将多个不相关的概念并置,也不要将多个趋势压缩到一个比较表中。
|
||||
- **正文密度**:将文本挡在狭窄的栏内;长的连续文本不得跨越大部分页面。如果段落块超过 3 个,请减少图像数量或拆分页面。
|
||||
- **关键点风格**:使用胶囊标签,而不是传统的项目符号;添加项目符号或编号列表时要小心。
|
||||
- **关键词强调**:使用粗体标题、全部大写的副标题、胶囊标签;正文内部不使用彩色荧光笔标记,也不使用下划线。
|
||||
- **数字/单位/时间**:数字主要内嵌在正文中;没有大量的页面或 KPI 仪表板,也没有扩展到基于图表的组件。
|
||||
- **来源脚注**:小于正文的白色/浅灰色文本,放置在同一文本区域的底部;没有长 URL、长引号或脚注编号系统。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A.黑色文字栏+右侧单个大图
|
||||
|
||||
用于报告介绍、服务描述和单一趋势解释。左侧或中偏左的黑色信息栏大约占三分之一到二分之一;右侧是全高图像。标题位于顶部;身体位于下方 1-2 个窄柱中。人或光源应面向/引导文本区域,避免视觉逃逸。不适合需要多个样本或复杂分类的页面。
|
||||
|
||||
### B.左文字+右多图拼贴
|
||||
|
||||
用于显示相同视觉风格的多个应用程序。左侧黑色底座包含标题、正文和标签;右侧使用 2-3 列不规则或网格拼贴画 — 图像边缘到边缘,没有圆角,没有阴影。特写、环境、材质、人物可以混合,但色调必须服务于同一个趋势。不适合线性推理、步骤流或数据比较,因为多个图像破坏了阅读顺序。
|
||||
|
||||
### C. 带有重叠文本的全黑图像
|
||||
|
||||
适用于气氛浓厚、情感强烈的趋势页面。图像占满整个页面;文本位于自然黑暗区域或黑色覆盖区域;标题可以是中左或中右,正文就在其下方。不要将正文直接放置在明亮的皮肤、天空或复杂的纹理上。不适合亮度均匀、细节密集、无可读区域的图像。
|
||||
|
||||
### D. 多区域图像蒙太奇+中央/侧面文字
|
||||
|
||||
用于将多个剪辑总结为一个趋势。图像上下、左右、大中小模块拼接;文本位于黑色区域或深色图像块上;区域是硬剪裁的——避免圆形卡片样式。标题锚定视觉中心;标签位于文本块的底部。当每个图像的主题差异太大或需要每个图像的标题时不适合。
|
||||
|
||||
### E.大图背景+CTA关闭用于关闭页面和许可/服务通知。大气气息浓郁的大图为背景;左侧或黑色区域包含标题、较长的描述和一个白色小按钮。该按钮只是一个操作入口——不要将其变成营销登陆页面的大型按钮。不适合过多的正文、多个操作条目或定价/套餐信息。
|
||||
|
||||
### F. 封面分割构图
|
||||
|
||||
封面由大图、黑场、高饱和度竖条纹块组成;标题很大而且支离破碎——部分字形可能被分割——与小主题词配对。仅适用于盖板或坚固的截面开口;不要频繁地将其复制到普通内容页面上,否则报告的节奏就会中断。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **结构黑色 #000000 / #080204 / #0B0A0A**:用于基色、信息列、深色蒙版和页眉/页脚载体颜色 - 最大区域。不能用白色或浅灰色代替;品牌更换可能只使用足够暗的近乎黑色。
|
||||
- **主要文本白色 #FFFFFF / #F5F5F2**:用于标题、正文、页眉、页码和标签文本。必须与背景形成强烈对比;不要在同一页面上引入多种文本颜色来创建层次结构。
|
||||
- **辅助灰色#9A9A94 / #6E6F6D**:用于低级导航、辅助注释或黑暗区域上的微弱文本。面积小——不能用于主体文本;避免低对比度。
|
||||
- **封面/强调粉红色 #FC1AED / #F018D8**:用于封面的垂直条纹 - 不是正文页的通用突出显示;内容页面不得随意使用粉色按钮、标题或图标。
|
||||
- **温暖的红橙色图像颜色#EF1721 / #D46D49 / #9E3C26**:来自灯光、肤色、日落和温暖的室内装饰。不得人为地将其扩展为图表系列颜色或大色块,除非图像本身提供它们。
|
||||
- **深蓝青色图像颜色 #02213C / #0B4F73 / #3F92A6**:来自水、夜景和冷色调图像。可以指导图像选择,但不是独立的 UI 原色。
|
||||
- **天然绿色/橄榄色 #12260C / #555948 / #6D6B5B**:来自自然、草原和纪录片风格的页面。仅在图像区域内大面积出现;文本保持黑底白字。
|
||||
- **标签描边白色/浅灰色#FFFFFF / #CFCFCB**:用于特征胶囊边框和小标签 - 保持线条受限制。
|
||||
|
||||
页面的主色调由其图像决定;除了黑白之外,不要主动引入超过 1-2 种高饱和度色调。不存在数据/状态颜色系统 - 不要添加红绿向上/向下、交通灯或多系列图表调色板。品牌更换可能只会影响封面强调块或局部图像颜色方向 - 它不能改变黑底白字的骨架。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
使用无衬线字体。正文以 ArialUnicodeMS 为中心,标题广泛使用 Arial-Black,导航/一些小文本使用 LiberationSans。复制时,将超重的黑色无衬线字体与常规无衬线字体搭配使用;小导航使用窄字母间距/全部大写。- **巨型封面标题**:8–9x 正文;可能会跨行、局部压缩或偏移;仅覆盖。
|
||||
- **内容页主标题**:4–4.5x 正文,超重,紧领先,通常 2–3 行 — 最高级别。
|
||||
- **介绍/号召性用语标题**:正文文本的 3.5–4.5 倍;可能是一个完整的句子;保持粗而短的线条。
|
||||
- **副标题/栏词**:0.85–1.1x 正文,通常全部大写或粗体,例如“特征”。
|
||||
- **正文**:1x,常规粗细,窄列,前导稍紧但不拥挤。不要将大段正文加粗。
|
||||
- **胶囊标签文本**:0.7–0.85x 正文文本,通常全部大写、粗体或半粗体,位于描边小胶囊内。
|
||||
- **标题导航**:正文文本的 0.7–0.85 倍,间距稍大,全部大写,对比度低但可读。
|
||||
- **脚注/页码**:0.6–0.75x 正文,白色小字体。
|
||||
- **图表/表格标签**:如果必须添加,请将其保持在 0.8 倍或低于正文文本,遵循黑底白字。
|
||||
|
||||
禁止使用衬线正文、手写字体、卡通字体和过多的斜体。斜体只能标记很少的引用或特殊单词——而不是作为层次结构规则。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
源文件没有条形图、折线、饼图、轴、图例或网格线的数据图表系统。 **不要主动将趋势内容转变为数据仪表板**。
|
||||
|
||||
如果必须添加图表:
|
||||
- 图表仅作为辅助证明;它们的面积不得超过图像主视觉;将它们放在黑色信息区或黑色卡片上。
|
||||
- 轴和网格线使用极细的浅灰色、低对比度线条;数据标签使用小号白色无衬线字体。
|
||||
- 系列颜色永远不会扩展为彩虹 - 最多为白色/灰色 + 页面图像中的一种强调色。
|
||||
- 没有 3D 图表、发光线、渐变面积图、复杂的图例或装饰性数据图标。
|
||||
- 关键数据可以用粗体白色文本或小胶囊标记 - 没有大面积的彩色标注。
|
||||
|
||||
与复杂的定量图表相比,更喜欢并置的图像框架、特征标签和短段落。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
源文件没有传统的表系统。高密度信息以窄栏正文、多图拼贴、胶囊关键词呈现;与大表格相比,比较主题更喜欢“标签组+短段落+图像样本”。
|
||||
|
||||
- **标签组**:特征区为多个水平排列的小胶囊,可包裹;白色/浅灰色描边,黑色透明填充,全部大写文本。用于关键词、拍摄技巧和视觉特征——而不是长句子。
|
||||
- **文本栏**:正文可以分为 2 或 3 栏,每个短段落具有清晰的栏间距;左对齐;顶部可以与标题基线或正文开头对齐。
|
||||
- **图像矩阵**:多图像拼贴充当“样本表”;没有标题,没有编号——统一的主题和基调。
|
||||
|
||||
如果必须使用表格:标题是小号全大写白色文本;线条极细,浅灰色;底座保持黑色或深灰色;没有斑马条纹、彩色单元格、粗边框或 Excel 样式的网格。数字右对齐,文本左对齐;总行数仅通过粗线或细线来区分。桌子的面积必须受到控制——它不能取代图像关键视觉效果。
|
||||
|
||||
## 9. 组件和图形元素- **小顶部导航文本**:在顶部边缘附近重复 - 白色/浅灰色,全部大写,低级别。不要添加图标、下划线或彩色选定状态。
|
||||
- **右上角身份标记**:将新主题名称显示为纯小文本 - 白色、垂直或紧贴角落 - 仅作为品牌签名;没有绘制图形标志。
|
||||
- **页码**:左下角白色小字,显得稳重。不得放大为装饰数字。
|
||||
- **特征模块**:一个副标题+多个胶囊标签。副标题可以全部大写;胶囊使用细笔划、圆形/胶囊形状、黑底透明填充。 3-6 个标签是合适的——更像是一个过滤器面板。
|
||||
- **黑色信息块**:页面结构区域,不是卡片;硬切,没有阴影,没有笔划,没有圆角——带有标题和正文。
|
||||
- **图像拼贴框架**:直接裁剪和对齐图像 - 无圆角、无阴影、无相框;尺寸可能有所不同,但不添加装饰边框。
|
||||
- **CTA 按钮**:仅在结束页面上 - 一个白色背景黑色文本的小矩形或浅圆形按钮。它不能淹没每一页。
|
||||
- **分隔线**:不是常规组件;如果需要分离,请仅使用图像边界或极细的线条。没有粗线、彩色线或虚线流程箭头。
|
||||
- **图标/箭头/矩阵标记**:如果使用,它们必须非常小,白色,线性,标签辅助 - 永远不会成为彩色图标系统。
|
||||
|
||||
## 10. 材质和违禁物品
|
||||
|
||||
视觉丰富度来自真实图像的光影、纹理、色彩和构图,而不是来自 PPT 效果。
|
||||
|
||||
**禁止:**
|
||||
- 大型白色办公模板,浅灰色背景页面。
|
||||
- 彩色图标集、表情符号、卡通插图、3D 图形、拟物化按钮。
|
||||
- 渐变标题文本、发光笔画、霓虹灯文本效果、复杂阴影、玻璃形态。
|
||||
- 堆叠圆形卡片、投影相框、粗边框、装饰性几何图案。
|
||||
- 大型居中文本块、整页项目符号、传统目录/流程箭头页面。
|
||||
- 多色数据图表、红绿状态灯、彩虹图例。
|
||||
|
||||
**谨慎使用:**
|
||||
- 大型高饱和度颜色区域:应仅来自图像或覆盖强调块 - 内容 UI 不会主动传播颜色。
|
||||
- 按钮:仅在 CTA/结束页面上;将计数保持为一。
|
||||
- 表格和图表:仅当主题确实需要定量证明时才作为辅助模块 - 它们无法替代图像。
|
||||
- 图标:只有小的线性辅助工具 - 从未着色。
|
||||
- 透明蒙版:可以提高文本可读性,但应接近黑色并具有自然边缘 - 没有明显的渐变效果。
|
||||
|
||||
**允许在特殊页面上使用:**
|
||||
- 封面可以使用强烈的粉红色垂直条纹、分割标题和大黑色区域。
|
||||
- 结束页面可以使用 CTA 按钮和较长的解释性文本。
|
||||
- 全图像页面可以让图像填充画布,但必须保留可读的暗区。
|
||||
|
||||
## 11. 一代清单- 骷髅:这是一个 16:9 的黑暗电影报告页面吗?顶部的小导航、左下角的页码和右上角的小身份标记是否保留?
|
||||
- 文案:每一页是否仅表达一种趋势/主题?标题是否简短而有力,正文是否是窄栏内的短段落?
|
||||
- 层次结构:标题是否明显大于正文,特征是否位于正文说明下方但页脚上方?是否避免了对特定字体大小的混淆?
|
||||
- 着色:黑底白字是核心吗?高饱和度的颜色是来自图片还是封面,而不是任意的UI装饰?
|
||||
- 布局:图像是否带有主要的情感证据?文本是否落在黑色区域或暗区?是否避免在复杂的明亮图像上出现白色文本?
|
||||
- 图表:如果存在,它们是否是最小的、低对比度的、二次证明?是否避免使用 3D、彩虹色和复杂的图例?
|
||||
- 表格:如果有的话,它们是黑色的,有细线,没有 Excel 的感觉吗?表格没有取代图像样本吗?
|
||||
- 组件:是否使用了小型导航、胶囊标签、硬切图像拼贴和黑色信息块?是否避免了阴影卡片和装饰线?
|
||||
- 禁止物品:禁止表情符号、彩色图标、插图、渐变发光、复杂纹理、3D、粗边框或大的居中文本块?
|
||||
- 质量:检查文本溢出、截断、乱码文本、重叠、低对比度、图像覆盖标题、空标签、扭曲比例、缺失页码、机械模板重复或过于相同的页面布局。
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 没有均匀划分的构图:除非没有其他可用的布局,否则不要默认为三分之一、四分之一或二乘二矩阵。这包括三部分结论,例如三向分割加标题加结论
|
||||
|
After Width: | Height: | Size: 980 KiB |
@@ -0,0 +1,142 @@
|
||||
# 2025 年组织名称类型趋势:Re:Vision 风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适用于字体趋势报告、设计研究发布、创意案例集和品牌/字体行业洞察——针对设计、品牌、创意和字体专业人士的长篇叙事PPT/报告。报告在低密度视觉暂停页面和高密度编辑内容/案例页面之间交替,形成景观视觉杂志节奏。
|
||||
|
||||
现代无衬线字体的 Helvetica Now 系列构成了骨架,结合了巨大的粗体标题、高黑白对比度、全出血案例图像、克制的页脚和每页主题颜色。
|
||||
|
||||
- **键入作为关键视觉效果**:标题、章节名称、字体样本和自定义文字标记首先带有标识;图形装饰必须与字体、排版或案例演示相关——绝不是没有信息的装饰。
|
||||
- **每页一个视觉中心**:全屏图像、黑白几何、三列长文本和案例库都可用,但每一页只有一个入口点:巨型标题、主图像、几何符号或正文标题。
|
||||
- **黑白底色+每页主题色**:白、黑、灰统一报表;橙色、蓝色、粉色和绿色等强烈的颜色仅用作单个趋势/案例页面的主题颜色或局部强调色,而不会在整个报告中混合成彩虹系统。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
- **画布比例**:横向 16:9。主要是基于白色的编辑布局、纯黑/纯白意见页面或全出血图像页面;不要更改为肖像海报或社交卡比例。
|
||||
- **全局边距**:内容页面保留较宽的外边距;案例图像可能会接近主体区域边界,但页脚锚点仍位于底部。全出血封面/部分图像可能会填满整个页面。
|
||||
- **标题区**:封面、章节分隔符和意见页使用超大标题,可能占据上半部分或跨越整个页面,通常是带有句点的短句子。内容页标题位于左中、左上或正文区域的中间——没有固定的标题栏。
|
||||
- **正文区域**:使用水平列、并排文本和图像、案例拼贴、全出血图像和几何符号页面。长文本使用窄栏;在案例页面上,图像占主导地位,文本位于边缘或下方。
|
||||
- **标题**:没有稳定的传统标题栏。一些案例页面可能会在顶部放置微小的标题/源文本或列标签,但这不能升级为整个报告的固定顶部栏。
|
||||
- **页脚**:内容/案例页面使用稳定的小页脚:“Re:Vision”或左下角的报告标记,底部中心或左下中心的小部分/列文本,以及右下角的小页码或黑色数字标记。比正文小——不是装饰条。
|
||||
- **品牌标记**:封面将品牌显示为小文字标记文本(仅限纯文本 - 写入新主题名称;不绘制图形徽标);正文页通过页脚和类型系统传达品牌信息。不要在每一页上放大徽标。
|
||||
- **导航和目录**:目录页面并置多个“粗体部分标题+较小的解释短语”项目;部分条目使用全出血图像或最小几何页面。
|
||||
- **分隔线和水印**:没有常规的标线标题、垂直线边框或水印系统;分离依赖于列间距、空白、图像边界和几何形状。
|
||||
- **默认阅读路径**:最大标题/主图或几何关键视觉→副标题/信息句→窄栏正文或案例标题→页脚页码和章节。
|
||||
|
||||
## 3. 内容组织- **标题风格**:使用短句、命令式、判断式或两个词的短语,通常带有句点 - 例如,“未来的版式。”,“创造新的东西。”,“这是一种新的趋势报告。”。部分名称可以使用“X & Y”。结构。
|
||||
- **信息句**:章节分隔符用一个副标题行解释其主题,放置在标题下方或左下角;大小位于标题和正文之间,通常为粗体或高对比度白/黑。
|
||||
- **正文组织**:现代无衬线字体,常规粗细,短行长度,分为 2-3 列;窄栏、段落间距和空白支持阅读长段落。
|
||||
- **分组逻辑**:按趋势/主题推进;每章可能包含章节封面、引言、案例展示、分析正文和引文/样本页。不要在同一页面上混合太多章节逻辑。
|
||||
- **每页观点**:一个观点页仅包含1个核心句子;内容页面围绕 1 个主题;案例库展示 3-6 个带有短标题的作品——避免每个案例都有长段落。
|
||||
- **关键点风格**:更喜欢段落叙述。列出点时,使用最少的短线——没有复杂的编号、彩色复选标记和叉号,或多级缩进。
|
||||
- **关键字强调**:依赖字体大小、粗体、位置、图像比例和页面主题颜色;正文内部文本不依赖荧光笔标记、下划线、描边文本或多色突出显示。
|
||||
- **数字/单位/时间约定**:数字代表页码、年份、案例注释或来源信息;新数据使用小标签和清晰的单位——数字不会变成业务仪表板。
|
||||
- **来源脚注**:案例、图像和引文以非常小的字体记在顶部或底部。鸣谢/来源页面可以使用多列密集的小文本;链接或关键名词可能是蓝色的。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 全出血图像 + 巨型标题叠加
|
||||
|
||||
用于封面、章节条目和营造趋势氛围。图像填满或几乎填满页面;超大粗体白色/黑色文本覆盖顶部或中间,副标题位于标题下方或左下角。依靠标题比例和图像之间的张力——没有阴影或笔画。不得包含长正文段落、图表或多大小写标题;覆盖的文本必须避开图像最复杂的区域。
|
||||
|
||||
### B. 黑白几何意见页面
|
||||
|
||||
用于章节之间的停顿、宣言式的短句和报告的立场。纯白色或纯黑色背景,中心有一个大的黑白几何形状——椭圆、双圆、眼睛形状、括号形状——句子嵌入在中心。几何形状是主题,而不是角标;信息密度极低。不要添加长段落、图例、表格或小图标簇。
|
||||
|
||||
### C. 编辑导入/长文本页面
|
||||
|
||||
用于趋势解释、背景讨论和研究段落。标题或副标题占一栏;正文分为 2-3 个窄列,保留大量空白和页脚;子弹很少见。强调来自粗体标题、第一段位置和列宽变化;长文本不得作为单个全角列展开,不得强行插入装饰插图。
|
||||
|
||||
### D.左文右图/右文左图并置
|
||||
|
||||
用于案例分析、工作描述和概念解释。图像区域比文本区域大,可以容纳 1 个主图像或 2-3 个并列图像;文本区域包含一个简短的标题、几个正文段落和一个小来源。图像是视觉焦点。要比较多个作品,请切换到画廊网格;如果图像细节复杂,文本不得覆盖图像。
|
||||
|
||||
### E. 案例库网格用于作品集、趋势证据和类型样本比较。图像使用水平排列、松散网格或具有充足空白的不均匀宽度拼贴;一张大图+几张小图可以建立层次结构。字幕非常短;来源位于边缘。不要让每个缩略图都成为同等重量的卡片,也不要为每个图像提供很长的标题——这会让页面感觉像一个数据库。
|
||||
|
||||
### F. 字母/符号关键视觉页面
|
||||
|
||||
用于字体、声音波形、字母样本和抽象符号。放大的字母、字形、波形或镜像符号占据半屏到全屏,旁边有简短的标题和说明文字;强调字体结构和节奏——没有额外的图标装饰。如果主题不是字体、徽标或视觉语言,则不得滥用巨型字母。
|
||||
|
||||
### G. 鸣谢/来源多栏页面
|
||||
|
||||
用于结束致谢、参考文献以及机构和人员名单。高密度使用 4-6 列小文本窄栏;副标题为粗体;链接或突出显示可能是蓝色的。这种布局仅适合附录类型的信息,而不适合核心意见页面或需要现场朗读的页面。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **近白色/白色#FFFFFF、#FEFEF6、#F9F9EF**:适用于内容页面、案例页面和源页面。可以用极浅的暖白色代替,但决不能用明显彩色的纸代替——除非作为单页的主题。
|
||||
- **纯黑色/近黑色 #000000、#111113、#161616**:用于主要文本、黑色页面背景和几何关键视觉效果。与大面积的白色文字搭配;不要与低对比度的深灰色混合。
|
||||
- **中性灰#9C9C9C、#CFCFCF、#E5E5E5**:用于辅助文本、图像边界、浅色分离和中性过渡;低于黑白的信息级别——不得作为主要的车身颜色。
|
||||
- **主题橙色#FE9900、#FFCB7F、#FBE7C8**:适用于声音/波形/部分案例页面上的大字体、波形、局部背景和重音形状。充当单个页面的主要颜色 - 它不会与同一页面上的其他强烈颜色竞争。
|
||||
- **主题蓝色#3178C8、#3B83CE、#37536D、#426B85**:用于剖面图像、案例原色、链接/来源强调或视觉样本;蓝色的正文文本链接面积较小。
|
||||
- **酒红色/紫红色 #714D55、#886065、#743C3F、#A5888D**:用于摄影/案例图像的情绪背景或主色调 - 不建议作为大面积替换的通用口音。
|
||||
- **亮粉色/绿色等浓烈色彩**:仅适用于个别趋势页面或案例图像的主题背景或图形 - 未建立全局状态颜色系统。
|
||||
- **每页色调控制**:除了案例图像本身的颜色外,结构颜色保持黑白灰色+ 1个主题颜色。如果图库图像已经是彩色的,则文本和组件必须恢复为黑白灰色。
|
||||
- **状态颜色边界**:不存在红绿向上/向下系统。如果新内容必须表达状态,请使用带有清晰解释性文本的小区域标签 - 不要使用大型红绿仪表板。
|
||||
- **品牌颜色替换**:白色、黑色、灰色不可替代;单页的主题色可能会被新品牌的一种高饱和度颜色取代,但“每页一种主题色”的规则仍然有效。
|
||||
|
||||
## 6. 字体和文本层次结构- **印刷字符**:Helvetica Now 系列是核心;标题为粗体显示,正文为常规文本,副标题、页脚和标签为文本粗体/微粗体。少量的衬线或手写/实验字体仅作为案例内容本身出现,而不是作为报告范围的字体。
|
||||
- **身体基线**:身体 = 1x;宽松的行距,窄的列宽。
|
||||
- **大标题**:4–5x 正文或更大,粗体显示;在封面和意见页面上,它们可能会放大以成为页面的关键视觉效果。
|
||||
- **内容页标题/副标题**:2–3x 正文文本,粗体、左对齐或与主图形或视觉元素对齐;没有装饰性标题栏。
|
||||
- **信息句/字幕**:1.5–2x 正文,紧跟在大标题后面或左下角,保持短行。
|
||||
- **主体段落**:1x常规重量,以黑色为主;段落之间用空格分隔——首行缩进不是主要规则。
|
||||
- **表格/图表标签/案例标题**:0.65–0.8x 正文,黑色或深灰色;必须保持可读性——不要太浅的灰色。
|
||||
- **脚注、页脚、页码**:0.5–0.65x 正文;页码通常位于右下角。
|
||||
- **对齐方式**:以左对齐为主;居中仅适用于黑白几何意见页面上的单个句子。禁止使用大的居中文本块。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
源文件没有稳定的数据图表系统;新图表必须嵌入编辑页面:
|
||||
|
||||
- **允许的图表方向**:最小折线图、少数系列条形图或时间线 - 无业务仪表板页面。
|
||||
- **轴和网格线**:细灰线或弱化轴线;避免粗边框、彩色网格和复杂的背景。
|
||||
- **标签**:小而清晰,最好是黑色/深灰色;关键数据可以使用页面的主题颜色,但不得超过 1 种强调色。
|
||||
- **图例**:减少系列;将图例放在图表附近或直接放在线条/条形旁边的标签;没有大的图例框。
|
||||
- **预测/目标/基线**:虚线或细线,线附近有注释;没有发光、渐变区域或 3D 图表。
|
||||
- **边界**:不适合复杂的 KPI 仪表板、多轴图表、饼图数组、大型热图矩阵和其他繁重的业务报告上下文。图表美观必须屈服于数据清晰度和编辑空白。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
高密度信息主要采用Credits/source多栏、小文字注释、案例拼贴;表格遵循编辑限制原则:
|
||||
|
||||
- **标题**:黑色或深灰色粗体文本,白色或极浅灰色背景;深色标题栏不是默认设置。
|
||||
- **行/列结构**:细灰线或空白分隔;减少完整的网格边框;将列数保持在可读范围内。
|
||||
- **行高和密度**:可以紧凑,但行间必须保留空气;附录表可能更密集——核心内容页面不应该太密集。
|
||||
- **基色**:白色为主;浅灰色表示分组或标题;斑马条纹不是全局特征——谨慎使用。
|
||||
- **关键行/列**:用页面主题颜色中的粗体、小标记或浅色基块突出显示;没有多色条件格式。
|
||||
- **数字/文本对齐**:文本左对齐;按小数位或单位右对齐的数字;保持单位一致。
|
||||
- **符号和评级**:没有稳定的评级点、十字交叉或状态符号系统;如果必须使用,请使用最少的黑白符号或仅使用单一主题颜色。
|
||||
- **作用**:表格提供附录、来源和参考信息——它们不得成为报告的主要视觉语言。
|
||||
|
||||
## 9. 组件和图形元素- **巨型标题组件**:由粗体无衬线、短句、句点和极端比例构成;可以覆盖图像或独立于白色/黑色背景。
|
||||
- **黑白几何符号**:眼睛形状、双圆、镜面括号、半圆等,用于章节停顿;每页一个主要符号 - 不会重复作为小装饰填充页面。
|
||||
- **字母样本组件**:放大的单个字母、单词形式或波形作为主题 - 必须与文本解释清楚地联系起来。
|
||||
- **案例图像框架**:带方角的矩形,没有可见的圆角、阴影或边框;按大小和空白组织,而不是卡片阴影。
|
||||
- **页脚导航**:报告标记在左下角,小栏文字在底部,页码在右下角;尺寸小,黑色或深灰色,无底条。
|
||||
- **源/标题小文本**:靠近图像边缘或页脚,提供版权和上下文。不得扩大到初级信息水平。
|
||||
- **标签/徽章**:没有稳定的彩色徽章系统。如果需要标签,请使用小黑色文本或短的单一主题颜色标签——不要堆叠圆形胶囊。
|
||||
- **流程箭头/SmartArt**:没有传统的流程图、组织结构图或 SmartArt。流程转换为编辑栏或最小箭头 - 避免模板化节点图。
|
||||
- **图标**:彩色图标不是稳定的元素。除了案例图像中包含的图标之外,不应引入任何图标库。
|
||||
|
||||
## 10. 材质和违禁物品
|
||||
|
||||
整体扁平、社论、内敛、类型驱动;视觉强度来自印刷比例、黑白对比度、真实案例图像和每页主题颜色。
|
||||
|
||||
- **禁止**:3D图表、发光、玻璃形态、复杂阴影、重笔画、渐变按钮、表情符号、彩色图标库、商业模板SmartArt、大型装饰纹理、不相关的插图、低对比度浅灰色正文文本、大型居中文本块以及在每个页面上重复大型徽标。
|
||||
- **谨慎使用**:照片/屏幕截图/插图。源文件中使用了大量的案件图片和摄影,但它们带有案件证据或章节情绪——它们不是任意的装饰;必须有明确的主题关系和高质量的裁剪。圆角、斑马条纹和彩色标签也应谨慎使用。
|
||||
- **允许在特殊页面**:封面和章节条目的全出血摄影背景;实验字体、笔迹、夸张的颜色作为案例内容;鸣谢/来源页面的多列超密集小文本;意见页面和强暂停页面采用黑底白字。
|
||||
- **不应该使用**:大图像背景承载长文本阅读;微小的正文文字覆盖在图像上;让每一个案件都成为一张暗牌;用渐变或装饰图案替换类型关键视觉效果。
|
||||
|
||||
## 11. 一代清单- 骨架:是16:9的横向报告页面吗?宽边距、正文区域和小页脚锚点是否保留?
|
||||
- 文案:标题是可能带有句点的短句/短语吗?每个页面是否只有一个核心观点或视觉入口?
|
||||
- 层次结构:标题、信息句、正文和脚注是否按相对比例明确区分?是否避免使用业务模板标题栏?
|
||||
- 着色:是否使用黑白灰底色+每页一种主题颜色?当案例图像非常丰富多彩时,结构文本是否会回归黑白灰色?
|
||||
- 布局:页面是否属于以下之一:全出血标题、黑白几何、长文本列、文本图像并置、案例库、字母形式关键视觉或多列学分?
|
||||
- 图表:如果存在,它们是否是最小的、少数系列的、弱网格的、直接标记的?是否避免仪表板和 3D 效果?
|
||||
- 表格:白色/浅灰色底座、薄分隔符、对齐数字、很少的条件颜色?它们仅用于参考或附录信息吗?
|
||||
- 组件:是否使用了真实的风格组件——巨大的标题、几何符号、字母样本、矩形图像、受限的页脚?
|
||||
- 禁止项目:表情符号、彩色图标、发光、复杂阴影、渐变按钮、粗边框和 SmartArt 模板是否已被删除?
|
||||
- 可读性:是否检查了溢出、截断、乱码文本、重叠、低对比度、图像覆盖文本、空内容、错误比例和页脚位置漂移?
|
||||
- 一致性:页面变化是否服务于章节节奏,而不是为了自身而变化?整个报告还能被认定为同类型趋势报告吗?
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体大小差异是更好的解决方案
|
||||
- 没有均匀划分的构图:除非没有其他可用的布局,否则不要默认为三分之一、四分之一或二乘二矩阵。这包括三部分结论,例如三向分割加标题加结论
|
||||
|
After Width: | Height: | Size: 977 KiB |
@@ -0,0 +1,241 @@
|
||||
# 组织名称组 — 企业演示风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
针对上市公司投资者沟通、奢侈品集团企业介绍、财务披露等,在“优质品牌叙事页面”和“严谨IR数据页面”之间切换:前者采用全出血摄影、大衬线标题和半透明信息栏来呈现历史、品牌、渠道和商店;后者使用白色背景、细黑规则、图表、表格和小字体注释来完成财务证明和报告基础的披露。
|
||||
|
||||
适用于企业路演、投资者日、业绩沟通、集团战略介绍、品牌组合说明和财务附录。页面可能是高密度的,但必须保持正式、克制和可验证。
|
||||
|
||||
- 标题使用衬线字体;正文、注释、表格和图表标签使用无衬线字体。
|
||||
- 品牌叙事页面使用全出血摄影,覆盖有变暗蒙版或浅灰色半透明条;文本显示为白色或黑色以获得高对比度。
|
||||
- 财经页面使用白色背景,顶部/底部采用细黑色水平线,左上角为标题,右上角为身份标记(组名称呈现为纯小文本,无图形徽标),底部为页码和脚注。
|
||||
- 除了摄影的自然色彩外,信息还使用黑色、白色、灰色、棕金色/铜棕色和少量浅蓝色表格背景来组织。
|
||||
- 数据使用条形图、饼图、堆积条形图、财务表格、脚注和来源注释,而不是花哨的信息图表。
|
||||
|
||||
基本原则:
|
||||
|
||||
1、品牌、历史、店铺、工艺、策略页面可采用全屏摄影;收入、利润、资产负债表、现金流和报告基础披露页面必须使用白色背景图表/表格,避免使用干扰读取数据的照片。
|
||||
2. 在摄影页面上,文本必须位于黑暗区域、半透明条或高对比度空白区域;在财经页面上,更喜欢黑/白/灰,而不是为了品牌颜色而牺牲数字、标签和脚注的清晰度。
|
||||
3. 您可以在照片、时间线、卡片、图表和表格之间切换,但标题区域、身份标记、页码、脚注、线条和颜色角色必须保持一致。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为 16:9 横向宽屏,使用以下骨架:
|
||||
|
||||
### 2.1 封面骨架
|
||||
|
||||
- 全出血建筑或空间摄影充满画面,整体呈深色和冷灰色,强调玻璃和建筑质感。
|
||||
- 团体名称位于左上角,采用超大白色衬线字体,字母间距较宽。
|
||||
- 一个大的白色衬线主标题位于中下区域的中心;下面的日期明显小于主标题。
|
||||
- 没有顶部/底部黑色规则,没有复杂的页脚,没有图表。
|
||||
- 阅读路径:团体名称→主标题→日期→背景空间氛围。
|
||||
|
||||
### 2.2 免责声明/法律文本页面框架
|
||||
|
||||
- 白色背景,顶部有一条细细的黑色水平尺,横跨身体的宽度。
|
||||
- 左上角有一个衬线标题,右上角有一个身份标记(组名称呈现为纯小文本,没有图形徽标)。
|
||||
- 正文由密集的多段落小字体组成,段落标题加粗,正文左对齐。
|
||||
- 底部有一条黑色细横尺,可携带页码或辅助文档信息。
|
||||
- 无图像、图标或色块装饰;这是一个参考类型页面,而不是演示类型页面。
|
||||
|
||||
### 2.3 品牌/策略摄影页面骨架- 建筑、商店、车间、服装、自然或品牌场景的全出血照片。
|
||||
- 部分或主题标题位于左上角:深色图像上的白色衬线类型,浅色图像上的黑色衬线类型或半透明底座。
|
||||
- 白色身份标记(团体名称呈现为纯小文本,无图形徽标)通常位于右上角;右下角有一个小而不易分散注意力的页码。
|
||||
- 正文可以覆盖半透明的浅灰色水平条、白卡、本地图表、简短的宣言句子或时间线。
|
||||
- 如果照片视觉复杂,必须添加深色遮罩或浅灰色背带;长文本不得直接放置在高度纹理的背景上。
|
||||
|
||||
### 2.4 标准财务/附录白底骨架
|
||||
|
||||
- 纯白色背景,各边边距稳定。
|
||||
- 顶部有一条细细的黑色水平尺;左上角有衬线标题;右上角的身份标记(组名称呈现为纯小文本,无图形徽标)。
|
||||
- 正文带有图表、表格、并行数据模块或解释性项目符号。
|
||||
- 底部有一条黑色细横尺;页码位于右下或底部边缘;脚注/来源位于图表下方或底部规则附近。
|
||||
- 阅读路径:标题→图表/表格主要证据→旁边或下面的解释→脚注/来源→页码。
|
||||
|
||||
### 2.5 部分/过渡页面
|
||||
|
||||
- 使用全出血摄影背景和最少的文字;部分名称位于左上角或左中角。
|
||||
- 无数据堆叠,无多个组件;它只是切换叙事阶段。
|
||||
- 可以使用变暗蒙版来确保标题可读。
|
||||
|
||||
缺少或不稳定的项目:没有稳定的目录导航、面包屑、多级标题导航、水印或观察到的复杂背景纹理。除封面和摄影页外,不应添加背景图形。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题样式:
|
||||
|
||||
- 标题使用陈述性主题句子,其中可能包括品牌名称、战略主题、财务指标或时间范围。
|
||||
- 品牌页面标题很短,采用衬线字体,通常采用大写或标题形式。
|
||||
- 财务页面标题说明指标名称、其演变、测量基础或注释编号,可以在标题后的括号中进行解释。
|
||||
|
||||
关键信息句子和正文:
|
||||
|
||||
- 品牌页面承载 1 个核心判断,以单个大文本宣言句子、3-4 个水平条目或一条时间线的形式表达。
|
||||
- 财务页面可以包含 1 个主图表 + 几个小图表/饼图 + 注释,但它们必须围绕相同的度量系统 - 不要混合不相关的数据。
|
||||
- 长文本页面仅用于免责声明、测量基础解释或附录,而不是常规的叙述页面。
|
||||
|
||||
分组逻辑:
|
||||
|
||||
- 水平时间线表达历史和里程碑;平行卡表达品牌/渠道/策略模块;图表加脚注表达金融趋势;表格表示附录行项目。
|
||||
- 组标签使用简短的名词短语或度量名称。
|
||||
- 关键数字可以放大并与单位和时间基础配对;切勿在未说明其测量基础的情况下单独显示数字。
|
||||
|
||||
每页点数:
|
||||
|
||||
- 摄影观点页:1个要点,最多3-4个支撑点。
|
||||
- 图表页:1 个主要结论,2-4 个支持指标。
|
||||
- 表格页:可以是高密度的,但必须有清晰的页眉、分隔符和脚注。
|
||||
|
||||
关键词强调:
|
||||
|
||||
- 使用粗体、棕金色/铜棕色、黑色标题、白色对比度和位置层次结构 - 不要使用霓虹色、下划线或夸张的轮廓。
|
||||
- 数字强调必须与图表的颜色相匹配,避免在同一页面上引入额外的强调颜色。
|
||||
|
||||
数量/单位/时间基础:- 财务页面必须保留年度、季度、同比数据、增长率、单位和报告基础说明。
|
||||
- 脚注使用小型无衬线字体,放置在靠近数据区域或页脚中,不要远离数据。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### 4.1 全屏照片+居中宣言句
|
||||
|
||||
用于品牌理念、客户体验、商店/工艺氛围和区域介绍。背景图像填满框架;标题位于左上角或中上部;核心句子居中或偏离中心,采用大白色文本,必要时使整体背景变暗。不适合复杂的财务数据、多个计量基础或需要精确比较的内容。
|
||||
|
||||
### 4.2 全出血照片+半透明条/卡片列表
|
||||
|
||||
用于战略优先事项、成功因素、渠道行动、步骤或比较。照片上覆盖 3-4 个浅灰色半透明水平条或白色矩形卡片,每个卡片上有一个简短的标题、一个数字或一个解释性句子;可以在左侧添加编号块。强调依赖于输入顺序、棕色填充栏或粗体文本。如果条目超过 5 个或文本太长,请切换到白底并行模块页面。
|
||||
|
||||
### 4.3 时间线/历史里程碑页面
|
||||
|
||||
年份节点沿着半透明的水平带排列,每个节点包含品牌/事件/简短说明。年份的字体明显大于说明文字;用细线连接节点或用清晰的分隔符组织它们;背景可以使用建筑/空间照片。不要将时间线变成复杂的曲线或多层装饰路径。
|
||||
|
||||
### 4.4 白底单主图页
|
||||
|
||||
了解收入演变、增长率、构成和趋势。保留标准页眉/页脚;主图表——条形图或堆积条形图——放置在中央;小饼图、图例和脚注位于图表下方或下方。图表占据了大部分页面区域;解释性文字不应挤满图形。强调棕色主系列、黑色/灰色标签以及注释同比数据或增长率的椭圆形或小色块。
|
||||
|
||||
### 4.5 白底图+右侧说明栏
|
||||
|
||||
为“数据证据+管理解释”。主图表位于左侧或中间,右侧是简短的项目符号或关键指标。右侧说明栏不要变成长段落;每个项目保留一两行。图表是主要的,解释是次要的。
|
||||
|
||||
### 4.6 高密度财务表格页
|
||||
|
||||
用于损益表、资产负债表、现金流量、分部详细信息和附录报告基础披露。标准的白底骨架,桌子占据了身体的大部分面积。标题、组行和摘要行使用浅蓝色/浅灰色背景和细线分层。信息密度可能很高,但照片、图标或大色块不得分层。
|
||||
|
||||
### 4.7 并行模块/品牌组合页面
|
||||
|
||||
用于比较品牌、渠道或业务部门。使用等宽的列和白色或半透明的卡片,每列包含一个小标题、一个关键数字、一个简短的说明或一个图像。最好有 2-4 列。如果需要大量文本,请切换到表格或拆分为多个页面。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
基于角色的调色板:- 背景白色#FFFFFF / #F8F7F7:标准财务页面、附录和表格页面的主要背景。彩色背景不得取代财务页面的白色背景。
|
||||
- 深黑色/近黑色 #08070A / #1A1A1A:主要正文文本、标题、细线、轴和表格边框。用于高对比度信息,不作为大的装饰色彩区域。
|
||||
- 中性灰色 #7A8180 / #949494 / #B8B8B8:照片蒙版、辅助文本、表格线、辅助数据和背景卡。不宜用于关键小字,以避免对比度低。
|
||||
- 浅灰色半透明#E5E5E5 / #DFDFDF / #EBEBEB:摄影页面、卡片底座、灯台背景上的信息栏,用于在复杂照片上承载文本。
|
||||
- 品牌棕色/古铜色#9C5A37 / #9B5834:主要强调色、主要条形图系列、渠道/业务重点、水平重点条。可能会更换为新品牌的原色,但更换的必须是低饱和度、稳定且兼容黑/白/灰。
|
||||
- 金棕色 #CA9814:少量身份标记文本、生长标签或次要强调。只能在小范围内使用,不得成为第二原色。
|
||||
- 浅蓝色表格背景大约#DCEEF6 / #EAF6FB:用于后面附录财务表格中的标题、组或财务详细信息背景。不得在品牌叙述页面上过度使用。
|
||||
- 白色文本#FFFFFF:用于深色照片、深色蒙版、深色图表块和封面标题。背景必须足够暗。
|
||||
|
||||
除了摄影的自然色之外,将单页的信息层保持在黑/白/灰 + 1 种强调色内。金融图表可以使用棕色、灰色、浅蓝色等功能性颜色,但有意义的系列颜色不应超过3种。
|
||||
|
||||
正/负状态颜色:源文件没有显示稳定的红/绿升降系统。增长、同比和份额数字更常见地使用金棕色椭圆形、黑色/灰色标签或文本注释;如果添加正/负状态,请谨慎操作,不要破坏棕色/灰色主系统。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
标题使用乔治亚级衬线字体;正文、图表、表格和注释使用 Tahoma 级无衬线字体。少量的 Gill Sans 可能只是作为特殊的品牌口音,而不是取代主系统。
|
||||
|
||||
相对层次结构:
|
||||
|
||||
- 封面组名称:约为正文大小的 5-7 倍,白色衬线,具有非常高的视觉重量和突出度。
|
||||
- 封面主标题/部分大标题:大约是正文大小的 3-4 倍,衬线体,可以全部大写。
|
||||
- 标准页面标题:大约是正文大小的 2.5–3 倍,黑色衬线,位于左上角。
|
||||
- 关键信息句子/页面的主要判断:大约是正文大小的2-3倍,可以是白色或黑色,居中或在条形内。
|
||||
- 副标题/模块标题:大约是正文大小的 1.2–1.8 倍,使用粗体无衬线或小衬线标题。
|
||||
- 正文项目符号/说明:正文 = 1x,无衬线,左对齐。
|
||||
- 表格文本/图表标签:大约是正文大小的 0.8–1 倍,可读性第一。
|
||||
- 注释、来源、页码:大约是正文大小的 0.55–0.75 倍,重量轻,但必须保持清晰。
|
||||
|
||||
排版规则:
|
||||
|
||||
- 标题和正文之间不要混合太多字体粗细;层次结构主要依赖于字体类别、大小倍数和位置。
|
||||
- 居中的大块文案仅适用于摄影宣言页;财务页面上的正文和脚注始终左对齐或表格对齐。
|
||||
- 数字可以加粗或放大,但单位、年份和测量基准必须直接位于它们旁边。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
使用 IR 标准条形图、堆积条形图、饼图/小圆形图、组合财务图表和表格数据,强调易于读取值和明确说明的测量基础。- 条形图:主要系列使用古铜棕色,次要或历史/比较部分使用灰色、浅棕色或黑灰色。条形图可以直接用值标记。
|
||||
- 堆叠条:用于成分分解,以棕色、灰色、黑色和浅色块区分;图例位于图表底部或右侧附近,虽小但大小清晰。
|
||||
- 饼图/小圆形图:作为条形图下方的组成补充,而不是页面的主要视觉效果。用于渠道/地区/品牌份额;不适合超过 4-5 片。
|
||||
- 轴和网格线:使用细灰黑色线,弱化或减少网格线。不要添加厚重的网格或复杂的背景。
|
||||
- 标签:放置在条形图、饼图切片或节点附近,采用黑色/深灰色小文本;关键的同比数据或增长率可以使用金棕色椭圆形或小标签。
|
||||
- 图例:紧凑且接近图表,不占据主要视觉效果。颜色含义必须与图表相符。
|
||||
- 注释和基线:保持细线和小标签样式。没有观察到稳定的预测/目标/红绿状态线系统——不要制造一个。
|
||||
- 图表页脚注:每张财务图表均应保留计量基础、单位和注释编号,放置在图表下方或页脚中。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格是财务附录和详细披露的“可验证数据容器”,而不是装饰模块。
|
||||
|
||||
- 标题:使用浅灰色或浅蓝色背景、粗体文本、简短清晰的列名称。标题线很细,没有粗边框。
|
||||
- 行和列:根据数字长度和文字说明分配列宽;数字列右对齐,文本列左对齐;年份/期间始终居中或右对齐。
|
||||
- 分隔线:主要是细灰色线;外边框不宜太重;键分组可以用稍深的线或浅的背景颜色分隔。
|
||||
- 行高:紧凑但不拥挤,允许高密度;相邻行中的数字绝不能接触。
|
||||
- 底色:以白色背景为主;浅蓝色/浅灰色表示标题、组行、摘要行或附录块;斑马条纹不是强制性的,如果使用的话应该非常微妙。
|
||||
- 关键行/列:可以用粗体、浅色背景或细顶部/底部规则来强调;不要用高度饱和的颜色填充整行。
|
||||
- 摘要行:数字可以加粗,分隔线稍强;保持与详细信息行相同的字体系统。
|
||||
- 符号和评级点:源文件只有少量符号标记,不构成主系统;不要添加复杂的评级图标。
|
||||
- 脚注:测量基础解释、缩写解释或来源必须放在表格下方,字体大小小于表格文本。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
稳定的成分和用途:- 顶部细黑规则:标准白色背景页面的页眉边界,跨越内容宽度。线条较细,无装饰加粗。
|
||||
- 底部细黑规则:标准白底页面的页脚边界,承载页码和脚注区域。
|
||||
- 右上角身份标记:群组名称呈现为纯小文本,无图形徽标;白底页面上的黑色文本,通常是摄影页面上的白色文本。保持小而清晰,不要与视觉中心的标题竞争。
|
||||
- 页码:位于右下角或底部边缘,根据背景以白色/黑色小文本显示。摄影页面可以使用白色,财经页面可以使用黑色或深灰色。
|
||||
- 半透明信息栏:摄影页面上的文字承载组件。使用浅灰/白色半透明底座,水平展开,承载短句、步骤、战略要点或数据。不得放置长段落。
|
||||
- 白卡:用于时间线节点、并行模块或照片上的小图表。边缘干净,没有圆角,基本上没有阴影。
|
||||
- 棕色强调条/色块:用于通道、策略或图表的主要系列、中小区域,起到强调作用而不是装饰作用。
|
||||
- 编号块/年节点:用于时间表、步骤和关键里程碑。数字大于说明文字,说明文字较短。
|
||||
- 小图例色块:用于图表系列说明,颜色与数据系列严格匹配。
|
||||
- 流程箭头/复杂的流程图:不被视为稳定的主要语言;如果必须表达一个过程,最好使用水平条目和细连接线,避免花哨的箭头。
|
||||
- 图标:彩色图标不是这种风格的特点;如果必须使用图标,也只能使用极少的小尺寸黑白线形符号作为辅助,而不是作为主要视觉。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体采用扁平、内敛、正式、低装饰的企业IR风格;品牌页面依赖于真实的摄影,金融页面依赖于空白、线条、表格和版式。
|
||||
|
||||
禁止:
|
||||
|
||||
- 表情符号、贴纸、卡通插图、3D 图标、发光文本、霓虹灯颜色、复杂纹理、夸张阴影、粗轮廓。
|
||||
- 在金融图表页面上使用大型照片背景或复杂的图案。
|
||||
- 将现有的棕色/灰色系统替换为高饱和度的红色/绿色以进行普通强调。
|
||||
- 金融或法律页面上的大块居中文本。
|
||||
- 没有规定测量基础的孤立大数字、没有图例的多色图表或没有脚注的财务表格。
|
||||
|
||||
谨慎使用:
|
||||
|
||||
- 渐变:源文件不将渐变视为主要样式;除了照片的自然光影外,不应人为添加渐变背景。
|
||||
- 阴影:卡片和信息栏基本上是平坦的;如果需要区分层次结构,请仅使用极其微妙的阴影,而更喜欢使用底色和线条。
|
||||
- 圆角:不是一个突出的特征;卡片的角应为方角或略圆角。
|
||||
- 彩色图标:仅在小型说明性辅助场景中谨慎使用,不得成为系统性装饰。
|
||||
- 大面积的品牌棕:会减少精致的束缚感;应主要用于图表和强调栏。
|
||||
|
||||
可用于特殊页面:
|
||||
|
||||
- 全出血照片背景:可用于封面、章节页面、品牌叙述页面和商店/工艺/历史页面;文本对比度必须很高。
|
||||
- 大居中的宣言文本:仅用于低信息密度的品牌意见页面,而不是附录或财务页面。
|
||||
- 半透明覆盖:用于摄影页面以提高可读性,而不是用于白色背景的财务页面。缺少的项目:没有稳定地使用复杂的插图、社交媒体风格的大图标、信息图表、动画箭头、装饰水印、背景几何图案或观察到的大面积彩色渐变。
|
||||
|
||||
## 11. 一代清单
|
||||
|
||||
- 骨架:根据页面类型选择全出血摄影骨架还是白底红外骨架?财经页面是否有顶部/底部细线、左上角标题、右上角身份标记(组名称呈现为纯小文本,无图形徽标)、页码和脚注区域?
|
||||
- 文案:标题是否是一个明确的主题句?每一页是否仅表达一个要点或一种公制?数字是否带有年份、单位和计量基础?
|
||||
- 层次结构:衬线标题和无衬线正文是否明确区分?标题、关键信息句、正文、表格和脚注的相对大小是否合理?
|
||||
- 颜色:是否保持在黑色/白色/灰色+棕色主色调+必要的浅蓝色桌面背景?是否避免了无意义的多色?白色文本是否位于足够暗的背景上?
|
||||
- 布局:摄影页面上的文字是否有变暗或半透明的载体?图表/表格是否在白色背景页面中占主导地位,而解释性文字从属?
|
||||
- 图表:系列颜色、图例、标签、单位和脚注是否一致?是否避免了繁重的网格、花哨的 3D 和无意义的渐变?
|
||||
- 表格:标题、组、摘要、数字对齐、分隔符、基色和脚注是否完整?高密度下仍然可读吗?
|
||||
- 组件:身份标记、页码、细线、信息栏、卡片和图例的位置是否一致?是否避免了图标和箭头的过度使用?
|
||||
- 禁止物品:是否避免使用表情符号、卡通插图、3D、发光、复杂阴影、霓虹灯颜色和大型装饰背景?
|
||||
- 技术质量:检查文本溢出、截断、乱码、重叠、低对比度、遮挡、空内容、错误比例、拉伸图像、未对齐的图表标签以及过多的模板重复。
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线条、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 1.5 MiB |
@@ -0,0 +1,142 @@
|
||||
#L014·组织名称股权影响报告2022风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
适合品牌风格的年度影响报告、ESG/DEI/社会责任披露以及企业文化和治理报告——长篇景观数字报告。针对公众、员工、合作伙伴、审稿人,采用易于导航、浏览和深度阅读的报告式PPT:页数多,正文中高密度,持久导航,关键章节通过全出血、高饱和度柔和的色彩切换节奏。
|
||||
|
||||
以品牌绿色为中心,叠加粉色、紫色、深绿色、黄色等平面色块,结合细长的顶部导航、宽边距的文本栏、圆角卡片网格以及少量的平面插画。
|
||||
|
||||
基本原则:
|
||||
- **长报告首先导航,个别页面表达第二**:始终保留顶部报告名称、部分列表、当前部分和页码,在呈现文本、卡片或表格之前明确确定部分位置。
|
||||
- **章节使用色块,正文页使用白色背景**:封面、章节标题页和意见页可以是全出血浅绿色/粉色/紫色/深绿色;解释、数据和附录页面更喜欢白色背景和浅色卡片,避免彩色背景吞没小字体文本。
|
||||
- **插图和曲线处理身份,网格处理信息**:插图、波浪线和音乐符号不会取代标题、表格、文本栏或卡片网格。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
- **画布比例**:横向 16:9,针对网络报告/PDF 横向阅读,而不是传统的现场演示模板。
|
||||
- **全局边距**:内容页面在所有边上保留宽阔的空白;左侧包含徽标、标题和正文起点,右侧用于第二/第三文本列、插图、卡片或数据模块。内容永远不会触及边缘;即使是全出血彩色背景页面也会保留安全区域。
|
||||
- **标题系统**:白色背景内容页面始终在顶部放置小品牌标记、报告名称、部分导航、当前部分/子部分和页码。标题轻巧低调;细波/路径线可以穿过顶部中心。
|
||||
- **页脚系统**:没有突出的常规页脚;脚注、来源和解释以小而低对比度的文本放置在正文下方或表格附近。不要构建沉重的页脚栏。
|
||||
- **标题区域**:内容页标题位于左上角的正文区域,主要是简短的单词或短语。章节页面使用“数字+章节名称”或独立的章节名称,明显放大并放置在左/左中心,而不是堆叠在中心。
|
||||
- **正文区域**:使用文本栏、卡片网格、图文配对、意见宣言和表格/数据披露。默认路径:左上标题→左正文/要点→中右卡片/插图/图表→底部注释。
|
||||
- **封面/章节页**:可能是全出血浅绿色、浅粉色、紫色或深绿色,底部或侧面有大波浪地形图形,右侧/角落有平面插图。标志小而内敛,标题位于左侧。
|
||||
- **目录页**:白色背景;左侧有一个小“内容”标题,中间有一个大字体的目录列表,章节号和页码清晰地排列在列中;导航和页码保留在右侧/顶部,并带有小插图仅作为强调。
|
||||
- **分隔线和水印**:无粗直线边框;使用细波浪线、浅灰色细线、卡片边界和色块边界。没有观察到稳定的水印系统——不应该添加任何水印系统。
|
||||
- **徽标**:品牌徽标位于左上角,采用黑色或白色小尺寸,确保对比度。不要把它放大成装饰品。
|
||||
|
||||
## 3. 内容组织- **标题样式**:使用报告式名词短语或简短的短语,例如“内容”、“重点领域”、“2022 年关键行动”、“战略”。部分页面添加数字前缀。标题避免营销口号式的长句;除了意见页面外,不要编写多行宣言。
|
||||
- **关键信息句子**:意见页面可能包含较大的、左对齐的宣言段落,从左上角到中间;普通内容页面使用标题+段落。
|
||||
- **正文组织**:以短段落组织,通常并排 2-3 列,用空行和列间隙分隔,谨慎使用密集的项目符号。正文可能相对较长,但每一列都保持可读性,没有全角长行。
|
||||
- **分组逻辑**:并行主题使用圆角卡片,通常为 2×2、2×3 或文本左/卡片右。卡片标题位于左上角,正文简短;同一组中的卡片使用相似的颜色或交替的浅绿色/紫色。
|
||||
- **每页点数**:章节/意见页仅包含 1 个要点;内容说明页为1个主标题+2-4个段落组;卡片网格页面包含 4-6 个平行主题;数据页通过标题和分隔符保持可搜索性。
|
||||
- **关键字强调**:使用卡片背景颜色、深色标题、本地按钮标签和重量/尺寸层次结构。请勿使用大面积霓虹灯突出显示或多色下划线。
|
||||
- **数字/单位/报告期和计量基础**:年份、页码、百分比和指标在表格或目录内的列中对齐;解释靠近数据本身,不会分离成单独的装饰性大数字,除非源页面本身是观点型强调。
|
||||
- **源脚注**:脚注比正文小,对比度低但可读;大量的解释、免责声明和审计信息集中在最后的附录/数据页中。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
### A. 全出血部分标题页:彩色背景 + 编号标题 + 插图/波浪地形
|
||||
用于章节开场和情绪转变。使用浅粉色、浅绿色、紫色或深绿色的全出血背景;左侧有编号和部分名称或宣言段落;深色波浪地形图形位于底部/侧面,右侧或角落有手、扩音器、星星或音乐符号的平面插图。依靠大标题和背景颜色来强调,而不是复杂的装饰。不得用于表格、长免责声明或多结论页面。
|
||||
|
||||
### B.白底多栏长文本页:左标题+2-3栏正文+浅色插图
|
||||
策略讲解、项目讲解、背景介绍。导航保留在顶部,短标题位于左上角,正文分为 2-3 列,段落紧凑,列距宽;小插图可能位于右下角或边缘。通过副标题、段落间距和列宽来组织重点。如果比较多个指标或显示许多数字,不要单独依赖多列文本 - 改用表格或卡片。
|
||||
|
||||
### C. 卡片网格页面:标题/导入 + 2×2 或 2×3 圆角卡片
|
||||
适用于重点领域、行动列表、价值维度或四象限策略。卡片占据中右区域,左侧有解释性文字或标题;使用浅绿色、紫色、粉色或深紫色背景,带有明显的圆角,文本在左上角对齐。一张深色卡片或更强的饱和背景可能会标记当前主题。不要让每张卡片都带有很长的段落;当模块超过 6 个时,分页。### D.图文配对页面:文字栏+大平面插画+按钮式标签
|
||||
有关年度关键行动、项目行动、补充链接或阅读指南。左边/中间是文本栏,右边是扩音器、手、心或叶子的插图;可以使用蓝色圆角按钮,例如“更多关键操作”。插图不得覆盖导航或正文,且不应作为数据解释的核心。不用于正式审计或表格披露页面。
|
||||
|
||||
### E. 全出血意见页面:大价值宣言+侧栏/注释+插图
|
||||
对于一个部分中的值声明。背景可以是浅紫色或深绿色;大块左对齐文本的大小高于正文,但低于封面标题;右侧是简短的解释或注释栏,中间/右下角有插图。只保留一个要点和一组补充说明。不要用居中的长文本填充页面。
|
||||
|
||||
### F.表格/数据披露页面:白色背景+简洁的表格+低调的标题
|
||||
报告末尾有数据、指标、原则和解释。导航保留在顶部;主体是一个网格表,带有对齐的数字和小字体注释,减少或删除插图和大色块。如果表格太宽,最好拆分为多个表格或水平组,而不是将其压缩到难以辨认。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
- **主要背景浅绿色#C3F0C9 / #C5F3CB**:用于封面、章节页、卡片背景和品牌标识,可以使用全出血。替换颜色必须保持高亮度,适合黑色/深紫色文本。
|
||||
- **深绿色#00634F / #007A5A**:用于波浪地形、暗部背景、局部标题或插图主体,中到大面积。当深绿色全出血时,使用白色或浅色文字;不要覆盖低对比度的绿色文本。
|
||||
- **深紫黑色#4F374F / #463347**:用于主要文本、深色卡片、波浪地形和插图阴影,可以替代纯黑色;不得以低对比度覆盖小深绿色/深蓝色文本。
|
||||
- **浅粉色#FFCDD2 / #FBCED2**:用于部分背景、卡片背景和插图,可以是全出血;可以用类似亮度的暖色代替,但不用于严重数据表背景上的大面积填充。
|
||||
- **亮粉色#F573A1 / #F673A1**:用于插图高光、心形和局部强调、小区域;不得用作大型正文块的背景或同时在多个图表系列中过度使用。
|
||||
- **浅紫色#CDB8E3 / #D3BDE9**:用于意见页面背景和卡片背景,可大面积使用,搭配深紫色文本;不应该用作小而密集的表格的背景。
|
||||
- **蓝色#2D46BA**:用于按钮式跳转和少量图表/组件强调,中小区域;不得取代主品牌绿色作为整个报告的主色调。
|
||||
- **#F3C64E** 周围的黄色/橙黄色:用作某些部分/插图的暖背景或辅助颜色。谨慎使用,避免与浅绿色、粉色、紫色同时大面积竞争。
|
||||
- **白色#FFFFFF / 近白色#F8F8F8**:内容页和表格页的基础背景,面积最大;内容页面更喜欢白色背景。
|
||||
- **浅灰色#D2D0D1 / #E6E4E5,灰色#909791**:用于表格线、辅助标签、弱导航文本和分隔线、小区域。
|
||||
|
||||
在单个页面上保留 1 种主要背景颜色 + 1 种深色文本颜色 + 1–2 种插图/卡片强调色。数据/状态颜色不应扩展为彩虹图;如果一定要加正反状态的话,优先选择深绿/粉红或深紫/浅灰,主要依靠文字说明。
|
||||
|
||||
## 6. 字体和文本层次结构- **字体字符**:Geneva 是主要字体;封面/章节大标题可能会使用 ArialMT。整体无衬线、圆润、低装饰。不要将衬线字体混合作为常规标题。
|
||||
- **正文基线**:正文 = 1x,用于段落、卡片说明和导航文本。
|
||||
- **脚注/页码/顶部导航**:约 0.65–0.8x,低对比度,靠近表头或底部;必须可读,但不能与正文竞争。
|
||||
- **卡体/桌体**:约0.8–1x;表格可能稍小,但保持行距和对齐。卡牌标题约为 1-1.2 倍。
|
||||
- **正文副标题/模块标题**:约 1.2–1.5x,左对齐,通过位置和间距进行区分,不加粗。
|
||||
- **页面标题**:大约 2-3x,大部分是短词,放置在左上角。
|
||||
- **章节标题/封面标题**:大约 4–5x 或更高,整个页面上最大的一层。
|
||||
- **意见宣言**:大约2-3倍,多行左对齐,行距紧凑但不拥挤。
|
||||
- **文本对齐方式**:左对齐为核心;目录页码可以右对齐/列对齐,表号可以按列对齐。避免大的中心块。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
源文件主要是报告文本、卡片和表格,没有强大的数据可视化系统——不要制作复杂的图表样式。
|
||||
|
||||
- **类型边界**:更喜欢简单的条形/折线/表格指标;不要使用 3D、彩色区域填充、复杂的雷达图或装饰性信息图表。
|
||||
- **轴和网格**:使用细灰色轴和浅灰色网格线,其存在低于数据;不要使用粗的黑色轴线。
|
||||
- **标签和图例**:标签在数据点附近使用正文或表格大小的小文本;图例位于上方或右侧,避开主标题区域。
|
||||
- **系列颜色**:使用品牌颜色——深绿、浅绿、深紫、蓝色、粉色——很少有系列。一页上不要超过 4 个浓色系列。
|
||||
- **关键数据**:用深紫色/蓝色强调、圆角标签或注释箭头进行标记;关键解释必须以文字形式表达,而不能仅通过颜色来传达。
|
||||
- **预测/目标/基线**:使用带有简短标签的灰色或深紫色细虚线/实线。不要使用发光线、渐变填充或浓阴影。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
- **表格角色**:承载数据披露、报告原则和审计/附录说明——它是“可搜索的证据”,而不是视觉主角。
|
||||
- **标题**:使用浅灰色或白色背景,文本稍大或比表格主体高一级;深紫黑色可以强调。标题不使用粗黑条,除非与深色部分页面一致匹配并保持可读。
|
||||
- **行/列结构**:使用细灰色分隔线;文本列比数字列宽。长文本可以换行,但不得压缩为过紧的行间距。
|
||||
- **行高和密度**:保持高密度和可读的行距。不要为了填满一页而让多行文本重叠或截断。
|
||||
- **底色和斑马条纹**:近白色、浅灰色或极浅的浅绿色背景可以对行进行分组;如果使用斑马条纹,则必须非常微妙。避免在密集的桌子上铺满大面积的粉色/紫色。
|
||||
- **关键行/列**:使用浅绿色背景、深紫色文本或细边框;摘要行可能会稍微加粗或给出浅色背景 - 不要使用强烈的红色/黄色警告。
|
||||
- **数字/文本对齐**:文本左对齐,数字按列右对齐或按小数位对齐,百分比/单位在同一列内使用一致的测量基础。脚注标记使用小上标或符号,说明位于表格下方。
|
||||
- **符号标记/评级点**:源文件显示没有稳定的图标评级系统 - 不要添加复杂的红/黄/绿灯或星级评级。
|
||||
|
||||
## 9. 组件和图形元素- **顶部导航栏**:最重要的全局组件,包含徽标、报告名称、章节/小节列表、当前位置、页码和细波浪线;必须轻、薄、小。
|
||||
- **目录列表**:大节名称+数字+一列页码,右侧可选有一个小圆圈/链接符号。仅在目录页面上使用 - 不要在常规页面上重复较大的目录。
|
||||
- **圆角卡**:用于平行主题、战略维度和关键行动。明显的圆角,背景大多为浅绿色/紫色/粉色,文字在左上角对齐;间距均匀,没有添加阴影。
|
||||
- **按钮式标签**:用于跳跃或补充动作,如蓝色圆角按钮;小区域——不要把每个小标题变成一个按钮。
|
||||
- **波浪地形/曲线**:用于封面、章节页和页眉。底部的大波浪起到构图的作用;标题中的细波浪用于导航。不要向数据表页面添加大的波浪,这会扰乱读取。
|
||||
- **平面插图**:包括扩音器、手、心、星星、叶子和音乐符号,使用带有黑色/深紫色轮廓的品牌调色板;放置在右侧、底部或角落,不携带复杂的信息。
|
||||
- **小图标/符号**:音符、箭头和星星可以作为重音;彩色图标系统不稳定,无法替代文字标签。
|
||||
- **提示盒/侧栏**:使用浅色圆角盒来承载补充信息或年度亮点;与正文分开分层,避免与主卡片混淆。
|
||||
- **分隔线**:使用细灰线、波浪线和卡片边界;不要使用粗边框、双线框或强烈的阴影边界。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体采用扁平、亲切、品牌化、轻装饰的质感,通过色块、插图、圆角卡片、导航系统来建立身份,几乎没有使用真实的摄影或复杂的纹理。
|
||||
|
||||
**禁止**:
|
||||
- 3D 图形、立体按钮、发光、金属纹理、强烈阴影、玻璃形态。
|
||||
- 大照片背景、真人照片拼贴或屏幕截图堆叠作为主要视觉效果。
|
||||
- 复杂的渐变、纹理背景、噪音装饰、厚重的边框。
|
||||
- 表情符号、社交媒体贴纸式图标、彩虹式图标集。
|
||||
- 居中的大块文案、没有导航的整页正文、压在插图或复杂深色背景上的正文。
|
||||
|
||||
**谨慎使用**:
|
||||
- 插图:可用于章节、意见和图文页面;应减少表/审计/高密度数据页上的数量。
|
||||
- 全出血彩色背景:适用于封面、章节和价值宣言;不适合长桌子和密集的小字体。
|
||||
- 蓝色按钮:仅用于跳跃/动作提示,不作为通用强调色。
|
||||
- 多色卡:控制单页上的色调数量,避免每张卡使用一种强烈的颜色。
|
||||
|
||||
**可在特殊页面上使用**:
|
||||
- 封面和章节页面可以使用大波浪地形、全出血彩色背景和大插图。
|
||||
- 意见页面可以使用全出血的深绿色或浅紫色,搭配白色或深紫色文本的大宣言。
|
||||
- 附录/数据页可能会牺牲视觉兴趣,返回到白色背景的细线表格。
|
||||
|
||||
## 11. 一代清单- 骨架:是16:9吗?内容页面是否具有宽边距、左上角徽标、顶部导航、页码/当前部分;是否避免使用过重的页脚?
|
||||
- 文案语法:标题是否简短且报告式;各部分是否已编号;意见页面是否只提出一个要点?正文是否以左对齐的短段落组织?
|
||||
- 层次结构:正文 = 1x;导航/脚注是否小于正文;页面标题约为 2-3x;章节/封面标题是否最大;没有硬编码特定的字体大小吗?
|
||||
- 颜色:浅绿色/深绿色/深紫色为主,粉色/紫色/蓝色为次要;任何单页是否避免超过 1 个主要背景色 + 1-2 个强调色;文字对比度是否足够?
|
||||
- 布局:是根据内容选择的布局——多栏、卡片网格、图文配对、意见页或表格页;是否可以避免将长表格填充到章节标题页中?
|
||||
- 图表:是否受到限制,网格细且系列少;是否避免了 3D、彩色渐变和过多的状态颜色?
|
||||
- 表格:标题、行/列、数字对齐和脚注是否清晰;是否没有过度拥挤、截断或低对比度的情况?
|
||||
- 组件:圆角卡片、波浪线、按钮和插图是否具有清晰的信息功能;是否可以避免过度使用图标来代替文本?
|
||||
- 禁止物品:是否没有照片背景、表情符号、复杂的装饰、强烈的阴影、发光、纹理、玻璃形态或大居中的长文本?
|
||||
- 输出质量:检查是否有溢出、乱码、重叠、遮挡、空卡、对比度低或比例错误;导航不应机械地重复以覆盖正文,并且插图不应压在文本上。
|
||||
|
After Width: | Height: | Size: 257 KiB |
@@ -0,0 +1,138 @@
|
||||
#软云层诊断叙事·PPT设计系统(无品牌、可重复使用版本)
|
||||
|
||||
本文档是根据 32 页的技术演讲源代码进行逆向设计的,仅保留视觉语言和叙述方法,以便在任何技术提案风格的演示中重复使用。全文不包含第三方徽标、品牌名称、人物、产品屏幕截图、源甲板正文或原始数据;任何无法精确采样的值都被标记为“近似值”。
|
||||
|
||||
适用场景:性能诊断、监控建议、技术方法论讲座——遵循“提出问题→建立指标→给出方法→展示证据→闭环”的叙述式演示。
|
||||
|
||||
## 视觉DNA
|
||||
|
||||
- 主色调:**白色背景+粗体深蓝色标题+单一强调色条**。页面有丰富的空白,中低信息密度,每页一个点。
|
||||
- 性格关键词:干净、内敛、柔和、工程感。所有装饰都服务于叙事——装饰从来不是为了装饰本身而添加的。
|
||||
- 两种封面情绪:
|
||||
- 开盖采用**柔和的粉紫色云层渐变**(大约`#F7CDD8`→`#DCC8F2`),营造出轻松、友好的第一印象。
|
||||
- 结束页面使用**深紫色渐变**(大约“#3A1D6E”→“#5C40A8”)和大白色文本,结束整个演讲。
|
||||
- 重复出现的标识元素:标题左侧下方的**短而粗的下划线**(大约是标题第一个单词的宽度,大约 4-6 像素高),其颜色随当前部分的主题颜色(黄绿色或亮黄色系列)切换。这是整个牌组唯一的“品牌锚”,可以替换为任何主题颜色。
|
||||
- 页面强调依赖于**字体粗细和粗体关键字**,偶尔使用单个表情符号(每页最多一个);不使用图标堆叠。
|
||||
|
||||
## 画布和网格
|
||||
|
||||
- 宽高比:**16:9**(1280×720或同等水平),横向投影优先。
|
||||
- 安全边距(大约):左右各约 5%(约 64px @1280),顶部约 6%,底部约 8%(页脚区域)。
|
||||
- 网格:隐式 12 列网格。正文默认为左对齐单列,占据左侧7-8列;图像文本页面通常使用“文本左,图像右”7:5 分割,或跨 10 列的居中大图像。
|
||||
- 基线规则:标题始终从相同的 y 坐标开始(距离顶部大约 8-10%);正文的起点始终位于标题下划线下方约 48-64 像素处,不会在整个甲板上漂移。
|
||||
- 底部对角色带:某些章节页面在底部边缘或右下角(高度约为画布的 15-25%,对角线角度约为 5-10°)放置**大角度对角色带**,作为章节分隔的视觉信号;内容页面通常保持纯白色。
|
||||
|
||||
## 字体层次结构
|
||||
|
||||
字体系列:sans-serif 系统字体(例如 Arial / Helvetica / 系统默认 sans、近似字体)。不要使用衬线或装饰字体;为代码或其他特别需要它的内容保留等宽字体。
|
||||
|
||||
|等级 |目的|字体大小(大约,1280 宽度基线)|重量 |颜色 |
|
||||
|---|---|---|---|---|
|
||||
| H1页面标题 |每页单个标题 | 34–40 像素 |大胆|深蓝色墨水 |
|
||||
|封面主标题|开盖| 40–48 像素 |大胆|深紫色|
|
||||
|封面字幕 |署名/日期行 | 20–24 像素 |斜体/常规|深紫色(浅色)|
|
||||
|副标题/定义问题 | “X 是什么?”式的引导句 | 18–22 像素 |大胆|深蓝色墨水 |
|
||||
|正文/列表 |要点、段落| 16–18 像素 |常规,关键字粗体|深灰色|
|
||||
|注释/页脚 |版权、来源、小字 | 10–12 像素 |常规|中灰色|规则:
|
||||
- 标题大多是**问题或断言陈述**(例如,“我们的目标是什么?”、“上下文就是一切”),直接通过标题推进叙述。
|
||||
- 正文强调使用内联粗体,而不是颜色变化或下划线。
|
||||
- 定义页面遵循固定的句子模式:一个副标题问题+一个定义段落(关键词加粗)+一个“目标句子”,总结指标对应的体验目标。
|
||||
|
||||
## 颜色标记
|
||||
|
||||
以下是反向采样的近似值;在实现上进行微调,但保持“低饱和度基色+一种高饱和度强调色”的关系。
|
||||
|
||||
- `--ink` (标题/强调文本):深蓝色墨水,大约为 `#1C2B4A`
|
||||
- `--body`(正文):深灰色,大约为`#333A45`
|
||||
- `--muted`(注释/页脚):中灰色,大约为`#8A93A0`
|
||||
- `--paper`(底色):纯白色`#FFFFFF`
|
||||
- `--accent-lime`(主题重音 A,绿色系列部分):大约为 `#8CC63F`,用于标题下划线、对角色带和循环图
|
||||
- `--accent-yellow`(主题重音 B,黄色系列部分):大约为 `#F2A900`,用于标题下划线、对角色带和任务栏
|
||||
- `--cover-gradient`:粉色`#F7CDD8` → 淡紫色`#DCC8F2`(覆盖云层基底)
|
||||
- `--end-gradient`:深紫色`#3A1D6E` → 紫色`#5C40A8`(结束页底)
|
||||
-`--purple-title`(封面标题):大约`#6E2E7E`
|
||||
- 三态状态颜色(评级/阈值图例,近似):`--ok``#3FBF6F`,`--warn``#F5C400`,`--bad``#F05A5A`
|
||||
- 时间线栏颜色(大约):任务段 `--task` `#F5D76E`,事件段 `--event` `#B98FE0`
|
||||
|
||||
使用限制:每个页面有 **一种且仅有一种** 强调色(绿色系列或黄色系列,由章节决定);三态状态颜色仅出现在评级图例中,不会与部分强调色混合进行装饰。
|
||||
|
||||
## 页面骨架
|
||||
|
||||
整个套牌围绕“诊断叙事弧”组织,具有可重复使用的骨架序列:
|
||||
|
||||
1. **封面**:渐变云层底座+左对齐主标题/副标题,右上角留有活动或机构标记槽(重复使用时留空,或自行标记)。
|
||||
2. **报价页面**:纯白色背景,超大引号字符(主题色)+报价段落+破折号署名线,底部有对角色带。用于建立主题权威。
|
||||
3. **目标页面**:问题式标题+最多4项的项目符号列表,回答“我们追求什么”。
|
||||
4. **章节标题页**:纯白色或带有对角色带,大的简短短语标题(例如“常见指标”),用作章节分隔符。
|
||||
5. **指标定义页面**(分组重复,每个指标 1-3 页):
|
||||
- 定义页面:问题式副标题+粗体关键词定义+目标句。
|
||||
- 问题页面:“X 的一些问题”式的限制列表。
|
||||
- 计算/测量页面:公式或图表+线框插图,例如手机轮廓。
|
||||
6. **方法转折点页面**:一个大文本问题(例如,“那么……我们应该测量什么?”)+一个诙谐的答案,取自前半部分的设置。
|
||||
7. **上下文/方法页面**:清单式问题(“我们关心……吗?”),将绝对指标拉回具体场景。
|
||||
8. **实现页面**:text-left/code-right,全角代码,或步骤列表,解释实现手段。
|
||||
9. **证据页面**:时间线图、前后比较或评级栏,呈现测量结果。
|
||||
10. **闭环页面**:循环图(测量→分析→改进),强调“连续过程”。
|
||||
11. **回顾页面**:5-6 个粗体关键词点的“回顾”摘要。
|
||||
12. **结束页面**:深紫色渐变+大白色“问题?”式文本。
|
||||
|
||||
## 可重用布局- **L1纯列表页**:标题+下划线+项目符号列表(≤6项,每项在一行半以内)。适用于:目标、限制、摘要。
|
||||
- **L2 左文本/右图像页面**:40% 文本位于左侧(定义/列表),60% 大图像或图表位于右侧。适用于:用说明性截图式图表解释概念、代码解释。
|
||||
- **L3 居中大图像页面**:标题位于顶部,居中图像位于下方,横跨 60-80% 的宽度(时间线图、瀑布图、曲线图)。适用于:证据呈现。
|
||||
- **L4比较页面**:两组匹配的线框图(例如,手机线框、任务栏)左右或上下排列,通过中间箭头连接,标记为之前/之后。适用于:优化前/优化后,两种替代方案。
|
||||
- **L5公式页**:标题+居中的公式行+下面的说明性示例+一行计算结果。适用于:度量算法。
|
||||
- **L6 引用/问题页**:单个大文本句子,居中或左偏移,与主题颜色符号(引号、省略号)配对。适用于:过渡和音调设置。
|
||||
- **L7 代码页**:标题 + 黑色圆角代码块(位于右侧或全角),左侧有 2-4 行解释。代码块内的语法突出显示使用柔和的配色方案,而不是纯黑色背景(大约深炭灰色“#2B2F38”)。
|
||||
- **L8 循环图页面**:居中环/循环箭头图(3 个节点:测量、分析、改进),环中心有一个句子。适用于:方法闭环。
|
||||
|
||||
## 图表/表格/图像/组件规则
|
||||
|
||||
- **时间线/瀑布图**:水平带表示阶段持续时间,阶段以软填充颜色区分(黄色=任务,紫色=事件,近似),细引导线连接到阶段名称标签;垂直或水平轴仅保留必要的刻度线。
|
||||
- **任务前/任务后栏**:两个水平栏——顶行“优化前”为一个长栏,底行“优化后”分成几个短栏,箭头标记事件处理点;颜色如上。
|
||||
- **评级栏组件**:一个大的度量缩写(主题颜色或深蓝色)+下面的三个颜色条(绿色/黄色/红色)标记良好/需要改进/差及其阈值,三个并排放置用于比较。重用时,替换为任何三层评级语义。
|
||||
- **线框设备插图**:使用简单的圆角矩形线框来表示手机/浏览器视口,内部仅使用灰色块占位符来表达内容布局,并使用红/蓝色虚线和箭头标记位移或区域; **不要嵌入真实的产品屏幕截图**。
|
||||
- **曲线图**:单条平滑曲线+稀疏轴(三层刻度,如0%/50%/100%),没有网格线,大部分是空白。
|
||||
- **循环图**:一个环被分成三个相等的箭头段,节点词沿环的外侧排列,短句位于环的中心,箭头使用主题绿色渐变。
|
||||
- **表格**:整套牌几乎从不使用数据表格;如果需要,请使用没有垂直规则、行之间的细分隔线以及粗体、无背景标题的极简风格。
|
||||
- **图像**:始终居中放置,带有细灰色边框或无边框;禁止使用第三方产品界面截图、真实网站照片或人物照片。
|
||||
- **列表符号**:点是默认值; “推荐/满意”类型列表可以使用绿色复选标记(✅)而不是点。
|
||||
|
||||
## 密度和间距- **每页一个核心信息**:标题是结论,正文仅支持该结论。
|
||||
- 列表页正文不超过6项;定义-页面正文不超过120字;代码页代码不超过 25 行可见行。
|
||||
- 段落间距(大约):标题下划线 → 正文 48–64px;列表项之间 12–16px;图像 → 标题文本 24–32 像素。
|
||||
- 空白比例:在纯白色的内容页面上,有效内容区域约占画布的50-65%,其余为空白;更喜欢跨页面拆分而不是压缩行距。
|
||||
- 总页数节奏参考(32页):设定40%(目标+指标定义),转折点10%,方法和证据35%,结束15%。
|
||||
|
||||
## 页脚和页码
|
||||
|
||||
- 页脚位置:左下角,单行 10–12px 中灰色小文本(大约),包含版权行,如“© 年份机构名称。保留所有权利。”;重复使用时替换为您自己的机构,或将其删除。
|
||||
- **小标记槽**可以放置在页脚的左侧(大约 16×16 像素的彩色点/图形占位符);重复使用时,放置您自己的徽标或将其留空 - 不要重复使用源甲板的标记。
|
||||
- 源甲板**不明确显示页码**;如果需要页码,建议在右下角使用 10 像素的中灰色数字,与页脚在同一基线上。
|
||||
- 封面和结束渐变页面没有页脚或页码。
|
||||
|
||||
## 违禁物品
|
||||
|
||||
- 请勿复制任何第三方徽标、会议标志、品牌名称、商标或吉祥物图形。
|
||||
- 请勿使用真实的产品/网站屏幕截图、真实数据或源数据中的原始图表和特定值。
|
||||
- 不要引用源代码正文中的句子;定义和文案必须按照该系统的句型重写。
|
||||
- 请勿包含人物照片或演讲者的肖像。
|
||||
- 请勿混合多种装饰色:每一页仅限使用一种强调色进行装饰(三态状态图例除外)。
|
||||
- 请勿使用阴影、渐变文本、轮廓大文本、3D 效果或复杂纹理背景(封面和闭页上指定的渐变除外)。
|
||||
- 不要使用衬线或手写字体,并且不要引入超出指定常规/粗体粗细和有限斜体使用的装饰变体。
|
||||
- 纯白色内容页面不要添加大色块背景;仅允许在底部对角线带、标题下划线和内部图表中使用颜色块。
|
||||
|
||||
## 交货清单
|
||||
|
||||
- [ ] 16:9 宽高比,边距和标题基线始终保持一致。
|
||||
- [ ]每一页只有一个标题和一个核心信息;标题是一个问题或一个断言。
|
||||
- [ ] 标题下划线存在且其颜色与当前部分的强调色相匹配。
|
||||
- [ ] 整个牌组仅使用字体层次结构表中的字体大小/粗细/颜色组合。
|
||||
- [ ] 章节顺序遵循“问题→指标→转折点→方法→证据→闭环→回顾→结束”骨架。
|
||||
- [ ] 指标相关内容采用“定义页+限制页+计算/证据页”的分组结构。
|
||||
- [ ] 至少包含一张前后比较页面和一张闭环图页面。
|
||||
- [ ] 图表颜色取自标记,图表之外没有额外的装饰颜色。
|
||||
- [ ] 封面是柔和的粉紫色云层渐变;结束页是深紫色渐变+大白字。
|
||||
- [ ]页脚版权行已替换为您自己的机构或删除;没有保留源甲板标记;页码样式兼容。
|
||||
- [ ]文档不包含第三方品牌、截图、人物、原文、原始数据;近似值已根据实际需要进行校准。
|
||||
- [ ] 纯白页面留白≥35%,无拥挤分页;代码行数和列表项数保持在限制范围内。- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线条、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 350 KiB |
@@ -0,0 +1,139 @@
|
||||
# 学术论文答辩设计系统(无品牌,可重复使用)
|
||||
|
||||
> 适用场景:长篇学术论文答辩/研究报告/论文讲座(100+页规模)。该系统仅抽象了视觉和布局规则,不包含品牌、人物、机构、标题、原文、原始图形或真实数据。
|
||||
|
||||
---
|
||||
|
||||
## 1.视觉DNA
|
||||
|
||||
- **性格**:内敛、学术、白色背景的极简主义。信息密度很高,但空白很丰富,通过印刷层次结构而不是装饰来取胜。
|
||||
- **底色**:纯白色画布,很少出现全出血色块;颜色仅用作功能编码(强调、分类、进度),从不用作装饰。
|
||||
- **线条质量**:核心插图采用手绘/艺术线条风格(细黑线、灰色填充),与无衬线字体形成对比,营造出“严谨的框架+平易近人的图表”的感觉。
|
||||
- **渐进式叙事**:相同的构图在多个页面上逐步构建(逐帧突出显示、变灰、添加元素)——这是该套牌最重要的表达手段,因此静态页面必须为“逐步揭示”保留空间。
|
||||
- **双引擎结构**:主线程部分由全角导航页脚驱动;侧线/备份幻灯片(额外幻灯片)使用简化的页脚,通过一个稳定的页面骨架统一 140 多个页面。
|
||||
|
||||
## 2. 画布和网格
|
||||
|
||||
- **比例**:16:9 横向。
|
||||
- **安全边距**:左侧和右侧约占画布宽度的 4-5%,顶部约 6%,底部为页脚区域保留约 10-12%。
|
||||
- **主网格**:大部分是单列;对于两列比较,两侧宽度相等(48/48,中间有 4% 的间隙);对于四列卡片网格,四个等宽的列且列间隙一致。
|
||||
- **对齐**:标题、正文、图表均左对齐;仅涵盖次要信息、分隔页大文本,致谢页可以居中或居中偏左。
|
||||
- **内容区域**:标题区域(顶部,一行)+正文区域(中间,大约高度的70%)+页脚区域(底部的固定带)。在正文区域内,当图表和文本混合时,文本位于左侧,图表位于右侧或中心。
|
||||
|
||||
## 3. 字体层次结构
|
||||
|
||||
整个套牌使用单一的无衬线字体家族(具有人文主义的无衬线字体感觉),仅通过重量和大小来区分;代码/公式片段使用等宽字体。
|
||||
|
||||
|等级 |目的|相对尺寸|重量 |颜色 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| H0 |封面主标题| 100% 基线 ×2.2 |大胆|近乎黑色|
|
||||
| H1 |内容页标题 | ×1.5 |大胆|近乎黑色|
|
||||
| H2 |栏标题/卡片标题| ×1.1 |大胆|近乎黑色|
|
||||
|分隔页大文本|部分分隔页 | ×1.8 |粗体(关键词)+常规(其余,浅灰色)|黑色/浅灰色混合|
|
||||
|身体|列表和段落| ×0.85 |常规|近乎黑色|
|
||||
|小文字 |脚注、表格注释、图标题| ×0.6 |常规|中灰色|
|
||||
|页脚|导航和页码| ×0.5 |常规(当前项目粗体)|灰色/黑色 |
|
||||
|
||||
- 车身线条高度1.3–1.4;列表项间距是行高的 0.5 倍。
|
||||
- 强调仅限于:**粗体**、主题颜色和局部突出显示背景 - 不使用斜体、下划线和阴影文本。
|
||||
|
||||
## 4. 颜色标记|代币|颜色值(近似值)|目的|
|
||||
| --- | --- | --- |
|
||||
| `背景` | `#FFFFFF` |全局基色|
|
||||
| `墨水` | `#1A1A1A` |标题和正文 |
|
||||
| “墨迹静音” | `#8C8C8C` |辅助文本、非当前页脚项目、灰显状态 |
|
||||
| `线` | `#BFBFBF` |表格规则、连接线、图表轴线|
|
||||
| `口音`(主要)| `#2E8B7E` 深青绿色 |列表方形标记、分隔页轮廓、引用/标签块背景 |
|
||||
| `口音洗` | `#DFF1EE` |标签块的浅色背景|
|
||||
| `信息`(次要)| `#5B9BD5` 中蓝色 |目标/结论横幅、卡片标题、图标背景 |
|
||||
| `信息清洗` | `#E8F1FA` |横幅和卡体的光填充 |
|
||||
| `突出显示` | `#F2B90F` 琥珀 |渐进式构建过程中的“当前焦点”突出、关键值、本地背景 |
|
||||
| `注释` | `#8E5AA8` 紫色 |注释气泡、引号框 |
|
||||
| `危险` | `#C0504D` 红色 |否定、错误路径、取消标记(非常谨慎地使用)|
|
||||
| `中性标签` | `#9AA5B1` |次要组栏(例如“基线/间隙”组标题)|
|
||||
|
||||
规则:每页彩色面积≤15%;相同的语义含义在整个牌组中保持相同的颜色(例如“进行中/焦点”始终是琥珀色);变灰是表达“过去/不相关”的唯一方式。
|
||||
|
||||
## 5. 页面骨架(大师)
|
||||
|
||||
1. **封面**:左上角的标题栏(主标题粗体+副标题+一小行署名/日期);下面是一个全角深色横幅图像,约占高度的 1/4(抽象纹理,不是人物照片)。
|
||||
2. **部分分隔页 A(灰色文本样式)**:居左居中的大标题,非关键字部分采用浅灰色常规字体,关键字部分采用黑色粗体,形成“一句话内的明暗对比”。
|
||||
3. **部分分隔页B(轮廓框架样式)**:位于页面中心的细线圆角矩形(`重音`轮廓,无填充),部分名称以粗体居中居中;甚至上面和下面的空白。
|
||||
4. **标准内容页**:左上角H1;主体区域包含列表/两列/图表/表格;底部的固定页脚(参见§9)。
|
||||
5. **章节摘要页面(摘要)**:H1 为“章节名称 - 摘要”;左侧是一个三部分的结构化列表(任务/方法/结果,每个部分有 2-4 个方形标记子项),右侧有一个方法图 + 1-2 个源标签块(`accent-wash` 背景 + `accent` 文本 + 一个小图标)。
|
||||
6. **结论/结束页面**:重用标准内容页面,列表项允许以反向引用标记结尾,例如“→ 目标编号 ✓”(圆圈 + 数字 + 复选标记)。
|
||||
7. **致谢页**:纯文本,居中,两行(主句+次句),可选配简单符号。
|
||||
8. **参考文献页**:H1 + 两列或单列密集编号小文本列表(×0.55 大小),没有其他装饰。
|
||||
9. **备份/附录页面**:与主要内容共享相同的框架,但页脚切换为简化的导航(仅 3-4 组 + 点进度指示器)。
|
||||
|
||||
## 6. 可重用布局- **L1单栏列表**:H1 + 多级方形标记列表,最多三级;第 1 级使用实心“强调”正方形,第 2 级使用相同颜色的小正方形或短划线,第 3 级使用空心/灰色。
|
||||
- **L2 两列比较**:两个等宽列,以粗体短语作为列标题(“A 寻找…/B 寻找…”模式),每列包含一个短列表;它们之间没有绘制分隔线——分组依赖于间距。
|
||||
- **L3 居中简洁陈述**:页面中心的粗体陈述行(可能包括 ⇒ 等符号),上方和下方有大的空白;用于过渡参数页面。
|
||||
- **L4横幅卡**:“info-wash”背景+左侧实心“info”图标区域+右侧粗体标签+一行解释;圆角、细边框;用于“需要记住”的陈述,例如研究目标或核心结论。
|
||||
- **L5多列目标矩阵**:顶部的圆形“info”标题栏(左侧有齿轮型图标)→其下方的“neutral-tag”组标题(两组:基线/间隙)→4个等宽列,列标题为圆形“info”芯片(数字+短名称),列主体为“info-wash”填充的圆角矩形;最左侧的垂直侧边栏,嵌入 4-6 行图标 + 垂直排列的类别文本。矩阵单元支持三种填充状态:空(尚未讨论)/✓✗比较网格/编号点+源标签。
|
||||
- **L6渐进构建页面**:相同的构图跨越多个连续页面,每个页面仅添加一个变化:①新元素淡入; ② 用“突出显示”黄色框/背景强调现有元素; ③ 非焦点元素整体变灰(“ink-muted”)。页面必须设计为足够稳定的组合,“再添加一层仍然不会使其崩溃”。
|
||||
- **L7 左文本/右图像**:左侧为结构化列表,右侧为线条图(文档图标、连接线、标签芯片);图像约占宽度的45%。
|
||||
- **L8 全角表格/图**:H1 + 占据正文面积 90% 的表格或图表,紧随其后的是小文本脚注。
|
||||
- **L9大对照表**:多行多列的度量对照表+底部一行小脚注文字解释测量依据。
|
||||
|
||||
## 7.图表/表格/图像/组件规则
|
||||
|
||||
**图表**
|
||||
- 风格:学术简单图表。细灰色轴线,无装饰刻度线,直接标注;条形图、折线图和散点图都可用,颜色仅限于“强调”、“信息”、“突出显示”+两种灰色阴影。
|
||||
- 误差线和置信区间用细线表示;图例位于图表内的右上角或右侧,大小为 ×0.6。
|
||||
- 当多个子图并排时,统一轴范围和字体大小;子图标签使用小 (a)(b)(c) 标记。
|
||||
- 时间/趋势折线图可以使用多条彩色细线,但同一指标必须跨页面使用相同的颜色。
|
||||
|
||||
**表格**
|
||||
- 三行表格变体:顶部和底部有一条中等细的水平线,标题下方有一条细水平线,没有垂直线或只有极微弱的垂直线。
|
||||
- 标题为粗体,数字右对齐或小数点对齐;最好的值可能是粗体+带有“强调”的颜色,但每列最多一次。
|
||||
- 表脚注:上标字母/符号 + ×0.55 灰色文本,紧跟在表后面。**图像和图表**
|
||||
- 仅使用两种类型: ① 抽象全角横幅(仅限封面); ② 线条图(文档/管道/流程)。禁止使用照片、屏幕截图和现实插图。
|
||||
- 线条图惯例:细黑色轮廓、模拟文本行的灰度填充、标记关键位置的小彩色芯片;元素通过灰色弯曲箭头连接,箭头仅指示方向,而不指示重量。
|
||||
- 图标:一组统一的线条图标(相同的笔画宽度,相同的角半径),有两种尺寸(列表内/卡片内),颜色为“强调”/“信息”/灰色。
|
||||
|
||||
**组件**
|
||||
- 方形标记列表:实心小方形■,采用“强调色”,大小约为文本高度的0.45 倍。
|
||||
- 来源/引文标签块:圆角矩形,`accent-wash`背景+`accent`文本,左侧有一个小文档图标; 1-2 可能会并排出现在同一页上。
|
||||
- 注释气泡:圆角矩形+指针线,“注释”轮廓,内部包含手写感的短句或公式片段;仅用于“文本引用/参数”类型注释。
|
||||
- 编号反向引用:带圆圈的数字(①②③)用于点编号;目标反向引用使用“菱形/圆圈+数字+✓”。
|
||||
- 管道图:从左到右的流程,阶段由艺术线条块或圆柱体(数据源)+矩形(工件)表示,阶段编号位于灰色圆条上,箭头为灰色实线。
|
||||
|
||||
## 8. 密度和间距
|
||||
|
||||
- **节奏**:内容页具有中高信息密度(每页1个中心论点+≤6个一级点);每 8-15 页插入一页低密度分隔线或简洁陈述页作为呼吸点。
|
||||
- **间距系统**(正文文字大小为1u):标题到正文1.5u;列表项之间0.5u;列表组之间 1u;图表标题为 0.75u;列2u之间;页脚到主体 1.5u。
|
||||
- **渐进式页面规则**:逐步揭示的每一步仅更改一件事;不要在同一步骤中添加新元素并将另一个元素灰显。
|
||||
- **留白地板**:在任何页面上,主体区域元素的边界框不得超过内容区域的 85%,并且至少两个角必须保留明显的空白空间。
|
||||
|
||||
## 9. 页脚和页码
|
||||
|
||||
- **主线程页脚(三部分)**:
|
||||
1.顶部导航行:所有部分名称水平排列(大约7-8项),当前部分粗体接近黑色,其余“墨迹静音”;每个部分名称下方是一排小点,代表该部分的页数 - 讨论/当前点是实心的(当前页面的点是“重音”或纯黑色),未讨论的点是空心的。
|
||||
2. 左下角:一个小的“当前页/总页”标签(例如“12/51”或一个分数)。
|
||||
3. 底行:日期(左)+ 灰色小文本署名行(演讲者·报告标题,重复使用时替换为通用占位符)。
|
||||
- **备份页脚**:只有 3-4 个组名称 + 点进度指示器 + 页码,没有署名行。
|
||||
- 分隔页 B 和致谢页可以完全省略页脚;分隔页 A 保留页脚以保持位置感。
|
||||
- 页码在整个卡片组中连续编号(备份部分可以重新启动或继续编号,只要一致地应用选择)。
|
||||
|
||||
## 10. 违禁物品- 禁止使用:任何品牌标志、机构标志、真实姓名/照片、论文原始标题和正文段落、原始图表和真实实验数据、网页/软件屏幕截图或原始参考文献列表条目。
|
||||
- 禁止:渐变填充、阴影、3D 效果、装饰显示类型、纹理背景、全出血彩色背景页面。
|
||||
- 禁止:斜体/下划线作为强调,两种以上颜色同时强调同一元素,贴纸式表情符号图形。
|
||||
- 禁止:垂直正文文本(仅可以垂直设置侧边栏类别标签)、超过三层的列表嵌套、每页超过一个中心参数。
|
||||
- 禁止:页脚点与实际部分页数不匹配、跨页面改变相同的语义颜色以及跨渐进式构建页面的跳跃定位。
|
||||
|
||||
## 11. 交付清单
|
||||
|
||||
- [ ] 16:9,白色背景;没有品牌,没有人物,没有照片/截图,没有原始文本/数字/数据。
|
||||
- [ ] 仅使用一种无衬线字体+一种等宽字体;字体大小层与 §3 表相匹配。
|
||||
- [ ] 所有颜色均来自 §4 标记;每页彩色面积≤15%;相同的语义使用相同的颜色。
|
||||
- [ ] 所有八个可重复使用的框架——封面、两种分隔页面类型、标准内容页面、摘要页面、结论页面、致谢页面、参考页面、备份页面——都存在且可重复使用。
|
||||
- [ ] 布局 L1–L9 各至少一个示例;渐进式构建页面每一步仅更改一件事并保持稳定的组成。
|
||||
- [ ]表格采用三行表格样式,脚注完整;图表颜色兼容,同一指标跨页面使用相同的颜色。
|
||||
- [ ]页脚的导航部分名称+点进度与实际状态相符;页码是连续的;备份部分的页脚是简化版本。
|
||||
- [ ] 四种组件类型——方形标记列表、源标签块、注释气泡、编号反向引用——在整个平台中风格一致。
|
||||
- [ ] 每 8-15 页出现一个低密度呼吸页;身体面积占≤85%。
|
||||
- [ ] 整个文档为UTF-8;占位符文本使用通用研究叙述(目标/差距/任务/方法/结果/限制),没有可识别的来源信息。
|
||||
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线条、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 474 KiB |
@@ -0,0 +1,109 @@
|
||||
#粉彩学术推导甲板设计系统
|
||||
|
||||
数学/ML风格深度教程的无品牌设计系统:柔和渐变部分封面+白底推导内容页面,以“等高线概率图+公式卡+渐进揭示”为核心叙事手段。该系统仅抽象了视觉风格和解释节奏,不包含品牌、人物、原文或原始图表。
|
||||
|
||||
## 1.视觉DNA
|
||||
|
||||
- **双页皮肤**:仪式页面(封面、议程、分区分隔线、封底)使用对角线柔和渐变;内容页面使用接近白色的纯色,信息密度高,但留白较多。
|
||||
- **暖色调图形区域**:所有概率/几何图都位于统一的暖灰白色(桃色)画布块上,橙色到深红色的热轮廓线代表密度 - 整个甲板上反复出现的视觉锚点。
|
||||
- **公式是主角**:大衬线斜体公式,居中或占据自己的行,由淡蓝灰色圆形“公式卡”承载;在正文中,关键术语采用蓝色(过程/链接)、洋红色(警告/关键点)或青色(条件/输入),而不是用粗体堆积起来。
|
||||
- **渐进式揭示(构建)**:在连续页面中重复使用相同的标题,逐帧添加元素并在下一个结论中淡入淡出;节奏是每页一个概念,尽可能慢地分解推导。
|
||||
- **圆形药丸组件**:定义、定理、目标和警告都放置在圆角矩形/药丸条内,采用两部分的“标签+内容”结构。
|
||||
- **注释箭头**:带有文本标签的蓝色/洋红色细箭头指向公式或图表区域中的特定术语,替换括号注释。
|
||||
- **小字体脚注**:页面底部的一行极小的灰色文本带有来源/补充注释;正文从不引用参考号。
|
||||
|
||||
## 2. 画布和网格
|
||||
|
||||
- 宽高比:16:9,建议1280×720 pt(或33.87×19.05 cm)。
|
||||
- 安全边距:左/右 48 pt,上/下 40 pt;页脚区域位于底部边缘上方 12 pt 处。
|
||||
- 内容网格:12 列,16 pt 列间隙;常见的布局有 4+8(文本左,图像右)、6+6(两列比较)、3×4(三卡行)和全角(单图像/单公式)。
|
||||
- 标题锚点:左上角,x=48,y=40,标题块高 72 pt,内容区域从其下方 24 pt 开始;内容区域的底部结束于 y=640,为下面的脚注留出空间。
|
||||
- 图形区域对齐:所有图表画布块使用统一的宽度/高度尺寸(例如 320×240 / 480×360 / 全宽 600×420);同一部分内的尺寸不会混合。
|
||||
|
||||
## 3. 字体层次结构
|
||||
|
||||
|等级 |字体|尺寸|颜色 |目的|
|
||||
| --- | --- | --- | --- | --- |
|
||||
| H1 封面/分隔标题 |无衬线字体(例如 Inter/Helvetica Neue)Medium | 40–48 |墨黑|主标题、章节名称 |
|
||||
|节号|无衬线浅色 | 40|墨黑70% |大号“01”式编号 |
|
||||
| H2 内容页标题 |无衬线字体 | 中号 | 28–32 |墨黑|每页的左上角标题 |
|
||||
|副标题/药丸小标题|无衬线字体 | 中号 | 14–16 |原色蓝色或墨黑色 70% |卡片标签|
|
||||
|身体/子弹|无衬线字体 | 常规 | 16–18 |墨黑85% |列表、解释 |
|
||||
|公式| Serif 斜体(CMR/Times 系列)| 18–28(主角公式较大)|墨水黑色,关键术语彩色 |推导、定理|
|
||||
|彩色关键词 |与身体相同|与身体相同|蓝色/洋红色/青色|内联强调,替换下划线 |
|
||||
|图片标题/脚注/来源 |无衬线斜体 | 9–11 |灰色 60% |页脚线、图形标题 |
|
||||
|表格文本 |无衬线 | 12-14 | 12-14墨黑85% |比较表、数据表|
|
||||
|
||||
## 4. 颜色标记- `--ink` `#1F1F24`(主要文本); `--ink-70` `#5A5A63`; `--muted` `#8A8A94`(脚注/标题)。
|
||||
- 主要重音:`--blue``#2E6FD6`(处理、链接、“生成/导出”语义); `--magenta` `#C8366E` (警告、警告、关键假设); `--teal` `#0E8A8F`(条件、输入、示例标签)。
|
||||
- 仪式渐变色(对角线 135°,四个等距停止):“#F7D3E4”(粉色)→“#E3DCF7”(淡紫色)→“#CDE4F6”(天蓝色)→“#D7F2E6”(薄荷色)。仅在仪式页面上用作全出血底;内容页面上禁止。
|
||||
- 图形区域基础:`--peach``#FCEFD9`;密度热图:“#F2A65A”→“#E0743C”→“#B23A30”(浅橙色到深红色,4-6 个轮廓层,0.75-1 pt 线宽,具有相同色调的较暗轮廓)。
|
||||
- 组件背景:`--pill``#EDF2F9`(淡蓝灰色信息卡); `--note` `#FFF7CC`(淡黄色提示条); `--caveat-bg` `#F3EEF1`(警告栏背景)。
|
||||
- 结构灰色:分隔线“#D8D8DE”,表格交替行背景“#F5F6F8”。
|
||||
- 单页上使用的颜色标记不超过 3 个;文本着色遵循“蓝色 = 过程/参考,洋红色 = 限制/问题,青色 = 条件/示例”的固定语义。
|
||||
|
||||
## 5. 页面骨架
|
||||
|
||||
1. **封面**:渐变背景;主标题 + 中偏左一行副标题;右下角有一个二维码槽(替换为您自己的链接或在重复使用时删除);底部的信息栏(机构/日期/许可证图标槽)。
|
||||
2. **议程页**:渐变背景;左侧为“H1 议程”,右侧为垂直条目,格式为“[持续时间] NN 部分名称”,数字为原蓝色,持续时间为柔和的灰色。
|
||||
3. **分区分隔页**:渐变背景;与部分名称位于同一行左侧的大数字 (01/02/…);右侧有一个可选的 QR 码插槽。
|
||||
4. **内容衍生页面**:白色背景; H2标题位于左上角;每个网格放置的内容区域;底部的脚注行。
|
||||
5. **主题切换页面(进度条样式)**:白色背景;连续 2-3 个圆形缩略图卡,当前主题为正常颜色,其余主题为 30% 灰色,预览/查看部分结构。
|
||||
6. **参考文献页**:白色背景;分组副标题+两组淡蓝灰色圆形卡片,每张卡片包含一个小的斜体引文列表。
|
||||
7. **封底**:渐变背景;一张大的居中圆形功能卡(支持的功能列表+存储库/链接二维码插槽)。
|
||||
|
||||
## 6. 可重用布局- **L1概念图**:左侧5列文本(定义+项目符号列表、点标记),右侧7列桃花画布;图下方有一条可选的小青色注释线。
|
||||
- **L2公式主角**:全角居中公式(衬线,24-28),上方为药丸状结论线,下方为淡蓝灰色卡片,注明“有效性/等价关系的条件”;在公式中,不同的术语被涂成蓝色/洋红色,并附有箭头标签。
|
||||
- **L3两栏比较**:两张并排的圆形灰卡,每张都包含一个小缩略图+3-4行要点(一栏“简单/快速/精确”型优势,一栏“大设计空间/慢”型成本),可选地在它们之间夹有共享符号。
|
||||
- **L4 三主题导航**:连续三个缩略图卡,突出显示当前缩略图卡(用于在章节内的子部分之间切换)。
|
||||
- **L5 管道流程**:水平 3–4 步骤过程,步骤之间带有粗箭头,标有上面的操作名称(例如“数据 → 路径设计 → 训练 → 采样”),也可以选择带有指示迭代的环回箭头。
|
||||
- **L6 样本网格**:结果缩略图的 N×M 数组(每个单元格大小相同,4 pt 圆角),左侧或上方标记条件/步数带有小彩色标签;仅用于占位符目的 - 真实生成的结果不得放置在此处。
|
||||
- **L7定理+推导,两行**:顶行有一个“定理”药丸(淡蓝色背景),底行有一张大公式卡,右侧有一个桃子图,提供几何直觉。
|
||||
- **L8 问题列表**:药丸状小标题(全部大写,柔和的灰色)+ 2-4 条疑问句正文线 + 右下角的“设计选择”便签卡(淡蓝色背景,固定角阴影)。
|
||||
|
||||
## 7.图表/表格/图像/组件规则
|
||||
|
||||
- **图表**:折线图使用 2-4 种颜色(原色蓝色、橙色、绿色、灰色)、2 pt 线宽,带有圆形端点;轴标签使用 10–11 磅灰色文本;省略刻度线和封闭的轴框架,仅保留浅灰色的水平网格线;图例位于图表的右上角或内部。条形图使用单色或双色方案,带有 2 pt 圆角条形图,并且可以选择在顶部标记值。所有轴标签都必须存在,并使用占位符名称。
|
||||
- **表格**:细灰线或无垂直线,具有交替行浅色背景;标题可以使用彩色背景块(蓝色/洋红色/青色各代表一种方法类别);数值居中,方法名称列左对齐;不要在同一列中混合对齐样式。
|
||||
- **图像**:始终为 4 pt 圆角;图像下方的 9–10 pt 斜体灰色标题(来源/条件);多个图像以相等的宽度和高度对齐到网格;屏幕截图不得直接放置在页面上(必须重新绘制或替换为自制的占位符图像)。
|
||||
- **圆形信息卡**:8–12 pt 角半径,16×12 pt 填充,“小标题(彩色,14 pt)+ 内容”的两部分结构;单线柱条使用其高度一半的圆角半径。
|
||||
- **项目符号**:小点(纯色、原色或灰色),仅允许一层嵌套;点≤4行,每行≤12个字。
|
||||
- **警告/结论栏**:“警告”(洋红色小标题 + 灰色背景卡)、“开放问题”(洋红色标题 + 居中问题行)、“目标:”(青色药丸 + 公式/短语)。
|
||||
- **箭头注释**:1.5 pt 线 + 实心三角形箭头;蓝色标签“过程/平均”,洋红色标签“限制/依赖性”,并使用匹配颜色的 12-14 磅文本。
|
||||
|
||||
## 8. 密度和间距- 每页一个中心思想:1个图+≤1个主公式+≤4行要点;超过此值意味着拆分页面(最好使用构建的延续页面)。
|
||||
- 元素间距:标题→内容24 pt;卡 → 卡 16–20 分;图 → 标题 8 pt;公式卡填充 ≥ 16 pt;页脚行到内容的距离 ≥ 20 pt。
|
||||
- 在相同的构建系列中(跨页面的相同标题),之前显示的每个元素都保持逐像素不变,仅增量添加;新元素必须在网格交叉点淡入。
|
||||
- 允许使用白页(只有标题 + 一句话的过渡页),但每个部分最多 1 个。
|
||||
|
||||
## 9. 页脚和页码
|
||||
|
||||
- 页脚:从底部边缘上方 12 pt 开始,距左侧 48 pt,9–10 pt 斜体灰色文本,包含来源/补充注释占位符(重复使用时替换为您自己的引文);多个源堆叠在新行上,并且右对齐也是可以接受的。
|
||||
- 页码:默认不显示;如果需要,请在右下角使用 10 磅柔和的灰色,格式为“NN”(无前缀)。
|
||||
- 章节页面和封面/封底没有页脚或页码。
|
||||
|
||||
## 10. 违禁物品
|
||||
|
||||
- 请勿从来源平台复制任何品牌标志、机构徽标、会议名称或演讲者姓名/头像/照片。
|
||||
- 不得抄袭原句子、原公式排版、原图形(等值线图、样本网格、损失曲线、对照表数据)或真实实验值;图表可能只保留其类型和颜色规则 - 数据必须重新创建为占位符值。
|
||||
- 请勿按原样重复使用二维码、外部链接或引文条目;链接和引文槽应以占位卡的形式呈现。
|
||||
- 不要将摄影/写实风格的插图混合到图表系统中;图表保持矢量平面+桃色背景。
|
||||
- 请勿使用深色/纯黑色背景页面、渐变内容页面、3D 逼真图表或过重的卡片阴影。
|
||||
- 单页上不要超过 3 种强调色,嵌套项目符号级别不要超过 1 级,或者对内容页正文文本使用衬线字体(衬线字体仅用于公式)。
|
||||
|
||||
## 11. 交付清单
|
||||
|
||||
- [ ] 16:9 画布;整个过程中观察到 48 pt 左/右和 40 pt 顶部/底部安全边距。
|
||||
- [ ] 仪式页面(封面/议程/分隔/封底)使用四档柔和渐变;内容页面使用接近白色的纯色,两种皮肤从不混合。
|
||||
- [ ] 字体层次结构表的所有 9 层都存在:H1、节号、H2、药丸标题、正文、公式、内联着色、脚注、表格文本。
|
||||
- [ ]所有颜色均来自代币;蓝色/洋红色/青色语义是固定的(过程/警告/条件);每页强调色 ≤ 3。
|
||||
- [ ]所有图表均采用统一的桃色画布块+橙红色轮廓线语言,尺寸系列一致。
|
||||
- [ ]公式使用衬线斜体,主角公式占据自己的卡片;箭头注释取代了括号注释。
|
||||
- [ ] 八种布局(L1–L8)可以覆盖所有页面;构建延续页面现有元素的位移为零。
|
||||
- [ ] 图表/表格/图像遵循第 7 节中的规则;没有任何真实数据、屏幕截图或照片。
|
||||
- [ ] 页脚使用 9–10 pt 斜体灰色占位符引用;页码遵循第 9 节;仪式页面没有页脚或页码。
|
||||
- [ ]整个文档不包含任何品牌、不包含任何人名/头像、不包含任何原始文本/图形/数据;链接/二维码是占位符。
|
||||
- [ ] 文件为 UTF-8;该文件的第一个非空行是 1 级标题。
|
||||
|
||||
- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线条、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 466 KiB |
@@ -0,0 +1,106 @@
|
||||
#编辑成长课件·PPT设计系统(无品牌、可重复使用版)
|
||||
|
||||
该系统是从企业品牌和增长方法学课件的完整源代码中抽象出来的,仅保留布局、颜色关系和教学叙述。它不是源甲板的复制品:它不带有平台标记、公司名称、人物、照片、原始文本、案例数据或产品界面。所有颜色、尺寸和数值均为近似值;生成时,该文件应作为约束,以用户的查询作为内容的唯一来源。
|
||||
|
||||
适用场景:B2B品牌课程、营销能力培训、增长方法论研讨会、品牌与需求对接管理讲解。
|
||||
|
||||
## 视觉DNA
|
||||
|
||||
- **社论论文的感觉**:内容通过大量的空白、细小的分隔线、短的段落和突出的节号来组织;每一页仅提出一个教学结论。
|
||||
- **平静的底色+单一的温暖强调**:底色接近纸白色或极浅灰色,结构文本为深蓝色墨水;暖黄色或珊瑚色仅用于标记重点、行动或结果,绝不用作全屏装饰。
|
||||
- **章节编号是导航锚点**:章节页面可以使用超大的半透明数字或狭窄的颜色条来指示进度;该数字仅表示序列,并且不包含超出查询提供的统计信息。
|
||||
- **先方法,后案例**:原则首先分解为可操作的步骤,然后用匿名、虚构的场景卡进行验证;案例绝不能成为品牌展示墙。
|
||||
- **轻量级插画**:更喜欢几何色块、线框、箭头和抽象的人体轮廓;请勿使用照片、真实网页屏幕截图或图标堆栈。
|
||||
|
||||
## 画布和网格
|
||||
|
||||
- 输出宽高比固定为 16:9(建议 1280×720 或同等尺寸),即使源甲板是纵向的 — 只是借用了其编辑节奏,而不是其纵向比例。
|
||||
- 安全边距约为左/右 6%,顶部约 7%,底部保留 7% 作为页脚带。标题、节号和页码始终保持相同的基线。
|
||||
- 使用隐式12列网格:标题和正文占据7列,右侧证据/卡片占据5列;全宽数据页可能占据 10 列,同时保留两列喘息空间。
|
||||
- 部分页面可能包含从左向右延伸的窄色带;内容页面保持纸白色,没有大的色块压在文本上。
|
||||
|
||||
## 字体层次结构
|
||||
|
||||
- 使用系统无衬线字体(例如 Arial、Helvetica 或可用的中文无衬线/黑体);不要使用模仿品牌的字体。数字可以使用相同字体的半粗体。
|
||||
|
||||
|等级 |目的|大约尺寸(1280 宽)|重量 |颜色 |
|
||||
|---|---|---:|---|---|
|
||||
|封面标题|一句话论文| 42–50 像素 |大胆| `--墨水` |
|
||||
|页面标题 |结论句| 30–38 像素 |大胆| `--墨水` |
|
||||
|节号|导航标记| 54–90 像素 |常规/粗体| `--accent` 不透明度为 20% |
|
||||
|卡片标题|原理/动作名称 | 20–24 像素 |大胆| `--墨水` |
|
||||
|正文 |说明、步骤、注释 | 15–18 像素 |常规| `--body` |
|
||||
|页脚|源占位符、页码 | 10–12 像素 |常规| `--静音` |
|
||||
|
||||
标题最好应该说明结论或问题,而不是像“目录”或“简介”这样的空部分标签。每条正文线不应超过26个字左右;关键词通过权重而不是第二强调色来强调。
|
||||
|
||||
## 颜色标记- `--paper`:纸白色`#FBFAF7`,内容页面的背景。
|
||||
- `--paper-cool`:冷浅灰色`#F1F3F5`,用于卡片背景或分区分隔线。
|
||||
- `--ink`:深蓝色墨水`#102A43`,用于标题、轴线和主要文本。
|
||||
- `--body`:深蓝灰色`#334E68`,用于正文和解释。
|
||||
- `--muted`:蓝灰色`#829AB1`,用于页脚、辅助刻度线和边框。
|
||||
- `--accent-yellow`:明亮的暖黄色`#F4C95D`,用于原则数字、动作标记和单强调点。
|
||||
- `--accent-coral`:软珊瑚`#E98B73`,仅用于结果/风险标注 - 选择其中之一,切勿同时将其与暖黄色一起用作装饰。
|
||||
- `--line`:浅蓝灰色`#D9E2EC`,用于分隔线和表格规则。
|
||||
- `--dark-panel`:深靛蓝`#243B53`,仅用于单个深色关闭页面或代码风格的解释。
|
||||
|
||||
每页最多选择一种主要强调色;仅当暖黄色和珊瑚色的语义确实不同(行动与风险)时,它们才可以共存,并且每种颜色所占的页面面积必须少于 10%。
|
||||
|
||||
## 页面骨架
|
||||
|
||||
一个六页的模板通过“认识问题→形成原则→转化为行动→检查闭环”进行:
|
||||
|
||||
1. **封面论文**:纸白背景,左对齐结论句,右侧抽象几何构图;小部分编号或短色带定下基调。
|
||||
2. **为什么现在**:一个疑问句+三张匿名信号卡;这些卡片仅显示查询给出的设置,而不引入源甲板数据。
|
||||
3. **三个原则**:三张水平卡片或一个垂直楼梯,每张卡片有一个动词、一种解释和一种可观察的行为。
|
||||
4. **动作组合**:连接受众、接触点、内容和节奏的矩阵/流程;强调色指出当前优先执行的操作。
|
||||
5. **验证与案例**:左侧虚构前后比较或漏斗,右侧“寻找什么/如何判断”;所有数字必须来自查询或明确标记为示例。
|
||||
6. **行动闭环**:深色或浅色的结束页面给出下一步、所有者的占位符、审查节奏和可重复使用的清单;不要使用简单的“谢谢”页面。
|
||||
|
||||
## 可重用布局
|
||||
|
||||
- **E1结论+侧卡**:60%的结论和左侧的三个证据,40%的右侧的大量/抽象图形。
|
||||
- **E2 三原则卡**:三列等宽的卡片,部分编号位于卡片顶部,底部一行注明“什么算作完成”。
|
||||
- **E3楼梯路径**:四层水平楼梯表达从意识到行动的进展,仅使用细线和箭头连接线。
|
||||
- **E4 2×2 选择矩阵**:水平/垂直轴分别代表查询中明确给出的一个判断维度,在象限内仅放置短标签 - 不伪造排名。
|
||||
- **E5前后比较**:两行中相同的组件,左侧解释变化,右侧用相同颜色的条显示方向;禁止使用源代码中的真实案例屏幕截图。
|
||||
- **E6 结束清单**:深靛蓝或纸白色背景,三个“本周的行动”+一个“下一次回顾”,在底部留下足够的空白。
|
||||
|
||||
## 图表/表格/图像/组件规则- **大数字卡**:只显示一个数字及其单位,下面写有测量依据/目标;没有来源的数字使用“示例”标签,不会伪造精度。
|
||||
- **漏斗/路径图**:最多四层,方向从左到右;每层仅使用单一颜色的阴影,没有彩虹渐变。
|
||||
- **矩阵**:轴、象限和标签使用`--ink`/`--line`,强调色仅标记一个推荐区域;旁边必须写上判断依据。
|
||||
- **流程和循环**:使用圆角矩形+细箭头,步骤编号与节编号匹配;环回必须标记其触发条件并检查操作。
|
||||
- **表格**:最多五列,无垂直线,行与行之间有细线;标题加粗,关键行标有强调色的左边框。
|
||||
- **图像**:更喜欢抽象几何占位符、线框和自绘图形;请勿放置人物照片、品牌徽标、产品界面或源图表。
|
||||
- **卡片**:8–12px 圆角,1px 边框,避免重阴影;卡片之间至少留有 16 像素的间距。
|
||||
|
||||
## 密度和间距
|
||||
|
||||
- 每页一个可重复的结论,正文不超过6项;在三张卡片的页面上,每张卡片不应超过 35 个单词左右。
|
||||
- 标题到正文 32–48 像素,段落之间 14–18 像素,卡片填充 18–24 像素;有效含量面积约为55-70%。
|
||||
- 封面和封页密度较低;方法矩阵和案例页面是中等密度的;不要通过缩小字体来解决多余的内容,而是剪切内容或拆分页面。
|
||||
|
||||
## 页脚和页码
|
||||
|
||||
- 内容页面在右下角以“01/06”的形式放置页码,10–12px“--muted”;章节页面可能只显示章节编号。
|
||||
- 左下角可以带有“内部工作草案/示例”占位符,但不得带有来源品牌名称或复制的版权标记。
|
||||
- 封面和封页可以省略页脚;如果保留,则使用相同的灰度值和相同的基线。
|
||||
|
||||
## 违禁物品
|
||||
|
||||
- 请勿复制任何平台/公司标志、商标、人物、案例名称、原句、真实数据或产品截图。
|
||||
- 不要使用大面积的品牌蓝色、渐变文字、发光、浓重阴影、拟物化图标或装饰照片来制造“营销感觉”。
|
||||
- 不要使用“品牌”、“增长”或“曝光”等空词作为标题;标题必须能够指导判断或行动。
|
||||
- 不要使用没有规定单位和测量基础的百分比,也不要写匿名示例,就好像它是真实的客户结果一样。
|
||||
- 不要在同一页面上使用多种高度饱和的强调色,也不要让卡片墙取代叙述。
|
||||
|
||||
## 交货清单
|
||||
|
||||
- [ ] 宽高比为 16:9,与标题/节号/页码基线一致。
|
||||
- [ ] 六页中的每一页都有一个结论,没有目录页、简单的感谢页或空白过渡页。
|
||||
- [ ] 至少存在1个原理卡页、1个动作矩阵页、1个前后对比页、1个动作闭环页。
|
||||
- [ ] 每个页面仅使用一种主要强调色,并且颜色具有明确的语义含义。
|
||||
- [ ] 所有数字均来自查询或标记为示例,并注明单位和计量依据。
|
||||
- [ ] 不存在源甲板品牌标记、人物、照片、屏幕截图、原始文本、原始数据或可识别案例。
|
||||
- [ ] 卡片、表格、流程和图表在投影距离下均可读,空白比例未压缩。- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线条、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 366 KiB |
@@ -0,0 +1,107 @@
|
||||
#蓝线实验方法学课件·PPT设计系统(无品牌、可重复使用版)
|
||||
|
||||
该系统是对完整的实验测量方法学课件进行逆向工程,仅抽象出教学节奏、方法矩阵、比较表达式和编辑布局。请勿复制源平台中的平台名称、公司、人物、案例、照片、截图、原文或真实指标;生成的牌组中的事实和数字可能仅来自用户的查询。
|
||||
|
||||
适用场景:营销实验培训、产品试用设计、成长团队工作坊、管理层实验治理讲解。
|
||||
|
||||
## 视觉DNA
|
||||
|
||||
- **讲义式章节结构**:每一章都由突出的数字、短标题和色带分隔;正文读起来就像一本可打印的操作手册——首先定义,然后演示。
|
||||
- **一条蓝线贯穿始终**:深蓝色的细线、箭头和轴将页面串成一条“形成假设——分组——测量——行动”的路径;这条线比任何图标都重要。
|
||||
- **仅突出显示信号**:黄色/橙色用于在较小的固定位置区域中进行假设、警告或后续步骤;其余信息以黑色、灰色和浅蓝色分层。
|
||||
- **首先比较**:对照组与治疗组、之前与之后、输入与结果均使用相同的几何组件并排显示,没有华丽的 3D 图形。
|
||||
- **案例是实践材料**:案例页面仅展示该方法如何落地实践,而是使用匿名虚构场景;它们不会重现源平台的客户叙述或结果。
|
||||
|
||||
## 画布和网格
|
||||
|
||||
- 输出统一为16:9(1280×720或同等水平);源甲板的纵向阅读速度被转换为水平列,而不是复制其原始页面比例。
|
||||
- 左/右边距约为 5.5%,顶部 7%,底部 8%;节号和页码固定在左上角和右下角的锚点。
|
||||
- 使用12列网格:定义文本占5列,方法图占7列;比较页面采用 5:5 的两栏分割,中间留有 2 栏用于连接线。
|
||||
- 线条使用 1–2px 宽度,连接线始终有方向;大色块仅出现在部分页面或单个深色摘要页面上。
|
||||
|
||||
## 字体层次结构
|
||||
|
||||
- 使用系统无衬线字体;过程标签和数字可以使用相同的半粗体字体,并为代码或公式保留等宽字体。
|
||||
|
||||
|等级 |目的|大约尺寸(1280 宽)|重量 |颜色 |
|
||||
|---|---|---:|---|---|
|
||||
|封面标题|方法论文| 40–48 像素 |大胆| `--墨水` |
|
||||
|页面标题 |结论/问题| 30–36 像素 |大胆| `--墨水` |
|
||||
|节号|进度导航 | 48–76 像素 |大胆| `--强调蓝色` |
|
||||
|方法标签 |假设、对照、处理等 | 16–20 像素 |半粗体 | `--墨水` |
|
||||
|正文 |定义、步骤、解释 | 15–18 像素 |常规| `--body` |
|
||||
|注释/脚注 |测量依据、局限性、页码 | 10–12 像素 |常规| `--静音` |
|
||||
|
||||
将标题写为“此页必须产生的判断”,而不是“方法论”或“最佳实践”等空部分名称。每张图表必须附有一句话“如何阅读它/它的含义”。
|
||||
|
||||
## 颜色标记- `--paper`:暖白色`#FCFCFA`。
|
||||
- `--ink`:深靛蓝`#14213D`,用于标题、主线和轴线。
|
||||
- `--body`:蓝灰色`#3E536B`,用于正文。
|
||||
- `--muted`:灰蓝色`#8C9AA8`,用于脚注和辅助线。
|
||||
- `--line`:浅蓝灰色`#D8E2EA`,用于分隔线和网格。
|
||||
- `--accent-blue`:中亮蓝色`#2F80ED`,用于部分编号、治疗组或主路径。
|
||||
- `--accent-yellow`:暖黄色`#F2C94C`,用于假设/关键点标注;只选择一个地方作为主要重点。
|
||||
- `--accent-orange`:橙色`#F2994A`,用于风险/待验证的标注;不得与黄色同时用作装饰。
|
||||
- `--control`:灰蓝色`#9FB3C8`,用于对照组或基线。
|
||||
- `--deep-panel`:深蓝色`#203A5F`,用于摘要页面或方法框,不适用于普通内容页面背景。
|
||||
|
||||
默认情况下,每个页面仅启用“--accent-blue”加上一种语义强调色(黄色或橙色)。对照组和治疗组都必须在图例中用文字标记 - 不要仅通过颜色来区分它们。
|
||||
|
||||
## 页面骨架
|
||||
|
||||
一个六页的模板通过“问题——方法——验证——扩展”进行:
|
||||
|
||||
1. **封面**:一篇实验论文句子,一个节号,一条蓝线;几何节点暗示路径,没有照片或品牌标记。
|
||||
2. **为什么实验**:一个问句+三个常见误解,底部给出了本次要验证的判断边界。
|
||||
3. **假设和分组**:左侧是假设结构,右侧是对照/治疗列,解释输入、保持不变的内容以及观察到的指标。
|
||||
4. **方法选择**:使用二维矩阵或决策树来选择测试类型,明确说明何时不适用;所有标签都使用用户查询自己的术语。
|
||||
5. **读取结果并采取行动**:匿名示例的前后比较、置信区间占位符或结果卡,紧随其后的是“继续/调整/停止”的标准。
|
||||
6. **扩展闭环**:所有者、时间线、审核节奏和实验日志形成循环;最后一句话是可执行的下一步,而不是感谢页面。
|
||||
|
||||
## 可重用布局
|
||||
|
||||
- **M1假设卡**:“如果……那么……因为……”三行结构,可证伪性条件写在底部。
|
||||
- **M2 两组比较**:对照组/治疗组并排,保持不变的内容写在顶部,单个变化的变量写在底部。
|
||||
- **M3决策树**:最多三个分支级别;每个叶节点表示“适用/不适用”而不是抽象名词。
|
||||
- **M4方法矩阵**:横轴是观察周期或干预强度,纵轴是用户给定的维度,例如随机化或地理范围;推荐的单元格有黄色边框。
|
||||
- **M5结果卡**:四行——公制、方向、间隔/测量基础、行动;如果没有间隔,请明确写“证据待决”。
|
||||
- **M6 闭环泳道**:四个部分 - 提议 → 执行 → 分析 → 审查 - 每个泳道旁边标记有角色占位符,避免捏造名称。
|
||||
|
||||
## 图表/表格/图像/组件规则- **比较条**:灰蓝色为对照组,蓝色为治疗组;两个条形图都从同一个零点开始,直接标记差异的方向和单位。
|
||||
- **时间线**:一条蓝线连接基线、干预、观察窗口和决策点;每个节点仅声明一个操作。
|
||||
- **区间图**:更喜欢点估计+误差线或区间带;不要截断轴、隐藏样本大小或将相关性呈现为因果关系。
|
||||
- **决策矩阵**:轴标题、适用性边界和“不使用”区域必须全部存在;避免将四象限布局视为装饰。
|
||||
- **表格**:最多五列,六行可见;第一列是问题/假设,最后一列是行动或证据状态。
|
||||
- **图像**:仅使用自绘的抽象图形、线框设备和几何占位符;禁止使用人物、产品界面、徽标和原始源甲板图表的照片。
|
||||
- **公式/代码**:在浅色代码框中使用等宽字体,最多8行;解释其旁边的输入、输出和限制。
|
||||
|
||||
## 密度和间距
|
||||
|
||||
- 每页一个判断;正文不超过6项,决策树节点不超过8个,每个矩阵轴不超过4个标签。
|
||||
- 主图的标题为 28–44 像素,组件之间的间距为 16–24 像素,线条和文本之间的间隙至少为 8 像素;有效含量面积约60%。
|
||||
- 定义页面为低密度,方法矩阵页面为中密度,结果页面为中低密度;不要缩小字体来塞入更多实验类型。
|
||||
|
||||
## 页脚和页码
|
||||
|
||||
- 右下角使用`01/06`样式页码,左下角带有小的“测量基础/假设/示例”文字;两者都使用“--muted”。
|
||||
- 当需要来源时,只写匿名的“内部设置/公共方法参考”,而不是来源甲板品牌名称或复制的版权行。
|
||||
- 封面可以省略页脚;闭环页面保留页码以供审阅时参考。
|
||||
|
||||
## 违禁物品
|
||||
|
||||
- 请勿复制来源平台中的任何平台、公司、客户、个人、商标、照片、界面、原始文本、真实结果或数字。
|
||||
- 不要将观察相关性描述为因果关系,并且不要忽略对照组、样本定义和抽样基础、时间窗口或限制。
|
||||
- 不要使用彩虹色、发光粒子、浓重阴影、3D 透视或复杂插图来代替清晰的实验关系。
|
||||
——不使用“显着提升”、“全面领先”等无底线宣传用语;没有证据的,写“待核实”。
|
||||
- 不要让矩阵、过程或大数字卡片独立存在,脱离页面的标题结论。
|
||||
|
||||
## 交货清单
|
||||
|
||||
- [ ] 宽高比为 16:9,节号、标题和页码共享一致的基线。
|
||||
- [ ] 六页按顺序涵盖问题、假设分组、方法选择、阅读结果和缩放闭环,没有目录或致谢页。
|
||||
- [ ] 至少存在一个对照/治疗比较页面、一个方法矩阵或决策树页面以及一个结果标准页面。
|
||||
- [ ]图表清楚地说明了单位、测量基础、时间窗口和限制;如果丢失,请将其标记为待定证据。
|
||||
- [ ] 每个页面仅启用一种语义强调色,对照组和治疗组都带有文本标签。
|
||||
- [ ] 所有数字均来自查询或标记为示例;没有品牌标记、人物、照片、屏幕截图、原始文本或源数据。
|
||||
- [ ] 生成的 PPTD/PPTX 打开正确,每页截图计数与页数匹配,并且文本在投影距离下可读。- 默认情况下没有卡片:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线条、空白和字体大小差异是更好的解决方案
|
||||
- 无均分组合:除非没有其他可用的布局,否则不要默认三向分割、四向分割或 2×2 矩阵。这包括三部分结论,例如三栏+标题+结论
|
||||
|
After Width: | Height: | Size: 1.6 MiB |
@@ -0,0 +1,153 @@
|
||||
# 组织名称 — 2025 年第 2 季度加密货币行业报告风格设计系统
|
||||
|
||||
## 1.风格定位
|
||||
|
||||
一个黑暗的、数据驱动的季度加密行业研究报告PPT设计系统,面向精通跨市场、资产、交易量、ETF、DeFi、NFT和交易所指标的专业读者,支持高密度数据、较长的解释文本和多系列图表。车身采用深色研究型仪表板,搭配组织名称的绿色视觉标识;封面、分区和产品/结束页使用高饱和度的绿色或紫色框架、大圆形卡片和吉祥物插图。
|
||||
|
||||
整个甲板是16:9的风景画布;内容页面使用近乎黑色的背景,带有白色现代无衬线粗体标题、正文和脚注,采用 Geist/Inter-type 无衬线;标题带有固定的小品牌文字标记;页脚包含报告名称、版权、来源和页码。主要内容包括折线图、柱状图、堆积柱状图、面积图、时间线、表格、文本列表/头像矩阵;强调色有荧光绿、紫色、粉色、黄色等高饱和度颜色。
|
||||
|
||||
基本原则:
|
||||
|
||||
1. **数据重于装饰。** 页面优先考虑图表、表格、数字和解释性文本;插图、边框、亮色和身份标记仅用于品牌识别、分类、强调或部分过渡。
|
||||
2. **身体骨架一致,胜过布局炫耀。** 普通数据页保留黑色背景,左上角品牌标记,白色标题,右侧或上方洞察线,底部出处和页码;大面积绿色/紫色品牌页面仅出现在封面、部分分隔线、产品或结束位置。
|
||||
3. **强调色必须带有语义。** 荧光绿用于品牌、积极/增长价值观、关键系列或按钮状组件;紫色/粉色表示洞察线、部分过渡和特殊注释;红色仅适用于负面变化或风险类型数据。如果明亮的颜色妨碍读取值,请优先考虑轴、标签、单位和图例的清晰度。
|
||||
|
||||
## 2. 页面骨架
|
||||
|
||||
画布为 16:9 横向宽屏。内容页面背景为纯黑色或接近黑色;封面/章节/结束页使用亮绿色的外部背景,或带有深色圆形内卡的紫色外框。保持稳定的边距,外缘无关键数据;高密度页面可能接近全出血,但页眉、标题和页脚必须保留其安全区域。
|
||||
|
||||
**封面**:亮绿色外底,中央有一张大的深绿色圆形卡片,顶部有缺口式分体或双卡结构。左上角是身份标记——带有新主题名称的纯小文本,或者留空;没有绘制图形标志。主标题巨大,年份或关键词可能有深绿色/浅绿色渐变的感觉,报告名称为白色/浅绿色;中下部分为组织名称吉祥物插图、细线趋势线和半色调点;赞助商文字列表位于右侧或右下,面积小于主标题和吉祥物。
|
||||
|
||||
**目录页**:黑色背景,左上角有一个大的“内容”样式标题;正文是一个多列内容列表,一级部分标题较大且白色,条目采用较小的白色/灰色文本,页码右对齐;作者头像、姓名和头衔可能位于下方。内容页面没有使用大图表和很少的装饰。
|
||||
|
||||
**部分分隔线**:亮绿色或紫色的外框/背景,内部有一张大的深绿色或深蓝黑色圆形卡片。左边有部分名称和一个小标签;右侧或底部有大型组织名称吉祥物和主题图形。章节标题占主导地位,信息很少。**内容数据页**:左上角有一个固定的小品牌文字标记,其下方或右侧有白色页面标题;标题区域在顶部占据了一个紧凑的水平带。洞察线位于标题右侧、页面右上角或说明栏顶部,通常以紫色开头,并以灰白色文本继续。正文可以使用单个大图表、左右栏、图表+说明栏、时间线、表格或矩阵。左下角包含报告名称/版权,来源位于图表下方或左下角,页码位于右下角。阅读路径:品牌和标题→紫色洞察线/关键信息线→主图表或表格→解释性文字/图例→来源和页码。
|
||||
|
||||
分隔线仅用于图表轴、表格线、卡片边框和时间线规则 - 不设置繁重的标题规则。内容页面不使用水印或大背景图形;背景保持干净。
|
||||
|
||||
## 3. 内容组织
|
||||
|
||||
标题为对象型或指标型,例如“某种资产的价格和交易量”、“某种市场份额”、“值得注意的事件”或“交易所交易量”,负责主题定位;结论由洞察线表达。标题应为 1 行,必要时为 2 行;避免超过两条线,这会压缩图表区域。
|
||||
|
||||
每页优先显示一条信息行,位于标题右侧或解释栏顶部,结构为“关键变化/结论+数据定义和测量依据/时间范围+原因或影响”。使用紫色突出显示开头短语或核心编号,其余部分为灰白色。不要将多个结论堆放在一个段落中;每一页都优先考虑一个主要判断。
|
||||
|
||||
正文使用短段落和项目符号,通常位于图表左侧或右侧的窄栏中;每一段都解释一个原因、数据发现或影响。保持段落断断续续,行长适中;左右布局中的文本栏是为了解释图表而存在的,它本身不会成为一篇长文章。
|
||||
|
||||
按市场类别、资产类别、时间、平台、链、交易所或指标定义和基础进行分组。高密度页面使用字幕、标签、图例、彩色系列和细线分隔。一页包含一个核心问题;它可以包含多个数据系列,但不得同时讨论多个不相关的主题。
|
||||
|
||||
数字和单位靠近数据标签或轴,保留相关格式和单位——百分比、美元、倍数、日期和季度。时间轴保持连续且可读;大数字可能会在洞察线或图表注释中突出显示。源脚注位于图表下方或页脚中,采用小灰白色文本,不与主要数据竞争。
|
||||
|
||||
## 4.内容页面布局系统
|
||||
|
||||
**A。左边说明栏+右边大图表**
|
||||
适合价格、交易量、指数、资金流向等单一主题时间序列。左栏包含标题、见解、2-4 个解释段落和来源;右侧的大图表占据了正文的大部分宽度,包含轴、图例和数据注释。使用亮线、峰值标签、垂直注释线或关键点文本进行强调。不适合需要广泛分类比较的表格类型内容。
|
||||
|
||||
**B。顶部标题和见解 + 下面的全角图表**
|
||||
适合水平时间轴图表,例如多系列线、堆积柱形图和市场份额变化。一个紧凑的标题和一条洞察线位于顶部;主图表横跨整个页面;图例位于图表顶部或右侧附近,系列颜色保持高对比度。如果解释太多,请切换到左右栏,以避免压缩图表高度。**C。大图表+右侧注释/赞助商/备注栏**
|
||||
适合需要补充事件背景的页面,如IPO、ETF、交易量等。主图表位于左侧或中间;右边的窄栏包含简短的注释、文字标记或辅助图例;右栏的宽度不得超过主图表。此布局不适合多个长段落或多个不相关的文字标记。
|
||||
|
||||
**D。时间线/事件带布局**
|
||||
适合“重大事件”类型的内容。使用多行水平日期栏;日期块用高饱和度的绿色、粉色、紫色等区分时期或类别,下方有小尺寸的事件注释;标题区域很小。不要添加复杂的图表;事件文案一定要短——长的解释会打破时间线的节奏。
|
||||
|
||||
**E。表格/排名/矩阵页面**
|
||||
适合资产回报、稳定币、交易所、链生态系统以及团队或平台比较。正文使用暗表、排名栏、文本列表或多列卡片;注释栏可能位于左侧,彩色条、点、图标或文本颜色突出显示表格内的正/负变化。这种布局适合高密度分类,而不是连续趋势。
|
||||
|
||||
**F。品牌/产品/截面风格车身变型**
|
||||
使用绿色或紫色卡片、按钮、屏幕截图式界面以及吉祥物进行产品宣传、章节介绍或结束页面;信息内容比数据页少。不得滥用作为普通研究页面的模板。
|
||||
|
||||
## 5. 颜色系统
|
||||
|
||||
**背景黑色/近黑色#000000–#080808**:内容页面的主要背景,面积最大。不能用浅色代替;即使新主题使用品牌颜色,也要保持主体背景为深色。
|
||||
|
||||
**深绿色卡片#183F2D / #1A412E**:封面、分区分隔线和品牌卡片的主要基色,通常搭配亮绿色外框。品牌页面可能会大面积使用它;普通内容页面仅使用少量标签或边框 - 它不应该替换大面积的黑色背景。
|
||||
|
||||
**荧光绿#A6F05F / #9EE45A / #4BCC00**:用于封面外底座、剖面框架、身份标记、正值、关键数据线、按钮状标签和一些图表系列。品牌页面上的区域可能较大,而内容页面上的区域可能较小到中等。它可能会被替换为新的品牌原色,但必须保持暗背景高对比度和一致的“积极/关键”语义。
|
||||
|
||||
**白色#FFFFFF /浅灰白色#DDE5E0**:用于标题、关键标签、主轴文本和高优先级数字。不能用低对比度的颜色代替。
|
||||
|
||||
**灰蓝色/灰绿色文本#8A9492 / #B9BCA6 / #808963**:用于正文、注释、辅助图例文本、轴标签、来源和页脚;亮度低,但绝不会低到难以辨认。
|
||||
|
||||
**紫色 #7A54FF / #6B4CFF**:用于中小型区域的分区分隔线、洞察线开口、关键线、标签和品牌变体;默认不代表正/负状态。
|
||||
|
||||
**粉色#F19EE2 / #F4A0E5**:用于小区域的事件时间线、图表系列和强调块,表达类别。避免大量与紫色同时使用,会显得花哨。
|
||||
|
||||
**黄色#FAEB6A / #E7D84A**:用于柱形图、键值、事件或返回类型系列;不适用于长文本段落。
|
||||
|
||||
**红色/珊瑚色#FF5A6A / #BE827F**:用于负回报、下降、风险或负值。仅用于状态/数据,绝不作为装饰。
|
||||
|
||||
内容页面的主要色调为黑-白-灰 + 1 个品牌强调色 + 2-4 个数据系列颜色。多系列图表可以添加颜色,但图例必须保持清晰;颜色仅用于分类/状态——没有无意义的装饰。
|
||||
|
||||
## 6. 字体和文本层次结构
|
||||
|
||||
字体为现代无衬线字体,以 Geist-Regular、Geist-Medium、Geist-SemiBold、Geist-Bold 和 Inter 系列为主。不要混用衬线字体或手写字体;特殊赞助商/徽标字体仅作为图像或标记存在。正文注释文本 = 1x:
|
||||
|
||||
- **封面主标题/年份**:大约。 4–6x、粗体或半粗体、允许紧密的字母间距。
|
||||
- **章节标题**:大约。 3–5x,白色或浅绿色,通常为 1–2 条线。
|
||||
- **内容页面标题**:大约。 2–3x,白色,中粗体到粗体。
|
||||
- **洞察线/信息线**:约。 1.4–2x,通常是中粗体,紫色关键词+灰白色延续。
|
||||
- **字幕/组标题**:大约。 1.1–1.4x,中粗体或半粗体,白色/浅灰色。
|
||||
- **正文段落和项目符号**:1x,常规重量,灰白色或灰蓝色。
|
||||
- **表格文本/图表标签**:大约。 0.7–1x,按空间压缩,保持数字可读。
|
||||
- **脚注、来源、页脚、页码**:大约。 0.6–0.8x,灰色,低级别,但从未消失。
|
||||
|
||||
数字标签使用与正文相同的字体,但粗细增加或颜色不同;没有装饰性的数字形式。标题和正文通过大小、粗细和颜色构建层次结构,而不依赖于阴影或笔画。
|
||||
|
||||
## 7. 图表语言
|
||||
|
||||
核心图表包括折线图、柱形图、堆积柱形图、面积图、双轴价格/交易量图表、水平条排名、时间线、份额/市场份额图表、甜甜圈/饼图迷你小部件和表格排行榜。
|
||||
|
||||
图表使用深色底色;轴线和网格线是低亮度的灰色细线;没有白色背景的图表框。主数据线采用荧光绿、黄色、紫色、粉色、青色等高对比度颜色;次要系列较低的饱和度或线宽。柱形图使用明亮的柱形与暗网格相对应,并且成交量柱形图可以与价格线结合。多系列堆积柱需要清晰的图例,放置在图表上方、右侧或空白图表区域中。
|
||||
|
||||
关键数据使用峰/谷标签、垂直事件线、端点值、本地文本注释、颜色增亮以及负值的红色。注释紧扣要点,不应形成长段落。预测、目标或基线使用虚线/细线和明确的标签,与历史数据区分开来;永远不要让预测线模糊成实际线。
|
||||
|
||||
轴保留单位和时间基准——尤其是美元、百分比、季度、日期和交易量。网格线必须细、暗且少;没有繁重的边界。页面标题说明图表的主题;图表本身只保留必要的副标题和图例,避免重复。
|
||||
|
||||
## 8. 表格和高密度信息
|
||||
|
||||
表格用于排名、资产比较、交易所/链/协议指标、回报、市场份额和团队/作者信息。它们采用深色底色、高密度样式:标题为白色或浅灰色中粗体文本,行列分隔线为低亮度细灰色,单元格通常没有明显的填充;必要时,使用深灰色/深绿色进行光分区。
|
||||
|
||||
数字列右对齐或在视觉上按小数点对齐;文本列左对齐;名称列可以添加小图标或圆形标记占位符块。正/负值以绿/红区分;排名或强度可以使用水平条、色块长度、热色或小点。摘要行或关键行使用更亮的文本、细边框或浅色填充,但没有浓重的突出显示填充。
|
||||
|
||||
高密度并排模块使用卡片、列组、文本列表或小型图表集合。每个模块都有一个标题、一个键值和一个最小的解释;模块通过对齐、间距和细线分隔开——没有大的阴影。斑马条纹不是主要语言;可以谨慎使用对比度极低的深灰色,并且在分隔线足够的情况下,不添加斑马条纹。
|
||||
|
||||
如果表格超出了一个屏幕可以扫描的范围,请将其拆分为多个页面或重点关注前 N 个页面 - 不要将其压缩至难以辨认。
|
||||
|
||||
## 9. 组件和图形元素
|
||||
|
||||
**品牌字标标题**:固定在内容页左上角,尺寸较小,白色品牌字+绿色“研究”。将其保留在新页面上;不要将其放大为装饰。**洞察线组件**:紫色关键词/开头+灰白色解释,位于标题右侧或正文栏上方;每页至多一个主要见解——避免多个紫色句子相互竞争。
|
||||
|
||||
**圆形品牌卡片**:封面、章节页和产品页面使用大圆形深绿色/深蓝色卡片,外框为亮绿色或紫色。默认情况下,内容数据页面不会将所有内容框入大卡片中。
|
||||
|
||||
**标签/徽章**:用于部分代码、资产符号、按钮式 CTA 或图表类别;轮廓圆角矩形或带有短文本的明亮填充。不能带长句子。
|
||||
|
||||
**细分隔线和轴线**:表格、图表和时间线的低亮度灰线;细而内敛——没有装饰性的粗线条。
|
||||
|
||||
**事件时间线块**:水平日期颜色块+下方的事件注释,按日期期间或类别着色。适合事件列表,而不是数字趋势。
|
||||
|
||||
**文本列表/头像矩阵**:用于内容页面作者、赞助商、交易所、生态系统项目等;机构名称以文本列表或中性占位符块的形式呈现,头像可能会保留;统一尺寸、对齐方式和标签文本。请勿混入彩色图标装饰;没有绘制任何图形标志。
|
||||
|
||||
**吉祥物插图**:组织名称绿色/紫色字符用于封面、章节分隔符和结束页。在普通数据页面上,它只能出现在特殊品牌/产品页面上,并且不得覆盖图表。
|
||||
|
||||
## 10. 质地和违禁物品
|
||||
|
||||
整体扁平、黑暗、数据驱动、品牌内敛;内容页面依赖于颜色对比度、字体大小层次结构、图表密度和对齐方式,而不是摄影、复杂纹理、阴影或 3D。
|
||||
|
||||
**禁止**:普通内容页面、大面积照片背景、复杂渐变背景、3D图形、发光笔画、表情符号、花哨的插图、装饰性彩色图标、大片居中副本、浓重阴影、低对比度灰色文本、无源图表、无单位数字或覆盖轴的装饰。
|
||||
|
||||
**谨慎使用**:圆形卡片、大面积亮绿色底座、大紫色块、文本列表、头像、截图式界面、甜甜圈迷你图表、斑马条纹表格。它们必须提供信息功能或品牌节点功能——绝不是为了填充空白而添加的。
|
||||
|
||||
**允许特殊页面**:封面、分区、产品页面和结束页面可以使用吉祥物、大圆形卡片、亮绿色/紫色外框、半色调点、趋势线背景和赞助商文本列表。即使在特殊页面上,也要保持标题的可读性,并且永远不要让品牌元素掩盖主要信息。
|
||||
|
||||
图片/截图不是身体的核心语言;如果必须使用它们,请将它们放置在带有标题和来源的固定边界内 - 不要全屏摄影讲故事。如果出现渐变,也仅限于对封面标题或品牌氛围的微妙处理,而不是主体背景系统。
|
||||
|
||||
## 11. 一代清单- 骨架:是16:9吗?内容页面是否以黑人为主;左上角有一个小品牌字标吗?页脚是否包含报告名称/版权、来源和页码?
|
||||
- 文案:标题是否是一个明确的对象/指标;每页是否只有一个主要见解;正文是短段落或项目符号;数字是否带有单位、时间范围和测量基础?
|
||||
- 层次结构:标题、洞察线、正文、图表标签和脚注按相对大小和颜色分隔;是否避免了对特定字体大小的依赖?
|
||||
- 颜色:是否保持黑白灰+荧光绿/紫色+必要的数据颜色;正/负状态明显为绿色/红色;一页上是否有太多鲜艳的颜色?
|
||||
- 布局:主图表/表格是否占据最大面积;解释栏对图表有帮助吗?是否存在无意义的空白或过度拥挤?
|
||||
- 图表:轴、单位、图例、网格线、数据标签和重点注释是否完整;多系列颜色是否可区分;是否标记了预测/基线?
|
||||
- 表格:标题、对齐方式、分隔线、关键行/列以及正/负颜色是否一致;文本可读;是否避免了过度压缩?
|
||||
- 组件:圆形卡片、标签、时间线、文字标记和吉祥物是否仅出现在适当的页面上;它们提供信息而不是装饰吗?
|
||||
- 禁止使用的物品:禁止使用照片背景、表情符号、3D、发光、浓重阴影、复杂纹理、无意义的图标或大段居中副本。
|
||||
- 质量:检查溢出、截断、乱码、重叠、低对比度、遮挡、空内容、图表比例错误、页码缺失、来源缺失和机械模板重复。
|
||||
- 没有默认使用卡片:除非用户明确要求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式 - 线段、空白以及字体和字体大小差异是更好的解决方案。
|
||||
- 无等分组合:除非没有其他布局可用,否则不要默认三向分割、四向分割或2×2矩阵——包括三向分割+标题+结论等三部分结构。
|
||||
47
tmp/kimi-slides/reference/fonts.md
Normal file
@@ -0,0 +1,47 @@
|
||||
# 字体系统
|
||||
|
||||
## 选择原则
|
||||
|
||||
1、语言匹配:当用户查询的是中文或者要求提供中文PPT时,需要指定中英文字体;否则只需要设置英文字体
|
||||
2、选用方式:正文建议优先采用可读性强的字体,标题或特殊页面采用风格化字体加上特殊处理(全部大写、加宽字距、粗体、斜体等)来强化风格
|
||||
3、字体组合必须支持整体视觉风格定位
|
||||
4. 名称一致性:**确保字体名称完全相同,包括大小写和空格,以便模型可以正确使用它们**
|
||||
|
||||
## 字体列表
|
||||
|
||||
###英文字体
|
||||
|
||||
|字体名称|字体类型 |风格及特点 |适合场景|风格化字体 |
|
||||
|---|---|---|---|---|
|
||||
| Liter |无衬线 |现代新怪诞风格;低对比度,平衡比例,针对屏幕进行优化;干净理性|技术、产品 |没有 |
|
||||
| HedvigLettersSans |无衬线 | “非设计师视角”的设计;略显不规则,个性鲜明,品牌性格强烈|创意设计、品牌推广 |没有 |
|
||||
| Oranienbaum |衬线|现代高对比度衬线;几何感强烈,线条优雅,古典气质|文化、艺术、时尚|没有 |
|
||||
| QuattrocentoSans |无衬线 |经典、优雅的无衬线字体;温和、可读性强、小尺寸时清晰 |学术、企业、教育 |没有 |
|
||||
| SortsMillGoudy |衬线| Goudy Old Style经典印花风格的复兴;柔和的衬线,阅读愉快 | Liter自然、人文 |没有 |
|
||||
| Unna |衬线|新古典主义衬线,具有明显的垂直节奏;优雅又不失力量 | Literature、出版、学术界 |是的 |
|
||||
| Coda |无衬线 |圆润、友善;曲线柔和,开放度高|商务、亲和的品牌基调|是的 |
|
||||
| Jersey15 |无衬线(运动风格)|运动球衣款式;方形结构,具有明显的网格感(仅支持英文+数字)|体育、科技展示页面 |是的 |
|
||||
| Jersey20Charted |像素字体(网格阴影)|运动号码风格,带有阴影网格,增强运动质感(仅支持英文+数字)|体育、机械、装饰展示页 |是的 |
|
||||
|
||||
###中文字体
|
||||
|
||||
|字体名称|字体类型 |风格及特点 |适合场景|使用限制 |
|
||||
|---|---|---|---|---|
|
||||
| MiSans |无衬线字体 (heiti) |小米系统字体;干净而现代,可变权重,出色的屏幕渲染(多语言支持)|技术、企业、产品 |没有 |
|
||||
| Noto Sans SC |无衬线字体 (heiti) | Source Han Sans 的一个分支;结构规范,风格中性,覆盖面极其广泛。 **因为它的使用如此广泛,所以尽可能少使用它** |报告式|没有 |
|
||||
| 思源宋体 |衬线(宋体)|来源汉字衬线体;精练的宋体结构,笔画对比;优雅的阅读体验(多语言支持)| Liter自然、设计、正式演示|没有 |
|
||||
| 阿里妈妈刀隶体 |书法(隶书)|阿里妈妈道力;隶书风格,笔画如刀刃;力量与古朴的结合|中国时尚、文化、艺术展示|没有 |
|
||||
| 阿里妈妈东方大楷 |书法(楷书)|阿里妈妈东方大开;以颜体书法为基础;饱满圆润,厚重有力|文化、品牌发布、国风主题|没有 |
|
||||
| 阿里妈妈数黑体 |无衬线字体 (heiti) |阿里妈妈舒黑;几何黑体;统一规整,商业气息浓厚|商业、科技、电子商务 |没有 |
|
||||
| 站酷文艺体 |手写|智酷文仪;干净清新,略带手写感,文艺气息浓厚 |光设计,生活方式|没有 |
|
||||
| 飞波正点体 |书法(毛笔)|飞波正典;笔墨厚重,充满力量|电影海报、电商、品牌展示|没有 |
|
||||
| 得意黑 |无衬线字体(倾斜黑体) |笑脸字体;高大、倾斜的黑体将人文主义和几何品质与强烈的现代感融为一体。 **不支持非斜体直立样式** |创意科技、品牌展示|没有 |
|
||||
| 霞鹜新致宋 |衬线(宋体)| LXGW辛之松;基于 IPAmj Mincho;明亮、优雅、结构良好| Liter自然、古典风格、印花风格|没有 |
|
||||
|
||||
### 混合 CJK–拉丁字体
|
||||
|
||||
|字体名称|字体类型 |风格及特点 |适合场景|使用限制 |
|
||||
|---|---|---|---|---|
|
||||
| 精品点阵体 |像素字体|晶品店镇; 9×9点阵像素风格,极具复古电子感 |游戏、科技、像素艺术 |是的 |
|
||||
| LXGW Bright |衬线 (fangsong/kaiti) | LXGW文凯家族;结合了仿宋和开体的特点;柔和清晰的字体| Liter自然、教育、人文 |没有 |
|
||||
| ZCOOL KuaiLe |手写(圆角)| ZCOOL KuaiLe;活泼、可爱、俏皮、卡通;青春活力|动漫、儿童、娱乐|没有 |
|
||||
241
tmp/kimi-slides/reference/general-poster.md
Normal file
@@ -0,0 +1,241 @@
|
||||
# 一般信息图表和海报
|
||||
|
||||
仅当用户明确请求信息图、海报或高度视觉化的单页设计时才使用本指南。请勿针对普通 PPT 请求加载本指南。
|
||||
|
||||
本指南仅定义了设计决策过程和质量基线;它没有规定固定的配色方案、字体、地图、时间线、网格或页面骨架。根据主题、受众、材料、使用场景独立设计;永远不要仅仅因为示例更详细而默认复制它。
|
||||
|
||||
## 生产流程
|
||||
|
||||
### 1.了解主题和沟通目标
|
||||
|
||||
首先确认:
|
||||
|
||||
- 这张海报应该让读者看到、理解、记住或做些什么。
|
||||
- 主要受众、观看距离、显示介质和可用阅读时间。
|
||||
- 用户明确要求的尺寸、长宽比、颜色、样式、内容和输出格式。
|
||||
- 材料真正需要表达的核心关系:时间、空间、过程、对比、层次、物体结构或纯粹的精神/氛围传达。
|
||||
- 现有的图像、数据和可验证的事实是否足以支持所选的表达形式。
|
||||
|
||||
### 2. 首先探索不同的方向,然后选择一个
|
||||
|
||||
在编写任何 `.page` 文件或放置元素之前,请在内部形成 2-3 个具有实质性差异的视觉方向。它们至少应在以下两项方面有所不同:
|
||||
|
||||
- 主要视觉焦点:图像、版式、对象、数据、地图/关系图或抽象图形。
|
||||
- 信息结构:线性叙述、径向枢纽、局部缩放、分层切片、并置比较、图像矩阵或单个场景。
|
||||
- 空间组织:全出血、离轴、对称、高密度、大量留白或分区结构。
|
||||
|
||||
至少一个候选方向应该将整个画布视为一个视野、场景或对象关系,而不是首先将内容分割成宽度和高度相等的容器。卡片可能会出现在候选者中,但不能仅仅因为信息有三或四个项目就自动成为默认卡片。
|
||||
|
||||
在最终确定方向之前,请比较哪种主要视觉媒体最能承载内容。当人物、文物、材料、环境或事件场景是该主题的重要证据时,实际检查至少 2 个在构图或视觉语言上存在实质性差异的现有图像、搜索结果、生成的图像、校样或参考屏幕截图;当流程、层次结构、系统、传播、因果关系、对比或空间关系处于中心位置时,请比较至少 2 个具有明显不同结构的可编辑矢量或类似 SmartArt 的图形草稿。在比较主题可识别性、缩略图可记忆性、信息容量、构图共存性和可编辑性后,选择摄影/真实对象图像、生成的图像、自定义矢量、结构化图形或混合解决方案。不要仅仅因为 PPTD 矢量更容易实现或因为搜索/生成资产需要时间而默认使用纯矢量,并且不要仅仅为了“拥有资产”而强制使用与内容无关的图像。
|
||||
|
||||
根据主题特征、用户语气、资产质量和主要阅读任务选择一个方向。您不需要提供三种设计,但不要在看到第一个可行选项时就开始构建。
|
||||
|
||||
可用的语法包括但不限于排版主导、摄影主导、对象/部分注释、档案拼贴、数据字段、空间地图或关系图。这些是思考的角度,而不是必须套用的模板。
|
||||
|
||||
### 3.在项目中写入`style.md`
|
||||
|
||||
对于新创建的海报/信息图,请在写入 `.page` 文件之前在 PPTD 项目根目录中创建一个简短的 `style.md`。它是当前任务的设计概要——不是新的技能文件,不是硬性 CLI 门,也不是额外的可交付成果。
|
||||
|
||||
在最终确定 `style.md` 之前,请检查用户的资源、实际图像候选以及 `reference/fonts.md` 中可用的字体。保持内容简短、具体且可操作;它通常包括:
|
||||
|
||||
```markdown
|
||||
# Style Brief
|
||||
- Goal and audience:
|
||||
- Output scenario and canvas:
|
||||
- Core message in one sentence:
|
||||
- Chosen visual concept/metaphor:
|
||||
- Primary visual focus:
|
||||
- Poster-level visual move (why this is not an ordinary content page):
|
||||
- Visual DNA (background/material, typographic/geometric temperament, how images coexist with structured information):
|
||||
- Primary visual medium and asset/SmartArt-like figure candidates compared, with reasons for the choice:
|
||||
- Reading order and composition:
|
||||
- Color scheme and each color's role:
|
||||
- Chinese and English fonts, size hierarchy, and usage:
|
||||
- Image selection, cropping, and treatment:
|
||||
- Graphics/chart/connector language (if needed):
|
||||
- Information density, whitespace, and alignment:
|
||||
- Tropes to avoid:
|
||||
```
|
||||
|
||||
- 解释为什么选择这个方向,并用一句话记录没有选择其他方向的主要原因;还要说明所选方向最有可能退化为哪种比喻(例如,普通的技术报告、复古的宣传页面、商业促销或统一的卡墙),以便在屏幕截图审核时进行检查。
|
||||
- 当用户已经提供了完整的设计系统、模板或强风格约束时,`style.md`仅将它们转换为可操作的决策;不要发明与用户要求相冲突的新样式。
|
||||
- 在查看实际图像或发现资产限制后,您可以在细化页面之前更新一次`style.md`。不要将其变成冗长的流程日志。
|
||||
- 对现有工件进行本地编辑时,不强制创建新的 `style.md`;仅在重新设计整体视觉效果时才需要它。
|
||||
|
||||
## 画布比例和方向
|
||||
|
||||
首先确定输出场景和画布,然后设计网格、字体大小和内容结构。不要默认将海报等同于纵向,也不要默认继承PPT的16:9。
|
||||
|
||||
1. 当用户明确指定尺寸、方向或比例时,严格使用用户的要求。
|
||||
2、当用户没有指定时,根据部署场景、信息丰富程度、主要阅读顺序、关系结构自行选择。
|
||||
3. 当信息过多时,优先考虑提炼、分层或拆分成几页;不要将所有内容都塞进一个字体非常小的页面中。
|
||||
4、选择好画布后,直接按照该比例进行构图;不要先以 16:9 的比例构建它,然后将整个内容拉伸或裁剪为另一个比例。
|
||||
|
||||
|常用比例| PPTD参考尺寸|常见场景|
|
||||
|---|---:|---|
|
||||
| 9:16 肖像 | `[540, 960]` |移动阅读、社交媒体、垂直叙事|
|
||||
| 3:4 肖像 | `[720, 960]` |类似印刷品的海报、人物/物体英雄视觉效果 |
|
||||
| 1:1 平方| `[720, 720]` |社交媒体、中心结构、适度的信息量 |
|
||||
| 4:3 风景 | `[720, 540]` |更高密度的文本图像内容、文档嵌入 |
|
||||
| 16:9 风景 | `[960, 540]` |宽屏显示、水平关系和并行多列布局 |
|
||||
|
||||
PPTD画布可以使用任何`[width, height]`;表中的尺寸仅供参考,并非列举限制。
|
||||
|
||||
## 内容关系和图形选择
|
||||
|
||||
首先用一句话陈述页面的核心信息,然后选择最能表达该信息的图形。仅当关系本身是核心时才使用结构图;不要仅仅为了看起来丰富而添加地图、时间线、路线、流程图、矩阵或索引。平行关系并不自动等于卡片:首先考虑同一场景中的对象组、图像/符号序列、比例差异、空间相邻性、色带、规则线或印刷节奏。
|
||||
|
||||
当核心信息是流程、层次结构、系统、传播、因果关系、对比或空间关系时,将结构化图形(类似 SmartArt 的图形)、地图、路线或方法图视为主要视觉材料。所选择的结构图应占据足够的面积并参与整个页面的构成,尽可能使用可编辑的PPTD元素来实现;生成本机 OOXML SmartArt 对象不是必需的,但不要仅仅为了“可编辑性”而让它退化为一排圆角框、通用图标和细箭头。它可以与主要物体、场景图像、特写细节和锚定字幕一起形成一个连续的视野。
|
||||
|
||||
|核心关系|可能的表达 |
|
||||
|---|---|
|
||||
|时代演变,阶段变迁|时间表、里程碑、之前/之后状态 |
|
||||
|路径、传播、迁移 |地图、路线、流量或网络 |
|
||||
|步骤、机制、方法|流程、泳道、输入-流程-输出 |
|
||||
|物体或观点之间的差异|并列比较、矩阵、尺度轴|
|
||||
|层次结构、组成、系统 |树层次结构、体系结构、分层部分 |
|
||||
|实物、产品、纸质方法详情|对象注释、局部缩放、视觉解剖 |
|
||||
|多个事实或样本 |图像矩阵、分类图、数据字段 |
|
||||
|情感、想法、态度|单一强烈的图像、纯粹的印刷构图、抽象的形式 |
|
||||
|
||||
- 当用户明确请求“地图”时,提供可以建立空间关系的地理基础或轮廓;不要将抽象折线冒充为地图。
|
||||
- 对于路线、传播和迁移,您可以根据语义在全图、本地定位器、放射状网络、陆海分层或多个分支路线中自行选择;不要默认为细水平线。
|
||||
- 对于架构图、UML、纸质方法图,在进行视觉美化之前,首先要确保节点、界面、方向、分组、图例正确。
|
||||
|
||||
## 设计自由度和质量基线
|
||||
|
||||
- 颜色、字体、图像处理和构图来自主题和 `style.md`。除非用户明确要求,否则不要默认使用黑-白-银-灰色、单点荧光口音、巨型裁剪类型、档案微型标签或细线时间线。
|
||||
- 海报应首先建立一种占主导地位的视觉语法,并辅之以其他元素。不要为了显得“丰富”而一次性将英雄图像、巨型字体、地图、时间线、图标矩阵和数据图表塞满。
|
||||
- 建立至少一个视觉记忆点,该点在整页缩略图或远处仍可识别,由英雄图像、巨型字体、大型物体、全出血色域、场景或核心关系图承载。如果缩略图仅显示一个标题和一组常规框,请重新构图。
|
||||
- 当连续制作不同主题的多件作品时,不要默认重复使用前一件作品的主要构图、强调色角色、图像比例和线性图形。
|
||||
- 网格、空白、卡片、拼贴、不对称或全出血都是可选方式,而不是默认的正确答案。避免将标题下方的每一类内容都塞进带有圆角、轮廓或阴影的等宽、等高矩形中,形成“三卡/四卡+CTA”幻灯片或应用程序界面骨架。仅当容器本身语义明确且不会形成统一的卡墙时才使用容器;否则更喜欢使用布局区域、比例、色块、规则线、空间邻接、对象组或印刷节奏来组织内容。
|
||||
- 一个页面可能只有很少的文字,或者可能有几个高密度的模块;但核心信息、主要视觉焦点和阅读路径必须清晰。主要通过比例层次结构、局部缩放、标题和空间关系来组织丰富的内容;不要用重复的卡片或过大的填充来将稀疏的内容伪装成丰富的内容,也不要将大量的事实压缩成难以阅读的小文本。
|
||||
- 正文、注释、图例和来源必须在实际输出场景中可读。当信息过多时,剪切、分层或分页;不要用很小的字体来解决这个问题。
|
||||
- 数据、事实、日期、地点、标签、单位和来源必须忠实于用户的材料或可验证的信息。对于无法确认的精确数字,使用定性陈述、近似值或省略;不要为了“档案感”而捏造统计数据、坐标、发行号或出版细节。
|
||||
|
||||
### 很少的镜头:多个完整的摘要和匿名的视觉移动片段
|
||||
|
||||
以下完整示例用于扩展您可以借鉴的设计动作、主要视觉媒体和风险意识;它们不是固定的视觉系列、主题映射或等待选择的模板。实际简报的概念名称、视觉 DNA、颜色、字体、画布和构图必须根据当前主题、资产和阅读关系重新得出;您可以在样本中重新组合一些兼容的动作,或者完全设计自己的动作 - 不要只选择最相似的标签并复制整个集合。
|
||||
|
||||
#### 海报编辑
|
||||
|
||||
```markdown
|
||||
# Style Brief — Poster Editorial
|
||||
- Goal and audience: designed for quick browsing and short dwell; make the subject memorable first, then let readers discover archival details.
|
||||
- Output scenario and canvas: choose landscape or portrait based on the actual medium; do not take a 16:9 layout and crop it.
|
||||
- Core message: string together the object, time, and context with one judgment that takes a position; do not use section-style empty titles.
|
||||
- Visual concept: "a contemporary, editorially curated object archive"; calm, sharp, with print tension, without imitating a real magazine cover.
|
||||
- Primary visual focus: choose only one of three as the protagonist — a high-contrast object image, an object silhouette, or giant type.
|
||||
- Reading order and composition: use a rigorous grid with a clear dense-versus-sparse counterpoint; the title, exhibit item, and micro captions form three scales, but not every poster is required to have a route or timeline.
|
||||
- Color: Editorial White `#F7F6F2` and Deep Black `#0B0B0B` carry the main relationship; silver-gray is used only for secondary information; choose at most one small-area accent from Signal Red `#F20505`, Fluoro Lime `#D6FF00`, or Acid Orange `#FF4A1C`.
|
||||
- Fonts: the main title uses 得意黑/阿里妈妈数黑体 with HedvigLettersSans; the body uses MiSans/Liter; at most three font families, and the numbering font does not carry body text.
|
||||
- Image treatment: prefer images with strong contours, close-ups, and room for bold cropping; they may be converted to black and white or desaturated, but keep the object's recognition points.
|
||||
- Graphic language: use hairlines, short labels, and small nodes only when content relationships need them; maps must have a spatial base, and data charts must have real data.
|
||||
- Information density: keep one clear visual breathing area; archival details may be dense, but body text and captions must be readable at the actual output size.
|
||||
- Must avoid: rounded-card walls, evenly distributed accent colors, fake logos/issue numbers/archives, and stacking giant type, a map, a timeline, and an icon matrix all at once just to seem rich.
|
||||
- Reason for choosing: when the subject needs to be highly memorable while retaining traceable details, this direction is superior to a generic commercial infographic.
|
||||
```
|
||||
|
||||
#### 几何构图
|
||||
|
||||
```markdown
|
||||
# Style Brief — Geometric Composition
|
||||
- Visual concept: translate the core concept into tension among circles, squares, lines, proportions, and glyphs; do not use geometric blocks to decorate empty space.
|
||||
- Primary visual focus: one geometric relationship or glyph composition occupying the main area, not multiple evenly distributed colored rectangles.
|
||||
- Poster-level visual move: let the title pass through, embed into, or cut across the main geometry, so text and composition together become the image, instead of the title hovering above the content.
|
||||
- Visual DNA: decide color roles and typographic temperament from the subject; establish order with proportion, axes, numbering, and scale, with factual information taking its place along the geometric relationships.
|
||||
- Information organization: bind concept differences, proportions, stages, or a work index to shape relationships; secondary material is tucked into the edges or a narrow index band.
|
||||
- Must avoid: evenly tiling primary colors, a children's-building-block feel, random circles and squares unrelated to the content, and degenerating the geometric composition into a colored card wall.
|
||||
```
|
||||
|
||||
#### 实质性证据
|
||||
|
||||
```markdown
|
||||
# Style Brief — Material Evidence
|
||||
- Visual concept: treat materials, artifacts, surface traces, or the making process as evidence, letting tactile quality and provenance relationships tell the content together.
|
||||
- Primary visual focus: a sufficiently large macro, scan, section, or artifact detail; other images relate to it as slices, sequences, or provenance evidence.
|
||||
- Poster-level visual move: let the texture or object span the main extent of the canvas, with captions anchored directly to visible details; do not shrink high-quality assets into specimen cards.
|
||||
- Visual DNA: extract color, grain, and line language from the actual object; fonts and labels serve the material's temperament; maps, genealogies, or processes appear only when relationships need them.
|
||||
- Information organization: organize facts through source labels, local zooms, material genealogy, craft steps, or propagation paths, keeping one clear breathing area.
|
||||
- Must avoid: uniform brown retro templates, travel souvenir albums, forged old archives, decorative seals, and a row of equally sized object cards.
|
||||
```
|
||||
|
||||
#### 暗场信号
|
||||
|
||||
```markdown
|
||||
# Style Brief — Dark-Field Signals
|
||||
- Visual concept: in a dark field, use localized light sources, trajectories, scales, or rhythmic signals to establish a sense of direction; black is space, not background fill.
|
||||
- Primary visual focus: one brightly lit object, motion image, glowing trail, or high-contrast glyph form, with other elements building distance and speed around it.
|
||||
- Poster-level visual move: let a signal line, path, or band of light cross the canvas and connect fact nodes, so the subject and direction of motion remain recognizable from a distance.
|
||||
- Visual DNA: accent colors serve only nodes, directions, numbers, or warnings; numeric fonts, coordinates, and scanning elements must serve reading rather than create tech noise.
|
||||
- Information organization: organize route, time, frequency, cohort, or status data along a common coordinate field; keep a stable high-contrast safe zone for body text.
|
||||
- Must avoid: full-page neon, bloom effects, cyber dashboards, small gray text on black, and packing every data group into a glowing panel.
|
||||
```
|
||||
|
||||
#### 科学观察
|
||||
|
||||
```markdown
|
||||
# Style Brief — Scientific Observation
|
||||
- Visual concept: treat the page as a verifiable observation field, using objects, sections, relationships, and scale to explain a mechanism, rather than presenting a popular-science column.
|
||||
- Primary visual focus: a main specimen, an ecological section, a system relationship, or a local zoom; readers see the object first, then understand the mechanism along the annotations.
|
||||
- Poster-level visual move: let scale, depth, hierarchy, flow direction, or causality run through the whole page, with imagery and legend sharing the same spatial coordinates.
|
||||
- Visual DNA: colors distinguish objects, relationships, and risks; annotation lines, units, legends, sources, and confidence boundaries stay readable and checkable.
|
||||
- Information organization: mechanisms, specimens, and evidence are organized through spatial adjacency and connecting relationships; use a small amount of comparison when necessary, and do not default to three-column cards.
|
||||
- Must avoid: technical-report front pages, white dashboards, equal-width info boxes, decorative data, and unverifiable precise figures.
|
||||
```
|
||||
|
||||
#### 动态拼贴
|
||||
|
||||
```markdown
|
||||
# Style Brief — Dynamic Collage
|
||||
- Visual concept: use directional glyphs, cropped imagery, color bands, and event fragments to create a manifesto feel, with rhythm coming from content conflicts rather than decorative noise.
|
||||
- Primary visual focus: one boldly cropped title, figure/object silhouette, or high-contrast image; do not let multiple assets compete evenly for attention.
|
||||
- Poster-level visual move: interweave the title, imagery, and a diagonal or offset structure to form a direction and posture recognizable from a distance.
|
||||
- Visual DNA: maintain one dominant contrast relationship; collage edges, numbering, event nodes, and short phrases share a unified logic of angle, weight, and spacing.
|
||||
- Information organization: compress viewpoints, impacts, events, or stages into a few directional band sequences; body text returns to a stable grid to stay readable.
|
||||
- Must avoid: promotional ads, price tags, meaningless torn paper, slogan stacking, too many angles, and enlarging all text at once.
|
||||
```
|
||||
|
||||
#### 可拆卸的匿名移动片段
|
||||
|
||||
以下仅提供局部构图知识,不提供完整指导;不要为片段命名,也不要将主题与它们一一匹配。首先陈述当前页面的核心信息和主导关系,然后根据需要调整其中一两个动作,或者完全设计自己的动作:
|
||||
|
||||
- 让标题穿过、嵌入或穿过承载信息的主要几何图形;事实沿着比例、轴、编号或形状关系占据一席之地——几何图形不仅仅是填充空间的装饰。
|
||||
- 让对象、纹理、宏或部分跨越画布的主要范围,并将标题直接锚定到可见细节;其他图像形成切片、序列或出处关系,而不是收缩成一排样本卡。
|
||||
- 让路线、光带或运动轨迹穿过画布并连接事实节点,同时保留必要的地理、场景、分支和时间信息;路径可以由图像、地形或空间关系形成,而不是默认的细线图。
|
||||
- 让标本、切片、比例、图例、因果关系共享一个连续的观察视野;当沉浸感很重要时,请保持环境的连续性,而不是退化为“左侧主图像+右侧证据框”的技术报告。
|
||||
- 交织可识别的标题或对象、裁剪图像和方向结构;事件和观点沿着统一的节奏展开,避免让标题的可识别性淹没在拼贴的噪音中。
|
||||
|
||||
在实际任务中,使用当前任务特有的概念名称,从主题、资产和阅读关系重新生成 `style.md`。不要先浏览片段寻找“最相似的类别”,也不要在摘要中写“选择某某家庭”。保留一种占主导地位的视觉语法,其他动作仅作为兼容支持;最终方向必须解释为什么它适合当前内容,而不仅仅是交换示例的主题文本和强调色。
|
||||
|
||||
## 图像、版权和真实性
|
||||
|
||||
- 喜欢主题清晰、可裁剪空间以及与内容真正语义相关的图像。在风格化之前确保对象和证据是正确的。
|
||||
- 当依靠图像来确定构图时,在决定主题放置、裁剪线和文本安全区域之前实际查看候选图像;不要仅根据关键词或想象力来决定。
|
||||
- 一旦找到或生成了足够好的候选图像,就让它真正进入主要构图;不要仅仅为了节省实施工作而将特定的人物、工件、材料或环境交换回通用矢量图标、轮廓或示意性替身。
|
||||
- 当选择摄影或实物图像作为主要视觉语法时,让关键图像在画布上占据足够的面积,以创造令人难忘的印象;不要将所有高质量资源缩小为卡片或装饰性缩略图内的小圆形图像。多幅图像可以通过裁剪、重叠、矩阵、排序或局部缩放形成整体关系。
|
||||
- 当选择自定义向量作为主要视觉语法时,让轮廓、比例、连接、尺度或注释表达当前主体的具体信息;不要将通用图标、默认流程框或装饰性几何图形冒充为内容。复杂的矢量图同样应该有清晰的视觉焦点和缩略图存储点。
|
||||
- 混合图像和矢量时,明确分工:图像承载物体证据、材料、人物或环境;矢量携带关系、路径、比例、图例和注释,并将它们在同一组合中相互锚定,而不是分成上下两个不相关的块。
|
||||
- 使用自有、许可、官方引用或生成的图像。请勿伪造真实的杂志、机构、品牌徽标、期号、水印或归属。
|
||||
- 人工智能图像不得冒充历史档案、科学证据或真实数据。必要时将它们标记为“人工智能生成的插图”。
|
||||
|
||||
## 可编辑的交付和验证
|
||||
|
||||
- 尽可能将文本、形状、连接器、数据标签和图例保留为可编辑的 PPTD 元素;不要将整个信息图合并为单个位图。
|
||||
- 当用户只想要PNG或JPG等图像时,仍然先在PPTD中完成可编辑源,然后将其截图或渲染为图像。
|
||||
- 使用`kimi-slides check`检查越界、溢出、重叠和结构问题;使用 `kimi-slides screenshot` 检查视觉焦点、阅读顺序、对比度、字体大小和图像裁剪。
|
||||
- 先看整页缩略图,再看细节:缩略图应揭示主题和至少一个视觉记忆点;如果主要印象是标题、常规卡片和类似按钮的色块,请先重新调整结构,而不是仅微调字体大小和间距。
|
||||
- 修复问题页面后,再次检查并截图,然后打包PPTX或输出图像。
|
||||
|
||||
## 生产前检查表
|
||||
|
||||
- 您是否根据主题探索了不同的方向,并在项目中编写了具体的、可操作的`style.md`?
|
||||
- 画布比例和方向是否符合用户需求、部署场景、内容结构和阅读顺序?
|
||||
- 核心信息、主要视觉焦点和主导视觉语法是否清晰?
|
||||
- 在最终确定之前,您是否确实比较了候选英雄图像或结构图,以及所选的资产/人物是否真正进入了主要构图?
|
||||
- 是否存在可在缩略图大小下识别的海报级视觉动作,而不是普通的内容页面、卡片墙或应用程序界面?
|
||||
- 地图、时间线、路线、流程图、矩阵和索引是否真正表达了核心关系,而不是充当装饰或密度填充物?
|
||||
- 颜色、字体、图像处理、构图和图形语言是否来自当前主题,而不是默认重复使用以前的海报案例?
|
||||
- 事实、数据、日期、地点、单位、标题、来源和版权边界是否完整且可验证?
|
||||
- 正文、注释和图例在实际输出尺寸下是否可读,而不需要依靠极小的字体来填充信息?
|
||||
- 屏幕截图中的视觉结果是否真正匹配 `style.md`,而不仅仅是通过语法检查?
|
||||
1595
tmp/kimi-slides/reference/pptd.md
Normal file
250
tmp/kimi-slides/reference/shapes.md
Normal file
@@ -0,0 +1,250 @@
|
||||
## 参数值约定
|
||||
|
||||
* “调整”参数按照 OOXML 定义的顺序和数量进行描述
|
||||
* 值的范围一般在[0, 100000]以上,表示百分比(100000 = 100%)
|
||||
* OOXML中角度参数的单位为1/60000度;转换公式:`OOXML 值 = 度 × 60000`(例如,`16200000` = 270°)
|
||||
* 参数数组必须保持完整(中间值不能省略),或者完全省略以使用默认值
|
||||
* `-`表示该形状没有可调整的参数
|
||||
|
||||
---
|
||||
|
||||
## 基本形状
|
||||
|
||||
|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|直|矩形| - | - |
|
||||
|圆矩形 |圆角矩形 | [圆角半径] | [16667]|
|
||||
|椭圆|椭圆| - | - |
|
||||
|三角形|三角形| [顶点水平位置] | [50000]|
|
||||
| rtTriangle | rtTriangle |直角三角形 | - | - |
|
||||
|平行四边形|平行四边形| [倾斜偏移] | [25000] |
|
||||
|梯形|梯形| [顶部边缘插图] | [25000] |
|
||||
|非等腰梯形|非等腰梯形 | [左偏移,右偏移] | [25000, 25000] |
|
||||
|钻石 |钻石 | - | - |
|
||||
|五角大楼|正五边形| [水平系数、垂直系数]| [105146, 110557] |
|
||||
|六角形|六角| [插入偏移、垂直系数] | [25000, 115470] |
|
||||
|七边形|七边形| [水平系数、垂直系数]| [102572, 105210] |
|
||||
|八角形|八角形| 【切角尺寸】| [29289]|
|
||||
|十边形 |十边形 | [垂直因素] | [105146]|
|
||||
|十二边形|十二边形| - | - |
|
||||
|加 |加号| 【臂宽比】| [25000] |
|
||||
|本垒板 |五边形箭头| [箭头尖端偏移] | [50000]|
|
||||
|雪佛龙 | V形箭头| [V 形尖端偏移] | [50000]|
|
||||
|馅饼|馅饼 | [起始角度°,结束角度°] | [0, 16200000] |
|
||||
|饼楔|饼楔| - | - |
|
||||
|弧|弧 | [起始角度°,结束角度°] | [16200000, 0] |
|
||||
|和弦|和弦| [起始角度°,结束角度°] | [2700000, 16200000] |
|
||||
|区块弧 |块弧| [起始角度°、结束角度°、厚度] | [10800000, 0, 25000] |
|
||||
|泪珠|泪滴| 【尾部延长比例】| [100000] |
|
||||
|框架|框架| [边框厚度]| [12500]|
|
||||
|半帧|半框| 【横向厚度、纵向厚度】| [33333, 33333] |
|
||||
|角落|角落| 【横向厚度、纵向厚度】| [50000, 50000] |
|
||||
|诊断条纹 |斜条纹| [条纹宽度] | [50000]|
|
||||
|折叠角|折角| - | - |
|
||||
|甜甜圈|甜甜圈| 【环宽比】| [25000] |
|
||||
|禁止吸烟 |禁止符号| [斜线宽度] | [18750] |
|
||||
|心|心 | - | - |
|
||||
|闪电|闪电| - | - |
|
||||
|太阳 |太阳 | [射线内半径比] | [25000] |
|
||||
|月亮 |月亮 | [月牙宽度]| [50000]|
|
||||
|云|云| - | - |
|
||||
|笑脸 |笑脸| 【嘴部弧度】| [4653] |
|
||||
|斜角|斜角| [斜角宽度] | [12500]|
|
||||
|可以|气缸| 【椭圆盖高度】| [25000] |
|
||||
|立方体|立方体| [透视深度] | [25000] |
|
||||
|漏斗|漏斗 | - | - |
|
||||
|齿轮 6 |六齿齿轮| [齿高、齿宽] | [15000, 3526] |
|
||||
|齿轮9 |九齿齿轮| [齿高、齿宽] | [10000, 1763] |
|
||||
|牌匾 |牌匾| [圆角半径] | [16667]|
|
||||
|双波 |双波| [波幅,水平偏移] | [6250, 0] |
|
||||
|波|波| [波幅,水平偏移] | [12500, 0] |
|
||||
|行号 |逆线| - | - |
|
||||
|
||||
## 矩形变体|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|圆形1矩形|单圆角矩形| [圆角半径] | [16667]|
|
||||
|圆角矩形 |具有两个对角圆角的矩形 | [角 1 半径,角 2 半径] | [16667, 0] |
|
||||
|圆2同矩形 |具有两个同边圆角的矩形 | [顶角半径,底角半径] | [16667, 0] |
|
||||
|剪断1矩形 |单切角矩形| 【切角尺寸】| [16667]|
|
||||
| snip2Diag矩形 |有两个对角切角的矩形 | [角1切割尺寸,角2切割尺寸]| [0, 16667] |
|
||||
| snip2Same矩形 |有两个同边切角的矩形 | [上切尺寸、下切尺寸]| [16667, 0] |
|
||||
|剪圆矩形 |一圆一切角的矩形 | 【圆角半径、切角尺寸】| [16667, 16667] |
|
||||
|
||||
## 星星和爆炸
|
||||
|
||||
|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|星4 | 4 点星 | [内径比] | [12500]|
|
||||
|星5 | 5 星 | [内径比、水平系数、垂直系数] | [19098, 105146, 110557] |
|
||||
|星6 | 6 星 | [内半径比、水平系数] | [28868, 115470] |
|
||||
|星7 | 7 分星 | [内径比、水平系数、垂直系数] | [34601, 102572, 105210] |
|
||||
|星8 | 8 分星 | [内径比] | [37500] |
|
||||
|星10 | 10 星 | [内半径比、水平系数] | [42533, 105146] |
|
||||
|星12 | 12 点星 | [内径比] | [37500] |
|
||||
|星16 | 16 点星 | [内径比] | [37500] |
|
||||
|星24 | 24 点星 | [内径比] | [37500] |
|
||||
|星32 | 32 分星 | [内径比] | [37500] |
|
||||
|不规则密封1 |爆发 1 | - | - |
|
||||
|不规则密封2 |爆发2 | - | - |
|
||||
|
||||
## 箭头形状|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|右箭头 |向右箭头| [轴宽,箭头长度] | [50000, 50000] |
|
||||
|向左箭头 |向左箭头| [轴宽,箭头长度] | [50000, 50000] |
|
||||
|向上箭头 |向上箭头| [轴宽,箭头长度] | [50000, 50000] |
|
||||
|向下箭头 |向下箭头| [轴宽,箭头长度] | [50000, 50000] |
|
||||
|向左向右箭头 |左右箭头| [轴宽,箭头长度] | [50000, 50000] |
|
||||
|向上向下箭头 |上下箭头| [轴宽度,向上箭头长度,轴宽度,向下箭头长度] | [50000, 50000, 50000, 50000] |
|
||||
|四箭 |四箭头 | [轴宽度、箭头宽度、箭头长度] | [22500, 22500, 22500] |
|
||||
|左向右上箭头 |左右向上箭头| [轴宽度、箭头宽度、箭头长度] | [25000, 25000, 25000] |
|
||||
|左上箭头 |左上箭头| [轴宽度、箭头宽度、箭头长度] | [25000, 25000, 25000] |
|
||||
|弯曲箭头|弯曲的箭头| [轴宽度、箭头宽度、箭头长度、弯曲位置] | [25000, 25000, 25000, 43750] |
|
||||
|向上弯曲箭头 |向上弯曲箭头| [轴宽度、箭头宽度、箭头长度] | [25000, 25000, 25000] |
|
||||
|反方向箭头 |掉头箭头| [轴宽度、箭头宽度、箭头长度、弯曲半径、轴长度] | [25000, 25000, 25000, 43750, 75000] |
|
||||
|圆形箭头|圆形箭头| [箭头宽度、起始角度°、结束角度°、圆弧角度°、箭头尖端宽度] | [12500, 1142319, 20457681, 10800000, 12500] |
|
||||
|左圆形箭头 |左圆形箭头| [箭头宽度、起始角度°、结束角度°、圆弧角度°、箭头尖端宽度] | [12500, -1142319, 1142319, 10800000, 12500] |
|
||||
|左向右圆形箭头 |左右圆形箭头| [箭头宽度、起始角度°、结束角度°、圆弧角度°、箭头尖端宽度] | [12500, 1142319, 20457681, 11942319, 12500] |
|
||||
|弯曲右箭头|向右弯曲箭头| [箭头宽度、曲率、箭头长度] | [25000, 50000, 25000] |
|
||||
|弯曲左箭头|向左弯曲箭头| [箭头宽度、曲率、箭头长度] | [25000, 50000, 25000] |
|
||||
|向上弯曲箭头 |向上弯曲箭头| [箭头宽度、曲率、箭头长度] | [25000, 50000, 25000] |
|
||||
|弯曲向下箭头 |向下弯曲箭头| [箭头宽度、曲率、箭头长度] | [25000, 50000, 25000] |
|
||||
|条纹右箭头 |条纹右箭头| [轴宽,箭头长度] | [50000, 50000] |
|
||||
|缺口右箭头|缺口右箭头| [轴宽,箭头长度] | [50000, 50000] |
|
||||
|旋风箭头 |旋风箭头| [尾部宽度,箭头长度]| [25000, 16667] |
|
||||
|
||||
## 箭头标注
|
||||
|
||||
|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
| rightArrow标注 |右箭头标注 | [轴宽度、箭头宽度、箭头长度、框宽度] | [25000, 25000, 25000, 64977] |
|
||||
| leftArrow标注 |左箭头标注 | [轴宽度、箭头宽度、箭头长度、框宽度] | [25000, 25000, 25000, 64977] |
|
||||
|向上箭头标注 |向上箭头标注 | [轴宽度、箭头宽度、箭头长度、框高度] | [25000, 25000, 25000, 64977] |
|
||||
|向下箭头标注 |向下箭头标注| [轴宽度、箭头宽度、箭头长度、框高度] | [25000, 25000, 25000, 64977] |
|
||||
|向左向右箭头标注 |左右箭头标注| [轴宽度、箭头宽度、箭头长度、框宽度] | [25000, 25000, 25000, 48123] |
|
||||
|向上向下箭头标注 |向上向下箭头标注 | [轴宽度、箭头宽度、箭头长度、框高度] | [25000, 25000, 25000, 48123] |
|
||||
|四箭头标注 |四箭头标注 | [轴宽、箭头宽度、箭头长度、盒子尺寸] | [18515, 18515, 18515, 48123] |
|
||||
|
||||
## 标注|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|楔形矩形标注 |矩形标注 | [尖端 X 偏移,尖端 Y 偏移] | [-20833, 62500] |
|
||||
|楔形圆角矩形标注 |圆角矩形标注 | [刀尖 X 偏移、刀尖 Y 偏移、拐角半径] | [-20833, 62500, 16667] |
|
||||
|楔形椭圆标注 |椭圆标注 | [尖端 X 偏移,尖端 Y 偏移] | [-20833, 62500] |
|
||||
|云标注 |云标注 | [尖端 X 偏移,尖端 Y 偏移] | [-20833, 62500] |
|
||||
|边框标注1 |行标注 1 | [标注线 Y1、X1、Y2、X2] | [18750, -8333, 112500, -38333] |
|
||||
|边框标注2 |行标注 2 | [线 Y1,X1,拐点 Y,X,终点 Y,X] | [18750, -8333, 18750, -16667, 112500, -46667] |
|
||||
|边框标注3 |行标注 3 | [线 Y1、X1、拐点 1 Y、X、拐点 2 Y、X、终点 Y、X] | [18750, -8333, 18750, -16667, 100000, -16667, 112963, -8333] |
|
||||
|口音Callout1 |重音线标注 1 |与 borderCallout1 | 相同[18750, -8333, 112500, -38333] |
|
||||
|口音Callout2 |重音线标注 2 |与 borderCallout2 | 相同[18750, -8333, 18750, -16667, 112500, -46667] |
|
||||
|口音Callout3 |重音线标注 3 |与 borderCallout3 | 相同[18750, -8333, 18750, -16667, 100000, -16667, 112963, -8333] |
|
||||
|口音BorderCallout1 |带边框的强调线标注 1 |与 borderCallout1 | 相同[18750, -8333, 112500, -38333] |
|
||||
|口音BorderCallout2 |带边框的强调线标注 2 |与 borderCallout2 | 相同[18750, -8333, 18750, -16667, 112500, -46667] |
|
||||
|口音BorderCallout3 |带边框的强调线标注 3 |与 borderCallout3 | 相同[18750, -8333, 18750, -16667, 100000, -16667, 112963, -8333] |
|
||||
|标注1 |无边框标注 1 |与 borderCallout1 | 相同[18750, -8333, 112500, -38333] |
|
||||
|标注2 |无边框标注 2 |与 borderCallout2 | 相同[18750, -8333, 18750, -16667, 112500, -46667] |
|
||||
|标注3 |无边框标注 3 |与 borderCallout3 | 相同[18750, -8333, 18750, -16667, 100000, -16667, 112963, -8333] |
|
||||
|
||||
> **标注提示偏移注释**:标注形状的 X/Y 偏移值以形状中心为原点,以形状宽度/高度的百分比为单位。负值表示尖端位于形状的左侧/上方。
|
||||
|
||||
## 括号和大括号
|
||||
|
||||
|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|左大括号 |左大括号 | [曲率、中点位置]| [8333, 50000] |
|
||||
|右大括号|右大括号 | [曲率、中点位置]| [8333, 50000] |
|
||||
|左括号|左括号 | [曲率]| [8333]|
|
||||
|右括号 |右括号| [曲率]| [8333]|
|
||||
|大括号对 |支架对| [曲率]| [8333]|
|
||||
|支架对 |支架对 | [曲率]| [16667]|
|
||||
|
||||
## 丝带
|
||||
|
||||
|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|丝带|下弯丝带| 【折叠高度、色带曲率】| [16667, 50000] |
|
||||
|丝带2 |上弯丝带| 【折叠高度、色带曲率】| [16667, 50000] |
|
||||
|椭圆丝带|曲面下丝带| [曲率、中间高度、折叠高度]| [25000, 50000, 12500] |
|
||||
|椭圆带2 |曲面向上丝带| [曲率、中间高度、折叠高度]| [25000, 50000, 12500] |
|
||||
|左右功能区 |左右丝带 | [折叠高度、色带曲率、折叠宽度] | [50000, 50000, 16667] |
|
||||
|
||||
## 卷轴
|
||||
|
||||
|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|水平滚动|水平滚动| [滚动尺寸] | [12500]|
|
||||
|垂直滚动 |垂直滚动| [滚动尺寸] | [12500]|
|
||||
|
||||
## 数学符号|形状名称 |描述 |调整参数|默认值 |
|
||||
| --------- | --- | -------------- | ---- |
|
||||
|数学加 |加号| [线条粗细] | [23520] |
|
||||
|数学减|减号 | [线条粗细] | [23520] |
|
||||
|数学乘法 |乘号| [线条粗细] | [23520] |
|
||||
|数学除法 |部门标志| [线粗细、点间距、点大小]| [23520, 5880, 11760] |
|
||||
|数学等于|等号 | [线宽、行距] | [23520, 11760] |
|
||||
|数学不等于 |不等号 | [线粗细、斜线角度°、线距] | [23520, 6600000, 11760] |
|
||||
|
||||
## 图表形状
|
||||
|
||||
|形状名称 |描述 |
|
||||
| --------- | --- |
|
||||
|图表加 |图表加|
|
||||
|图表之星 |图表明星|
|
||||
|图表 X |图表 X |
|
||||
|
||||
## 标签形状
|
||||
|
||||
|形状名称 |描述 |
|
||||
| --------- | --- |
|
||||
|角标签 |角标签 |
|
||||
|方形标签 |方形标签|
|
||||
|牌匾标签 |牌匾标签|
|
||||
|
||||
## 操作按钮
|
||||
|
||||
|形状名称 |描述 |
|
||||
| --------- | --- |
|
||||
|操作按钮返回上一页|后退/上一页按钮|
|
||||
|动作按钮开始 |开始按钮|
|
||||
|操作按钮空白|空白按钮|
|
||||
|动作按钮文档 |文档按钮|
|
||||
|操作按钮结束 |结束按钮|
|
||||
|动作按钮前进下一个 |前进/下一步按钮 |
|
||||
|操作按钮帮助 |帮助按钮|
|
||||
|行动按钮首页 |主页按钮|
|
||||
|操作按钮信息 |信息按钮|
|
||||
|动作按钮电影 |电影按钮|
|
||||
|操作按钮返回 |返回按钮|
|
||||
|动作按钮声音 |声音按钮|
|
||||
|
||||
## 流程图形状
|
||||
|
||||
|形状名称 |描述 |
|
||||
| --------- | --- |
|
||||
|流程图流程 |流程图:过程|
|
||||
|流程图替代流程 |流程图:替代过程 |
|
||||
|流程图决策 |流程图:决策 |
|
||||
|流程图文档 |流程图:文档|
|
||||
|流程图多文档 |流程图:多文档|
|
||||
|流程图输入输出|流程图:数据|
|
||||
|流程图预定义流程 |流程图:预定义流程 |
|
||||
|流程图内部存储|流程图:内部存储 |
|
||||
|流程图手动输入|流程图:手动输入|
|
||||
|流程图手动操作 |流程图:手动操作|
|
||||
|流程图准备|流程图:准备|
|
||||
|流程图延迟 |流程图:延迟|
|
||||
|流程图终结者 |流程图:终结者|
|
||||
|流程图连接器 |流程图:连接器|
|
||||
|流程图OffpageConnector |流程图:页外连接器 |
|
||||
|流程图打孔卡|流程图:打孔卡|
|
||||
|流程图打孔带|流程图:打孔胶带|
|
||||
|流程图整理|流程图:整理 |
|
||||
|流程图排序 |流程图:排序|
|
||||
|流程图摘录 |流程图:提取|
|
||||
|流程图合并 |流程图:合并|
|
||||
|流程图或|流程图: 或 |
|
||||
|流程图SummingJunction |流程图:求和点|
|
||||
|流程图在线存储|流程图:在线存储|
|
||||
|流程图磁盘 |流程图:磁盘 |
|
||||
|流程图MagneticDrum |流程图:磁鼓|
|
||||
|流程图磁带|流程图:磁带|
|
||||
|流程图离线存储|流程图:离线存储 |
|
||||
|流程图显示 |流程图:显示|
|
||||
34
tmp/kimi-slides/reference/slides_categories.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# PPT分类指南
|
||||
|
||||
1. **遵循通用规则**:通用规则适用于所有场景、所有页面,并与风格指导文档同时生效
|
||||
2. **确定场景**:根据用户的输入选择匹配的场景
|
||||
3. **阅读场景文档**:阅读该场景的文档并根据其表达重点和方式进行设计
|
||||
|
||||
## 步骤1。一般规则
|
||||
|
||||
### 要求
|
||||
1. **每个页面都有一个明确的读者任务**:这个页面应该让读者理解、相信、决定或做什么——在设计之前仔细考虑一下。
|
||||
2. **分页有节奏**:自己决定是否需要目录或分区;读者在翻阅时应该感受到节奏的变化——有些页面一眼就被吸引,有些页面则值得停下来仔细阅读。
|
||||
3. **灵活使用图表和形状组合**:如果通过复杂的图表能够表达的信息体超出了当前图表语法所能表达的范围,那么鼓励您灵活地使用形状等方式来构造表达。
|
||||
4. **大师级输出**:每一张PPT都是精心制作的艺术品,可以参加比赛;密切关注布局、排版和色彩的每一个细节——细节决定成败。
|
||||
5. **明智地使用图像搜索/生成**:使用图像搜索/生成工具获取图像并将其放置在合适的位置。但滥用图像是严格禁止的。如果用户上传的文件包含有用的图像,请在合适的页面上使用它们。
|
||||
6. **遵循用户和主题**:用户指定的模板、品牌指南、配色方案、字体和样式参考优先于本指南。
|
||||
7. **来源归属**:涉及外部事实和数据的页面必须注明来源、日期或时间段以及衡量依据。源文本应使用指向原始报告或数据页的 <a href="url"> 超链接。在脚注中引用特定来源时,同样使用原始来源的 <a href="url"> 超链接以增强专业可信度。
|
||||
|
||||
### 严格禁止
|
||||
- **证据边界**:不捏造数据、引文、客户案例、实验结果或来源;当材料缺失时,将其清楚地标记为占位符、假设或需要提供的信息。
|
||||
- **经典AI模式**:严禁使用卡片来构建层次结构或对齐方式(圆角矩形、矩形卡片、带有彩色侧边条的卡片):线条、空白和字体大小对比是更好的解决方案;严禁使用红、紫、黄、绿全部聚集在一页的AI配色方案;
|
||||
|
||||
## 步骤2。场景确定
|
||||
根据用户的输入,分析演示文稿的受众和读者任务,确定其所属场景,并阅读相应的样式文档。
|
||||
> 选择一个主要场景。确有必要时,可以添加一个辅助场景,但必须以主场景为准。
|
||||
|
||||
|场景类型 |典型查询 |读者任务|样式文档 |
|
||||
|---|---|---|---|
|
||||
|分析与决策 |咨询、金融、行业研究、战略、市场机会、商业分析、投资分析 |比较选项、形成判断、支持决策 | `reference/slides_categories/analysis-decision.md` |
|
||||
|商业提案|营销计划、销售建议、筹款宣传、合作/投资促进、产品建议、商业计划 |了解价值、相信计划、采取行动 | `reference/slides_categories/business-plan.md` |
|
||||
|管理报告|工作报告、项目回顾、季度总结、OKR、管理层简报 |把握现状,表面问题,确认行动| `reference/slides_categories/management-report.md` |
|
||||
|学术研究|研究生研究项目、论文答辩、研究项目、提案报告、中期报告、期末/总结报告 |评估问题、方法、证据和贡献 | `reference/slides_categories/academic-research.md` |
|
||||
|教育培训/知识普及| K-12课件、教学演示、职业培训、患者教育、专业科普|理解、记住、应用或正确行动 | `reference/slides_categories/education-training.md` |
|
||||
|技术与工程 |工程计划、架构审查、研发报告、人工智能/数据/操作/安全 |清楚地查看结构、依赖关系、指标和权衡 | `reference/slides_categories/tech-engineering.md` |
|
||||
|品牌/创意展示|品牌故事、设计方案、作品集、文化活动 |建立感知,留下记忆,形成认同| `reference/slides_categories/brand-creative.md` |
|
||||
129
tmp/kimi-slides/reference/slides_categories/academic-research.md
Normal file
@@ -0,0 +1,129 @@
|
||||
# 学术研究
|
||||
|
||||
**基准参考**:来自麻省理工学院、苏黎世联邦理工学院、清华大学、北京大学等大学的演示模板; LaTeX Beamer 主题,例如 Metropolis、Focus、Blei 和 Auriga; Nature、Science、Cell 和 NEJM 等期刊的研究图板;以及在顶级学术会议上的演讲。
|
||||
|
||||
## 目标
|
||||
|
||||
### 叙事:捕捉第一分钟的价值;始终保持进度可见
|
||||
Follow the narrative logic of research background, evidence gap, research question, experimental hypotheses, core evidence, conclusion, and contribution — letting the committee/advisor grasp the value within the first minute.
|
||||
|
||||
通过适当的章节规划、在关键位置添加过渡页面、在正文骨架中构建导航栏以及类似的方法,让委员会/顾问随时了解演示的进度。
|
||||
|
||||
### 视觉效果:简单但不便宜
|
||||
学术场景中的演示通常很简单,但简单并不意味着简单化,更不意味着廉价。使用适当、精致的色彩,这些色彩在精神上是人们所期望的,但在选择上却是意想不到的,搭配细致的布局,营造出一种高级的感觉。
|
||||
1. **保持简约风格**:装饰元素和装饰图片只能用于封面、章节过渡页、结束页、页面背景图片等区域;严格禁止使用装饰性图像来填充身体区域。图标也不是填充空白的万能药——只有在添加图标能带来明显好处时才使用它们。
|
||||
2. **通过细致的细节设计实现优质的感觉**:统一的页面骨架、数据源和参考文献的脚注标记、图形和表格的标题、正确的页码、精心设计的字体大小层次结构和字体......
|
||||
3. **精神上期待的颜色,选择上意想不到的**:
|
||||
- 当用户精确提及学校/机构/组织/会议名称/期刊名称时,您可以下载官方Logo,使用Logo的原色作为原色,并将Logo插入到合理的位置。如果无法获取Logo,请勿使用Logo的原色,以免出现偏差。
|
||||
- 拒绝这种情况下最常见的调色板:
|
||||
*医学研究不使用医院蓝/医用绿;转向病理学幻灯片的苏木精紫 #684765 和伊红粉红 #C9828B。
|
||||
* 气候和地球科学不使用环境绿和海洋蓝;采用岩层灰#334047、矿物赭石#B66A3C、硫磺黄#C2A33A代替。
|
||||
- 除非用户明确要求,否则不要使用粗俗、简单的黑色、白色或浅蓝色背景;与更精致的背景对齐,例如钛灰色#E7E8E5、档案纸#F1E9DA或象牙色纸#F7F3E8。
|
||||
4. **大字体尺寸下的高密度**
|
||||
- 学术演示应在适当的字体大小下保持高密度,同时保留一些呼吸空间。与行业研究和金融的小字体和单行距不同,学术研究正文应使用较大的字体(10以上)和合适的行距(1.2左右),除非交付的成果是学术海报等阅读型工件。同时,还应具备产业研究和金融的“丰满度”:区域之间留有喘息空间,但每个区域内部要保持饱满。
|
||||
- 严格禁止规划 100 像素但最终仅容纳 70 像素内容的区域。###从研究领域开始;考虑视觉焦点
|
||||
不同研究领域的学术演讲有不同的侧重点:思考该领域真正重要的是什么,并决定每一页应该关注的内容。
|
||||
- 基础研究和理论推导:公式、定义、命题、证明步骤是重点;严谨、完整的推理过程占据了很大的面积。
|
||||
- 计算机科学与工程:系统图、代码、运行轨迹、消融实验、性能曲线构成页面骨架。
|
||||
- 实验研究:研究图表、图像和表格是重点。属于同一研究结论的公式、图表、表格和图像应尽可能紧凑。
|
||||
- 实证分析:本质上也是实验研究,但社会科学工作应该比科学和工程工作更加叙事驱动。
|
||||
- 人文/建筑/艺术:档案、地图、手稿、图像细节、时间线索和文本证据……除了学术严谨性之外,还应该有品牌层面的细化——再去读一下“brand-creative.md”。
|
||||
- 使用形状、线条和箭头作为注释来强调或解释图表和图像内容。
|
||||
|
||||
## 禁止事项
|
||||
|
||||
1. **默认无卡片**:除非用户明确要求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体/大小差异是更好的解决方案。
|
||||
2. **没有均匀划分的组合**:除非没有其他布局可用,否则不要默认为三分之一分割、四路分割或 2×2 矩阵 - 包括三部分公式,例如“三列 + 标题 + 结论”。
|
||||
3. **没有平庸、常见或人工智能典型的配色方案**:严格禁止任何蓝白配对、蓝紫色渐变、青紫色霓虹灯、彩虹耀斑、玻璃形态卡片或发光边框——除非用户明确要求。
|
||||
4. **字体不能过小**:除非用户要求或者交付物是阅读型工件(海报等),否则正文不得使用小字体。
|
||||
5. **区域内不能有空白**:严格禁止任何内容无法填满其计划区域的情况。文本框填满是不够的 - 如屏幕截图所示,实际文本内容必须填充该区域。不填是最严重的粗暴;感觉布局根本没有经过精心考虑。
|
||||
|
||||
## 视觉参考
|
||||
|
||||
### 瑞士联邦理工学院实验室海报
|
||||
|
||||
**参考对象**:苏黎世联邦理工学院官方PowerPoint和LaTeX模板,Metropolis。
|
||||
|
||||
**核心视觉**:就像固定在实验室墙上的一组瑞士研究海报。严格的网格、巨大的结论、大型纯色样本和全屏研究图像形成了强大的比例;页面安静但不保守。
|
||||
|
||||
**类型和网格**:
|
||||
- 使用中性无衬线字体;封面标题 64–88 点,页面标题 36–48 点,正文 16–19 点,来源 9–11 点。
|
||||
- 使用明显不对称的比例,通常为 3:9、4:8 或整页主图像。
|
||||
|
||||
**研究数据**:
|
||||
- 主图占据页面的 60%–75%,轴、误差线、图例和来源均完整保留。
|
||||
- 照片、显微照片和遥感图像可以全屏布局;标题位于不透明的色块内,而不是直接位于复杂的图像上。
|
||||
- 每页仅突出显示一个结果。
|
||||
|
||||
**页面语法**:
|
||||
1. 封面:研究背景或主题的全屏图像,与原色的纯色样本配对以构建不对称的角色。
|
||||
2.内容页面:流程沿着十二列网格水平推进; **严禁使用卡片**。
|
||||
3.结果页:左边是巨型结论,右边是完整的主图;在下一页上,左右交换。
|
||||
4. 限制页面:一条粗彩色线将“已证实”和“尚未确定”分开。
|
||||
5. 结束页:返回封面色样比例,一一回答研究问题。**重复图案**:不对称的纯色样本、章节编号、页码、注释、参考脚注标记以及沿页面边缘的细刻度线。
|
||||
|
||||
**禁止**:圆形卡片、居中标题、柔和阴影、蓝白商务风格、彩色图表以及将机构徽章放大为巨大水印。
|
||||
|
||||
### 清华/麻省理工式精英大学答辩
|
||||
|
||||
**参考对象**:清华大学、麻省理工学院等类似机构的官方视觉识别系统;部门防御模板;课程讲义和研究报告。
|
||||
|
||||
**核心视觉**:整个甲板承载着正式部门防御材料的有序性。通过学校颜色、学校名称或系徽来确立身份;其他一切都退到了内容后面。页面稳定、精准、内敛;公式、数字和论证始终占据视觉中心。
|
||||
|
||||
**调色板**:
|
||||
- 当用户明确提及学校或机构时,从官方标志中提取一种原色 - 切勿从内存中硬编码颜色值。在普通正文页上,校色保持在面积的3%~8%以内;部分页面可以在整个页面上使用学校颜色。
|
||||
- 当图形具有清晰的语义时,保持科学的配色方案;如果没有,请使用学校颜色、浅灰色和深灰色以及一种必要的对比色——不要只是为了丰富图片而添加颜色。
|
||||
|
||||
**类型和网格**:
|
||||
- 中文使用中性黑(无衬线)字体;英语和公式可以与学术衬线或数学字体搭配。封面标题 48–64 pt,页面标题 32–40 pt,正文 17–21 pt,说明文字和来源 9–11 pt。
|
||||
- 标题、正文、图形说明和脚注均保留自己的固定基线。
|
||||
- 正文页面可以设置极薄的页眉或页脚规则,并固定在适当位置的短标题、部分名称和页码 - 或部分导航。
|
||||
|
||||
**研究内容**:
|
||||
- 公式保留其编号、条件和符号解释;关键推导可能会逐步出现,但每一页都必须形成一个完整的局部参数。
|
||||
- 表格最好采用论文中的三行表格结构,仅突出显示与结论直接相关的行和列。
|
||||
|
||||
**页面语法**:
|
||||
1.封面:学校或院系校徽、职称、作者、导师、院系、日期;用学校颜色的细线建立身份——没有巨大的水印。
|
||||
2. 章节页面:一整页学校颜色或精致的背景颜色,仅包含章节编号、标题和一个研究问题。搭配装饰性的微妙图案背景图片,丰富视觉效果。
|
||||
3.摘要页:按研究问题逐条回答,在每条后标注相应的证据或章节编号。
|
||||
4. 参考文献页:使用比正文略小但比脚注大的字体,并以官方引文格式、分栏或单栏放置参考文献。
|
||||
5. 结束页:保留学校颜色、系徽、联系方式,仅提出“问题”或一个最终结论。
|
||||
|
||||
**重复主题**:短校色线、固定标题基线、章节名称、页码、图形标题和参考脚注标记。
|
||||
|
||||
**禁止**:根据记忆伪造学校颜色、放大徽章以填充空白、半透明徽章水印、蓝色渐变标题、在每页上重复大色带、圆形信息卡、没有标题的图形以及为了传统而挤压正文和图形。
|
||||
|
||||
### 人文社会科学档案特刊
|
||||
|
||||
**参考对象**:大学出版社的人文社会科学学术专着、二十世纪的学术期刊、档案目录,以及“brand-creative.md”中的复古印刷纸张、布局和图像处理。仅吸收有助于提供证据的部分。**核心视觉**:整个甲板读起来就像一本具有现代布局的档案研究特刊排版。温暖的纸色调、衬线字体、页边注释、文档编号和细分隔线形成了稳定的骨架;档案、地图、手稿、采访和统计材料作为证据出现,而不是作为填充图片的装饰。
|
||||
|
||||
**调色板**:
|
||||
- 背景:档案文件#F1E9DA;文字:墨黑色#27231F;辅助信息:旧纸灰色#9B9489。
|
||||
- 按主题选择一种强调色:注释朱红色 #8C3B36 或装订墨绿色 #355C52。整个演示文稿只选择一个,并将其控制在普通页面面积的 3%–8% 范围内。
|
||||
- 原始档案和艺术品可以保留其原始色彩;图形、注释和导航仍然遵循统一的调色板。
|
||||
|
||||
**类型和网格**:
|
||||
- 中文标题和正文最好使用现代宋体(衬线)字体或其他清晰的衬线字体;数字、编号、来源和档案参考号可以使用无衬线或等宽字体。
|
||||
- 封面标题 48–68 pt,页面标题 34–44 pt,正文 17–20 pt,长引文 21–28 pt,图注和脚注 9–11 pt;主体行距 1.3–1.45。
|
||||
- 通常使用 4:8 或 5:7 的不等宽布局,为日期、关键字、文档编号或注释保留窄边距。依靠空白和细线来组织内容——没有复古的花边边框,也没有卡片。
|
||||
|
||||
**档案、引文和数据**:
|
||||
- 档案扫描应保留纸张边缘、页码、密封件以及馆藏号或入藏号;当需要强调时,用细框、引导线和放大的细节来指出证据。
|
||||
- 为每张档案图像贴上作者、标题、日期、保存机构和参考编号的标签;为每份采访摘录标明受访者人数、时间和地点。
|
||||
- 统计图表保持现代且清晰绘制,没有老化的纹理重叠。仅使用强调色来突出显示与参数直接相关的数据系列。
|
||||
- 长引文仅摘录支持论点的段落,旁边附有解释和出处;避免堆积整页的原文。
|
||||
|
||||
**页面语法**:
|
||||
1. 封面:标题风格类似于学术专着的扉页,搭配占据图片 35%–50% 的档案、地图或艺术品细节;还放置作者、机构、日期和卷/期类型的元数据。
|
||||
2.研究问题页:使用三到五行抽象风格的开头,在页边空白处列出地点、日期、主题和材料范围。
|
||||
3.文献综述页面:按照时间或观点分歧来组织文献,用细线连接学者、论点、回应或参与关系——不要筑起作者卡墙。
|
||||
4.档案证据页:左侧有大原件;右侧按转录、翻译、解释和出处顺序排列;使用相同的数字连接原始数据和分析数据。
|
||||
5、实证分析页:主要图或表占三分之二;另一方持有结论、变量描述和限制;定量材料也遵循特刊的框架。
|
||||
6、地图时间页面:使用一张主地图或一条主时间线;强调色仅标记与论点相关的地点和事件。
|
||||
7.论证页:顶部有清晰的判断语句,下面按顺序排列文字证据、视觉证据和研究者的解释。
|
||||
8. 结论页:用连续编号的短段落回答研究问题,每个段落附有相应的档案号、图号或节号。
|
||||
|
||||
**重复主题**:书页式页码、细脚注规则、行头、档案参考编号、章节选项卡和统一的图形标题格式。
|
||||
|
||||
**禁止**:随意倾斜的剪贴画、低对比度正文、将档案材料作为背景纹理以及没有来源的历史照片。
|
||||
@@ -0,0 +1,33 @@
|
||||
# 分析与决策
|
||||
|
||||
## 内容扎实、紧凑,布局密度极高
|
||||
|
||||
1. 除非演示文稿明确用于舞台演示,否则默认将其视为阅读型演示文稿。围绕这个目标来设计整个工作,并展现出顶级研究报告或咨询公司的水准。
|
||||
2、每页都有足够的深度:可以快速掌握核心结论,阅读整页只需5分钟。
|
||||
3.从结论到证据的支持级联:一旦标题陈述了一个判断,页面就应该包含几个独立的支持判断,将结论与证据联系起来,每个判断都有一个可验证的支持句子。
|
||||
4.正文页标题最好是陈述句(“欧洲电动重型卡车电池到2030年将达到48 GWh——在政策的强力推动下,六年内增长16倍”),但根据实际内容决定是否使用陈述句。
|
||||
|
||||
## 将数据和结构化信息作为论点的主体
|
||||
|
||||
1、数据是论证的核心支撑:围绕主题深入搜索,获取真实数据,并通过各类图表充分呈现;每一条数据都必须注明来源——绝不捏造数据。
|
||||
2. 图表配有坐标轴、单位、图例、来源和测量基础,因此图表独立于正文。
|
||||
3、在图表上标记数据拐点和关键值并解释其含义;每个图表都附有文字,说明其所证明的判断、图表上可见的发现、对决策的影响以及来源和界限。
|
||||
4.鼓励使用SmartArt形状组合来呈现信息;当内容之间存在结构关系(顺序、比较、循环、因果关系等)时,更喜欢用结构图使它们可见,而不是用文本描述它们。
|
||||
5. 鼓励绘画和组合形状来构建复杂的图表和 SmartArt,并辅以文本解释——纯文本太平淡了。
|
||||
|
||||
## 关键要求
|
||||
1、打造顶级视觉体验:排版、字体、颜色、对齐等每个细节都要精心对待;不接受默认——细节决定成败。
|
||||
2. 除非明确要求,严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体/大小差异是更好的解决方案。
|
||||
3、单个基本图表不得占据宽度的一半或以上;鼓励在一页上布置多个图表或其他内容。
|
||||
4.除非没有其他布局,否则禁止均分构图;不要默认使用三分之一分割、四路分割或 2×2 矩阵 - 包括三部分公式,例如“三列 + 标题 + 结论”。
|
||||
|
||||
## 视觉参考1. 白色背景 + 单原色骨架:纯白色页面,整个甲板上只有一种原色(例如海军蓝、墨绿或财务咨询风格中常见的其他颜色),承载结构骨架 - 标题强调、表格标题、导航突出显示、主图表系列和编号标记 - 由相同色调和中性灰色的 2-3 步浅色调梯支撑。
|
||||
2、标题即结论:每页的主标题是一个完整的判断句;标题格式(引子→主标题→副标题,或标题+结论句副标题)始终固定;在排版中,粗体衬线标题和无衬线正文形成两个明确划分的角色,具有严格一致的层次结构。
|
||||
3. 如果页眉和页脚存在,则它们必须保持稳定:部分导航始终可见(当前部分突出显示;通过导航位置区分部分,而不是通过切换颜色),页脚中固定的“来源:”行+页码;每个元素在页面之间都保持相同的坐标,因此翻转时不会发生任何跳跃。
|
||||
4、密度节奏:正文页高密度包装,图表/表格/结构图为主体,文字为佐证;封面、章节页和结论页使用空白作为呼吸点。
|
||||
5、职位纪律:结论→顶级头衔;证据→中间的图表/表格;解释 → 图表或侧边栏旁边的注释;来源和测量依据→底部的来源行;行动建议 → 仅最后一页。每种类型的信息都有自己的位置,始终保持一致。
|
||||
6. 去默认图表:将所有系列颜色重新分配给原色梯+灰度;删除垂直网格线(最多保留极浅的水平线);数据标签仅标记关键点和端点;实际与预测通过实线与虚线/阴影线来区分;在每个图表的正下方,放置其来源+测量基础注释。
|
||||
7. 直接在图表上标记关键值:用大数字标注的关键总计,用箭头或引导线+一句话注释的拐点/差距/增长率,用哈维球或徽章的评级——直接放在图表区域上,而不是堆放在文本段落中。
|
||||
8.表格约定:深色标题,白色文本,极细的水平分隔符(无垂直线或粗边框),数字右对齐,文本左对齐,第一列主题名称加粗;大桌子旁边有一个解释面板。
|
||||
9. 线条和对齐规则:所有元素对齐到统一的左边缘和不可见的列线;分隔仅使用极细的线条,强调仅使用原色短条或粗竖条,切勿使用粗框;面板是方角的,没有阴影;仅允许在小标签上使用圆角。
|
||||
10.干净的表面:没有阴影,没有渐变,没有纹理,没有发光效果,没有默认颜色;纹理完全是通过空白、对齐、单一色调色阶和线条规则来实现的。
|
||||
196
tmp/kimi-slides/reference/slides_categories/brand-creative.md
Normal file
@@ -0,0 +1,196 @@
|
||||
# 品牌/创意展示
|
||||
|
||||
**基准参考**:Monocle、Wallpaper、Vogue等顶级杂志; Pentagram等国际设计机构;以及优秀的品牌年报、品牌书籍、创意提案。
|
||||
|
||||
## 目标
|
||||
|
||||
### 确定主题;构建一个主题一目了然的套牌
|
||||
如果演示文稿的主题是特定品牌、产品、公司、人物、城市、建筑、事件或 IP,请首先提取主题的识别特征:
|
||||
- 从用户上传的参考资料中提取图标和品牌概念等视觉标识符。
|
||||
- 搜索并访问官方网站、官方发布的年度报告、创意手册和图标。不要只阅读文本——更多地依靠参考和研究页面的视觉效果来帮助理解风格。
|
||||
即使删除所有文本内容,仍应通过其他视觉特征找到与主题的关联。
|
||||
|
||||
###取其精华,去其糟粕
|
||||
并非每个主题都具有与《Monocle》、《Wallpaper》或《Vogue》等顶级杂志一致的审美。在提取主体风格时,准确识别哪些项目可以引用,哪些项目禁止引用。必须明确禁止不符合基准标准的设计。如果品牌本身缺乏设计品质,可以只保留品牌的主色作为主题或强调色,或者保留图标作为装饰。
|
||||
|
||||
###打造顶级视觉体验
|
||||
使用强烈的字体大小对比和极端不对称的布局来构建夸张的风格和顶级的视觉体验。拒绝一切安全、平庸、保守的选择:丑陋总比平庸好。
|
||||
1. **做出极端的选择**:超大字体、巨型图像、强烈的空白、高密度的多列、单一鲜艳的颜色或粗线条。打造终极风格:旧报纸头版、孟菲斯、构成主义、瑞士风格……
|
||||
2. **改变页面**:封面、意见、数据和图像页面各有不同的组成。不需要严格遵循一个相同的“页面骨架”,但甲板的一致性仍然应该通过调色板、字体、字体大小、相同风格的装饰元素和相同的网格对齐来识别。
|
||||
3. **有视觉理由**:视觉语言必须来自套牌的主题、品牌、行业、时代或材料,并且必须帮助观众理解内容。
|
||||
|
||||
## 禁止事项
|
||||
1. **默认无卡片**:除非用户明确要求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式:线段、空白和字体/大小差异是更好的解决方案。
|
||||
2. **没有均匀划分的组合**:除非没有其他布局可用,否则不要默认为三分之一分割、四路分割或 2×2 矩阵 - 包括三部分公式,例如“三列 + 标题 + 结论”。
|
||||
3. **没有平庸、常见或人工智能典型的配色方案**:严格禁止任何蓝白配对、蓝紫色渐变、青紫色霓虹灯、彩虹耀斑、玻璃形态卡片或发光边框——除非用户明确要求。
|
||||
4. **没有与整体风格冲突的元素**:不得出现所选样式之外的任何样式,例如在锐利样式中使用圆角图标或圆角矩形。
|
||||
|
||||
## 视觉参考
|
||||
|
||||
视觉参考只是“参考”:它们向您展示一些好的东西,这样您就知道好的东西是什么样子的——它们不能直接使用。你应该根据用户的实际需求来设计视觉效果,而不是直接套用模板。
|
||||
|
||||
### 克莱因蓝瑞士海报
|
||||
|
||||
**核心视觉**:整个甲板读起来就像一组现代主义展览海报。严格的左对齐、十二列网格、极端的字体大小差异、巨大的数字和大面积的空白。画面仅使用纸白色、近乎黑色和克莱因蓝。**调色板**:
|
||||
- 背景:暖纸白色#F7F5EF,大约 70%–85%。
|
||||
- 文本:近乎黑色#101010。
|
||||
- 强调色:克莱因蓝#0038B8,在普通页面上占5%–12%;部分页面可以使用占据图片30%–40%的蓝色块。
|
||||
- 辅助灰色:#D8D7D2,仅用于网格线和辅助信息。
|
||||
- 没有渐变,也没有第二种强调色。
|
||||
|
||||
**类型**:
|
||||
- 封面标题:超重无衬线字体,112–136 pt,行高 0.85–0.95,可能会被画布边缘稍微裁剪。
|
||||
- 内容页标题:48–64 pt。
|
||||
- 正文:17–20 点
|
||||
- 页码、来源和标签:9–11 磅,加宽字母间距。
|
||||
- 一切左对齐,仅使用单个无衬线系列,通过粗细变化构建层次结构。
|
||||
|
||||
**网格和几何**:
|
||||
- 左右边距等于画布宽度的 5%;使用十二列网格。
|
||||
- 主要构图使用 2:8、3:7 或整页空白。
|
||||
- 仅使用直角矩形、正圆形、0.5 磅细线和 4 磅粗线。
|
||||
- 没有圆角、阴影、轮廓图标或浮动卡片。
|
||||
|
||||
**图像处理**:
|
||||
- 产品截图全部进入固定的 16:10 时段。
|
||||
- 摄影为统一的高对比度黑白;蓝色表面只能局部覆盖。
|
||||
- 每页最多一张主图;没有照片拼贴。
|
||||
|
||||
**页面语法**:
|
||||
1、封面:标题占左侧65%;整个高度的蓝色表面位于右侧;顶部只有一行 10 pt 元信息。
|
||||
2.章节页:整页仅包含章节编号和一个标题行;数字为 120 pt 蓝色。
|
||||
3.意见页:一个64-88分的结论,右下角有一个小注释。
|
||||
4、数据页:左三分之一为110点数字;右侧有一个简化的图表。
|
||||
5. 架构页面:所有节点对齐十二列网格;连接线统一为1pt;只有核心节点是蓝色的。
|
||||
6. 关闭页面:返回到封面的蓝色表面和巨型标题,关闭循环。
|
||||
|
||||
**重复主题**:一条蓝色垂直线和一个固定在每页左上角的两位数部分编号。
|
||||
|
||||
**禁止**:圆形卡片、均匀划分的三列、彩色小图标、多色图表、渐变、柔和阴影、居中标题。
|
||||
|
||||
### 模板印刷独立杂志
|
||||
|
||||
**核心视觉**:整个套牌感觉就像一本手工修剪、扫描和装订的独立杂志。厚海报类型、双色叠印、半色调图像、剪切和粘贴块以及轻微倾斜。保留纸张和印刷的缺陷,而不是追求数字界面的华而不实。
|
||||
|
||||
**调色板**:
|
||||
- 纸张:暖米色#F1E2C2。
|
||||
- 主墨水:钴蓝#1646B8。
|
||||
- 第二专色:荧光粉色#FF4F87。
|
||||
- 文本和规则:墨水黑色#171512。
|
||||
- 橙黄色 #F1A51B 可能仅出现在一个或两个部分页面上,且在 5% 的区域内。
|
||||
- 无透明渐变;颜色仅以平面、套印和半色调的形式出现。
|
||||
|
||||
**类型**:
|
||||
- 封面标题:超重压缩海报类型,88–120 pt,允许旋转 -3 度并穿过画布边缘。
|
||||
- 页面标题:42–58 pt,可以黑底反白。
|
||||
- 正文:14–17 pt,采用清晰的无衬线或衬线字体。
|
||||
- 注释:10–12 pt 等宽,模仿打字机标签。
|
||||
|
||||
**网格和几何**:
|
||||
- 使用不等宽的两列和三列以及剪切和粘贴模块。
|
||||
- 图像和文本块可以旋转 -4 到 +4 度。
|
||||
- 主要规则 2–3 分;裁剪标记 0.75 pt。
|
||||
- 色块保持直角;允许局部溢出和相互重叠。
|
||||
|
||||
**图像处理**:
|
||||
- 所有照片首先转换为高对比度黑白,然后进行蓝色或粉色半色调处理。
|
||||
- 半色调网点大小保持一致;允许 2-4 个像素的色彩重合失调。
|
||||
- 人物和建筑物可能会被粗暴地裁剪,但永远不会超过失去可识别主题的程度。
|
||||
- 切勿直接放入全彩照片。**页面语法**:
|
||||
1、封面:标题占据图片一半以上;底部是印刷机或书店的蓝粉色双色调照片;右上角贴有倾斜的小标签。
|
||||
2. 目录页:五张彩色纸条,每条仅包含一个章节编号和一个简短标题。
|
||||
3.历史页面:时间线看起来像夹在纸上的门票;年使用 40–56 磅粗体。
|
||||
4. 工艺页:水平展开五个台阶,每个台阶包含一个半色调图像、一个数字和一行说明。
|
||||
5、城市案例页:一张大图占60%;文本像报纸侧边栏一样压在图像的一侧。
|
||||
6.地图页面:地图保持黑色线条;主要城市均标有粉红色实心圆圈。
|
||||
7. 结束页:四个大数字圆圈表示操作步骤;底部有一条黑色宣言线。
|
||||
|
||||
**重复出现的图案**:套印错误的蓝色和粉色套印、左上角的裁剪线以及固定的卷/期号。
|
||||
|
||||
**禁止**:玻璃形态、柔和的阴影、光滑的渐变、精致的圆角、全彩摄影、商务剪辑图标和完美对称的网格。
|
||||
|
||||
### 野兽派报纸
|
||||
|
||||
**核心视觉**:整个套牌读起来就像一本关于行业转折点的特别版报纸。巨型刊头、窄边距、不等宽多栏、粗细规则、高密度正文和黑白半色调照片。红色仅用于最关键的数据和警告。
|
||||
|
||||
**调色板**:
|
||||
- 新闻纸白色:#F5F1E8。
|
||||
- 黑色墨水:#111111。
|
||||
- 新闻红色:#C8102E,保持在页面面积的 3%–8% 范围内。
|
||||
- 侧边栏纸黄色:#E7DDCA。
|
||||
- 辅助文本:#55514A。
|
||||
- 没有蓝紫色渐变,也没有彩色状态块。
|
||||
|
||||
**类型**:
|
||||
- 标头:超重无衬线字体,72–100 pt,全部大写(如果支持)或以其他方式设置为超粗体短文本。
|
||||
- 头条新闻:44-72 分,紧领先。
|
||||
- 正文:11–14 磅衬线,行距 1.25–1.4。
|
||||
- 数据和标签:等宽,10–14 pt。
|
||||
- 引述:28–40 pt 衬线斜体或粗体。
|
||||
|
||||
**网格和几何**:
|
||||
- 边距为画布宽度的 3.5%–4%。
|
||||
- 内容页面使用三到五个不等宽的列。
|
||||
- 线条有四个等级:0.5 pt、1 pt、3 pt 和 5 pt。
|
||||
- 所有模块均为直角,按规则组织;没有浮动卡。
|
||||
|
||||
**图像处理**:
|
||||
- 照片统一转换为高对比度黑白半色调,保持可见的颗粒。
|
||||
- 每张图像都带有 9-10 磅的标题和来源。
|
||||
- 您可以使用红色圆圈、红色下划线或红色图章来标记图像 - 每页仅选择其中一种标记类型。
|
||||
|
||||
**页面语法**:
|
||||
1. 封面:顶部有一条 5 磅的红线,下方有一个横跨整页的报头;主标题使用80-96磅;底部有三个简短的新闻简报。
|
||||
2.概述页:连续四个大数字,每个64-88分,下面三列观察结果。
|
||||
3、排行榜页:左三分之一黑白半色调照片;水平条形图位于右侧三分之二处。
|
||||
4. 成本页面:中间有一个全角服务器机房横幅,下面有一个折线图和一个狭窄的注释栏。
|
||||
5.保单页面:顶部黑白横向图片;下面,一个密集的三列表比较了不同的区域。
|
||||
6.时间轴页面:一条粗黑色主线,六个红色节点;事件描述分布在上面和下面。
|
||||
7. 结束页:只有一个64分的结论和一个红色句号。
|
||||
|
||||
**重复主题**:顶部红线、固定刊头、黑色栏线和右下角的版本信息。
|
||||
|
||||
**禁止**:圆角、阴影、插图图标、彩色卡片、松散的业务布局、默认表格样式和无源数据。
|
||||
|
||||
### 孟菲斯流行海报
|
||||
|
||||
**核心视觉**:整副牌采用粗黑轮廓、巨型海报类型、棋盘格、闪电、波浪、圆点以及打破框架的几何形状。图片生动活泼,而文字区域保持干净——就像八十年代流行海报和当代青年活动视觉效果的融合。**调色板**:
|
||||
- 背景:乳白色#FFF3D8。
|
||||
- 墨水:深黑紫色#151427。
|
||||
- 荧光粉色#FF3EA5。
|
||||
- 亮黄色#FFD63D。
|
||||
- 湖蓝色#05C7E8。
|
||||
- 薄荷绿#23D6A2。
|
||||
- 每页最多三种高饱和度颜色;轮廓和正文必须使用深黑紫色,以稳定画面。
|
||||
|
||||
**类型**:
|
||||
- 封面标题:超重圆形或漫画风格显示类型,92–128 pt,带有 3–5 pt 黑色轮廓和硬偏移色块。
|
||||
- 部分文字:80–110 pt,支持全部大写或单个巨型字符。
|
||||
- 页面标题:36–48 pt。
|
||||
- 正文:15–18 pt 中性无衬线字体;没有脚本面孔。
|
||||
- 数字:72–100 pt,重黑色字体。
|
||||
|
||||
**网格和几何**:
|
||||
- 构图明显不对称;主要物体可以旋转 -6 到 +6 度。
|
||||
- 几何形状使用 3–5 pt 黑色轮廓。
|
||||
- 每一页都有一个打破框架的几何形状,占据画面的20%–40%。
|
||||
- 装饰集中在角落和边缘,从不覆盖正文。
|
||||
|
||||
**图像处理**:
|
||||
- 人物统一渲染为具有粗黑色轮廓或高饱和度丝网印刷效果的平面插图。
|
||||
- 多人页面使用四面板系列,半身像尺寸和视角一致。
|
||||
- 场馆地图使用手绘图标,但路线和时间表信息保持清晰。
|
||||
|
||||
**页面语法**:
|
||||
1、封面:标题填满上半部分;人群剪影和舞台位于底部;棋盘、闪电和圆点占据了四个角,而中心则保持空白。
|
||||
2.章节页:一个巨大的单词或字符,背景是一个破帧的圆圈和一个波浪。
|
||||
3. 数字页:一行四个数字,每个数字的背景颜色不同,都有相同的粗轮廓。
|
||||
4.阵容页面:上半部分为四人面板系列;下半部分的名称、样式和设置时间。
|
||||
5. 场馆地图:中心为放射状地图,周围有彩色标签标记舞台和设施。
|
||||
6.时间表页面:时间线保持水平和规则,颜色区分阶段,装饰退到边缘。
|
||||
7. 票价页面:三层硬边海报块,价格64-80 pt,无浮动阴影。
|
||||
8. 结束页:全出血日落插图,顶部有一条 88 磅的手写感觉线,重复封面的棋盘角。
|
||||
|
||||
**重复出现的主题**:右上角的棋盘、粉色闪电和粗黑色轮廓 - 棋盘必须出现在至少五页上。
|
||||
|
||||
**禁止**:柔和阴影、低对比度文本、同时出现的所有颜色、脚本正文、覆盖数据的装饰以及普通业务图标。
|
||||
47
tmp/kimi-slides/reference/slides_categories/business-plan.md
Normal file
@@ -0,0 +1,47 @@
|
||||
# 商业提案
|
||||
|
||||
## 故事情节清晰,说服力强
|
||||
|
||||
- 整套牌的故事情节清晰,一步一步构建。
|
||||
- 如果一个页面有一个核心主张,那么最重要的句子就享有被“标记”的视觉特权。
|
||||
- **情绪有一条曲线**:牌组的情绪并不平坦——从不安(痛点)到希望(解决方案)到信念(证据)到敦促(行动)。
|
||||
- 充分利用数据支撑:在合适的位置上用数据、表格、图表来辅助提案。数据必须真实可靠,并注明来源。
|
||||
|
||||
## 通过SmartArt结构图讲述更完整的故事
|
||||
|
||||
**SmartArt是叙事的可视化:大胆使用复杂的结构图来呈现多层次的关系。**
|
||||
|
||||
- 从信息关系(序列、比较、循环、因果关系等)中分解结构,并更喜欢用结构图使它们可见,而不是用文本描述它们。
|
||||
|
||||
## 翻页有喘息的空间
|
||||
|
||||
- 鼓励在内容页面中散布精致的章节页面和重点页面,以显着提升读者的体验。部分页面可以使用图像作为背景,并由渐变覆盖层覆盖。
|
||||
- 当主题适合时,慷慨地搜索图像,并将精心挑选的图像放在正确的位置——一图胜千言。
|
||||
|
||||
## 关键要求
|
||||
1.打造顶级视觉体验:精心对待排版、字体、色彩的每一个细节,将其打造为一件艺术品,细节决定成败。
|
||||
2. 除非用户明确要求,**严格禁止使用圆角矩形或矩形卡片**来构建层次结构或对齐方式:线段、空白和字体/大小差异是更好的解决方案。
|
||||
3.除非没有其他布局,否则禁止均分构图;不要默认使用三分之一分割、四路分割或 2×2 矩阵 - 包括三部分公式,例如“三列 + 标题 + 结论”。
|
||||
|
||||
## 视觉参考
|
||||
|
||||
1、类型即态度:展示类型(标题、宣言行、大数字)和正文类型(正文、注释、来源)按科或轻重有明确的分工;展示类型需要海报级别的张力,在大小、重量和字母间距上大胆的极端对比——标题本身就是一个视觉作品。
|
||||
2、字体和配色必须搭配、和谐;设计时互相参考。
|
||||
3.节奏和重音页面:旋转页面类型顺序,绝不是连续两个页面具有相同的骨架;宣言页面、分区分隔页面和大数字英雄页面处理情感转变和视觉强调。
|
||||
4、精心设计的版式:页面版式设计巧妙,有美感,有灵魂——不仅仅是简单的文字排列。
|
||||
5. 角落和边缘视觉效果:鼓励将形状构建成有助于解释的图像,或者在空白区域中用形状制作精致的、纯粹装饰性的符号。
|
||||
6.去默认图表和表格:所有系列颜色均来自品牌调色板;数据标签仅标记关键点并直接位于图形旁边;桌子之间仅由细水平线隔开——没有厚重的框架,没有斑马条纹。
|
||||
7. 细节决定品质:像素级对齐和字母间距在任何放大倍数下都经得起检验;纹理完全通过排版、对齐、色块和线条规则来实现——任何地方都没有默认值;细节是大师和平庸的分界线。
|
||||
8. 主题和文本/图像分离:在整个平台上建立 2-5 个重复出现的视觉主题(装饰、图标和插图共享一种语言),以形成可识别性和艺术签名。
|
||||
|
||||
### 调色板参考**精神上期待的颜色,选择上意想不到的**:
|
||||
- 当用户精确提及某个公司/产品/品牌名称时,更喜欢以该品牌的VI原色作为结构原色,并围绕其设计匹配的调色板。
|
||||
- 拒绝各场景最常见、最平庸的公式化调色(科技蓝紫渐变、医院蓝白、喜庆亮红金、售楼处金棕色、绿叶环境风格等);某些场景的参考调色板:
|
||||
* 科技/AI/SaaS/娱乐路演:墨黑#141414底座+荧光黄绿#C6F24E发布会色彩碰撞;或雾白#F2F4F7 基底 + 靛蓝 #2B3A8E + 石灰#A8E05F;或深紫黑色 #1A1228 基底 + 霓虹洋红色 #E91E8C + 电蓝色 #2D9CDB 的深色基底冲突。
|
||||
* 消费品/餐饮/食品加盟招募:奶油杏#F3D9A4底+烘焙棕#6B4226+砖红#A63A2E;或灰白色#F6EFE2底座+墨绿#1E3B33+赤土色#C15F3C;或土棕#4E3428底座+小麦金#C9A227+苔藓绿#5D6B4F。
|
||||
*奢华/时尚/美丽:墨黑#0D0D0D底座+象牙色#F5F0E6+酒红色#6D1F2C的编辑调色板;或象牙色#F5F0E6底色+墨黑#0D0D0D+酒红色#6D1F2C;或者冷白色#F8F8F6底座+炭黑#1A1A1A+钴蓝色#1F3A93的极简冲突。
|
||||
*医疗/保健品:暖白#F5F0E1底座+深松绿#1F4A3D+杏黄#E8B54A;或暖白色#F7F5F0基底+深靛蓝#1B2A52+薄荷色#7FC7B5;或炭灰色#333A42底座+珊瑚粉色#E8A09A+浅米色#EFE9E0。
|
||||
* 金融/法律/专业服务:灰白色#F7F3E8底座+墨绿#123B2F+黄铜#B08D3E;或暖灰色#C9C4BC底色+墨黑#1A1A2E+酒红色#7B2D43;或墨黑#1C1C1C底座+古铜色#9C6B30+羊皮纸白#F4EDE1。
|
||||
*工业/建筑/能源/物流(重度B2B行业):炭黑#232323底座+安全橙#E8590C+钢灰#868E96;或沙白色 #F3EDE0 基底 + 深石油青色 #0F4C5C + 暖铜色 #B5651D;或浅灰色#D9DDE3底座+午夜蓝#101D42+信号黄#F5B700。
|
||||
*教育/知识付费产品:暖白#FAF6EE底座+墨紫#3D2C4F+奶油黄#F2C14E;或米白色#F5F1EA底+深靛蓝#22315C+珊瑚橙#F08A5D;或纸白#F7F3E8底+松绿#2F5233+杏黄#E8B54A。
|
||||
- 将背景颜色调整为更有质感的颜色,例如:墨黑#141414、深墨绿#0E2A22、暖纸白#F7F3E8、雾灰色#E9E7E2、深酒红#3B1219。
|
||||
@@ -0,0 +1,243 @@
|
||||
# 教育与培训
|
||||
|
||||
范围:课件、岗位技能培训、操作指南、教材、学习手册、公众教育、入职培训、能力建设、知识普及。读者可以现场聆听,也可以独立阅读;他们的任务不仅仅是理解页面,而是形成他们可以复述的理解、他们可以执行的方法以及他们可以传递的动作。
|
||||
|
||||
> 核心定位:首先设计学习内容,其次设计页面;首先完成内容骨架,其次是视觉系统。参考示例仅提供值得借鉴的设计线索——它们不是默认模板,也不是必须复制的样式。课件应承载足够的内容来支持学习;不要为了“高级感”而将正文内容变成海报或空白相册。
|
||||
|
||||
## 1. 首先定义学习任务;不要先选择款式
|
||||
|
||||
生产前,记下以下信息;如果有遗漏,请用合理的假设进行填写,并在设计文件中进行标记。
|
||||
|
||||
- **学习者:**年龄、专业水平、先验知识、容易混淆的术语、可访问性需求。
|
||||
- **用途:**现场投影、打印讲义、自学阅读或混合使用;每个页面在视图中停留的大致时间。
|
||||
- **进入状态:**学习者现在不知道什么,现在不能做什么,或者在哪一步容易出错。
|
||||
- **出口能力:**在材料之后,学习者可以解释、区分、判断、操作、检查或复述的内容。目标必须是可观察的。
|
||||
- **材料边界:**哪些部分是外部事实,哪些部分是团队推论、虚构练习、说明性数据或待填充材料。
|
||||
- **真实任务:**学习者接下来将在什么工作、课堂或生活场景中应用此方法。
|
||||
|
||||
不要首先决定“使用蓝色、使用圆角、使用一些示例”,然后将内容塞进页面中。每个视觉选择都必须是可解释的:它帮助学习者看到哪种关系,记住哪个步骤,或完成哪个判断。
|
||||
|
||||
## 2. 一般禁止事项
|
||||
|
||||
以下是贯穿整个甲板的红线;它们在所有布局和视觉规则之前生效,除非用户明确要求,否则不得违反任何规则。
|
||||
|
||||
- **默认无卡片:**除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式。线段、空白和字体大小/粗细差异是更好的解决方案。
|
||||
- **没有均匀划分的构图:**除非没有其他布局可用,否则不要默认使用三分之一分割、四路分割或 2×2 矩阵 - 包括公式化模式,例如“标题 + 三个平行块 + 结论”。
|
||||
- **没有平庸、常见或人工智能典型的配色方案:**除非用户明确要求,否则严格禁止蓝白配对、蓝紫色渐变、青紫色霓虹灯、彩虹耀斑、玻璃形态卡片和发光边框。
|
||||
- **没有与整体样式冲突的元素:** 不得出现所选样式之外的任何样式,例如在锐利样式中使用圆角图标或圆角矩形。
|
||||
|
||||
## 3. 教学循环:每一章每一页都需要一个要点
|
||||
|
||||
默认的学习路径是:**入门→理解→演示→练习→反馈→迁移**。并非每个短材料的每个阶段都需要一个单独的页面,但是当缺少一个阶段时,您必须能够说任务本身不需要它 - 而不是页面空间不足。- **方向:**解释为什么这值得学习,学习者完成后可以做什么,以及它与前后章节的关系。使用真实的问题或场景,而不是宏大的口号。
|
||||
- **理解:**首先给出一个学习者可以复述的核心定义,然后是边界、组成、反例或关系。新术语不得仅出现在图形标题中。
|
||||
- **演示:**展示过程和中间判断,而不仅仅是最终答案;将关键的分叉、每个选择的基础以及常见的误解放在同一个阅读路径上。
|
||||
- **练习:**指定输入、操作和完成标准。练习场景可以是虚构的,但必须标记为“练习场景/说明性材料”。
|
||||
- **反馈:**解释为什么答案是对或错,错误在哪里,以及下次如何检查。答案页和问题页必须一目了然。
|
||||
- **转移:** 通过清单、模板、工作辅助卡或下一步行动连接到实际用途;不要用口号代替转移。
|
||||
|
||||
每一页仅包含一个主要学习动作:
|
||||
|
||||
- 概念页面让学习者清楚地说明“它是什么以及它的边界在哪里”。
|
||||
- 方法页面让学习者知道“何时使用以及如何选择”。
|
||||
- 流程页面让学习者知道“首先做什么,下一步做什么,以及如何检查”。
|
||||
- 演示/案例页面让学习者看到判断过程。
|
||||
- 练习页面让学习者采取行动或做出选择。
|
||||
- 反馈/审查页面正确并提炼原则。
|
||||
|
||||
标题必须预示该页面的要点。喜欢问句、结论句或“动作+宾语”;避免仅使用“背景”、“概述”或“相关内容”等部分标签。将所有关键定义、步骤和答案标准放入材料中 - 不要依赖演示者现场填写。
|
||||
|
||||
## 4. 课件默认密度:完整内容;空白有工作
|
||||
|
||||
课件不是海报,也不是缩小并贴在页面上的完整脚本。默认密度是“中,倾斜全”:学习者一眼就能发现主要对象,并且还可以在同一页面上找到理解或行动所需的支持。
|
||||
|
||||
- 正文页通常至少有三层:学习问题/结论标题→一个主要展示→一层解释、任务、检查或来源。
|
||||
- 作为起点,正文页面主要内容区域的大约 60% 或更多应由有意义的文本、图形、表格、流程或练习占据;这是密度护栏,而不是硬比。投影页可以减少文字,自学页可以增加解释,但都不能用空虚来掩盖内容的不足。
|
||||
- 空白用于分组、建立阅读顺序和突出显示关键点——它不是页面的主要产品。除了封面、章节开场白、关键宣言或结束页外,不要产生“一句话+一大空白”的连续页面。
|
||||
- 页面可能有安静区域,但只有明确的原因:暂停、过渡、记忆锚点或情感结束。原因应该写在页面大纲中,而不是事后解释。
|
||||
- 高密度页面减少装饰并添加分组和标签;低密度页面添加可重述的定义、示例、检查问题或后续步骤,而不是随机图形。
|
||||
- 一套课件可能有多种页面类型,但网格、标题锚、类型层次结构、导航位置和颜色语义保持稳定。统一的系统并不意味着将相同的模板复制到每个页面上。
|
||||
|
||||
让密度随着学习动作的变化而变化:|页面类型 |它携带什么|默认密度|什么必须是可见的 |
|
||||
| --- | --- | --- | --- |
|
||||
|路线/开放 |学习问题、目标、章节关系 |低到中 |我们从哪里来,又要到哪里去 |
|
||||
|核心理念|定义、边界、主要关系|中等|一种定义和一种直观的锚 |
|
||||
|示范/案例 |材料、过程、判断、结论 |中到高|证据和解释之间的区别|
|
||||
|练习/工作表|输入、操作、完成标准 |中到高|学习者现在必须做什么|
|
||||
|反馈/评论 |答案、原因、纠错、原理|中等|为何做出这样的判断 |
|
||||
|转会/总结|清单、模板、资源、后续步骤 |中等|离开材料后如何使用这个|
|
||||
|
||||
## 5.分工:文字、图形、示例、练习互不冒充
|
||||
|
||||
- 文字解释意义、界限、条件和判断依据。
|
||||
- 图形揭示了真实的关系:序列的流、层次结构的树或嵌套、比较的并行区域、因果关系的单向链以及仅存在真正循环的循环。
|
||||
- 例子抽象性较低,但事实、结果和解释必须分层;首先标记案例的教学角色(演示、比较、诊断或转移)。
|
||||
- 练习测试掌握情况;不要用不相关的游戏填充页面。
|
||||
|
||||
一张结构图表达一种主要关系。每个连接器都需要一个方向或一个含义;删除装饰性箭头、无意义的环以及仅用于填充页面的节点。关键模型第一次出现时会得到完整解释,然后保持相同的名称、形状、颜色和阅读方向。
|
||||
|
||||
外部事实、数据、引述和方法来源与其相应的证据保持密切联系,至少说明来源实体和必要的测量基础。说明性数据、团队推论和虚构材料必须明确标记。如果没有可靠的数据,请使用示意性结构或定性比较——永远不会生成看起来逼真的精确值。
|
||||
|
||||
仅当“观看比描述更有效”时才使用图像。图像可以作为观察证据或建立情境;纯粹的装饰性图像不得排挤主要学习对象。屏幕截图、照片、插图和图表的内容必须针对每个新主题进行新鲜选择——不要仅仅因为参考示例使用了某个对象就复制它。
|
||||
|
||||
## 6. 视觉决策的顺序:样本是参考库,而不是答案
|
||||
|
||||
按以下顺序做出视觉决策:
|
||||
|
||||
1. 完成学习目标、章节路径和逐页大纲。
|
||||
2. 选择每个页面的主要学习对象和密度层 - 不要先选择颜色或图案。
|
||||
3. 根据主题、受众、场景和证据类型,编写一页视觉简介:气质、网格、类型层次结构、颜色角色、图形语法、图像策略、组件边界、页眉/页脚和密度。
|
||||
4. 当需要参考样本时,仅提取“可解释的设计决策”,然后将其转化为当前主题。
|
||||
5、形成一个主系统加多个页式变体;不要将多个样本的图案、字体、卡片和颜色拼接在一起。
|
||||
|
||||
### 参考样本的正确使用方法
|
||||
|
||||
当您收到样本、模板或屏幕截图时,首先查看页面的实际视觉效果(不要只是提取副本),然后仅编写“参考提取卡”记录:- **可借用功能:** 例如,稳定网格、角色颜色代码、步骤导航、证据分区。
|
||||
- **可借用的语气:** 例如,克制、友好、严谨、现场活动的感觉或公共交流的感觉。
|
||||
- **可借用的图形语法:** 例如,并行模块、时间路径、嵌套层次结构或相框。
|
||||
- **不能继承的对象:**样本的品牌、照片、人物、特定副本、专有颜色值和装饰图案。
|
||||
- **适用的页面类型:** 仅注意它是否适合概念、案例、练习或步骤 - 不要将其扩展为整套模板。
|
||||
|
||||
一种材料最多借用单个参考样本中两个或三个相互兼容的特征;借用后,重新命名颜色和组件的语义。没有示例,仍然可以根据学习任务自行构建系统。样本1没有默认优先级;只是编辑式课件的一种参考方向。
|
||||
|
||||
## 7. 参考方向(仅灵感;可能会生成新方向)
|
||||
|
||||
这些指导可以帮助您快速了解设计选择;它们不是固定的调色板、字体表或页面模板。只取适合任务的部分。
|
||||
|
||||
###方向A:编辑研究手册(可参考样本1)
|
||||
|
||||
- **可借用:**清晰的标题-展品-解释层次结构;稳定的阅读网格;很少且明确的强调色;位于自己区域的案例、方法和来源;图像与文本分离。
|
||||
- **适合:**概念教学、方法论、案例阅读、混合课程以及需要自学的材料。
|
||||
- **无需复制:**蓝白调色板、几何裁剪图像、胶囊标签、固定发际线、大章节空白或任何特定照片主题。
|
||||
- **密度说明:**正文页以中等密度为主;案例和练习可以更充实;只有打开和关闭页面的密度显着下降。
|
||||
|
||||
### 方向 B:角色/系统信息图
|
||||
|
||||
- **可借用:** 稳定的颜色代码区分角色或模块;嵌套、扇区、矩阵或表达真实关系的互锁块;操作文本与其所属的模块保持紧密联系。
|
||||
- **适合:**多角色协作、公共教育、系统构成、职责分工、行动地图。
|
||||
- **无需复制:**彩色拼贴、整页色块、平面轮廓、直角模块或任何特定的颜色组合。
|
||||
- **密度说明:**模块越小,其文字越短;关系图页面保留必要的间隙;角色动作页面可能更密集,但意义绝不能仅依赖于颜色。
|
||||
|
||||
### 方向 C:步骤/工作记录
|
||||
|
||||
- **可借用:**持续可见的进度提示;编号步骤;用于存放照片、屏幕截图或工作表的透明容器;分层的行动、风险和检查项目。
|
||||
- **适合:**操作指南、合规、安全、岗位技能、现场培训。
|
||||
- **无需复制:**文件夹、纸张纹理、等宽标签、固定底部堆栈或任何拟物化装饰。
|
||||
- **密度说明:**每个步骤页面至少回答“做什么、为什么、如何检查”;路线和评论页面不会被清空进行装饰。
|
||||
|
||||
### 方向 D:证据/数据编辑(根据需要构建您自己的)
|
||||
|
||||
- **可借用:** 将图表、表格或屏幕截图作为主要展品;标题首先给出学习问题或结论;旁文解释了测量基础、观察点和下一步。
|
||||
- **适合:**专业科普内容、结果解读、前后对比、研究训练、需要证据支持的课程。
|
||||
- **无需复制:**仪表板黑色背景、彩虹图表、巨型数字、密集注释或特定行业的品牌风格。
|
||||
- **密度说明:**数据页可能已满,但每个图表仅服务一个问题;没有数据,不要强迫图表“看起来像报告”。如果主题不适合这些方向,请建立一个新的参考方向并写下“它可以帮助学习者完成什么”,而不是添加更多装饰性规则。
|
||||
|
||||
## 8. 页面骨架:首先选择学习操作,然后选择布局
|
||||
|
||||
每个页面都被编写为“标题+主要展示+支持层+操作/检查+源”的最小闭环。以下页面类型是可组合的 - 并非所有页面类型都必须使用。
|
||||
|
||||
- **学习路线:**学习题、章节顺序、退出能力;使用短句子和路径,而不是长目录。
|
||||
- **概念页:** 一个定义 + 边界/组成 + 一个直观的示例或结构图。
|
||||
- **方法图:**整体框架+当前步骤/当前模块+接下来展开的提示。
|
||||
- **演示页:**输入材料+中间判断+选择依据+结果;将容易出错的分叉放在同一路径上。
|
||||
- **案例证据页:**案例角色标签+事实材料+解释+可转移判决+来源。
|
||||
- **比较/易错页面:**并排放置在同一个骨架上的两种方法或状态+判断标准+常见错误。
|
||||
- **练习页面:**任务说明+输入/场景+工作区域+完成标准;不要在同一页面上隐藏答案。
|
||||
- **反馈页面:**参考方法+原因+错误位置+下次如何检查;明确这是答案或反馈。
|
||||
- **转移页面:**清单、模板、工作辅助卡、资源和下一步行动;避免仅仅写“应用你所学到的”。
|
||||
|
||||
演示版本可以将扩展解释移至演讲者笔记中,但页面仍必须保留学习问题、主要展示、任务/判断标准和必要的来源。自学版本将理解所需的定义和条件写在页面本身上。
|
||||
|
||||
## 9. 视觉系统的最小约束
|
||||
|
||||
### 网格和层次结构
|
||||
|
||||
- 首先修复主要内容区域、标题锚点、内容左轴以及页码/源位置;然后决定页面变体。
|
||||
- 每个页面只有一个第一视觉条目:首先看到学习问题或原理,其次是主要展品,第三是解释/任务/来源。
|
||||
- 标题、正文、图注释和来源使用相同类型的族或明确的两个族关系;中国的后备措施必须真正发挥作用。不要为了模仿样本而强行输入不支持中文的字体。
|
||||
- 标题和正文通过大小、粗细和位置建立层次结构。投影材料优先考虑正文的可读性;自学材料可能会添加解释,但正文绝不会压缩到脚注大小。
|
||||
- 普通正文文本与背景的对比度至少达到4.5:1;当对比度不足时,直接更改文本颜色或背景 - 不要用阴影和描边进行修补。
|
||||
|
||||
### 颜色
|
||||
|
||||
- 在没有品牌指导的情况下,首先选择一种中性背景、一种结构颜色和一种必要的语义强调:少量而稳定的颜色比大量而活泼的颜色更容易学习。
|
||||
- 每种颜色都有固定的含义(章节、角色、状态、焦点或链接),不得随意装饰;始终还使用文本、形状、位置或图标以及颜色进行编码。
|
||||
- 页面通常由中性背景+一种主要结构颜色控制;仅当存在真正的角色/类别映射时才添加第二个颜色系列。
|
||||
- 深色背景上的正文使用高对比度浅色;浅色背景上的正文使用近乎黑色。小字体从不依赖于高饱和度的颜色。**无样本时的起点(非固定风格):** 采用近白色或浅灰色的背景、近黑色的正文、一种结构强调色和一种低频语义色;使用中性无衬线字体构建标题和正文层次结构;将固定标题左轴与“主要展览+说明/任务”布局配对;保持正文页面中等倾斜,只有封面、章节开篇和结束页面的密度明显下降。然后根据主题、受众和材料证据进行调整——不要将此起始集视为新模板。
|
||||
|
||||
### 卡、组件和图形
|
||||
|
||||
- 卡片仅用于分组、承载状态或形成可操作区域;连续堆叠卡片不是默认布局。
|
||||
- 圆角、直角、笔画、阴影和胶囊都是组件语法——一旦决定,始终保持一致;不要从每个不同的样品中取出一个。
|
||||
- 阴影、纹理、渐变和装饰图标仅在具有层次或情景功能时使用。任何删除不影响理解的内容都应该删除。
|
||||
- 默认 Office 图表、SmartArt、彩虹调色板、厚黑色表格框架和未调整的项目符号列表必须重做。
|
||||
|
||||
### 图像和图表
|
||||
|
||||
- 每张图片都必须说明“看什么以及为什么需要看”;证据图像、操作屏幕截图和情境图像均标有其用途。
|
||||
- 图表带有“查看关系”,侧面文字带有“如何解释以及下一步做什么”;不要逐字重复图表的标签。
|
||||
- 图表保留必要的单位、时间范围、图例、关键标签、测量基础和来源;删除不必要的网格线、框架和装饰。
|
||||
- 表格使用清晰的标题、水平分隔符、正确的对齐方式和必要的焦点行;不要使用整行高饱和度颜色或单独使用颜色来表达状态。
|
||||
|
||||
## 10. 模型执行协议
|
||||
|
||||
### 1.内容第一
|
||||
|
||||
首先写出学习者、进入状态、退出能力、用途、证据边界、练习任务;然后写章节路径。每页至少记录:
|
||||
|
||||
> 章节/页面类型/学习行动/标题/主要展示/解释或任务/反馈或检查/来源/密度层
|
||||
|
||||
检查各章节是否有理解、演示、应用、反馈、迁移;如果不适用,请先添加内容或注明不适用的原因。
|
||||
|
||||
### 2.参考样本提取
|
||||
|
||||
如果有示例、模板或屏幕截图,请在编写视觉简介之前完成参考提取卡。卡片不得直接复制对象层(品牌、照片、副本、专有颜色值、专有图案);仅保留可转移的结构、色调和图形关系。样本 1、2 和 3 都只是候选参考,不得成为隐式默认值。
|
||||
|
||||
### 3.视觉简介
|
||||
|
||||
视觉简报至少说明:
|
||||
|
||||
- 受众及使用环境;
|
||||
- 主题的气质和密度目标;
|
||||
- 一个主网格和两到六种页面类型;
|
||||
- 标题/正文/来源的层次结构;
|
||||
- 颜色的语义划分和对比方案;
|
||||
- 分别用于流程、层次结构、比较和证据的图形语法;
|
||||
- 图像、屏幕截图和插图的使用范围;
|
||||
- 页眉、页脚、页码、来源和导航的固定位置;
|
||||
- 哪些元素仅出现在封面、章节页或结束页上。
|
||||
|
||||
### 4. 逐页生成
|
||||
|
||||
- 写下预示学习要点的标题。
|
||||
- 选择单一的主要学习对象。
|
||||
- 完成定义、边界、标签、任务、检查标准和来源。
|
||||
- 根据视觉简报应用网格、层次结构和组件 - 不要逐页复制示例。
|
||||
- 删除无教学功能的图形、图像、引文和重复文本。
|
||||
- 先检查内容和溢出,然后进行视觉微调;不要通过缩小字体大小来掩盖过多的内容。
|
||||
|
||||
### 5. 交付前验证使用现有的 PPTD / PPTX 验证和屏幕截图工作流程来检查溢出、重叠、截断、乱码文本、低对比度、缺失页码和缺失来源。至少单独审查关键页面;不要仅从缩略图来声明完成。
|
||||
|
||||
## 11. 交货验收和反向检查
|
||||
|
||||
### 内容与教学
|
||||
|
||||
- 只阅读标题,你能说出完整的学习路径——而不是一串章节名称吗?
|
||||
- 标题被遮住后,主要展览还能说明它所教的内容和该做什么吗?
|
||||
- 每一页是否只包含一个主要学习动作,并且解释是否真正导致行动?
|
||||
- 练习是否指定输入、操作和完成标准?反馈是否说明原因及纠错方法?
|
||||
- 事实、说明性材料、推论和虚构材料是否明确区分?外部证据有来源和衡量依据吗?
|
||||
- 相同的概念、角色、步骤和状态是否始终保持相同的名称、颜色和形状?
|
||||
|
||||
### 密度和视觉效果
|
||||
|
||||
- 正文页是否有足够的内容来支持学习,而不是大标题加空白?连续的稀疏页面是否有明确的教学原因?
|
||||
- 每一页是否有一个视觉入口和一个安静区域;标题、图表、卡片和大图是否同时争夺第一关注?
|
||||
- 去除颜色后,步骤、角色、状态和类别仍然清晰可辨吗?
|
||||
- 删除参考样本的照片、颜色值和图案后,课件仍然是一个自洽的系统吗?
|
||||
- 是否只有一种主要的视觉语法,而不同的学习动作可能使用不同的页面类型?
|
||||
- 图像是否清晰、相关、未拉伸、没有文字压在复杂区域上?
|
||||
- 图表、表格和结构图是否表达了真实的关系,而不是填满页面?
|
||||
|
||||
### 最终剪辑
|
||||
|
||||
逐项提问:“如果我删除这个,学习者会失去什么?”如果答案只是“页面看起来更空”,请将其删除。真正需要填充的不是装饰,而是定义、例子、判断标准、练习、反馈或转移动作。
|
||||
@@ -0,0 +1,35 @@
|
||||
# 管理报告
|
||||
|
||||
## 内容清晰直接;没有空谈
|
||||
|
||||
- 翻阅整个套牌只阅读页面标题的经理应该了解该期间的情况、原因以及所问的内容 - 标题本身说明状态或结论,例如“第二季度收入达到目标的 92%;缺口来自北部地区续订”,而不是像“业务绩效报告”这样的部分标签。
|
||||
- 打开第一页,了解这一时期的总体情况:除了标题之外,封面还呈现了整个套牌中最关键的一条状态线——核心指标的实现率、红/绿/黄交通灯概述或最大差距。
|
||||
- 信息真实,绝不捏造:用户提供的数字和事实既不夸大,也不选择性剪裁;材料中存在的任何基线都与结果一起移动,材料中没有的任何内容都不是代表用户发明的;灵活使用数字、图表和表格来呈现关键信息。
|
||||
- 符合用户身份的专业用语:没有外行语言,也没有一刀切的通用商业用语。
|
||||
|
||||
## 用结构图可视化信息
|
||||
|
||||
**进度、数据、责任、风险、依赖是管理报告的核心关系——从内容中提取出各种关系,并用结构图和框架来表达。**
|
||||
|
||||
## 关键要求
|
||||
1.打造顶级视觉体验:精心对待排版、字体、色彩的每一个细节,打造出艺术品般的效果。
|
||||
2. 除非用户明确要求,**严格禁止使用圆角矩形或矩形卡片**来构建层次结构或对齐方式:线段、空白和字体/大小差异是更好的解决方案。
|
||||
3.除非没有其他布局,否则禁止均分构图;不要默认使用三分之一分割、四路分割或 2×2 矩阵 - 包括三部分公式,例如“三列 + 标题 + 结论”。
|
||||
|
||||
## 视觉参考
|
||||
|
||||
1. 字体分为家族:显示类型和正文类型有明确的分工(同一无衬线家族的不同粗细,或正文文本与另一个家族配对的无衬线标题);层次结构基于字体大小和粗细比率;功能性文本(例如编号、标签和脚注)统一设置为较小的大写字母/并增加了字母间距;字体大小随内容量而变化,而层次结构比例保持不变。
|
||||
2、字体和配色必须搭配、和谐;设计时互相参考。
|
||||
3、信息位置纪律:结论/标题→固定标题位置;证据(图表、编号卡、照片)→右栏或下半部分的固定区域;测量基础、来源、脚注 → 固定角落的小字体。
|
||||
4. 取消默认图表:删除坐标轴、网格、图例框和默认颜色;将所有系列颜色重新分配给同系列色调;条形平圆,无笔划,无阴影;数据标签只保留关键点或移动到文本栏;关键指标直接用大数字标注;图表和解释性文本被严格分区——没有叠印,没有交错。
|
||||
5、鼓励使用丰富的SmartArt,提高信息效率,传达专业精神。
|
||||
6. 统一的角半径和纹理:所有矩形组件(卡片、面板、照片、栏顶)共享一个角半径比例,整个牌组不会混合;平面、无阴影、无 3D、无渐变文本;大气层(例如颗粒或光耀斑)如果使用,会保持低强度,固定在内容下方。
|
||||
7. 主题贯穿整个平台:建立 1-2 个视觉主题(编号徽章、连接虚线、装饰形状等)并在不同页面类型中重复使用它们的变体;当页面缺乏视觉锚点时,首先重用主题,而不是引入新元素。
|
||||
|
||||
### 调色板参考**精神上期待的颜色,选择上意想不到的**:
|
||||
- 拒绝各场景最常见、最平庸的公式化调色板(Office默认蓝、科技蓝紫渐变、促销季红金、灰蓝模板色等);针对某些场景的建议调色板:
|
||||
* 运营/财务/董事会报告:灰白色 #F7F3E8 底座 + 墨绿 #123B2F + 黄铜 #B08D3E;或浅石色#E7E2D8底座+深海军蓝#16283C+铜橙#C0652B;或墨黑色#1A1A2E底座+黄铜#B08D3E+灰白色#F7F3E8。
|
||||
* 业务运营回顾(零售/制造/消费/供应链):暖白#F8F5EF基底+酒红#5E1F2D+米金#D8C3A5;或灰白色#F6EFE2底座+墨绿#1E3B33+赤土色#C15F3C;或轻钢#C3CCD4底座+深蓝灰色#1F3240+信号黄#F0A202。
|
||||
* 互联网/科技/成长月报:冷白#F4F7F6底座+石墨灰#2B2D42+松绿#4C7A5A;或雾白#EDF1F7底色+深靛蓝#1C2B5A+天蓝色#4E9FE6;或墨黑#101418底+青瓷绿#3FA68C+冷白#F4F7F6。
|
||||
* 人力资源/行政/政务报告:暖白#FAF6EE基底+墨紫#3D2C4F+奶油黄#F2C14E;或纸白#F7F3E8底+松绿#2F5233+杏黄#E8B54A;或灰白色#F6F4EF底座+深海军蓝#1B2A4A+银灰色#AEB4BC。
|
||||
- 将背景颜色调整为更稳定和克制的颜色,例如:暖白色#F7F3E8、浅石色#ECEAE4、雾灰色#E9E7E2;部分/强调页可以使用深墨蓝色#16283C 或墨黑色#1A1A2E。
|
||||
194
tmp/kimi-slides/reference/slides_categories/tech-engineering.md
Normal file
@@ -0,0 +1,194 @@
|
||||
# 技术与工程
|
||||
|
||||
范围:分享和展示技术方案、系统架构评审、AI/数据平台方案、安全设计评审、生产事件回顾、技术选型、测试和验证、API/SDK文档以及产品技术培训等。
|
||||
|
||||
读者可能是工程师同事,但也可能是产品合作伙伴或客户。目标是让读者了解系统如何工作,判断解决方案是否良好,并清楚地看到权衡、风险和后续步骤。
|
||||
|
||||
## 1. 核心人物
|
||||
|
||||
**中到高信息密度,强调技术解释以及流程和机制。** 页面围绕架构、流程、序列、数据、比较和真实证据构建;文字解释了原因,而视觉则揭示了其中的关系。
|
||||
|
||||
- **专业**:不空谈“高可用性”或“高性能”。写出指标、环境、边界、依赖性、权衡、故障条件和恢复路径。
|
||||
- **简洁**:一个图表可以解释的关系不能蜿蜒到一篇文章中;也不能仅仅为了保持布局简洁而忽略必要的假设、证据和限制。
|
||||
- **具体**:架构图必须显示调用方向、数据流、控制流以及信任或故障边界;代码、配置和日志仅在真正支持该论点时才会出现。
|
||||
- **证据第一**:每一页都提出一个判断。标题给出结论,正文给出证据,并解释证据对解决方案、风险或后续步骤的意义。
|
||||
- **克制**:令人惊叹的因素来自于使复杂的问题变得清晰——而不是来自发光、粒子、卡片墙和空洞的“科技氛围”。
|
||||
|
||||
## 2. 一般禁止事项
|
||||
|
||||
以下是贯穿整个甲板的红线;它们在所有布局和视觉规则之前生效,除非用户明确要求,否则不得违反任何规则。
|
||||
|
||||
- **默认无卡片**:除非用户明确请求,否则严格禁止使用圆角矩形或矩形卡片来构建层次结构或对齐方式。线段、空白和字体大小/粗细差异是更好的解决方案。
|
||||
- **没有均匀划分的构图**:除非没有其他布局可用,否则不要默认使用三分之一分割、四路分割或 2×2 矩阵 - 包括公式化模式,例如“标题 + 三个平行块 + 结论”。
|
||||
- **没有平庸、常见或人工智能典型的配色方案**:除非用户明确要求,否则严格禁止蓝白配对、蓝紫色渐变、青紫色霓虹灯、彩虹耀斑、玻璃形态卡片和发光边框。
|
||||
- **没有与整体风格冲突的元素**:不得出现所选样式之外的任何样式,例如在锐利样式中使用圆角图标或圆角矩形。
|
||||
|
||||
## 3. 如何呈现技术内容
|
||||
|
||||
### 3.1 首先解释一下系统是如何工作的
|
||||
|
||||
首次解释系统或模块时,首先介绍以下内容:
|
||||
|
||||
- 输入、输出和成功标准;
|
||||
- 系统的范围及其外部依赖性;
|
||||
- 正常路径、异常路径和后备路径;
|
||||
- 数据来自哪里、经过什么处理以及最终去往何处;
|
||||
- 哪些位置是性能、安全性、成本或可靠性的关键边界。
|
||||
|
||||
### 3.2 将设计原理和成本放在一起- 解释为什么选择了 A 而没有选择 B;比较维度必须来自真实目标。
|
||||
- 写出与收益相对应的成本,包括性能、成本、复杂性、团队能力、供应商锁定、可观察性和迁移风险。
|
||||
- 给出其工作的条件和失效的条件;不要将局部最优值作为通用最优值。
|
||||
- 区分当前状态、目标状态、候选选项、假设推理和验证结果。
|
||||
- 启动计划指定验证门、逐步推出方法、回滚条件和恢复路径。
|
||||
|
||||
### 3.3 证据必须是可验证的
|
||||
|
||||
- 指标包含来源、时间、版本、测试环境、负载、样本和测量基础。
|
||||
- 根据问题要求显示 P50 / P95 / P99、变异性、异常值或置信区间 - 而不仅仅是平均值。
|
||||
- 团队推论、说明性数据和尚未验证的假设必须明确标记。
|
||||
- 当证据缺失时,使用“待填写”、“假设”或占位符;绝不捏造基准、日志、案例或失败原因。
|
||||
- 在术语和缩写首次出现时对其进行解释,并在之后保持命名一致。
|
||||
|
||||
## 4. 按工程任务划分的叙事骨架
|
||||
|
||||
一个主要场景决定了整套牌的结构;其他场景仅提供必要的补充——切勿在顶部堆叠另一种视觉语言。
|
||||
|
||||
|工程任务|读者必须判断什么|推荐的叙述顺序|
|
||||
|---|---|---|
|
||||
|系统架构回顾|边界、依赖、瓶颈、演进路径是否健全 |目标和约束→当前状态→问题→替代方案→目标架构→迁移和验证|
|
||||
| AI/数据平台提案|数据、模型、服务链是否可信;如何权衡质量、延迟和成本|用户任务→数据和模型管道→核心机制→评估证据→风险护栏→启动循环|
|
||||
|安全设计审查|信任边界、攻击路径、控制、残留风险是否清晰 |资产和边界→威胁→攻击路径→控制→残余风险→监控和响应|
|
||||
|生产事故回顾|影响是什么,故障是如何发生的,以及修复是否可以防止再次发生 |影响总结→时间线→直接原因→系统性因素→修复→预防验证|
|
||||
|技术选型评审|哪个选项更符合目标,结论对哪些假设敏感 |目标和标准→候选人→同类比较→权衡→推荐→退出条件|
|
||||
|测试/验证策略|风险是否得到保障,测试层和发布门是否足够 |风险模型→分层验证→环境和数据→门控→覆盖差距→发布决策|
|
||||
|外部技术讲座 |核心机制为何有价值、证据是否可信、边界在哪里 |问题→机制→技术实现→证据→局限性→采用路径|
|
||||
|
||||
当没有更好的结构适合时,从“决策摘要→目标和约束→当前状态/问题→机制/架构→关键证据→替代方案和权衡→实施/验证→风险和后续步骤”开始,然后修剪和适应场景。
|
||||
|
||||
## 5.页面节奏和信息密度- 默认为中高密度,但每页仅保留一个主要判断和一个主要证据对象。
|
||||
- 替代文本解释页和视觉证据页;避免连续堆叠结构相同的项目符号列表。
|
||||
- 对于复杂的概念,先给出整体,然后沿着稳定的坐标逐层展开;不要在每个页面上重绘相同的架构。
|
||||
- 分层展示正常路径、异常路径、迁移路径;保留未更改的部分,仅突出显示发生变化的部分。
|
||||
- 重点页面优先考虑关键架构、关键比较、事件因果关系或最终决策——不要用大号口号制造高潮。
|
||||
- 仅当需要真正改变节奏时才会出现部分过渡;短材料不强制安装目录和章节封面。
|
||||
- 最后返回决策、验证结果或后续步骤 - 切勿用单独的“谢谢”代替结论。
|
||||
|
||||
### 常见页面类型
|
||||
|
||||
- **概念/背景页:** 必要的解释与一个主要人物配对,空白散布在主要对象周围。
|
||||
- **架构/流程页面:**图形主导;文本仅保留结论、图例和必要的旁注。
|
||||
- **比较/选择页面:**在相同比例、尺寸和坐标上进行比较的选项。
|
||||
- **指标/基准页面:**图表领先;测试条件、基线和结论与图表保持接近。
|
||||
- **事件/时间线页面:**时间顺序为主轴;影响、证据和处理都与其相应的事件密切相关。
|
||||
- **实现/迁移页面:**阶段、依赖关系、门和回滚点根据其真实关系进行布局。
|
||||
- **附录/来源页面:**可能更密集,但必须通过列、编号和稳定的行间距保持可扫描性。
|
||||
|
||||
## 6. 架构图和流程图
|
||||
|
||||
### 6.1 关系决定图形
|
||||
|
||||
|关系 |首选图形 |必须传达的信息|
|
||||
|---|---|---|
|
||||
|系统区域和边界|嵌套或并排的直角区域 |系统范围、外部依赖性、信任/故障边界 |
|
||||
|通话和数据流 |带有方向箭头的节点链或网络 |每次调用的双方,协议/数据,同步还是异步 |
|
||||
|多角色互动 |序列图|角色、消息方向、等待和异常分支 |
|
||||
|部署和故障域 |拓扑图|区域/集群/实例、冗余和隔离范围 |
|
||||
|状态转换 |状态机|状态、触发条件、转换和错误状态 |
|
||||
|选项比较 |相同尺度的并排拓扑或矩阵 |相同的评估维度、结构差异和成本|
|
||||
|事件因果关系 |时间轴+因果链/故障树|事件、证据、直接原因、影响因素和控制差距 |
|
||||
|验证覆盖范围 |分层矩阵或映射图|风险、测试层、通过标准和覆盖范围差距
|
||||
|
||||
### 6.2 图表规则
|
||||
|
||||
- 箭头必须有方向和含义;必要时标记协议、数据、频率、容量或触发条件。
|
||||
- 区分数据流、控制流和异常路径;允许使用颜色、线条样式和标签进行冗余编码。
|
||||
- 外部边界、内部模块和关键路径使用不同但稳定的语法。
|
||||
- 连接器终止于节点边缘,并且从不穿过文本;当交叉点过多时,请重新排列、分层或拆分页面。
|
||||
- 将关键路径加粗或使用强调色;其他路径退至中立;没有发光,也没有 3D 箭头。
|
||||
- 对于复杂的架构,先概述,再放大细节;保持命名、颜色和坐标线索一致。
|
||||
- 图例仅解释无法标记到位的编码;任何可以位于其节点或路径旁边的东西都被直接标记。
|
||||
|
||||
## 7. 数据图表、表格、代码和屏幕截图
|
||||
|
||||
### 数据图表- 趋势使用线条,比较使用条形图或并排点图,合成使用堆栈,延迟分布使用直方图/箱线图/分位数图,容量成本关系可能使用散点图或灵敏度矩阵。
|
||||
- 删除默认框架、3D 效果、渐变、粗网格线和无意义的图例。
|
||||
- 主系列使用结构色或关键路径色;基线和辅助系列使用灰度。
|
||||
- 直接标记关键值、拐点和异常,并标明“原因”和“含义”。
|
||||
- 测试环境、版本、负载、样本、单位和基线显示在图表旁边。
|
||||
|
||||
### 表格
|
||||
|
||||
- 标题、分组、状态、数字和注释形成清晰的层次结构;不保留默认主题。
|
||||
- 注释左对齐,数字按小数点或单位对齐,状态栏固定位置。
|
||||
- 使用薄分隔符和浅色组背景;没有厚的外框、彩虹标题或大的红色/绿色填充。
|
||||
- 在相同维度上比较选项;明确标记缺失和不可比较的项目。
|
||||
|
||||
### 代码、配置和屏幕截图
|
||||
|
||||
- 只保留支持论点的最少摘录,并首先告诉读者要看什么。
|
||||
- 代码、接口、路径和字段使用等宽字体;语法高亮仅强调关键行或更改。
|
||||
- 对于配置比较,更喜欢最小差异或关键字段表;日志带有时间戳,可识别源组件,并对敏感数据进行编辑或匿名处理。
|
||||
- 紧贴证据边界裁剪屏幕截图,使其保持直角矩形;不要统一添加设备边框、圆角或阴影。
|
||||
- 并排屏幕截图保持相同的高度和宽度、相同的缩放和相同的基线。
|
||||
|
||||
## 8.视觉系统
|
||||
|
||||
### 8.1 布局
|
||||
|
||||
- 标题用一句话表达结论,其视觉分量不得超过主要证据。
|
||||
- 使用稳定的安全边距和标题轴;普通页面更喜欢单列、左右分割、或上文字下图。
|
||||
- 架构节点落在规则网格上;同类页面保持相同的骨架。
|
||||
- 正文内容默认按空白、对齐和精简规则组织;仅当内容需要分隔时才使用卡片。
|
||||
- 面板仅用于系统范围、代码、配置或关键结论 - 大部分为直角或最小圆形,具有细笔画和浅色填充,并且没有通用阴影。
|
||||
- 阅读类材料可保留文件名称、章节、页码、版本、保密级别;现场呈现的材料仅保留必要的身份信息。
|
||||
|
||||
### 8.2 颜色和字体
|
||||
|
||||
- 评论、打印和长篇阅读通常使用浅色背景;暗室发布可能会使用克制的深色背景。
|
||||
- 当品牌已有视觉资产时,优先继承;不受品牌限制,按照“背景色、结构色、关键路径颜色、状态色、中性色”构建调色板。
|
||||
- 每种颜色在整个牌组中都具有稳定的含义;关键状态还可以通过文本、线条样式或形状来区分。
|
||||
- 标题和正文更喜欢清晰易读的无衬线字体;当需要文档感觉时,标题可以使用克制的衬线。
|
||||
- 代码使用等宽字体;一副牌通常使用不超过两个体型家族。
|
||||
- 当内容增长时,首先压缩文本、拆分页面或调整文本与图形的比例 - 然后再稍微缩小字体大小。
|
||||
|
||||
### 8.3 线条、图标和效果- 普通边框和辅助线细而均匀;只有关键路径才会变得更加大胆。
|
||||
- 在一张图中,箭头、拐角、端点、破折号节奏和拐角半径保持一致。
|
||||
- 技术结构更喜欢直角或最小的圆角;圆圈和曲线仅在语义需要时才会出现。
|
||||
- 架构、流程、数据、屏幕截图和真实产品视觉效果优先于装饰插图。
|
||||
- 图标必须来自一笔画系统并具有识别性;不要混合表情符号、3D、真实和系统默认图标。
|
||||
- 身体表面保持干净:没有噪音、颗粒、网格光效果、玻璃形态或无意义的渐变。
|
||||
|
||||
## 9. 示例参考
|
||||
|
||||
样品仅用于提取机构;禁止批量复制。首先根据当前读者、证据、品牌和用途整理风格;默认情况下,不继承精确的颜色值、字体、封面、章节页面和页脚。
|
||||
|
||||
### 示例 A:暖橙色和冷蓝色 — 白基工程文档风格
|
||||
|
||||
- **特征:**白色背景黑色正文;暖色承载标题和关键路径,冷色承载节点和结构;固定页眉和页码;适合阅读和打印。
|
||||
- **可借用:**暖/冷语义划分、稳定的文档轴、架构坐标的复用、通过边界/节点/路径进行层次区分。
|
||||
- **值得参考:**架构评论、技术白皮书、平台提案以及需要逐步展开相同架构的材料。
|
||||
- **不自动继承:**橙色和蓝色颜色值、Inter、渐变弧形覆盖、橙色表格标题和固定标题位置。
|
||||
|
||||
### 示例 B:四色平面 — 工程演练风格
|
||||
|
||||
- **特点:**白色背景,深灰色文字,少量高饱和度语义色,平面结构图,纯色章节页;适合现场演练和跨角色沟通。
|
||||
- **可借用:**语义颜色编码、纯色部分暂停、文本/图形分区、直接标签和等宽比较列。
|
||||
- **值得参考:**产品技术培训、角色协作以及平衡概念和流程的讲座。
|
||||
- **不自动继承:**固定四种颜色、每章纯色背景、双端页脚和特定品牌字体。
|
||||
|
||||
### 示例 C:白色底色和深墨蓝色 — 双色短线工程演练
|
||||
|
||||
- **特点:**深墨蓝色标题、短彩色线条、白色底座形成稳定的攻略骨架;解释页与证据页交替出现;视觉效果直接漂浮在白色的地面上。
|
||||
- **可借用:**固定标题轴、弱导航、解释和证据的交替以及减少容器噪音。
|
||||
- **很有参考价值:**现场技术讲座,逐步构建概念,以及以屏幕截图和机制图为中心的材料。
|
||||
- **不自动继承:**橙色/绿色部分颜色、对角线部分色块、深紫色结尾、固定短线尺寸和字体组合。
|
||||
|
||||
计划中不要写“选择样品A/B/C”。如果文本隐藏后结果仍然明显看起来像是某个样本的直接复制品,请继续调整 - 但不要为了新颖而破坏关系表达和一致性。
|
||||
|
||||
## 10. 交付前检查表- 输入、输出、依赖关系、边界、正常路径、异常路径和后备路径是否清晰?
|
||||
- 关键连接器是否有方向和含义,当前状态、目标状态、假设和验证结果是否有区别?
|
||||
- 指标是否包含环境、版本、样本、负载、单位、基线和时间窗口?
|
||||
- 每页是否只有一个主要判断,证据是否真正支持标题?
|
||||
- 视觉重量是否落在证据上,颜色、形状、线条样式和命名是否一致?
|
||||
- 是否有无源数据、默认 Office 图表、卡片墙、装饰性“科技氛围”或示例复制品?
|
||||
- 技术证据是否为了视觉统一而被改变、削弱或伪造?
|
||||
599
tmp/page3-lint/P4tys0DOFlg3ZodM4P0cRdOUnyh/lint.json
Normal file
@@ -0,0 +1,599 @@
|
||||
{
|
||||
"schema_version": "2.0",
|
||||
"tool": "xml_text_overlap_lint",
|
||||
"file": "/Users/bytedance/go/src/github.com/larksuite/cli/tmp/page3-lint/P4tys0DOFlg3ZodM4P0cRdOUnyh/readback.xml",
|
||||
"slide_size": {
|
||||
"width": 960,
|
||||
"height": 540
|
||||
},
|
||||
"summary": {
|
||||
"slide_count": 22,
|
||||
"error_count": 0,
|
||||
"warning_count": 0,
|
||||
"info_count": 4,
|
||||
"status": "passed",
|
||||
"release_ready": true,
|
||||
"screenshot_review_required": false
|
||||
},
|
||||
"document": {
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": []
|
||||
},
|
||||
"slides": [
|
||||
{
|
||||
"slide_number": 1,
|
||||
"status": "passed",
|
||||
"element_count": 18,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 2,
|
||||
"status": "passed",
|
||||
"element_count": 18,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 3,
|
||||
"status": "passed",
|
||||
"element_count": 9,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [
|
||||
{
|
||||
"level": "info",
|
||||
"code": "text_may_overflow_shape",
|
||||
"elements": [
|
||||
"baC"
|
||||
],
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0,
|
||||
"message": "text shape baC may overflow its own content box (estimated 700px, available 400px); consider setting content wrap=\"true\" autoFit=\"normal-auto-fit\" (likely background decoration: large font, low alpha, underneath other text)",
|
||||
"hint": "Increase shape.height, reduce the text, or set content wrap=\"true\" autoFit=\"normal-auto-fit\". This is an estimate based on font size, line spacing, and wrapped line count.",
|
||||
"schema_version": "2.0",
|
||||
"element_ids": [
|
||||
"baC"
|
||||
],
|
||||
"target": {
|
||||
"slide_number": 3
|
||||
},
|
||||
"rule": {
|
||||
"id": "text_may_overflow_shape",
|
||||
"name": "estimated_text_fits_declared_shape",
|
||||
"comparison": "estimated_height <= available_height"
|
||||
},
|
||||
"measurement": {
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0
|
||||
},
|
||||
"related_objects": [
|
||||
{
|
||||
"element_id": "baC",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"bbox": {
|
||||
"x": 400,
|
||||
"y": 50,
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"issues": [
|
||||
{
|
||||
"level": "info",
|
||||
"code": "text_may_overflow_shape",
|
||||
"elements": [
|
||||
"baC"
|
||||
],
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0,
|
||||
"message": "text shape baC may overflow its own content box (estimated 700px, available 400px); consider setting content wrap=\"true\" autoFit=\"normal-auto-fit\" (likely background decoration: large font, low alpha, underneath other text)",
|
||||
"hint": "Increase shape.height, reduce the text, or set content wrap=\"true\" autoFit=\"normal-auto-fit\". This is an estimate based on font size, line spacing, and wrapped line count.",
|
||||
"schema_version": "2.0",
|
||||
"element_ids": [
|
||||
"baC"
|
||||
],
|
||||
"target": {
|
||||
"slide_number": 3
|
||||
},
|
||||
"rule": {
|
||||
"id": "text_may_overflow_shape",
|
||||
"name": "estimated_text_fits_declared_shape",
|
||||
"comparison": "estimated_height <= available_height"
|
||||
},
|
||||
"measurement": {
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0
|
||||
},
|
||||
"related_objects": [
|
||||
{
|
||||
"element_id": "baC",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"bbox": {
|
||||
"x": 400,
|
||||
"y": 50,
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slide_number": 4,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 5,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 6,
|
||||
"status": "passed",
|
||||
"element_count": 12,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 7,
|
||||
"status": "passed",
|
||||
"element_count": 9,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [
|
||||
{
|
||||
"level": "info",
|
||||
"code": "text_may_overflow_shape",
|
||||
"elements": [
|
||||
"bni"
|
||||
],
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0,
|
||||
"message": "text shape bni may overflow its own content box (estimated 700px, available 400px); consider setting content wrap=\"true\" autoFit=\"normal-auto-fit\" (likely background decoration: large font, low alpha, underneath other text)",
|
||||
"hint": "Increase shape.height, reduce the text, or set content wrap=\"true\" autoFit=\"normal-auto-fit\". This is an estimate based on font size, line spacing, and wrapped line count.",
|
||||
"schema_version": "2.0",
|
||||
"element_ids": [
|
||||
"bni"
|
||||
],
|
||||
"target": {
|
||||
"slide_number": 7
|
||||
},
|
||||
"rule": {
|
||||
"id": "text_may_overflow_shape",
|
||||
"name": "estimated_text_fits_declared_shape",
|
||||
"comparison": "estimated_height <= available_height"
|
||||
},
|
||||
"measurement": {
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0
|
||||
},
|
||||
"related_objects": [
|
||||
{
|
||||
"element_id": "bni",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"bbox": {
|
||||
"x": 400,
|
||||
"y": 50,
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"issues": [
|
||||
{
|
||||
"level": "info",
|
||||
"code": "text_may_overflow_shape",
|
||||
"elements": [
|
||||
"bni"
|
||||
],
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0,
|
||||
"message": "text shape bni may overflow its own content box (estimated 700px, available 400px); consider setting content wrap=\"true\" autoFit=\"normal-auto-fit\" (likely background decoration: large font, low alpha, underneath other text)",
|
||||
"hint": "Increase shape.height, reduce the text, or set content wrap=\"true\" autoFit=\"normal-auto-fit\". This is an estimate based on font size, line spacing, and wrapped line count.",
|
||||
"schema_version": "2.0",
|
||||
"element_ids": [
|
||||
"bni"
|
||||
],
|
||||
"target": {
|
||||
"slide_number": 7
|
||||
},
|
||||
"rule": {
|
||||
"id": "text_may_overflow_shape",
|
||||
"name": "estimated_text_fits_declared_shape",
|
||||
"comparison": "estimated_height <= available_height"
|
||||
},
|
||||
"measurement": {
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0
|
||||
},
|
||||
"related_objects": [
|
||||
{
|
||||
"element_id": "bni",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"bbox": {
|
||||
"x": 400,
|
||||
"y": 50,
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slide_number": 8,
|
||||
"status": "passed",
|
||||
"element_count": 15,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 9,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 10,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 11,
|
||||
"status": "passed",
|
||||
"element_count": 9,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [
|
||||
{
|
||||
"level": "info",
|
||||
"code": "text_may_overflow_shape",
|
||||
"elements": [
|
||||
"bqs"
|
||||
],
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0,
|
||||
"message": "text shape bqs may overflow its own content box (estimated 700px, available 400px); consider setting content wrap=\"true\" autoFit=\"normal-auto-fit\" (likely background decoration: large font, low alpha, underneath other text)",
|
||||
"hint": "Increase shape.height, reduce the text, or set content wrap=\"true\" autoFit=\"normal-auto-fit\". This is an estimate based on font size, line spacing, and wrapped line count.",
|
||||
"schema_version": "2.0",
|
||||
"element_ids": [
|
||||
"bqs"
|
||||
],
|
||||
"target": {
|
||||
"slide_number": 11
|
||||
},
|
||||
"rule": {
|
||||
"id": "text_may_overflow_shape",
|
||||
"name": "estimated_text_fits_declared_shape",
|
||||
"comparison": "estimated_height <= available_height"
|
||||
},
|
||||
"measurement": {
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0
|
||||
},
|
||||
"related_objects": [
|
||||
{
|
||||
"element_id": "bqs",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"bbox": {
|
||||
"x": 400,
|
||||
"y": 50,
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"issues": [
|
||||
{
|
||||
"level": "info",
|
||||
"code": "text_may_overflow_shape",
|
||||
"elements": [
|
||||
"bqs"
|
||||
],
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0,
|
||||
"message": "text shape bqs may overflow its own content box (estimated 700px, available 400px); consider setting content wrap=\"true\" autoFit=\"normal-auto-fit\" (likely background decoration: large font, low alpha, underneath other text)",
|
||||
"hint": "Increase shape.height, reduce the text, or set content wrap=\"true\" autoFit=\"normal-auto-fit\". This is an estimate based on font size, line spacing, and wrapped line count.",
|
||||
"schema_version": "2.0",
|
||||
"element_ids": [
|
||||
"bqs"
|
||||
],
|
||||
"target": {
|
||||
"slide_number": 11
|
||||
},
|
||||
"rule": {
|
||||
"id": "text_may_overflow_shape",
|
||||
"name": "estimated_text_fits_declared_shape",
|
||||
"comparison": "estimated_height <= available_height"
|
||||
},
|
||||
"measurement": {
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0
|
||||
},
|
||||
"related_objects": [
|
||||
{
|
||||
"element_id": "bqs",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"bbox": {
|
||||
"x": 400,
|
||||
"y": 50,
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slide_number": 12,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 13,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 14,
|
||||
"status": "passed",
|
||||
"element_count": 15,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 15,
|
||||
"status": "passed",
|
||||
"element_count": 12,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 16,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 17,
|
||||
"status": "passed",
|
||||
"element_count": 9,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [
|
||||
{
|
||||
"level": "info",
|
||||
"code": "text_may_overflow_shape",
|
||||
"elements": [
|
||||
"baJ"
|
||||
],
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0,
|
||||
"message": "text shape baJ may overflow its own content box (estimated 700px, available 400px); consider setting content wrap=\"true\" autoFit=\"normal-auto-fit\" (likely background decoration: large font, low alpha, underneath other text)",
|
||||
"hint": "Increase shape.height, reduce the text, or set content wrap=\"true\" autoFit=\"normal-auto-fit\". This is an estimate based on font size, line spacing, and wrapped line count.",
|
||||
"schema_version": "2.0",
|
||||
"element_ids": [
|
||||
"baJ"
|
||||
],
|
||||
"target": {
|
||||
"slide_number": 17
|
||||
},
|
||||
"rule": {
|
||||
"id": "text_may_overflow_shape",
|
||||
"name": "estimated_text_fits_declared_shape",
|
||||
"comparison": "estimated_height <= available_height"
|
||||
},
|
||||
"measurement": {
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0
|
||||
},
|
||||
"related_objects": [
|
||||
{
|
||||
"element_id": "baJ",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"bbox": {
|
||||
"x": 400,
|
||||
"y": 50,
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"issues": [
|
||||
{
|
||||
"level": "info",
|
||||
"code": "text_may_overflow_shape",
|
||||
"elements": [
|
||||
"baJ"
|
||||
],
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0,
|
||||
"message": "text shape baJ may overflow its own content box (estimated 700px, available 400px); consider setting content wrap=\"true\" autoFit=\"normal-auto-fit\" (likely background decoration: large font, low alpha, underneath other text)",
|
||||
"hint": "Increase shape.height, reduce the text, or set content wrap=\"true\" autoFit=\"normal-auto-fit\". This is an estimate based on font size, line spacing, and wrapped line count.",
|
||||
"schema_version": "2.0",
|
||||
"element_ids": [
|
||||
"baJ"
|
||||
],
|
||||
"target": {
|
||||
"slide_number": 17
|
||||
},
|
||||
"rule": {
|
||||
"id": "text_may_overflow_shape",
|
||||
"name": "estimated_text_fits_declared_shape",
|
||||
"comparison": "estimated_height <= available_height"
|
||||
},
|
||||
"measurement": {
|
||||
"line_count": 2,
|
||||
"line_height": 420.0,
|
||||
"estimated_height": 700.0,
|
||||
"available_height": 400,
|
||||
"overflow": 300.0
|
||||
},
|
||||
"related_objects": [
|
||||
{
|
||||
"element_id": "baJ",
|
||||
"kind": "shape",
|
||||
"type": "text",
|
||||
"bbox": {
|
||||
"x": 400,
|
||||
"y": 50,
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slide_number": 18,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 19,
|
||||
"status": "passed",
|
||||
"element_count": 12,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 20,
|
||||
"status": "passed",
|
||||
"element_count": 14,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 21,
|
||||
"status": "passed",
|
||||
"element_count": 15,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
},
|
||||
{
|
||||
"slide_number": 22,
|
||||
"status": "passed",
|
||||
"element_count": 10,
|
||||
"errors": [],
|
||||
"warnings": [],
|
||||
"infos": [],
|
||||
"issues": []
|
||||
}
|
||||
]
|
||||
}
|
||||
1670
tmp/page3-lint/P4tys0DOFlg3ZodM4P0cRdOUnyh/readback.xml
Normal file
|
After Width: | Height: | Size: 64 KiB |