首页 / 分类 / 设计

设计方向备忘录:玻璃拟态如何不腻


骨架期样章之二,记录玻璃拟态 + 非对称杂志排版的取舍边界——哪些地方必须克制,哪些地方值得用力。

玻璃拟态最大的风险不是「不好看」,而是到处都好看,于是哪里都不重要

三条约束

  1. 模糊层级 ≤ 2 层backdrop-filter 嵌套会拖慢合成,移动端直接降级为实色面板。
  2. 面积受限:模糊只作用于小面积面板,且不超过视口的 40%。
  3. 只做点缀:个性符号(终端彩蛋、像素徽章)单屏不超过 2 个,尺寸不超过容器高度的 25%。

用力的地方

  • 首页的非对称栅格:精选卡跨两行,其余不等宽——这是拒绝模板脸的关键。
  • 文章页的排印密度:正文窄栏 680px、行高 1.85、行长 ≤ 40 全角字。
  • 实验区:一块蓝图网格背景的「实验室」,放小工具与彩蛋,是个人艺术家的签名位。

克制的证明

主题色总使用面积不超过画面 5%,正文永远是 --text——剩下的交给文字层级与留白(设计系统规范 v2.0)。 如果一个页面里到处都是强调色,那就等于没有强调色。

评论

由 GitHub Discussions 驱动 · giscus