一起学习 Material Design 03

Chapter Three:布局

1. 原则

浮动操作按钮:浮动操作按钮是和工具栏分离的圆形纸片。它表示单个被提升的操作。

  • 如果它和阶层中的内容创建有关,则可以跨越一个阶层。

  • 如果浮动操作按钮与两个材料的内容都有关,则可以跨越接缝。

2. 单位 & 度量

1dp 等于密度为 160 的屏幕上的 1 个物理像素。dp 的计算方式为:
dp = (以像素为单位的宽度 * 160) / 屏幕密度

Chapter Four:组件

1. 底部导航

  • 用法
    • 有 3 - 5 个顶级视图(3个以下建议使用标签,超过5个建议将超出的部分放到其他位置)
    • 对应的视图要可以直接访问
  • 颜色
    • 激活状态的导航项的图标和文字使用主色。如果底部导航栏有背景色,则使用白色或黑色的图标和文字。
  • 规格
    • 导航项的宽度: 视图的宽度除以导航项的数量 (最大 168dp、最小 80dp)
    • 高度: 56dp
    • 图标: 24 x 24dp
  • 层次

2. 底部卡片

  • 用法
    • 模态化底部卡片:可以被菜单或简单的对话框替代。它也可以用于显示来自其他应用的深层链接。它主要用于手机端。
    • 固定显示的底部卡片:和应用是一个整体,用于显示应用所支持的内容。
  • 交互
    • 底部卡片必须由用户主动操作来触发显示。
  • 操作
    • 关闭底部卡片的方式可以是向下滑动、点击关闭控件(例如应用栏中的 X)、或者触摸系统后退按钮。

3. 按钮

3.1 在 MD 里一共有五种按钮

  1. 扁平按钮:扁平按钮只包含文本。它们可用于对话框、工具栏或内嵌在其他组件中。它们不会改变海拔高度,但会在点击时改变颜色。
  2. 浮动按钮:浮动按钮为矩形按钮。它们可以内嵌在其他组件中,在点击时会改变海拔高度和触发涟漪效果。
  3. 底部固定按钮:为扁平按钮,大多用于页面底部或对话框底部。
  4. 下拉按钮:可以显示多个下拉选项。
  5. 可切换按钮:将相关选项组合起来。图标切换时允许用户选择或取消选择单个选项。

3.2 选择哪种按钮?

4. 浮动操作按钮

  • 用法
    • 一个屏幕上建议只使用一个浮动操作按钮,它应该只代表最常见的操作。
  • 转变
    • 变成工具栏
    • 展开快速操作(Jimmy:此处直译为快速拨号,感觉不是很准确)
    • 变成卡片
    • 整个变形(浮动操作按钮可以转变为薄片元素,并成为应用结构的一部分。这个神奇的转变强调了按钮的操作。)

5. 卡片

  • 何时使用
    • 由不同数据类型组成的集合,例如图片、视频、文本
    • 不需要直接进行对比(用户不会直接与图片或文本进行比较)
    • 包含可变长度的内容,例如评论
    • 包含交互性的内容,例如 +1按钮或评论
    • 需要显示更多的内容来对图片进行补充说明,否则应该使用网格列表
  • 行为
    • 卡片具有恒定的宽度和可变的高度。最大高度不超过平台上可用空间的高度,但是可以临时展开(例如,显示注释字段)。
    • 卡片不会翻转来显示背面的信息。
  • 滚动
    • 卡片集只能垂直滚动。
    • 超过卡片最大高度的卡片内容会被截断,不会滚动,但是卡片可以展开。展开后,卡片可能会超出视图的最大高度。在这种情况下,卡片将与卡片集一起滚动。

6. 纸片

纸片是一种小块的用来呈现复杂实体的块,比如联系人。点击纸片,展开成一个完整的详细信息视图。

8. 对话框

  • 操作
    • 对话框包含的操作要有明确目的和数量,通常是肯定操作或忽略操作。
    • 肯定操作放在右侧,并在点击后继续进行下一步操作。肯定操作可能具有破坏性,例如“删除”或“移除”。
    • 忽略操作直接放在肯定操作的左侧,并在点击后返回到原始界面,或者跳过这一步。
    • 忽略和肯定操作的文本可以是 “Cancel” / “OK” 或其他能表明操作结果的动词或动词短语。

9. 分割线

  • 类型:
    • 全出血分隔线可以用于分隔明显不同的内容(例如:联系人信息中的详细介绍),或列表和页面布局中不同的元素(如列表项)。
    • 内嵌型分隔线用于分隔相关的内容,例如联系人列表中的一部分,或邮件中的对话。内嵌型分隔线应该和锚元素(如头像或图标)一起使用,并和标题的参考线对齐。

10. 扩展面板

扩展面板是一个轻量级的容器,可以单独存在,也可以连接到一个更大的平面上,比如卡片。扩展面板可折叠,折叠的面板被选择后会展开,允许用户添加或编辑信息。可以添加一些帮助文本到面板上,来协助用户。

11. 网格列表

网格列表是一个标准列表的替代方案。网格列表是由一组重复样式的单元格以垂直和水平方式进行排列组成的。网格列表最适合用于呈现同类数据,通常是图片,并且被优化用于增强视觉理解,以及区分相似的数据类型。

12. 列表

列表最适合用于呈现同类数据类型或数据类型集,例如图片和文本。它针对阅读理解做了优化,并对相似的数据类型、或同一数据类型的不同特质做了区分。但是:

  • 如果有超过三行的文本需要显示,请使用卡片代替。
  • 如果主要内容是图片,请使用网格列表。

13. 列表控件

列表控件分为四类:

  • 状态
  • 主操作(包括文本字符串)
  • 副操作
  • 副信息

列表瓦片中容易分辨的元素需要放在左侧,以符合用户从左到右的阅读顺序,反之同理。状态和主操作放在列表瓦片的左侧。列表项中的文本也被认为是主操作的操作目标的一部分。
不要把两个图标或操作放在一起,例如复选框和头像。
如果列表项的主要操作是导航,那么就不要使用图标。列表项本身以及它的上下文就足以让用户明白这个列表的用处是什么。
副操作和信息应该放在标题的右侧。副操作通常要和主操作分开,可以单独点击,因为用户越来越希望每个图标都能触发一个动作。

14. 菜单

菜单需要注意一个要点:当前选择的菜单项在列表项上垂直对齐。

15. Snackbars & toasts

Snackbars 包含和执行的操作直接相关的单行文本。它们可能包含一个文本操作,但不含图标。
Toasts (仅支持 Android)主要用于系统消息。它们也显示在屏幕底部,但不能通过滑动关闭。

  • 用法

如果存在一个操作,请遵循对话框间距和可见性规则。对于两个或更多个操作,请使用对话框,而不是 snackbar,即使其中一个是忽略操作。如果 snackbar 中描述的操作非常重要,需要屏蔽屏幕的使用,那么应该使用对话框。

16.步进器

步进器通过按顺序进行的逻辑步骤和对步骤进行编号来显示进度。它们也可以用于导航。步进器可以在保存一步操作后显示短暂的反馈信息。

  • 步骤类型:
    • 可编辑步骤

* 不可编辑步骤    

* 可选步骤

* 移动端步骤点

17.Tab 选项卡

选项卡提供了显示分组内容的功能。选项卡标签简明扼要的描述了与标签相关的分组的内容。因为滑动手势被用于切换选项卡,所以不要在选项卡的内容中包含支持滑动手势的控件,以免手势产生冲突。

Comments
Write a Comment