風格

Glass 擁有獨特的風格,因此我們提供標準卡牌範本、調色盤、字體排版和書寫規範,以便您遵循。

設計任何自訂版面配置之前,請先使用 GDK 提供的 CardBuilder 版面配置,為使用者提供一致的使用者體驗。如果上述版面配置都不符合您的需求,請遵守下列設計指南。

指標和格線

Glass 使用者介面針對不同類型的時間軸資訊卡提供標準版面配置和邊界規範。資訊卡通常會有下列通用區域,我們為這些卡片製定了通用規範。

資訊卡地區

Glass 定義一組常見區域的維度,讓您輕鬆設計及顯示不同的資訊卡。

主要內容

資訊卡的主要文字內容為 Roboto Light,大小下限為 32 像素,且設有邊框間距。64 像素以上的文字使用 Roboto Thin。


全出血圖片

圖片完全採用全出血效果,且不需要 40 像素的邊框間距。


邊框間距

時間軸資訊卡的兩側各有 40 像素的邊框間距。這可讓大多數使用者清楚看見您的內容。

頁尾

註腳會顯示卡片的補充資訊,例如卡片的來源或時間戳記。頁尾文字為 24 像素、Roboto 一般文字與白色 (#ffffff) 顏色。


左側圖片或資料欄

左側圖片或欄需要修改邊框間距和文字內容。

版面配置範本

GDK 提供多種您可以使用的 CardBuilder 版面配置

顏色

Google Glass 能夠以白色顯示大部分的文字,並使用下列標準顏色來表示急迫性或重要性。這些顏色也可用於時間軸資訊卡:

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

以下範例使用顏色來表示關於火車路線和狀態的重要資訊。

字體排版

Glass 會根據字型顯示 Roboto Light、Roboto Normal 或 Roboto Thin 中的所有系統文字。如果您正在製作即時資訊卡或沉浸式影片 歡迎使用不同的字體排版來傳達自己的品牌

Roboto Light

Glass 會顯示這個字型中的大部分文字。

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

>

機器人

Glass 會顯示這個字型的註腳文字。

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

〈Roboto Thin〉

Glass 在這個字型中會顯示較大的文字 (64 像素以上)。

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

調整動態文字大小

使用 CardBuilder.TEXTCardBuilder.COLUMNS 版面配置時,Google Glass 會根據內容量,使用最大的字型大小。以下資訊卡根據文字量顯示文字的字體排版特性範例。

寫作

文字空間有限,因此為 Glassware 撰寫文字時,請遵守下列規範。

保持精簡:因此請簡明扼要。尋找替代文字的替代方案,例如大聲朗讀內容、顯示圖片或影片,或是移除功能。

保持精簡:假設您目前發言的對像是聰明且具競爭力,但不瞭解相關技術術語,而且可能還不熟悉英語。使用簡短字詞、主動動詞和普通名詞。

保持友善:使用收縮。使用第二人 (「你」) 直接與讀者對話。 如果您的文字無法以非正式對話方式表達,您可能無法以此撰寫。

將最重要的內容優先顯示。前兩個字詞 (約 11 個字元 (含空格)) 應至少包含字串中最重要的資訊。如果沒有,請重新開始。請只說明必要的部分,不要再描述。 請勿試圖解釋細微的差異。大多數使用者都會遺失應用程式。

避免重複。如果某個畫面或文字區塊重複出現重要字詞,不妨只使用一次。