关于文章内容卡片的设计方案
2024/03/17 22:30 投稿

最近主题更新有所放缓,更新的内容多数是放在细节优化上,主题上的细节问题,除非我不知道的,或是我解决不了的(毕竟我不会代码,我只是代码搬运工),其他的差不多都解决了。

这其中优化的重点之一是提升文章的排版效果,尽量做到文章页面不繁杂但又不失创作的氛围。我发现无论是本博客的文章,还是友站的文章,要么就是妙笔生花,要么就是内容详实,干货满满。我也在思考如何让这些妙笔生花、内容详实的文章变得更加“多彩”!这里我提供一种提升文章氛围的内容卡片设计方案,仅供大家参考,欢迎大家讨论发言。

最开始我的想法来源于“完赛!记2024苏州环金鸡湖半程马拉松赛”这篇文章,这篇文章中提及的是Earth最近参与的跑马活动。文章中用了很多的图片和文字记录了这场跑马。但是在文末提现跑马成绩时,只能使用简单的文字加以标注。据此场景添加了一个展现马拉松成绩的卡片,通过简要的文字展现了参与这场马拉松的赛事名称、日期、成绩等,至少在我看来,这可以提升文章的丰富程度,让文章的内容体现和排版上增加一个层次。最终的效果如下:

后来我用设计软件MasterGo加以设计形成了一套UI设计规范,并继续拓展到了在文章中展示飞机、高铁信息的卡片。

模板内容卡片

马拉松内容卡片

航班内容卡片

高铁内容卡片

哦对了,上面“马拉松内容卡片”那个,最终实现时考虑到内容布局占用问题,实际比上面的设计图体现的内容少了一些。