界面设计 / 建站笔记

玻璃质感,也需要清晰的边界

用透明度、细边框和柔光建立层次,让文字始终清楚。

这篇笔记记录本站如何将玻璃拟态参考图转化为一个可以阅读的个人网站。重点是材质、层次与留白,而不是复刻仪表盘。

透明,不等于模糊

半透明填充、轻微的顶部高光、细边框和阴影,已经可以表达大部分玻璃质感。本站把背景模糊控制在导航等少数区域,卡片主要使用渐变与透明填充。

这样可以减少大面积背景采样,也能让普通手机在滚动时少一些渲染负担。

先看清,再看美

深蓝色背景与浅色正文形成稳定的阅读层次。蓝紫色用于标题、标记与装饰,薄荷绿和暖金只作少量点缀。

  • 正文使用较实的浅色,不靠低透明度制造层级。
  • 可点击元素提供键盘焦点样式。
  • 导航标明当前页面,筛选按钮报告选中状态。
  • 尊重系统的减少动态效果偏好。

让装饰停留在装饰的位置

首页轨道图形是为 WT Lab 绘制的原创 SVG,不携带统计含义。它只负责表达探索与连接,不代表任何访问量、商业指标或项目成果。

好的界面应当让内容变得容易接近,也让尚未补充的内容保持诚实。

继续阅读其他笔记