📘 《Fibonacci 在 UI 设计中的应用》

Fibonacci Sequence in UI / UX Design

一、什么是 Fibonacci？

Fibonacci（斐波那契） 是一组遵循“前两项之和等于后一项”的数学序列：

[
1, 1, 2, 3, 5, 8, 13, 21, …
]

它的相邻项比值趋近于 黄金比例（0.618 / 1.618）。

黄金比例被证明能带来更舒适、更自然的视觉体验，因此 Fibonacci 广泛用于：

• 建筑
• 视觉艺术
• 摄影构图
• 产品工业设计
• 平面设计
• UI/UX 交互
• 数据可视化
• 大屏展示布局

二、为什么 Fibonacci 在 UI 设计中这么重要？

✔ 1. 它让界面布局更自然

界面中的模块大小、边距、间距采用 Fibonacci 比例，可以呈现：

• 自然层次
• 清晰的重点
• 舒适的视觉流

不死板，不平均，不僵硬。

✔ 2. 信息更易被用户吸收

因为黄金比例符合人类视觉习惯，信息结构按 Fibonacci 排布会让用户感到“顺眼、舒服、有秩序”。

✔ 3. 在复杂界面中形成和谐

大屏、仪表盘、后台系统往往内容多、层级多。
Fibonacci 的不均衡关系（1→1→2→3→5）能让复杂信息变得有序。

✔ 4. 自动形成信息权重

• 大模块 = 5
• 次模块 = 3
• 辅助信息 = 2
• 小标签、状态 = 1
• 标注、徽章 = 1

这就是天然的信息架构。

三、Fibonacci 在 UI 设计中的 6 大应用场景

⭐ 1. 布局（Layout）

使用 Fibonacci 作为布局比例，例如：

• 主区域：5 份
• 次区域：3 份
• 图表区：2 份
• 数据卡片：1 份
• 高亮警告：1 份

示例布局（大屏）：

[ 5 ] 主展示（地图 / 网络拓扑 / 运营总览）
[ 3 ] 次展示（告警 / 趋势图）
[ 2 ] 辅助信息（指标卡片）
[ 1 ] 高亮（KPI）
[ 1 ] 功能区域（过滤器 / 时间选择）

⭐ 2. 网格系统（Grid System）

将 UI 网格按 8/13/21/34 划分，而不是平均等分，会让界面更加动态、有韵律。

⭐ 3. 字体层级（Typography）

Fibonacci 用于字体大小体系非常自然：

12 → 14 → 16 → 20 → 24 → 32 → 48

这是完美的标题层级体系（非常适合大屏标题）。

⭐ 4. 容器与卡片大小（Card / Widget）

卡片尺寸建议按 Fibonacci 增长：

• 144px
• 233px
• 377px
• 610px
  …

这种大小之间的“跃迁感”明显，但又统一。

⭐ 5. 间距（Spacing）

间距系统可以这样设计：

4, 6, 10, 16, 26, 42  （≈Fibonacci）

比传统 “4/8/12/16” 更有韵律和节奏。

⭐ 6. 配色（Color Harmony）

这是你最关心的。

用 Fibonacci 做配色分成三个方向：

（1）颜色数量

1 → 极简
3 → 标准系统
5 → UI 完整体系
8 → 大屏图表体系

（2）颜色面积比例

5 : 3 : 2 : 1 : 1

• 背景：5（50%）
• 主色：3
• 辅助：2
• 强调：1
• 点缀：1

（3）HSL 色相偏移

主色 H：

H + 30° × (1, 2, 3, 5)

这就是黄金色相分布。

四、Fibonacci 在大屏系统中的实战应用

以你正在设计的：

• 综合资源大屏
• 物理层
• 逻辑层
• 用户层
• 运维
• 业务

我们可以这样应用 Fibonacci：

1. 布局

将主区域占比设为 5（40%~55%），次区域 3（20%~30%）。
小组件分别是 2、1、1。

2. 字体体系

• H1：48
• H2：32
• H3：24
• H4：20
• 正文：16
• 辅助：14 / 12
  完美从 Fibonacci 推导。

3. 色板体系

每个大屏 5 色：

