[总结篇] 从产品到技术,如何设计出一个人人都喜欢的博客系统

聊聊关于我博客设计思考那些事

记得早在20年,就一直有自己搭建一个私人博客的想法,结果一晃悠现在就快三年过去了,有时候还时不时反思下子,啥原因一个事情一拖能拖两年多,是工作忙,是项目紧,还是学习多......,好像....都不是,还是自己懒了点,要是早上起来吃的是,吃早饭,而不是午饭或许早弄完了,怎么会拖到现在!!!

想整个自己的站点,就一直游走在很多同行道友的博客空间里面,同时也收藏了许多富有情怀和设计感博客,全留在我的Chrome浏览器书签里面,有时空余时间翻出来逛逛,看看这些富有生活热情和人生正气博主动态,还常常能感受各位博主朴实且纯粹的文笔所带来的生活活力,在茫然和情绪低落的时候还时常能找到些共鸣。

此外经常拜访许多博主的博客,也是是为了给自己找设计灵感,因为技术出身,不懂设计,不懂产品,其次对自己的需求不清晰,一直不知道我应该把自己的博客设计成什么样子

前前后后逛了许多道友的站点和很多设计不错的网站,估计下来大概应该有大几百个了吧,很多都是原自各位博主的友链,人找博客不好找,但是博客找博客却很方便,绝大多数的博主都会有十来个友链,友链也是个人独立博主相互推广最为主要的一种方式

前前后后逛了许多道友的站点和很多设计不错的网站,估计下来大概应该有大几百个了吧,很多都是原自各位博主的友链,人找博客不好找,但是博客找博客却很方便,绝大多数的博主都会有十来个友链,友链也是个人独立博主相互推广最为主要的一种方式

中间还看到一句话,感觉还蛮有意思 : 一个人的寂寞,一群人的狂欢~

------来自十年之约博客站

经常在各大博主的站点来回逛来逛去慢慢的也开始有自己的一些思路,毕竟看了这么多的案例!

我整个博客的设计,在还没完全开发出来就已经过了两个版本,并且这两个版本都被我废弃了。总有种自己"造孽"自己填的感觉。

早在第一个版本,是参考目前主流一些博客站点在写,功能也是几个常规的功能,文章,动态,友链这几个,在写完之后因为对后端还不太熟,就一直放着,打算先把后端熟悉下,在回来把接口也写了。之后过了一段时间,大概是一两个月吧,具体记不太清了,打开了我写好的页面瞅了瞅------在想这玩意是我写的......,感觉哪哪都不对劲,对自己做出来的东西感觉有点嫌弃,就知道是我的眼光提高了------【又或者说是慢慢开始有产品视角了】

因为对上一个版本不满意,自然也能察觉到不喜欢的部分是哪些方面,需要改正的是哪些方面,也有了新的设计思路,大概又隔了个来月左右,我开始了我的又一次博客设计开发,我在脑海里把博客的蓝图构思好后开始coding,PC和移动端的技术栈都是vue,每天写一点点,几个月后PC端和移动端的静态页面也就全写完了

因为对上一个版本不满意,自然也能察觉到不喜欢的部分是哪些方面,需要改正的是哪些方面,也有了新的设计思路,大概又隔了个来月左右,我开始了我的又一次博客设计开发,我在脑海里把博客的蓝图构思好后开始coding,PC和移动端的技术栈都是vue,每天写一点点,几个月后PC端和移动端的静态页面也就全写完了
为什么写了这么久,因为我有点懒,哈哈哈,中间写完一个端后,又躺了好一段时间,害!

可能你们会想为什么不直接用响应式适配到移动端,还费这么多功夫单独写移动端,主要是因为用户体验,因为我觉得响应式解决的PC端屏幕缩放时候使用的一个体验问题,而不是多端适配问题,因为PC端和移动端,本身的操作习惯就不一样,如果强制在移动的使用PC端的设计逻辑会导致用户体验不太好。

博客的两个用户端页面完工之后,休息了会,之后我开始构思写博客的后台管理系统,开始找网上看各种后台系统的逻辑设计,以及UI设计,慢慢在脑海里面有个大概得蓝图后,开始coding,后台系统大约历经半个月左右也算了竣工了,感觉我的博客进展到了一个里程碑,又该休息一下了。经常感觉完成一个小任务就想休息会,害!!!

