站点升级手记 02：从导航、卡片到移动端，把页面体验重新打磨一遍
先解决页面的秩序感
一个技术博客最容易变成信息堆叠：导航一排、分类一堆、标签一堆、文章卡片一堆，看起来什么都有，但用户很难知道哪里是主线。前端升级的第一步，是重新建立页面秩序。
导航保留轻量、清晰的结构，不再让中间尺寸的屏幕把搜索框挤到下一行。顶部大图也重新调整了高度，不让它占满首屏，让用户一进入页面就能看到内容的开头。
卡片风格的回归
视觉上试过更深、更重、更夸张的方案，但最终证明，个人博客不适合长期停留在压迫感很强的暗灰风格。现在的方向更接近干净、轻盈、有层次的卡片系统：白色基底、柔和阴影、适度圆角、清楚的标题层级和更稳定的 hover 效果。
文章卡片的 hover 不再把文字淡到看不见；详情页里的上一页/下一页也从简单文字链接改成更明确的导航块，移动端不会挤压变形。
- 导航：保留 active 状态，避免选中态过度装饰。
- 顶部图：使用更合适的比例，不再压住首屏内容。
- 文章卡片：增强可读性，控制 hover 透明度。
- 详情页：优化标签、赞赏、上一页/下一页和广告位。
移动端不是顺手适配
移动端的问题更细：菜单展开不自然、关闭后页面跳动、赞赏弹窗不居中、背景还能滑动、搜索图标错位、点赞点踩按钮重复文字等。这些小问题单个看不大，但叠在一起会让网站显得粗糙。
这次升级把移动端当成主场之一处理，重新约束导航、弹窗、按钮、播放器和详情页布局。一个站点有没有被认真维护，往往就体现在这些边角交互上。
相关推荐
开发者工具
请我喝咖啡
如果内容帮到了你，可以赞赏支持继续更新。
赏