这个网站现在的视觉方向很明确：近黑、克制、偏产品界面，不做传统博客常见的封面流、厚卡片和大面积装饰。
它想要的不是“热闹”，而是安静、清楚、耐看。页面主要靠颜色层级、排版、细线、留白和轻量交互建立秩序。读者进入页面时，注意力应该先落在标题、摘要、日期和分类上，而不是落在背景、动效或卡片装饰上。
这套风格可以概括成一句话：用产品界面的克制感来呈现个人技术内容。
整体气质#
这个网站不是杂志式博客，也不是作品集首页，更不是 SaaS landing page。
它更接近 Linear / Craft 这类产品界面的气质：
- 背景接近纯黑。
- 文字层级清楚。
- 强调色很少。
- 分区靠细线和留白完成。
- 交互反馈轻，不做表演。
这种风格的重点不是“酷”，而是让页面长期看起来稳定。技术内容本身已经有足够的信息密度，视觉上不需要再增加太多装饰层。
颜色：近黑画布和单一强调色#
配色上不做多套主题色，也不追求丰富的色彩变化。整个网站固定使用近黑画布、灰阶文字和单一 lavender-blue 强调色，让颜色只负责层级和交互提示，不成为装饰主角。
主要颜色大概是这样：
- 画布：
#010102 - 面板：
#0f1011/#141516/#18191a - 主文字：
#f7f8f8 - 次级文字：
#d0d6e0 - 弱信息：
#8a8f98/#62666d - 分割线：
#23252a - 强调色：
#5e6ad2
强调色只用于链接、focus ring、少量可点击状态和图里的关键标记。不要把它铺成渐变，也不要发展出一组红黄绿蓝的状态系统。页面大部分时间应该由黑、灰、白和细线完成表达。
排版：标题清楚，元信息退后#
字体上主要分两类：
Inter/SF Profallback：标题、正文、导航和摘要。JetBrains Mono：日期、数量、状态、短标签和小型 metadata。
标题和正文负责阅读，metadata 负责扫描。日期、数量、latest、active 这类字段不应该抢过文章标题，所以使用更低对比、更小字号、更稳定的等宽字体。
比如这类信息适合写成紧凑字段：
3 notes / 2026.05.09 / active它不需要解释太多，只需要让读者扫一眼就知道状态。
页面结构：少面板，多细线#
这个风格里最常用的元素不是按钮，也不是图标，而是细线。
细线主要做三件事：
- 分隔 section。
- 建立阅读节奏。
- 给信息一个边界，但不打断页面。
页面不需要到处放卡片。真正需要承载一组内容时，可以使用低对比 surface；其他时候，用一条 hairline 和合适留白就够了。
深色页面尤其需要控制密度。如果元素贴得太近，会显得压；如果每个模块都有背景，又会显得碎。现在的做法是：重要区域才有 surface，大部分列表和分区交给细线处理。
文章列表：像 row，不像 card#
文章列表不适合每篇文章都做一个独立卡片。
卡片太多以后，页面会被边框、阴影、圆角和封面切碎，读者反而需要在视觉噪声里找标题。当前列表更接近 issue list 或 changelog row：
- 标题是主信息。
- 摘要是次信息。
- 日期靠右，用等宽字体。
- 条目之间用细分割线分隔。
- hover 只做轻微变亮和箭头位移。
这种形式更适合技术博客。读者浏览列表时，主要是在判断主题是否相关，不是在看封面。
首页：克制，不做大型 hero#
首页也遵循同一套视觉原则：不要厚重 hero，不要大面积背景图，不要把欢迎语做成主视觉。
顶部只需要清楚的站点标题和一句说明；主要内容区域保持足够留白；最近更新用轻量列表承接。这样页面会更像一个可长期维护的内容界面，而不是一次性的宣传页。
首页可以有明确的分区，但分区感不靠重背景和强边框，而靠标题层级、细线、字段和留白。
交互：可识别，但不抢内容#
交互只保留几类必要反馈：
- 正文链接默认就能被识别，使用 lavender-blue 和下划线。
- 链接 hover 时变亮，不加光效。
- 列表项 hover 时轻微变亮，箭头小幅移动。
- focus 状态使用细的 lavender-blue outline。
这些反馈的目的只是告诉用户“这里可以点”。个人技术博客的交互应该更像编辑器或文档工具：稳定、明确、存在感低。
主动不做的东西#
这次设计里有一些东西是主动避开的：
- 不做大面积渐变背景。
- 不做厚重毛玻璃卡片。
- 不给每篇文章配封面图。
- 不在 footer 重复堆导航。
- 不用绿色状态点制造“在线感”。
- 不做过度圆角、厚重阴影和发光效果。
这些东西不是不能用，而是会把站点带到别的方向：SaaS landing page、作品集首页，或者通用 dashboard 模板。这个博客目前更适合保持成一个安静的内容系统。
总结#
这个网站的视觉风格可以概括成：近黑画布、灰阶层级、单一强调色、细线分区、低对比元信息和轻量交互。
后续调整也应该沿着这个方向走。不要为了“更丰富”而加装饰，而是继续降低视觉噪声，让标题、摘要、时间和分类这些真正有用的信息更容易被看到。
Reply by Email