无需登录 数据私有 本地保存

黄金比例布局尺寸计算 - 1.618展布

前端设计 计算工具 布局 计算 黄金比例
107
0
0
0
🐚

黄金比例布局尺寸计算

基于黄金比例 φ = 1.618，快速计算网页布局、UI设计、平面设计中的理想分割尺寸

px
0位小数
总宽度
1440
100%
点击复制
大段（黄金段）
890
≈ 61.8%
点击复制
小段
550
≈ 38.2%
点击复制
61.8%
38.2%
大段: 890 px 小段: 550 px
每一级对上一级的大段再次进行黄金分割
黄金矩形

长宽比为 1.618:1 的矩形，内部可按黄金比例无限分割

宽高比 = 1.618 : 1（黄金矩形）
设计应用建议
  • 网页 两栏布局：主内容区占 61.8%，侧边栏占 38.2%
  • 图文 图片与文字比例：图片高度占 61.8%，文字区域占 38.2%
  • 卡片 卡片宽高比使用 1.618:1 或 1:1.618
  • Logo 使用黄金比例圆和矩形构建标志图形
  • 字体 标题与正文大小比例接近 1.618（如 26px/16px）
  • 间距 大间距与小间距的比例保持 1.618:1
常见问题与知识点
黄金比例（Golden Ratio），通常用希腊字母 φ（phi） 表示，数值约为 1.6180339887...。它的定义是：将一条线段分为两段，使得全长与较长段之比等于较长段与较短段之比，即 (a+b)/a = a/b = φ ≈ 1.618。这个比例在自然界（贝壳螺旋、向日葵种子排列）、艺术（达芬奇作品）、建筑（帕特农神庙）和现代设计中广泛存在，被认为是视觉上最和谐的比例之一。
在网页设计中，黄金比例最常见的应用是两栏布局：将页面主体内容区设置为总宽度的约61.8%，侧边栏设置为约38.2%。例如，在1440px宽的设计稿中，主内容区约为890px，侧边栏约为550px。此外，黄金比例还可用于：
• 字体层级：标题/正文 = 1.618（如h1为39px，正文为24px）
• 间距系统：大间距/小间距 = 1.618
• 图片比例：使用1.618:1的宽高比
• 卡片布局：网格系统中使用黄金比例确定列宽
三分法将画面分为1:1:1三等份（比例1:1），关键元素放在分割线上，比例约为33.3% / 66.7%。
黄金比例分割约为38.2% / 61.8%（比例1:1.618）。
两者的数值接近但不同。黄金比例的分割点更偏向中心，视觉上更加和谐自然。三分法更容易快速应用（尤其是摄影构图），而黄金比例在精细设计中能提供更优雅的比例关系。许多设计师会将两者结合使用。
本工具支持三种计算模式：
1. 输入总宽度：自动计算大段（×0.618）和小段（×0.382）
2. 输入大段尺寸：反推总宽度（÷0.618）和小段（大段×0.618）
3. 输入小段尺寸：反推总宽度（÷0.382）和大段（小段×1.618）
只需点击上方的模式按钮切换，输入已知数值即可。这在需要根据固定内容区域（如广告位、固定侧边栏）来推算整体布局时非常实用。
黄金比例的历史可追溯到古希腊时期（约公元前300年），欧几里得在《几何原本》中首次书面描述了这一比例。数学上，φ = (1 + √5) / 2 ≈ 1.618033988749895，这是一个无理数，其小数部分无限不循环。有趣的是，φ的倒数恰好是φ-1（即0.618...），这是唯一具有此性质的数字。斐波那契数列（1,1,2,3,5,8,13,21...）中，相邻两项的比值会逐渐趋近于黄金比例——这也是黄金比例与自然界紧密关联的数学基础。
多级递归分割是指对黄金分割后的大段再次进行黄金分割，形成嵌套的比例结构。例如：
• 第1级：61.8% + 38.2%
• 第2级：38.2% + 23.6% + 38.2%（对大段再分割）
• 第3级：23.6% + 14.6% + 23.6% + 38.2%
应用场景包括：三栏布局（将大段再次分割为两个黄金比例的子区域）、复杂网格系统、信息层级设计等。本工具的多级分割面板可直观展示这一递归关系，帮助设计师快速确定多层级的尺寸分配。
精确黄金比例 φ = (1 + √5) / 2 ≈ 1.618033988749895 | 计算结果四舍五入至所选精度
已复制到剪贴板
🔧 相关工具