feat: 导出 SproutClaw .sproutclaw 配置
包含 extensions、skills、prompts、settings、auth、models、mcp 等配置。 排除 node_modules、npm 缓存、sessions 等运行时数据。
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
# swiss_grid_systems_ppt169_20260517
|
||||
|
||||
- Canvas format: ppt169
|
||||
- Created: 20260517
|
||||
|
||||
## Directories
|
||||
|
||||
- `svg_output/`: raw SVG output
|
||||
- `svg_final/`: finalized SVG output
|
||||
- `images/`: presentation assets
|
||||
- `notes/`: speaker notes
|
||||
- `templates/`: project templates
|
||||
- `sources/`: source materials and normalized markdown
|
||||
- `exports/`: main native pptx (timestamped); `_svg.pptx` sibling added when exported with `--svg-snapshot`
|
||||
- `backup/<timestamp>/`: svg_output/ archive (always written in default-flow mode; safe to delete old timestamps)
|
||||
@@ -0,0 +1,207 @@
|
||||
{
|
||||
"version": 1,
|
||||
"defaults": {
|
||||
"transition": { "effect": "fade", "duration": 0.35 },
|
||||
"animation": { "effect": "fade", "duration": 0.4, "stagger": 0.2, "trigger": "after-previous" }
|
||||
},
|
||||
"slides": {
|
||||
"01_cover": {
|
||||
"transition": { "effect": "fade", "duration": 0.45 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"cover-meta-top": { "effect": "fade", "order": 1, "duration": 0.45 },
|
||||
"cover-headline": { "effect": "wipe", "order": 2, "duration": 0.7, "delay": 0.25 },
|
||||
"cover-tagline": { "effect": "fade", "order": 3, "duration": 0.5, "delay": 0.25 },
|
||||
"cover-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"02_quote": {
|
||||
"transition": { "effect": "fade", "duration": 0.4 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"page-header": { "effect": "none" },
|
||||
"quote-mark": { "effect": "fade", "order": 1, "duration": 0.55 },
|
||||
"quote-body": { "effect": "fade", "order": 2, "duration": 0.6, "delay": 0.35 },
|
||||
"quote-attribution": { "effect": "fade", "order": 3, "duration": 0.5, "delay": 0.3 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"03_origin": {
|
||||
"transition": { "effect": "wipe", "duration": 0.4 },
|
||||
"animation": { "stagger": 0.18 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"timeline-track": { "effect": "wipe", "order": 1, "duration": 0.7 },
|
||||
"node-1896": { "effect": "fade", "order": 2, "duration": 0.3 },
|
||||
"node-1908": { "effect": "fade", "order": 3, "duration": 0.3 },
|
||||
"node-1918": { "effect": "fade", "order": 4, "duration": 0.3 },
|
||||
"node-1936": { "effect": "fade", "order": 5, "duration": 0.3 },
|
||||
"node-1957": { "effect": "fade", "order": 6, "duration": 0.45 },
|
||||
"conclusion": { "effect": "fade", "order": 7, "duration": 0.5, "delay": 0.3 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"04_principles": {
|
||||
"animation": { "effect": "fade", "duration": 0.3, "stagger": 0.12 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"principle-1": { "order": 1 },
|
||||
"principle-2": { "order": 2 },
|
||||
"principle-3": { "order": 3 },
|
||||
"principle-4": { "order": 4 },
|
||||
"principle-5": { "order": 5 },
|
||||
"principle-6": { "order": 6 },
|
||||
"principle-7": { "order": 7, "duration": 0.5, "delay": 0.15 },
|
||||
"principle-8": { "order": 8 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"05_figures": {
|
||||
"animation": { "effect": "fade", "duration": 0.3, "stagger": 0.1 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"figure-keller": { "order": 1 },
|
||||
"figure-ballmer": { "order": 2 },
|
||||
"figure-bill": { "order": 3 },
|
||||
"figure-ruder": { "order": 4 },
|
||||
"figure-hofmann": { "order": 5 },
|
||||
"figure-brockmann": { "order": 6, "duration": 0.5, "delay": 0.2 },
|
||||
"figure-miedinger": { "order": 7 },
|
||||
"figure-frutiger": { "order": 8 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"06_brockmann": {
|
||||
"animation": { "stagger": 0.18 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"big-name": { "effect": "fade", "order": 1, "duration": 0.6 },
|
||||
"timeline-track": { "effect": "wipe", "order": 2, "duration": 0.55 },
|
||||
"event-1914": { "effect": "fade", "order": 3, "duration": 0.3 },
|
||||
"event-1936": { "effect": "fade", "order": 4, "duration": 0.3 },
|
||||
"event-1950": { "effect": "fade", "order": 5, "duration": 0.45 },
|
||||
"event-1957": { "effect": "fade", "order": 6, "duration": 0.3 },
|
||||
"event-1958": { "effect": "fade", "order": 7, "duration": 0.3 },
|
||||
"event-1981": { "effect": "fade", "order": 8, "duration": 0.45 },
|
||||
"event-1996": { "effect": "fade", "order": 9, "duration": 0.3 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"07_typefaces": {
|
||||
"animation": { "effect": "fade", "stagger": 0.25 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"type-akzidenz": { "order": 1, "duration": 0.5 },
|
||||
"type-helvetica": { "order": 2, "duration": 0.55, "delay": 0.1 },
|
||||
"type-univers": { "order": 3, "duration": 0.5 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"08_grid_types": {
|
||||
"animation": { "stagger": 0.18 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"axis-cross": { "effect": "split", "order": 1, "duration": 0.55 },
|
||||
"q-manuscript": { "effect": "fade", "order": 2, "duration": 0.4 },
|
||||
"q-column": { "effect": "fade", "order": 3, "duration": 0.4 },
|
||||
"q-modular": { "effect": "fade", "order": 4, "duration": 0.55, "delay": 0.15 },
|
||||
"q-hierarchical": { "effect": "fade", "order": 5, "duration": 0.4 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"09_modular": {
|
||||
"transition": { "effect": "fade", "duration": 0.5 },
|
||||
"animation": { "stagger": 0.3 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"spec-list": { "effect": "fade", "order": 1, "duration": 0.6 },
|
||||
"modular-grid": { "effect": "wipe", "order": 2, "duration": 0.85, "delay": 0.25 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"10_negative_space": {
|
||||
"transition": { "effect": "fade", "duration": 0.5 },
|
||||
"animation": { "stagger": 0.5 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"page-header": { "effect": "none" },
|
||||
"floating-headline": { "effect": "fade", "order": 1, "duration": 0.75 },
|
||||
"floating-aphorism": { "effect": "fade", "order": 2, "duration": 0.65, "delay": 0.5 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"11_outputs": {
|
||||
"transition": { "effect": "wipe", "duration": 0.4 },
|
||||
"animation": { "effect": "fade", "duration": 0.35, "stagger": 0.2 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"domain-corporate": { "order": 1 },
|
||||
"domain-signage": { "order": 2 },
|
||||
"domain-publishing": { "order": 3 },
|
||||
"domain-education": { "order": 4 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"12_digital_era": {
|
||||
"animation": { "stagger": 0.18 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"track": { "effect": "wipe", "order": 1, "duration": 0.6 },
|
||||
"stage-1": { "effect": "fade", "order": 2, "duration": 0.35 },
|
||||
"stage-2": { "effect": "fade", "order": 3, "duration": 0.35 },
|
||||
"stage-3": { "effect": "fade", "order": 4, "duration": 0.35 },
|
||||
"stage-4": { "effect": "fade", "order": 5, "duration": 0.5, "delay": 0.15 },
|
||||
"conclusion": { "effect": "fade", "order": 6, "duration": 0.55, "delay": 0.3 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"13_brands": {
|
||||
"animation": { "effect": "fade", "duration": 0.3, "stagger": 0.13 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"header": { "effect": "none" },
|
||||
"brand-apple": { "order": 1 },
|
||||
"brand-google": { "order": 2 },
|
||||
"brand-spotify": { "order": 3 },
|
||||
"brand-airbnb": { "order": 4 },
|
||||
"brand-ibm": { "order": 5, "duration": 0.5, "delay": 0.15 },
|
||||
"brand-lufthansa": { "order": 6 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
},
|
||||
|
||||
"14_closing": {
|
||||
"transition": { "effect": "wipe", "duration": 0.5 },
|
||||
"animation": { "stagger": 0.35 },
|
||||
"groups": {
|
||||
"bg": { "effect": "none" },
|
||||
"page-header": { "effect": "none" },
|
||||
"closing-headline": { "effect": "fade", "order": 1, "duration": 0.8 },
|
||||
"closing-english": { "effect": "fade", "order": 2, "duration": 0.6, "delay": 0.35 },
|
||||
"closing-meta": { "effect": "fade", "order": 3, "duration": 0.5, "delay": 0.3 },
|
||||
"page-footer": { "effect": "none" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,408 @@
|
||||
# swiss_grid_systems — Design Spec
|
||||
|
||||
> Human-readable design narrative for a Swiss International Typographic Style lecture deck. Machine-readable contract: `spec_lock.md`.
|
||||
|
||||
## I. Project Information
|
||||
|
||||
| Item | Value |
|
||||
| ---- | ----- |
|
||||
| **Project Name** | swiss_grid_systems |
|
||||
| **Canvas Format** | PPT 16:9 (1280×720) |
|
||||
| **Page Count** | 14 |
|
||||
| **Design Style** | A) General Versatile + Swiss International Typographic Style / minimalist grid / Müller-Brockmann hommage |
|
||||
| **Target Audience** | 设计师 / 设计学生 / 文化机构活动观众 |
|
||||
| **Use Case** | 约 25 分钟设计史小型 lecture |
|
||||
| **Created Date** | 2026-05-17 |
|
||||
|
||||
---
|
||||
|
||||
## II. Canvas Specification
|
||||
|
||||
| Property | Value |
|
||||
| -------- | ----- |
|
||||
| **Format** | PPT 16:9 |
|
||||
| **Dimensions** | 1280×720 |
|
||||
| **viewBox** | `0 0 1280 720` |
|
||||
| **Margins** | left/right 64px, top/bottom 56px（4×16 模数） |
|
||||
| **Content Area** | 1152×608（严格 4 列网格：列宽 264px，列间距 32px） |
|
||||
|
||||
---
|
||||
|
||||
## III. Visual Theme
|
||||
|
||||
### Theme Style
|
||||
|
||||
- **Style**: Swiss International Typographic Style，纯白纸面 + 黑色字体 + 朱红点睛
|
||||
- **Theme**: Light theme
|
||||
- **Tone**: 克制、理性、可读、版面冲击；网格是骨架，留白是语言
|
||||
|
||||
### Color Scheme
|
||||
|
||||
| Role | HEX | Purpose |
|
||||
| ---- | --- | ------- |
|
||||
| **Background** | `#FFFFFF` | 纸白底，留白主体 |
|
||||
| **Secondary bg** | `#F4F4F4` | 极淡浅灰，仅用于 P10/P11 的图样区分块 |
|
||||
| **Primary** | `#1A1A1A` | 文字、主几何、海报黑 |
|
||||
| **Accent** | `#D9251D` | 瑞士朱红（点睛 / 红圆 / 标尺） |
|
||||
| **Secondary accent** | `#1A4FA0` | 印刷克莱因蓝（备用，仅章节区分） |
|
||||
| **Body text** | `#1A1A1A` | 主体文字 |
|
||||
| **Secondary text** | `#666666` | 注释、副标、年份 |
|
||||
| **Tertiary text** | `#999999` | 页码、footer |
|
||||
| **Border/divider** | `#E8E8E8` | 极淡网格线 / 分隔 |
|
||||
| **Success** | `#1A4FA0` | （备用，本 deck 不需要状态色，使用蓝替代以避免色彩污染） |
|
||||
| **Warning** | `#D9251D` | （备用，与 Accent 共用） |
|
||||
|
||||
> 60-30-10 严格执行：白 (≥60%) + 黑 (~30%) + 红 (≤10%)。蓝仅作章节/类别区分备用，全文最多出现 1-2 次。
|
||||
|
||||
### AI Image Strategy
|
||||
|
||||
- **Image Rendering**: `minimalist-swiss`
|
||||
- **Image Palette**: `mono-ink`
|
||||
|
||||
> 锁定一次，三张 AI 图全部沿用：纸白 60-70% + 近黑 25-30% + 朱红 <10%。
|
||||
|
||||
### Gradient Scheme
|
||||
|
||||
不使用渐变。瑞士极简风格的核心之一是拒绝渐变和阴影；所有色彩都是纯色块。
|
||||
|
||||
---
|
||||
|
||||
## IV. Typography System
|
||||
|
||||
**Typography direction**: 单一家族（Arial 系，Helvetica 的 Windows 等价）内部以 weight + size 做层级。瑞士国际主义的核心字体语法。
|
||||
|
||||
| Role | Chinese | English | Fallback tail |
|
||||
| ---- | ------- | ------- | ------------- |
|
||||
| **Title** | `"Microsoft YaHei"` | `"Arial Black"` | `sans-serif` |
|
||||
| **Body** | `"Microsoft YaHei"` | `Arial` | `sans-serif` |
|
||||
| **Emphasis** | `"Microsoft YaHei"` | `Arial`（weight 700） | `sans-serif` |
|
||||
| **Code** | — | `Consolas, "Courier New"` | `monospace` |
|
||||
|
||||
**Per-role font stacks**:
|
||||
|
||||
- Title: `"Arial Black", "Microsoft YaHei", sans-serif`
|
||||
- Body: `Arial, "Microsoft YaHei", sans-serif`
|
||||
- Emphasis: `Arial, "Microsoft YaHei", sans-serif`（with `font-weight="700"`）
|
||||
- Code: `Consolas, "Courier New", monospace`
|
||||
|
||||
### Font Size Hierarchy
|
||||
|
||||
**Baseline**: Body = **18px**（lecture 信息密度中等偏紧凑，瑞士本色"密而清"）
|
||||
|
||||
| Purpose | Ratio to body | Example @ body=18 | Weight |
|
||||
| ------- | ------------- | ----------------- | ------ |
|
||||
| Cover title (hero headline) | 2.5-5x | 60-90px | Bold/Heavy |
|
||||
| Chapter / section opener | 2-2.5x | 36-45px | Bold |
|
||||
| Page title | 1.5-2x | 27-36px | Bold |
|
||||
| Hero number | 1.5-2x | 27-36px | Bold |
|
||||
| Subtitle | 1.2-1.5x | 22-27px | SemiBold |
|
||||
| **Body** | **1x** | **18px** | Regular |
|
||||
| Annotation / caption | 0.7-0.85x | 13-15px | Regular |
|
||||
| Page number / footnote | 0.5-0.65x | 9-12px | Regular |
|
||||
|
||||
---
|
||||
|
||||
## V. Layout Principles
|
||||
|
||||
### Page Structure
|
||||
|
||||
- **Header area**: 顶部 56px 内不放标题（瑞士风常将页码/章节号置顶左对齐，标题压在内容区上沿）
|
||||
- **Content area**: 64px 边距内自由排布；多页采用 4 列 264×608 网格
|
||||
- **Footer area**: 底部 32px 高，左侧"页码 / 14"右对齐，中央 / 右侧空
|
||||
|
||||
### Layout Pattern Library
|
||||
|
||||
本 deck 主要采用以下模式：
|
||||
|
||||
| Pattern | Used in pages |
|
||||
| ------- | ------------- |
|
||||
| **Single column centered** | P14 结语 |
|
||||
| **Asymmetric split (2:8 / 3:7)** | P02 引言 / P09 模数示意 |
|
||||
| **Three/four column cards** | P05 人物 / P07 字体 / P11 应用 |
|
||||
| **Matrix grid (2×2)** | P08 网格四类 |
|
||||
| **Top-bottom split** | P03 起源 / P06 生平 / P12 数字时代 |
|
||||
| **Negative-space-driven** | P10 留白即结构 |
|
||||
| **Full-bleed + floating text** | P01 封面 / P14 结语 |
|
||||
| **Vertical list** | P04 八条原则 |
|
||||
| **Icon-grid** | P13 当代品牌 |
|
||||
|
||||
### Spacing Specification
|
||||
|
||||
**Universal**:
|
||||
|
||||
| Element | Range | This deck |
|
||||
| ------- | ----- | --------- |
|
||||
| Safe margin | 40-60px | **64px**（4×16 模数） |
|
||||
| Content block gap | 24-40px | **32px** |
|
||||
| Icon-text gap | 8-16px | **12px** |
|
||||
|
||||
**Cards** (P05 / P07 / P11 / P13):
|
||||
|
||||
| Element | Range | This deck |
|
||||
| ------- | ----- | --------- |
|
||||
| Card gap | 20-32px | **32px** |
|
||||
| Card padding | 20-32px | **24px** |
|
||||
| Card border radius | 8-16px | **0**（瑞士极简严格无圆角） |
|
||||
| Three-column card width | 360-380px | **361px**（4 列网格中三列合并） |
|
||||
|
||||
**Non-card containers** (P02 / P09 / P10 / P14):
|
||||
- 行高 = 1.5 × body
|
||||
- 全幅留白驱动，文字块用大段空白分隔，不依赖分隔线
|
||||
|
||||
---
|
||||
|
||||
## VI. Icon Usage Specification
|
||||
|
||||
### Source
|
||||
|
||||
- **Generic library**: `tabler-outline`（stroke-width **1.5**）—— 仅在极少处点缀
|
||||
- **Brand library**: `simple-icons`（仅 P13 当代品牌墙使用）
|
||||
|
||||
> 瑞士极简的本意是去装饰，本 deck 主体不依赖图标承担信息；图标只在 P13 充当品牌识别符号。其他页面以纯字体 + 几何 + 留白构成。
|
||||
|
||||
### Recommended Icon List
|
||||
|
||||
| Purpose | Icon Path | Page |
|
||||
| ------- | --------- | ---- |
|
||||
| 引文符号（可选） | `tabler-outline/blockquote` | P02 |
|
||||
| 网格示意 | `tabler-outline/grid-3x3` | P08（小标记） |
|
||||
| Apple logo | `simple-icons/apple` | P13 |
|
||||
| Google logo | `simple-icons/google` | P13 |
|
||||
| Spotify logo | `simple-icons/spotify` | P13 |
|
||||
| Airbnb logo | `simple-icons/airbnb` | P13 |
|
||||
| IBM logo | `simple-icons/ibm` | P13 |
|
||||
| Lufthansa logo | `simple-icons/lufthansa` | P13 |
|
||||
|
||||
---
|
||||
|
||||
## VII. Visualization Reference List
|
||||
|
||||
Catalog read: 71 templates
|
||||
|
||||
| Page | Template | Path | Summary-quote (verbatim) | Usage |
|
||||
| ---- | -------- | ---- | ------------------------- | ----- |
|
||||
| P03 | timeline | `templates/charts/timeline.svg` | "Pick for 3-8 milestone events on a horizontal time axis (no duration). Skip for tasks with start/end ranges (use gantt_chart) or vertical layout (use roadmap_vertical)." | 瑞士风格的双源头年代节点（1896 Akzidenz / 1908 Basel / 1918 Keller / 1936 JMB / 1957 Helvetica） |
|
||||
| P04 | vertical_list | `templates/charts/vertical_list.svg` | "Pick for 3-6 numbered key points each with a short description — design principles, core tenets, action items, key takeaways, recommendations, executive summary points. Skip for icon-style cards (use icon_grid) or sequential steps (use numbered_steps)." | 八条核心原则（8 项编号清单 + 极短描述） |
|
||||
| P05 | team_roster | `templates/charts/team_roster.svg` | "Pick for 3-12 leadership/team profile cards (photo + name + title + short bio). Skip for reporting hierarchy (use top_down_tree)." | 关键人物群像（8 位代表性设计师卡片，无照片用名字 + 生卒 + 一行贡献） |
|
||||
| P06 | timeline | `templates/charts/timeline.svg` | "Pick for 3-8 milestone events on a horizontal time axis (no duration). Skip for tasks with start/end ranges (use gantt_chart) or vertical layout (use roadmap_vertical)." | Müller-Brockmann 生平节点（1914 / 1936 / 1950 / 1957 / 1958 / 1981 / 1996） |
|
||||
| P07 | comparison_columns | `templates/charts/comparison_columns.svg` | "Pick for 2-4 pricing/service tier cards in side-by-side columns (marketing layout). Skip for dense feature comparison (use comparison_table)." | 三款字体对比（Akzidenz-Grotesk / Helvetica / Univers）卡片化对比 |
|
||||
| P08 | quadrant_text_bullets | `templates/charts/quadrant_text_bullets.svg` | "Pick for any 2×2 framework where each quadrant holds a titled bullet list — SWOT (Strengths/Weaknesses/Opportunities/Threats, internal-external × helpful-harmful), Ansoff (Existing/New Markets × Existing/New Products), or any named two-axis matrix with text content. Skip for items plotted as points (use matrix_2x2) or bubble-sized portfolios (use quadrant_bubble_scatter)." | 网格四种类型 2×2（手稿 / 列状 / 模数 / 层级） |
|
||||
| P11 | icon_grid | `templates/charts/icon_grid.svg` | "Pick for 4-9 parallel features/capabilities/services as icon cards — feature grid, service lineup, benefits matrix, brand values, product highlights. Skip for sequential ordering (use numbered_steps) or hierarchical layers (use pyramid_chart)." | 输出到企业 VI / 机场标识 / 出版业 / 教育的四象限（这里用文字而非彩色 icon） |
|
||||
| P12 | numbered_steps | `templates/charts/numbered_steps.svg` | "Pick for 3-6 horizontal sequential steps with numeric emphasis — how-it-works section, getting-started guide, methodology overview, implementation phases. Skip if steps need connector arrows (use process_flow) or named output artifacts (use pipeline_with_stages)." | 数字时代延续（960 Grid → Bootstrap 12 → CSS Grid → Design Systems 四阶段） |
|
||||
| P13 | icon_grid | `templates/charts/icon_grid.svg` | （same as P11） | 当代品牌身影（六个品牌 logo 网格） |
|
||||
|
||||
**Runners-up considered**:
|
||||
|
||||
- `numbered_steps` | rejected for P04: 八原则不是 sequential 步骤，更适合 vertical_list 的"编号 + 描述卡"形式，避免暗示顺序依赖
|
||||
- `concentric_circles` | rejected for P10: 同心圆把"留白即结构"具象化反而破坏了 negative-space-driven 的本意；P10 走 no-template 自由留白
|
||||
- `comparison_table` | rejected for P07: 三款字体只需简洁三列卡，feature-row 矩阵密度过高，违反"密而清"中"清"的边界
|
||||
|
||||
---
|
||||
|
||||
## VIII. Image Resource List
|
||||
|
||||
| Filename | Dimensions | Ratio | Purpose | Type | Layout pattern | Acquire Via | Status | Reference | text_policy | page_role |
|
||||
| -------- | --------- | ----- | ------- | ---- | -------------- | ----------- | ------ | --------- | ----------- | --------- |
|
||||
| cover_bg.png | 1280×720 | 1.78 | 封面 hero 背景 | Background | #38 image-as-canvas with text-block inset + #1 full-bleed background with floating title | ai | Pending | 一组瑞士网格几何抽象：横竖黑色细线网格在纯白底上构成 4×3 矩阵，一枚红圆悬于第三列第二行的网格交点，左下区域留大块纯白用于压标题；构图严格对称去中心，几何 absolutely 主导 | none | hero_page |
|
||||
| negative_space.png | 1280×720 | 1.78 | P10 留白即结构 hero | Background | #46 image-as-canvas with caption-stripe overlay + #39 image-as-canvas with mega-headline | ai | Pending | 纯白画面中央偏左 1/3 处一枚 80px 直径红色实心圆，右下角一根 1px 黑色水平基线长度仅占画面 12%；其余 90% 纯白；红圆与黑线之间形成隐性张力，整画是"留白"本身的论证 | none | hero_page |
|
||||
| closing_grid.png | 1280×720 | 1.78 | P14 结语 hero | Background | #38 image-as-canvas with text-block inset + #29 two-stop scrim | ai | Pending | 由细密的黑色网格线（间距 16px）铺满整个画面，网格交点处部分高亮成红点形成稀疏星图，构图严格几何；左下 1/3 留出 8% 不透明白色叠层用于浮文字 | none | hero_page |
|
||||
|
||||
> 三张图全部 `minimalist-swiss × mono-ink`，rendering + palette 由 §III AI Image Strategy 提供；Reference 字段不重复 style 词与 HEX。
|
||||
|
||||
---
|
||||
|
||||
## IX. Content Outline
|
||||
|
||||
### Part 1: 引入
|
||||
|
||||
#### Slide 01 - 封面
|
||||
|
||||
- **Layout**: Full-bleed + floating text（封面 hero）
|
||||
- **Title**: 网格系统
|
||||
- **Subtitle**: The Grid as a Way of Seeing
|
||||
- **Info**: A Lecture on Swiss International Typographic Style · 2026
|
||||
|
||||
#### Slide 02 - 引言
|
||||
|
||||
- **Layout**: Asymmetric split 3:7（左侧大引号 + 右侧引文）
|
||||
- **Title**: （无标题；引文直接是 hero）
|
||||
- **Content**:
|
||||
- "The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."
|
||||
- — Josef Müller-Brockmann, *Grid Systems in Graphic Design*, 1981
|
||||
|
||||
### Part 2: 历史与原则
|
||||
|
||||
#### Slide 03 - 双源头
|
||||
|
||||
- **Layout**: Top-bottom split（上方时间轴，下方简短叙述）
|
||||
- **Title**: 双源头 · 1896 → 1957
|
||||
- **Visualization**: timeline
|
||||
- **Content**:
|
||||
- 1896 Akzidenz-Grotesk 由 Berthold 铸字行发行
|
||||
- 1908 Basel School of Design 改革
|
||||
- 1918 Ernst Keller 入苏黎世应用艺术学院
|
||||
- 1936 Müller-Brockmann 开设工作室
|
||||
- 1957 Helvetica + Univers 同年问世
|
||||
- 一句结论：理性主义不是凭空到来，而是来自半个世纪的字体 + 学校 + 教学
|
||||
|
||||
#### Slide 04 - 八条核心原则
|
||||
|
||||
- **Layout**: Vertical list（编号 + 一行原则 + 注释）
|
||||
- **Title**: 八条核心原则
|
||||
- **Visualization**: vertical_list
|
||||
- **Content**:
|
||||
1. 客观先于表达 · Objectivity over expression
|
||||
2. 数学网格为骨架 · Mathematical grid
|
||||
3. 非对称构图 · Asymmetric layout
|
||||
4. 无衬线字体 · Sans-serif typography
|
||||
5. 齐左不齐右 · Flush-left ragged-right
|
||||
6. 客观摄影 · Objective photography
|
||||
7. 留白是结构 · Negative space as structure
|
||||
8. 可重复可规模化 · Reproducible at scale
|
||||
|
||||
#### Slide 05 - 关键人物
|
||||
|
||||
- **Layout**: Four-column cards × 2 行（8 人）
|
||||
- **Title**: 八位塑造者
|
||||
- **Visualization**: team_roster
|
||||
- **Content**:
|
||||
- Ernst Keller (1891–1968) · 苏黎世学派奠基
|
||||
- Théo Ballmer (1902–1965) · 网格早期实验者
|
||||
- Max Bill (1908–1994) · 包豪斯→乌尔姆
|
||||
- Emil Ruder (1914–1970) · 巴塞尔 Typographie
|
||||
- Armin Hofmann (1920–2020) · 巴塞尔海报
|
||||
- Josef Müller-Brockmann (1914–1996) · 苏黎世 Grid Systems
|
||||
- Max Miedinger (1910–1980) · 1957 设计 Helvetica
|
||||
- Adrian Frutiger (1928–2015) · 1957 设计 Univers
|
||||
|
||||
#### Slide 06 - Müller-Brockmann
|
||||
|
||||
- **Layout**: Top-bottom split（上方时间轴，下方关键事件文字）
|
||||
- **Title**: Josef Müller-Brockmann · 1914–1996
|
||||
- **Visualization**: timeline
|
||||
- **Content**:
|
||||
- 1914 生于瑞士拉珀斯维尔
|
||||
- 1936 苏黎世独立工作室
|
||||
- 1950 Tonhalle Musica Viva 海报系列起
|
||||
- 1957 苏黎世应用艺术学院教授
|
||||
- 1958 创办 *Neue Grafik* 期刊
|
||||
- 1981 出版 *Grid Systems in Graphic Design*
|
||||
- 1996 在 Unterengstringen 逝世
|
||||
|
||||
### Part 3: 字体与网格
|
||||
|
||||
#### Slide 07 - 三款决定性字体
|
||||
|
||||
- **Layout**: Three-column cards
|
||||
- **Title**: 三款决定性字体
|
||||
- **Visualization**: comparison_columns
|
||||
- **Content**:
|
||||
- **Akzidenz-Grotesk · 1896** · Berthold · 第一款现代意义的商业无衬线 · 瑞士学派早期首选
|
||||
- **Helvetica · 1957** · Miedinger + Hoffmann · 拉丁文"瑞士"为名 · 中性客观可读至极
|
||||
- **Univers · 1957** · Frutiger · 21 字重首次数字坐标系统化 · 字体家族工程的开端
|
||||
|
||||
#### Slide 08 - 网格四种类型
|
||||
|
||||
- **Layout**: Matrix grid 2×2
|
||||
- **Title**: 网格四种类型
|
||||
- **Visualization**: quadrant_text_bullets
|
||||
- **Content**:
|
||||
- **手稿网格 Manuscript** · 单栏 · 古老 · 长文唯一选项
|
||||
- **列状网格 Column** · 多栏并列 · 期刊与报纸的语法
|
||||
- **模数网格 Modular** · 横列 × 纵行的方格矩阵 · 海报与目录利器
|
||||
- **层级网格 Hierarchical** · 不规则但内部有逻辑 · 复合排版
|
||||
|
||||
#### Slide 09 - 模数网格示意
|
||||
|
||||
- **Layout**: Asymmetric split 2:8（左侧数值说明，右侧 SVG 几何绘制 8×6 模数图）
|
||||
- **Title**: 一切都是可计算的
|
||||
- **Content**:
|
||||
- 列宽 = 264px · 列间距 = 32px · 行高 = body × 1.5
|
||||
- 安全边距 = 64px = 4 × 16px 基础模数
|
||||
- 右侧画出 4×6 模数网格，每格 264×96，红色线标记一个跨 3 列的图像区
|
||||
|
||||
#### Slide 10 - 留白即结构
|
||||
|
||||
- **Layout**: Negative-space-driven（90% 纯白 + 一枚红圆 + 一行短句）
|
||||
- **Title**: 留白即结构
|
||||
- **Content**:
|
||||
- 一句：留白不是剩余，留白是信息的载体
|
||||
- 一句：The space between is the message
|
||||
- hero 图作为整页主体（red dot + 极细水平线）
|
||||
|
||||
### Part 4: 影响与遗产
|
||||
|
||||
#### Slide 11 - 输出到现代世界
|
||||
|
||||
- **Layout**: Four cards
|
||||
- **Title**: 输出到现代世界 · 1960s →
|
||||
- **Visualization**: icon_grid
|
||||
- **Content**:
|
||||
- **企业 VI** · IBM、Knoll、Lufthansa · 把瑞士理性变成"识别系统"产业
|
||||
- **机场 / 地铁标识** · 纽约 Unimark、巴黎机场 Frutiger 字体
|
||||
- **出版业** · *Du* 杂志、*Eye*、*Domus* 的版面语法
|
||||
- **设计教育** · 巴塞尔与苏黎世学派学生散播至全球
|
||||
|
||||
#### Slide 12 - 数字时代的延续
|
||||
|
||||
- **Layout**: Top-bottom split（上方四阶段，下方一行论断）
|
||||
- **Title**: 数字时代的延续
|
||||
- **Visualization**: numbered_steps
|
||||
- **Content**:
|
||||
- 01. 960 Grid System · 2008 · 第一次把网格语法搬上 Web
|
||||
- 02. Bootstrap 12 栏 · 2011 · 模数网格民主化
|
||||
- 03. CSS Grid · 2017 · 浏览器原生网格
|
||||
- 04. Design Systems · 2020s · 大企业 VI 在屏幕上的延续
|
||||
|
||||
#### Slide 13 - 当代品牌的瑞士血脉
|
||||
|
||||
- **Layout**: Six icon cards 3×2
|
||||
- **Title**: 当代品牌的瑞士血脉
|
||||
- **Visualization**: icon_grid
|
||||
- **Content**:
|
||||
- Apple · 极简理性产品语言
|
||||
- Google · Material 网格 + 几何字体
|
||||
- Spotify · 杂志感版面语法
|
||||
- Airbnb · 模数 grid + 极简识别
|
||||
- IBM · 1967 起的瑞士血统（JMB 任顾问）
|
||||
- Lufthansa · Otl Aicher 1962 VI 至今
|
||||
|
||||
#### Slide 14 - 结语
|
||||
|
||||
- **Layout**: Full-bleed + floating text（封面回声）
|
||||
- **Title**: 网格不是限制
|
||||
- **Subtitle**: 是自由的语法
|
||||
- **Info**: The grid is not a constraint. It is a grammar of freedom.
|
||||
|
||||
---
|
||||
|
||||
## X. Speaker Notes Requirements
|
||||
|
||||
- **Filename**: 对应 SVG 文件名（`01_cover.svg` → `notes/01_cover.md`）
|
||||
- **Tone**: 半正式的 lecture 口吻 + 偶尔现场示例（指代台上视觉元素）
|
||||
- **Length per page**: 80-180 字中文（约 30-60 秒语速）
|
||||
- **Total presentation duration**: 25 分钟（14 页平均 ~107 秒/页）
|
||||
- **Purpose**: 教学 + 启发，让设计师重新理解"网格作为系统而非装饰"
|
||||
|
||||
---
|
||||
|
||||
## XI. Technical Constraints Reminder
|
||||
|
||||
### SVG Generation Must Follow
|
||||
|
||||
1. viewBox: `0 0 1280 720`
|
||||
2. 背景用 `<rect>`
|
||||
3. 文字换行用 `<tspan>`（禁 `<foreignObject>`）
|
||||
4. 透明度用 `fill-opacity` / `stroke-opacity`；禁 `rgba()`
|
||||
5. 禁 `mask` / `<style>` / `class` / `foreignObject`
|
||||
6. 禁 `textPath` / `animate*` / `script`
|
||||
7. 字符用 Unicode（`—` `–` `©` `®` `→` 等），HTML 实体禁
|
||||
8. `marker-start` / `marker-end` 仅在 `<defs>` 内三角/菱形/圆形且 `orient="auto"`
|
||||
9. `clipPath` 仅用于 `<image>`，单 shape 子元素
|
||||
|
||||
### Project-specific
|
||||
|
||||
- 严格无圆角（rx = 0）—— 瑞士极简核心；唯一例外是品牌 logo 来自 simple-icons 内置
|
||||
- 严格无渐变 —— `linearGradient` / `radialGradient` 整 deck 不出现
|
||||
- 严格无阴影 —— `filter` 整 deck 不出现
|
||||
- 仅四色 —— 白 / 黑 / 朱红 / 浅灰（border）；蓝色每次出现需自检为何不能用红替代
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 647 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"project": "swiss_grid_systems",
|
||||
"generated_at": "2026-05-17",
|
||||
"deck_rendering": "minimalist-swiss",
|
||||
"deck_palette": "mono-ink",
|
||||
"color_scheme": {
|
||||
"primary": "#1A1A1A",
|
||||
"secondary": "#FFFFFF",
|
||||
"accent": "#D9251D"
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"filename": "cover_bg.png",
|
||||
"purpose": "Cover background (Slide 01) — Swiss grid hommage hero",
|
||||
"type": "background",
|
||||
"page_role": "hero_page",
|
||||
"text_policy": "none",
|
||||
"aspect_ratio": "16:9",
|
||||
"image_size": "2K",
|
||||
"prompt": "Strict Swiss-grid minimalist composition in the visual language of Josef Müller-Brockmann's Tonhalle posters. The canvas is built on an explicit 12-column by 7-row modular grid drawn as fine 1px black lines on a pure white field — the grid itself is the subject, the underlying structural language of Swiss design made visible. One perfect circle filled with vivid Swiss red `#D9251D` sits at the rule-of-thirds intersection at the upper right (about column 9, row 2), diameter approximately 14% of canvas height — the single chromatic event, charged with the entire composition's tension. The lower left quadrant of the grid is intentionally calm — pure white with the faint grid lines as the only marks — designed to receive a slide title overlaid externally in SVG. Color behavior is mono-ink with semantic accent: pure white background `#FFFFFF` (about 72%); near-black grid lines `#1A1A1A` (about 24%); Swiss red `#D9251D` accent (under 4% as the single circle). Single uniform stroke weight throughout. Forms are reduced to essential geometric primitives — straight lines and one perfect circle. No gradients, no shadows, no texture, no decoration, no perspective. Composed as a 1280×720 hero-page background. NO text of any kind anywhere in the image — no letters, numbers, signs, watermarks, labels, or written symbols. Color values (HEX codes) are rendering guidance only — do not display HEX codes or color names as visible text anywhere in the image.",
|
||||
"alt_text": "Swiss grid composition: fine black lines forming a 12×7 modular grid on white, with a single red circle at the upper-right rule-of-thirds intersection",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "negative_space.png",
|
||||
"purpose": "P10 negative-space-driven hero — the space between is the message",
|
||||
"type": "background",
|
||||
"page_role": "hero_page",
|
||||
"text_policy": "none",
|
||||
"aspect_ratio": "16:9",
|
||||
"image_size": "2K",
|
||||
"prompt": "Radical Swiss minimalism — the entire image is an argument for negative space. The canvas is approximately 92% pure white `#FFFFFF`, vast and deliberate, calm to the edges. A single small perfect circle filled with Swiss red `#D9251D`, diameter about 9% of canvas height, sits slightly left of center along the horizontal third (rule-of-thirds upper intersection on the left side). In the lower right region, a single thin near-black `#1A1A1A` horizontal line — 1px weight — spans about 12% of canvas width, alone, no terminations or marks. That is all. No grid lines, no secondary shapes, no field decoration. The relationship between the red dot, the black line, and the immense surrounding white field is the entire composition — proof that emptiness is structure, not absence. Color behavior is mono-ink with semantic accent: white field overwhelming (92%); near-black line element minimal (under 1%); Swiss red circle accent (about 3%). Single uniform stroke weight. Forms are reduced to one circle and one line. No gradients, no shadows, no texture, no decoration, no perspective. Composed as a 1280×720 hero-page background; the upper-right and lower-left regions are completely calm and may receive SVG text overlay. NO text of any kind anywhere in the image — no letters, numbers, signs, watermarks, labels, or written symbols. Color values are rendering guidance only — do not display HEX codes or color names as visible text.",
|
||||
"alt_text": "Vast white field with a single small red circle upper-left of center and a thin black horizontal line lower-right",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "closing_grid.png",
|
||||
"purpose": "P14 closing hero — the grid as grammar of freedom",
|
||||
"type": "background",
|
||||
"page_role": "hero_page",
|
||||
"text_policy": "none",
|
||||
"aspect_ratio": "16:9",
|
||||
"image_size": "2K",
|
||||
"prompt": "Strict Swiss-grid composition recalling the cover but evolved. A dense modular grid of near-black `#1A1A1A` 1px lines forms a 20-column by 11-row matrix across the entire pure white `#FFFFFF` canvas — denser than the cover, more like a typographer's baseline grid sheet. Roughly fifteen intersection points across the grid are marked with small filled circles in Swiss red `#D9251D`, diameter approximately 1.5% of canvas height each — irregularly distributed in a slightly clustered pattern that suggests constellation or musical rhythm rather than systematic data. The clusters lean toward the right two-thirds of the canvas; the left third remains relatively sparse, designed to receive a closing-line SVG text overlay. Color behavior is mono-ink with semantic accent: pure white field (about 70%); near-black grid lines (about 26%); Swiss red dot constellation (about 4% total). Single uniform 1px stroke weight throughout. Forms are reduced to straight lines and small perfect circles. No gradients, no shadows, no texture, no decoration, no perspective. The visual feel is of a printed page from Müller-Brockmann's 1981 Grid Systems book, evolved into a closing motif. Composed as a 1280×720 hero-page background. NO text of any kind anywhere in the image — no letters, numbers, signs, watermarks, labels, or written symbols. Color values are rendering guidance only — do not display HEX codes or color names as visible text.",
|
||||
"alt_text": "Dense 20×11 black grid on white with about fifteen small red circles marking selected intersections, denser toward the right side",
|
||||
"status": "Generated"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
# Image Generation Prompts
|
||||
|
||||
> Auto-generated from `image_prompts.json` by `image_gen.py --render-md`.
|
||||
> Do not hand-edit — re-run the command to refresh.
|
||||
|
||||
> Project: swiss_grid_systems
|
||||
> Generated: 2026-05-17
|
||||
> Color scheme: Primary #1A1A1A | Secondary #FFFFFF | Accent #D9251D
|
||||
|
||||
---
|
||||
|
||||
### Image 1: cover_bg.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Cover background (Slide 01) — Swiss grid hommage hero |
|
||||
| Type | background |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Image size | 2K |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Strict Swiss-grid minimalist composition in the visual language of Josef Müller-Brockmann's Tonhalle posters. The canvas is built on an explicit 12-column by 7-row modular grid drawn as fine 1px black lines on a pure white field — the grid itself is the subject, the underlying structural language of Swiss design made visible. One perfect circle filled with vivid Swiss red `#D9251D` sits at the rule-of-thirds intersection at the upper right (about column 9, row 2), diameter approximately 14% of canvas height — the single chromatic event, charged with the entire composition's tension. The lower left quadrant of the grid is intentionally calm — pure white with the faint grid lines as the only marks — designed to receive a slide title overlaid externally in SVG. Color behavior is mono-ink with semantic accent: pure white background `#FFFFFF` (about 72%); near-black grid lines `#1A1A1A` (about 24%); Swiss red `#D9251D` accent (under 4% as the single circle). Single uniform stroke weight throughout. Forms are reduced to essential geometric primitives — straight lines and one perfect circle. No gradients, no shadows, no texture, no decoration, no perspective. Composed as a 1280×720 hero-page background. NO text of any kind anywhere in the image — no letters, numbers, signs, watermarks, labels, or written symbols. Color values (HEX codes) are rendering guidance only — do not display HEX codes or color names as visible text anywhere in the image.
|
||||
|
||||
**Alt Text**:
|
||||
> Swiss grid composition: fine black lines forming a 12×7 modular grid on white, with a single red circle at the upper-right rule-of-thirds intersection
|
||||
|
||||
---
|
||||
|
||||
### Image 2: negative_space.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | P10 negative-space-driven hero — the space between is the message |
|
||||
| Type | background |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Image size | 2K |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Radical Swiss minimalism — the entire image is an argument for negative space. The canvas is approximately 92% pure white `#FFFFFF`, vast and deliberate, calm to the edges. A single small perfect circle filled with Swiss red `#D9251D`, diameter about 9% of canvas height, sits slightly left of center along the horizontal third (rule-of-thirds upper intersection on the left side). In the lower right region, a single thin near-black `#1A1A1A` horizontal line — 1px weight — spans about 12% of canvas width, alone, no terminations or marks. That is all. No grid lines, no secondary shapes, no field decoration. The relationship between the red dot, the black line, and the immense surrounding white field is the entire composition — proof that emptiness is structure, not absence. Color behavior is mono-ink with semantic accent: white field overwhelming (92%); near-black line element minimal (under 1%); Swiss red circle accent (about 3%). Single uniform stroke weight. Forms are reduced to one circle and one line. No gradients, no shadows, no texture, no decoration, no perspective. Composed as a 1280×720 hero-page background; the upper-right and lower-left regions are completely calm and may receive SVG text overlay. NO text of any kind anywhere in the image — no letters, numbers, signs, watermarks, labels, or written symbols. Color values are rendering guidance only — do not display HEX codes or color names as visible text.
|
||||
|
||||
**Alt Text**:
|
||||
> Vast white field with a single small red circle upper-left of center and a thin black horizontal line lower-right
|
||||
|
||||
---
|
||||
|
||||
### Image 3: closing_grid.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | P14 closing hero — the grid as grammar of freedom |
|
||||
| Type | background |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Image size | 2K |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Strict Swiss-grid composition recalling the cover but evolved. A dense modular grid of near-black `#1A1A1A` 1px lines forms a 20-column by 11-row matrix across the entire pure white `#FFFFFF` canvas — denser than the cover, more like a typographer's baseline grid sheet. Roughly fifteen intersection points across the grid are marked with small filled circles in Swiss red `#D9251D`, diameter approximately 1.5% of canvas height each — irregularly distributed in a slightly clustered pattern that suggests constellation or musical rhythm rather than systematic data. The clusters lean toward the right two-thirds of the canvas; the left third remains relatively sparse, designed to receive a closing-line SVG text overlay. Color behavior is mono-ink with semantic accent: pure white field (about 70%); near-black grid lines (about 26%); Swiss red dot constellation (about 4% total). Single uniform 1px stroke weight throughout. Forms are reduced to straight lines and small perfect circles. No gradients, no shadows, no texture, no decoration, no perspective. The visual feel is of a printed page from Müller-Brockmann's 1981 Grid Systems book, evolved into a closing motif. Composed as a 1280×720 hero-page background. NO text of any kind anywhere in the image — no letters, numbers, signs, watermarks, labels, or written symbols. Color values are rendering guidance only — do not display HEX codes or color names as visible text.
|
||||
|
||||
**Alt Text**:
|
||||
> Dense 20×11 black grid on white with about fifteen small red circles marking selected intersections, denser toward the right side
|
||||
|
||||
---
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
@@ -0,0 +1 @@
|
||||
大家好，今天这场 lecture 我们聊一个看起来很冷、其实关系到每一张幻灯片、每一篇文章、每一个网页的话题——网格系统。完整的题目叫"瑞士网格系统：The Grid as a Way of Seeing"。我会带大家从十九世纪末瑞士苏黎世的一所小学校讲起，一直走到屏幕上你今天写的 CSS Grid。整场大约二十五分钟。这本身就是一张瑞士极简风格的封面页——纯白底、几何网格、一枚红圆——它就是接下来要讲的内容的视觉提要。
|
||||
@@ -0,0 +1 @@
|
||||
进入正题之前，先听一段穆勒·布罗克曼在 1981 年写下的话。他说：网格系统是一种辅助工具，不是一种保证。它允许多种用法，每个设计师可以找到适合自己个性的解决方案。但是，必须学会怎样去使用网格——它是一门需要练习的艺术。这句话定下了我们今天的基调。网格不会替你做设计，它只是给你一个可以让你做出好设计的骨架。
|
||||
@@ -0,0 +1 @@
|
||||
很多人以为瑞士国际主义风格是一夜之间冒出来的几个大师做出来的事情，其实它来自整整六十年的累积。1896 年，柏林的 Berthold 铸字行发行了 Akzidenz-Grotesk，第一款现代意义的商业无衬线字体。1908 年，巴塞尔设计学院完成改革。1918 年，Ernst Keller 进入苏黎世应用艺术学院，奠定"形式跟随内容"的教学原则。1936 年，22 岁的穆勒·布罗克曼在苏黎世开设独立工作室。最后，1957 年，Helvetica 和 Univers 同年问世。理性主义不是凭空而至，它是字体、学校、教学这三条线索半个世纪共同长出来的果实。
|
||||
@@ -0,0 +1 @@
|
||||
那么这套风格的核心原则是什么？穆勒·布罗克曼总结了八条。第一，客观先于表达——信息传达高于设计师的个人情绪。第二，数学网格为骨架——列、行、间距、模数都从基本单位派生。第三，非对称构图——拒绝古典对称带来的中心权威。第四，无衬线字体。第五，齐左不齐右，字距均匀。第六，客观摄影代替装饰性插画。第七，留白是结构而不是剩余——这一条是整个体系最容易被忽视也最难做到的，我们后面会单独用一页来讲它。第八，可重复、可教学、可规模化。
|
||||
@@ -0,0 +1 @@
|
||||
这套体系不是一个人做出来的，它是一群人共同建造的。Ernst Keller 在苏黎世奠基；Théo Ballmer 把 De Stijl 的几何引入海报，是桥梁式人物；Max Bill 是包豪斯学生，后来去乌尔姆设计学院当首任校长，把瑞士理性延伸到产品设计；Emil Ruder 是巴塞尔学派核心，他写的 Typographie 至今是字体设计的圣经；Armin Hofmann 是巴塞尔另一根支柱，他的影响一直延续到耶鲁。Müller-Brockmann 是苏黎世学派的核心，我们下一页详细讲他。最后两位是字体设计师：Max Miedinger 在 1957 年和 Hoffmann 一起做出了 Helvetica；同一年，Adrian Frutiger 做出了 Univers。
|
||||
@@ -0,0 +1 @@
|
||||
让我们单独看一下 Müller-Brockmann 这个人。他 1914 年生于瑞士的小镇拉珀斯维尔，距苏黎世大约 40 公里。1936 年，22 岁的他在苏黎世开设独立工作室，做平面、做展览、做摄影三个方向。真正的转折点是 1950 年——他开始为苏黎世音乐厅设计 Musica Viva 系列海报，用圆、弧、线、矩形这些纯几何元素抽象表达音乐结构。这一系列直到今天都还是构成主义海报的教科书。1957 年他成为苏黎世应用艺术学院教授；1958 年和三位同道一起创办了三语并行的 Neue Grafik 期刊，把瑞士理念正式输出到国际设计共同体。1981 年他出版了 Grid Systems in Graphic Design——这本书就是我们今天讲座的底本。1996 年，他在 Unterengstringen 逝世，享年 82 岁。
|
||||
@@ -0,0 +1 @@
|
||||
讲完了人，讲三款字体。Akzidenz-Grotesk，1896 年由柏林的 Berthold 铸字行发行——这是第一款现代意义的商业无衬线字体，比 Helvetica 早整整六十一年，奠定了无衬线美学全部的基调。Helvetica，1957 年由 Miedinger 和 Hoffmann 设计，它的字面意思就是"瑞士"，取自拉丁文 Helvetia；中性、客观、可读至极，是二十世纪传播范围最广的字体。同样在 1957 年，Adrian Frutiger 做出了 Univers——他第一次用 21 个字重的二维编号系统，把"家族、字重、宽度"这三个维度工程化，是现代字体家族结构的祖先。一年之内，瑞士同时拿出两款决定性字体——这是一个时代的爆发。
|
||||
@@ -0,0 +1 @@
|
||||
Müller-Brockmann 把网格归纳为四种基本类型。第一种是手稿网格，单栏满版，最古老，书籍正文和长篇散文几乎只能用这一种。第二种是列状网格，多栏并列，列宽、行高、间距全部可以计算，是期刊报纸出版业的语法基础。第三种是模数网格——横列乘以纵行的方格矩阵，海报和目录的利器，也是瑞士国际主义最具识别度的网格类型；右下角这个红色的小方块标记，就是我们今天讲座背景里那张封面图的逻辑。第四种是层级网格，不规则但内部有逻辑，复合排版、杂志专题、网页布局都用它。四种网格的共同前提是一句话：所有距离都是可计算的。
|
||||
@@ -0,0 +1 @@
|
||||
这一页我们把抽象变具体。挑一个基本单位，比如 16 像素，然后所有其他尺寸都从它派生。安全边距 64 像素等于 4 个 16；列宽 264 像素是 16 的整数倍加八；列间距 32 像素等于 2 个 16；行高 96 像素等于 6 个 16；正文行高 27 像素是 1.5 倍正文字号；标题字号 32 像素等于 2 个 16。一旦这个基本单位确定下来，整个版面就成了一个可以计算的系统。右边这张图就是这场讲座所有内容页用的 4 列 6 行模数网格——红色高亮的两块是图像区，纯白色高亮的是文字区。设计师不再"画"版面，而是"建立系统并按系统落子"。
|
||||
@@ -0,0 +1 @@
|
||||
这一页我想单独停下来，讲第七条原则——留白即结构。看看背景这张图，整张画面 92% 是纯白，只有一枚红圆和一根极短的黑色水平线。这两个元素之间什么也没有，但你会强烈感觉到张力——红圆在哪里，黑线为什么这么短，为什么是水平的。这种感觉就是留白在工作。留白不是设计师不知道放什么的剩余，留白是信息的载体。瑞士国际主义最深刻的一条是：当你减少元素，剩下的元素就被赋予了重量。The space between is the message。
|
||||
@@ -0,0 +1 @@
|
||||
讲完风格本身，看它的影响。从 1960 年代开始，瑞士理性被输出到四个方向。第一个是企业 VI——IBM 在 Paul Rand 主导下、Knoll、Lufthansa、Olivetti、Braun 这一系列大公司，把瑞士理性变成了一个叫"识别系统"的产业；Müller-Brockmann 本人从 1967 年起任 IBM 顾问。第二个是机场和地铁标识——纽约地铁 1966 年的 Unimark 设计手册、戴高乐机场的 Frutiger 字体、慕尼黑奥运会的 Otl Aicher，公共空间的可读性其实是瑞士理性的直接延伸。第三个是出版业，从瑞士本土的 Du 杂志到 Eye、Domus、Wallpaper，至今仍是文化出版的范本。第四个是设计教育，巴塞尔和苏黎世两条教学路径，通过耶鲁、RISD、Cooper Union 这些学校的瑞士背景教师，一代一代地把这套语法传下去。
|
||||
@@ -0,0 +1 @@
|
||||
风格从纸面跳到屏幕只用了二十年，但语法没有变。2008 年，Nathan Smith 做了 960 Grid System，12 栏、960 像素宽，第一次把网格语法系统地搬上 Web。2011 年，Twitter 开源了 Bootstrap，同样的 12 栏结构，把模数网格民主化到全球前端开发者手里。2017 年，CSS Grid 在所有主流浏览器获得原生支持，模数网格第一次成为 Web 平台的基础设施。再到 2020 年代，Material Design、苹果的人机界面指南、Adobe Spectrum、Microsoft Fluent，大企业 VI 完成了在屏幕上的延续，从一套规则变成了组件库。一句话——从印刷海报到 CSS Grid，介质变了，但模数、列、留白、数学比例这四件套从未改变。
|
||||
@@ -0,0 +1 @@
|
||||
把目光投向你今天每天都在用的产品，瑞士血脉到处都是。Apple 是最显眼的继承者，从乔布斯时代的 Keynote 到今天的人机界面指南，极简理性是产品语言的底色。Google 的 Material 设计系统用 8dp 网格加几何字体，把瑞士工程化到了移动端。Spotify 的版面用大字号加网格分块，把音乐变成了视觉故事，是杂志感的延续。Airbnb 的 DLS 设计语言系统用模数 grid 加极简识别，连摄影都走客观纪实路线。IBM 是直系血统——1967 年 Müller-Brockmann 本人就在那里任顾问，Paul Rand 同期接手识别。Lufthansa 的 VI 是 Otl Aicher 1962 年的作品，基本沿用至今六十多年。半个世纪过去，这套语法仍然是当代品牌的默认坐标系。
|
||||
@@ -0,0 +1 @@
|
||||
让我用穆勒·布罗克曼最常被引用的一句话结束——网格不是限制，是自由的语法。The grid is not a constraint. It is a grammar of freedom. 如果你今天只带走一个东西，希望是这个：当设计师抱怨网格限制创意，他真正抱怨的是自己还没有学会怎么用它；当设计师真正掌握网格，他得到的不是束缚，而是一种可以承载几乎任何内容、任何风格、任何媒介的通用骨架。谢谢大家。
|
||||
@@ -0,0 +1,81 @@
|
||||
# 01_cover
|
||||
|
||||
大家好，今天这场 lecture 我们聊一个看起来很冷、其实关系到每一张幻灯片、每一篇文章、每一个网页的话题——网格系统。完整的题目叫"瑞士网格系统：The Grid as a Way of Seeing"。我会带大家从十九世纪末瑞士苏黎世的一所小学校讲起，一直走到屏幕上你今天写的 CSS Grid。整场大约二十五分钟。这本身就是一张瑞士极简风格的封面页——纯白底、几何网格、一枚红圆——它就是接下来要讲的内容的视觉提要。
|
||||
|
||||
---
|
||||
|
||||
# 02_quote
|
||||
|
||||
进入正题之前，先听一段穆勒·布罗克曼在 1981 年写下的话。他说：网格系统是一种辅助工具，不是一种保证。它允许多种用法，每个设计师可以找到适合自己个性的解决方案。但是，必须学会怎样去使用网格——它是一门需要练习的艺术。这句话定下了我们今天的基调。网格不会替你做设计，它只是给你一个可以让你做出好设计的骨架。
|
||||
|
||||
---
|
||||
|
||||
# 03_origin
|
||||
|
||||
很多人以为瑞士国际主义风格是一夜之间冒出来的几个大师做出来的事情，其实它来自整整六十年的累积。1896 年，柏林的 Berthold 铸字行发行了 Akzidenz-Grotesk，第一款现代意义的商业无衬线字体。1908 年，巴塞尔设计学院完成改革。1918 年，Ernst Keller 进入苏黎世应用艺术学院，奠定"形式跟随内容"的教学原则。1936 年，22 岁的穆勒·布罗克曼在苏黎世开设独立工作室。最后，1957 年，Helvetica 和 Univers 同年问世。理性主义不是凭空而至，它是字体、学校、教学这三条线索半个世纪共同长出来的果实。
|
||||
|
||||
---
|
||||
|
||||
# 04_principles
|
||||
|
||||
那么这套风格的核心原则是什么？穆勒·布罗克曼总结了八条。第一，客观先于表达——信息传达高于设计师的个人情绪。第二，数学网格为骨架——列、行、间距、模数都从基本单位派生。第三，非对称构图——拒绝古典对称带来的中心权威。第四，无衬线字体。第五，齐左不齐右，字距均匀。第六，客观摄影代替装饰性插画。第七，留白是结构而不是剩余——这一条是整个体系最容易被忽视也最难做到的，我们后面会单独用一页来讲它。第八，可重复、可教学、可规模化。
|
||||
|
||||
---
|
||||
|
||||
# 05_figures
|
||||
|
||||
这套体系不是一个人做出来的，它是一群人共同建造的。Ernst Keller 在苏黎世奠基；Théo Ballmer 把 De Stijl 的几何引入海报，是桥梁式人物；Max Bill 是包豪斯学生，后来去乌尔姆设计学院当首任校长，把瑞士理性延伸到产品设计；Emil Ruder 是巴塞尔学派核心，他写的 Typographie 至今是字体设计的圣经；Armin Hofmann 是巴塞尔另一根支柱，他的影响一直延续到耶鲁。Müller-Brockmann 是苏黎世学派的核心，我们下一页详细讲他。最后两位是字体设计师：Max Miedinger 在 1957 年和 Hoffmann 一起做出了 Helvetica；同一年，Adrian Frutiger 做出了 Univers。
|
||||
|
||||
---
|
||||
|
||||
# 06_brockmann
|
||||
|
||||
让我们单独看一下 Müller-Brockmann 这个人。他 1914 年生于瑞士的小镇拉珀斯维尔，距苏黎世大约 40 公里。1936 年，22 岁的他在苏黎世开设独立工作室，做平面、做展览、做摄影三个方向。真正的转折点是 1950 年——他开始为苏黎世音乐厅设计 Musica Viva 系列海报，用圆、弧、线、矩形这些纯几何元素抽象表达音乐结构。这一系列直到今天都还是构成主义海报的教科书。1957 年他成为苏黎世应用艺术学院教授；1958 年和三位同道一起创办了三语并行的 Neue Grafik 期刊，把瑞士理念正式输出到国际设计共同体。1981 年他出版了 Grid Systems in Graphic Design——这本书就是我们今天讲座的底本。1996 年，他在 Unterengstringen 逝世，享年 82 岁。
|
||||
|
||||
---
|
||||
|
||||
# 07_typefaces
|
||||
|
||||
讲完了人，讲三款字体。Akzidenz-Grotesk，1896 年由柏林的 Berthold 铸字行发行——这是第一款现代意义的商业无衬线字体，比 Helvetica 早整整六十一年，奠定了无衬线美学全部的基调。Helvetica，1957 年由 Miedinger 和 Hoffmann 设计，它的字面意思就是"瑞士"，取自拉丁文 Helvetia；中性、客观、可读至极，是二十世纪传播范围最广的字体。同样在 1957 年，Adrian Frutiger 做出了 Univers——他第一次用 21 个字重的二维编号系统，把"家族、字重、宽度"这三个维度工程化，是现代字体家族结构的祖先。一年之内，瑞士同时拿出两款决定性字体——这是一个时代的爆发。
|
||||
|
||||
---
|
||||
|
||||
# 08_grid_types
|
||||
|
||||
Müller-Brockmann 把网格归纳为四种基本类型。第一种是手稿网格，单栏满版，最古老，书籍正文和长篇散文几乎只能用这一种。第二种是列状网格，多栏并列，列宽、行高、间距全部可以计算，是期刊报纸出版业的语法基础。第三种是模数网格——横列乘以纵行的方格矩阵，海报和目录的利器，也是瑞士国际主义最具识别度的网格类型；右下角这个红色的小方块标记，就是我们今天讲座背景里那张封面图的逻辑。第四种是层级网格，不规则但内部有逻辑，复合排版、杂志专题、网页布局都用它。四种网格的共同前提是一句话：所有距离都是可计算的。
|
||||
|
||||
---
|
||||
|
||||
# 09_modular
|
||||
|
||||
这一页我们把抽象变具体。挑一个基本单位，比如 16 像素，然后所有其他尺寸都从它派生。安全边距 64 像素等于 4 个 16；列宽 264 像素是 16 的整数倍加八；列间距 32 像素等于 2 个 16；行高 96 像素等于 6 个 16；正文行高 27 像素是 1.5 倍正文字号；标题字号 32 像素等于 2 个 16。一旦这个基本单位确定下来，整个版面就成了一个可以计算的系统。右边这张图就是这场讲座所有内容页用的 4 列 6 行模数网格——红色高亮的两块是图像区，纯白色高亮的是文字区。设计师不再"画"版面，而是"建立系统并按系统落子"。
|
||||
|
||||
---
|
||||
|
||||
# 10_negative_space
|
||||
|
||||
这一页我想单独停下来，讲第七条原则——留白即结构。看看背景这张图，整张画面 92% 是纯白，只有一枚红圆和一根极短的黑色水平线。这两个元素之间什么也没有，但你会强烈感觉到张力——红圆在哪里，黑线为什么这么短，为什么是水平的。这种感觉就是留白在工作。留白不是设计师不知道放什么的剩余，留白是信息的载体。瑞士国际主义最深刻的一条是：当你减少元素，剩下的元素就被赋予了重量。The space between is the message。
|
||||
|
||||
---
|
||||
|
||||
# 11_outputs
|
||||
|
||||
讲完风格本身，看它的影响。从 1960 年代开始，瑞士理性被输出到四个方向。第一个是企业 VI——IBM 在 Paul Rand 主导下、Knoll、Lufthansa、Olivetti、Braun 这一系列大公司，把瑞士理性变成了一个叫"识别系统"的产业；Müller-Brockmann 本人从 1967 年起任 IBM 顾问。第二个是机场和地铁标识——纽约地铁 1966 年的 Unimark 设计手册、戴高乐机场的 Frutiger 字体、慕尼黑奥运会的 Otl Aicher，公共空间的可读性其实是瑞士理性的直接延伸。第三个是出版业，从瑞士本土的 Du 杂志到 Eye、Domus、Wallpaper，至今仍是文化出版的范本。第四个是设计教育，巴塞尔和苏黎世两条教学路径，通过耶鲁、RISD、Cooper Union 这些学校的瑞士背景教师，一代一代地把这套语法传下去。
|
||||
|
||||
---
|
||||
|
||||
# 12_digital_era
|
||||
|
||||
风格从纸面跳到屏幕只用了二十年，但语法没有变。2008 年，Nathan Smith 做了 960 Grid System，12 栏、960 像素宽，第一次把网格语法系统地搬上 Web。2011 年，Twitter 开源了 Bootstrap，同样的 12 栏结构，把模数网格民主化到全球前端开发者手里。2017 年，CSS Grid 在所有主流浏览器获得原生支持，模数网格第一次成为 Web 平台的基础设施。再到 2020 年代，Material Design、苹果的人机界面指南、Adobe Spectrum、Microsoft Fluent，大企业 VI 完成了在屏幕上的延续，从一套规则变成了组件库。一句话——从印刷海报到 CSS Grid，介质变了，但模数、列、留白、数学比例这四件套从未改变。
|
||||
|
||||
---
|
||||
|
||||
# 13_brands
|
||||
|
||||
把目光投向你今天每天都在用的产品，瑞士血脉到处都是。Apple 是最显眼的继承者，从乔布斯时代的 Keynote 到今天的人机界面指南，极简理性是产品语言的底色。Google 的 Material 设计系统用 8dp 网格加几何字体，把瑞士工程化到了移动端。Spotify 的版面用大字号加网格分块，把音乐变成了视觉故事，是杂志感的延续。Airbnb 的 DLS 设计语言系统用模数 grid 加极简识别，连摄影都走客观纪实路线。IBM 是直系血统——1967 年 Müller-Brockmann 本人就在那里任顾问，Paul Rand 同期接手识别。Lufthansa 的 VI 是 Otl Aicher 1962 年的作品，基本沿用至今六十多年。半个世纪过去，这套语法仍然是当代品牌的默认坐标系。
|
||||
|
||||
---
|
||||
|
||||
# 14_closing
|
||||
|
||||
让我用穆勒·布罗克曼最常被引用的一句话结束——网格不是限制，是自由的语法。The grid is not a constraint. It is a grammar of freedom. 如果你今天只带走一个东西，希望是这个：当设计师抱怨网格限制创意，他真正抱怨的是自己还没有学会怎么用它；当设计师真正掌握网格，他得到的不是束缚，而是一种可以承载几乎任何内容、任何风格、任何媒介的通用骨架。谢谢大家。
|
||||
@@ -0,0 +1,80 @@
|
||||
# Execution Lock
|
||||
|
||||
## canvas
|
||||
- viewBox: 0 0 1280 720
|
||||
- format: PPT 16:9
|
||||
|
||||
## colors
|
||||
- bg: #FFFFFF
|
||||
- secondary_bg: #F4F4F4
|
||||
- primary: #1A1A1A
|
||||
- accent: #D9251D
|
||||
- secondary_accent: #1A4FA0
|
||||
- text: #1A1A1A
|
||||
- text_secondary: #666666
|
||||
- text_tertiary: #999999
|
||||
- border: #E8E8E8
|
||||
- image_rendering: minimalist-swiss
|
||||
- image_palette: mono-ink
|
||||
|
||||
## typography
|
||||
- font_family: Arial, "Microsoft YaHei", sans-serif
|
||||
- title_family: "Arial Black", "Microsoft YaHei", sans-serif
|
||||
- body_family: Arial, "Microsoft YaHei", sans-serif
|
||||
- code_family: Consolas, "Courier New", monospace
|
||||
- body: 18
|
||||
- title: 32
|
||||
- subtitle: 22
|
||||
- annotation: 13
|
||||
- cover_title: 84
|
||||
- hero_number: 36
|
||||
- display_xl: 92
|
||||
- specimen: 240
|
||||
|
||||
## icons
|
||||
- library: tabler-outline
|
||||
- stroke_width: 1.5
|
||||
- brand_library: simple-icons
|
||||
- inventory: blockquote, grid-3x3
|
||||
|
||||
## images
|
||||
- cover_bg: images/cover_bg.png
|
||||
- negative_space: images/negative_space.png
|
||||
- closing_grid: images/closing_grid.png
|
||||
|
||||
## page_rhythm
|
||||
- P01: anchor
|
||||
- P02: breathing
|
||||
- P03: dense
|
||||
- P04: dense
|
||||
- P05: dense
|
||||
- P06: dense
|
||||
- P07: dense
|
||||
- P08: dense
|
||||
- P09: anchor
|
||||
- P10: breathing
|
||||
- P11: dense
|
||||
- P12: dense
|
||||
- P13: dense
|
||||
- P14: breathing
|
||||
|
||||
## page_charts
|
||||
- P03: timeline
|
||||
- P04: vertical_list
|
||||
- P05: team_roster
|
||||
- P06: timeline
|
||||
- P07: comparison_columns
|
||||
- P08: quadrant_text_bullets
|
||||
- P11: icon_grid
|
||||
- P12: numbered_steps
|
||||
- P13: icon_grid
|
||||
|
||||
## forbidden
|
||||
- Mixing icon libraries
|
||||
- rgba()
|
||||
- `<style>`, `class`, `<foreignObject>`, `textPath`, `@font-face`, `<animate*>`, `<script>`, `<iframe>`, `<symbol>`+`<use>`
|
||||
- `<g opacity>` (set opacity on each child element individually)
|
||||
- HTML named entities in text — write as raw Unicode; XML reserved chars must be escaped as `& < > " '`
|
||||
- Rounded corners (rx > 0) — except inside `simple-icons` brand glyphs
|
||||
- Linear/radial gradients — pure flat color only
|
||||
- Drop shadows / filter effects
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 550 KiB |
@@ -0,0 +1,28 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="page-header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 02</text>
|
||||
</g>
|
||||
|
||||
<g id="quote-mark">
|
||||
<text x="120" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="240" font-weight="900" fill="#D9251D" opacity="0.92">«</text>
|
||||
</g>
|
||||
|
||||
<g id="quote-body">
|
||||
<text font-size="32" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="320" y="240">The grid system is an aid,</text><text font-size="32" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="320" y="286">not a guarantee.</text><text font-size="22" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="320" y="370">It permits a number of possible uses, and each</text><text font-size="22" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="320" y="400">designer can look for a solution appropriate to</text><text font-size="22" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="320" y="430">his personal style. But one must learn how to</text><text font-size="22" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="320" y="460">use the grid — it is an art that requires practice.</text></g>
|
||||
|
||||
<g id="quote-attribution">
|
||||
<line x1="320" y1="540" x2="380" y2="540" stroke="#1A1A1A" stroke-width="2" />
|
||||
<text x="320" y="572" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">JOSEF MÜLLER-BROCKMANN</text>
|
||||
<text x="320" y="596" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">Grid Systems in Graphic Design · 1981</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">02 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,66 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 03</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">双源头 · 1896 → 1957</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">THE SIXTY YEARS THAT MADE SWISS DESIGN POSSIBLE</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
<g id="timeline-track">
|
||||
|
||||
<line x1="130" y1="300" x2="1200" y2="300" stroke="#1A1A1A" stroke-width="2" />
|
||||
<line x1="1200" y1="300" x2="1228" y2="300" stroke="#1A1A1A" stroke-width="2" />
|
||||
<polygon points="1228,300 1216,294 1216,306" fill="#1A1A1A" />
|
||||
</g>
|
||||
|
||||
<g id="node-1896">
|
||||
<line x1="156" y1="240" x2="156" y2="300" stroke="#E8E8E8" stroke-width="1" />
|
||||
<circle cx="156" cy="300" r="8" fill="#1A1A1A" />
|
||||
<text x="156" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#1A1A1A" text-anchor="middle">1896</text>
|
||||
<text x="156" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Akzidenz-Grotesk</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="156" y="384">柏林 Berthold</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="156" y="402">铸字行发行</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="156" y="420">现代意义的</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="156" y="438">第一款无衬线</text></g>
|
||||
|
||||
<g id="node-1908">
|
||||
<line x1="386" y1="240" x2="386" y2="300" stroke="#E8E8E8" stroke-width="1" />
|
||||
<circle cx="386" cy="300" r="8" fill="#1A1A1A" />
|
||||
<text x="386" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#1A1A1A" text-anchor="middle">1908</text>
|
||||
<text x="386" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Basel School</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="386" y="384">巴塞尔设计学院</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="386" y="402">完成改革</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="386" y="420">奠定教学体系</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="386" y="438">理性传统建立</text></g>
|
||||
|
||||
<g id="node-1918">
|
||||
<line x1="616" y1="240" x2="616" y2="300" stroke="#E8E8E8" stroke-width="1" />
|
||||
<circle cx="616" cy="300" r="8" fill="#1A1A1A" />
|
||||
<text x="616" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#1A1A1A" text-anchor="middle">1918</text>
|
||||
<text x="616" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Ernst Keller</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="616" y="384">入苏黎世</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="616" y="402">应用艺术学院</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="616" y="420">"形式跟随内容"</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="616" y="438">教学原则成型</text></g>
|
||||
|
||||
<g id="node-1936">
|
||||
<line x1="846" y1="240" x2="846" y2="300" stroke="#E8E8E8" stroke-width="1" />
|
||||
<circle cx="846" cy="300" r="8" fill="#1A1A1A" />
|
||||
<text x="846" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#1A1A1A" text-anchor="middle">1936</text>
|
||||
<text x="846" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Müller-Brockmann</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="846" y="384">22 岁</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="846" y="402">在苏黎世</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="846" y="420">开设独立工作室</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="846" y="438">新生代登场</text></g>
|
||||
|
||||
<g id="node-1957">
|
||||
<line x1="1076" y1="240" x2="1076" y2="300" stroke="#E8E8E8" stroke-width="1" />
|
||||
<circle cx="1076" cy="300" r="14" fill="#D9251D" />
|
||||
<text x="1076" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#D9251D" text-anchor="middle">1957</text>
|
||||
<text x="1076" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Helvetica + Univers</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="1076" y="384">同年问世</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="1076" y="402">瑞士理性</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="1076" y="420">凝结为字体</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="1076" y="438">输出全球</text></g>
|
||||
|
||||
<g id="conclusion">
|
||||
<line x1="64" y1="540" x2="64" y2="600" stroke="#D9251D" stroke-width="3" />
|
||||
<text x="92" y="568" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">理性主义不是凭空而至</text>
|
||||
<text x="92" y="596" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">而是来自<tspan font-weight="700" fill="#1A1A1A">字体 · 学校 · 教学</tspan>三条线索半个世纪的累积。</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">03 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
@@ -0,0 +1,77 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 04</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">八条核心原则</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">EIGHT PRINCIPLES OF SWISS DESIGN</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
|
||||
|
||||
|
||||
<g id="principle-1">
|
||||
<text x="64" y="244" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">01</text>
|
||||
<line x1="64" y1="276" x2="280" y2="276" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="64" y="302" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">客观先于表达</text>
|
||||
<text x="64" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">OBJECTIVITY OVER EXPRESSION</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="354">信息传达高于</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="372">设计师个人情绪。</text></g>
|
||||
|
||||
<g id="principle-2">
|
||||
<text x="368" y="244" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">02</text>
|
||||
<line x1="368" y1="276" x2="584" y2="276" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="368" y="302" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">数学网格为骨架</text>
|
||||
<text x="368" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">MATHEMATICAL GRID</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="368" y="354">列、行、间距、模数</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="368" y="372">皆从基本单位派生。</text></g>
|
||||
|
||||
<g id="principle-3">
|
||||
<text x="672" y="244" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">03</text>
|
||||
<line x1="672" y1="276" x2="888" y2="276" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="672" y="302" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">非对称构图</text>
|
||||
<text x="672" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">ASYMMETRIC LAYOUT</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="672" y="354">拒绝古典对称</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="672" y="372">带来的中心权威。</text></g>
|
||||
|
||||
<g id="principle-4">
|
||||
<text x="976" y="244" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">04</text>
|
||||
<line x1="976" y1="276" x2="1192" y2="276" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="976" y="302" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">无衬线字体</text>
|
||||
<text x="976" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">SANS-SERIF TYPOGRAPHY</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="976" y="354">Akzidenz · Helvetica</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="976" y="372">Univers 三足鼎立。</text></g>
|
||||
|
||||
<g id="principle-5">
|
||||
<text x="64" y="484" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">05</text>
|
||||
<line x1="64" y1="516" x2="280" y2="516" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="64" y="542" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">齐左不齐右</text>
|
||||
<text x="64" y="564" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">FLUSH-LEFT RAGGED-RIGHT</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="594">字距均匀</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="612">阅读节奏稳定。</text></g>
|
||||
|
||||
<g id="principle-6">
|
||||
<text x="368" y="484" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">06</text>
|
||||
<line x1="368" y1="516" x2="584" y2="516" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="368" y="542" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">客观摄影</text>
|
||||
<text x="368" y="564" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">OBJECTIVE PHOTOGRAPHY</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="368" y="594">取代装饰性插画</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="368" y="612">现代摄影登场。</text></g>
|
||||
|
||||
<g id="principle-7">
|
||||
<text x="672" y="484" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">07</text>
|
||||
<line x1="672" y1="516" x2="888" y2="516" stroke="#D9251D" stroke-width="2" />
|
||||
<text x="672" y="542" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#D9251D">留白是结构</text>
|
||||
<text x="672" y="564" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">NEGATIVE SPACE AS STRUCTURE</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="672" y="594">空白是信息的载体</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="672" y="612">而非剩余。</text></g>
|
||||
|
||||
<g id="principle-8">
|
||||
<text x="976" y="484" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">08</text>
|
||||
<line x1="976" y1="516" x2="1192" y2="516" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="976" y="542" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">可重复可规模化</text>
|
||||
<text x="976" y="564" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">REPRODUCIBLE AT SCALE</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="976" y="594">跨语言、跨媒介</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="976" y="612">跨规模复用。</text></g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">04 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.0 KiB |
@@ -0,0 +1,76 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 05</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">八位塑造者</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">EIGHT DESIGNERS WHO MADE THE SWISS STYLE</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
|
||||
|
||||
<g id="figure-keller">
|
||||
<text x="64" y="236" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">01</text>
|
||||
<text x="64" y="270" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Ernst Keller</text>
|
||||
<text x="64" y="290" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1891 — 1968</text>
|
||||
<line x1="64" y1="306" x2="120" y2="306" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="336">苏黎世应用艺术学院</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="356">1918 起任教</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="376">奠定瑞士学派</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="396">"形式跟随内容"原则</text></g>
|
||||
|
||||
<g id="figure-ballmer">
|
||||
<text x="368" y="236" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">02</text>
|
||||
<text x="368" y="270" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Théo Ballmer</text>
|
||||
<text x="368" y="290" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1902 — 1965</text>
|
||||
<line x1="368" y1="306" x2="424" y2="306" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="336">网格早期实验者</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="356">把 De Stijl 几何</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="376">引入海报排版</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="396">桥梁式人物</text></g>
|
||||
|
||||
<g id="figure-bill">
|
||||
<text x="672" y="236" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">03</text>
|
||||
<text x="672" y="270" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Max Bill</text>
|
||||
<text x="672" y="290" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1908 — 1994</text>
|
||||
<line x1="672" y1="306" x2="728" y2="306" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="336">包豪斯学生</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="356">乌尔姆设计学院</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="376">创校校长</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="396">理性延伸至产品</text></g>
|
||||
|
||||
<g id="figure-ruder">
|
||||
<text x="976" y="236" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">04</text>
|
||||
<text x="976" y="270" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Emil Ruder</text>
|
||||
<text x="976" y="290" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1914 — 1970</text>
|
||||
<line x1="976" y1="306" x2="1032" y2="306" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="336">巴塞尔学派核心</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="356">著《Typographie》</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="376">1967 至今为</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="396">字体设计圣经</text></g>
|
||||
|
||||
<g id="figure-hofmann">
|
||||
<text x="64" y="476" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">05</text>
|
||||
<text x="64" y="510" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Armin Hofmann</text>
|
||||
<text x="64" y="530" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1920 — 2020</text>
|
||||
<line x1="64" y1="546" x2="120" y2="546" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="576">巴塞尔学派核心</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="596">海报与教学</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="616">的标志性人物</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="636">影响延续至耶鲁</text></g>
|
||||
|
||||
<g id="figure-brockmann">
|
||||
<text x="368" y="476" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">06</text>
|
||||
<text x="368" y="510" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#D9251D">Müller-Brockmann</text>
|
||||
<text x="368" y="530" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1914 — 1996</text>
|
||||
<line x1="368" y1="546" x2="424" y2="546" stroke="#D9251D" stroke-width="2" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="576">苏黎世学派核心</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="596">《Grid Systems in</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="616">Graphic Design》作者</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="636">本讲下页详述</text></g>
|
||||
|
||||
<g id="figure-miedinger">
|
||||
<text x="672" y="476" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">07</text>
|
||||
<text x="672" y="510" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Max Miedinger</text>
|
||||
<text x="672" y="530" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1910 — 1980</text>
|
||||
<line x1="672" y1="546" x2="728" y2="546" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="576">1957 年</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="596">与 Hoffmann 合作</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="616">设计 Helvetica</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="636">命名取自瑞士</text></g>
|
||||
|
||||
<g id="figure-frutiger">
|
||||
<text x="976" y="476" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">08</text>
|
||||
<text x="976" y="510" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Adrian Frutiger</text>
|
||||
<text x="976" y="530" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1928 — 2015</text>
|
||||
<line x1="976" y1="546" x2="1032" y2="546" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="576">同年 1957</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="596">设计 Univers</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="616">21 字重</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="636">首次坐标系统化</text></g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">05 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.8 KiB |
@@ -0,0 +1,79 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 06</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">Josef Müller-Brockmann</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">A LIFE IN GRID · 1914 — 1996 · SEVEN MOMENTS</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
<g id="big-name">
|
||||
<text x="64" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="92" font-weight="900" fill="#1A1A1A" letter-spacing="-2">JMB</text>
|
||||
<text x="64" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">JOSEF MÜLLER-BROCKMANN</text>
|
||||
<line x1="64" y1="346" x2="220" y2="346" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text font-size="14" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="378">瑞士平面设计师 · 教育家</text><text font-size="14" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="400">国际主义风格</text><text font-size="14" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="422">最有代表性的实践者与理论家</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="500">生于 Rapperswil</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="520">逝于 Unterengstringen</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="540">享年 82 岁</text></g>
|
||||
|
||||
|
||||
<g id="timeline-track">
|
||||
|
||||
<line x1="480" y1="200" x2="480" y2="640" stroke="#1A1A1A" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
<g id="event-1914">
|
||||
<circle cx="480" cy="216" r="6" fill="#1A1A1A" />
|
||||
<text x="430" y="222" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1914</text>
|
||||
<text x="510" y="218" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">生于瑞士拉珀斯维尔</text>
|
||||
<text x="510" y="240" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">距苏黎世 40 公里的小镇 · St. Gallen 州</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1936">
|
||||
<circle cx="480" cy="286" r="6" fill="#1A1A1A" />
|
||||
<text x="430" y="292" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1936</text>
|
||||
<text x="510" y="288" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">在苏黎世开设独立工作室</text>
|
||||
<text x="510" y="310" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">22 岁起步 · 涉足平面、展览、摄影三个方向</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1950">
|
||||
<circle cx="480" cy="356" r="10" fill="#D9251D" />
|
||||
<text x="430" y="362" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#D9251D" text-anchor="end">1950</text>
|
||||
<text x="510" y="358" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#D9251D">Tonhalle 音乐会海报系列开启</text>
|
||||
<text x="510" y="380" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">"Musica Viva" · 用圆 · 弧 · 线 · 矩形抽象表达音乐结构</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1957">
|
||||
<circle cx="480" cy="426" r="6" fill="#1A1A1A" />
|
||||
<text x="430" y="432" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1957</text>
|
||||
<text x="510" y="428" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">任苏黎世应用艺术学院教授</text>
|
||||
<text x="510" y="450" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">把瑞士理性带入下一代设计师的教学体系</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1958">
|
||||
<circle cx="480" cy="496" r="6" fill="#1A1A1A" />
|
||||
<text x="430" y="502" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1958</text>
|
||||
<text x="510" y="498" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">创办《Neue Grafik》期刊</text>
|
||||
<text x="510" y="520" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">三语并行 · 把瑞士理念输出到国际平面设计共同体</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1981">
|
||||
<circle cx="480" cy="566" r="10" fill="#D9251D" />
|
||||
<text x="430" y="572" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#D9251D" text-anchor="end">1981</text>
|
||||
<text x="510" y="568" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#D9251D">出版《Grid Systems in Graphic Design》</text>
|
||||
<text x="510" y="590" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">至今仍是设计教育最权威的网格手册 · 是本讲的底本</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1996">
|
||||
<circle cx="480" cy="636" r="6" fill="#1A1A1A" />
|
||||
<text x="430" y="642" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1996</text>
|
||||
<text x="510" y="638" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">在 Unterengstringen 逝世</text>
|
||||
<text x="510" y="660" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">8 月 30 日 · 享年 82 岁 · 影响持续至今</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">06 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.8 KiB |
@@ -0,0 +1,53 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 07</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">三款决定性字体</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">THREE TYPEFACES THAT WROTE THE SWISS STYLE</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
<g id="type-akzidenz">
|
||||
<line x1="64" y1="220" x2="404" y2="220" stroke="#1A1A1A" stroke-width="3" />
|
||||
<text x="64" y="252" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">CARD · 01</text>
|
||||
<text x="64" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Akzidenz-Grotesk</text>
|
||||
<text x="64" y="304" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">1896 · Berthold Type Foundry</text>
|
||||
<text x="64" y="480" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="168" font-weight="900" fill="#1A1A1A" letter-spacing="-2">Aa</text>
|
||||
<text x="64" y="500" font-family="Arial, sans-serif" font-size="10" fill="#999999" letter-spacing="2">EXTRA BOLD · 900</text>
|
||||
<line x1="64" y1="528" x2="120" y2="528" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="64" y="556" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">第一款现代意义的</text>
|
||||
<text x="64" y="578" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">商业无衬线字体</text>
|
||||
<text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="608">瑞士学派早期首选</text><text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="626">比 Helvetica 早 61 年问世</text><text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="644">奠定无衬线美学全部基调</text></g>
|
||||
|
||||
<g id="type-helvetica">
|
||||
<line x1="470" y1="220" x2="810" y2="220" stroke="#D9251D" stroke-width="3" />
|
||||
<text x="470" y="252" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">CARD · 02</text>
|
||||
<text x="470" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Helvetica</text>
|
||||
<text x="470" y="304" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">1957 · Miedinger + Hoffmann</text>
|
||||
<text x="470" y="480" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="168" font-weight="700" fill="#D9251D" letter-spacing="-1">Aa</text>
|
||||
<text x="470" y="500" font-family="Arial, sans-serif" font-size="10" fill="#999999" letter-spacing="2">BOLD · 700 · NEUTRAL</text>
|
||||
<line x1="470" y1="528" x2="526" y2="528" stroke="#D9251D" stroke-width="2" />
|
||||
<text x="470" y="556" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#D9251D">字面意思就是"瑞士"</text>
|
||||
<text x="470" y="578" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">中性 · 客观 · 可读至极</text>
|
||||
<text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="470" y="608">原名 Neue Haas Grotesk</text><text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="470" y="626">取自拉丁文 Helvetia(瑞士)</text><text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="470" y="644">20 世纪传播范围最广的字体</text></g>
|
||||
|
||||
<g id="type-univers">
|
||||
<line x1="876" y1="220" x2="1216" y2="220" stroke="#1A1A1A" stroke-width="3" />
|
||||
<text x="876" y="252" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">CARD · 03</text>
|
||||
<text x="876" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Univers</text>
|
||||
<text x="876" y="304" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">1957 · Adrian Frutiger</text>
|
||||
<text x="876" y="480" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="168" font-weight="400" fill="#1A1A1A" letter-spacing="1">Aa</text>
|
||||
<text x="876" y="500" font-family="Arial, sans-serif" font-size="10" fill="#999999" letter-spacing="2">REGULAR · 400 · LIGHT</text>
|
||||
<line x1="876" y1="528" x2="932" y2="528" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="876" y="556" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">21 字重的二维坐标</text>
|
||||
<text x="876" y="578" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">字体工程的开端</text>
|
||||
<text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="876" y="608">Univers 39 — 83 二维编号</text><text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="876" y="626">把"家族+字重+宽度"工程化</text><text font-size="12" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="876" y="644">现代字体家族结构的祖先</text></g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">07 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
@@ -0,0 +1,99 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 08</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">网格四种类型</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">FOUR GRID TYPES · MÜLLER-BROCKMANN, 1981</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
|
||||
<g id="axis-cross">
|
||||
<line x1="64" y1="430" x2="1216" y2="430" stroke="#E8E8E8" stroke-width="1" />
|
||||
<line x1="640" y1="200" x2="640" y2="660" stroke="#E8E8E8" stroke-width="1" />
|
||||
</g>
|
||||
|
||||
|
||||
<g id="q-manuscript">
|
||||
<text x="80" y="232" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">01 · 古典</text>
|
||||
<text x="80" y="266" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">手稿网格</text>
|
||||
<text x="80" y="288" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="1">MANUSCRIPT GRID</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="80" y="318">单栏满版 · 最古老的网格</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="80" y="338">书籍正文 · 长篇散文唯一选项</text><g id="schema-manuscript" transform="translate(440,222)">
|
||||
<rect x="0" y="0" width="160" height="180" fill="none" stroke="#1A1A1A" stroke-width="1" />
|
||||
<rect x="20" y="20" width="120" height="140" fill="#1A1A1A" fill-opacity="0.08" />
|
||||
<line x1="20" y1="40" x2="140" y2="40" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="20" y1="60" x2="140" y2="60" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="20" y1="80" x2="140" y2="80" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="20" y1="100" x2="140" y2="100" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="20" y1="120" x2="140" y2="120" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="20" y1="140" x2="120" y2="140" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="q-column">
|
||||
<text x="660" y="232" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">02 · 期刊</text>
|
||||
<text x="660" y="266" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">列状网格</text>
|
||||
<text x="660" y="288" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="1">COLUMN GRID</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="660" y="318">多栏并列 · 列宽行高皆可计算</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="660" y="338">期刊 · 报纸 · 出版业的语法基础</text><g id="schema-column" transform="translate(1020,222)">
|
||||
<rect x="0" y="0" width="160" height="180" fill="none" stroke="#1A1A1A" stroke-width="1" />
|
||||
<rect x="10" y="20" width="40" height="140" fill="#1A1A1A" fill-opacity="0.10" />
|
||||
<rect x="60" y="20" width="40" height="140" fill="#1A1A1A" fill-opacity="0.10" />
|
||||
<rect x="110" y="20" width="40" height="140" fill="#1A1A1A" fill-opacity="0.10" />
|
||||
<line x1="10" y1="40" x2="50" y2="40" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="10" y1="60" x2="50" y2="60" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="10" y1="80" x2="50" y2="80" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="60" y1="40" x2="100" y2="40" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="60" y1="60" x2="100" y2="60" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="60" y1="80" x2="100" y2="80" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="110" y1="40" x2="150" y2="40" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="110" y1="60" x2="150" y2="60" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
<line x1="110" y1="80" x2="150" y2="80" stroke="#1A1A1A" stroke-width="0.5" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="q-modular">
|
||||
<text x="80" y="462" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">03 · 海报</text>
|
||||
<text x="80" y="496" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#D9251D">模数网格</text>
|
||||
<text x="80" y="518" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="1">MODULAR GRID</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="80" y="548">横列 × 纵行的方格矩阵</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="80" y="568">海报 · 目录 · 平面设计的利器</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="80" y="588">瑞士国际主义最具识别度的网格类型</text><g id="schema-modular" transform="translate(440,452)">
|
||||
<rect x="0" y="0" width="160" height="180" fill="none" stroke="#D9251D" stroke-width="1" />
|
||||
<line x1="40" y1="0" x2="40" y2="180" stroke="#D9251D" stroke-width="0.5" />
|
||||
<line x1="80" y1="0" x2="80" y2="180" stroke="#D9251D" stroke-width="0.5" />
|
||||
<line x1="120" y1="0" x2="120" y2="180" stroke="#D9251D" stroke-width="0.5" />
|
||||
<line x1="0" y1="36" x2="160" y2="36" stroke="#D9251D" stroke-width="0.5" />
|
||||
<line x1="0" y1="72" x2="160" y2="72" stroke="#D9251D" stroke-width="0.5" />
|
||||
<line x1="0" y1="108" x2="160" y2="108" stroke="#D9251D" stroke-width="0.5" />
|
||||
<line x1="0" y1="144" x2="160" y2="144" stroke="#D9251D" stroke-width="0.5" />
|
||||
<rect x="0" y="0" width="80" height="36" fill="#D9251D" fill-opacity="0.18" />
|
||||
<rect x="40" y="72" width="40" height="72" fill="#1A1A1A" fill-opacity="0.85" />
|
||||
<rect x="120" y="108" width="40" height="36" fill="#1A1A1A" fill-opacity="0.40" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="q-hierarchical">
|
||||
<text x="660" y="462" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">04 · 复合</text>
|
||||
<text x="660" y="496" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">层级网格</text>
|
||||
<text x="660" y="518" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="1">HIERARCHICAL GRID</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="660" y="548">不规则但内部有逻辑</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="660" y="568">复合排版 · 杂志专题 · 网页布局</text><g id="schema-hierarchical" transform="translate(1020,452)">
|
||||
<rect x="0" y="0" width="160" height="180" fill="none" stroke="#1A1A1A" stroke-width="1" />
|
||||
<rect x="0" y="0" width="160" height="40" fill="#1A1A1A" fill-opacity="0.85" />
|
||||
<rect x="0" y="50" width="100" height="80" fill="#1A1A1A" fill-opacity="0.15" />
|
||||
<rect x="110" y="50" width="50" height="40" fill="#1A1A1A" fill-opacity="0.30" />
|
||||
<rect x="110" y="100" width="50" height="30" fill="#1A1A1A" fill-opacity="0.15" />
|
||||
<rect x="0" y="140" width="60" height="40" fill="#1A1A1A" fill-opacity="0.30" />
|
||||
<rect x="70" y="140" width="90" height="40" fill="#1A1A1A" fill-opacity="0.15" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">08 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.2 KiB |
@@ -0,0 +1,108 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 09</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">一切都是可计算的</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">EVERYTHING DERIVES FROM THE BASE UNIT</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
|
||||
<g id="spec-list">
|
||||
<text x="64" y="232" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">BASE UNIT</text>
|
||||
<text x="64" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="56" font-weight="900" fill="#D9251D">16px</text>
|
||||
<text x="64" y="306" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">所有距离的最小公因子</text>
|
||||
|
||||
<line x1="64" y1="340" x2="380" y2="340" stroke="#1A1A1A" stroke-width="1" />
|
||||
|
||||
<text x="64" y="376" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">DERIVED FROM 16</text>
|
||||
|
||||
<text font-size="15" font-family="Consolas, "Courier New", monospace" fill="#1A1A1A" x="64" y="412"><tspan>safe margin <tspan font-weight="700" fill="#1A1A1A">64 px</tspan> = 4 × 16</tspan>
|
||||
</text><text font-size="15" font-family="Consolas, "Courier New", monospace" fill="#1A1A1A" x="64" y="440"><tspan>column width <tspan font-weight="700" fill="#1A1A1A">264 px</tspan> = 16 × 16 + 8</tspan>
|
||||
</text><text font-size="15" font-family="Consolas, "Courier New", monospace" fill="#1A1A1A" x="64" y="468"><tspan>column gap <tspan font-weight="700" fill="#1A1A1A">32 px</tspan> = 2 × 16</tspan>
|
||||
</text><text font-size="15" font-family="Consolas, "Courier New", monospace" fill="#1A1A1A" x="64" y="496"><tspan>row height <tspan font-weight="700" fill="#1A1A1A">96 px</tspan> = 6 × 16</tspan>
|
||||
</text><text font-size="15" font-family="Consolas, "Courier New", monospace" fill="#1A1A1A" x="64" y="524"><tspan>body line-height <tspan font-weight="700" fill="#1A1A1A">27 px</tspan> = 1.5 × 18</tspan>
|
||||
</text><text font-size="15" font-family="Consolas, "Courier New", monospace" fill="#1A1A1A" x="64" y="552"><tspan>title size <tspan font-weight="700" fill="#1A1A1A">32 px</tspan> = 2 × 16</tspan>
|
||||
</text><line x1="64" y1="604" x2="380" y2="604" stroke="#D9251D" stroke-width="2" />
|
||||
<text x="64" y="636" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">设计师不再"画"版面</text>
|
||||
<text x="64" y="658" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">而是"建立系统并按系统落子"</text>
|
||||
</g>
|
||||
|
||||
|
||||
|
||||
<g id="modular-grid">
|
||||
|
||||
|
||||
|
||||
|
||||
<g id="cells">
|
||||
|
||||
<rect x="480" y="210" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="664" y="210" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="848" y="210" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="1032" y="210" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
|
||||
<rect x="480" y="282" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="664" y="282" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="848" y="282" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="1032" y="282" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
|
||||
<rect x="480" y="354" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="664" y="354" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="848" y="354" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="1032" y="354" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
|
||||
<rect x="480" y="426" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="664" y="426" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="848" y="426" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="1032" y="426" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
|
||||
<rect x="480" y="498" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="664" y="498" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="848" y="498" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="1032" y="498" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
|
||||
<rect x="480" y="570" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="664" y="570" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="848" y="570" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
<rect x="1032" y="570" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75" />
|
||||
</g>
|
||||
|
||||
|
||||
<g id="highlight-region">
|
||||
<rect x="664" y="282" width="352" height="136" fill="#D9251D" fill-opacity="0.10" stroke="#D9251D" stroke-width="2" />
|
||||
<text x="840" y="357" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">IMAGE 2×2</text>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="highlight-text-region">
|
||||
<rect x="480" y="426" width="168" height="136" fill="#1A1A1A" fill-opacity="0.05" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="564" y="501" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#1A1A1A" text-anchor="middle" letter-spacing="2">TEXT 1×2</text>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="highlight-header-band">
|
||||
<rect x="480" y="210" width="720" height="64" fill="none" stroke="#1A1A1A" stroke-width="2" />
|
||||
<text x="840" y="247" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#1A1A1A" text-anchor="middle" letter-spacing="2">HEADLINE 4×1</text>
|
||||
</g>
|
||||
|
||||
|
||||
<line x1="480" y1="188" x2="648" y2="188" stroke="#666666" stroke-width="0.5" />
|
||||
<line x1="664" y1="188" x2="832" y2="188" stroke="#666666" stroke-width="0.5" />
|
||||
<line x1="848" y1="188" x2="1016" y2="188" stroke="#666666" stroke-width="0.5" />
|
||||
<line x1="1032" y1="188" x2="1200" y2="188" stroke="#666666" stroke-width="0.5" />
|
||||
<text x="564" y="184" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="10" fill="#666666" text-anchor="middle">264</text>
|
||||
<text x="748" y="184" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="10" fill="#666666" text-anchor="middle">264</text>
|
||||
<text x="932" y="184" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="10" fill="#666666" text-anchor="middle">264</text>
|
||||
<text x="1116" y="184" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="10" fill="#666666" text-anchor="middle">264</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">09 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.9 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 474 KiB |
@@ -0,0 +1,56 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 11</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">输出到现代世界</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">1960s → · FROM SWITZERLAND TO THE GLOBAL DESIGN SYSTEM</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
|
||||
|
||||
<g id="domain-corporate">
|
||||
<text x="64" y="240" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">01</text>
|
||||
<line x1="64" y1="260" x2="280" y2="260" stroke="#1A1A1A" stroke-width="2" />
|
||||
<text x="64" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">企业 VI</text>
|
||||
<text x="64" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">CORPORATE IDENTITY</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="358">把瑞士理性变成"识别系统"</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="64" y="380">产业的开端</text><line x1="64" y1="430" x2="120" y2="430" stroke="#E8E8E8" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="460">IBM (Paul Rand)</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="482">Knoll · Lufthansa</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="64" y="504">Olivetti · Braun</text><text x="64" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="1">JMB 任 IBM 顾问 · 1967 起</text>
|
||||
</g>
|
||||
|
||||
<g id="domain-signage">
|
||||
<text x="368" y="240" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">02</text>
|
||||
<line x1="368" y1="260" x2="584" y2="260" stroke="#1A1A1A" stroke-width="2" />
|
||||
<text x="368" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">机场 / 地铁标识</text>
|
||||
<text x="368" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">SIGNAGE SYSTEMS</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="358">公共空间的可读性</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="368" y="380">是瑞士理性的延伸</text><line x1="368" y1="430" x2="424" y2="430" stroke="#E8E8E8" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="368" y="460">纽约地铁 Unimark</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="368" y="482">巴黎机场 Frutiger 字体</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="368" y="504">慕尼黑 Otl Aicher</text><text x="368" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="1">Vignelli 1966 纽约地铁手册</text>
|
||||
</g>
|
||||
|
||||
<g id="domain-publishing">
|
||||
<text x="672" y="240" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">03</text>
|
||||
<line x1="672" y1="260" x2="888" y2="260" stroke="#1A1A1A" stroke-width="2" />
|
||||
<text x="672" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">出版业</text>
|
||||
<text x="672" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">EDITORIAL DESIGN</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="358">期刊 · 杂志 · 文化出版</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="672" y="380">的版面语法</text><line x1="672" y1="430" x2="728" y2="430" stroke="#E8E8E8" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="672" y="460">Du 杂志(瑞士)</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="672" y="482">Eye Magazine</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="672" y="504">Domus · Wallpaper*</text><text x="672" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="1">至今仍是文化出版的范本</text>
|
||||
</g>
|
||||
|
||||
<g id="domain-education">
|
||||
<text x="976" y="240" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">04</text>
|
||||
<line x1="976" y1="260" x2="1192" y2="260" stroke="#1A1A1A" stroke-width="2" />
|
||||
<text x="976" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">设计教育</text>
|
||||
<text x="976" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">DESIGN EDUCATION</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="358">巴塞尔 + 苏黎世</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#1A1A1A" x="976" y="380">两条教学路径全球化</text><line x1="976" y1="430" x2="1032" y2="430" stroke="#E8E8E8" stroke-width="1" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="976" y="460">Yale (Hofmann)</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="976" y="482">RISD · Cooper Union</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="976" y="504">东京 GS 学派</text><text x="976" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="1">学生输出半世纪不绝</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">11 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
@@ -0,0 +1,60 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 12</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">数字时代的延续</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">THE GRID ON SCREEN · 2008 — TODAY</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
|
||||
<g id="track">
|
||||
|
||||
<line x1="130" y1="340" x2="1216" y2="340" stroke="#1A1A1A" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
|
||||
|
||||
<g id="stage-1">
|
||||
<text x="172" y="232" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="64" font-weight="900" fill="#E8E8E8">01</text>
|
||||
<text x="200" y="276" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">2008</text>
|
||||
<text x="200" y="312" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A" text-anchor="middle">960 Grid System</text>
|
||||
<circle cx="200" cy="340" r="8" fill="#1A1A1A" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="200" y="394">12 栏 · 960px 宽</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="200" y="414">第一次把网格语法</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="200" y="434">系统搬上 Web</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="200" y="454">Nathan Smith 出品</text></g>
|
||||
|
||||
<g id="stage-2">
|
||||
<text x="452" y="232" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="64" font-weight="900" fill="#E8E8E8">02</text>
|
||||
<text x="480" y="276" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">2011</text>
|
||||
<text x="480" y="312" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A" text-anchor="middle">Bootstrap 12 栏</text>
|
||||
<circle cx="480" cy="340" r="8" fill="#1A1A1A" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="480" y="394">Twitter 开源</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="480" y="414">把模数网格</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="480" y="434">民主化到全球</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="480" y="454">前端开发标配</text></g>
|
||||
|
||||
<g id="stage-3">
|
||||
<text x="732" y="232" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="64" font-weight="900" fill="#E8E8E8">03</text>
|
||||
<text x="760" y="276" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">2017</text>
|
||||
<text x="760" y="312" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A" text-anchor="middle">CSS Grid</text>
|
||||
<circle cx="760" cy="340" r="8" fill="#1A1A1A" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="760" y="394">浏览器原生网格</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="760" y="414">所有主流浏览器支持</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="760" y="434">模数网格首次成为</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="760" y="454">Web 平台基础设施</text></g>
|
||||
|
||||
<g id="stage-4">
|
||||
<text x="1012" y="232" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="64" font-weight="900" fill="#D9251D">04</text>
|
||||
<text x="1040" y="276" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">2020s</text>
|
||||
<text x="1040" y="312" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#D9251D" text-anchor="middle">Design Systems</text>
|
||||
<circle cx="1040" cy="340" r="14" fill="#D9251D" />
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="1040" y="394">Material · HIG · FAST</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="1040" y="414">大企业 VI</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="1040" y="434">在屏幕上的延续</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" text-anchor="middle" x="1040" y="454">从规则到组件库</text></g>
|
||||
|
||||
<g id="conclusion">
|
||||
<line x1="64" y1="580" x2="64" y2="640" stroke="#D9251D" stroke-width="3" />
|
||||
<text x="92" y="606" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">同一套语法 · 1981 → 2026</text>
|
||||
<text x="92" y="636" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">从印刷海报到 CSS Grid · 介质变换但<tspan font-weight="700" fill="#1A1A1A">模数 · 列 · 留白 · 数学比例</tspan>四件套从未改变。</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">12 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
@@ -0,0 +1,81 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 13</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">当代品牌的瑞士血脉</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">SIX BRANDS WHERE THE SWISS GRID STILL LIVES</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
|
||||
|
||||
|
||||
<g id="brand-apple">
|
||||
<line x1="96" y1="240" x2="384" y2="240" stroke="#1A1A1A" stroke-width="1" />
|
||||
|
||||
<g transform="translate(96.0, 266.0) scale(2.3333333333333335)" fill="#1A1A1A">
|
||||
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
|
||||
</g>
|
||||
<text x="168" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Apple</text>
|
||||
<text x="168" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">CUPERTINO · 1976</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="96" y="370">极简理性的产品语言</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="96" y="390">从早期 Keynote 到 HIG</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="96" y="410">瑞士血脉最显眼的继承者</text></g>
|
||||
|
||||
<g id="brand-google">
|
||||
<line x1="528" y1="240" x2="816" y2="240" stroke="#1A1A1A" stroke-width="1" />
|
||||
|
||||
<g transform="translate(528.0, 266.0) scale(2.3333333333333335)" fill="#1A1A1A">
|
||||
<path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
|
||||
</g>
|
||||
<text x="600" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Google</text>
|
||||
<text x="600" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">MOUNTAIN VIEW · 1998</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="528" y="370">Material 设计系统</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="528" y="390">8dp 网格 + 几何字体</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="528" y="410">把瑞士工程化到移动端</text></g>
|
||||
|
||||
<g id="brand-spotify">
|
||||
<line x1="960" y1="240" x2="1216" y2="240" stroke="#1A1A1A" stroke-width="1" />
|
||||
|
||||
<g transform="translate(960.0, 266.0) scale(2.3333333333333335)" fill="#1A1A1A">
|
||||
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" />
|
||||
</g>
|
||||
<text x="1032" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Spotify</text>
|
||||
<text x="1032" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">STOCKHOLM · 2006</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="960" y="370">杂志感的版面语法</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="960" y="390">大字号 · 网格分块</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="960" y="410">把音乐变成视觉故事</text></g>
|
||||
|
||||
<g id="brand-airbnb">
|
||||
<line x1="96" y1="480" x2="384" y2="480" stroke="#1A1A1A" stroke-width="1" />
|
||||
|
||||
<g transform="translate(96.0, 506.0) scale(2.3333333333333335)" fill="#1A1A1A">
|
||||
<path d="M12.001 18.275c-1.353-1.697-2.148-3.184-2.413-4.457-.263-1.027-.16-1.848.291-2.465.477-.71 1.188-1.056 2.121-1.056s1.643.345 2.12 1.063c.446.61.558 1.432.286 2.465-.291 1.298-1.085 2.785-2.412 4.458zm9.601 1.14c-.185 1.246-1.034 2.28-2.2 2.783-2.253.98-4.483-.583-6.392-2.704 3.157-3.951 3.74-7.028 2.385-9.018-.795-1.14-1.933-1.695-3.394-1.695-2.944 0-4.563 2.49-3.927 5.382.37 1.565 1.352 3.343 2.917 5.332-.98 1.085-1.91 1.856-2.732 2.333-.636.344-1.245.558-1.828.609-2.679.399-4.778-2.2-3.825-4.88.132-.345.395-.98.845-1.961l.025-.053c1.464-3.178 3.242-6.79 5.285-10.795l.053-.132.58-1.116c.45-.822.635-1.19 1.351-1.643.346-.21.77-.315 1.246-.315.954 0 1.698.558 2.016 1.007.158.239.345.557.582.953l.558 1.089.08.159c2.041 4.004 3.821 7.608 5.279 10.794l.026.025.533 1.22.318.764c.243.613.294 1.222.213 1.858zm1.22-2.39c-.186-.583-.505-1.271-.9-2.094v-.03c-1.889-4.006-3.642-7.608-5.307-10.844l-.111-.163C15.317 1.461 14.468 0 12.001 0c-2.44 0-3.476 1.695-4.535 3.898l-.081.16c-1.669 3.236-3.421 6.843-5.303 10.847v.053l-.559 1.22c-.21.504-.317.768-.345.847C-.172 20.74 2.611 24 5.98 24c.027 0 .132 0 .265-.027h.372c1.75-.213 3.554-1.325 5.384-3.317 1.829 1.989 3.635 3.104 5.382 3.317h.372c.133.027.239.027.265.027 3.37.003 6.152-3.261 4.802-6.975z" />
|
||||
</g>
|
||||
<text x="168" y="536" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Airbnb</text>
|
||||
<text x="168" y="558" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">SAN FRANCISCO · 2008</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="96" y="610">DLS 设计语言系统</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="96" y="630">模数 grid + 极简识别</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="96" y="650">摄影也走客观纪实路线</text></g>
|
||||
|
||||
<g id="brand-ibm">
|
||||
<line x1="528" y1="480" x2="816" y2="480" stroke="#D9251D" stroke-width="2" />
|
||||
|
||||
<g transform="translate(528.0, 506.0) scale(2.3333333333333335)" fill="#D9251D">
|
||||
<path d="M23.544 15.993c.038 0 .06-.017.06-.053v-.036c0-.035-.022-.052-.06-.052h-.09v.14zm-.09.262h-.121v-.498h.225c.112 0 .169.066.169.157 0 .079-.036.129-.09.15l.111.19h-.133l-.092-.17h-.07zm.434-.222v-.062c0-.2-.157-.357-.363-.357a.355.355 0 00-.363.357v.062c0 .2.156.358.363.358a.355.355 0 00.363-.358zm-.838-.03c0-.28.212-.492.475-.492.264 0 .475.213.475.491 0 .279-.211.491-.475.491a.477.477 0 01-.475-.49zM16.21 8.13l-.216-.624h-3.56v.624zm.413 1.19l-.216-.623h-3.973v.624zm2.65 7.147h3.107v-.624h-3.108zm0-1.192h3.107v-.623h-3.108zm0-1.19h1.864v-.624h-1.865zm0-1.191h1.864v-.624h-1.865zm0-1.191h1.864v-.624h-3.555l-.175.504-.175-.504h-3.555v.624h1.865v-.574l.2.574h3.33l.2-.574zm1.864-1.815h-3.142l-.217.624h3.359zm-7.46 3.006h1.865v-.624h-1.865zm0 1.19h1.865v-.623h-1.865zm-1.243 1.191h3.108v-.623h-3.108zm0 1.192h3.108v-.624h-3.108zm6.386-8.961l-.216.624h3.776v-.624zm-.629 1.815h4.19v-.624h-3.974zm-4.514 1.19h3.359l-.216-.623h-3.143zm2.482 2.383h2.496l.218-.624h-2.932zm.417 1.19h1.662l.218-.623h-2.098zm.416 1.191h.83l.218-.623h-1.266zm.414 1.192l.217-.624h-.432zm-12.433-.006l4.578.006c.622 0 1.18-.237 1.602-.624h-6.18zm4.86-3v.624h2.092c0-.216-.03-.425-.083-.624zm-3.616.624h1.865v-.624H6.217zm3.617-3.573h2.008c.053-.199.083-.408.083-.624H9.834zm-3.617 0h1.865v-.624H6.217zM9.55 7.507H4.973v.624h6.18a2.36 2.36 0 00-1.602-.624zm2.056 1.191H4.973v.624h6.884a2.382 2.382 0 00-.25-.624zm-5.39 2.382v.624h4.87c.207-.176.382-.387.519-.624zm4.87 1.191h-4.87v.624h5.389a2.39 2.39 0 00-.519-.624zm-6.114 3.006h6.634c.11-.193.196-.402.25-.624H4.973zM0 8.13h4.352v-.624H0zm0 1.191h4.352v-.624H0zm1.243 1.191h1.865v-.624H1.243zm0 1.191h1.865v-.624H1.243zm0 1.19h1.865v-.623H1.243zm0 1.192h1.865v-.624H1.243zM0 15.276h4.352v-.623H0zm0 1.192h4.352v-.624H0Z" />
|
||||
</g>
|
||||
<text x="600" y="536" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#D9251D">IBM</text>
|
||||
<text x="600" y="558" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">ARMONK · 1911</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="528" y="610">JMB 1967 起任 IBM 顾问</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="528" y="630">Paul Rand 同期接手识别</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="528" y="650">直系瑞士血统案例</text></g>
|
||||
|
||||
<g id="brand-lufthansa">
|
||||
<line x1="960" y1="480" x2="1216" y2="480" stroke="#1A1A1A" stroke-width="1" />
|
||||
|
||||
<g transform="translate(960.0, 506.0) scale(2.3333333333333335)" fill="#1A1A1A">
|
||||
<path d="M24,12c0-6.648-5.352-12-12-12C5.376,0,0,5.352,0,12c0,6.624,5.376,12,12,12C18.648,24,24,18.624,24,12z M23.136,12c0,6.12-4.992,11.136-11.136,11.136C5.88,23.136,0.864,18.121,0.864,12C0.864,5.856,5.88,0.864,12,0.864 C18.144,0.864,23.136,5.856,23.136,12z M16.248,11.28c-0.264,0-0.6,0-1.032,0.024l0.312-0.528h0.504c1.8,0,3.144,0.096,4.368,0.312 l0.552-0.528c-1.368-0.24-3.024-0.384-4.704-0.384H15.84l0.264-0.504h0.456c1.752,0,3.336,0.144,4.872,0.432l0.576-0.552 c-1.728-0.336-3.576-0.503-5.568-0.503c-0.849,0.003-1.698,0.043-2.544,0.12c-0.96,2.063-2.496,3.264-4.224,3.24 C9,12.384,8.159,12.097,7.08,11.52l-1.008-0.576l0.312-0.288l2.328,1.008l0.504-0.384L4.512,9.144l-0.72,0.552L2.112,9l0.024,0.696 c2.256,1.032,3.192,1.608,5.568,3.312c3.096,2.208,5.856,3.408,9.696,4.176l1.008-0.96h-0.24c-2.544,0-4.824-0.84-6.144-2.256 c1.104-0.672,2.471-0.983,4.368-0.983c0.504,0,1.224,0.047,1.896,0.119l0.576-0.552c-0.9-0.11-1.805-0.166-2.712-0.168 c-0.609-0.001-1.217,0.023-1.824,0.072l0.432-0.528c0.511-0.03,1.024-0.046,1.536-0.048c1.272,0,2.112,0.048,3.072,0.192 l0.552-0.528C18.912,11.377,17.52,11.28,16.248,11.28z" />
|
||||
</g>
|
||||
<text x="1032" y="536" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Lufthansa</text>
|
||||
<text x="1032" y="558" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">COLOGNE · 1955</text>
|
||||
<text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="960" y="610">Otl Aicher 1962 VI</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="960" y="630">乌尔姆系统化设计标杆</text><text font-size="13" font-family="Arial, "Microsoft YaHei", sans-serif" fill="#666666" x="960" y="650">基本沿用至今 60 余年</text></g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">13 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 864 KiB |
@@ -0,0 +1,28 @@
|
||||
<?xml version='1.0' encoding='UTF-8'?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
<image href="../images/cover_bg.png" x="0" y="0" width="1280" height="720" preserveAspectRatio="xMidYMid slice" />
|
||||
</g>
|
||||
|
||||
<g id="cover-meta-top">
|
||||
<text x="64" y="84" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="2">A LECTURE · 2026</text>
|
||||
<line x1="64" y1="98" x2="180" y2="98" stroke="#1A1A1A" stroke-width="1" />
|
||||
</g>
|
||||
|
||||
<g id="cover-headline">
|
||||
<text x="64" y="500" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="84" font-weight="900" fill="#1A1A1A">网格系统</text>
|
||||
<text x="64" y="554" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="36" font-weight="900" fill="#1A1A1A">The Grid as a Way of Seeing</text>
|
||||
</g>
|
||||
|
||||
<g id="cover-tagline">
|
||||
<line x1="64" y1="596" x2="64" y2="640" stroke="#D9251D" stroke-width="3" />
|
||||
<text x="84" y="616" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#1A1A1A">Swiss International Typographic Style</text>
|
||||
<text x="84" y="638" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">Müller-Brockmann · Helvetica · Univers · 1896 — Today</text>
|
||||
</g>
|
||||
|
||||
<g id="cover-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">01 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,38 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P02 Quote · breathing · Müller-Brockmann name·言 -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="page-header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 02</text>
|
||||
</g>
|
||||
|
||||
<g id="quote-mark">
|
||||
<text x="120" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="240" font-weight="900" fill="#D9251D" opacity="0.92">«</text>
|
||||
</g>
|
||||
|
||||
<g id="quote-body">
|
||||
<text x="320" y="240" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="32" fill="#1A1A1A">
|
||||
<tspan x="320" dy="0">The grid system is an aid,</tspan>
|
||||
<tspan x="320" dy="46">not a guarantee.</tspan>
|
||||
</text>
|
||||
<text x="320" y="370" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="22" fill="#666666">
|
||||
<tspan x="320" dy="0">It permits a number of possible uses, and each</tspan>
|
||||
<tspan x="320" dy="30">designer can look for a solution appropriate to</tspan>
|
||||
<tspan x="320" dy="30">his personal style. But one must learn how to</tspan>
|
||||
<tspan x="320" dy="30">use the grid — it is an art that requires practice.</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="quote-attribution">
|
||||
<line x1="320" y1="540" x2="380" y2="540" stroke="#1A1A1A" stroke-width="2"/>
|
||||
<text x="320" y="572" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">JOSEF MÜLLER-BROCKMANN</text>
|
||||
<text x="320" y="596" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">Grid Systems in Graphic Design · 1981</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">02 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,96 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P03 Origin · dense · timeline 1896 → 1957 -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 03</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">双源头 · 1896 → 1957</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">THE SIXTY YEARS THAT MADE SWISS DESIGN POSSIBLE</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<g id="timeline-track">
|
||||
<!-- chart-plot-area: 130,300,1200,300 -->
|
||||
<line x1="130" y1="300" x2="1200" y2="300" stroke="#1A1A1A" stroke-width="2"/>
|
||||
<line x1="1200" y1="300" x2="1228" y2="300" stroke="#1A1A1A" stroke-width="2"/>
|
||||
<polygon points="1228,300 1216,294 1216,306" fill="#1A1A1A"/>
|
||||
</g>
|
||||
|
||||
<g id="node-1896">
|
||||
<line x1="156" y1="240" x2="156" y2="300" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<circle cx="156" cy="300" r="8" fill="#1A1A1A"/>
|
||||
<text x="156" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#1A1A1A" text-anchor="middle">1896</text>
|
||||
<text x="156" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Akzidenz-Grotesk</text>
|
||||
<text x="156" y="384" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="156" dy="0">柏林 Berthold</tspan>
|
||||
<tspan x="156" dy="18">铸字行发行</tspan>
|
||||
<tspan x="156" dy="18">现代意义的</tspan>
|
||||
<tspan x="156" dy="18">第一款无衬线</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="node-1908">
|
||||
<line x1="386" y1="240" x2="386" y2="300" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<circle cx="386" cy="300" r="8" fill="#1A1A1A"/>
|
||||
<text x="386" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#1A1A1A" text-anchor="middle">1908</text>
|
||||
<text x="386" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Basel School</text>
|
||||
<text x="386" y="384" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="386" dy="0">巴塞尔设计学院</tspan>
|
||||
<tspan x="386" dy="18">完成改革</tspan>
|
||||
<tspan x="386" dy="18">奠定教学体系</tspan>
|
||||
<tspan x="386" dy="18">理性传统建立</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="node-1918">
|
||||
<line x1="616" y1="240" x2="616" y2="300" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<circle cx="616" cy="300" r="8" fill="#1A1A1A"/>
|
||||
<text x="616" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#1A1A1A" text-anchor="middle">1918</text>
|
||||
<text x="616" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Ernst Keller</text>
|
||||
<text x="616" y="384" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="616" dy="0">入苏黎世</tspan>
|
||||
<tspan x="616" dy="18">应用艺术学院</tspan>
|
||||
<tspan x="616" dy="18">"形式跟随内容"</tspan>
|
||||
<tspan x="616" dy="18">教学原则成型</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="node-1936">
|
||||
<line x1="846" y1="240" x2="846" y2="300" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<circle cx="846" cy="300" r="8" fill="#1A1A1A"/>
|
||||
<text x="846" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#1A1A1A" text-anchor="middle">1936</text>
|
||||
<text x="846" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Müller-Brockmann</text>
|
||||
<text x="846" y="384" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="846" dy="0">22 岁</tspan>
|
||||
<tspan x="846" dy="18">在苏黎世</tspan>
|
||||
<tspan x="846" dy="18">开设独立工作室</tspan>
|
||||
<tspan x="846" dy="18">新生代登场</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="node-1957">
|
||||
<line x1="1076" y1="240" x2="1076" y2="300" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<circle cx="1076" cy="300" r="14" fill="#D9251D"/>
|
||||
<text x="1076" y="226" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="24" font-weight="900" fill="#D9251D" text-anchor="middle">1957</text>
|
||||
<text x="1076" y="354" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">Helvetica + Univers</text>
|
||||
<text x="1076" y="384" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="1076" dy="0">同年问世</tspan>
|
||||
<tspan x="1076" dy="18">瑞士理性</tspan>
|
||||
<tspan x="1076" dy="18">凝结为字体</tspan>
|
||||
<tspan x="1076" dy="18">输出全球</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="conclusion">
|
||||
<line x1="64" y1="540" x2="64" y2="600" stroke="#D9251D" stroke-width="3"/>
|
||||
<text x="92" y="568" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">理性主义不是凭空而至</text>
|
||||
<text x="92" y="596" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">而是来自<tspan font-weight="700" fill="#1A1A1A">字体 · 学校 · 教学</tspan>三条线索半个世纪的累积。</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">03 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
@@ -0,0 +1,109 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P04 Eight Principles · dense · 4×2 grid of numbered principles -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 04</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">八条核心原则</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">EIGHT PRINCIPLES OF SWISS DESIGN</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- 4-column grid: x positions 64, 368, 672, 976; col width 240 -->
|
||||
<!-- 2 rows: y top 220, y bottom 460 -->
|
||||
|
||||
<g id="principle-1">
|
||||
<text x="64" y="244" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">01</text>
|
||||
<line x1="64" y1="276" x2="280" y2="276" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="64" y="302" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">客观先于表达</text>
|
||||
<text x="64" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">OBJECTIVITY OVER EXPRESSION</text>
|
||||
<text x="64" y="354" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="64" dy="0">信息传达高于</tspan>
|
||||
<tspan x="64" dy="18">设计师个人情绪。</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="principle-2">
|
||||
<text x="368" y="244" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">02</text>
|
||||
<line x1="368" y1="276" x2="584" y2="276" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="368" y="302" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">数学网格为骨架</text>
|
||||
<text x="368" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">MATHEMATICAL GRID</text>
|
||||
<text x="368" y="354" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="368" dy="0">列、行、间距、模数</tspan>
|
||||
<tspan x="368" dy="18">皆从基本单位派生。</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="principle-3">
|
||||
<text x="672" y="244" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">03</text>
|
||||
<line x1="672" y1="276" x2="888" y2="276" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="672" y="302" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">非对称构图</text>
|
||||
<text x="672" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">ASYMMETRIC LAYOUT</text>
|
||||
<text x="672" y="354" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="672" dy="0">拒绝古典对称</tspan>
|
||||
<tspan x="672" dy="18">带来的中心权威。</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="principle-4">
|
||||
<text x="976" y="244" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">04</text>
|
||||
<line x1="976" y1="276" x2="1192" y2="276" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="976" y="302" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">无衬线字体</text>
|
||||
<text x="976" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">SANS-SERIF TYPOGRAPHY</text>
|
||||
<text x="976" y="354" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="976" dy="0">Akzidenz · Helvetica</tspan>
|
||||
<tspan x="976" dy="18">Univers 三足鼎立。</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="principle-5">
|
||||
<text x="64" y="484" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">05</text>
|
||||
<line x1="64" y1="516" x2="280" y2="516" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="64" y="542" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">齐左不齐右</text>
|
||||
<text x="64" y="564" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">FLUSH-LEFT RAGGED-RIGHT</text>
|
||||
<text x="64" y="594" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="64" dy="0">字距均匀</tspan>
|
||||
<tspan x="64" dy="18">阅读节奏稳定。</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="principle-6">
|
||||
<text x="368" y="484" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">06</text>
|
||||
<line x1="368" y1="516" x2="584" y2="516" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="368" y="542" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">客观摄影</text>
|
||||
<text x="368" y="564" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">OBJECTIVE PHOTOGRAPHY</text>
|
||||
<text x="368" y="594" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="368" dy="0">取代装饰性插画</tspan>
|
||||
<tspan x="368" dy="18">现代摄影登场。</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="principle-7">
|
||||
<text x="672" y="484" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">07</text>
|
||||
<line x1="672" y1="516" x2="888" y2="516" stroke="#D9251D" stroke-width="2"/>
|
||||
<text x="672" y="542" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#D9251D">留白是结构</text>
|
||||
<text x="672" y="564" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">NEGATIVE SPACE AS STRUCTURE</text>
|
||||
<text x="672" y="594" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="672" dy="0">空白是信息的载体</tspan>
|
||||
<tspan x="672" dy="18">而非剩余。</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="principle-8">
|
||||
<text x="976" y="484" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="48" font-weight="900" fill="#E8E8E8">08</text>
|
||||
<line x1="976" y1="516" x2="1192" y2="516" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="976" y="542" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A">可重复可规模化</text>
|
||||
<text x="976" y="564" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">REPRODUCIBLE AT SCALE</text>
|
||||
<text x="976" y="594" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="976" dy="0">跨语言、跨媒介</tspan>
|
||||
<tspan x="976" dy="18">跨规模复用。</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">04 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.9 KiB |
@@ -0,0 +1,124 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P05 Figures · dense · 4×2 text-only roster -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 05</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">八位塑造者</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">EIGHT DESIGNERS WHO MADE THE SWISS STYLE</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- 4 cols x 2 rows; col x: 64 / 368 / 672 / 976; row y top 220 / row y bottom 460 -->
|
||||
|
||||
<g id="figure-keller">
|
||||
<text x="64" y="236" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">01</text>
|
||||
<text x="64" y="270" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Ernst Keller</text>
|
||||
<text x="64" y="290" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1891 — 1968</text>
|
||||
<line x1="64" y1="306" x2="120" y2="306" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="64" y="336" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="64" dy="0">苏黎世应用艺术学院</tspan>
|
||||
<tspan x="64" dy="20">1918 起任教</tspan>
|
||||
<tspan x="64" dy="20">奠定瑞士学派</tspan>
|
||||
<tspan x="64" dy="20">"形式跟随内容"原则</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="figure-ballmer">
|
||||
<text x="368" y="236" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">02</text>
|
||||
<text x="368" y="270" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Théo Ballmer</text>
|
||||
<text x="368" y="290" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1902 — 1965</text>
|
||||
<line x1="368" y1="306" x2="424" y2="306" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="368" y="336" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="368" dy="0">网格早期实验者</tspan>
|
||||
<tspan x="368" dy="20">把 De Stijl 几何</tspan>
|
||||
<tspan x="368" dy="20">引入海报排版</tspan>
|
||||
<tspan x="368" dy="20">桥梁式人物</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="figure-bill">
|
||||
<text x="672" y="236" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">03</text>
|
||||
<text x="672" y="270" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Max Bill</text>
|
||||
<text x="672" y="290" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1908 — 1994</text>
|
||||
<line x1="672" y1="306" x2="728" y2="306" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="672" y="336" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="672" dy="0">包豪斯学生</tspan>
|
||||
<tspan x="672" dy="20">乌尔姆设计学院</tspan>
|
||||
<tspan x="672" dy="20">创校校长</tspan>
|
||||
<tspan x="672" dy="20">理性延伸至产品</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="figure-ruder">
|
||||
<text x="976" y="236" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">04</text>
|
||||
<text x="976" y="270" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Emil Ruder</text>
|
||||
<text x="976" y="290" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1914 — 1970</text>
|
||||
<line x1="976" y1="306" x2="1032" y2="306" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="976" y="336" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="976" dy="0">巴塞尔学派核心</tspan>
|
||||
<tspan x="976" dy="20">著《Typographie》</tspan>
|
||||
<tspan x="976" dy="20">1967 至今为</tspan>
|
||||
<tspan x="976" dy="20">字体设计圣经</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="figure-hofmann">
|
||||
<text x="64" y="476" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">05</text>
|
||||
<text x="64" y="510" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Armin Hofmann</text>
|
||||
<text x="64" y="530" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1920 — 2020</text>
|
||||
<line x1="64" y1="546" x2="120" y2="546" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="64" y="576" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="64" dy="0">巴塞尔学派核心</tspan>
|
||||
<tspan x="64" dy="20">海报与教学</tspan>
|
||||
<tspan x="64" dy="20">的标志性人物</tspan>
|
||||
<tspan x="64" dy="20">影响延续至耶鲁</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="figure-brockmann">
|
||||
<text x="368" y="476" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">06</text>
|
||||
<text x="368" y="510" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#D9251D">Müller-Brockmann</text>
|
||||
<text x="368" y="530" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1914 — 1996</text>
|
||||
<line x1="368" y1="546" x2="424" y2="546" stroke="#D9251D" stroke-width="2"/>
|
||||
<text x="368" y="576" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="368" dy="0">苏黎世学派核心</tspan>
|
||||
<tspan x="368" dy="20">《Grid Systems in</tspan>
|
||||
<tspan x="368" dy="20">Graphic Design》作者</tspan>
|
||||
<tspan x="368" dy="20">本讲下页详述</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="figure-miedinger">
|
||||
<text x="672" y="476" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">07</text>
|
||||
<text x="672" y="510" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Max Miedinger</text>
|
||||
<text x="672" y="530" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1910 — 1980</text>
|
||||
<line x1="672" y1="546" x2="728" y2="546" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="672" y="576" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="672" dy="0">1957 年</tspan>
|
||||
<tspan x="672" dy="20">与 Hoffmann 合作</tspan>
|
||||
<tspan x="672" dy="20">设计 Helvetica</tspan>
|
||||
<tspan x="672" dy="20">命名取自瑞士</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="figure-frutiger">
|
||||
<text x="976" y="476" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">08</text>
|
||||
<text x="976" y="510" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Adrian Frutiger</text>
|
||||
<text x="976" y="530" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">1928 — 2015</text>
|
||||
<line x1="976" y1="546" x2="1032" y2="546" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="976" y="576" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="976" dy="0">同年 1957</tspan>
|
||||
<tspan x="976" dy="20">设计 Univers</tspan>
|
||||
<tspan x="976" dy="20">21 字重</tspan>
|
||||
<tspan x="976" dy="20">首次坐标系统化</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">05 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.3 KiB |
@@ -0,0 +1,89 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P06 Müller-Brockmann · dense · 7 nodes biography timeline, vertical -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 06</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">Josef Müller-Brockmann</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">A LIFE IN GRID · 1914 — 1996 · SEVEN MOMENTS</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<g id="big-name">
|
||||
<text x="64" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="92" font-weight="900" fill="#1A1A1A" letter-spacing="-2">JMB</text>
|
||||
<text x="64" y="324" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">JOSEF MÜLLER-BROCKMANN</text>
|
||||
<line x1="64" y1="346" x2="220" y2="346" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="64" y="378" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">
|
||||
<tspan x="64" dy="0">瑞士平面设计师 · 教育家</tspan>
|
||||
<tspan x="64" dy="22">国际主义风格</tspan>
|
||||
<tspan x="64" dy="22">最有代表性的实践者与理论家</tspan>
|
||||
</text>
|
||||
<text x="64" y="500" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="64" dy="0">生于 Rapperswil</tspan>
|
||||
<tspan x="64" dy="20">逝于 Unterengstringen</tspan>
|
||||
<tspan x="64" dy="20">享年 82 岁</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Vertical timeline on right -->
|
||||
<g id="timeline-track">
|
||||
<!-- chart-plot-area: 480,200,480,640 -->
|
||||
<line x1="480" y1="200" x2="480" y2="640" stroke="#1A1A1A" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<g id="event-1914">
|
||||
<circle cx="480" cy="216" r="6" fill="#1A1A1A"/>
|
||||
<text x="430" y="222" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1914</text>
|
||||
<text x="510" y="218" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">生于瑞士拉珀斯维尔</text>
|
||||
<text x="510" y="240" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">距苏黎世 40 公里的小镇 · St. Gallen 州</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1936">
|
||||
<circle cx="480" cy="286" r="6" fill="#1A1A1A"/>
|
||||
<text x="430" y="292" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1936</text>
|
||||
<text x="510" y="288" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">在苏黎世开设独立工作室</text>
|
||||
<text x="510" y="310" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">22 岁起步 · 涉足平面、展览、摄影三个方向</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1950">
|
||||
<circle cx="480" cy="356" r="10" fill="#D9251D"/>
|
||||
<text x="430" y="362" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#D9251D" text-anchor="end">1950</text>
|
||||
<text x="510" y="358" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#D9251D">Tonhalle 音乐会海报系列开启</text>
|
||||
<text x="510" y="380" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">"Musica Viva" · 用圆 · 弧 · 线 · 矩形抽象表达音乐结构</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1957">
|
||||
<circle cx="480" cy="426" r="6" fill="#1A1A1A"/>
|
||||
<text x="430" y="432" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1957</text>
|
||||
<text x="510" y="428" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">任苏黎世应用艺术学院教授</text>
|
||||
<text x="510" y="450" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">把瑞士理性带入下一代设计师的教学体系</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1958">
|
||||
<circle cx="480" cy="496" r="6" fill="#1A1A1A"/>
|
||||
<text x="430" y="502" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1958</text>
|
||||
<text x="510" y="498" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">创办《Neue Grafik》期刊</text>
|
||||
<text x="510" y="520" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">三语并行 · 把瑞士理念输出到国际平面设计共同体</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1981">
|
||||
<circle cx="480" cy="566" r="10" fill="#D9251D"/>
|
||||
<text x="430" y="572" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#D9251D" text-anchor="end">1981</text>
|
||||
<text x="510" y="568" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#D9251D">出版《Grid Systems in Graphic Design》</text>
|
||||
<text x="510" y="590" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">至今仍是设计教育最权威的网格手册 · 是本讲的底本</text>
|
||||
</g>
|
||||
|
||||
<g id="event-1996">
|
||||
<circle cx="480" cy="636" r="6" fill="#1A1A1A"/>
|
||||
<text x="430" y="642" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A" text-anchor="end">1996</text>
|
||||
<text x="510" y="638" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="16" font-weight="900" fill="#1A1A1A">在 Unterengstringen 逝世</text>
|
||||
<text x="510" y="660" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">8 月 30 日 · 享年 82 岁 · 影响持续至今</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">06 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
@@ -0,0 +1,69 @@
|
||||
<?xml version='1.0' encoding='UTF-8'?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 07</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">三款决定性字体</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">THREE TYPEFACES THAT WROTE THE SWISS STYLE</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
<g id="type-akzidenz">
|
||||
<line x1="64" y1="220" x2="404" y2="220" stroke="#1A1A1A" stroke-width="3" />
|
||||
<text x="64" y="252" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">CARD · 01</text>
|
||||
<text x="64" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Akzidenz-Grotesk</text>
|
||||
<text x="64" y="304" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">1896 · Berthold Type Foundry</text>
|
||||
<text x="64" y="480" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="168" font-weight="900" fill="#1A1A1A" letter-spacing="-2">Aa</text>
|
||||
<text x="64" y="500" font-family="Arial, sans-serif" font-size="10" fill="#999999" letter-spacing="2">EXTRA BOLD · 900</text>
|
||||
<line x1="64" y1="528" x2="120" y2="528" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="64" y="556" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">第一款现代意义的</text>
|
||||
<text x="64" y="578" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">商业无衬线字体</text>
|
||||
<text x="64" y="608" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" fill="#666666">
|
||||
<tspan x="64" dy="0">瑞士学派早期首选</tspan>
|
||||
<tspan x="64" dy="18">比 Helvetica 早 61 年问世</tspan>
|
||||
<tspan x="64" dy="18">奠定无衬线美学全部基调</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="type-helvetica">
|
||||
<line x1="470" y1="220" x2="810" y2="220" stroke="#D9251D" stroke-width="3" />
|
||||
<text x="470" y="252" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">CARD · 02</text>
|
||||
<text x="470" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Helvetica</text>
|
||||
<text x="470" y="304" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">1957 · Miedinger + Hoffmann</text>
|
||||
<text x="470" y="480" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="168" font-weight="700" fill="#D9251D" letter-spacing="-1">Aa</text>
|
||||
<text x="470" y="500" font-family="Arial, sans-serif" font-size="10" fill="#999999" letter-spacing="2">BOLD · 700 · NEUTRAL</text>
|
||||
<line x1="470" y1="528" x2="526" y2="528" stroke="#D9251D" stroke-width="2" />
|
||||
<text x="470" y="556" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#D9251D">字面意思就是"瑞士"</text>
|
||||
<text x="470" y="578" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">中性 · 客观 · 可读至极</text>
|
||||
<text x="470" y="608" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" fill="#666666">
|
||||
<tspan x="470" dy="0">原名 Neue Haas Grotesk</tspan>
|
||||
<tspan x="470" dy="18">取自拉丁文 Helvetia(瑞士)</tspan>
|
||||
<tspan x="470" dy="18">20 世纪传播范围最广的字体</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="type-univers">
|
||||
<line x1="876" y1="220" x2="1216" y2="220" stroke="#1A1A1A" stroke-width="3" />
|
||||
<text x="876" y="252" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">CARD · 03</text>
|
||||
<text x="876" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="20" font-weight="900" fill="#1A1A1A">Univers</text>
|
||||
<text x="876" y="304" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">1957 · Adrian Frutiger</text>
|
||||
<text x="876" y="480" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="168" font-weight="400" fill="#1A1A1A" letter-spacing="1">Aa</text>
|
||||
<text x="876" y="500" font-family="Arial, sans-serif" font-size="10" fill="#999999" letter-spacing="2">REGULAR · 400 · LIGHT</text>
|
||||
<line x1="876" y1="528" x2="932" y2="528" stroke="#1A1A1A" stroke-width="1" />
|
||||
<text x="876" y="556" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">21 字重的二维坐标</text>
|
||||
<text x="876" y="578" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">字体工程的开端</text>
|
||||
<text x="876" y="608" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" fill="#666666">
|
||||
<tspan x="876" dy="0">Univers 39 — 83 二维编号</tspan>
|
||||
<tspan x="876" dy="18">把"家族+字重+宽度"工程化</tspan>
|
||||
<tspan x="876" dy="18">现代字体家族结构的祖先</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">07 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
@@ -0,0 +1,117 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P08 Four Grid Types · dense · 2x2 matrix each with mini grid schematic -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 08</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">网格四种类型</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">FOUR GRID TYPES · MÜLLER-BROCKMANN, 1981</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Cross axes for the 2x2 matrix -->
|
||||
<g id="axis-cross">
|
||||
<line x1="64" y1="430" x2="1216" y2="430" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<line x1="640" y1="200" x2="640" y2="660" stroke="#E8E8E8" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Quadrant TL · Manuscript -->
|
||||
<g id="q-manuscript">
|
||||
<text x="80" y="232" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">01 · 古典</text>
|
||||
<text x="80" y="266" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">手稿网格</text>
|
||||
<text x="80" y="288" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="1">MANUSCRIPT GRID</text>
|
||||
<text x="80" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="80" dy="0">单栏满版 · 最古老的网格</tspan>
|
||||
<tspan x="80" dy="20">书籍正文 · 长篇散文唯一选项</tspan>
|
||||
</text>
|
||||
<!-- Schematic: single column box -->
|
||||
<g id="schema-manuscript" transform="translate(440,222)">
|
||||
<rect x="0" y="0" width="160" height="180" fill="none" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<rect x="20" y="20" width="120" height="140" fill="#1A1A1A" fill-opacity="0.08"/>
|
||||
<line x1="20" y1="40" x2="140" y2="40" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="20" y1="60" x2="140" y2="60" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="20" y1="80" x2="140" y2="80" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="20" y1="100" x2="140" y2="100" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="20" y1="120" x2="140" y2="120" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="20" y1="140" x2="120" y2="140" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Quadrant TR · Column -->
|
||||
<g id="q-column">
|
||||
<text x="660" y="232" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">02 · 期刊</text>
|
||||
<text x="660" y="266" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">列状网格</text>
|
||||
<text x="660" y="288" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="1">COLUMN GRID</text>
|
||||
<text x="660" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="660" dy="0">多栏并列 · 列宽行高皆可计算</tspan>
|
||||
<tspan x="660" dy="20">期刊 · 报纸 · 出版业的语法基础</tspan>
|
||||
</text>
|
||||
<g id="schema-column" transform="translate(1020,222)">
|
||||
<rect x="0" y="0" width="160" height="180" fill="none" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<rect x="10" y="20" width="40" height="140" fill="#1A1A1A" fill-opacity="0.10"/>
|
||||
<rect x="60" y="20" width="40" height="140" fill="#1A1A1A" fill-opacity="0.10"/>
|
||||
<rect x="110" y="20" width="40" height="140" fill="#1A1A1A" fill-opacity="0.10"/>
|
||||
<line x1="10" y1="40" x2="50" y2="40" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="10" y1="60" x2="50" y2="60" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="10" y1="80" x2="50" y2="80" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="60" y1="40" x2="100" y2="40" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="60" y1="60" x2="100" y2="60" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="60" y1="80" x2="100" y2="80" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="110" y1="40" x2="150" y2="40" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="110" y1="60" x2="150" y2="60" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
<line x1="110" y1="80" x2="150" y2="80" stroke="#1A1A1A" stroke-width="0.5"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Quadrant BL · Modular -->
|
||||
<g id="q-modular">
|
||||
<text x="80" y="462" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">03 · 海报</text>
|
||||
<text x="80" y="496" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#D9251D">模数网格</text>
|
||||
<text x="80" y="518" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="1">MODULAR GRID</text>
|
||||
<text x="80" y="548" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="80" dy="0">横列 × 纵行的方格矩阵</tspan>
|
||||
<tspan x="80" dy="20">海报 · 目录 · 平面设计的利器</tspan>
|
||||
<tspan x="80" dy="20">瑞士国际主义最具识别度的网格类型</tspan>
|
||||
</text>
|
||||
<g id="schema-modular" transform="translate(440,452)">
|
||||
<rect x="0" y="0" width="160" height="180" fill="none" stroke="#D9251D" stroke-width="1"/>
|
||||
<line x1="40" y1="0" x2="40" y2="180" stroke="#D9251D" stroke-width="0.5"/>
|
||||
<line x1="80" y1="0" x2="80" y2="180" stroke="#D9251D" stroke-width="0.5"/>
|
||||
<line x1="120" y1="0" x2="120" y2="180" stroke="#D9251D" stroke-width="0.5"/>
|
||||
<line x1="0" y1="36" x2="160" y2="36" stroke="#D9251D" stroke-width="0.5"/>
|
||||
<line x1="0" y1="72" x2="160" y2="72" stroke="#D9251D" stroke-width="0.5"/>
|
||||
<line x1="0" y1="108" x2="160" y2="108" stroke="#D9251D" stroke-width="0.5"/>
|
||||
<line x1="0" y1="144" x2="160" y2="144" stroke="#D9251D" stroke-width="0.5"/>
|
||||
<rect x="0" y="0" width="80" height="36" fill="#D9251D" fill-opacity="0.18"/>
|
||||
<rect x="40" y="72" width="40" height="72" fill="#1A1A1A" fill-opacity="0.85"/>
|
||||
<rect x="120" y="108" width="40" height="36" fill="#1A1A1A" fill-opacity="0.40"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Quadrant BR · Hierarchical -->
|
||||
<g id="q-hierarchical">
|
||||
<text x="660" y="462" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">04 · 复合</text>
|
||||
<text x="660" y="496" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">层级网格</text>
|
||||
<text x="660" y="518" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" letter-spacing="1">HIERARCHICAL GRID</text>
|
||||
<text x="660" y="548" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="660" dy="0">不规则但内部有逻辑</tspan>
|
||||
<tspan x="660" dy="20">复合排版 · 杂志专题 · 网页布局</tspan>
|
||||
</text>
|
||||
<g id="schema-hierarchical" transform="translate(1020,452)">
|
||||
<rect x="0" y="0" width="160" height="180" fill="none" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="160" height="40" fill="#1A1A1A" fill-opacity="0.85"/>
|
||||
<rect x="0" y="50" width="100" height="80" fill="#1A1A1A" fill-opacity="0.15"/>
|
||||
<rect x="110" y="50" width="50" height="40" fill="#1A1A1A" fill-opacity="0.30"/>
|
||||
<rect x="110" y="100" width="50" height="30" fill="#1A1A1A" fill-opacity="0.15"/>
|
||||
<rect x="0" y="140" width="60" height="40" fill="#1A1A1A" fill-opacity="0.30"/>
|
||||
<rect x="70" y="140" width="90" height="40" fill="#1A1A1A" fill-opacity="0.15"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">08 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.2 KiB |
@@ -0,0 +1,111 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P09 Modular Grid Schematic · anchor · 4×6 modular grid demonstration -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 09</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">一切都是可计算的</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">EVERYTHING DERIVES FROM THE BASE UNIT</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Left: numerical specs -->
|
||||
<g id="spec-list">
|
||||
<text x="64" y="232" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">BASE UNIT</text>
|
||||
<text x="64" y="280" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="56" font-weight="900" fill="#D9251D">16px</text>
|
||||
<text x="64" y="306" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">所有距离的最小公因子</text>
|
||||
|
||||
<line x1="64" y1="340" x2="380" y2="340" stroke="#1A1A1A" stroke-width="1"/>
|
||||
|
||||
<text x="64" y="376" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">DERIVED FROM 16</text>
|
||||
|
||||
<text x="64" y="412" font-family="Consolas, "Courier New", monospace" font-size="15" fill="#1A1A1A">
|
||||
<tspan x="64" dy="0">safe margin <tspan font-weight="700" fill="#1A1A1A">64 px</tspan> = 4 × 16</tspan>
|
||||
<tspan x="64" dy="28">column width <tspan font-weight="700" fill="#1A1A1A">264 px</tspan> = 16 × 16 + 8</tspan>
|
||||
<tspan x="64" dy="28">column gap <tspan font-weight="700" fill="#1A1A1A">32 px</tspan> = 2 × 16</tspan>
|
||||
<tspan x="64" dy="28">row height <tspan font-weight="700" fill="#1A1A1A">96 px</tspan> = 6 × 16</tspan>
|
||||
<tspan x="64" dy="28">body line-height <tspan font-weight="700" fill="#1A1A1A">27 px</tspan> = 1.5 × 18</tspan>
|
||||
<tspan x="64" dy="28">title size <tspan font-weight="700" fill="#1A1A1A">32 px</tspan> = 2 × 16</tspan>
|
||||
</text>
|
||||
|
||||
<line x1="64" y1="604" x2="380" y2="604" stroke="#D9251D" stroke-width="2"/>
|
||||
<text x="64" y="636" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="14" font-weight="900" fill="#1A1A1A">设计师不再"画"版面</text>
|
||||
<text x="64" y="658" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">而是"建立系统并按系统落子"</text>
|
||||
</g>
|
||||
|
||||
<!-- Right: 4×6 modular grid schematic -->
|
||||
<!-- chart-plot-area: 480,210,1216,650 -->
|
||||
<g id="modular-grid">
|
||||
<!-- 4 columns × 6 rows; columns each 168px wide, gap 16px; rows each 64px tall, gap 8px -->
|
||||
<!-- column 1 x=480; 2 x=664; 3 x=848; 4 x=1032; (each 184 stride; col 168) -->
|
||||
|
||||
<!-- Row backgrounds and outlines -->
|
||||
<g id="cells">
|
||||
<!-- Row 1: y=210, h=64 -->
|
||||
<rect x="480" y="210" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="664" y="210" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="848" y="210" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="1032" y="210" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<!-- Row 2: y=282 -->
|
||||
<rect x="480" y="282" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="664" y="282" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="848" y="282" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="1032" y="282" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<!-- Row 3: y=354 -->
|
||||
<rect x="480" y="354" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="664" y="354" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="848" y="354" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="1032" y="354" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<!-- Row 4: y=426 -->
|
||||
<rect x="480" y="426" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="664" y="426" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="848" y="426" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="1032" y="426" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<!-- Row 5: y=498 -->
|
||||
<rect x="480" y="498" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="664" y="498" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="848" y="498" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="1032" y="498" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<!-- Row 6: y=570 -->
|
||||
<rect x="480" y="570" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="664" y="570" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="848" y="570" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
<rect x="1032" y="570" width="168" height="64" fill="none" stroke="#1A1A1A" stroke-width="0.75"/>
|
||||
</g>
|
||||
|
||||
<!-- Highlight: image region (cols 2-3 × rows 2-3) -->
|
||||
<g id="highlight-region">
|
||||
<rect x="664" y="282" width="352" height="136" fill="#D9251D" fill-opacity="0.10" stroke="#D9251D" stroke-width="2"/>
|
||||
<text x="840" y="357" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">IMAGE 2×2</text>
|
||||
</g>
|
||||
|
||||
<!-- Highlight: text region (col 1 × rows 4-5) -->
|
||||
<g id="highlight-text-region">
|
||||
<rect x="480" y="426" width="168" height="136" fill="#1A1A1A" fill-opacity="0.05" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<text x="564" y="501" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#1A1A1A" text-anchor="middle" letter-spacing="2">TEXT 1×2</text>
|
||||
</g>
|
||||
|
||||
<!-- Highlight: header band row 1 cols 1-4 -->
|
||||
<g id="highlight-header-band">
|
||||
<rect x="480" y="210" width="720" height="64" fill="none" stroke="#1A1A1A" stroke-width="2"/>
|
||||
<text x="840" y="247" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#1A1A1A" text-anchor="middle" letter-spacing="2">HEADLINE 4×1</text>
|
||||
</g>
|
||||
|
||||
<!-- Column rulers (top) -->
|
||||
<line x1="480" y1="188" x2="648" y2="188" stroke="#666666" stroke-width="0.5"/>
|
||||
<line x1="664" y1="188" x2="832" y2="188" stroke="#666666" stroke-width="0.5"/>
|
||||
<line x1="848" y1="188" x2="1016" y2="188" stroke="#666666" stroke-width="0.5"/>
|
||||
<line x1="1032" y1="188" x2="1200" y2="188" stroke="#666666" stroke-width="0.5"/>
|
||||
<text x="564" y="184" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="10" fill="#666666" text-anchor="middle">264</text>
|
||||
<text x="748" y="184" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="10" fill="#666666" text-anchor="middle">264</text>
|
||||
<text x="932" y="184" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="10" fill="#666666" text-anchor="middle">264</text>
|
||||
<text x="1116" y="184" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="10" fill="#666666" text-anchor="middle">264</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">09 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
@@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P10 Negative Space · breathing · hero_page with floating headline -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
<image href="../images/negative_space.png" x="0" y="0" width="1280" height="720" preserveAspectRatio="xMidYMid slice"/>
|
||||
</g>
|
||||
|
||||
<g id="page-header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 10</text>
|
||||
</g>
|
||||
|
||||
<g id="floating-headline">
|
||||
<line x1="760" y1="120" x2="760" y2="164" stroke="#D9251D" stroke-width="3"/>
|
||||
<text x="784" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#1A1A1A" letter-spacing="2">ARGUMENT · 07</text>
|
||||
|
||||
<text x="760" y="220" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="56" font-weight="900" fill="#1A1A1A">留白即结构</text>
|
||||
<text x="760" y="260" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Negative space is structure, not absence.</text>
|
||||
</g>
|
||||
|
||||
<g id="floating-aphorism">
|
||||
<text x="760" y="640" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="18" fill="#1A1A1A">
|
||||
<tspan x="760" dy="0">留白不是剩余</tspan>
|
||||
<tspan x="760" dy="28">是信息的载体</tspan>
|
||||
</text>
|
||||
<text x="760" y="708" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">THE SPACE BETWEEN IS THE MESSAGE</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#1A1A1A" text-anchor="end" letter-spacing="1">10 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,92 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P11 Outputs to Modern World · dense · 4-domain text grid -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 11</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">输出到现代世界</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">1960s → · FROM SWITZERLAND TO THE GLOBAL DESIGN SYSTEM</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- 4 cols; col x: 64 / 368 / 672 / 976; col width 240 -->
|
||||
|
||||
<g id="domain-corporate">
|
||||
<text x="64" y="240" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">01</text>
|
||||
<line x1="64" y1="260" x2="280" y2="260" stroke="#1A1A1A" stroke-width="2"/>
|
||||
<text x="64" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">企业 VI</text>
|
||||
<text x="64" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">CORPORATE IDENTITY</text>
|
||||
<text x="64" y="358" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="64" dy="0">把瑞士理性变成"识别系统"</tspan>
|
||||
<tspan x="64" dy="22">产业的开端</tspan>
|
||||
</text>
|
||||
<line x1="64" y1="430" x2="120" y2="430" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<text x="64" y="460" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="64" dy="0">IBM (Paul Rand)</tspan>
|
||||
<tspan x="64" dy="22">Knoll · Lufthansa</tspan>
|
||||
<tspan x="64" dy="22">Olivetti · Braun</tspan>
|
||||
</text>
|
||||
<text x="64" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="1">JMB 任 IBM 顾问 · 1967 起</text>
|
||||
</g>
|
||||
|
||||
<g id="domain-signage">
|
||||
<text x="368" y="240" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">02</text>
|
||||
<line x1="368" y1="260" x2="584" y2="260" stroke="#1A1A1A" stroke-width="2"/>
|
||||
<text x="368" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">机场 / 地铁标识</text>
|
||||
<text x="368" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">SIGNAGE SYSTEMS</text>
|
||||
<text x="368" y="358" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="368" dy="0">公共空间的可读性</tspan>
|
||||
<tspan x="368" dy="22">是瑞士理性的延伸</tspan>
|
||||
</text>
|
||||
<line x1="368" y1="430" x2="424" y2="430" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<text x="368" y="460" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="368" dy="0">纽约地铁 Unimark</tspan>
|
||||
<tspan x="368" dy="22">巴黎机场 Frutiger 字体</tspan>
|
||||
<tspan x="368" dy="22">慕尼黑 Otl Aicher</tspan>
|
||||
</text>
|
||||
<text x="368" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="1">Vignelli 1966 纽约地铁手册</text>
|
||||
</g>
|
||||
|
||||
<g id="domain-publishing">
|
||||
<text x="672" y="240" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">03</text>
|
||||
<line x1="672" y1="260" x2="888" y2="260" stroke="#1A1A1A" stroke-width="2"/>
|
||||
<text x="672" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">出版业</text>
|
||||
<text x="672" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">EDITORIAL DESIGN</text>
|
||||
<text x="672" y="358" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="672" dy="0">期刊 · 杂志 · 文化出版</tspan>
|
||||
<tspan x="672" dy="22">的版面语法</tspan>
|
||||
</text>
|
||||
<line x1="672" y1="430" x2="728" y2="430" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<text x="672" y="460" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="672" dy="0">Du 杂志(瑞士)</tspan>
|
||||
<tspan x="672" dy="22">Eye Magazine</tspan>
|
||||
<tspan x="672" dy="22">Domus · Wallpaper*</tspan>
|
||||
</text>
|
||||
<text x="672" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="1">至今仍是文化出版的范本</text>
|
||||
</g>
|
||||
|
||||
<g id="domain-education">
|
||||
<text x="976" y="240" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" letter-spacing="2">04</text>
|
||||
<line x1="976" y1="260" x2="1192" y2="260" stroke="#1A1A1A" stroke-width="2"/>
|
||||
<text x="976" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">设计教育</text>
|
||||
<text x="976" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">DESIGN EDUCATION</text>
|
||||
<text x="976" y="358" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A">
|
||||
<tspan x="976" dy="0">巴塞尔 + 苏黎世</tspan>
|
||||
<tspan x="976" dy="22">两条教学路径全球化</tspan>
|
||||
</text>
|
||||
<line x1="976" y1="430" x2="1032" y2="430" stroke="#E8E8E8" stroke-width="1"/>
|
||||
<text x="976" y="460" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="976" dy="0">Yale (Hofmann)</tspan>
|
||||
<tspan x="976" dy="22">RISD · Cooper Union</tspan>
|
||||
<tspan x="976" dy="22">东京 GS 学派</tspan>
|
||||
</text>
|
||||
<text x="976" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="1">学生输出半世纪不绝</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">11 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
@@ -0,0 +1,84 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P12 Digital Era · dense · 4-stage horizontal sequence -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 12</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">数字时代的延续</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">THE GRID ON SCREEN · 2008 — TODAY</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Horizontal track connecting 4 stages -->
|
||||
<g id="track">
|
||||
<!-- chart-plot-area: 130,340,1216,340 -->
|
||||
<line x1="130" y1="340" x2="1216" y2="340" stroke="#1A1A1A" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- 4 stages; centers at x: 200 / 480 / 760 / 1040 (extended right to 1140) -->
|
||||
|
||||
<g id="stage-1">
|
||||
<text x="172" y="232" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="64" font-weight="900" fill="#E8E8E8">01</text>
|
||||
<text x="200" y="276" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">2008</text>
|
||||
<text x="200" y="312" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A" text-anchor="middle">960 Grid System</text>
|
||||
<circle cx="200" cy="340" r="8" fill="#1A1A1A"/>
|
||||
<text x="200" y="394" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="200" dy="0">12 栏 · 960px 宽</tspan>
|
||||
<tspan x="200" dy="20">第一次把网格语法</tspan>
|
||||
<tspan x="200" dy="20">系统搬上 Web</tspan>
|
||||
<tspan x="200" dy="20">Nathan Smith 出品</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="stage-2">
|
||||
<text x="452" y="232" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="64" font-weight="900" fill="#E8E8E8">02</text>
|
||||
<text x="480" y="276" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">2011</text>
|
||||
<text x="480" y="312" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A" text-anchor="middle">Bootstrap 12 栏</text>
|
||||
<circle cx="480" cy="340" r="8" fill="#1A1A1A"/>
|
||||
<text x="480" y="394" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="480" dy="0">Twitter 开源</tspan>
|
||||
<tspan x="480" dy="20">把模数网格</tspan>
|
||||
<tspan x="480" dy="20">民主化到全球</tspan>
|
||||
<tspan x="480" dy="20">前端开发标配</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="stage-3">
|
||||
<text x="732" y="232" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="64" font-weight="900" fill="#E8E8E8">03</text>
|
||||
<text x="760" y="276" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">2017</text>
|
||||
<text x="760" y="312" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#1A1A1A" text-anchor="middle">CSS Grid</text>
|
||||
<circle cx="760" cy="340" r="8" fill="#1A1A1A"/>
|
||||
<text x="760" y="394" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="760" dy="0">浏览器原生网格</tspan>
|
||||
<tspan x="760" dy="20">所有主流浏览器支持</tspan>
|
||||
<tspan x="760" dy="20">模数网格首次成为</tspan>
|
||||
<tspan x="760" dy="20">Web 平台基础设施</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="stage-4">
|
||||
<text x="1012" y="232" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="64" font-weight="900" fill="#D9251D">04</text>
|
||||
<text x="1040" y="276" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#D9251D" text-anchor="middle" letter-spacing="2">2020s</text>
|
||||
<text x="1040" y="312" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="18" font-weight="900" fill="#D9251D" text-anchor="middle">Design Systems</text>
|
||||
<circle cx="1040" cy="340" r="14" fill="#D9251D"/>
|
||||
<text x="1040" y="394" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666" text-anchor="middle">
|
||||
<tspan x="1040" dy="0">Material · HIG · FAST</tspan>
|
||||
<tspan x="1040" dy="20">大企业 VI</tspan>
|
||||
<tspan x="1040" dy="20">在屏幕上的延续</tspan>
|
||||
<tspan x="1040" dy="20">从规则到组件库</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="conclusion">
|
||||
<line x1="64" y1="580" x2="64" y2="640" stroke="#D9251D" stroke-width="3"/>
|
||||
<text x="92" y="606" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">同一套语法 · 1981 → 2026</text>
|
||||
<text x="92" y="636" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666">从印刷海报到 CSS Grid · 介质变换但<tspan font-weight="700" fill="#1A1A1A">模数 · 列 · 留白 · 数学比例</tspan>四件套从未改变。</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">12 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.8 KiB |
@@ -0,0 +1,93 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<!-- P13 Contemporary Brands · dense · 3x2 brand logo grid -->
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 13</text>
|
||||
<text x="64" y="120" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="32" font-weight="900" fill="#1A1A1A">当代品牌的瑞士血脉</text>
|
||||
<text x="64" y="148" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#666666" letter-spacing="2">SIX BRANDS WHERE THE SWISS GRID STILL LIVES</text>
|
||||
<line x1="64" y1="172" x2="120" y2="172" stroke="#D9251D" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- 3 cols x 2 rows; col x: 96 / 528 / 960; row y top 220 / bottom 460 -->
|
||||
<!-- Each cell width 320; logo at 96+24=120, name at 96+108 right of logo -->
|
||||
|
||||
<g id="brand-apple">
|
||||
<line x1="96" y1="240" x2="384" y2="240" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<use data-icon="simple-icons/apple" x="96" y="266" width="56" height="56" fill="#1A1A1A"/>
|
||||
<text x="168" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Apple</text>
|
||||
<text x="168" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">CUPERTINO · 1976</text>
|
||||
<text x="96" y="370" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="96" dy="0">极简理性的产品语言</tspan>
|
||||
<tspan x="96" dy="20">从早期 Keynote 到 HIG</tspan>
|
||||
<tspan x="96" dy="20">瑞士血脉最显眼的继承者</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="brand-google">
|
||||
<line x1="528" y1="240" x2="816" y2="240" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<use data-icon="simple-icons/google" x="528" y="266" width="56" height="56" fill="#1A1A1A"/>
|
||||
<text x="600" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Google</text>
|
||||
<text x="600" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">MOUNTAIN VIEW · 1998</text>
|
||||
<text x="528" y="370" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="528" dy="0">Material 设计系统</tspan>
|
||||
<tspan x="528" dy="20">8dp 网格 + 几何字体</tspan>
|
||||
<tspan x="528" dy="20">把瑞士工程化到移动端</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="brand-spotify">
|
||||
<line x1="960" y1="240" x2="1216" y2="240" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<use data-icon="simple-icons/spotify" x="960" y="266" width="56" height="56" fill="#1A1A1A"/>
|
||||
<text x="1032" y="296" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Spotify</text>
|
||||
<text x="1032" y="318" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">STOCKHOLM · 2006</text>
|
||||
<text x="960" y="370" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="960" dy="0">杂志感的版面语法</tspan>
|
||||
<tspan x="960" dy="20">大字号 · 网格分块</tspan>
|
||||
<tspan x="960" dy="20">把音乐变成视觉故事</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="brand-airbnb">
|
||||
<line x1="96" y1="480" x2="384" y2="480" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<use data-icon="simple-icons/airbnb" x="96" y="506" width="56" height="56" fill="#1A1A1A"/>
|
||||
<text x="168" y="536" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Airbnb</text>
|
||||
<text x="168" y="558" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">SAN FRANCISCO · 2008</text>
|
||||
<text x="96" y="610" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="96" dy="0">DLS 设计语言系统</tspan>
|
||||
<tspan x="96" dy="20">模数 grid + 极简识别</tspan>
|
||||
<tspan x="96" dy="20">摄影也走客观纪实路线</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="brand-ibm">
|
||||
<line x1="528" y1="480" x2="816" y2="480" stroke="#D9251D" stroke-width="2"/>
|
||||
<use data-icon="simple-icons/ibm" x="528" y="506" width="56" height="56" fill="#D9251D"/>
|
||||
<text x="600" y="536" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#D9251D">IBM</text>
|
||||
<text x="600" y="558" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">ARMONK · 1911</text>
|
||||
<text x="528" y="610" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="528" dy="0">JMB 1967 起任 IBM 顾问</tspan>
|
||||
<tspan x="528" dy="20">Paul Rand 同期接手识别</tspan>
|
||||
<tspan x="528" dy="20">直系瑞士血统案例</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="brand-lufthansa">
|
||||
<line x1="960" y1="480" x2="1216" y2="480" stroke="#1A1A1A" stroke-width="1"/>
|
||||
<use data-icon="simple-icons/lufthansa" x="960" y="506" width="56" height="56" fill="#1A1A1A"/>
|
||||
<text x="1032" y="536" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">Lufthansa</text>
|
||||
<text x="1032" y="558" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="2">COLOGNE · 1955</text>
|
||||
<text x="960" y="610" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#666666">
|
||||
<tspan x="960" dy="0">Otl Aicher 1962 VI</tspan>
|
||||
<tspan x="960" dy="20">乌尔姆系统化设计标杆</tspan>
|
||||
<tspan x="960" dy="20">基本沿用至今 60 余年</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="688" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" text-anchor="end" letter-spacing="1">13 / 14</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.2 KiB |
@@ -0,0 +1,32 @@
|
||||
<?xml version='1.0' encoding='UTF-8'?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
|
||||
<g id="bg">
|
||||
<rect width="1280" height="720" fill="#FFFFFF" />
|
||||
<image href="../images/closing_grid.png" x="0" y="0" width="1280" height="720" preserveAspectRatio="xMidYMid slice" />
|
||||
</g>
|
||||
|
||||
<g id="page-header">
|
||||
<text x="64" y="60" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#999999" letter-spacing="2">P · 14 · CLOSING</text>
|
||||
<line x1="64" y1="74" x2="180" y2="74" stroke="#1A1A1A" stroke-width="1" />
|
||||
</g>
|
||||
|
||||
<g id="closing-headline">
|
||||
<text x="64" y="370" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="84" font-weight="900" fill="#1A1A1A" letter-spacing="4">网格不是限制</text>
|
||||
<text x="64" y="482" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="84" font-weight="900" fill="#D9251D" letter-spacing="4">是自由的语法</text>
|
||||
</g>
|
||||
|
||||
<g id="closing-english">
|
||||
<text x="64" y="540" font-family=""Arial Black", "Microsoft YaHei", sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">The grid is not a constraint. It is a grammar of freedom.</text>
|
||||
</g>
|
||||
|
||||
<g id="closing-meta">
|
||||
<line x1="64" y1="604" x2="64" y2="656" stroke="#1A1A1A" stroke-width="3" />
|
||||
<text x="84" y="626" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#1A1A1A" letter-spacing="1">SWISS GRID SYSTEMS · A LECTURE</text>
|
||||
<text x="84" y="650" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#666666" letter-spacing="1">END · 14 / 14 · 2026</text>
|
||||
</g>
|
||||
|
||||
<g id="page-footer">
|
||||
<text x="1216" y="700" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#1A1A1A" text-anchor="end" letter-spacing="1">— THANK YOU —</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Reference in New Issue
Block a user