Material Design Rally

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

目录

关于Rally
产品架构
布局
颜色
排版
图标
形状
组件
动效

Rally是一款个人理财应用程序，它使用材料设计组件和材料主题来创建具有数据驱动美学的品牌体验。​​

 

关于Rally

Rally是一款个人理财应用程序，可跟踪消费习惯，并生成与您的财务状况相关的评估和建议。

Rally旨在以可管理的方式显示大量密集组织的信息。 通过交叉引用和调查信息，帮助用户识别所呈现数据中的模式。

 

优质风格
深灰色的UI赋予Rally优质的感觉，同时采用明亮的色彩代表数据，以从背景中脱颖而出。 数据与背景颜色之间的高对比度使图形和表格更易于阅读。
​​

数据驱动的美学
Rally的UI侧重于查看，调查和理解数据。 在仪表板中信息图表界面引导用户查看其支出摘要，包括单个交易的详细信息。

用户界面紧凑而直观，并以排版，颜色和形状为重点强调。

 

产品架构

Rally的信息架构具有层次结构，允许用户通过多种类别查看他们的财务状况。 财务概览提供此类别的最通用版本，个人交易是结构中最详细的类别。

内容
内容分为与个人财务相关的几个部分，例如账户、预算和账单。 Rally主页的目的是跳转到不同的部分。

由于Rally专注于呈现和描述个人理财的不同领域，实现用户能在不同区域之间轻松移动是非常重要的。 固定的导航位置使用户可以轻松切换区域。 在桌面和平板电脑上，Rally使用轨道导航。 在移动设备上，Rally使用标签。 这些导航模式非常理想，因为虽然它们总是在屏幕上，但占用的空间非常小。
​​桌面，平板电脑和移动设备上的Rally

 

轨道导航

在桌面和平板电脑上，Rally使用轨道导航。

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

在轨道中，每个目的地都由一个唯一的图标表示。 选择某个部分后，它的图标会变亮，并显示章节。
​​
Rally在桌面上的导航

 

标签

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

标签选择
未选中的选项卡由图标表示。 选择选项卡后，它会在图标旁边显示部分标题。 选项卡使导航持续可用，同时占用尽可能少的空间。
​​
Rally在移动设备上的标签导航

 

布局

网格系统

Rally使用响应式网格系统，该系统具有灵活的列和内间距，可以调整大小以适应任何屏幕宽度。

Rally的网格系统缩小至50％

 

海拔

Rally使用颜色或遮罩表示UI元素之间的高度差异。

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

​​
当出现对话框时，它后面的模糊半透明遮罩的面板表示对话框的重要性高于UI的其余部分。

颜色
有时Rally需要在单个屏幕上显示多个图表，每个图表都有多个部分。 为此，Rally采用了一种主色和另外五种颜色的色彩主题。 这个精心设计的颜色主题允许Rally呈现可读，独特的信息图表。
​​
当三个图表出现在同一个屏幕上时，每个图表都使用主题中的两种颜色：

1. 第一个信息图使用：浅绿色和深绿色
2. 第二个信息图使用橙色和黄色
3. 第三个信息图使用：紫色和蓝色

缩小至75％

 

颜色主题

Rally的色彩主题有一种主色和五种附加色。 它还有一个扩展的调色板，包括十个色样：一个主色调（或替代原色）样本，以及该样本的九个变体。

Rally使用来自这些扩展调色板的样本来呈现完整、可读的信息图表。
​​
Rally颜色主题中六种颜色的扩展调色板：

1. 圆形样本表示应用程序中使用了样本
2. 带有“P”的圆形样本表示样本为主色
3. 没有字母的圆形样本表示样本是附加的颜色

 

排版

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

1. Roboto Condensed
2. Eczar

 

字体比例

Rally的字体比例提供了应用内容所需的排版样式。 大多数文本都使用Roboto Condensed字体，而Eczar字体用于标题和仅使用数字的列表。
​​

Rally’s 字体比例

 

Eczar

Eczar在正文和展示（标题）尺寸方面都表现良好，使用衬线体也使其在不同尺寸下都易于阅读。

Eczar是一个特性字体，用于放置在信息图表中心的数字，以及列表中的美元金额。
​​Eczar的字形
​​Eczar 和Roboto的对比

 

Roboto Condensed

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

这款无衬线字体缩小了字间距，在屏幕上保持清晰可辨，其紧凑的尺寸使适合Rally的密集布局。
Roboto的字间距缩小字形
​​
Roboto 和 Roboto的对比

图标
Rally使用自定义图标来表示其四个主要部分：概述，帐户，帐单，预算和设置。

图标使用弯曲形状和尖角，类似于Rally排版的形状。
​​

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

 

形状

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

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

Rally’s的形状分类
​​

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

小组件
填充的文本字段属于小的形状分类。它们的拐角是圆角。
​​

 

组件	类别	属性	值
填充的文本字段	小组件	字体尺寸	切角 0dp

 

中等组件
卡片属于中等形状分类。它们的拐角是圆角。
​​

组件	类别	属性	值
卡片	中等组件	字体尺寸	切角 0dp；0dp；0dp；0dp

 

大型组件
数据表格属于大的形状分类。
​​

组件	类别	属性	值
数据表格	大型组件	字体尺寸	切角 0dp；0dp；0dp；0dp

 

组件

 

卡片和列表
各种财务视图
Rally为用户提供财务概览，提供每笔交易的宏观和微观视图。 卡片组件用于应用程序主要部分中的宏观视图。 对于特定的明细列表，Rally使用列表组件。

这些卡片和列表组件已经完成自定义，可以使用Rally的颜色主题和字体。 列表项包含不同颜色，以便用户可以将每个数据项与相应的图相关联。
​​

 

Banners，snackbars和对话框

Banners
Rally使用Banners提供低-优先级消息。 这些Banners是使用Rally的颜色和排版自定义的，并且它们通常与特定财务领域相关的图标配对。

snackbars和对话框
需要提高可见性的高-优先级消息使用snackbars和对话框表示。 它们不包含图标，并使用Rally的颜色和排版进行自定义。

​​在平板电脑上，Banners出现在右上角，直接出现在菜单导航后。
​​在移动设备上，Banners是概览屏幕上的首项。
​​在大型桌面屏幕上，Banners在其列中显示（和存档）。
​​对话框用于提供高-优先级的消息。
​​snackbars用于传递高-优先级消息。

 

轨道

在桌面和平板电脑上，Rally使用轨道导航。 选择某个部分后，它会在导航中显示文本标签和更亮的色条。
​​

桌面上的轨道导航

 

标签

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

标签占据固定位置，无需滚动。 点击新标签时，它们会移动并水平重新分配。
​​标签用于在移动设备上导航
​​

1. 非自定义的标签
2. Rally的标签使用自定义排版，图标，颜色和状态。 只有选定的图标才显示文字。

 

动效

Rally具有简单且清新的动效风格，有助于平衡UI的视觉密度。

启动页面

Rally在首次启动时显示的动画图标以设置抛光色调。
​​

Rally的启动页面

 

导航过渡

Rally使用标准缓动和时长进行导航过渡，以保持流畅的动效风格。

父子层级过渡

开立帐户使用父子导航过渡。 在背景内容上使用精简缩放动效来增加深度感。

 

同级过渡

选择标签使用同级导航过渡。

 

顺序

延时动效用于在引入列表等新元素时添加润色。 时间延迟用于强调圆形图，因为它是UI的重要部分。

加载完成后，列表项目从上到下交错排列。

 

过冲

过冲用于重要的对话，以传达紧迫感。

对话框进入过冲。

 

原文地址：Material Design