从极简到报纸：一次博客改版的经验与反思

偶然看到一个叫 Amp Chronicle 的设计风格——紧凑的多列排版、复古米色底、衬线标题、细实线分割——像一份印刷精良的老报纸。当时就想：我的博客能不能也变成这样？

一开始以为只是换个色调、调个字体的事。结果几乎每一个页面都被翻了个底朝天。

改一个颜色，牵动所有设计

改版的第一件事是换色调和字体。背景从冷白色换成米黄色，标题从无衬线体换成衬线体。就这两步，整个站的气质瞬间从"科技产品"变成了"羊皮纸手稿"。

但紧接着就出了问题——原先看着挺和谐的圆角卡片和半透明阴影，在暖色调的底色上突然变得格格不入。就像你把一套宜家的北欧家具搬进了一间中式书房，每一件单看都没问题，放在一起就哪哪都别扭。

于是圆角全部改成直角，阴影全部换成细实线边框，元数据区全部统一成小号大写字母——一环扣一环地调，最后几乎所有组件都重新过了一遍。

这件事让我意识到：设计系统是牵一发动全身的。 你以为只是换了个底色，其实是换了一整套视觉语言。不要指望只改一层就能停下来。

报纸风格最核心的视觉特征是多列排版。最直觉的实现方式是用网格布局——把页面切成三列四列，内容往里填就好了。

但实践中马上碰到一个问题：网格布局要求同一行的所有卡片等高。 我的内容长短差异很大——一条碎碎念可能就两行字，一篇长文能撑满半屏。它们被放在同一行里时，短卡片下方就会出现大块空白，像报纸排版时忘了填广告的版面。

后来换了一种"瀑布流"的方案。它的工作方式更像真正的报纸排版——内容从上往下自然流动，填满一栏再流入下一栏，每张卡片紧挨着前一张，不会有空白浪费。这正是我想要的效果。

选错工具的代价远不止"写几行代码"——而是在错误方向上反复调试、打补丁，最终还是得推翻重来。 有时候退一步想想问题的本质是什么，比埋头写代码更有价值。

日历组件是整个改版中被翻新次数最多的部分，前后试了三种方案，每一种都有各自"理论上没问题但实际不行"的故事。

第一次，把日历固定在屏幕右侧，滚动时始终可见。在普通屏幕上很完美，但在超宽屏幕上，日历和主内容之间的距离会随屏幕变宽而无限拉大。两边各自为政，像两个毫无关系的页面。

第二次，为了让日历紧贴内容区域，用了一种嵌套定位的技巧——外层把日历锚定到内容区右侧，内层让它跟随滚动。听起来很巧妙，但内层的滚动跟随机制直接失灵了。原因是外层的锚定方式破坏了内层所需要的前提条件。日历直接从页面上"消失"了。

第三次，不再耍花招。页面分成两栏——左边放内容，右边放日历。日历就老老实实跟着页面走。没有什么高级技巧，但它就是稳稳当当地工作着。

有时候最朴素的方案就是最好的方案。 技巧越多，隐含的前提条件就越多，翻车的概率也越大。

一个有意思的发现：最终日历在电脑端和手机端用的是完全不同的方案。

电脑端是前面说的两栏布局+侧边栏。手机端则完全不同——底部放一个浮动按钮，点击后弹出一个半透明面板。两套方案在代码中并存，根据屏幕宽度自动切换。

这让我意识到响应式设计不一定非得是"同一套布局在不同屏幕上缩放"。有时候，大屏和小屏的最优交互方式本身就不同，硬用同一套方案去适配两端，反而会两头不讨好。允许为不同场景设计不同的方案，反而更简洁。

还有一个需要平衡的问题：列表页应该展示摘要还是全文？

我的笔记类型很杂——有几十字的随想，也有带图片和代码的技术笔记。如果全部截断成两三行摘要，短随想刚好合适，但长文会丢失太多信息。如果全部展开全文，首页会被长篇内容撑得无法浏览。

最终方案是分层：首页作为入口，统一截断成简短的摘要，保持浏览效率；而笔记专属页面面向的是已经明确想看内容的读者，全文展开。同一个组件通过一个开关控制两种模式，不需要写两套代码。

不同页面承担不同职责，不需要用同一种方式展示内容。

收尾阶段都是些不起眼的小修补——清理布局迁移遗留的多余线条、修复标签文字过长时溢出卡片边界、让手机端的标题和按钮排在同一行……

单独看每一条都微不足道。但这些细节叠加起来，就是"大致完成"和"真正完成"之间的差距。

我越来越觉得，做前端最耗时间的从来不是搭主体框架，而是追平最后 10% 的视觉一致性。偏偏这 10% 才是用户能直接感知到的品质。