Rally

Rally 是一款个人理财应用程序，它使用 Material Design组件和 Material Theming 来创建具有数据驱动美感的品牌体验。

一. 关于 Rally

Rally 是一款个人理财应用程序，它可以追踪用户的消费习惯，并生成与理财相关的见解和警报。

Rally 旨在以可管理的方式显示大量密集组织的信息。

高级的风格

深灰色的 UI 赋予Rally 高级的风格，高量的数据在背景中凸显而出，数据和背景色之间采用高对比度，使图形和图表读取起来更加容易。

数据驱动的美学

Rally 的 UI 专注于查看、调查和理解数据。仪表盘上的信息图表，鼓励用户查看其支出摘要，其中也包括单笔交易的详细信息。

UI密集而直接，着重于板式、颜色和形状的设计。

二. 产品架构

Rally 的信息体系结构具有层级架构，允许用户通过各种类别查看其财务状况。财务概览显示了该类别的财务状况的概要，其中包含了所有单笔交易的细节信息。

内容

应用中的内容分为几部分与个人理财相关，例如账户、预算和账单，Rally 的主页是这部分内容的中心。

由于 Rally 专注于呈现和描述个人理财的不同领域，因此用户是否可以轻松的在各个部分之间随意切换变得至关重要，永久存在的导航栏可以实现这个需要。在 PC 和平板电脑上 Rally 使用轨道导航，在移动设备上 Rally 使用标签页，这些导航模式很理想，尽管他们始终在屏幕上，但它们占用的空间很小。

轨道（Rail）导航

在 PC 和平板电脑上 Rally 使用轨道导航。

轨道导航提供了一个永久区域，可在各部分之间导航，同时占用很少的屏幕空间。

在轨道中每个目的地均有唯一的图标表示，当其选择后，图标会变亮并显示其标题。

标签页

在移动设备上 Rally 使用自定义标签，在各个部分之间导航。

标签选项卡

未选中的选项卡由图标表示，选中后将在图标旁边显示其标题，标签页使导航永久可用，同时占用尽可能少的空间。

三. 布局

网格系统

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

标高

Rally 使用颜色或稀松布来表示 UI 元素之间的高低差。

Rally 使用颜色来区分元素，为了确保图形与其下方的滚动列表不同，图形和列表均使用不同的灰色调。

出现对话框时，其后的模糊稀松布表示对话框的标高在其他 UI 组件之上。

四. 颜色

有时，Rally 需要在一个屏幕上显示多个信息图，每个信息图都包含多个部分。为此，Rally 的颜色主题采用1种主色调和5种其他颜色。这种精心设计的颜色主题，使 Rally 能够呈现可读并且独特的信息图表。

当三个图表出现在同一屏幕上时，每个图表均使用主题中的两种颜色：

第1个图表使用主色调绿色和深绿色；

第2个图表使用橙色和黄色；

第3个图表使用紫色和蓝色。

颜色主题

Rally 的颜色主题有一种主色调和5种其他颜色。它还具有扩展的调色板，该调色板包含10个色阶。

Rally 使用这些扩展调色板中的颜色来呈现饱满，易读的信息图表。

Rally 颜色主题中6种颜色的扩展调色板：

圆形色板表示该颜色已在应用程序中使用；

带有P的圆形色板表示该色板为原色；

没有字母的圆形色板表示该颜色为附加颜色。

五. 版式

Rally 使用 [Eczar](https://fonts.google.com/specimen/Eczar) 和 [Roboto Condensed](https://fonts.google.com/specimen/Roboto+Condensed) 这两种字体。

Eczar

Eczar 在文本和标题大小下都表现的很好，它使用了衬线，在不同大小下都很容易阅读。

Eczar 是数字和美金符号的显示字体。

Roboto Condensed

Roboto Condensed 用于 Rally 中的正文、按钮文字和标题文字。

这种简洁的无衬线字体在屏幕上仍然清晰可见，其紧凑的尺寸适合 Rally 的密集布局。

六. 图标

Rally 的自定义图标主要使用在5个主要部分：概述、账户、账单、预算和设置。

Rally 的图标使用的弯曲形式和尖角与字体格式保持一致。

七. 形状

类别

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

小组件

中组件

大组件

小组件

填充文本框（Filled text fields）使用方角，0dp。

中组件

卡片（Card）使用方角，0dp。

大组件

数据表格（Data Table）使用方角，0dp。

八. 组件

卡片（Card）和列表（List）

各种财务视图

Rally 为用户提供其财务状况的概览，同时提供每笔交易的宏观和微观视图。卡片组件用于应用程序中的宏观视图，对于特定的逐项列表，Rally 使用列表组件。

卡片组件和清单组件使用 Rally 自定义的颜色主题和字体。每个列表项中的内容与上面的图片相关联。

Rally 的概述页面使用卡片来显示各项财务摘要，例如账户和账单。

当按下账单之类的卡片时，列表中会更详细的展示该卡中的摘要信息。

Banner、对话框（Dialog）

Banner

Rally 使用 Banner 传递低优先级的消息，这些 Banner 使用 Rally 自定义的颜色和版式，并且通常与特定金融领域相关的图标配对。

Snackbar 和对话框（Dialog）

需要提交可见性的更高优先级消息通过 Snackbar 或对话框传达。它们不包含图标，使用 Rally 自定义的颜色和版式。

在平板电脑上，Banner 悬浮在右上角，在导航栏后显示。

在移动设备上，Banner 在概述屏幕的第一项。

在大的 PC 页面上，Banner 会在其专有列中显示并存档。

对话框用于传递高优先级消息。

Snackbar 用于传递搞优先级消息。

Rail

在 PC 和平板电脑上，Rally 使用轨道导航。选中图标后，会在 Rail 中高亮显示一个文本标签。

标签页（Tab）

在移动设备上，Rally 使用标签页进行导航，每个选项卡均由一个图标表示，这些选项卡没有内容，仅在选择时显示文本。

标签页占据固定位置，无需滚动，点击标签栏后，它们会水平移动并重新分配。

1. 基准标签页

2. Rally 标签页使用了自定义的版式、图标、颜色和状态，只有选中的图标会显示内容。

九. 交互

Rally 具有简单且含蓄的交互风格，可帮助平衡 UI 的视觉密度。

启动画面

Rally 在首次启动时会显示动画 Logo，以展现优雅的风格。

导航过渡

Rally 使用标准缓慢（standard）和持续时间（duration）进行导航过渡，以保持动作样式的简化。

父子元素过渡

打开账户使用父子导航转换，在背景内容上微妙的使用比例来增加纵深感。

同位元素过渡

选择标签页使用同位元素过渡。

错开（Stagger）

引入列表等新元素时，可使用错开来增加修饰效果，时间偏移量用于强调圆形图，因为它是用户界面的重要部分。

过冲（Overshoot）

在重要对话框上使用过冲来传达紧迫感。