寂静的架构：为了深度专注的设计

引言

在传统平面设计中，留白（或负空间）不仅仅是一个”空”的区域。它是一个主动的元素。它提供呼吸空间、结构层次，并创造出优雅感。

当这个概念被转化到数字界面时，它变得更为关键——因为认知负荷。

“完美不是当没有什么可以添加时，而是当没有什么可以移除时。” — Antoine de Saint-Exupéry

核心原则

1. 排版的克制

我们限制自己使用一个严格的排版尺度：

标题: Manrope, 700, 5rem
副标题: Manrope, 600, 2rem
正文: Inter, 300, 1.125rem, line-height: 1.8
引用: Inter, 400, 1.125rem, italic

2. 色彩的克制

• 背景: #F8F6F2 (象牙白)
• 次要背景: #EDE8DF (柔沙色)
• 文字: #2B2B2B (深炭灰)
• 次要文字: #5A5A5A

只有一个强调色：#355C7D (深蓝)

3. 空间的克制

阅读列宽度限制在 680px - 720px。这是人眼舒适阅读的黄金宽度。

技术实现

使用 Astro 框架，我们可以实现零客户端 JavaScript 的静态站点：

// 服务端渲染，零客户端 JS
export default function Article() {
  return <article class="reading-content">
    <h1>{title}</h1>
    <div class="prose">{content}</div>
  </article>;
}

划词翻译的实现

// 监听鼠标释放事件
document.addEventListener('mouseup', () => {
  const selected = window.getSelection().toString().trim();
  if (selected.length > 1) {
    // 显示翻译/解释菜单
    showTooltip(selected);
  }
});

结语

在这个充斥着无限推送和通知的时代，构建尊重用户注意力的界面是极尽奢侈的。

我们不是在添加更多功能，而是在移除不必要的干扰。

---

在技术与安宁的交界处。