来源：Medium网站

作者：Samuele Dassatti

翻译：奥创

阅读时长：7min

今天，对从桌面到移动设备的优秀应用程序以及介于两者之间的所有内容的需求比以往任何时候都要大，至少在我看来，这是由于开发人员对渐进式网络应用程序和将Android应用程序移植到Chrome操作系统的兴趣日益增长。

Crane是Google的一款概念应用程序，凭借Material Design组件（信用：Google），它可以根据不同的外形尺寸进行精美扩展

然而，这种兴趣并不总是转化为良好的体验，许多开发人员选择设计两个不同的UI，并经常在移动设备上提供精简的应用程序。因此，我选择分享我在开发Igloo Aurora时学到的三个技巧，了解如何使用Google Material Design的构建模块创建出色的响应体验。

导航

在大屏幕上

如果您的应用允许在同一层次结构的视图之间移动，我建议尝试在大屏幕设备上使用标签。我赞成这种方法，因为它清楚地说明了应用程序的层次结构：标签比它们包含的视图更接近顶部，因此更重要。

在小屏幕上

在较小的屏幕上，我建议您通过选择处理底部导航组件的导航来优先考虑清晰层次结构的可达性。虽然在屏幕底部设置标签可能看起来反直觉，但它极大地提高了访问的便利性，因为它需要较少的用户拇指移动才能到达它，特别是在18：9显示器上（如果你想要阅读更多关于优化这些显示器的用户体验的信息，请查看我的这篇文章。

还有一件事

经常看到应用程序通过汉堡包菜单处理导航，但我建议不要使用这种方法，因为在较大的屏幕上它会隐藏所有目的地，直到用户点击它，而在较小的屏幕上它位于设备的左上角在单手使用设备时难以触及。

 谷歌概念应用程序The Fortnightly顶部5.5“16：9屏幕的平均可达性热图。你可以看到汉堡包菜单按钮几乎是不可能达到的。

对话框

在大屏幕上

在许多应用程序中，您必须显示不适合主界面的元素，但同时，它们不值得拥有自己的页面（例如应用程序的设置）。在这些情况下，对话框会派上用场，因为它们允许您显示这些元素而不会使主界面混乱，也不会强迫您将全新页面添加到应用程序中。

在小屏幕上

小屏幕上的上述问题的解决方案再一次是使用对话框，但是稍微修改了一下：我说的是全屏对话框。

移动应用程序如何使用全屏对话框隐藏某些操作并保持其界面清洁的示例

这种特殊类型的对话填充了整个视图（正如您可能已经从他们的名字中猜到的那样），并且它在移动设备上非常棒，因为它的滑入式动画突出显示它是UI的临时元素，因此不会取代主要页面，而只是覆盖它。

浮动动作按钮

如果您曾使用过Material Design，那么您可能已经熟悉了浮动动作按钮，这是Google设计语言中最具标志性的组件。如果您不是这里的快速回顾：浮动操作按钮（通常称为FAB）是一个圆形按钮，它悬停在界面的另一部分（通常是列表），并允许用户执行链接到该部分的主要操作的界面。

在大屏幕上

直到最近，只有一种类型的FAB可用，但在2018年5月，谷歌推出了另一种变体：扩展浮动操作按钮：一个更宽的FAB，带有描述其功能的标签。扩展浮动操作按钮（或eFAB）是大屏幕设备上标准配置的一个很好的替代方案，因为它清楚地说明按钮的功能是什么，单独的图标并不总是能够做到。

在小屏幕上

在小屏幕上我更喜欢 传统的浮动按钮，因为它比延伸的按钮更紧凑，但同时它不会牺牲可视性。但是，如果您担心您选择的图标不清晰且需要标签，则默认情况下您可以显示扩展FAB，并在用户开始滚动时将其变为经典图标，如Google规范中所述。

结论

您可能已经注意到，采取正确的步骤使您的应用程序更适合每种形状因素并不困难，它可以极大地有益于您的应用程序的可用性。出于这些原因，我真的希望更多开发人员在开发新应用程序时开始更多地关注这些细节，并且你也会这样做。