Material Design Crane

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

 

目录

关于Crane
产品架构
布局
颜色
排版
图标
形状
组件
动效
 
 
Crane是一款旅行应用程序，它使用材料设计组件和材料
主题
来创建个性化的品牌体验。
​​

 

关于Crane

Crane是一款旅行应用程序，可帮助用户查找和预订符合其输入偏好的旅行、
住宿和餐厅。
Crane应用程序（用于预订）
功能
和（允许用户探索和了解新体验）
信息都很齐全
。
Crane的品牌精致而富有表现力，注重视觉和
动效
细节
，
营造出
一种
为用户
量身定制的体验。
​​
 
灵活美观
除了具有功能性和信息性外，Crane应用程序还提供各种过滤器来自定义内容，以便
关联用户
。
为了方便用户理解这种灵活性，交互以使用背景组件为中心。
对背景图层的首选项或过滤器进行更改的消息
会立即
显示
在背景的
上一层
。
例如，当用户在Crane上寻找航班时，他们在后层输入诸如目的地和日期之类的信息。 输入此信息后，符合其偏好的航班将显示在
上一
层。 这种相互作用强化了Crane如何根据用户的偏好定制内容，以大胆而优雅，直接但尊重
用户
的方式呈现选项。
 

产品架构

Crane应用程序的信息架构使用
流
结构
。 流结构是基于任务的结构，需要以连续顺序访问屏幕。
流
结构
最适合Crane，因为它为有兴趣探索过滤内容的用户提供了所需的灵活性，使其可操作，以便他们可以预订特定的选择。

​​
Crane使用标签和背景来浏览和过滤移动设备
、
平板电脑和桌面上的内容。
 
主要部分
Crane应用程序有三个主要部分：

1. 航班
2. 住宿
3. 餐饮

使用界面
顶部的选项卡导航到这些主要部分。
这些选项卡嵌套在背景组件的后层，后者还包含相关的过滤器和上下文操作。

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

在Crane上的标签之间点击。

 

布局

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

​

​Crane的网格系统，缩小到50％

 

标签和背景（移动）

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

 

​标签和背景（平板电脑）

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

​​
缩小至62.5％
 
标签和背景（桌面）
由于桌面上的界面
空间比平板电脑上的
界面
空间多，因此有足够的空间可以将所有背景项水平放置在一起。
​
​

缩小至50％
 

海拔

使用颜色

Crane的UI使用颜色来表示元素之间的高度差异，而不是阴影。 例如，卡片通过具有与背景不同的颜色来显示其容器的边界，而不会投射阴影。
 

背景阴影

Crane使用阴影表示高度
的一个实例是当内容在背景组件的前层滚动时。 在这种情况下，背景的默认行为保持不变，产生阴影以将前层
的
子标题与其后面的内容滚动分开。

​​

在前
层
的
子标题下方滚动的卡片集合。
 
 

颜色

 
颜色主题
 
主色
Crane的主要颜色是紫色。 它使用此颜色的三种变体来区分不同的UI元素。
 
辅助
色
Crane的
辅助
色
为红色，用于突出显示所选项目。

 

不同的元素和状态

并非所有界面都需要使用辅色。 Crane的主色紫色的变化足以产生元素之间的区别。 由于Crane的辅色红色通常用于选定状态，它的消失有助于表明未选择状态。

Crane座椅选择页面仅使用主紫色，直到用户选择座位。
 
Crane的
辅助色
红色用于指示组件的选定状态，例如复选框，滑块和单选按钮。 红色也可用于给出排版重点。
​缩小至62.5％
 
替代错误颜色
Crane的颜色主题使用错误状态的替代颜色：橙色。
这是因为红色是Crane的
辅助
色，并且红色错误不能从周围的UI中充分突出，并且可能被误读为选择状态。
​
​

 
排版

字体比例
 
Crane的
字体
比例提供其应用内容所需的排版样式。 样式类型中的所有项目都使用Raleway作为字体，利用Raleway Light，Regular，Medium和SemiBold提供的各种权重。

Crane的字体
类型
 
Raleway
Crane在整个应用程序中使用sans-serif字体Raleway。
尽管Raleway最初是作为特性字体制作的，用于标题和大尺寸，但它已经扩展为
9种粗细
的字体库，适合
正文使用
。 在Crane中使用单一字体可以提供一致的UI，允许其他元素（如摄影和小视觉细节）
突出显示
。
​​
Raleways
的字体形式



Raleway 和 Roboto的对比
 
 

图标

Crane的图像让人联想到旅行设置中的图标，例如机场和火车站。

1. 为了创建一致性，Crane的所有图标共享相同的底层网格结构。
2. Crane的图标集合

 

形状

分类
组件根据尺寸分类为形状组。这个分组让你整组一次性完成设置数值。形状分类包括：

1. 小组件
2. 中等组件
3. 大型组件

Crane的形状分类

 

​​
1.小组件
2.中等组件
3.大型组件
 
小组件
线性文本框属于小组件的形状分类。它们的拐角是圆角，圆角半径是4dp。

 

组件	类别	属性	值
线性文本框	小组件	字体大小	圆角 4dp;4dp;4dp;4dp

​

按钮属于小组件的形状分类。它们的拐角是圆角，圆角半径是50%。

组件	类别	属性	值
按钮	覆盖所有分类	字体大小	圆角 50%

