PLANET

Knowledge Base

Sidebar 设计

参考 sparkbites.dev 的信息密度和层级关系。

这次复刻的重点

我没有逐像素照搬 sparkbites.dev,而是保留了它最有辨识度的几件事:

  • 左侧深色窄栏
  • 顶部品牌区
  • 列表型菜单
  • 当前项高亮
  • 右侧大留白内容区

视觉处理

为了让页面不显得太模板化,这里额外做了几层处理:

  • 主内容卡片用了浅暖色渐变
  • sidebar 顶部加入了淡淡的橙色光斑
  • 标题使用更夸张的字重和紧凑字距

后续可扩展

如果你后面要继续增强,可以在 sidebar 里补:

  1. 分组标题
  2. 搜索框
  3. 标签过滤
  4. 深浅色切换