谷歌眼鏡設計規範之度量和網格

原文地址：http://bbs.seacat.cn/thread-877-1-1.html

谷歌眼鏡用戶界面有標準的佈局，以及在不同類型的時間軸卡片上的邊距參考規範。卡片通常會有如下幾種區域，我們將會列出一些參考給你。

卡片區域


谷歌眼鏡爲一組通用的區域定義了大小，以便易於設計和保持一致性。

主內容

卡片的主要文字內容是有界的填充區域，字體是Roboto-Thine。


根據內容的數量，谷歌眼鏡動態的調整字體大小。


狀態欄

狀態欄有三種情況。滑動顯示在一組卡片中當前的位置。進度顯示動作的進度或時間。當處於執行中顯示一個打轉的動畫。


全出血圖片

當全出血時圖片效果最好，並且不需要40px的內邊距。


左圖或列

左圖或列需要修改內邊距和文字內容。


頁腳

頁腳顯示卡片的補充信息，例如卡片來源或時間戳。頁腳文字通常是26像素,Roboto light字體，白色，居中。


內邊距

時間軸卡片中在所有的文字內容邊緣都有40像素的內邊距。這樣能讓大部分人清晰的查看內容。




佈局模板


下面的佈局將給你展現一些常用的網格和實現佈局的卡片。


主佈局

全出血文字

作者和內容

左圖或列

列表