重构博客 UI 过程中的部分要点记录
原文中文，约2400字，阅读约需6分钟。
📝
内容提要
文章讨论了作者对博客界面设计的思考与改进，主要使用 Next.js 重构博客 UI。作者分享了个人审美和设计灵感，强调颜色、阴影和线条的应用，以及响应式布局的支持，旨在提升用户体验。
🔎
延伸解读
从颜色阴影到线条划分的转变
作者最初用颜色和阴影划分区域，但遇到两个问题：在内容之上还有层次时，仅靠阴影边界模糊；暗色模式下难以找到清晰且不侵扰的阴影颜色。因此转向用1px实线划分，线条在亮色模式取#E1E4E8，暗色模式取#30363D，这样既能快速定位主要内容，又保持扁平化，且在不同模式下都清晰不干扰。
主栏最大宽度的坚持与考量
作者将主栏最大宽度从738.4px降至718px，即使双栏总宽度增加，主栏反而更窄。这是因为博客以文字为主，过长的行距会增加阅读负担，需要额外专注找到下一行行首。Tailwind CSS的@tailwindcss/typography插件也默认限制段落宽度，支持了这一做法。虽然牺牲了部分带鱼屏体验，但未来可能尝试自动多页方案优化。
透明度在暗色模式下的优势
使用固定灰色弱化元素在暗色模式下会显得过亮，需要单独适配。作者发现用透明度（如opacity: 60%）能借助背景色变化，在亮暗模式下都达到接近的弱化效果，避免为暗色模式单独调整颜色。链接仍用蓝色，因其广泛认知，用户能直觉判断。
❓
Q&A
使用 Next.js 重构博客 UI 的主要原因是什么？
主要是为了提升用户体验，并在设计上进行多次改版和优化。
作者在设计中如何使用颜色和阴影？
作者通过颜色和阴影划分区域和层次，使用灰度背景和白色阴影卡片来突出内容。
在响应式布局中，Tailwind CSS 的优势是什么？
Tailwind CSS 使得响应式布局的实现更加便捷，可以通过简单的类名前缀来设置不同布局下的样式。
如何在暗色模式下适配颜色以保持视觉效果？
在暗色模式下，需要特别调整颜色，以确保与亮色模式下的视觉效果一致，避免颜色过于醒目。
作者对博客界面设计的审美观是什么？
作者的审美观是主观的，强调个人口味，并不认为是设计的准则。
在设计中使用透明度的目的是什么？
使用透明度来表达元素的强弱，以确保在不同模式下效果一致。
🏷️
