跳至内容
边境手记FIELD NOTES / PERSONAL BLOG
站点导航
← 返回归档

发布于 / 2026.09.18

在边界上,构建一个安静的阅读空间

从工业界面的秩序感出发,把视觉语言交还给文字。

有些界面擅长让人停留一秒,有些界面愿意陪人读完一篇文章。博客需要两者之间恰到好处的距离。

从信息开始

我们先确定页面承载什么:一份文章列表、一个正在阅读的段落,以及回到其他记录的路径。装饰随后到来,它应该帮助辨认这些层次。

让标题被看见,让正文被读完。界面的个性,不必以阅读的耐心为代价。

首页采用较强的几何结构;进入文章后,版面收束为一条舒适的阅读轴线。右侧目录只是索引,而不是另一个需要注意的面板。

留白也是导航

段落之间的空隙、标题之前的距离、文章结尾的留白,都在提醒读者当前的位置。手机上的留白会收紧,但文字的呼吸不该消失。

让颜色有职责

黄色用于需要采取行动的位置,青色用于文章链接。正文保持中性的黑白关系。深色模式重新定义阅读表面,而不是简单把整张页面反相。

元素作用呈现方式
行动按钮前往归档或开始阅读黄色强调
文章链接延伸阅读青色与下划线
正文持续阅读中性色、高对比度
元信息日期和标签小字号、清晰间距

内容与主题分离

文章仍然是普通 Markdown。设计可以改变,记录不需要跟着重写。

ts
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig({
  theme: 'arknights',
  themeConfig: {
    accent: '#ffd84a',
    outline: 'deep',
    motto: '在边界之外,记录日常。',
  },
})

行内代码如 themeConfig.outline 应当能被快速辨认。特别长的代码和表格在自己的区域内滚动,不应该把整个页面推到屏幕之外。

一张原创的视觉笔记

冷灰底色上的黄色斜面、坐标网格与圆形观察标记

图像是文字的补充。它使用简单的几何关系延续首页的语言,而不是直接搬用游戏里的素材。

继续记录

  • 让文章标题表达内容,而不是只表达情绪。
  • 为链接写出可理解的文字。
  • 使用真实的日期与标签整理文章。
  • 在移动设备和键盘上走一遍完整的阅读过程。

你可以从 文章归档 找到更多记录,也可以看看 这份手记的由来