内容型个人网站设计规范
内容型个人网站设计规范 V1.0
目标：建立一种长期可维护、低视觉噪音、高信息效率、阅读友好的个人网站设计体系。
关键词不是“极简”，而是：
高信息价值 + 低视觉噪音。
一、核心设计哲学
网站不是广告海报。
网站不是设计 Demo。
网站也不是为了展示：
“我会多少技术。”
真正目标：
用户能够舒服地找到、理解、浏览和使用内容。
二、极简 ≠ 简陋
禁止把“极简”理解成：
- 大量空白；
- 一个巨型标题；
- 几张卡片；
- 一个 CTA；
- 页面几乎没有实际信息。
这属于：
Demo Minimalism。
真正的极简是：
删除无意义的信息，但保留完整功能。
所以：
可以信息丰富。
但不能：
视觉嘈杂。
三、像书，而不是模仿书
网站阅读体验借鉴成熟出版物：
- 字号；
- 行距；
- 段落； -页边距； -层级； -章节感； -目录； -索引； -阅读节奏。
但必须保留网站优势：
-搜索； -导航； -超链接； -动态信息； -相关推荐； -即时跳转； -回退路径。
目标：
用户像看书一样自然，却拥有比书更强的信息导航能力。
四、禁止广告式标题滥用
例如：
用户已经进入：
/blog
页面顶部再使用：
BLOG
占据屏幕 30%～50%。
这是典型的信息重复。
用户已经知道自己在哪里。
标题必须承担信息任务。
判断标准：
删除这个标题之后，用户是否损失信息？
如果答案是：
没有。
则降低它的视觉等级或删除。
五、任何页面都必须可回退
禁止：
首页 → 音乐 → 专辑 → 歌曲
然后只能依赖：
浏览器返回键。
网站内部必须提供自然导航：
- Logo → 首页；
- Breadcrumb；
- 上一级；
- 同级导航； -相关推荐。
用户任何时候都应该知道：
我在哪里。
我怎么来的。
我还能去哪。
六、主导航遵循“真实内容原则”
导航不是未来规划表。
导航只显示目前真正具有内容价值的栏目。
推荐分类逻辑：
Project / 项目
特点：
-针对某个明确目标； -完整作品； -有明确边界； -有开始与结果。
Resource / 资源
特点：
-通用； -可复用； -不依赖某个项目。
例如：
-工具； -网站； -模板； -Prompt； -字体； -组件； -资料； -链接收藏。
Demo / 演示
特点：
-独立视觉效果； -交互效果； -HTML Demo； -创作过程中产生的小作品； -不是完整项目； -不准备继续开发。
可以：
-在线查看； -下载； -查看源码。
但不要包装成完整项目。
Docs / 文档
特点：
解决问题。
例如：
-AI 协作框架； -工作流； -方法论； -操作说明； -开发经验； -规则模板； -技术说明。
用户访问目的：
我要找到答案。
Diary / 日记
日记只负责记录。
不强迫它：
-教学； -SEO； -知识输出； -方法论； -商业价值。
日记可以只是：
今天发生了什么，我是怎么想的。
这与文档必须分开。
About / 关于
解决：
这个网站是谁做的？
为什么存在？
作者是谁？
而不是写成企业宣传册。
七、没有内容不要造栏目
宁缺勿滥。
如果栏目只有：
1 个页面。
甚至没有内容。
不要为了：
看起来像完整网站
把它放到主导航。
网站应该像树：
内容先长出来，枝条才出现。
八、首页不是仓库
首页承担三个任务：
1. 让我知道这里是什么
2. 让我看到最近有什么
3. 告诉我下一步去哪
不要承担：
展示网站所有内容。
九、首页推荐结构
推荐：
┌──────────────────────────────────────────────┐
│ Logo 项目 文档 日记 资源 关于 │
├─────────────────────┬────────────────────────┤
│ │ Clock │
│ ├────────────────────────┤
│ 主内容区域 │ 站长信息 │
│ ├────────────────────────┤
│ │ 更新日历 │
│ ├────────────────────────┤
│ │ 最近访客 │
│ │ │
└─────────────────────┴────────────────────────┘右侧栏不是控制台。
它属于：
Quiet Context Layer
安静的信息上下文层。
用户可以看，也可以完全忽略。
十、右侧时钟
允许存在。
它并非核心功能，却可以承担：
-个性； -品牌记忆； -时间感； -网站生命感。
设计建议：
-小； -机械感； -黑白； -红色秒针； -适度阴影； -不做夸张动画。
原则：
它可以无用，但不能碍事。
十一、更新日历
这是非常值得保留的特色组件。
功能定义不是：
普通日历。
而是：
网站时间轴 / Freshness Map
例如：
August 2026
M T W T F S S
1 2
3 4 5 ● 7 8 9
10 ● 12 13 14 15 16
17 18 19 ● 21 22 23绿色点：
当天存在新内容。
Hover / Tap：
8 月 20 日
新增文章
《为什么 AI 越做越像 Demo》
新增项目
Music Player V1只展示：
用户关心的更新。
不要展示：
-修 CSS； -改按钮； -修 typo； -后台调整。
十二、实时更新原则
如果用户正在浏览网站时出现新内容：
禁止：
-弹窗； -toast 疯狂提醒； -声音； -强制刷新； -闪烁通知。
推荐：
一个很轻的绿色点亮起。
或者：
“15:32 新增 1 篇内容”
像朋友圈出现新动态一样：
网站活着，但不打扰我。
这是网站的：
Presence / 在场感
十三、资源页设计
资源页不是链接垃圾场。
每个资源至少包含：
[Icon]
Product Name
官方介绍：
官方的一句话定位。
我的备注：
为什么我留下它。官方介绍负责：
它是什么。
你的备注负责：
为什么值得看。
这会让资源页从：
“收藏夹”
升级为：
“判断库”。
十四、视觉体系
主题只保留三套：
Light
白色阅读。
Dark
黑色阅读。
Eye Care
护眼阅读。
不要混搭成五颜六色的页面。
三套主题：
-布局相同； -层级相同； -尺寸相同； -功能相同。
只改变颜色系统。
首次访问可以跟随系统主题。
用户手动选择后：
优先记住用户选择。
十五、视觉语言
默认：
-直角； -少圆角； -无玻璃拟态滥用； -无巨大渐变； -无霓虹背景； -无无意义光效； -无自动轮播； -无大片 Hero 广告设计。
强调：
-排版； -留白； -字体； -边界； -比例； -对齐； -节奏。
十六、字体
如果拥有自己的字体：
不要全站滥用。
建议：
品牌字体：
- Logo； -标题； -少量重点。
正文：
必须优先保证阅读。
字体属于：
品牌味道。
不能牺牲：
阅读效率。
十七、页面设计判断公式
增加任何元素之前，问：
它告诉用户什么？
用户什么时候需要它？
删除它有什么损失？
如果：
没损失。
删除。
如果：
偶尔需要。
降低视觉权重。
如果：
完成任务必须。
提高权重。
十八、最终设计目标
不是：
用户觉得这个网站设计真厉害。
而是：
用户几乎意识不到设计的存在，却一直知道该怎么用。
这才是长期耐看的设计。