2.6 Rally(财务APP)

Rally

Rally是一款个人理财应用程序，它使用Material Design组件和主题来创造以数据驱动美的品牌体验。

目录

Rally简介

产品架构

布局

颜色

文字

图标

形状

组件

动效

Rally简介

Rally是一款个人理财应用程序，它能跟踪消费习惯并生成与财务相关的分析和提醒。

Rally旨在以一种易管理的方式来显示大量密集且有组织的信息。通过交叉引用和信息研究，引导用户识别所呈现数据中的模式。

品质风格

深灰色的UI赋予了Rally一种品质感，同时也使用明亮的强调色来表示数据，以在背景中突出显示。数据和背景色之间的高对比度使它的图表易于阅读。

数据驱动美

Rally的UI专注于查看、研究和理解数据。仪表盘内的信息图表可以使用户查看到他们的支出摘要，包括单笔交易详情。

此应用程序的UI风格紧凑而直接，重点表现在文字、颜色和形状上。

产品架构

Rally的信息架构有一个层级结构，使用户能通过多种分类形式来查阅他们的财务状况。财务总览提供了这种类别最通用的版本，它同时也包含个人交易，使之成为结构中最详实的类别。

内容

内容被分成与个人财产相关的多个部分，包括账目、预算和账单。Rally的主页是这些分区部分的操作中心。

由于Rally以展示和描述个人财产的各个方面为核心，用户在各个区间内移动的便捷性就尤为重要。固定导航位置就能使用户更容易地转换。在桌面和平板端，Rally使用轨道导航。在移动端，Rally使用选项卡（tabs）。这些导航模式非常合适是因为它们能长期显示在屏幕上并且只占用少量的空间。

Rally在桌面、平板和移动端

轨道导航

在平板和桌面端，Rally使用轨道导航。

轨道导航提供了一个常显区域以便在各区域间导航，并且只占用少量空间。

在轨道导航中，每个独特的图标代表一个目标地址。当分部被选中时，图标将变亮并显示分部标题。

Rail的桌面端轨道导航

标签

在移动端，Rally使用自定义的标签在分部间进行导航。

标签选项

未选中的标签用图标表示。当标签被选中时，它将显示与图标相关联的分部标题。标签使导航持续可用，并且尽少地占用了屏幕空间。

Rally移动端的标签导航

布局

栅格系统

Rally使用响应式栅格系统，此系统具有灵活的列和间距，能通过改变尺寸大小来适配任何屏幕宽度。

Rally的栅格系统

高度（海拔）

Rally使用颜色或者遮罩来表达UI元素间的高度差。

  

1. Rally使用颜色来区分元素。例如，为确保能区分图表与其下面滚动的列表，它们分别使用了不同的灰色调。

2. 显示对话框时，其下面的模糊遮罩表明对话框高于其余的UI。

颜色

有时候Rally需要在一个页面通过多个分区显示不同的信息图表。为达到这个目的，Rally采用了一个包含一个主色和五个附加色的颜色主题。这个精心搭配的颜色主题使Rally易于阅读和区分各信息图表。

当三个信息图表出现在同一个界面时，每个都使用了颜色主题中的两个颜色。

1. 第一个信息图表：主色绿色和墨绿色

2. 第二个信息图表：橙色和黄色

3. 第三个信息图表：紫色和蓝色

颜色主题

Rally的颜色主题包含一个主色和五个附加色。它还有一个由十个色样组成扩展调色板：一个主色（或可选主色）色样和九个此色样的衍生色。

Rally使用这些扩展调色板内的色样来表现稳健、可读的信息图表。

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

1. 圆形色样表示应用程序正在使用的色样

2. 带“P”的圆形色样表示主色

3. 没有字母的圆形色样表示色样为附加色

文字

字体类型

Rally使用两种字体类型：Eczar和Roboto Condensed。

1 Roboto Condensed

2 Eczar

字体格式

Rally的字体格式给应用程序的内容提供必要的文字变化。大部分正文使用Roboto Condensed， 而Ezar则用在标题和数字列表上。

Rally的字体格式

Eczar

