logo-studio

Logo 设计工作室

融合三种行业标准方法论的专业 Logo 设计工作室——Rand 的简约理性主义、Pentagram 的战略到工艺，以及 Neumeier 的品牌鸿沟——以简洁、手工编写的 SVG 打造独特且令人难忘的品牌标志。

功能

• 通过结构化的探索访谈提炼品牌精髓
• 将品牌映射到荣格原型，为视觉方向提供心理学依据
• 沿着 3 个战略方向生成 9 个以上独特的 SVG Logo 概念
• 使用真实字体（Google Fonts）或几何构造，生成简洁、兼容的 SVG 标记
• 通过独立的 HTML 画廊展示所有概念，提供浅色／深色背景、缩放和变体条
• 根据用户选择和反馈支持迭代优化
• 根据最终 Logo 生成完整的应用资源包（iOS、Android、macOS、Windows、网站图标、PWA、社交媒体）
• 在会话结束时生成多页品牌指南文档（Logo 规则、调色板、字体层级、布局、UI 组件、动效、品牌语调、资源管理），提供精简版／标准版／完整版三个深度选项

工作流

阶段	名称	参考
1	品牌探索	methodologies.md
2	战略定位	brand-psychology.md
3	概念生成	methodologies.md
4	SVG 构建	svg-techniques.md + typography.md
5	工作室展示	gallery-template.html
6	迭代与评估	evaluation-criteria.md
7	应用资源制作	app-assets.md + build-assets.mjs
8	品牌指南文档	brand-guidelines.md + brand-guidelines-template.html

阶段 1：品牌探索

探索阶段旨在提取战略性 Logo 设计所需的信息。

探索访谈

项目	目的
品牌／公司名称	字标的基础
行业／类别	类别惯例与差异化机会
目标受众	人口统计特征、心理特征、抱负
品牌价值观（前 3 项）	需要通过视觉表达的核心个性特征
竞争对手（3–5 个）	用于竞争差异化的视觉格局
“唯一宣言”	“我们的品牌是唯一一个 [类别]，能够 [差异化特点]”
语调／个性	品牌在各个个性维度上的位置
现有资源	正在使用的颜色、字体或视觉元素
使用场景	Logo 出现的位置（应用图标、标牌、印刷品、网页）

个性维度

在以下坐标轴上定位品牌（1–10）：

Traditional ←————→ Modern
Playful     ←————→ Serious
Luxurious   ←————→ Accessible
Bold        ←————→ Subtle
Organic     ←————→ Geometric

每种方法论如何处理探索过程，请参阅 methodologies.md。

阶段 2：战略定位

原型映射

每个品牌都映射到 12 种荣格原型之一。原型决定视觉词汇——形状、颜色、字体和构图风格。

完整的原型与视觉映射、色彩心理学、形状心理学和字体心理学，请参阅 brand-psychology.md。

竞争格局

将竞争对手的 Logo 映射到两个坐标轴上，以识别视觉空白区域：

Axis 1: Traditional ←→ Modern
Axis 2: Playful ←→ Serious

Logo 概念以空白象限为目标，即尚未被占据的视觉领域。

三种战略方向

方向	特征
方向 A	与主要原型一致。符合市场惯例、稳妥。
方向 B	融合主要原型与相邻原型。既独特又熟悉。
方向 C	与类别惯例形成对比。差异化程度最高，风险也最高。

阶段 3：概念生成

概念矩阵

每个方向生成 3 种 Logo 类型，至少产出 9 个概念：

	方向 A	方向 B	方向 C
组合标志	A1	B1	C1
文字标志	A2	B2	C2
符号 / 图标	A3	B3	C3

还可扩展其他类型：字母标志、抽象标志、徽章。

概念开发

每个概念都遵循「化繁为简的理性主义」流程：

1. 从 Only Statement 中提取核心理念
2. 构思视觉隐喻——将品牌名词与意想不到的联想强行关联
3. 绘制缩略草图：重数量，轻质量
4. 简化：剥离至必要元素
5. 在脑海中测试：能否凭记忆画出来？

