网站用户体验优化之数值显示

最近对十有三博客进行了一些用户体验方面的优化，主要是页面上的一些数值显示。从博客建站至今，经过七年的数据沉淀，一些包含水分的统计数据（例如站点统计的浏览总数和每篇文章的浏览数^.^），因为数值太大导致前端显示既不美观也不直观。现在针对这部分数值显示进行优化，以万为显示单位，剩余数值直接省略以+号代替。

网站前端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数据库。