有些界面擅长让人停留一秒,有些界面愿意陪人读完一篇文章。博客需要两者之间恰到好处的距离。
从信息开始
我们先确定页面承载什么:一份文章列表、一个正在阅读的段落,以及回到其他记录的路径。装饰随后到来,它应该帮助辨认这些层次。
让标题被看见,让正文被读完。界面的个性,不必以阅读的耐心为代价。
首页采用较强的几何结构;进入文章后,版面收束为一条舒适的阅读轴线。右侧目录只是索引,而不是另一个需要注意的面板。
留白也是导航
段落之间的空隙、标题之前的距离、文章结尾的留白,都在提醒读者当前的位置。手机上的留白会收紧,但文字的呼吸不该消失。
让颜色有职责
黄色用于需要采取行动的位置,青色用于文章链接。正文保持中性的黑白关系。深色模式重新定义阅读表面,而不是简单把整张页面反相。
| 元素 | 作用 | 呈现方式 |
|---|---|---|
| 行动按钮 | 前往归档或开始阅读 | 黄色强调 |
| 文章链接 | 延伸阅读 | 青色与下划线 |
| 正文 | 持续阅读 | 中性色、高对比度 |
| 元信息 | 日期和标签 | 小字号、清晰间距 |
内容与主题分离
文章仍然是普通 Markdown。设计可以改变,记录不需要跟着重写。
ts
import { defineValaxyConfig } from 'valaxy'
export default defineValaxyConfig({
theme: 'arknights',
themeConfig: {
accent: '#ffd84a',
outline: 'deep',
motto: '在边界之外,记录日常。',
},
})行内代码如 themeConfig.outline 应当能被快速辨认。特别长的代码和表格在自己的区域内滚动,不应该把整个页面推到屏幕之外。
一张原创的视觉笔记
图像是文字的补充。它使用简单的几何关系延续首页的语言,而不是直接搬用游戏里的素材。
继续记录
- 让文章标题表达内容,而不是只表达情绪。
- 为链接写出可理解的文字。
- 使用真实的日期与标签整理文章。
- 在移动设备和键盘上走一遍完整的阅读过程。