/*十有三博客*/
  • 首页
  • 关于本站
  • 网站地图
  • RSS订阅

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

2020-08-12 十有三 0 浏览:7292 网站建设运维 网站设计优化 | 随笔

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

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


  • 上一篇: 博客底部的CC协议图标裂开了-404错误
  • 下一篇: 使用国内镜像解决Git for Windows下载缓慢及不稳定的问题

相关文章
  • C#解决IIS域名批量绑定
  • IIS8如何安装和使用URL重写工具-URL Rewrite
  • 记录下博客静态化的历程和经验
  • 解决IIS出现HTTP错误500.19:工作进程无法读取 applicationhost.config 或 web.config 文件
  • 什么是CSRF攻击
  • 博客底部的CC协议图标裂开了-404错误

文章分类

.NET技术 123 数据库 24 Web前端 21 网站建设运维 37 操作系统与应用 66 程序猿日常 11 开发工具 12 其他随笔 13

文章标签

ASP.NET ASP.NET MVC C# CSS HTML IIS Javascript Linux MongoDB MySql SQL SQL Server Visual Studio Windows系统 版本控制系统 插件工具 服务器 搞笑娱乐 好文分享 软件应用 生活知识 手机问题 随笔 网络知识 网站设计优化 网站维护 养生保健 异常处理 硬件设备 游戏攻略

热门文章

  • IIS8如何安装和使用URL重写工具-URL Rewrite
  • 林蛋大与楚中天,朱肚皮与朱月坡
  • 解决IE11安装升级失败和在安装前需要更新的问题
  • Windows Server 2012无法安装 .NET3.5-安装角色或功能失败,找不到源文件
  • VS重构重命名的快捷键

推荐文章

  • VS2017 签名时出错: 未能对 bin\Debug\app.publish\*.exe 签名。SignTool Error: No certificates were found
  • C#解决IIS域名批量绑定
  • 什么是CSS Sprites技术?
  • Windows10中Virtualbox没办法选择和安装64位的Linux系统
  • C# List.Join方法

友情链接

  • Passingwind的博客
  • 码友网

知识共享许可协议 CC BY-SA 4.0本站作品采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。
闽ICP备15003702号
闽公网安备 35020302035102号