中间代码时间其实不长,主要是经常三日打鱼,两天晒网!!!!

这一停工一不留神又是几个来月,时间过得好快! 。我整理整理了思路,重新打开我的博客项目,看了看两个用户端,嗯,感觉凑合,只是有些字体和色号啥的需要在调整下,之后在看管理系统端的时候,却发现了许多问题。

起初刚刚开始开发的时候,偏即兴开发,对产品功能权重优先级也还没太多意识,缺乏一致的设计规范,和产品逻辑,连基本的风格定位,产品定位都没多少考虑,显的很杂乱,在开发过程中也因为是即想即做,产品逻辑意识也不强,一段时间后,当我当下的即兴感觉过去后,各种设计的不合理,各种问题也就出来,这就是我缺乏基本产品思想所导致的。在设计产品过程中最重要往往的是做根据产品定位做取舍,想清楚不做什么通常比要做什么和能做什么更为重要!

因为想把自己的博客做好,设计成一个出色的博客系统,在设计过程中也看了些产品以及设计相关的书籍和资料,也关注了不是相关的动态虽然,许多都是边学边用,这也导致我这废弃的这两个版本中,许多功能,在产品逻辑感不强的时候开始写,开始有产品思路的时候又改,来来回回返工都返了好多次,虽然也还是没出来个能让我觉得还可以的产品,这几个版本的设计反而成了我学习产品过程中的牺牲品。

很多时候成长是源自于推翻过去的自己!!!

因为前面两次的失败,我把搭建博客的想法也搁置在了一旁。这眨眼间的,又过了快一年,就到了今年年初,期间一直忙于工作和接了些外包项目在做,这期间也还学了蛮多东西,关于产品,设计,技术,以及我写后端的应用能力也成熟了不少,基于做项目过程中的思考,中间还捣鼓了个后端的小框架出来,名字叫 effic ,这框架帮助我在写项目过程中,大约提高了近30%效率,节省了不少我写外包项目的时间,这里不做过多解释,有兴趣的伙计可以去看看我那篇【一个现代化的nodejs开发框架,助力高效开发】

经历了一年的沉淀,我又开始构思我的博客系统,这次没像之前那样匆匆忙忙的着急写了,而是开始规划设计,开始重新思考对博客这类产品的理解。

网络上有近9成的,个人独立博客站点都是基于一些像hexo,wordpress,vuepress这样开源博客系统或者cms系统搭建的,只有少部分博主是自己原创。虽然我对自己的需求也还没抓得住,但是我能感觉到,这些开源系统所提供的并不是我想要的,所以一开始就没用开源的系统搭建。

这些工具的一个特点是,都是倾向于如何把你的东西对外展示出去让别人看到,对于个人的管理却稍弱一些,会让人感觉缺乏一些对系统的掌控力和对个人资产的归属感。普遍的开源博客的输入体验也不是很友好,许多博主在一开始博客搭建完成后,发文激情满满,但是写过一段时间后却很少更新了,其中有很大一部分原因也是因为博主在输入和管理上面用户体验不好所导致的

使用博客的通常有两类人,一类是那些业内真正的大佬,他们写博客通常是为了,输出一些有价值的技术,提高自己的知名度,影响力,之后恰饭,对他们而已最重要是流量,而不是怎么管理我的笔记,这其实是偏商业性质了。在一个就是大多数像我这样还在成长的老百姓,一方面是为了记录学习笔记,以及工作中遇到的问题,另一方面是记录生活,给生活增添点乐趣

基于上面的观点, 我思考了一番,整理整理了思路,我觉得博客本身是属于一种日志,笔记,应该更加注重个人空间,去帮助博主方便快捷的记入学习笔记,记入生活琐事,其次再是被有缘人看到欣赏,如果是偏技术类型博客,则侧重于帮助博主在下一次遇到同样问题的时候,能很方便的从以往的经验中找到解决方案,避免重蹈覆辙,又花费同样多的时间

博客,其首先重心应该是使用者(博主),随后再是浏览者(用户),只有博主使用方便,对自己的内容资产管理方便,有归属感,才容易留住使用者的热情,从而生产更多,更好,更优质的文章,才能被更多的人看到。

