最近对十有三博客进行了一些用户体验方面的优化,主要是页面上的一些数值显示。从博客建站至今,经过七年的数据沉淀,一些包含水分的统计数据(例如站点统计的浏览总数和每篇文章的浏览数^.^),因为数值太大导致前端显示既不美观也不直观。现在针对这部分数值显示进行优化,以万为显示单位,剩余数值直接省略以+
号代替。
网站前端UI改动的地方其实不多,目前就博客首页文章列表和内页文章浏览数,以及首页右侧栏目最底部的站点统计浏览总数,改动后效果与原来效果对比图如下:
站点统计的浏览总数效果最明显,从上图对比就可以看出,现在浏览数直接显示423万+,原本显示4239557,用户能更加直观查看,毕竟数值大小超过一定程度,如果不进行缩写,读数是需要额外时间和精力的。
再来说下代码实现方面,其实也挺简单的,前后端都能做,无非就是个除法取整问题,然后转换字符串文本,目前我的做法是直接在数据对象的属性中直接进行计算:
/// <summary>
/// 浏览总数显示文本
/// </summary>
public string ViewCountText
{
get
{
if (ViewCount > 10000)
{
return $"{ViewCount / 10000}万+";
}
else
{
return ViewCount.ToString();
}
}
}
毕竟只是个小破站,还不需要太复杂,如果更加讲究,其实可以将单位精准到千,例如2W3K这样。此外根据自身情况,也可以将计算好后的数值放ViewData
,ViewBag
里,或者前端直接计算转换即可。
其实这些都是下下策,我最想搞的是还是缓存,因为这类统计数据走缓存是最好的,并不需要每次都进行一遍内联查询然后再计算数值!当时改这个功能的时候,脑子已经开始幻想上个redis或者memcache。但现实往往是残酷的,在考虑到服务器成本后,只能按耐住我那躁动折腾的心思,希望以后某天有机会,遇到性能瓶颈,再来搞个Key-Value数据库。
版权声明:本文由十有三创作,采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。欢迎转载本文,转载请务必署名-保留作者名称及出处:https://shiyousan.com/post/637328473318233054。