美文网首页python程序员魔法书
个人博客全新UI:我心中你最美

个人博客全新UI:我心中你最美

作者: 心谭 | 来源:发表于2018-09-09 20:42 被阅读1019次

不知道你是否也有想过完全用自己的代码实现自己的个人博客?定制专属 UI、定制专属逻辑、在信息爆炸的时代真正地沉淀下属于自己的东西。我也曾经历了同样的纠结,最终下定决心做了自己的个人博客。虽然过程曲折,但一路风景很好、小路很多。看着被自己全新改版的网站,心里只有满足感,也笃定了知识分享和结识更多好友的初衷。就以此篇记录下网站 UI 改版的过程和感受吧,缅怀过去,勿忘初心。

多图预警!!! 详细 UI 介绍共 18 张图(托管在 GitHub),国内用户请移步 原文. 这是我的小站

1. 前世

从 2018 年 1 月份开始,因为喜欢记录、分享,还想认识更多有趣的人,我开始着手搭建自己的个人网站。

最初版本的小站的 UI 设计和代码搭建花费了大概 2 个月的时间。当时对 UI 设计没有太多好的 idea,唯一能做的就是多去别人博客看看 UI 设计,来汲取灵感。

所以第一版的网页 UI 参考了 NexT 框架 、EvanYou 首页的 UI 设计,为了方便,使用了 Element-UI 来实现了后台管理系统(用来进行文章管理)。

可以这么说,这个阶段主要是保证网站运行起来,有个衣服穿。至于衣服好不好看、协不协调,并不是很重要。

2. 情缘

网站第一次搭建起来,还是很开心的(**)。完完全全是依靠自己的双手,一行行写出来的代码。

是的,当时就是想设计专属自己的风格,所以没有使用任何的开源博客框架的代码。那 2 个月就是对着 Vue 和 Koa 的文档写出来了网站的前后端,也是第一次买服务器、备案网站、做反向代理、读 CDN 文档、学 Webpack、做 SEO,怀念那些时光,让现在的网站有了基础。

3. 初识

3.1 博客系统界面

经过奋战,网站成功搭建起来。首页的 UI就是下面这样:

image

是的,看过尤大大博客的都知道,这是他的首页样式,我就直接拿过来了。

而除了首页,其他所有的页面,都是采用的类似于阿里云平台控制台的 UI:屏幕左边放置导航栏。

这是文章浏览页面的 UI: image 而一个博客,为了提高 seo 和反链数,友链最重要。友链界面是 UI: image 和友链界面类似,介绍页面的 UI 设计也是这种时间线的方式: image

3.2 管理系统界面

管理界面的 UI 设计没有太出彩,直接借用了 Element-UI 的表格样式。因为管理界面最重要是保证数据交互的逻辑正确性,在此基础上,一个简洁优美的 UI 就足够了。

image

3.3 听歌台界面

为什么要自己从 0 开始搭建博客?很重要的一部分原因是要方便 DIY,做自己喜欢的东西。我喜欢听歌,因此一拍脑门,就做了个听歌台。

image

当然,他是移动端兼容的。这里就不放置界面了。

3.4 小小心思

除了大的页面架构,根据我当时的设想,我为博客浏览页面做了分页系统+节流缓存,当然,使用的是 Element-UI 的组件:

image

除此之外,每篇文章都可以导出(右下角按钮),并且有二维码分享的按钮(后来发现没什么用):

image

4. 再见, 不再留恋

网站运行到 2018 年暑假,一站式问题解决的问题逐渐开始凸显,源码变成代码怪兽,开始变得难以维护。

此外,初期东借鉴、西借鉴后杂糅而成的网站的 UI,显得那么不搭。乱七八糟的风格让人看着心烦。

网站 UI 重新设计和代码重构,迫在眉睫。

5. 今生

吸取了之前的教训,意识到了网站应该突出主体功能。因此,管理系统、听歌台被抽离成了单独的应用,后台利用 Nginx 做反向代理,用二级域名记性访问。

除了架构,杂糅的 UI 也是诟病之一。这次果断的选择了极简主义的“扁平化”设计风格,很大程度参考了 Hacker 的 UI 设计,再次基础上,借助卡片和一些好看的小动态重新设计了友链、归档等界面。

我觉得,现在的样子,才是一个技术博客该有的模样。

6. 您好, godbmw.com!

6.1 首页:大巧无锋

借助扁平化设计,将导航栏移动到了每页的最上方,并且附上了网站介绍。作为所以子路由都会引用的公共组件,大大提高了代码维护性。

image

如你所见,去掉了空洞的主页,主页进行了小范围的留白,但大部分以文章简介来填充。

6.2 友链: 你在就好

结识朋友,认识更多志同道合的朋友,是人生一大乐趣。因此,友链页面的设计也是重中之重。

