重构博客 UI 过程中的部分要点记录
如你所见，这个博客时隔三年后又一次抛头换面。从最初魔改 Volantis，到后来改动实在太多索性自己重新写了一个 Hexo 主题「Cards」，以及这次用 Next.js App Router 重构博客 UI 体验。完整的使用 Next.js 重构 Hexo 博客文章一时半会儿怕是憋不出来——即便已经上线，本博客仍在快速迭代，等稳定后再花时间写也不迟。不过还是可以先借以本文记录部分关于 UI 方面的迷思，非常不专业，仅为分享。
显然我没有专门学习过 UI 设计，只不过看到一个界面有着快速的 好看/不好看 的主观判断。抑或是说，这只是我关于个人审美口味的总结，大可不必当作设计的准则看待。虽然应该不会有人如此高看我，但还是特此声明下。
纵观我几版博客，或多或少都有其他的影子，譬如之前的借鉴 Spencer 魔改 Gridsome 主题（发邮件沟通过，经过同意。）、借鉴 GitHub 样式，这次又拼凑了些 Next.js/Vercel 元素（右上角主题切换按钮）……这种借鉴无处不在，所以我也不打肿脸自诩「我的风格」而统称「我认为好看的风格」。
用线条划分区域和层次
其实我最初并不是采用这种方案，而是通过颜色和阴影来划分区域和层次。更具体地说——用一个带一定灰度的颜色作为背景底色，而内容区域则设为更接近白色的带阴影卡片，营造出在背景「上方」——更突出屏幕、距离用户更近——的感觉；在暗色模式下这种灰度关系则反过来，因为如果在亮色模式下「灰」对应的暗，那么暗色模式下「灰」反而对应更亮，如果用 HSL 空间表示色彩，亮色下背景到内容好比是 (0,0,93%) => (0,0,100%) 而暗色下就是 (0,0,0%) => (0,0,7%)，趋势是一致的。时至本文写作，你仍然可以在 Theme Cards Demo 中看到这种样式。
不过用颜色和阴影划分区域和层次有一些难受之处：
- 假如在内容之上还有层次，譬如 ToC、导航栏，仅靠阴影、不靠底色的边界划分较为模糊，除非再垫一层遮罩
- 暗色模式下，我对着取色器调了大半天，都没能找到一个保证 清晰、同时 不具侵扰性 的阴影颜色
此时用线条划分区域和层次便进入我的考虑范围：
- 在第一眼扫到页面的时候就能借之快速定位主要内容区域，且关注内容的时候也容易忽略仅有 1px 的线，无论在亮色还是暗色模式下都比较好地做到清晰、不具侵扰性
- 更加扁平化，连背景和内容都不作层次区分，而是直接在背景划区域
- 肤浅地说，GitHub 在用，我觉得好看
因此就有了现在这一版方案，不过最初亮相并非在这次 Next.js 重构博客中，在之前魔改 Hexo 博客（没错，即便自己写的主题也乱改，由于风格不符就没提交进主题里）。
线条宽度统一为 1px、线条样式统一为 solid，线条颜色在亮色模式下取 #E1E4E8 而暗色模式下取 #30363D。顺带一提，Next.js 官网的 #EAEAEA/#333333 也同样看着舒服。
固守最大宽度
在之前「Cards」阶段——还在使用单栏主题的时候，主栏的最大宽度就被我设置成 738.4px。极端情况下，即便用户使用横向 8000+ 像素的带鱼屏，也只有中间 10% 不到的狭小区域显示内容。这次重构后，虽然双栏总宽度看起来较原来有所增加，但是抛开侧栏占据宽度后主栏的宽度反而是降低的——从 738.4px 降至 718px。
为何如此 顽固不化 呢？甚至 Tailwind CSS 中明明有 .container 却偏偏不用？切听我狡辩。本博客主要依旧是展示文字内容，穿插其中的图片、公式、代码块等充其量算陪衬。而对于大段的文字内容，尽管反复跳行（一句话换一行，a.k.a. 公众号体）令人恼火，一行过于长同样令人困扰——找到下一行行首需要额外的专注，还容易打断当下阅读。事实上，Tailwind CSS 插件 @tailwindcss/typography 同样默认限制段落的最大宽度为也颇为相近，进一步支持了我的想法。
而对于使用 Tailwind CSS 编写的主题，支持 响应式布局 变得更加便捷也理所当然，在此之前我是用 var() 在 CSS 中调用变量以实现响应式布局，现在只需要在样式 className 前追加 sm:/md:/lg: 等前缀即可专门设定特定布局下的样式，甚至无需担心与暗色模式、其他选中器的优先级冲突，Tailwind CSS 会自动处理好这些琐事。
当然，这还是暂时放弃了部分带鱼屏用户的体验，未来或许会尝试自动多页的方案专门优化带鱼屏下的浏览体验。
用透明度表达强弱
在部分热门的 Markdown 样式中，Blockquote 部分较正文字体颜色灰上不少；对于诸如日期、分类、标签等文章 meta 信息的展示，我们也比较喜欢使用一个类似的灰色来弱化；对于一些按钮、链接，我们也往往会选择一个主题色来强调，例如我之前也喜欢用 #FFC125 作为主题色强调链接。
不过这种方案有个最直接的问题——暗色模式需要单独适配。举个例子，一个简单的弱化颜色 #888888 在亮色模式下灰得恰到好处，但是切换到暗色模式时——这种更细分的样式往往会覆盖默认字体颜色——反而会亮得十分醒目而达不到弱化的效果。
当然，你可以使用透明度来借助背景颜色的变化以模糊亮、暗色模式下颜色表达的差异——我之前用 #FFC125 作为主题色其实还额外设置了 50% 透明度。不过既然如此，至少用作弱化的灰色，为何不直接一步到位——使用透明度来弱化呢。据不严谨感受，opacity: 60% 在亮、暗色模式下都有比较接近的弱化效果。
链接我暂时还是用着蓝色，该颜色使用之广泛，用户几乎不需要额外熟悉即可根据直觉判断为链接。至于主题色 #FFC125 何去何从，我老了 它大概不会回来了。
