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

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

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

卡片区域

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

主内容

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

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

状态栏

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

全出血图片

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

左图或列

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

页脚

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

内边距

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

布局模板

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

主布局

全出血文字

作者和内容

左图或列

列表

转载于:https://blog.51cto.com/2266290/1354506

谷歌眼镜设计规范之度量和网格相关推荐

谷歌眼镜设计规范之最佳实践
原文地址:http://bbs.seacat.cn/thread-887-1-1.html 这个文档会重温一些设计和信息发送的最佳实践.遵循这些参考将能保证最好的用户体验. 不要使用一个固定的时间轴项 ...
谷歌眼镜设计规范之书写
原文地址:http://bbs.seacat.cn/thread-882-1-1.html 对于文字你只有有限的空间,所以在你的Glassware中可以遵循下面这些参考规范. 保持简要:要简洁.简单和 ...
谷歌眼镜设计规范之输入方式
原文地址:http://bbs.seacat.cn/thread-875-1-1.html 谷歌眼镜使用传统的触控手势,但也提供令人兴奋的输入方式,例如语音输入和头部姿势.下面会列出通常的输入方式以及 ...
谷歌眼镜设计规范之UI设计原则
原文地址:http://bbs.seacat.cn/thread-860-1-1.html 谷歌眼镜是完全不同于现有移动平台的设计和使用方式. 当构建Glassware时遵循下面这些原则,将能给用户 ...
谷歌眼镜设计规范之沉浸式
原文地址:http://bbs.seacat.cn/thread-865-1-1.html 沉浸式是种自定义的UI体验,显示在时间轴之外的体验. 概述时间轴管理着大多数用户体验,但有些时候,Glas ...
Android的界面设计规范
样式设备和显示器 Android有百万计的手机.平板电脑和其他设备,这些设备都有各种屏幕尺寸.利用Android的灵活的布局系统,您可以创建小到手机大到平板的各种应用程序. 变通拉伸和压缩布局,以 ...
Kimera:一个基于度量语义的SLAM开源库
标题:Kimera:an Open-Source Library for Real-Time Metric-Semantic Localization and Mapping 作者:Antoni Ro ...
表格列数太多页面怎么设计_B端产品设计规范分享
加入彩虹的一年来,接触的都是B端产品大大小参与设计了七八个项目,从中总结了一些经验给大家参考,当然依旧还会有一些不足,后期也会不定期优化更新.B端设计与C端大有不同.C端Consumer,表示为消费者 ...
IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
单目摄像头检测6D姿态
单目摄像头检测6D姿态 CVPR2019: ROI-10D: Monocular Lifting of 2D Detection to 6D Pose and Metric Shape 论文链接: h ...

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

谷歌眼镜设计规范之度量和网格相关推荐

最新文章

热门文章