不知道大家有没有想过用自己的代码实现自己的个人博客？定制专属UI，定制专属逻辑，在信息爆炸的时代真正沉淀自己的东西。 我也经历过同样的挣扎，最终下定决心做一个自己的个人博客。 虽然过程曲折，但是风景很好，一路上小路很多。 看着自己新改版的网站，感觉只有满足，肯定了知识参考和认识更多朋友的初衷。 拿这篇文章来记录网站UI改版的过程和感受，缅怀过去，不忘自己的主动心态。 多图预警！！！有18个详细的UI细节(托管在GitHub中)。请移至国内客户参考。这是我的小站。1.2018年1月起，喜欢记录和参考，想认识更多有趣的人。我开始建立自己的个人网站。 最初版本站的UI设计和代码搭建大概花了2个月。 那个时候，关于UI设计的好点子并不多。我唯一能做的就是访问其他人的博客，看看UI设计的灵感。 所以第一版的UI参考了NexT framework和EvanYou主页的UI设计。为了方便起见，后端管理系统(用于管理文章)使用Element-UI实现。 可以说这个阶段主要是保证网站运行，有衣服穿。 至于衣服好看不好看，不是很重要。 2.恋爱网站第一次建立，还是很开心(* ▽ *) 完全依靠自己的双手，一行一行地写代码。 是的，我当时就想设计自己的风格，所以没有使用任何开源的博客框架代码。 那两个月，我对着Vue和Koa的文档写网站的前后台。也是第一次买服务器，建站，做反向代理，看CDN文档，学Webpack，做SEO。怀念那些时光，让现在的网站有了基础。 3.第一次相识3.1博客系统界面已经打得很辛苦了，网站已经建好了。 主页的UI如下:图片没错，看过犹大博客的人都知道这是他的主页风格，所以我直接拿来了。 除了首页，其他所有页面都和阿里云平台控制台的UI类似:导航栏放在屏幕左侧。 这是文章浏览页面的UI:图片和一个博客，要想提高seo和反链接的数量，朋友链是最重要的。 好友链界面是UI: image类似于好友链界面，详情页的UI设计也在这个时间轴里:image3.2管理系统界面的管理界面UI设计不算太出彩，直接借用了Element-UI的表格样式。 由于管理界面中最重要的是保证数据交互的逻辑正确性，在此基础上，一个简单、柔软的UI就足够了。 3.3为什么要在平台界面上从0开始建立自己的博客？很重要的一部分原因是为了方便DIY，做自己喜欢的事情。 我喜欢听歌，所以一拍脑门就做了一个听歌平台。 图像当然是兼容手机的。 接口就不放在这里了。 3.4除了大页面结构，根据我当时的想象，我对博客浏览页面做了分页系统+节流缓存。当然我用了Element-UI的组件:image。除此之外，每篇文章都可以导出(右下角按钮)，还有一个带二维码参考的按钮(后来发现没用):image4。再见，我不再想念这个网站了。它将运行到2018年暑假，一站式问题处理。 另外，前期东西方混搭的网站UI显得那么不协调。 凌乱的风格让人看着心烦。 UI重新设计和代码重构迫在眉睫。 5.这辈子吸取了之前的教训，意识到网站要突出主要功能。 所以管理系统和听音平台是分开的应用，后端使用Nginx作为反向代理，二级域名用于内存访问。 除了架构，混合UI也是诟病之一。 这次果断选择了极简主义的“扁平化”设计风格，很大程度上参考了Hacker的UI设计。在此基础上，我借助卡片和几个好看的小动态，重新设计了好友链、存档等界面。 我觉得现在的样子才是一个科技博客应该有的样子。 6.你好，godbmw.com！6.1首页:大乔五丰借助扁平化设计，将导航条移至每页顶部，并附上网站详情。 所以作为所有子路由都可以引用的通用组件，大大提高了代码的可维护性。 可以看到，去掉了空主页，主页小范围留白，但大部分都是文章的介绍。 6.2朋友圈:只要在这里，认识更多志同道合的朋友，就是一大乐事。 所以，朋友链页面的设计也是重中之重。 为了显示更多关于好友链的信息:头像，链接，详情，昵称等。，我设计了卡动态。 图像当然是兼容手机的。欢迎参观手机。 鼠标移进去会有一个渐变，会提升客户体验。 6.3关于:真的，我这一页很简单。把后端数据写成markdown格式就行了，样式渲染和文章浏览页面一样。只需稍作修改:image6.4存档:小而独特。我知道的存档是:分类+标签。 而且对于我自己的网站来说，分类和标签放在一起，页面显得更加充实，如下图:图片除此之外，当你鼠标进入相关内容名称时，会有一个好看的下划线运动，很小，很独特，很独特。 点击相关类别或标签，就会进入相关文章的汇总页面:image6.5文章:美观大方的形象。可以看到，文章使用highlight.js分析markdown，写出了自己风格的markdown。 最近几天增加了目录功能，在上图右侧。 只有当屏幕宽度大于768像素时，此功能才会启用。 换句话说，至少ipad那么大的屏幕能看到目录。 毕竟手机屏幕那么大，去掉冗余是最好的选择！6.6听歌，滚动按钮，评论:原创。这次还是想听歌，想笑也想哭。 在扁平化UI中，最好的选择一定是放在页面的底部，这样才不会影响主要功能和浏览体验。 同样，这个组件仍然不会加载到手机上，这主要是因为获取歌曲资源会占用手机上大量的无线流量，造成页面阻塞。 这个组件的名字叫aplayer，是b站的音频组件，很荣幸贡献源代码。 当页面上的内容过多时，必须有一个滚动按钮，以确保客户能够快速返回到导航栏(页面标题)。 参考NexT的UI设计，它的滚动组件:image基本上完全实现了。为了改善交流体验，必须引入评论系统。 其实我意识到这部分的时候(做完以上)已经很累了。 我翻了翻出处的评论系统，找到了缬氨酸。 所以在文章浏览页，关于页和好友链页:图片中引用了缬氨酸成分。当你慢慢拖到页面底部，就会发现页面的介绍和记录号(中国独有，哈哈哈)。当然，你不能让它们影响页面的美观，对吧？7.图7。未完待续。不知道你下次会是什么样子？重点关注前台和算法系列干货参考，欢迎关注()图片。