时间 时区 方式 近年来产品的国际化趋势日益增强,如果你在做国际化产品的设计工作,一定会注意到时间的两种统计方式:UTC 和 GMT。比如你可能经常会看到这样的案例:UTC 和 GMT 究竟是什么意思?应该怎么使用?有哪些表述规范?本文就为大家科普下二者的区别和用法,带你从小白秒变行家。更多时间展示方法:大厂总结!体验设计师必知的「时间戳」控件设计“时间戳”即时间信息的展示方式,它是一个在 UX 设计中经常出现,又容易被忽视的元素。阅读文章 > 一、概念科普先上一轮专业知识硬核科普:1. UTCUTC 的全称是 Coordinated Universal Time,被称作“协调世界时”,可称“世界统一时间”,“世界标准时间”,“国际协调时间” 等。UTC 是一种时间标准,全球通用,该时间已经与世界计时中心保持同步,作为全球民用时间和时区基础的时间标准。 UTC 时间标准划分图2. GMTGMT 的全称 Greenwich Mean Time,被称作“格林威治平均时间”或“格林威治标准时间”。GMT 是按照经线划分的时区(高中地理知识:地球表面按经线从东到西,根据圆周 360 将地球划分为 24 个时区,每个时区占 15,相邻区域的时间相差 1 小时),是由位于伦敦郊区的皇家格林尼治天文台确定的标准时间(因为本初子午线是通过那里的经线),是一些欧洲和非洲国家使用的时区。GMT 时区划分图1972 年,UTC 取代 GMT 成为世界时间标准。不过 GMT 现在仍然被欧洲广泛使用,是英国等几个国家的时间表述方式。在编写本文之前,我们一共调研 14 个产品(包括 2 个操作系统,7 个国际化产品,5 个设计系统),可以看到 UTC 及 GMT 在行业中均被普遍使用,UTC 偏多,但暂未形成主流。不过,由于有官方平台背书,也不排除 UTC 的使用范围会越来越广阔和通用的可能性。严格来说,UTC 和 GMT 各有所长:由于时间的测量方式不同,GMT 每 4 年比 UTC 慢 1 秒,因此在不需要精确到秒的情况下,通常也可以将 GMT 和 UTC 视作等同。UTC 没有夏令时计算方式,而 GMT 有。所以有可能在有夏令时区域,用户理解 UTC 的成本更高。我们可以总结两者的区别如下:UTC 和 GMT 两者的区别二、表述样式虽然 GMT 和 UTC 在概念上有些区别,但在实际使用中,两者的表述方式趋同,在视觉效果上完全一致。根据不同国家和地区,日期和时间的具体展示方式通常需要考虑以下因素:地域性:时间需要和地域文化和书写习惯相关联,便于当地用户快速理解。准确性:要保证时间的精度和准度,很多金融类产品的时间都需要精确到“分”甚至“秒”。易读性:在排版时要易于阅读,时间数据较长时要考虑折行的易读性。接下来的表述样式中,我们会以 GMT 为例,介绍下日期表达的细节规范。(需要说明的是:以下规范是经过调研后总结出的通用规则,并非不可更改的行业基本准则,如果你的产品有其他表达方式上的需求,可以适当变更和调整。)1. 不同国家和地区的时间表示方式不同国家对于时间的书写有不同的组合顺序,使用的标点符号也不相同。最常见的有四种类型,分别是:zh_CN:适用于中国大陆、中国香港等地区nl_NL:适用于荷兰等地区en_US:适用于美国等地区en_GB:适用于欧洲国家、东南亚国家和中国台湾等地区以下是这四种不同的“年月日”具体表现样式(yyyy: 年,MM: 月,dd: 日):以下是这四种表现样式与 GMT 组合的实际案例(以 GMT 为例,UTC 同理):2. 时间表示方式的具体规则接下来我们以 zh_CN 的 GMT 时间表示为例,来看看具体的时间展示细节规则:① 日期 + 时间 + 时区的组合展示日期和时间之间使用“,”+“空格”;时间和时区之间是使用“空格”;时区标识在前,偏移量在后,显示“(GMT整数偏移量)”;偏移量精确到“:”后两位,取小时整数。② 表示时间段两个时间段之间建议使用半角“-”链接;半角“-”前后有空格。③ 折行展示样式折行时“年月日”、“时分秒”建议各自同一行;段时间以“-”连接,“-”前有空格,在第一行。以上就是国际化产品中时间的表法方式,你可以将这些规范应用在工作中常用的组件模块上,在使用时可以直接调用,方便快捷且不易出错。最重要的是也要跟开发对接清楚,从代码层面做产品实践效果的最终防范。欢迎关注作者微信公众号:「长弓小子」本篇来源:优设网原文地址:https://www.uisdc.com/time-display-guide
时间 信息 版面 在进行设计时,常常会涉及到“时间”的排版,比如展会日期、演出时间、活动促销时间等。“时间”在版面中更像是个“配角”,并不像标题和其它信息那么显眼,所以常常被设计师所忽视。但版面中任何一个小细节都会影响到版面整体的美观,本期讲解“时间”信息编排的几种思路,教你如何让“时间”的排版在顺利传递信息的同时,还具有良好的视觉体验,为版面增添设计感。往期平面干货:文字怎么搭配排版才吸睛!送你50+案例!海报文字的排版怎么样才能吸睛与众不同?阅读文章 > 一、对比“对比”在设计中无处不在,在“时间”的编排中也是如此。在设计时可以弱化日期中较次要的信息,突出主要信息,让观者一目了然。此案例时间并没有经过太多的刻画,但加入了大小对比,形成了视觉层次感。将“年份”和“月、日”字眼信息缩小,采用大小对比增强信息之间的跳跃率,显得灵动活泼。将“月份”改为空心字,形成空心字和实心字的强弱的对比,使主要信息“日期”更突出。二、简化将“年、月、日”简化为“.”“/”等符号,既能准确传达日期信息,又可以使视觉效果更简约。很多时候年份并不那么重要,可以把年份弱化,突出具体时间,形成对比、层次区分,这样更有利于阅读。如果时间信息较多,想更简约的呈现,年份直接删去也无妨。当活动的时间范围在同一个月,“月份”可以共用,这样能精简画面重复的信息。三、替代将月份替换为英文,使版式多一点变化。将日期中的阿拉伯数字用汉字代替,比较适用于传统复古的版面。日期连接经常使用横线“——”,也可以替换为各式各样的箭头来连接日期。将年份信息放在连接线上,既起到连接的作用,同时还能引起阅读者的注意。四、添加如果想让版面视觉效果更丰富,可以选择添加信息。此案例添加星期的英文缩写,增加大小对比,丰富了画面层次。有些活动是只在一天的某个时段举行,则需要添加具体时间。还可以添加图标或其他小元素进行装饰,增加更多趣味性。添加外框,让“时间”信息的呈现更整体,也能与其它信息进行区分。六、分行当有两个日期需要呈现,可以采用分行处理,让读者更易于阅读与识别。七、对齐方式左对齐是最符合人阅读习惯的对齐方式,所以也是“时间”编排中最常使用的对齐方式。在设计时也可以尝试改变不同的对齐方式,让编排多一些个性和变化。也可以将文字调整大小和间距,使两端完全对齐,可以达成工整严谨的效果,看起来也更加饱满。八、纵向编排在版面空间比较狭窄时,可以改变时间的排版方向来适合版面编排需求,纵向的编排还能体现出古典文化感。在改变排版方向时,一般要把数字调整为常规阅读方向,保证良好的识别性。也可以同时采用横排和竖排相结合的排版方式,形成方向上的对比,视觉效果更丰富。九、字体选取特殊的字体,让信息编排更具个性和设计感。掌握方法后,可以尝试更多的组合方式,让重新设计后的“时间”信息在顺利传递信息的同时,还具有良好的视觉体验,为版面增添设计感。本期示范所用字体为:Trajan、Times New Roman、Garamond、思源黑体、D-DIN、Bebas、Facon、Quantum、Bungee Inline、Morena、Baloo(除前三款外均可免费商用)欢迎关注作者的微信公众号:「艺海拾贝Design」本篇来源:优设网原文地址:https://www.uisdc.com/time-design
时间 用户 场景 “时间戳”即时间信息的展示方式,它是一个在 UX 设计中经常出现,又容易被忽视的元素。许多人都以为时间戳仅仅向用户传递时间信息,其实它也会对业务带来重要影响。同时时间戳的设计非常灵活,在不同场景和状态下都有差异化设计。那么这其中有什么规律可循呢?本文将结合 58 相关产品的实践向读者阐述时间戳控件的设计方法。更多时间设计干货:如何设计「时间显示」更专业?来看大厂总结的方法!背景“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。阅读文章 > 一、时间戳类型时间戳的类型分为绝对时间和相对时间两种,二者覆盖了全部的时间戳场景,其中绝对时间强调“准确性”,而相对时间强调“即时性”。绝对时间和相对时间的差异1. 绝对时间绝对时间是指事件发生的确切时间,目标为用户提供精确的日期和时间,强调事件的准确性。它由“日期(年月日)+时间(时分秒)”的格式组成,既包含时间点也包含时间段,如:“下午 2:00 开会”、“2022 年 11 月 1 日~2022 年 12 月 1 日放假”等。优势是时间信息传达精准,给用户以确定性,强化对时间信息的感知;缺点是会导致文本过长浪费空间。绝对时间的常用的展示方式有以下 4 种:“2007 年 2 月 6 日” 和 “2007-02-06” 是公历日期标准格式,用“-”分割时个位数需要加“0”。“2007/02/06” 在不同国家有着不同的展示顺序,在设计时需要谨慎使用。“2007.02.06” 使用英文句号做分割,容易与英文字段混淆造成误解,建议尽量少用。我们建议平台使用统一的展示方式,以保证统一性同时提升用户感知。2. 相对时间相对时间是指事件发生的时间与现在所处时间的差值,目标是提供相对的模糊时间,向用户强调事件发生的即时性。它大多数由“日期(年月日)/时间(时分秒)+定语”的格式组成,如:“帖子发布于 2 天前”、“会员 30 天后到期”等。使用场景多用于:倒计时、即时性资讯、通知推送等。优势是用户的理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是相较于绝对时间不够精确。设计时首先要注意单位换算。试想一下随着时间的增加,单位前的数字会不断增长导致字段所占空间越来越大,以至于浪费空间并增加阅读成本。因此时间单位需要随着时间推移而变化,尽可能使用简短的字段描述相对时间,如将“48 小时前”简称为“2 天前”,将“712 天前”简称为“2 年前”。其次要关注时间取整。由于相对时间只提供及时性的模糊时间,因此为了降低用户理解成本并节省空间,我们可以将相对时间戳做取整处理,如将“1 小时 15 分钟前”取整为“1 小时前”。相对时间戳的设计注意「单位换算」和「时间取整」二、时间戳颗粒度绝对时间戳是由“日期+时间”组成的,在不同场景中设计师会使用不同的颗粒度来设计时间戳。「日期+时间」的组合1. 粗颗粒度精确到“日”的时间戳,作为时间维度的 Tips 应用在各种设计组件中,向用户传达最基础的时间信息。2. 中等颗粒度精确到“分”的时间戳,常用于精确事件的时间展示,有 2 种展现形式:动态日期:以“XX 12:00”的格式出现,多用于时效性强的场景,如聊天信息和新闻资讯。根据时间发生的日期和当日距离有差异化:前一天发生,可写作“昨天”;一周内发生可以写周几,如“周二 12:00”;超过一周内发生可以写日月,如“2 月 6 日 12:00”;超过一年内发生可以加上年,如“2022 年 2 月 6 日 12:00”。固定日期:以“2022 年 2 月 6 日 12:00”的格式出现,应用于关键时间节点的展示场景,相比较上一种方式更正式且传达的确定感更强。中等颗粒度的格式差异3. 细颗粒度精确到“秒”的时间戳,应用于金融交易场景,如交易记录、订单记录等。举例:58 到家 App 的订单模块,用户在查看订单记录时,给他们传达强烈的确定感,从而产生安全感并提升对平台信任。58到家APP的订单模块倒计时的设计也会精确到秒,并被广泛应用在各类运营活动上。如下图,58 到家的运营活动,用户看到时间一分一秒地流逝对心理造成压力,从而产生激励作用,增强消费欲望。限时运营活动的倒计时三、时间戳应用场景为了能更好地使用时间戳,我们还需要知道它在不同场景下的作用。1. 重要内容在设计中作为重要的内容要素使用,来强调关键的时间节点。如运营活动,该场景下时间戳对于活动内容的传达有重要影响,甚至关系到用户能否顺利完成活动任务,如用户能否在规定时间内完成抽奖获得礼物,或能否按时观看直播。因此在设计中需要增强这部分的优先级和视觉表现力。运营活动中的时间要素2. 行为标记记录用户的关键行为。在用户进行某个动作后打上时间的标记。很多关键操作都存在可追溯性,包括付款、修改内容、创建产出物等。因此设计时间戳为的是让用户能够在查找相关信息时,实现快速定位。以下图的 B 端产品为例,我们在「智慧营销平台」和「云效 2.0」使用了时间戳引导,方便用户以时间维度查看操作行为。B端场景下标记用户的操作行为3. Tips 信息用户在浏览产品内容时,时间戳作为该条内容的附属信息,起到补充说明的作用。该场景下时间戳的优先级较低,需要弱化处理。根据内容的差异性可以选择不同的类型和颗粒度,如下图中的收到消息时间使用绝对时间展示从而强调准确性,而 Feed 流中帖子的时效性更强,可以不提供精确时间,故使用相对时间展示。时间戳Tips 信息最后不难看出时间戳是一个可灵活运用的设计元素,需要设计师选择合适的类型、格式和颗粒度,并与应用场景紧密贴合,保证用户有良好的体验和感知。它不仅承担着传递时间信息的任务,也可以给业务带来价值,像在 B 端场景下利用时间戳帮助用户追溯操作行为,或在 C 端场景下利用倒计时产生紧迫,感刺激用户消费,从而提升订单转化。时间戳虽然常见,但它的关注度却不高,许多设计师都是凭主观感觉设计,因此我们从一个理性的视角去梳理时间戳的设计方法,希望这篇文章能帮到你。欢迎关注「58UXD」的微信公众号:本篇来源:优设网原文地址:https://www.uisdc.com/time-stamp-design
时间 事情 工作 Hey 你今天过得好吗?我是小确幸发现安开开,虽然生活中困难重重,但还是得想办法好好过生活呀今天的小确幸,来自于几个亲测有效的时间提效方法,帮大家更从容地应对工作压力,以便多留出些时间,好好照顾自己。更多效率工具:这5款工具,让设计师工作效率提升 200%!(十一)大家好,这里是和你们聊设计的花生~ 最近又收集了好多超实用的效率工具,分享给大家,本期推荐的 5 个神器分别是: 打开即用!阅读文章 > 一、没时间,我没时间!我之前的状态是经常忙到飞起,有时好多事儿一并行做就乱,而且总被打断。但奇怪的是,下班后回想一天都干了些啥?却又想不起来,只觉得还有好多活儿没干完。第二天又陷入了和昨天重复的忙碌状态。后来我发现,抛开“目标动力”谈时间管理的,都是耍流氓!目标动力才是做成事的“道”,时间管理只是实现目的的“术”。这个“道”只能自己找。只有足够上头,才能足够有效。比如“为了晚上飞长白山滑雪,我要在 6 点前完成工作!”但“术”是通用的,可以借鉴和学习。今天就分享我亲测好用的提效方法,以解决 2 个几乎所有人都遇到的难题:时间不够,咋办?总被打断,咋办?运用熟练,每天能省出 2-3 小时呐!干点啥不香!二、“乾坤挪移”法,专治时间不够乾坤挪移法:首先总结自己一天的精力曲线变化,然后将事情按所需精力高低分类,再按精力曲线重新匹配事情顺序,好让每一分钟时间都发挥它最大的价值。具体分为 3 个基本方法,和 2 个进阶方法。1. 将时间按效率高低分类先观察自身状态,记录下一天中什么时间段最精神、一般、或困顿。然后将时间分成高效、一般、低效 三类。比如,我自己记录的一天时间情况如下:2. 将事情按所需精力分类同理,也将事情按 复杂、一般、简单,分为 3 类:复杂事情:需要完整时间,高强度思考的事,比如“思考复杂方案”,就需要放到高效时间内重点完成;一般事情:思考强度一般,比如“简单需求画图”、“常规事务性会议”,适合放到精力一般的时间段;简单事情:比如“写周报”,只需要碎片化时间,不占用思考内存的事情。3. 让对的事,遇到对的时间然后,将分好类的事情,乾坤挪移,调整顺序。例如: 将“复杂事情”放到“高效时间”内,将“简单事情”,放到“低效时间”内。举例,你是一个上午高效的人。但你之前的工作状态都是白天处理杂事,只留出晚上特别疲惫的时间干活儿,效率必然低下。意识到这一点后,如果第二天和 PM 对需求,10 点-18 点对方都能接受,那我即使上午有空,也会安排在 17-18 点。因为我上午时间宝贵,精力充沛,我需要用上午的时间做复杂的事情。以上是 3 个基本方法,如果你还想节省更多时间,那可以试试一下 2 个进阶方法~!4. 进阶叠加法 1:一段时间,同时做多件事开车熟练的人,可以一边聊天一边听歌。同理,对于简单熟练的工作,同样可以叠加在同一个时间内做完。举个例子,如果一下午需要做的事情有:2h 简单会议(不需要高度参与,内容常规,听就行)15m 写周报15m 搜集优秀设计素材1h 完成简单需求出图正常排,需要 3.5h,但其实,2、3、4 完全可以叠加在开会中,同时进行,边听边做 2h 开完会,同时就能把所有工作完成。瞬间节省 1.5h~!同理,上下班路上我会一边骑车,一边听书,到了工位快速用 20 分钟记下路上刚听的要点,也是通过叠加法,挤出自学的时间。5. 进阶叠加法 2:一段时间,产生多份成果接到一项工作之前,多向前想一步,看看手头这件事能不能同时应用于多种场合。举个例子,接手一个复杂需求,在分析和出图的过程中,就把过程中遇到的困难&应对方法,随时记录到一个复盘文档中;同时也尽量按项目汇报的标准去输出内容。这样一来,同样是完成一个需求的时间,别人可能仅仅完成了一个需求,而你在一段时间内,同时产生了 3 份成果:完成 100%需求完成 90%复盘文档完成 80%项目汇报接下来只需收尾整理,就可以完成以上 3 项工作啦。三、“无中生有”法,专治总被打断无中生有法:从时间、空间、人等,各个角度寻找解决办法,尽可能多地制造专注的场景,以及寻找被打断后有助于快速恢复的事件。1. 主动创造更多专注场景分为时间和空间、人三个方面。① 时间同样一件事情,如果一小时能专注做完,但如果中途被打断一两次,可能就得花 2 小时才能做完。若真的有需要高度专注思考,不想被打断的的事情,而工作中实在又避免不了被打断,那就只能无中生有,创造不被打断的时间。比如我会时常会在 9:30-10:30 和 13:00-14:00 这两个多数人都在休息的时间段,安排高强度思考工作。② 空间我属于高敏感型人格,对听觉、嗅觉、触觉等信息,都极其敏感,所以在办公室周围如果有人开会、讲话,我都会不自觉听到,分散精力。如果你和我一样,那有效的方法就是营造一个专注的物理空间,如:戴上降噪耳机,或者直接约个没人的会议室,高效专注地把事情做完。小提示:如果白天自己安排了重要的工作,可以将自己的日程提前占上,以避免别人突然占用你的重要时间,拉你去开会。③ 人并不是所有的被打断都是无法控制的,可以从中跳出一些能控制的“打断”,将其集中安排在一起,以减少一天中,被打断总次数。举个例子:一般组外的打断是不可控的,但组内的打断,多数是可以商量的。如果不主动控制,我可能从早到晚都要时不时中断手头工作,去帮其他同学审稿,或解答校招同学的问题。但是我可以主动和同学们商量,比如约定:审稿、问题解答,如果不着急,可以集中在下午 16-18 点沟通,如果着急就随时沟通。这样就能最大限度地在高效工作时,减少被打断的次数啦。小提示:如果实在实在工作紧张,就直接退出工作聊天App,定个闹铃,每半小时看一下消息,可以最简单粗暴地减少被打断的次数。2. 利用“TURN ON 事件”,快速进入状态如果被打断不可避免,再回到手头的事情就非常困难,那如何快速重新进入状态呢?我个人经验,有些事情,是能帮助自己更快速进入专注状态的,我将这些称为“TURN ON 事件”:一做这些事,就像打开一个开关,能帮我从懒散的状态,迅速切换到专注状态。这需要自己摸索,我目前找到的 2 个“TURN ON 事件”,是打字,和 2 倍速听书。① 打字我有时切换状态后,会先打字记一会儿读书笔记。就是将一些图片版 PDF 书籍的划线部分,打字整理成文字版的读书笔记。手指飞速敲击键盘的动作,能极大地帮助我快速进入到心流状态,迅速专注起来。附加好处,就是让我对记录内容的思考、印象更深刻,比直接用 OCR 识别理解更到位。② 2倍速听书有时开完一个 3 小时的会,脑子昏昏沉沉的,回到工位只想发呆。这时,如果开启“2 倍速听书”,同时打字记下重点内容,就会借着快语速,马上进入专注状态——因为如果不集中精力会跟不上哒~!不信的小伙伴可以感受一下边听边记的酸爽:如果发呆,20 分钟过去就过去了;2 倍速听书,20 分钟不仅能加速专注,还能推动自己多看点书,简直完美~!四、高阶方法还有 2 个方法,通用且有效,但就是很难坚持,强烈推荐进阶玩家试试哦。1. 记录时间花销详细记录下每件事情所花时间的方法,源于著名时间管理书籍《奇特的一生》,作者柳比歇夫通过每天精确的时间记录,创作出 70 多部领域广泛的学术著作,高效得惊人。我尝试过记录时间,非常明显的好处是:记录时间能有效纠正我对时间花销的感知。比如我以为写一篇小文,本以为 4 小时就能搞定;但最后统计,我总共花了将近 13 小时,前后 2 天才能完成。意识到“写文不易”的事实后,下次我预估时间就会更加准确。2. 玩儿“和自己赛跑”的游戏工作中经常有那种觉得很无聊,但却不得不做的工作。开始我怀着抵触心情去做。但后来我发现,再无聊的工作,也可以赋予它一个意义——可以用来“练习和自己赛跑”。每一项任务,都可以在做之前设定一个“跳一跳”能完成的时间,然后和自己赛跑,看看能不能跑赢之前的自己。比如,一个非常简单的简单需求,我预估今天花 4 小时搞定画图部分,那我就和自己赌一把,看看 3 小时能不能画完。玩儿嘛,试试呗!反正也没啥损失。玩儿着玩儿着就快了。好了,以上的方法,不仅可以帮我节省出 3.5h 的宝贵时间,实现 6 点下班~!还能让我在完成工作之余,坚持学习~!希望以上的方法,能帮点赞分享的你们,节省出更多的时间,照顾好自己,陪伴好心爱的人。即使困难重重,也能尽力把生活过得好一点,更好一点。欢迎关注作者微信公众号:漫声细语本篇来源:优设网原文地址:https://www.uisdc.com/efficiency
时间 内容 用户 背景“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。“时间”元素的分类按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:A. 事件的关键构成要素时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。B. 行为的时间标记指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。C. 内容的附属信息用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。“时间”的呈现方式和运用技巧在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和”时间间隔“的概念。拿开会举例子:“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点,而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:1)时间段加上定语会变成时间点(但同样是时间点,“下午 6:00”是绝对时间,而“1.5 小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);2)两个时间点之间则表示时间段。所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是 12 日 15:15:20),对用户的激励作用越明显(如距抢购结束仅剩 00 时 01 分 23.6 秒)。1. 绝对时间戳绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。时间颗粒度的选择依情况而定,一般场景总结如下:2. 相对时间戳相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于 push 通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。在使用相对时间时,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。总结在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。当时间作为“A.事件的关键构成要素”时一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。当时间作为“B.行为的时间标记”时该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。当时间作为“C.内容的附属信息”时如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。如何设计「时间显示」更专业?来看大厂总结的方法!背景“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/time-display-design