我已经重写过很多次后台了，但我一直都不满意，无论怎么写，我都觉得有股怪味，不好看，不喜欢，不好用。

前段时间我偶然逛到了 ALOVTUE·雪 的这篇博客《主题升级—Hugo博客后台》，我突然意识到我似乎对后台产生了刻板印象。

因为我的工作就是开发公司的后台，所面对的大部分都是表格、表单、详情这些偏向于数据展示类的东西。

所以我的后台即使经历多次重写，区别只是在于不同外貌的表格，非常单调。

我非常苦恼，但我不知道如何解决，受这篇博客的启发，我开始思考。

我想要什么？

在此之前我其实需要认真反思，为什么我重写了许多次后台依旧不满意？我为什么总是重写？我到底想要什么？

其实花墨的后台在每一个版本中，都可以正常使用，数据的展示也非常直观。

或许我所纠结、排斥的，只是数据展示的方式。

我因为工作中的习惯，以及对“后台”这一东西的刻板印象，导致我觉得后台与表格就是绑定的。

但我并不喜欢表格，我只是习惯了。

ALOVTUE·雪 的那篇博客中，友链、游戏是可以用卡片样式展示，相册可以用相册的样式展示。

“原来后台不一定只有表格啊！”

我的大脑就像打开了名为“刻板印象”的封印，各种灵感如涌泉般出现，我匆忙的打开了 Typora，在浏览器打开了花墨的后台，一点一点将我的灵感记录下来，生怕它们跑掉。

最终我写了一段大约 3000 字的文档，用来重写整个后台。

成果分享

这篇博客我并不会讲具体的开发过程，但我确实想向你分享我在这个系统中所灌注的灵感和思考。

就像与你分享一个我所创造的精致的玩具。

同时我也写了一个演示站，你可以访问花墨后台演示站来近距离观察它。

由于我没有手机使用后台的需求，所以后台并没有做手机端适配，请用电脑访问哦！

这个演示站的数据均为虚拟数据，且并不会对接任何接口。

演示站仅仅展示样式和交互，与接口相关的按钮、功能可能无法正常使用，可以随意点击。

展示的所有截图均为我自己后台的真实数据，并非演示站哦，请注意鉴别。

色彩

关于后台的颜色，我选择了以黑白灰为主调。

我之前会用棕色、粉色、彩色写后台，其实就是我对外貌不满意的直接体现。但我现在已经知道了本质的问题，色彩便不再是我需要反复纠结的重点了，我选择了自己觉得最简约、优雅的黑白灰。

如果你玩过 Minecraft，你可以把之前五彩斑斓的后台当做“用钻石块/金块建造的火柴盒”

设计主旨

就两个字：简约，优雅。

简约

我将数据分为了主要数据和次要数据两类。

我们以博客数据为例。

主要数据，是那些我每次进入页面都希望第一眼看到的信息，例如博客标题、阅读量、发布时间。

次要数据，则是那些有需要时再查看即可的信息，例如博客正文、摘要。

所以我会将主要数据直接放在页面上进行展示，而次要数据则通过点击、跳转查看。

我们再以友链为例。

我每次都想看到的：名字、介绍、头像、地址、RSS状态 => 主要数据

我不需要每次都看到的：申请时间、RSS地址、邮箱 => 次要数据

这次我再也不想把所有数据都塞在页面上，太臃肿了。

分优先级展示，更好看，也更简约。

优雅

这里的优雅是一个抽象词汇，其实和简约有一定联系，你可以理解为“令人舒适的设计”。

如果说简约是减少同时展示的信息，优雅则是将这些信息重新组织成我个人喜欢的样子。

我会为后台适当增加一些元素进入、切换时的动画，让后台变得更灵动、更丝滑。

表格中我不会在每一行塞入“编辑、删除、查看”这样臃肿繁多的按钮，而是用简约的 icon 去替代，且只有鼠标移入才会显示。

