模块化比例尺

基于数学比例(黄金比例、五度、八度等)生成尺寸序列,用于排版、间距、布局。

步进数值pxrem (16基准)可视化

关于 模块化比例尺

模块化比例尺(Modular Scale)是基于数学比例的尺寸序列生成方法。从基准值出发,按选定比例递增或递减,生成协调一致的尺寸序列,可用于字号、间距、宽高等各种设计尺寸。

音乐比例对应

  • 小二度 1.067:差异微小,层级连续。
  • 大三度 1.25:平衡的差异,最常用。
  • 完全五度 1.5:明显对比,适合视觉型。
  • 黄金比例 1.618:符合美学的对比,自然和谐。
  • 八度 2:倍数关系,最简比例。

应用场景

  • 排版字号层级:H1-H6、正文、说明
  • 间距系统:margin/padding 8/12/16/24/32
  • 组件尺寸:按钮高度、输入框、卡片宽度
  • 响应式断点:sm/md/lg/xl

设计哲学

数学比例的协调来自自然界的规律。从古希腊神庙到现代设计系统,比例都是创造美感的关键。模块化比例尺让设计决策有据可依,避免凭感觉的随意数值,让整体更协调。