概览
AboutQ 就是你正在阅读的网站。我希望它既能作为提交简历时的个人名片，也能长期存放作品与思考。访客应当很快知道我是谁、值得看什么；也愿意沿着页面继续走进去，了解作品背后的选择。
网站以“个人档案桌”为视觉方向，以“动线关卡”组织交互：首页放精选，各栏目放完整内容，动效保持克制。这篇文章记录这些设计选择及其实现方式。
问题与约束
个人主页往往同时承担介绍、作品索引和长文阅读。如果把所有信息平铺在首屏，读者很难判断重点；如果只留下强烈的视觉开场，又可能找不到具体项目。
首页先给出一条可以走完的路径：开场、作品、创作关注、经历、关于。首页介绍我的方向和代表作品，导航进入完整栏目。没有成熟内容的部分暂时关闭；故事编辑器和网站本身的设计过程，则放在“探索”栏目。
让访客顺着页面读下去
“个人档案桌”体现在编号、纸张层次、批注与阅读字体中；“动线关卡”则是一条明确的浏览顺序。访客不需要先学会特殊操作，向下滚动就能继续了解我。一些细节可以通过悬停发现，主要内容则直接显示在页面上。
左侧保留五个等距节点，而五段内容的实际高度并不相同。如果按整页像素直接计算进度，一个较长的作品段会占去大部分视觉长度。因此程序先判断读者处在哪一段，再把段内位置映射到相邻节点之间。节点表达的是阅读阶段，段内移动仍保持连续。
这种映射也有边界：进度条不是剩余字数或阅读时间的估计。点击节点到达对应段落，完整栏目仍由顶部导航进入。首页滚动不会把“作品”导航高亮为当前栏目，避免把首页精选误认为全部作品。
鼠标、手机和动态效果
悬停、弹性和 Q 角色的视线反馈，让界面能够回应动作。它们应该帮助确认“这里可以操作”“动作已经发生”，同时避免干扰阅读。正文保持稳定，重要信息不会只藏在动效里。
手机上没有持续悬停，主要链接和标题必须直接可见；长标题、卡片与正文依靠模板适配窄屏。系统选择减少动态效果时，页面保留内容与导航，收起持续运动和不必要的过渡。
字体也会影响体验。网站使用自托管字体，但网络并不总能及时提供它们。首屏等待有明确上限，失败时锁定系统字体，避免文字迟到后反复跳动。我更希望访客能及时、稳定地读到内容。
从一眼认识，到愿意深入
首页的五段是一次逐步展开的介绍。开场先给出姓名、方向和代表性的视觉反馈，让读者知道正在认识谁；作品精选接着提供具体例子，避免自我介绍停留在抽象描述。读者可以在这里进入感兴趣的项目，也可以继续往下看。
创作关注承接作品，解释我反复思考的问题，并通过“探索”入口展开方法与过程。经历摘要补充这些实践发生的背景，最后的关于与联系则让愿意继续了解的人找到下一步。每一段都回答一个问题，也给下一段留下继续阅读的理由。
首页因此需要有取舍。作品只放精选，长篇过程交给详情页，完整条目由顶部导航进入。读者可以顺着滚动建立整体印象，也可以随时从某个入口深入，不必先读完整个网站。
用反馈邀请探索
我希望页面有一点可触碰的感觉。首屏 Q 角色的视线回应鼠标，给介绍增加一个轻微的停留点；条目的悬停反馈提示这里可以进入，点击后再交给稳定的正文阅读。编号、留白和分段进度共同提供方向，让动效有明确的使用位置。
这些细节的吸引力来自回应：读者先做出动作，页面再给出反馈。滚动始终能抵达全部主要内容，不需要追逐角色或发现隐藏手势。对鼠标探索有兴趣的人可以多停留片刻，只想找作品的人也能直接进入。
这也是我对“动线关卡”的理解：为浏览安排起点、节奏和出口，同时保留选择。当前已经实现了这条路径与相应反馈；它能否让人更愿意读下去，还需要实际访客的反馈。
验证与局限
自动检查会确认内容格式是否正确、页面能否生成、站内链接和图片是否有效，以及草稿是否被排除在公开网站之外。桌面和手机的实际排版也做过检查。不过，网站是否让访客更快理解我的作品，还没有通过用户测试确认。
加入“探索”栏目后，重新检查了桌面和手机上的导航、长文与配图，也检查了减少动态效果时的五段进度。这些检查能发现页面问题；阅读顺序是否合适，还需要听听实际访客的感受。
内容维护工具另见《为自己和 AI 设计同一套内容工作流》。