我会用一个空心圆/实心圆切换来代表某条数据的审核情况，而不再使用开关。

审核开关或许更直观，但评论其实存在一个“当我回复后自动通过审核”的机制，而每条评论我几乎都需要回复，这并不是一个重要的数据。

模块设计

分享了我的整体设计思路，接下来就要讲讲每个具体的模块和页面了。

我只会挑值得一讲的页面，没有讲到或没有截图的部分，你可以在花墨后台演示站自行探索。

数据总览

这是整个后台的首页，是我每次进入后台想第一眼看到的数据。

博客的访问量、走势图、待办项，我都放在了这里，将主要数据用 3 - 4 个模块组合放置，就是我理想中后台首页的样子。

博客

博客这个页面，筛选表单 + 表格的组合，基本与之前几个版本的后台一致，只不过现在会更简约一些。

需要额外一提的是，写博客/博客详情页面的 Markdown 编辑器我基本不使用，所以并没有做很多开发，仅仅做了一个编辑 - 预览的双列展示。

我写博客的习惯都是用 Typora + Google Drive，写完后复制源代码粘贴到这里进行发表。

点滴/游戏/装备/友链

这几个页面我都采用了与主站类似的卡片样式，但要更紧凑、更小。

因为在后台，我并不需要完整看到所有的数据和内容，仅仅展示特别关键的信息即可，一页能够展示更多会更方便管理和查找。

评论管理

评论系统算是改动最大，也是我最喜欢的设计。

在此之前的评论同样都是表格（我恨表格），显示具体的评论文章、回复对象、评论内容。

易读性极差，我甚至还出现过回错人的情况（因为我没有看清他回复的是哪条评论）

所以我将评论做成了树状卡片的样式，能够一眼看到回复的对象、回复的内容，以及这条评论的回复结构。

这也是我第一次非常明确地感受到：后台的展示方式应该服务于数据本身，而不是为了“后台看起来像后台”而强行使用表格。

访客

这其实是我比较纠结，并且觉得可能有争议的一项功能，是我今年新加的。

简单来说，我会根据浏览器环境生成一个相对稳定的标识，用来记录进入花墨的每个人的行动轨迹。

TA 浏览了哪个页面，在哪个页面停留了多久，什么时候离开的，我都会记录在数据库中。

而我为什么要做这个功能呢？

很简单，我想知道每个访客、读者对花墨各个地方的喜爱程度。

某个功能页面访问的人很多，可能说明它是访客经常使用或关注的功能。

某篇博客的平均停留时间很短，也可能意味着很多读者没有完整阅读，至少能让我意识到，这篇文章或许还有可以改进的地方。

我不会记录访客的 IP、位置和原始 UA，而是根据浏览器环境生成一个相对稳定的标识符，因此我并不知道这个访客现实中的身份。

我必须承认：虽然我无法知道你现实中的身份，但这仍然属于对访问行为的记录。

如果你觉得这项功能冒犯了你，觉得这项功能不好，可以告诉我你的想法，我会考虑将它删掉。

使用统计

这是本次重写新增的功能。

这项功能很简单，它可以让我知道功能的主次，就像我刚刚提到的主要数据和次要数据一样。

使用频率过低的功能，我会将它放在次要位置上，而使用频率高的，则会放在最显眼的主要位置上。

这样我的后台就会越来越简洁。

样式设计

关于整个后台的颜色、样式、公共组件设计，我做了一个单独的页面用来进行展示。

如果你想参考我的后台设计，可以通过这个页面更高效的参考。

你可以在实用工具菜单下找到它，也可以直接点击样式设计访问。

最后

以上就是我关于这次重写后台的所有内容了，感谢你看到这里。

如果你喜欢我的后台，有什么疑问、需要源代码，可以给我写邮件！

最后再次感谢 ALOVTUE·雪 提供的灵感，她的网站也超漂亮大家可以去康康哦——