如何设计「时间显示」更专业？来看大厂总结的方法！

背景

“时刻”作为人机交互界面中经常出现的元素，本质上都是为了去传递时刻维度的信息。但是咱们平常在运用一些互联网产品时会发现，关于“时刻”的显现状况或办法在不同场景、不同页面里往往是不太相同的，这是出于怎样的考虑呢？今天咱们就来聊一聊，怎么在产品规划中把握“时刻”显现的窍门，让其在页面中发挥最大的效果。

“时刻”元素的分类

按照“时刻”元素在页面中的出现场景和所起到的效果，能够大致归为以下几类：

A. 工作的要害构成要素

时刻作为描绘整个工作的重要组成部分，缺失后会对本来所要传达的内容产生严峻的影响，进而影响用户的运用预期和成果，比方说用户可能不能以一个较低的价格完成产品购买，或错过了产品发布会的时刻。

B. 行为的时刻符号

指用户本人作为行为主体或行为的接纳对象，在某一动作产生后为其所打上的时刻符号，比方说“我”购买产品下单的时刻或收到一封邮件的时刻。

C. 内容的附属信息

用户在运用产品进行内容消费时，时刻作为该条内容的附属信息，起到补充说明的效果，比方说一条短视频或新闻的发布时刻。

在上面的案例中，咱们会发现“时刻”在对应场景里所发挥的效果不同，用户在运用产品时往往对时刻存在不相同的重视程度。因此咱们在做页面规划时，要依据详细场景和用户诉求判断“时刻”元素的重要性和优先级，一般状况下：时刻作为工作的要害构成要素＞行为的时刻符号＞内容的附属信息，之后再思考用什么样的规划办法去展现来到达咱们的方针。

“时刻”的出现办法和运用技巧

在讨论“时刻”元素的规划之前，咱们先共识一些有关时刻的了解和概念。时刻能够划分为“时刻点”和“时刻段”两个维度，相似咱们高中物理时学过的“时刻”和”时刻间隔“的概念。

拿开会举比如：“下午 4:30 会议开端”、“下午 6:00 会议完毕”描绘的是工作开端、完毕的时刻点，而“整个会议继续 1.5 小时”、“会议时刻为下午 4:30-6:00”描绘的是工作进程的时刻段；但是，咱们在会议开端时也能够这样讲“会议将在 1.5 小时后完毕”。

经过上面的比如咱们能够发现，同样是描绘一件工作，运用不同的时刻点、时刻段的办法去表达，意思相同但却传递出不相同的情感，而且两者存在如下的“换算”联系：

• 时刻段加上定语会变成时刻点（但同样是时刻点，“下午 6:00”是肯定时刻，而“1.5 小时后”是相对时刻，刚好对应到咱们规划时两种时刻戳类型）；
• 两个时刻点之间则表示时刻段。

所以，咱们在平常表达或规划时，要先想清楚用“时刻”是想偏重表达某一工作、动作产生的即刻时刻节点？仍是想描绘其所继续的时刻进程？之后咱们再针对不同语境去选取适宜的案牍和出现办法。

时刻的出现办法离不开：时刻戳类型、时刻显现格局、时刻颗粒度。其中，时刻颗粒度指的是描绘时刻的最小单位，往往颗粒度越细，给用户传达的确认感越强（如转账时刻是 12 日 15:15:20），对用户的鼓励效果越明显（如距抢购完毕仅剩 00 时 01 分 23.6 秒）。

1. 肯定时刻戳

肯定时刻可了解为事物产生时的切其时刻，由详细日期（年、月、日）和时刻（时、分、秒）组成。运用肯定时刻戳的优势是信息传达精准，显得正式，给人确认感和安全感，一起排布规整，便于构成认知习气；但缺点是内容显现过长不利于阅览，而且占用空间较大。

在时刻显现格局的挑选上，为了防止混杂，引荐运用文字格局或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展现顺序习气，容易形成误解，尽量少用。

时刻颗粒度的挑选依状况而定，一般场景总结如下：

2. 相对时刻戳

相对时刻在产品规划领域一般是指内容生产、抵达、或状况产生改动时，距当前时刻点的时刻差值，多用于 push 通知、信息流产品，偏重强调内容的时效性；而“倒计时”也算相对时刻的一种，偏重营建时刻的紧迫感。运用相对时刻戳的优势是用户辨识、了解成本低，不用经过计算来判断时刻曩昔或还剩余多久；缺点是不行精确、正式，并很难衡量两个时刻点的接近性。

在运用相对时刻是，要注意格局友好。时刻单位可随着时刻的推移主动改动；数字不要过多，尽量取整；而且可设置其与肯定时刻转化的临界点。

总结

在规划界面中的“时刻”元素时，要遵从场景贴合、便于阅览了解的总体原则；之后依据场景和方针，再选取适宜的“时刻”出现办法（包括时刻戳类型、时刻显现格局、时刻颗粒度）。

其时刻作为“A.工作的要害构成要素”时

一般状况下运用肯定时刻，而且要看是为了强调某一要害时刻节点，仍是偏重表达整个继续进程。此外，选用关联场景的案牍或许运用倒计时（相对时刻）的办法，可一定程度上促进用户愈加会集注意力，提升对信息的重视度，并到达特别的鼓励效果和转化效果。

其时刻作为“B.行为的时刻符号”时

该场景一般是为了寻求确认感，经过供应精准的时刻和日期便于用户定位到曩昔或将来的某个时刻点（段）去查找、回顾相应内容，因此大多数选用肯定时刻，时刻颗粒度依详细状况而定。

其时刻作为“C.内容的附属信息”时

如果所规划的产品供应内容的更新速度快，用户活跃度高，而且此时内容的时刻信息准确性不那么重要反而更偏重于内容的时效性，那么一般会运用相对时刻。部分信息流产品（比如新闻资讯类、社区类）会在列表页运用相对时刻，在详情页运用肯定时刻，时刻颗粒度也是依状况而定；而且会随着时刻推移，在某一时刻节点前把相对时刻转化为肯定时刻。

欢迎重视作者微信大众号：「VMIC UED」