＊Crane的按钮在小组件的形状分类里使用特殊的尺寸数值
 
中等组件
图片列表属于中等形状分类。它们的拐角是圆角，圆角半径为16dp。
​

组件	类别	属性	值
图像列表	中等组件	字体大小	圆角 16dp；16dp；16dp；16dp

 

大型组件

背景页面属于大型形状分类。它们的拐角是圆角，圆角半径是20dp。

​​

组件	类别	属性	值
背景页面	大型组件	字体大小	圆角 20dp；20dp；n/a；n/a＊

＊背景页面只能放置在左上和右上的拐角处。
 
 

组件

​​

 

图像列表

Crane允许用户使用图像列表（在平板电脑和桌面上）浏览内容。

 

瀑布流式布局网格

此图像列表使用瀑布流式布局网格，该网格根据原始图像大小动态调整图像容器高度。 瀑布流式布局网格样式确保横向
、
纵向或方形格式的照片都尽可能多的
显示
内容。 它创造了令人兴奋
和
出人意料
的节奏，
吸引
用户继续向下滚动并探索内容。

 

图像标签

图像列表已自定义为显示每个项目的文本标签。 自定义
内边距为
每个项目的上方和下方提供更多空间，确保不会混淆
文本标签与图像的匹配
。
​​
Crane的自定义瀑布流布局图片
列表
（减少50％）
 


列表
在移动设备上，Crane使用列表组件来组织内容。列表组件是定制的，匹配Crane的排版和颜色。 每个列表项包含与用户最相关的内容（包括地址名称、类型、距离和价格）和一张照片。
​​
Crane在移动端上的自定义列表
 
卡片
Crane使用卡片显示详细的搜索结果，例如出发和到达时间
、
费用，机场和登机信息的航班选项。
 
垂直卡片集
Shrine的卡片出现在垂直堆叠的卡片合集。颜色
通过使用填充颜色白色和背景色浅紫色形成对比，来指示卡片的容器
。 Crane的卡片不会投射阴影，因此每张卡片之间只有很少的填充，
以方便浏览
。

​

​移动端上点击卡片会全屏显示以显示更多信息，并允许用户执行操作，例如预订航班。

在平板电脑和桌面机上，当点击时，卡片会展开以显示更多信息，并允许用户对该项目采取操作。当一个集合中的一张卡被展开时，集合中的所有其他卡都被赋予一个白色遮罩层，不透明度为80%，以强调展开的卡片。

Crane在桌面上的自定义卡片集

 
文本框
线性文本框
Crane使用根据品牌字体和颜色定制的线性文本框。
因为Crane使用红色作为其
辅助色
，所以使用橙色表示错误以确保它们
突出显示
。
​​
Crane的自定义
线性文本框
​​
​

 

填充文本框

Crane使用填充的文本框输入用户首选项。 它们的四面都有定制的圆角形状，并使用Crane的品牌颜色，排版和图标。
​​
Crane的自定义填充文本框
​
​

​​
 
选择控件和滑块
Crane使用各种选择控件来帮助用户过滤搜索结果，
并
在结账过程中进行选择。 这些控件包括复选框，单选按钮，滑块和开关，可使用Crane的品牌颜色进行自定义。
​​

1. Crane的复选框和滑块
2. Crane的单选按钮
3. Crane的开关

 
 
标签
 
为了表示标签的活动状态，Crane使用药丸形状选择器作为
视觉表现
。
​​
 
Crane的自定义标签

1. 标准选项卡
2. Crane的标签使用自定义排版，颜色和状态。 自定义选择状态包括标签周围的药丸形状轮廓和颜色样式的变化。

 
背景
 
背景组件通过在后层上包含导航，过滤器和上下文操作以及前一层上的主要内容来为Crane提供主要结构。 这允许用户快速从被动浏览信息转换到对其采取行动 – 所有这些都在同一个屏幕上，使过程变得简单而有效。
 
后层通过自定义Crane的
主色
紫色，与上层白色形成鲜明的对比。
上
层通过自定义顶部边缘的圆形曲线，来
模仿
Crane标志中圆角矩形。

​​

 

步进器
步进器使Crane用户可以轻松预订机票，住宿和预订餐饮。
Crane在桌面设备和平板端使用一种步进器，而在移动端使用另一种步进器
。
 
在移动设备上，步骤显示在
背景的底层
，相关的表单位于前层。 如果用户希望看到更多的前层，Crane的步进器的
折叠状态可让
用户在界面顶部处位置知道他们在
步
进器
过程中的位置。

​

​Crane的移动步进器处于折叠状态。

较大尺寸的平板电脑和桌面使Crane能够
容纳
顶部的所有步进器。
​​
 
缩小至50％
 
 

动效

启动页
角色动画
，强调缓动以及延时动效给页面设定了细腻和优雅的基调
。

 
Crane首次启动时使用动画
启动页
来
强化品牌形象
。

 

导航转换

Crane的导航转换使用强调缓动和延时增加了一种细腻的格调。

父子层级

淡入淡出，共享变换和
强调缓动的动画效果
用于保持连续性。
​
同级层级

强调
缓动
用于
同级
转换。
​​

 
延时动效
 
当新列表或卡片进入界面
时使用
延时动效
。 级联效果
赋予了变换优雅的格调
。

​

​更新日期过滤器会使用延时动效来重新加载列表项。

 

原文：Material Design