万形演示 · 文心设计语言

万形演示

Wenxin Presentation

文心设计语言 · 正典演示

1 / 13

01

文心设计语言

2 / 13

三大原则

— 文字即界面 — 内容是最重要的视觉主体，所有UI决策服务于让用户自然进入阅读

— 留白即设计 — 大区块间距 ≥ 96px，当觉得「太空了」时往往才是对的

— 克制即力量 — 全页强调色 ≤ 2 处，出现越少，力量越大

3 / 13

七维度映射

A9 · 克制之美

无装饰阴影，无渐变背景

B9 · 温暖极简

暖白底色 + 深炭文字

C9 · 温暖衬线

Lora / EB Garamond 优先

D9 · 暖土调

暖白底 + 砖红强调 ≤ 2 处

E9 · 温和流动

420ms 进场，stagger 60ms

G2 · 东亚语境

CJK 行高 ≥ 1.6，避头尾

4 / 13

暖土调色彩系统

五项核心色彩，
来自泥土、陶器、茶叶、宣纸。

全页 accent 砖红 ≤ 2 处，
无高饱和色，无渐变色背景。

暗色模式下色彩自动映射，
背景转为暖暗色而非纯黑。

暖白

#F2F0EB

纯白

#FFFFFF

深炭

#3A3837

砖红

Accent

暖灰

#888580

5 / 13

温暖衬线字体

三层字体栈，各司其职。

展示字体用于标题与品牌，
正文衬线保证长文舒适，
UI 无衬线标识元数据。

中文行高 ≥ 1.85，
确保 CJK 阅读的呼吸感。

Display · 展示

文心正典

Lora · Georgia · Noto Serif SC

Body · 正文

文字即界面，留白即设计。

EB Garamond · Crimson Text · Noto Serif SC

UI · 界面

METADATA · LABELS · CAPTIONS

system-ui · Noto Sans SC · PingFang SC

6 / 13

九种输出形态

F1

HTML Web

响应式网站，暗色就绪

F2

Mobile App

触控友好，平台适配

F3

Brand Identity

朱砂印章，品牌标识

F4

Print

书籍排版，E8 静止

F5

Presentation

16:9 幻灯片系统

F6

Documentation

双栏文档站

F7

Poster & Cover

单页极简表达

F8

Diagram

架构图解，知识地图

F9

Report

Markdown → PDF

7 / 13

02

九种形态

8 / 13

F1–F3 · Web · 移动 · 品牌

— F1 HTML Web — 文心正典，响应式网站，clamp() 流体宽度，暗色模式

— F2 Mobile App — 触控目标 ≥ 48pt，安全区域适配，Dynamic Type

— F3 Brand Identity — 朱砂印章 Logo，品牌标识符 ■，CMYK映射

9 / 13

F4–F6 · 印刷 · 演示 · 文档

— F4 Print & Editorial — Van de Graaf 版面，pt 单位，E8 印刷静止

— F5 Presentation — 16:9 画布，7 种幻灯片类型，构建动画

— F6 Documentation — 侧边栏 240px，暖色调语法高亮，提示框

10 / 13

F7–F9 · 海报 · 图解 · 报告

— F7 Poster & Cover — 6 种画布比例，4 种构图模式，单页极简

— F8 Diagram & Knowledge Map — 悬浮阶梯法则，贝塞尔平滑，去彩虹色

— F9 Report & LaTeX — Markdown → LaTeX → PDF，论证结构排版

11 / 13

克制即力量

— 文字是界面中最有力的元素，不需装饰

— 留白让每一个字都更有重量与呼吸感

— 克制让每一次出现都有意义与分量

12 / 13

感谢聆听

万形 · Wanxing

文字即界面 · 留白即设计 · 克制即力量

13 / 13