• 背景（5）
• 主色（3）
• 辅助（2）
• 强调（1）
• 点缀（1）

这就是你前面用的“黄金配色法”。

4. 图表层级

大屏图表线条粗细、透明度、颜色权重用 Fibonacci 来体现“信息权重”。

五、Fibonacci UI 设计黄金口诀（适合内部规范里写）

**布局用 5:3:2:1:1
字体用 12→14→16→20→24→32→48
配色用 5 色体系
色相用 +30°×(1/2/3/5)
间距用 Fibonacci 间距**
—— UI 自然统一，不生硬、不突兀。

六、总结（可直接放在 PPT / 文档结尾）

Fibonacci 带来的不仅是“比例好看”，
而是：

• 视觉节奏
• 信息层级
• 可读性增强
• 界面统一性
• 降低设计复杂度

在大屏、仪表盘、后台等复杂系统中，Fibonacci 几乎是最快速、最高效的设计系统构建方式。

斐波那契（Fibonacci）——意大利数学家介绍

🇮🇹 一、斐波那契是谁？

斐波那契（Fibonacci） 是意大利中世纪最重要的数学家之一，本名：

Leonardo Pisano Bigollo

（意为“比萨的莱昂纳多”）

现代人叫他“Fibonacci”，来自拉丁语 filius Bonacci（邦纳奇之子） 的意译。

• 出生：约 1170 年
• 逝世：约 1240 年 – 1250 年
• 国籍：意大利
• 职业：数学家、学者
• 活动地：比萨共和国（现在意大利托斯卡纳）

他被称为 “中世纪欧洲最伟大的数学家”，主要贡献是把阿拉伯数学体系带入欧洲，改变了整个西方的数学发展。

📘 二、他的重大贡献

1. 把“印度-阿拉伯数字系统”带到欧洲

在斐波那契之前，欧洲普遍使用 罗马数字，计算困难且效率极低。

斐波那契在他的著作《自由算盘书》（Liber Abaci，1202）中，第一次系统地介绍：

• 0–9 的数字体系
• 位值制
• 四则运算
• 商业计算法（货币、利息、重量换算等）

这部书对欧洲数学、商业、银行体系影响巨大。

📌 可以说，是斐波那契让欧洲开始用上了“1234567890”。

2. 发现并推广了“斐波那契数列”

在《Liber Abaci》的一道“兔子繁殖问题”中，他提出：

1, 1, 2, 3, 5, 8, 13, …

这个数列后来被数学家命名为：

Fibonacci Sequence（斐波那契数列）

其比值逼近著名的：

黄金比例（0.618 / 1.618）

如今它广泛应用于：

• 自然科学（植物螺旋、海螺、向日葵）
• 建筑艺术
• UI/UX 设计（布局、配色、间距）
• 金融技术分析
• 算法设计（动态规划、堆结构）

3. 推动了数学习惯从“算盘式”向“代数式”转变

斐波那契的工作极大促进了：

• 代数思想的引入
• 阿拉伯数学方法在欧洲的普及
• 商业数学（如利息、换算）在欧洲的规范化

欧洲从此进入 数学科学化 的时代。

🌍 三、斐波那契的世界影响

✔ 1. 是“现代欧洲数学”奠基人

他把东方的先进数学带入西方。

✔ 2. 是“黄金比例美学”的数学根源

今天 UI 设计用的黄金比例、Fibonacci 配色、Fibonacci 布局，都源自他的研究。

✔ 3. 被公认为：

“中世纪与文艺复兴之间最重要的数学桥梁人物”

📜 四、其主要著作

🧩 五、关于他名字的小知识

• “Fibonacci” 并不是他的真实姓氏
• 是 19 世纪学者 Guilliaume Libri 才给他取的外号
• 意思是 “Bonacci 家族的儿子”

所以英文中称他为：

• Fibonacci
• Leonardo Fibonacci
• Leonardo of Pisa

🏆 六、总结

**斐波那契是把阿拉伯数字带入欧洲的人，
他所提出的斐波那契数列与黄金比例影响了数学、艺术、建筑、设计、投资以及现代 UI 设计。
他是中世纪最伟大的数学家之一，也是我们今天设计体系的无形导师。**