4000-888-103

资讯动态谷歌18年所出的材料设计指南资讯详情

谷歌18年所出的材料设计指南

2019-11-06 14:02:14

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共近百篇,欢迎关注哦。

 

目录

关于Crane

产品架构

布局

颜色

排版

图标

形状

组件

动效

 

 

Crane是一款旅行应用程序,它使用材料设计组件和材料主题来创建个性化的品牌体验。

 

关于Crane

Crane是一款旅行应用程序,可帮助用户查找和预订符合其输入偏好的旅行、住宿和餐厅。 Crane应用程序(用于预订)功能和(允许用户探索和了解新体验)信息都很齐全

Crane的品牌精致而富有表现力,注重视觉和动效细节营造出一种为用户量身定制的体验。

 

灵活美观

除了具有功能性和信息性外,Crane应用程序还提供各种过滤器来自定义内容,以便关联用户

为了方便用户理解这种灵活性,交互以使用背景组件为中心。 对背景图层的首选项或过滤器进行更改的消息会立即显示在背景的上一层 例如,当用户在Crane上寻找航班时,他们在后层输入诸如目的地和日期之类的信息。 输入此信息后,符合其偏好的航班将显示在上一层。 这种相互作用强化了Crane如何根据用户的偏好定制内容,以大胆而优雅,直接但尊重用户的方式呈现选项。

 

产品架构

Crane应用程序的信息架构使用结构。 流结构是基于任务的结构,需要以连续顺序访问屏幕。

结构最适合Crane,因为它为有兴趣探索过滤内容的用户提供了所需的灵活性,使其可操作,以便他们可以预订特定的选择。

Crane使用标签和背景来浏览和过滤移动设备平板电脑和桌面上的内容。

 

主要部分

Crane应用程序有三个主要部分:

  1. 航班

  2. 住宿

  3. 餐饮

 

使用界面顶部的选项卡导航到这些主要部分。

这些选项卡嵌套在背景组件的后层,后者还包含相关的过滤器和上下文操作。


内容过滤

用户可以根据自己的喜好快速自定义Crane的内容。 后层包含影响上一层显示内容的控件,允许用户查看为其定制的内容。

视频播放器

00:00

00:00

00:04

使用上/下箭头键来增高或降低音量。

在Crane上的标签之间点击

 

布局

网格系统

Crane使用响应式网格系统,它具有灵活的列和内边距,可根据屏幕宽度(如移动设备,平板电脑和桌面)调整大小。 内容按列堆叠,在用户交互时垂直扩展和收缩。

视频播放器

00:00

00:00

00:10

使用上/下箭头键来增高或降低音量。

Crane的网格系统,缩小到50%

 

标签和背景(移动)

由于屏幕空间有限,每个背景项目垂直叠加在其他项目之上。

 

标签和背景(平板电脑)

由于平板电脑的屏幕空间比移动设备多,因此有足够的水平空间将背景放在另一个旁边。

缩小至62.5%

 

标签和背景(桌面)

由于桌面上的界面空间比平板电脑上的界面空间多,因此有足够的空间可以将所有背景项水平放置在一起。


上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png