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

• 作者：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年前”，甚至“很久以前”（这个通常就免了）

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

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