android cardview阴影颜色_Material Design 设计语言-Android（自译）

概述

Material Design（原质化设计）是谷歌开发的一种视觉设计语言，它遵循了优秀设计的经典原则，同时还结合了创新理念和新的技术。

一、目标（Goals）

• 创造（Create）：创造一种视觉语言，将经典的优秀设计原则与技术和科学的创新和可能性相结合。
• 统一（Unify）：开发一个单一的底层系统，在平台、设备和输入方法之间统一用户体验。
• 定制（Customize）：拓展 Material 的视觉语言，为创新和品牌传达提供一个灵活的基础。

二、原则（Principles）

1、Material（原质化） 即隐喻

Materia Design 的灵感来自物理世界及其质感，包括它们如何反射光线、投射阴影。实体的表面和边缘提供基于纸墨效果的视觉体验，熟悉的质感让用户可以快速地理解和认知。

2、清晰、形象、深思熟虑

Material Design 在排版、网格、空间、比例、颜色和图像的设计上，借鉴了传统的印刷设计。力求构建出鲜明、形象、有意义的用户界面，使用户沉浸其中。

3、有意义的动效

动效是通过微妙的反馈和连贯的过渡，来集中用户注意力并保持交互的连续性。当元素出现在屏幕上时，随着交互的触发，这些元素会发生外观上的变化，并且周围的场景也会发生改变。

4、基础灵活

原质化设计系统旨在实现品牌表达。它整合了一个可定制的代码库，允许无缝实现组件、插件和设计元素。

5、跨平台

Material Design 使用跨Android、iOS、Flutter和Web的共享组件，跨平台维护相同的UI。

三、布局（Layout）

原则

1、可预测的

UI应使用直观且可预测的布局，具有一致的UI区域和空间组织。

2、一致性

布局应该使用一致的网格、关键字和填充。

3、响应式

布局是自适应的，并对来自用户、设备和屏幕元素的输入作出反应。

响应式布局网格

Material Design响应式布局网格可自适应屏幕尺寸和方向，确保布局的一致性。

响应式布局网格由三种元素组成：列（Columns）、水槽（Gutters）和边距（Margins）。

列

界面内容放置在列的范围内。

列宽是使用百分比，而非固定值来定义，以便于内容可以灵活地适应任何屏幕大小。网格中显示的列数由屏幕大小确定。

水槽

水槽是列与列之间的空隙。它们有助于分离内容。

水槽的宽度是每个断点范围内的固定值。为了更好地适应屏幕，水槽宽度可以在不同的断点处更改。更宽的水槽更适合更大的屏幕，因为它们在列之间会有更多的空白。

边距

边距是内容与屏幕左右边缘之间的空隙。

边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕，边距宽度可以在不同的断点处改变。更宽的边距更适合更大的屏幕，因为它们在内容的周边会有更多的空白。

间距

1、8dp网格

所有组件都与移动设备的8dp网格线的网格对齐。

如上图，应用栏与悬浮按钮都与网格保持对齐。

2、4dp网格

图标、排版和组件中的元素可以与4dp网格对齐。

如上图，底部导航栏的元素与4dp网格对齐。

3、空隙

空隙是指UI元素之间的空间。它是一种替代间距的方法，以8dp或4dp的增量测量。

空隙应与响应布局网格结合使用，以在设计中一致地放置元素。

4、垂直间距

垂直间距是指标准元素的高度，例如应用栏或列表项。这些元素的高度应与8dp网格对齐。

触摸热区

热区规格

触摸热区适用于通过触摸和非触摸交互的任何设备。为了平衡信息密度和可用性，触摸热区应至少为48 x 48 dp，并且它们之间至少还要有8dp的空间。

点击热区

在非接触式用户界面上（如WEB端、桌面端等），点击热区应至少为24 x 24 dp，其间至少还要有8 dp的空间。

四、启动屏幕（Launch screen）

