Crane

Crane 是一款旅行应用程序，它使用 Material Design 组件和 Material Theming 来创建个性化的品牌体验。

一. 关于 Crane

Crane 是一款旅行应用程序，可以帮助用户查找和预定与其输入偏好相匹配的旅行、住宿和餐厅选项。Crane 应用程序兼具功能性（预定服务）和信息流（允许用户探索和学习新的体验）。

Crane 的品牌精致而富有表现力，注重视觉和运动细节，可为用户量身定制体验。

灵活的美学

Crane 功能和信息都非常丰富，还提供了多种过滤器来自定义内容，与用户相关。

为了使用户易于理解这种灵活性，交互以使用 Backdrop 组件为中心。更改 Backdrop 组件 Back 层的首选项或过滤器会立即更新在 Front 层上的内容。例如，当用户在 Crane 上寻找航班时，他们在 Back 层上输入诸如目的地和日期之类的信息，输入此信息后，将在其 Front 层显示符合其偏好的排期。这种交互作用增强了 Crane 如何根据用户喜好定制其内容的方式，以大胆、优雅、直接并且尊重的方式呈现选项。

二. 产品架构

Crane 应用的信息架构采用的是流结构，流结构是基于任务的结构，要求以连续顺序访问屏幕。

流结构最适合 Crane，因为它为用户提供了所需的灵活性，他们可以通过输入的内容预定过滤出的选择。

主要部分

Crane 应用有三个主要部分：

航班

住宿

餐厅

使用屏幕顶层的标签导航可以导航到这些主要部分。

这些选项卡嵌套在 Backdrop 组件 Back 层，该组件还包含相关的过滤器和上下文操作。

内容过滤

用户可以根据自己的喜欢快速自定义 Crane 的内容，Back 层包含了一些控件，影响显示在 Front 层的内容。

三. 布局

网格系统

Crane 使用了自适应网格系统，该系统可以根据屏幕宽度（例如移动设备、平板电脑或 PC）自动调节列（Column）和填充（Padding）的大小。内容堆叠在列中，这些列在用户交互时会垂直扩展和收缩。

标签页和 backdrop（移动设备）

由于屏幕空间有限，backdrop 组件中的每个元素都垂直方向堆叠。

标签页和 backdrop（平板电脑）

由于平板电脑的屏幕空间比手机大，因此有足够的水平空间将 backdrop 组件中的元素彼此相邻放置。

标签页和 backdrop（PC）

因为 PC 上的屏幕空间比平板电脑上的屏幕空间大，所以有足够的空间将所有背景项目水平放置。

标高

使用颜色

Crane 的用户界面使用颜色来表示元素之间的高低差异，而不是阴影。例如，卡片通过具有不同于背景的颜色来显示容器的边界，而不会产生阴影。

backdrop 阴影

Crane 中使用阴影来表示标高的一个实例是内容在 backdrop 组件的 Front 层滚动时，这种情况下，backdrop 组件的默认行为保持不变，阴影将子标题层和滚动的内容层分开。

四. 颜色

颜色主题

主色调

Crane 使用的主色调是紫色，它使用此颜色的三种变体来区分不同的 UI 元素。

副色调

Crane 使用的副色调是红色，用于突出显示所选的内容。

不同的元素和状态

并非所有屏幕都需要使用副色调。Crane 主色调紫色的变种足以区分各种元素。由于 Crane 的副色调红色通常用于表示选定的状态，所以没有红色表示此时没有选中任何选项。

Crane 的副色调红色用于指示复选框、滑块和单选按钮等组件的选定状态。红色也作为强调色使用。

另选的错误颜色（非红色）

Crane 颜色主题中使用其他颜色来表示错误状态：橙色。

这是因为红色是 Crane 的副色调，红色的错误不会从周围的 UI 中充分突出，而且可能会误认为选定状态。

五. 版式

字体

