基本的设计审视 - 时间的显示

  • 作者:KK

  • 发表日期:2017.6.6


YYYY-mm-dd hh:ii 显示不友好

一个数据列表里如果老是把时间显示成“2016-08-21 22:10”这样的年月日时分甚至秒的格式,我感觉这并不友好(这里并不包含表格,我是说列表)

其实大家也清楚


时代的潮流

毕竟QQ空间、微信朋友圈这些已经带起了头,都直接显示“1小时前”、“昨天”等字样了,因为这样能让用户更快速地知道这个信息是什么时候的


YYYY-mm-dd hh:ii 的问题在哪里

资讯、信息类的应用里,我认为当用户看到YYYY-mm-dd hh:ii的时间格式时,首先要在脑袋中进行一个转换过程

转换成“这个时间指的是哪一个时间点”然后定位到一个时间距离,才感知到了是1小时前还是2小时前,甚至是昨天、前天

结果用户算是看得辛苦的,只是用户也经常接触这些时间,感觉我们已经提供了时间显示的话就没什么了,他的转换流程也不是很慢,没明确意识到这个过程不友好

所以在这个问题上能优化的工作就是:减少脑袋对时间信息的转换过程,让用户看得舒服


不是所有场景都存在这些问题

在一些对时间点敏感的数据展示就不适宜这样做,总是应该显示为完整的格式

比如用于对账的支付记录、后台查看用户的登录记录列表,其实不是很多,但这些少数场景让数据查看人员对时间点很关注

所以应该保持显示为YYYY-mm-dd hh:ii


我的转换逻辑

下面是我总结的转换逻辑顺序,适用于大部分数据列表展示场景:

  1. 距离现在小于60秒,显示为“刚刚”

  2. 距离现在小于60分钟,显示为“N分钟之前”,余数里的秒数无视掉,不用像“N分N秒”这样来强调秒数,用户感知得到分钟数就行

  3. 距离现在小于24小时,显示为“N小时之前”,余数里的分钟数处理方案同上

  4. 时间在昨天范围内的,显示为“昨天”

  5. 在前天范围内的,显示为“前天”

  6. 超出前天,但在5天以内的,显示为“N天前”(有时候这个可以不需要)

  7. 超出5天以外,但在今年以内的直接显示“m月d日”

  8. 在今年以前的直接原样显示“YYYY-mm-dd hh:ii”


附JS代码

/**
 * 将一个过去的时间戳转换成"XXX前"的文字
 * @param int timeStamp 小于当前时间的过去的时间戳,单位:秒
 * @returns string
 */
function parseTime(timeStamp){
	var seconds = Math.floor(($.now()) / 1000) - timeStamp;
	
	if(seconds >= 1 && seconds < 60){
		return '刚刚';
	}else if (seconds >= 60 && seconds < 3600){
		var minutes = Math.floor(seconds / 60);
		return minutes + '分钟前';
	}else if (seconds >= 3600 && seconds < 86400){
		var hour = Math.floor(seconds / 3600);
		return hour + '小时前';
	}else if (seconds >= 86400 && seconds < 172800){
		return '昨天';
	}else if (seconds >= 172800 && seconds < 259200){
		return '前天';
	}else{
		return ''; //表示使用原来的显示格式
	}
}

进一步优化

有些数据是完全不关注时间点的,只需要用户能感知到时间距离,基于上面的逻辑扩展后如下:

  1. 距离现在大于2天并且在1个月内,显示为“N天前”

  2. 距离现在小于半年的,显示为“N个月前”

  3. 距离现在小于8个月的,显示为“半年前”

  4. 接下来就是“N年前”,甚至“很久以前”(这个通常就免了)

这种扩展显示逻辑应用得不多,但也提一下作为参考


谢谢参阅,希望对你有帮助,根据自己的实际情况修改一下逻辑