当APP启动时，显示启动屏幕，而非空白屏幕。显示启动屏幕可以弱化长时间加载/等待的感觉，并且有可能增加用户体验的乐趣。

但如果APP正在运行，则不应显示启动屏幕。

有两种类型的启动屏幕：

• 占位符启动页显示APP实际UI的界面，即非交互式预览。此启动屏幕适用于APP启动和APP内的活动转换。
• 品牌发布屏幕提供短暂的品牌曝光，可提高品牌识别度。

五、新手引导（Onboarding）

应该新手引导是一种虚拟的打开体验，帮助用户开始使用APP。它应该为某类用户达到特定的目标而设计。

用户场景：

• 用户已经安装了应用程序，且不需要马上查看促销信息
• 用户渴望在不阅读说明手册的情况下，先试用APP
• 用户还不熟悉APP的用户界面，并且准备了解它

目标：

• 欢迎用户并激发他们马上体验APP的兴趣
• 帮助用户隐性或显式地理解APP如何使用
• 推动用户在前七天使用APP，提高参与度和留存率

类型

有三种新手引导的样式：自我选择、快速入门和引导页。

组件

一、应用栏：底部 （App bars: bottom）

底部的应用栏在移动屏幕底部用于显示导航和关键性操作。

底部应用栏提供了访问抽屉导航的入口，以及最多可放置4个操作按钮，包括悬浮操作按钮（FAB）。

原则

1、可操作的

底部的应用栏突出显示重要的屏幕操作，并且让浮动操作按钮更显眼。

2、灵活的

底部应用栏的布局和操作会根据屏幕的需要而变化。

3、人体工学

底部应用栏可以通过移动设备上的手持位置轻松到达。

何时使用

应该：

• 仅限移动设备
• 访问底部抽屉导航
• 屏幕有2～5个操作

避免：

• 已有底部导航栏的APP
• 屏幕只有1个或没有操作

布局

底部应用栏基于FAB的存在及其在栏中的位置，有三种不同的布局。这些布局决定了可以包含在栏中的操作数。

1、FAB居中

在主屏幕上使用底部应用栏，其中包含抽屉导航控件和突出操作按钮（例如FAB）。可以在栏的另一侧放置最少1个，最多2个附加操作。

2、FAB位于边缘

在次级页面上使用FAB，需要悬浮操作按钮和3～4个其他操作。

3、无FAB

当不需要悬浮操作按钮时，底部应用栏可以防止更多菜单里的操作，并且在相对边缘上最多可以放置4个操作图标。

悬浮操作按钮

若有悬浮操作图标，那么悬浮操作按钮（FAB）将以以下列两种方式，显示在底部应用栏上：

1. 重叠：FAB的水平高于底部应用栏（基于Z轴），并且对条形的形状没有影响。
2. 插入：FAB与底部应用栏处于同一水平，并且栏形状改变，以便于FAB可刚好放在底部应用栏中的凹槽中。

特别注意

1、覆盖

底部应用栏可以被键盘和其他临时元素覆盖。如果你的APP需要长时间/经常遮住底部应用栏，则应使用其他的组件。

2、导航

底部应用栏可以显示菜单图标以打开底部导航抽屉，但该栏本身不应包含任何导航操作（例如返回上一页面或关闭页面的图标）。APP的导航应放置在其他组件中，例如顶部应用栏或嵌入在屏幕上。

3、与顶部应用栏配对

与底部应用栏一起使用时，顶级应用栏可以提供向上的导航和其他操作。在整个APP中，应该在两个栏上明确组织和划分操作。

• 将单个导航菜单控件放在底部应用栏中（用于访问）
• 将单个更多菜单控件放于底部应用栏的边缘操作
• 将搜索操作（例如搜索图标）放置在整个应用中一致的位置
• 破坏性操作放置在顶部应用栏中，例如“删除”

4、Snackbars

Snackbars 和Toasts 应在垂直于底部应用栏上方的位置进行动画处理显示，避免遮盖底部应用栏。