各方法论的完整流程请参阅 methodologies.md。

阶段 4：SVG 构建

技术标准

标准	值
缩放	基于 viewBox（不设置固定宽度 / 高度）
命名空间	每个 <svg> 上都带有 xmlns="http://www.w3.org/2000/svg"
形状	几何基本图形：circle、rect、polygon、path
字体排版	默认使用真实字体的 <text>；自定义字形使用路径
可复用元素	在 <defs> 中定义渐变、clipPaths、蒙版
负空间	对镂空形状使用 fill-rule="evenodd"
文件大小	每个 Logo 小于 5KB
ViewBox	符号使用 200×200，组合标志 / 文字标志使用 400×120

字体排版策略

Logo 文字标志默认使用真实字体排版。HTML 展示页会加载 Google Fonts，以便 <text> 元素在预览和迭代过程中使用预期字体渲染。

方法	适用场景
<text> + font-family	使用现成字体的文字标志（多数现代科技品牌）。迭代时的默认方式。
嵌入 @font-face	需要便携式 SVG 交付时（电子邮件、PDF、第三方查看器）。字体子集仅包含所用字形。
轮廓化 <path>	自定义字形（Coca-Cola、Disney 风格）、修改字形，或最终印刷 / 周边产品交付。

每个 font-family 都会级联到系统备用字体——例如 'Inter', -apple-system, sans-serif——因此 Logo 不会以 Times New Roman 渲染。

字体精选目录（Inter、Work Sans、Fraunces、Playfair Display、Space Grotesk、Manrope、Archivo 等）、经典搭配、许可信息，以及文字与路径的选择流程图，请参阅 typography.md。

SVG 骨架

符号 / 图标：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    
  </defs>
  
</svg>

使用真实字体排版的文字标志：

<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <text x="200" y="65" text-anchor="middle"
        font-family="Inter, -apple-system, system-ui, sans-serif"
        font-size="48" font-weight="800" letter-spacing="-1"
        fill="#0A0A0A">Acme</text>
</svg>

组合标志（符号 + 排版文字标志）：

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(20, 30)">
    
    <circle cx="30" cy="30" r="28" fill="#0071e3"/>
  </g>
  <text x="90" y="72"
        font-family="Inter, system-ui, sans-serif"
        font-size="42" font-weight="700"
        fill="#0A0A0A">Acme</text>
</svg>

颜色变体

每个 Logo 均提供三种变体：

变体	描述
全彩	根据品牌原型和心理学确定的品牌色
单色	浅色背景上的单一深色（#1d1d1f）
反白	深色背景上的白色（#ffffff）

几何构建方法、贝塞尔曲线、对称性、黄金比例和兼容性规则，请参阅 svg-techniques.md。

阶段 5：工作室展示

展示页输出

所有概念都会展示在一个独立的 HTML 文件中，该文件基于展示页模板。

输出路径： 工作目录中的 ./logo-studio-{brandname}.html。

写入文件后，使用 open（macOS）、xdg-open（Linux）或 start（Windows）打开。

展示卡片结构

┌─────────────────────────────┐
│  [Light BG]  │  [Dark BG]   │  ← Side-by-side display
├─────────┬─────────┬─────────┤
│ Color   │  Mono   │ Reversed│  ← Variant strip
├─────────┴─────────┴─────────┤
│ [ID] Concept Name           │
│ Description + rationale     │
│ #tag #tag #tag              │
└─────────────────────────────┘

展示页分区

卡片按战略方向分组：

• 分区：方向 A — “保守 / 符合原型”
• 分区：方向 B — “独特 / 混合”
• 分区：方向 C — “颠覆 / 打破类别”

阶段 6：迭代

反馈协议

用户通过 ID 引用概念（例如，“A1”“C2”）。

