浅谈博客设计

布局

这里的反面案例是夏夜流萤，这个博客还将是整个布局part中的反面案例，实在是集百家之短（。

多栏是个坏主意。这是一个典型的三栏布局，在大部分非带鱼屏屏幕上，三栏都会明显的占满整个屏幕，并带来极大的信息量。设计需要呼吸感，或者说，至少需要留出空白，来降低一眼看过去的信息量。人类不是LLM，是会存在信息过载的，大量的信息会导致人手足无措，甚至引发焦虑，无法使人找到自己想要的内容。所以，三栏是一个非常不适合的布局，至少在16：9，3：2还没有死完的时候不适合（虽然因为人类最大可读宽度的原因，在带鱼屏上也会很不适合）。

然后是侧栏在左边还是在右边。如果你觉得我的样式很眼熟，那完全是对的，我用的也是Fuwari改，不过是深度魔改。第一眼看上去最大的区别就是我的文章和导航在左边，而正常的模板在右边。这涉及到一个阅读习惯的问题，如果你不服务于RTL国家，那么所有人的正常阅读顺序都是从左到右从上到下。

因此，在设计的时候需要将你想要让用户先阅读到的内容放在左边，辅助性内容放在右边。对于博客来说，文章是最重要的内容，所以文章应该放在左边，导航和其他辅助性内容放在右边。我不知道为什么很多模板都会把文章放在右边，这可能是由于某种设计惯性导致的。对于Fuwari来说，侧栏上是分类和头像，which实际上没有任何重要信息的东西却占有了最重要的位置，这确实是令人费解的。

滥用卡片也是一个坏主意。就像好的设计不能为所有内容添加图标一样，如果所有内容都使用卡片强调，这只会攻击你的大脑，而不会起到任何类似分区和强调的作用。卡片+强调色的错误使用使得夏夜流萤的页面看起来完全让人抓不到重点。一些不重要的统计信息和构建信息使用强调色以及被放置在左侧，错误的吸引了本应该落在文章上的注意力。过多的主题卡片使得整个页面完全没有重点。

接下来是强调色。只有在需要强调的地方使用强调色才能搞起到强调的作用，在所有地方都使用强调色只会让人眼花缭乱。夏夜流萤的页面中，几乎所有的内容都使用了强调主题色，这使得整个页面看起来非常刺眼，完全没有层次感。并且在所有厍狄道一些路由选择的时候没有适当压暗颜色，使得其次要信息比重要信息优先级更高。错误的混淆了主题色和强调色的用处，实在是令人可惜。

然后是头图。夏夜流萤的头图会固定占用50%以上的空间，使得你想要看的主要内容实际上只占有接近10%-20%的空间（因为还有标题的空间）。点击文章和任何可能的页面时不会将目标内容滚动到屏幕中间，而是粗暴的到顶导致实际上看不到内容，影响阅读体验。头图是用来装饰的，不是用来占据主要内容的空间的。头图应该是一个点缀，而不是二次元展览柜。

接下来是在上文提到的“人类最大可读宽度”，这个宽度大概是25-40字符之间，超过这个宽度的内容会让人阅读困难。夏夜流萤的文章内容宽度大概是50-60字符之间，这使得阅读体验非常差。设计博客时应该注意内容的可读性，确保每行的字符数在合理范围内，以提高用户的阅读舒适度。比较中性的例子是Plum's Blog。其侧栏和正文的比例大概是1/3比2/3。因为其较宽的总宽度，使得其文字可读宽度达到了接近50字符，总而使得一行的文字量有点过多了。

最后的最后，导航是不能重复的。你不能拥有两个顶栏，或者两个侧栏。这是UI设计中最大的忌讳。你只要需要使用两种不同的方式来处理不同层级的导航，而不是顶栏套顶栏，很不幸夏夜流萤也没有做到这一点。

细节

第一点是圆角统一。圆角的使用应该统一，避免在不同的元素上使用不同的圆角半径，这会导致视觉上的不协调感。统一的圆角设计可以增强整体的美感和一致性。继续是夏夜流萤，其TAG使用百分百圆角，外部容器则不是，这使得圆角体验做的非常不统一，此事在HarmonyOS中亦有记载。

第二点是令人费解的模糊和卡片底色。你不能在一个都是实心背景的网站上添加一个类似固态塑料的模糊背景。这在夏夜流萤中的NavBar上有体现，这个模糊甚至没有去色主题色，所以在实际观看的时候是非常割裂的。神秘的底色则是在其右侧栏的构建信息中体现的。莫名其妙的背景色不仅对比度不够，还使得整个页面的视觉层次感被破坏，破坏了不同元素的间距。

第三点是交互的一致性。夏夜流萤中分类和标签的更多点击逻辑是不一致的。分类会就地展开，而标签则会放置到新的主要内容区域。这种不符合用户预期的操作就像确认是取消取消是回退一样令人费解。交互设计应该遵循一致性原则，确保用户在不同的操作中有相似的体验，以降低学习成本和操作错误。

底栏一定确实要在底部。夏夜流萤的底栏因为两边侧栏实在太长，实际上不在底部，形成了一个非常丑陋的从左到右依次下降的底部，好孩子们不要学。

图标一定要视觉大小相同并对齐，详情看计算机科学中最困难的事：居中。

设计原则

我不会说什么最好的设计就是没有设计，这纯粹是乱讲，给自己的懒狗行为找个理由。好的设计是不张扬的，不吸引人注意力的。反面例子有HDR文字选框，二刺螈大头图，可能内存溢出的动态连线背景，以及点击出现的社会主义核心价值观。这些设计都是为了吸引读者的注意力而存在的，然而它们并没有提供任何有价值的信息，反而分散了读者的注意力，使得用户无法专注于内容本身。

对于现代网页，还有另外的要求。请务必提供两种颜色模式，深色模式和浅色模式。浅色模式对散光患者更加友好，因为白色会入侵其他颜色，导致深色模式的页面看起来糊糊的；深色模式对于正常人来说亮度更低，更能缓解一些眼睛疲劳的问题。深色模式不是设计来在晚上无光的环境下看的。这是很多人会误解的一点，使得深色模式被设计为夜间模式，并且严重降低文字的对比度与可读性。深色模式是给你开灯用的。

对于字体，我的观点在字体焕新中有说过，因为现在没有好的宋体来做正文字体，所以必须谨慎使用。当然我觉得很少有人会故意去用宋体，但是需要解决mono字体回退到宋体的问题。这是很多英文博客模板都有的问题，比如Sylvarium，真的是辣眼睛。