谷歌眼镜设计规范之度量和网格

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

谷歌眼镜用户界面有标准的布局，以及在不同类型的时间轴卡片上的边距参考规范。卡片通常会有如下几种区域，我们将会列出一些参考给你。

卡片区域


谷歌眼镜为一组通用的区域定义了大小，以便易于设计和保持一致性。

主内容

卡片的主要文字内容是有界的填充区域，字体是Roboto-Thine。


根据内容的数量，谷歌眼镜动态的调整字体大小。


状态栏

状态栏有三种情况。滑动显示在一组卡片中当前的位置。进度显示动作的进度或时间。当处于执行中显示一个打转的动画。


全出血图片

当全出血时图片效果最好，并且不需要40px的内边距。


左图或列

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


页脚

页脚显示卡片的补充信息，例如卡片来源或时间戳。页脚文字通常是26像素,Roboto light字体，白色，居中。


内边距

时间轴卡片中在所有的文字内容边缘都有40像素的内边距。这样能让大部分人清晰的查看内容。




布局模板


下面的布局将给你展现一些常用的网格和实现布局的卡片。


主布局

全出血文字

作者和内容

左图或列

列表