迭代类型	触发条件	操作
优化	“我喜欢 A1，但是……”	为选中的概念提供 3-5 种变体
组合	“将 A1 图标与 B2 字体组合”	综合多个概念中的元素
转向	“这些都不太对”	返回第 1 阶段，深入探索
扩展	“多来一些 C 行风格的”	沿该方向提供更多概念

质量关卡

每个最终候选方案都要通过六项测试：

测试	标准
便笺测试	观看 5 秒后仍能凭记忆画出来
缩略图测试	在 16×16 像素（网站图标尺寸）下仍能辨认
轮廓测试	仅看轮廓也能辨认
黑白测试	无颜色时仍能正常使用
替换测试	用在竞争对手的产品上时显得不合适
场景测试	与竞争对手的 Logo 按真实尺寸并排时仍有存在感

详细评估框架请参见 evaluation-criteria.md。

迭代展示集

每次迭代都会生成更新后的 HTML 文件：logo-studio-{brandname}-r{N}.html

更新后的展示集包含经过优化或新增的概念，并在页眉注明轮次。

最终 Logo 交付物

最终选定的 Logo 将导出为：

文件	内容
logo-{name}.svg	全彩 SVG（包含 <text> 元素的工作文件）
logo-{name}-mono.svg	单色 SVG
logo-{name}-reversed.svg	反白/镂空 SVG
logo-{name}-icon.svg	仅含符号的变体（组合标志适用）
logo-{name}-outlined.svg	将文本转换为路径的交付版本（不依赖字体）

工作文件（logo-{name}.svg）仍可编辑。轮廓化版本是用于印刷、周边产品以及可能无法加载字体的环境中的交付资源。

第 7 阶段：应用资源制作

选定最终 Logo 后，第 7 阶段会从规范图标母版为每个主流平台生成完整的应用资源包。

图标母版

图标母版是从最终 Logo 衍生而来（但与其有所区别）的方形 SVG：

属性	值
画布	1024×1024，正方形
背景	明确的品牌色（非透明，也非白色）
内容	通常仅包含符号；仅有字标的品牌则使用字母组合
字体排印	将文本轮廓化为路径（无头光栅化器中的字体渲染并不可靠）
圆角半径	无——平台会应用自己的蒙版
安全区域	中央约 61%（符合 Android 最严格的 66/108 要求）

图标母版是构建流水线的输入。它是独立于 Logo 的另一项产物，因为图标和 Logo 的用途不同——完整的设计原理请参见 app-assets.md。

平台输出

平台	资源
iOS	AppIcon.appiconset/，包含浅色/深色/色调版 1024 PNG，以及 Contents.json（iOS 18 格式）
Android	自适应图标（ic_launcher.xml + 前景/背景/单色图层）+ 旧版密度（mdpi-xxxhdpi）+ Play Store 512
macOS	使用 iconutil 从包含 10 种尺寸（16 至 1024@2x）的 .iconset 构建 AppIcon.icns
Windows	多分辨率 .ico（16/32/48/256）+ UWP 磁贴 PNG（44、71、150、310、宽版）
Web / 网站图标	favicon.ico、favicon.svg、apple-touch-icon.png（180）、PWA 清单图标（192、512、可遮罩），safari-pinned-tab.svg（单色）
PWA	site.webmanifest、启动屏幕、带安全区域留白的可遮罩图标
社交媒体	Open Graph（1200×630）、Twitter 卡片（1200×628）、LinkedIn、头像（400、512）

工具栈

用途	工具	安装
以编程方式进行栅格化	sharp (Node, libvips)	npm i sharp
Favicon + iOS + Android + Windows 套件	favicons (npm)	npm i favicons
PWA 启动画面 + 可遮罩图标	pwa-asset-generator (npm)	npm i pwa-asset-generator
CLI 栅格化备用方案	resvg or rsvg-convert	brew install resvg librsvg
macOS .icns 构建工具	iconutil	macOS 内置
SVG 优化	svgo	npm i svgo
PNG 优化	pngquant + oxipng	brew install pngquant oxipng

