以本博客主题为原型，谈谈其设计理念

“感觉像是在一张白纸上作画。整体看起来白茫茫的一片，看多了可能有点难受。”——这是作者本人 Crazy Uncle 对该主题的评价。

一张没有深度空间的纸张能藏下整个世界，这也是二维平面的魅力吧。或者是每一个人都应该慨叹人类的聪慧，全人类的美妙创建和秉性跃然纸上，或活泼、或高贵、或庄严肃穆、或清新雅致。

极简主义的网页设计风格如何才能简单而不简单？

本博客主题最主要的设计理念就是：简约、素净，但也不缺时尚和大气。

首先说一说博客首页吧，页面简单，只有必要的博客信息，没有任何多余的修饰。相比于原主题，优化了博客名称、简介的字体和显示方式，添加了博客坐标，可用于显示博主所在的城市。

同时导航栏更加的细腻、美观，还在页面底部加入了博客格言，可以彰显博主的个性。除此之外还支持深色模式，美中不足的是深色模式需要手动切换，不能根据时间自动切换，也没有可选择的设置项。后续博客会开源，有喜欢的小伙伴可以自行DIY。

如果你手头有大屏显示器，打开博客首页，会发现它显得更大气。这时你才会真正体会到简约而不简单。

想拥有更多是人的本性，但好的产品在功能上往往都是极其简单的。人们都喜欢简单、值得信赖、适应性强的产品。但是简单并不意味着最小化。

本想着在页面顶部添加导航栏，因为大部分网页顶部都有非常漂亮的导航，这已经是一贯的设计。但是这种千篇一律的设计也容易让用户产生审美疲劳。

如果你长期坚持理解用户的偏好和行为，并思考如何直接满足他们的需求，你会发现其实用户要的并没有你想象中那么多。

本主题的导航栏在首页是在页面中间的，也是处于一个非常美观的位置。其他页面的导航栏均在页面最底部，也是考虑到用户切换页面常常是在当前页面阅读完之后，即也就是页面底部，所以我作为主题的第一用户，考虑自己的行为偏好，将其放置在了页面底部。

近年来，极简主义的设计风格（也称简约设计风格）受到了越来越多的设计师的认可，并且变得越来越流行，这不仅是因为其界面简单整洁，易于用户理解和操作，而且还因为它在提高网站和软件应用的加载速度、页面在不同大小的屏幕上的兼容性、以及用户体验的愉悦度方面发挥着重要作用。

本主题的博客列表页面，只有发表时间和标题，没有文章banner、摘要、作者、浏览量等这些可以在文章详情中看到的重复信息。文章置顶功能通过插件 Sticky 实现。

标签页还有待优化，目前单个标签是以按钮的形式来显示的，且搭配了紫色底色。看起来与主题有所不搭，并且界面噪音太强，后续改进吧。 大概率是以 #标签 （#+文字）的形式来显示，这样更加简洁的显示方式与主题的整体风格会更加契合。（标签页最新版已更改上线）

关于页面最是简单，只是单纯的一个文字页面，博主本人及博客本身的介绍，都由作者本人自行撰写，这就映衬了 Crazy Uncle 的那句话：感觉像是一张白纸。至于你想在白纸上装下整个世界、或是仅有三言两语，那都由你肆意挥洒。如果你留空，完全空白的页面会给访客一种强烈的神秘感以及无限的想象空间。

当然，简单的设计风格并不是将页面组件或模块机械的删除或减少，相反，应注意界面中的每个小细节，并包含设计师的创造力和意图。

你注意到评论区提交和回复按钮上的绿色半透明彩条了吗？（应该注意到了吧，就当你注意到了。）

对，是特意加的。

适当的使用不同的颜色，突出显示元素的重要性，可提升页面或元素的视觉吸引力和影响力，进而提高用户对于该元素或功能的点击量。现在你懂了吧，其实就是为了引导阅读者去点击，以此提升文章的评论量。

简单的色彩选择和运用，不仅不会增加页面的复杂性，相反，它还可以帮助划分界面功能模块，使界面简单而不失视觉魅力。

评论人信息只显示昵称和评论时间，取消了头像的显示，我觉得头像不仅没有起到修饰、点缀的作用，反而当图片加载失败的时候，会显得很难看。当然这种问题也有较好的解决办法，就是当没有图片，或者获取失败、网络不好加载不出来等情况下，给他一个默认头像即可。但是，本主题就是以简约设计为理念，加了头像反而显得格格不入，那么它就没有存在的意义和必要了。

巧妙地使用文本属性和排版来反映页面结构和层级也是常用的一种极简设计方法。优秀的简单网页设计通常不会使用太多字体和排版，简单的两种字体即可，结合字体的大小、颜色、粗细、行间距和排列位置等属性设置，就可以简单直观地反映页面结构和层级关系。

友链页面的设计就是这样，利用简单的线条作为辅助来排版文字，同时用不同大小、粗细和不同颜色的字体来凸显主次。友链信息只有博客名称和介绍，也不显示头像。本来打算也是用黑灰配色来显示友链信息，但是黑灰配色略显沉重。。。不信你自己 F12 调试一下？当然目前也不是最好的设计，我时常想这里该怎么改善，但一直也没有想法。

使用颜色可以增强界面的活力，同时增强其视觉吸引力和生命力。色彩属性（例如色彩透明度和饱和度），形状和明暗关系的合理运用，可以在视觉上起到很大的增益效果。

页面中所有线条均采用虚线线型，并降低了饱和度，虚线不会给人封闭的感觉，视觉上更加的耐看，降低饱和度可降低它的层级，使其不影响阅读的流畅性。

深色模式下，背景颜色并不是深邃和纯黑色，因为博客内容大部分以文字为主，图片较少，纯黑色背景会大大的降低阅读的舒适性。但是像苹果官网这种商品介绍的商业网站就是使用了深邃的纯黑色，再搭配各种精致的产品设计图和明暗显示方式，会给人一种非常高端的感觉，同时也与苹果一直宣扬的极致的屏幕显示效果和极高对比度的产品特性相得益彰。当然国内一些手机、电视生产厂商官网的产品介绍，也采用了这种风格的设计，目的就是为了凸显产品的高端，比如魅族 18 Pro 的产品介绍页，是不是与 iPhone 的如出一辙？

除此之外，深色模式下还降低了图片饱和度，避免了一些高亮度图片显得过于刺眼，尤其是在晚上阅读的时候，深色模式下突然有一个高亮度的图片出现，会使人很不舒服并想很快的划走。

大概就是这样吧，这个主题的设计体现了我个人对于网页设计和视觉交互上的一些设计方法和思想，同时也满足了我个人使用博客的需求，算是较为满意吧，所见即所得。

尽管极简主义的设计风格在实现人机之间的无缝交流、提高用户体验、提升网页流畅度等度方面起着至关重要的作用。但是，简单的设计风格并不适用于所有网页设计。博客只是一种小众产品，简约、清新、素雅，自己看着舒服就是最好的设计。

最后，选用产品教父乔帮主的一句话来作为结尾吧：

“一旦做到了简洁，你将无所不能。”——乔布斯

----------tips-----------
本主题是基于《Crazy Uncle》主题修改的，Crazy Uncle 最先是一个 WordPress 的主题，后来被移植到Typecho。
Typecho 原主题可以在这里预览：@之行
WordPress 原主题作者：@Crazy Uncle

最后附上我用摹客画的博客的原型图：https://app.mockplus.cn/s/vvgI7opIMvUJ

欢迎大家在评论区吐槽。