为了更多展示友链信息:头像、链接、介绍、昵称等,我设计了卡片动态。

image

当然,做了移动端兼容,欢迎手机访问。而在鼠标移入的时候,会有一个渐变的小动态,提高用户体验。

6.3 关于:真实地我

这个页面很简单,只要把后台数据写成 markdown 格式,样式渲染就和文章浏览页面是一样的,稍作修改即可:

image

6.4 归档:小而别致

我理解的归档是:分类+标签。而且对于我自己的网站来说,分类和标签放在一起,页面显得更充实,如下图所示:

image

除此之外,当你鼠标划入相关内容名称时候,会有很好看的下划线划过的动态,小而别致,别具风趣。

点击相关分类或者标签,就进入了先关文章的汇总页面:

image

6.5 文章:美观大方

image

正如你所见,文章采用了 highlight.js 解析 markdown,并且自己写了下 markdown 的样式。

而就在最近几天,我添加了目录功能,就在上图的右侧。此功能,只有在屏幕宽度大于 768px 时候,才会启用。

也就是说,至少是 ipad 那么大的屏幕才能看到目录。毕竟手机屏幕就那么大,去除冗余功能是最优选择!

6.6 听歌、滚动按钮、评论:匠心独具

这次还是想听歌,笑哭。而在扁平化设计的 UI 中,最好的选择肯定是将其放入页面底部,以保证不影响主体功能和浏览体验。同样地,在移动端依旧不会加载此组件,这主要是获取歌曲资源会占用较大的移动端无线流量,从而造成页面阻塞。

image

此组件的名称是 aplayer,是 B 站的音频组件,我有幸贡献了源码。

当页面内容过多,必须有一个滚动按钮,来保证用户迅速回到导航栏(页面头部)。参考 NexT 的 UI 设计,基本一模一样实现了他的滚动组件:

image

为了提高交流体验,必须引入评论系统。其实在实现这一部的时候,很累(做完上面的东西)。翻了翻开源的评论系统,发现了 Valine。

因此,在文章浏览页面、关于页面和友链页面,都引用了 Valine 组件:

image

当你缓慢拖到页面底部,你会发现页面的简介和备案号(我国独有哈哈哈),当然,不能让他们影响页面美观是吧?

image

7. 未完待续

不知道下次你会是什么模样?

相关文章

  • 个人博客全新UI:我心中你最美

    不知道你是否也有想过完全用自己的代码实现自己的个人博客?定制专属 UI、定制专属逻辑、在信息爆炸的时代真正地沉淀下...

  • 『博客搭建』—— hexo 博客小功能添加-评论、萌妹纸、相册、

    前言 前段时间 个人博客全新上线(阿里域名+GitPages+hexo+Yelee) 搭建的博客 我的博客,基础的...

  • 我心中你最美

    这周简书写最美的你 我们英语老师相约夸夸你,感谢你 你是教导主任 是我们英语老师们的直接领头人 你耐心倾听我们英语...

  • 2018年能让你4个月内成为UI设计师的机会!

    UI设计VIP课程介绍(全新开班) UI设计课程全新一期即将开班啦~! UI设计VIP课程全新升级(2018年) ...

  • 【微信小程序】常用代码

    个人博客里面阅读起来可能要清楚一些个人博客 常用UI库 推荐使用:https://github.com/weila...

  • 我的心中你最美

    本周主题最美的你 英语老师相约夸夸你 50岁的年龄不像你 30岁的干劲符合你 繁忙的工作忙不乱你 有条不紊细致如你...

  • 我的心中你最美

    办公室里,总见你伏案忙碌的身影,教室里总见你与学生交流的身影。在班级中你兢兢业业,精心呵护,四十多颗稚嫩的...

  • 我的心中你最美

    我的心中你最美 你,对待工作,兢兢业业,积极上进;勇于创新,爱生如子,班级各项工作总是名列前茅。 你,对待...

  • 我的心中你最美

    在工作中你如春雨——润物无声;在生活中你如花朵——灿烂绽放;你的一言一行恪守着职业的准则;你的一举一动诠释着实...

  • 我的心中你最美

    与你两届搭档, 感受最深的是你的大气, 你高高的身材彰显着你的高贵品质, 你以宽广的胸怀容纳一切大事小事, 让我忍...

网友评论

  • jeson_jack:大佬开源了吗,求大佬开源
    心谭:最近在弄,不过估计要年底或者明年初。国庆开源了一个音乐资源库,欢迎来看:https://godbmw.com/passage/64。
    Github地址:https://github.com/dongyuanxin/music-api-next (欢迎star)
  • 九五二六:不错,不错
    心谭:Thanks♪(・ω・)ノ

本文标题:个人博客全新UI:我心中你最美

本文链接:https://www.haomeiwen.com/subject/ewbdgftx.html