完整的工具对比、平台规格和注意事项（尤其是无头 SVG 栅格化中的字体处理）请参阅 app-assets.md。

构建流水线

完整流水线已编写在 build-assets.mjs 中：

# Install prerequisites (one time)
npm i -D sharp favicons pwa-asset-generator svgo png-to-ico

# Run the build
node build-assets.mjs

流水线阶段：

1. 使用 svgo 优化源 SVG
2. 使用 favicons 生成 favicon/iOS/Android/Windows 套件
3. 使用 sharp 构建 macOS .iconset，然后通过 iconutil 生成 .icns
4. 构建 iOS AppIcon.appiconset（浅色 + 深色 + 着色的 1024 PNG）
5. 生成社交媒体/Open Graph 图片
6. 使用 pngquant + oxipng 优化所有 PNG

输出结构

dist/assets/
├── logo.svg                         # Optimized source logo
├── icon-master.svg                  # 1024×1024 square icon master
├── AppIcon.appiconset/              # iOS asset catalog
├── AppIcon.icns                     # macOS compiled icon
├── android/                         # Adaptive + legacy densities
├── windows/                         # .ico + UWP tiles
├── web/                             # favicons, PWA manifest, safari-pinned-tab
└── social/                          # OG, Twitter, profile images

关键排版说明

SVG 栅格化工具（sharp、librsvg、resvg）会使用系统安装的字体渲染 <text> 元素。在 CI 或缺少品牌字体的机器上，输出会静默替换为备用字体。图标主文件通过使用轮廓路径规避了这个问题——工作用 SVG 保留实时文本，而图标主文件使用轮廓路径。

双输出工作流请参阅 typography.md。

阶段 8：品牌指南文档

选定最终 Logo 后，阶段 8 会询问是否生成多页品牌指南文档——这是说明如何在每个接触点应用品牌形象的唯一权威来源。是否生成会明确征求同意；文档不会自动生成。

提供时机

该选项会在阶段 6（Logo 定稿）之后提供，且与阶段 7（应用资源）无关。两者的先后顺序不限。拒绝应用资源的用户仍可请求品牌指南；选择生成应用资源的用户接下来会看到品牌指南选项。

深度模式

模式	页数	范围
Essentials	4–6	封面、简介、Logo、颜色、排版、资源管理
Standard	8–10	Essentials + 布局与网格、UI 组件、语气与风格
Full	12–14	Standard + 动效与动画、审批

当品牌简介提及数字产品、应用、网站或演示文稿场景时，默认使用 Standard。仅包含品牌形象设计的项目默认使用 Essentials。Full 需主动选择。

输入来源

文档的大部分内容会从阶段 1–6 的上下文中填充，无需再次询问——品牌名称、受众、语气、主色、标志性元素、Logo 变体和排版均已确定。简短的扩展访谈会收集其余输入（版本、留白规则、最小尺寸、命名规范、语气属性，以及 Full 模式下的动效时长），并为每项提供建议默认值。

完整章节顺序、各章节输入规范、扩展访谈清单和默认内容库请参阅 brand-guidelines.md。

指南模板

文档基于 brand-guidelines-template.html 组装而成——这是一个独立的 HTML 框架，包含用于品牌颜色的 CSS 自定义属性、用于转换为 PDF 的 @page 规则，以及每个字段对应的 {{TOKEN}} 占位符（Logo SVG、色板、字体比例、组件条目、语气/动效行、页脚行）。渲染时，会移除所选深度模式中省略章节的整个 <section> 区块。

文档采用被记录品牌的样式——其标题字体、主强调色和标志性元素颜色——让文档本身也能展示其中所述的指南。

输出

文件	内容
brand-guidelines-{brandname}.html	独立的 HTML，可直接打印
brand-guidelines-{brandname}.pdf	可选 — 通过无头 Chrome 或 Cmd+P“另存为 PDF”生成

写入 HTML 后，会使用 open / xdg-open / start 打开。PDF 转换是一个单独的显式步骤；命令示例见 brand-guidelines.md。