在一点是许多博客,有些过度设计,为了秀自身的技术而设计的倾向,充斥过多的动画效果,导致博客丢失了其原貌,虽然设计感很强,视觉效果很炫酷,但是会缺乏视觉焦点,页面的整体缺乏重心,当浏览的时候,就很难感受到网站的价值点,更多是像在看一些动画,观看博客的页面设计,起初几次或许有些新鲜感,因为缺乏价值点,当你当下的新鲜感过去后,遍会失去兴趣感到厌倦

经过几次的反思和总结后,我也明确的博客开发的定位。博客重点强调个人空间,个人管理,其重心也就会落在后台,因为用户端无论怎么变化,其后台都是可以不变的,只有后台靠谱,用户端随便怎么折腾怎么设计都可以

在后台的设计上面,也会以用户体验为中心,这里后台强调用户体验是因为,大多数的tob类型,只关注功能是否可用,而且使用体验,系统使用是否便捷高效并不关注,所以就导致许多的tob类型的产品非常难用,实际上如果系统的规则设计的越好,系统的使用者也会更加顺心有掌控感,也能让系统的使用者在使用过程中更加有成就感,从而留住使用者的兴趣

所以我在设计后台时,会更加倾向于以toc的逻辑去做tob的产品,从使用者的角度去设计。

而在用户端,则以实用为主,希望在保留一点情怀的同时,不能丢失博客的本质。功能上面以笔记和生活动态为重心,其余的做为边角功能。

前面讲了这么多,一直也都没摆个图出来,是因为,我之前的代码找不着,或许也还能找得着,但是两年前到现在我已经换了两个电脑了,懒得去找了。下面是现在的这个版本的一些基本功能

展示

博客一共分为,11个基础模块,2个扩展模块

  • 基础模块 : 文章管理,动态管理,留言,私信信箱,我的书单,项目管理,小工具,邻居管理,用户管理,私人图传
  • 扩展模块 : jsonApi,page托管(静态页面),扩展模块因为通常不常用,但是确又是实用的两个模块,在博客设置里面。

jsonApi : 博主可以填写自己需要的json数据无需代码创建一个接口

page托管 : 博主可用上传一些静态html页面等,直接生成一个线上访问链接

首页,数据分析

文章模块

留言,信箱📪

系统特点

  • 接口动态加密签名 : 博客用户端和管理端的接口均有动态加密签名,可有效防止爬虫
  • 安全查杀 : 开启安全查杀,系统会自动检查请求频率过高异常的接口,发出警告,多次警告后会自动封杀该用户以及IP,可防止接口被盗刷
  • 图片防盗链 : 如果博客开发者的图片是存在自己的博客服务器则可以开启防盗链,防止图片被盗用
  • 访问限流 : 博主可以设置博客每日访问上限,限制博客的每日访问量

个人中心

系统设置

开发者设置

收工!

今天这先写到这了,看看有必要的下次再补充下!

相关推荐
知了一笑7 分钟前
开发者做产品,摆正技术的位置
程序员
努力的小郑10 小时前
今晚Cloudflare一哆嗦,我的加班计划全泡汤
前端·后端·程序员
摆烂工程师13 小时前
今天 Cloudflare 全球事故,连 GPT 和你的网站都一起“掉线”了
前端·后端·程序员
晴殇i19 小时前
这个前端工具杀疯了!发布一周狂揽 10k Star,Snapchat 开源框架重新定义跨平台
前端·程序员
大模型教程19 小时前
RAG技术详解:让大语言模型减少幻觉
程序员·llm·agent
大模型教程19 小时前
从0搭建Agentic RAG智能推荐系统(无需向量化)|Python实战分享
程序员·llm·agent
AI大模型21 小时前
全流程实操教程:2小时构建RAG文档智能问答系统|基于Dify
程序员·llm·agent
AI大模型1 天前
中科院工程师分享:用Unsloth打造推理增强大模型|低显存、高推理、可复用
程序员·llm·agent
申阳1 天前
Day 12:09. 基于Nuxt开发博客项目-使用NuxtContent构建博客模块
前端·后端·程序员
Cleaner1 天前
我是如何高效学习大模型的
人工智能·程序员·llm