Crane 为应用内容提供了不同的字体比例，所有的内容都使用 [Raleway](https://fonts.google.com/specimen/Raleway) 作为字体，并使用不同的权重（weight）。

Raleway

Crane 在整个应用程序中使用无衬线字体 Raleway。

尽管 Raleway 最初是作为显示（display）字体，旨在用于标题和大尺寸场景，但现在也扩展为正文字体。在 Crane 应用程序中使用单个字体可使 UI 保持统一，从而使其他元素（如图片和小的视觉细节）脱颖而出。

六. 图标

Crane 的图标让人联想到旅行环境中可以找到的图标，例如机场和火车站。

七. 形状

类别

组件根据其大小分为不同的形状类别，这些类别使你可以一次设置多个组件值，形状类别包括：

小组件

中组件

大组件

小组件

带有轮廓的文本字段（Outlined text fields）组件是角半径为 4dp 的圆角。

按钮（Button）组件的圆角半径为50%。

中组件

图片列表（Image List）组件是角半径为 16dp 的圆角。

大组件

backdrop 组件是角半径为 20dp 的圆角。

backdrop 组件只能改左上角和右上角。

八. 组件

图片列表

Crane 使用户可以使用图片列表（在平板电脑和 PC 上）浏览内容。

砌体网格（Masonry grid）

此图片列表使用了砌体网格，该网格根据原始图片大小动态调整图片容器的高度，砌体网格样式可以确保在横向和纵向上尽可能多的显示方形格式的内容。它创建了令人激动的，不可预测的节奏，鼓励用户继续向下滚动浏览内容。

图片标签（Image labels）

图片列表自定义显示每个元素的文本标签。自定义填充在每个元素的上方和下方提供更多空间，从而不会混淆哪个文本标签属于哪个图片。

列表

在移动设备上，Crane 使用列表组件来组织内容。列表组件自定义了字体和颜色。

每个列表项都包含了与用户最相关的内容（包括位置、类型、具体和成本），还有一张图片。

卡片

Crane 使用卡片显示详细的搜索结果，例如出发和到达时间、费用、机场和承运信息。

垂直卡片集合

Crane 的卡片使用垂直堆叠方式，卡片的底色使用白色，与浅紫色背景色形成对比，表示卡的容器。Crane 的卡片不会产生投影，因为它们之间的填充很少，从而易于扫描。

在平板电脑和 PC 上，请按一下即可展示卡片，以显示更多信息，并允许用户对该项目进行操作。当选中的卡片展开时，其他的卡片会被覆盖一层白色，不透明度为80%，以强调选中的卡片。

文本框

带有轮廓的本文框（Outlined text fields）

Crane 使用带有轮廓的文本框，并使用品牌的字体和颜色对其进行了自定义，由于 Crane 使用红色作为其副色调，所以错误提示使用橙色表示，以确保他们脱颖而出。

填充文本框（Filled text fields）

Crane 使用填充文本框输入用户首选项。它们具有自定义的形状，四个侧面均带有圆角，并使用 Crane 的品牌颜色、版式和图标。

选择控件和滑块

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

标签页

为了指示标签的激活状态，Crane 使用药丸型选择器作为视觉提示。

Backdrop

Backdrop 组件在 Back 层提供了主要框架，包含导航、过滤器和上下文操作，在 Front 层展现主要内容。这使用户从被动浏览信息迅速转变成主动获取信息，所有这些操作都在同一屏幕上进行，从而使流程简单而高效。

Back 层使用了 Crane 的主色调紫色进行了定制，与白色的 Front 层形成鲜明对比。Front 页顶部边缘使用了圆角，与 Crane 的 logo 相呼应。

步进器

步进器使 Crane 用户可以轻松地预定航班、住宿和餐厅。Crane 在移动设备和其他两种设备上使用不同的步进器。

在移动设备上，步骤位于 Back 层，而相关的内容在 Front 层。如果用户希望看到更多 Front 层的信息，可以折叠步进器。

平板电脑和 PC 的尺寸足够大，允许 Crane 在屏幕顶部展现所有的步进器。

九. 交互

启动画面

角色动画、强调缓和和交错奠定了精致而优质的基调。

导航过渡

Crane 的导航过渡使用强调缓和和更长的持续时间来添加精致的感觉。

错开

当新列表和新卡片进入屏幕时，会使用交错效果。级联效果使过渡很自然。