In this Session, you learn how Material Design can help you get your app ready for large devices when time and resources are constrained. From prioritizing design characteristics to implementation details, this Session will give developers and designers a picture of what’s possible without undergoing a complete redesign or a comprehensive investment in responsive design.
Resources: Material Design for Large Screens → https://goo.gle/3dXWdR5
Speakers: Liam Spradlin, Rody Davis
Watch more: Material Design at Google I/O 2021 Playlist → https://goo.gle/io21-MaterialDesign All Google I/O 2021 Technical Sessions → https://goo.gle/io21-technicalsessions All Google I/O 2021 Sessions → https://goo.gle/io21-allsessions
Subscribe to Material Design → https://goo.gle/MaterialDesign-YouTube
#GoogleIO #Design #Android
product: Material Design - General; event: Google I/O 2021; fullname: Liam Spradlin, Rody Davis; re_ty: Premiere;
0:00 · （欢快的音乐） 大家好，我是Rody，是 Material Design的开发者倡导人 我是Liam，是Material Design的设计师和设计倡导人 今天，我们将探讨 为大屏设备准备应用时可以做的五件事情 我们知道许多开发者 会构建可以在多种设备上运行的应用 而借助类似于Foldables的新平台 对适用于各种尺寸的 自适应应用的需求从未如此强烈 我们最近在material.io上 发布了新的设计指南和更新 这个讲座将帮助您总结一些 您现在就可以开始做的重要事情
0:33 · 且不需要完全重写您的应用 首先，我们来讨论一种应用布局的方法 这种方法可以使布局更具结构性 能够合理地适应屏幕 尺寸和列网格不同的各种设备 为何要使用列呢？ 如果您是为Web而构建 那您可能已经对这个概念及其重要性很熟悉了 但出于某些原因 列对于将界面设计概念化非常有用
0:54 · 首先，列网格提供了方便的结构 列布局已在打印布局和图形设计中使用了数十年 用以创建打印工件所需的结构 使打印材料符合人体工学并具有最大的可读性 印刷商使用并优化这些布局，帮助他们的用户 也就是读者，最大程度地利用Material 我们在界面设计中也可以将它们用于相同的目的 现在，许多应用都将屏幕视为一个大画布或一个列
1:19 · 在水平和垂直方向上相对于 彼此的位置来绘制元素 也可能会在边缘留有边距 这种方法对于较小的上下文可能管用 但如果上下文较大，问题就会变得非常明显 将列网格应用于布局可以使大屏设备的体验 更加周到细致且显得井井有条 您会感到设备和上下文有机地结合在一起
1:42 · 其次，列让您能够将屏幕划分为 包含相关信息和操作的多个清晰区域 从而改进信息的层次结构 在本例中，您可以看到三个清晰的区域 每个区域都将用户的视线引导到屏幕上的 主要信息片段或组以及区域的预期使用顺序 最后，也是最重要的一点 列网格通过提供一种合理的方式来思考 内容在屏幕尺寸变大或 变小时应如何进行自动重排 从而适应所有屏幕尺寸 在本例中，我们可以看到三个 主要区域中的每个区域都有四个或四个以上的列
2:14 · 因此，如果屏幕缩小 内容将自动重排，从而保持相同的层次结构 但会以更符合人体工学的方式填充缩小的屏幕 这就是在没有叠加的情况下，最终成品的样子 接下来，Rody将告诉我们如何实现这些概念 在本次课程中，我们将重点 介绍如何为Android实现列布局
2:31 · 根据您要构建的平台，具体内容可能会有所差异 采用基于列的布局进行构建时 将根据屏幕尺寸来定义运行时的列数 边距也将根据断点的不同而发生变化 并具有可变值和固定值 正文的最大尺寸也会根据屏幕尺寸而变化 可以按平台进行调整 若要在Android上实现基于 列的布局，您可以使用约束布局
2:54 · 您只需几个权重和链即可轻松创建 复杂的视图和嵌套布局 如果您有想要重复使用的部分 可以将它们提取为Fragment 若要构建8个列的布局 首先需要添加基本约束布局 并且布局的宽度和高度应与父级约束相匹配 现在，我们可以连续添加第一项 确保为它提供一个DP值为零的布局
3:13 · 使它与约束匹配 在左侧，我们将它约束为父级 在右侧，我们将它约束为链中的下一个子级 通过这种方式在左侧和右侧添加约束 我们可以构建一条水平链 添加权重后，该链将可按预期弯曲 现在，可以使用相同的布局宽度添加第二个子级 这次，我们在左侧约束为上一个子级 在右侧约束为父级 这样，随着父级尺寸的增加，水平链和
3:37 · 所有指定的权重也将随之增加 我们已经有带两个子级的约束布局 现在可以指定权重了 由于我们要在这个布局上构建8列网格 所有子级的权重加起来需要等于8 我们希望第一个子级跨越两列 于是将它的水平权重设为2 对于第二个子级，由于需要加起来等于8 我们给它分配权重6，这意味着它将跨越6列
4:00 · 我们要讨论的第二个重点是在您的界面中 创建一篇可以缩放的文章 为此，我们需要采用一种可靠的方法 来定义布局中的各个常见部分 我们在Material中考虑这个问题的一种 方法是使用所谓的布局容器来构造缩放布局 在制作大屏设备指南时，我们考察了
4:19 · 应用整体布局中最常见的元素，并提出了 一种实现一致自适应行为的思考方式 我们将屏幕分为三个主要容器 第一个是包含应用中大部分内容的正文容器 在我们的Fortnightly 示例中，就是文章内容 这个容器基于之前的列网格 以及断点表中定义的灵活边距和宽度 其次，我们有一个导航容器 这个容器由一些导航组件组成
4:45 · 这些组件可使用户在目标之间移动并触发关键操作 展开时，始终保持256 dps 折叠时，则始终保持72 Dips 这个容器会被放置在缩减正文容器 尺寸的屏幕的边缘 在我们的例子中，您可以看到文章的正文 变得略窄了一些，以适应完全展开的导航容器 最后是应用栏容器 顾名思义，这个容器通常包含一个 应用栏，让用户可以访问一些关键操作 例如打开和关闭导航容器、搜索或移动至支持目标
5:14 · 在我们的示例中是这个样子，感觉就像是一个 更完整和全面的布局 屏幕上的三个容器和区域均清晰可见 我们可以合理地预测它们在其他尺寸设备中的样子 就像我们刚刚了解的那样，使用基于列的网格 有助于将屏幕划分为清晰区域 从而创建清晰的信息层次结构 但在这些区域内，重要的是要创建令人信服的内容 我们将讨论两种相关技术。
5:37 · 首先是视觉分组 这是一个总体布局概念 旨在通过使用空白和版式 将具有相似内容功能和含义的 相关元素组合到布局中 您现在可能已经在您的应用中实现视觉分组 在实现视觉组时，可以在网格和列表周围环绕空白 它可以是组合了Material卡 或图块的列表视图或网格视图 若要构建更复杂的布局，您可以 嵌套列表和网格，对相关内容进行分组 在Android上，您可以使用 回收器视图将相关内容分组为列表或网格
6:10 · 为相应的断点设置正确的容器内距离非常重要 当在较大的布局上嵌套时 可以使用空白进一步与其他内容保持距离 第二种技术是包含，这是一种更为明显的方法 它依靠清晰的边界 比如高程或可见的分隔线，来达到相同的效果 Material提供了许多 可实现包含的预制组件，例如卡片 在Android上，您可以通过在 Material卡片视图上包含内容来实现包含
6:36 · 高程或Outline是可选的 但这有助于以明确的方式 包含子级 您也可以使用Material列表图块 来实现包含 在Android上，您可以使用前导图标图像 视图、标题和字幕来创建约束布局 接下来，我们讨论适合这个工作的组件 -Material提供了可在您的 应用中使用的组件的目录 借助我们的大屏设备指南 我们更新了每篇文章的内容 以便更好地说明 它们对于不同设备的适应行为 视觉呈现是为Material 组件描述的第一种适应类型
7:06 · 它指的是元素在屏幕上的缩放比例和位置的更改 以及彼此之间的关系 例如，移动设备上的文本列表可以调整其边距 垂直间距或密度，以便更好地适应 平板电脑等大屏设备 这种类型的适应非常重要 因为在切换不同屏幕尺寸的 设备时，它可以保持连续性视觉奇偶校验 从而让用户也可以保持一种应用的心理模型 实现它的一种方式就是尺寸约束 大多数Material组件 都具有最小和最大尺寸 当布局从移动设备扩展到大屏设备时
7:38 · 这些值会在视觉呈现时 连续变化，同时保持可用性 在本例中，按钮会忽略尺寸约束，并在小屏设备上 被压缩，从而消除内置的容器内距离 而这个距离主要用于使触摸 目标始终保持足够大以便按压 对于快餐栏，小屏设备和 大屏设备都有最小和最大尺寸 在小屏设备上，快餐栏 可以向上扩展以适应其消息的传递 在大屏设备上 最好只占用一行。
8:01 · 快餐栏可以水平扩展 对话框可以水平扩展以承载其内容，也可以使用 更多的屏幕空间，直到达到最大宽度为止 在最大宽度下，对话框可以垂直扩展
8:16 · 若内容导致对话框大量扩展 可以考虑使用其他呈现方法 顺便一提，像这样的扩展对话框可以很好地 代替全屏对话框，以实现移动体验 作为开发者，您可以针对您的布局 根据组件尺寸的约束范围，充分利用 组件使用固定尺寸或可变尺寸的能力
8:36 · 例如，固定尺寸是指 无论使用哪种设备 按钮都将保持相同的尺寸 而可变尺寸使按钮可以在其约束范围内 继续适应布局的其余部分 考虑内部组成或组件内部元素 在适应时的行为也非常重要 虽然很多组件都是内置的 但如果您有自定义组件或更复杂的布局 还是值得讨论 在前面的对话框示例中，请注意
9:03 · 随着对话框扩展标题、正文和按钮之类的内部元素 如何保持它们与组件边缘的关系 标题和正文文本彼此之间 也会保持一致的位置 这种内部组成对于用户在每个组件适应时 保持其心理模型至关重要 应用栏则是另一个范例，但它增加了一点复杂性 菜单和标题通常是起始对齐 操作图标等内容是末端对齐 而搜索栏则与边缘或中心对齐 在Fortnightly的这个 变体中，我们可以看到
9:33 · 徽标和菜单按钮与起始边缘对齐 帐号选择程序位于边缘的尾部 而搜索栏则与承载文章文本的 正文容器的列对齐 在这个配置中 Fortnightly可以水平缩放 同时使所有这些元素之间保持一致的关系 组件切换是另一种较为罕见的适应类型 具有等效功能的组件实际上可以相互切换
9:54 · 以满足不同设备的人体工学要求 例如，底部导航栏 在平板电脑上可能会切换为轨道式导航栏 而在大屏设备上则是抽屉式导航栏 切换组件时请务必小心 应确保要切换的组件具有等效的功能 最重要的是，组件切换应服务于用户的 功能和人体工学目的 我们要考虑的第四个要点是 您的应用如何保持良好的连续性 您构建的内容不再仅针对运行时 无法改变的一种外形尺寸的设备 您的应用将随时根据屏幕的尺寸和方向进行调整
10:26 · 为确保为用户带来出色的 体验，请务必保存滚动位置 所选项目和正确的导航层次结构 对于Android来说，请务必保存即时状态 以便界面可以在不同方向 保持不变，并可根据屏幕大小进行调整 为确保用户获得更好的体验 请将所选项目以任何形式保存在REA中 使用自适应布局，每次根据屏幕尺寸 进行调整时，都会重新创建界面状态
10:48 · 我们要讲的第五点 也是最后一点就是新的交互模型 无论您的应用是在电视 笔记本电脑、手机、汽车还是仅在语音模式下运行 您都可以采取措施为所有用户提供出色的体验 当您的应用在大屏设备上 运行时，您可以考虑新的状态 例如悬停状态和焦点状态 使用大屏设备时，应使用滚轮来控制滚动操作 而不是使用拖动手势 使用移动设备时，可以使用双指张合及缩放的手势 但在没有触摸屏的大屏设备上
11:20 · 应使用触控板或鼠标滚动事件来进行控制 在适应大屏设备时，您需要考虑新的输入类型 使用平板电脑或笔记本电脑时 用户使用的可能是硬件键盘，而不是 内置的软键盘。您还应考虑通过定向输入 例如电视，来进行控制应用的远程游戏手柄输入 以及语音控制或其他出于 无障碍功能考虑的被动输入模式 最后，在无法使用手势的桌面设备上运行时 显示上下文菜单与底部 工作表以及其他右键单击操作 我们已经介绍相关基础知识 请在material.io上查看有关布局和
11:53 · 组件的最新指南 - 并在Material博客上阅读本次讲座 随附的相关博文 如果您有任何疑问 请随时通过Twitter与我们联系 并关注YouTube上的更多更新和教学视频 感谢您的观看