Material Design Data Format 数据格式

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

数据格式描述了不同类型的数值和语言。

目录

日期和时间

数据修订

日期和时间

时间和日期的格式

时间和日期可以采用以下的格式:

时间或日期何时使用及如何使用示例时间使用AM或PM显示当天的时间,不使用点号(场所适用时也可以使用小写的am/pm2:00 PM24小时制显示时间时不带AM/PM14:00年,月,日显示日期和年份。如果在当前的年份内,则显示不带年份的日期。1月14日2012年1月14日大致时间四舍五入到最大和最近的日期或时间。5分钟内3天前绝对时间当不适合使用大致时间时,显示精确的日期或时间。今天,10:00 AM

时间和日期的范围

展示时间或日期的范围时,在范围的值之间采用短破折号隔开(不要空格)。

例如:

8:00 AM-12:30 PM

1月6日-2月2日

书写月份时添加空格,或当需要消除歧义时可添加空格。

范围何时使用及如何使用示例年日期范围根据是否涵盖同一年还是当前年份来进行格式化:显示开始和结束的年份如果两个日期都是当前年份,则仅在范围结束时显示年份2013年12月6日-2014年1月2日2014年1月4日-6日AM/PM如果两个时间的 AM/PM 相同,只在范围的后面显示一个 AM 或 PM。8:00–10:30 AM

时区

因为不同地区的时区不同,使用时区时,要确保精确。

时区类型描述示例个位数的小时移除个位数小时前面的0UTC+5:00单个时区引用单个时区时,使用两个字母表示时区,删除S(标准时区)或D(夏令时)。美国东部时间下午4~10点开放组合时区当为全国受众指定日期时,需要包含标准时区或夏令时(例如 EDT),以避免混淆。一些美国的州,如亚利桑那州,不使用夏令时。第一场比赛在2015年4月13日下午4点 EDT。

何时显示日期和时间

根据情景,仅显示日期或时间,或者二者都显示。

时间段何时及如何显示示例未来未来的日期需要包含时间。10月10日,08:00过去当引用过去的时间时,同时显示日期和时间1月5日上午7:16提醒我很久以前很久以前的事件可以省略时间。1月3日工作日当引用工作日时,显示以逗号分隔的缩写的日期。周一,1月10日,早上八点持续时间以 H:MM:SS 的格式显示录音(如视频或音频)的持续时间。如果不适用,请省略小时或秒。在同一情境中使用相同的格式。例如页面中有一个标记为 “3:15” 的视频(使用小时和分钟),不应在该页面中使用这种格式再来表示分钟和秒。0:301:01:05

缩写

空间有限时使用缩写。

时间单位描述示例月份月份可以使用缩写或数字。Jan 63/12/12日期美国的日期格式为月/日/年,但其他国家使用日/月/年。2012年3月12日写作 03/12/12可能会被误解为 2012年12月3日。周几星期几可以使用每天的第一个字母的缩写。S表示星期天M表示星期一日期和时间缩写的星期几可以和时间结合使用。Sun, 2:00 PMSun, 14:00数字四舍五入可以使用缩写的时间单位,去除某些场景下的“:00”,例如时间戳、图标中的标签和持续时间等。8 AM2小时32分钟前

关于日期和时间

由于人们通常会彼此谈论时间,所以当界面空间足够时显示日期和时间信息。这有助于帮助用户理解时间和日期代表的意义,例如,“营业时间9:00 AM–午夜”或“明天下午提醒我”。

请参考这些条款中的昨天或明天如果这个日期在下一周,那么还要显示星期几(例如星期二)

时间修订

数据修订和截断指的是如何表示截断的数字,以及如何对敏感数据进行伪装。

截断数值

居中的圆点[• • •]是隐藏部分敏感数据的强调字符。它们指示何时数字是不完全可见的(例如信用卡或社保号码)。

何时使用3个居中圆点

要隐藏大部分数字,例如社保号码时,请使用三个点的居中圆点[• • •]。

你可以跨字体和平台使用此格式:

在第一个圆点之前放置两个空格然后在每个圆点和最后一个圆点之间添加一个空格。

或者,使用 Unicode 字符代替:U0020,U0020,U2022,U2006,U2022,U2006,U2022,U2006

k3rllx3mwtc.png插图

何时使用4个居中圆点

信用卡和借记卡数据必须使用4个居中圆点进行隐藏 [• • • •].

用 Unicode 表示:

U0020,U0020,U2022,U2006,U2022,U2006,U2022,U2006,U2022,U2006

jnrebf1dqw1.png插图(1)

减少字母

底线椭圆[…]表示未显示的字母、单词或短语。它们还可以表示名称或邮件地址仅部分可见。

用法

在显示的最后一个字母后面输入三个点号(或者Unicode字符U2026)。

mwgkbhaulqi.png插图(2)

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

没有竞品参考就不知道如何设计,什么情况?

2020-10-12 2:04:34

UI设计

Material Design Confirmation &Acknowledgement 确认&通知

2020-10-12 2:04:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索