在前端项目里保留手感

前端项目的“手感”通常来自很多很小的决定：按钮是不是有明确反馈，焦点是不是可见，暗色模式是不是只把颜色反过来，滚动时导航是不是稳定。

反馈不是装饰 ​

一个 hover 状态如果只改变颜色，用户能感觉到它存在；如果同时改变边框、纹理和投影，用户会更明确地知道自己正在操作一个可交互对象。

这次首页文章行使用了三层反馈：蓝色边框、低透明度纹理、标题下划线增强。它们都很轻，但组合起来足够清晰。

暗色模式的边界 ​

暗色模式不是把白色换成黑色。真正难的是边框、阴影和弱文本，因为它们在暗色里很容易消失，也很容易过亮。

我把边框和背景都做成 token，让同一个组件在两种模式下只切换变量，不切换结构。这样维护成本更低。

html.dark {
  --nav-bg-color: #121417;
  --shadow-blue-alt: 5px 5px 0 #3d7df514;
}

小结 ​

手感不是一次性设计出来的。它更像是一组约束，提醒我每次添加组件时都要考虑反馈、密度和状态。