Ecazr在正文文本和展示型（标题）尺寸上表现良好，它使用衬线体，使之在不同的尺寸时都易于阅读。

Ecazr是一款展示型字体，用于放置在信息图标中心的数字，也用于列表中的美元金额。

Eczar的字形

Eczar与Roboto相比较

Roboto Condensed

Roboto Condensed用于所有Rally的正文、按钮和标题文本。

这个紧凑型的无衬线字体在屏幕上仍保持着可读性，它的紧凑尺寸使其能满足Rally的密集型布局。

Roboto Condensed 字形

Roboto Condensed与Roboto相比较

图标

Rally使用自定义图标来代表它的主要分部：总览、账目、账单、预算以及设置等。

图标使用曲形和尖角，类似于Rally的文字形状。

1. 为形成一致性，所有的Rally图标使用相同的底层网格结构。

2. 一套Rally图标集

形状

类别

组件根据其尺寸大小组成形状类。形状类能让你同时对多个组件值进行设置。形状类包括：

1. 小型形状

2. 中型形状

3. 大型形状

Rally的形状类别

（1）小型形状；（2）中型形状；（3）大型形状

小型组件

填充文本框属于小型形状类。它们的角为0dp的切口形状。

中型组件

卡片属于中型形状类。它们的角为0dp的切口形状。

*个人理解：小型组件中的“0 dp”表示四个角的变化要一致，而“0;0;0;0”可根据场景分别变化

大型组件

数据表格属于大型形状类。它们的角为0dp的切口形状。

组件

卡片和列表

多种财务视图

Rally给用户提供财务总览以及每笔交易的宏观和微观视图。卡片用于应用程序主要区域的宏观展示。Rally使用列表组件来显示对应的详细项目。

这些卡片和列表组件使用Rally的颜色主题和文字进行设计。列表项包含颜色，所以用户能将其单项与对应的图表关联起来。

  

1 Rally的总览页面，它使用卡片来表现各种财务汇总，例如“账目（accounts）”和“账单（Bills）”

2 当按下类似“账目（Accounts）”的卡片时，卡片摘要将以列表的形式来显示更详细的信息。

Banner，Dialog（对话框）和Snackbar(提示对话框)

Banner

Rally使用Banner来传达低优先级的信息。这些Banner使用Rally的颜色和文字进行设计，并且通常会在财务的特定区域搭配一个图标。

Snackbars 和 Dialog

更高优先级的信息使用Snackbars和Dialog来增加可见性。它们不包括图标，采用Rally的颜色和文字来设计。

在平板端，banners出现在右上角，在使用轨道导航之后直接显示。

在移动端，banners为总览界面第一项。

在大屏的桌面端，banners以单独的列来显示（和归档）。

Dialog用于传达高优先级信息。

Snackbars用于表达高优先级信息。

轨道（Rail）

在桌面和平板端，Rally使用轨道导航。当选中其中一项时，它将在轨道上显示文本标签和明亮的颜色。

桌面端的轨道导航

选项卡（Tabs）

在移动端，Rally使用选项卡导航，每个选项卡都以一个图标来表示。这些标签没有容器，仅在选择时显示文本。

选项卡占用固定位置，不能滚动。当点击新标签时，会水平移动并重新分布。

选项卡用于移动端的导航。

1 无自定义的标签

2 Rally的标签使用了自定义文字、图标、颜色和状态。只有选中的图标才显示文本。

动效

Rally使用简单和保守的动效样式来平衡视觉密度。

启动界面

Rally在第一次启动时显示一个动画logo来奠定优雅的基调。

Rally的启动界面

导航转换

Rally使用标准缓动和导航转换时长来保持简洁的动效风格。

1 父子转换； 2 同级转换

  

1. 使用父子导航转换打开一个账目。在背景内容上使用的微妙扩展动效增加了纵深感。

2. 标签的选择使用同级导航转换

排序

引入新元素（例如列表）时使用交错动效可以增加优雅感。由于圆形图表是UI的重点，因此使用了一个短时偏移效果来进行强调。

列表项在完全载入后有一个从顶部到底部的交错入场动效。

过冲

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

对话框入场时的过冲动效。

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考