推倒重构博客UI的要点记录

过去几年，文章没写几篇，博客框架和页面设计换了不少。框架上从最初使用WordPress做后台，Nuxt.js做前端渲染， 到完全使用Nuxt.js开发前后端，再到VuePress静态网站。在VuePress上累计也迭代了三版UI设计了，最初是在官方 主题上进行修改，到后来修改部分太多干脆自己重写了一版，这一版本杂糅了memos、友链朋友圈、好物、豆瓣影音记录等 功能。这一版本开发时对于VuePress熟悉程度不高，踩了不少坑，代码实现上也不高效，整体代码的维护难度高，于是在快开发完成的时候弃用了。 后面也对整个功能、设计进行了不少思考，作为本次设计的指导基础。

本人也没有专门学习过UI设计，仅从个人主观判断出发，仅为分享。

专注重点

功能和网页设计上，自问哪些是必要的，哪些是可以省略的。如果不是必要的部分，就去掉。

比如第一版设计中的文章预览功能，虽然交互看上去很酷炫，但实际上并没有减少数据传输， 反而增加读者在使用上的障碍。

再比如上一版本增加的memos功能，我更多的想聚焦于个人成体系的文字展现，而不是个人动态、碎片化信息的展示。 至于豆瓣影音记录、好物列表等也是如此，该类展示过于倾向于个人动态的碎片化展示。

因此，本次设计我主要制定了以下目标： 1、突出站点内容（文章） 2、极致速度优化 3、清晰的层级、功能模块

线条、色块与留白

本次网站设计页面层级总体扁平化，也不采用阴影来区分层级，总体呈现一种一览无余的通透感。

在需要区分区域、层级的地方则只用线条与色块进行划分。线条在视觉上的影响相比色块更低，因此一般用于小功能区域的划分。 1-2px宽度的线条对读者阅读的干扰并不高，能在尽量不干扰的情况下起到划分作用并使读者保持关注于内容。 比如窄屏幕下的header采用线条与其他内容进行分割、Toc部分也通过线条进行分割；

色块则有明显的区分度，能让读者感受到文章内容的结束和功能区域的变化。 比如关联文章通过不同的背景色块来区分文章内容与关联文章部分，同时与评论模块进行了分割。

留白则指的是网页不进行过度设计并控制内容宽度。内容宽度主要从阅读时跳行的打扰次数与跳行时 找到下一行开始的打扰程度进行权衡，根据自身体验和各类专业印刷材料的宽度大致决定了本站目前采用的内容宽度在700px附近。 剩余空间基本留白处理，必要的信息则直接展示在页首（窄屏幕）或侧边栏（宽屏幕）下。展示内容总体保持统一，减少认知成本。

动效选择

由于整个网站在线条、色块与留白的组合下惠显得很素而丧失一些活力。因此在动效上进行了一些尝试，在添加动效时，出发点永远是基于逻辑来显示动画，避免动画对读者的干扰。 目前保留的动画有：宽屏幕下首页切换文章时左滑/右滑切换效果，归档页面标签选择效果，宽屏幕下TOC指示条效果，顶部阅读进度效果，搜索弹框效果，支持手势操作的抽屉组件( 带有回弹效果)等等。

页面细节处理

主要涉及手机端浏览器下的显示效果和触摸事件处理。很多网站打开菜单、搜索等遮罩层时，仍可以滑动缩放页面，虽然不影响功能，但是用来并不优雅，还会造成页面的跳动或者样式的缺失。 又或是点击输入框后页面出现放大、位移的问题，也会影响使用体验。因此，本站的遮罩层、输入框等均针对移动端进行了处理，带来稳定且优雅的移动端体验。

功能选择

删去memos页面、豆瓣影音页面、好物页面、友链文章汇总页面，PWA（用处不大）。

保留功能如下： 搜索功能（无需解释） 自动切换夜晚模式（虽然现在手机浏览器上自带阅读器大多功能完善，但还是免不了先访问网页再进入阅读器，因此也做了黑暗模式的适配，避免夜晚访问时出现突兀的大片白色） 首页保留了一部分数据统计（能在有一点成就感的同时催更我自己）和首页轮播图（用来展示置顶文章，但关闭了自动播放避免干扰）。 文章页保留了页面发布与更新时间（避免老文章未即时更新产生误导），Toc（方便找到文章节点），阅读预计时长（可供参考），阅读进度（集成返回顶部按钮），宽屏幕下文章内容字体切换（适用于电脑端没有阅读模式的情况下，手机端隐去）和评论功能。

内容关联

原来的版本中，上下篇文章仅按时间进行排序，推荐内容缺少相关性。本次调整为按文章分类进行推荐，并提供快速访问文章分类的入口。方便读者找寻相关文章。 新增的”附近地点“也是类似，从地理位置维度对文章进行关联，更能提供沉浸式连续阅读体验。

速度优化

再上面功能做了断舍离之后，总体代码量本身就出现了不少的下降。另外本次也重新阅读了VuePress的开发文档，对于各项函数功能也有了更深入的了解。因此在设计之初就 大体想好了所需的各项数据和传递方式，避免重复造成冗余。另外在第三方插件的加载上，包括搜索插件、评论插件、Katex、地图插件等都采用模块化设计，按需加载相关文件。

Have fun!