让界面安静一点，让内容发光

“有氛围”并不意味着每一个角落都需要发光。

在这篇示例笔记中，我们尝试为深色界面建立一些简单的秩序。主视觉承担情绪，卡片建立分组，文字负责把事情说明白。

先建立阅读顺序

读者通常先看标题，再扫过摘要，最后决定是否进入正文。字号、间距与颜色都应该支持这一条路径。

最值得强调的东西，应当少一点。 如果所有文字都拥有相同的亮度与重量，页面就失去了层次。

让玻璃材质有边界

玻璃卡片的核心不只是模糊。它需要一个相对稳定的底色、一条足够轻的边框，以及与背景之间可辨认的关系。

.reading-card {
  background: rgba(25, 21, 39, 0.8);
  border: 1px solid rgba(172, 148, 218, 0.2);
  border-radius: 15px;
  backdrop-filter: blur(14px);
}

卡片之外可以有光轨，正文下方最好保持平静。透明度也需要适度，避免背景细节穿透到文字后面。

动效只是一个标点

悬停时轻轻抬起，点击时及时响应，就足够让人理解界面可以操作。持续移动的装饰应该允许暂停，也应该尊重系统的减少动态效果偏好。

如果读者注意到动效，却忘记了正在读的内容，这个动效可能需要再克制一点。

用真实操作检查设计

把鼠标放下，试着只用键盘浏览页面。焦点是否清楚？搜索能否关闭？展开项目后，后续内容是否仍然容易理解？

设计的细节，经常藏在这些普通的动作里。它们不一定显眼，却会决定一个页面是否让人愿意停留。