样式

Glass 具有独特的风格,因此我们提供了标准的卡片模板、调色板、排版和书写准则,以便您尽可能遵循。

在设计任何自定义布局之前,请使用 GDK 提供的可用 CardBuilder 布局为用户提供一致的用户体验。如果这些布局都不符合您的要求,请在设计中遵循以下准则。

指标和网格

Glass 界面针对不同类型的时间轴卡片提供了标准布局和外边距准则。卡片通常具有以下常规区域,并且我们提供了一些适用于一组常规卡片的准则。

卡片区域

Glass 为一组常见区域定义了尺寸,以便您轻松设计和以一致的方式显示不同的卡片。

主要内容

卡片的主要文本内容采用 Roboto Light 格式,最小尺寸为 32 像素,并且带有内边距。不低于 64 像素的文本使用 Roboto Thin。


全出血图片

图片在全宽时效果最佳,且无需文本所需的 40 像素的内边距。


内边距

时间轴卡片的文字内容四周都有 40 像素的内边距。这样大多数人都能清楚地看到你的内容。

页脚

页脚会显示有关卡片的补充信息,例如卡片来源或时间戳。 页脚文本为 24 像素、Roboto Regular 和白色 (#ffffff)。


左侧图片或列

左图或左列需要修改内边距和文本内容。

布局模板

GDK 提供了各种可供您使用的 CardBuilder 布局

颜色

Glass 以白色显示大多数文本,并使用以下标准颜色来表示紧急程度或重要性。您也可以在时间轴卡片中使用以下颜色:

CSS 类 RGB 值
white #ffffff
gray #808080
blue #34a7ff
red #cc3333
green #99cc33
yellow #ddbb11

以下示例使用颜色来表示有关列车线路和状态的重要信息。

排版

Glass 会根据字体大小以 Roboto Light、Roboto Regular 或 Roboto Thin 显示所有系统文本。如果您要创建实时卡片或沉浸式卡片,则可以随意使用不同的排版来传达您自己的品牌信息。

Roboto Light

Glass 以这种字体显示大多数文本。

ABCDEFGHIJKLMN OPQRSTUVWXYZa bcdefghijklmnopqr stuvwxyz1234567 890!?/+-=()[]#@$
%^&*<>:;”

>

Roboto Regular

Glass 显示这种字体的脚注文本。

ABCDEFGHIJKLMNOPQRST UVWXYZabcdefghijklmnopq rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;”

Roboto Thin 字体

Glass 以这种字体显示较大的文本(64 像素及以上)。

ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[]#@$%^ &*<>:;”

调整动态文字大小

使用 CardBuilder.TEXTCardBuilder.COLUMNS 布局时,Glass 会根据内容量使用尽可能大的字体大小。以下卡片显示了基于文本量的文本排版特征示例。

编写

文本空间有限,因此在为 Glassware 编写文本时,请遵循以下准则。

简明扼要。应简洁、简单、精确。寻找长文本的替代方案,例如大声朗读内容、显示图片或视频或移除功能。

力求简单易行。假装您在交谈的人既聪明又有能力,但不懂技术行话,英语可能不太好。 使用简短字词、主动动词和常用名词。

保持友善。使用缩写词。使用第二人称(“您”)直接与读者对话。 如果文本的阅读方式与您在闲暇对话中讲得不一样,那么您可能无法使用它撰写内容。

将最重要的信息放在第一位。前两个单词(大约 11 个字符,包括空格)应至少包含字符串中最重要的信息的概述。如果不是,请重新开始。仅描述必要的内容,无需描述。 不要试图解释细微的差异。大多数用户都会失去这些信息。

避免重复。如果某个重要字词在屏幕或文本块中重复出现,请设法只使用该字词一次。