如何防止我的浮动操作按钮阻塞其他组件?

平面设计 安卓 谷歌材料设计
2021-12-26 06:40:18

Google 的新 Material Design 建议使用浮动操作按钮来吸引用户注意该屏幕上的主要操作。在列表视图中有很多这样的例子。

现在,假设您的列表视图有足够的项目来填满屏幕,从而无法滚动。如果您的列表项具有用户可以与之交互的特定组件,例如开关或喜爱的星星,则浮动操作按钮可能会阻止该组件。我们应该如何处理这种情况?

编辑:这实际上总是发生在列表的最后一项。这是一个无法正确使用“最喜欢的明星”的示例。它还会阻止内容,例如本例中的时间。

浮动操作按钮阻止 UI 的示例

4个回答

有一些不同的方法可以处理这个问题。

  1. 不要将重要内容放在按钮下方

    这是最明显的方法,也可能是最通用的方法。只要有可能,构建您的设计以确保在操作按钮下方没有任何重要内容,例如其他按钮、主要内容等。

    您可以通过使用填充或空白条目来添加额外的空间,格式化内容,以便不那么重要的东西不在按钮所在的位置,或者其他一些东西 - 这取决于您想要的内容和设计。

  2. 重新定位按钮

    操作按钮不必位于右下角。根据您的设计,将其放置在其他位置可能更有意义。我认为下面的例子做得很好。

    谷歌刚刚更新了他们的材料设计指南,并为浮动操作按钮制作了一个页面,除了动画外,它还显示了它在不同的位置和大小上的使用(在下面讨论)。

来自Reddit News Pro的第一张图片Mark DiSciullo的第二张图片

  1. 不要一直显示按钮

    有时,操作按钮不够重要,以至于需要一直看到。在这种情况下,将其隐藏在滚动或向下滚动时可能是有意义的。如果以及如何做到这一点取决于内容和设计,那么没有一个答案适用于所有应用程序。

    谷歌的更新指南显示了一个通过缩放整个东西而不是像下图那样滑动来动画按钮进出的版本。

图片来自浮动动作

可能有点简单,不是最优雅的解决方案,但是:在列表末尾添加一个空的“虚拟”条目,以便用户可以滚动到最后一个条目之外。

这对我有用。将底部填充添加到 RecyclerView

<android.support.v7.widget.RecyclerView 
android:id="@+id/my_recycler_view" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:clipToPadding="false" 
android:paddingBottom="30dp" 
android:scrollbars="vertical"/>

参考:https ://stackoverflow.com/questions/27768495/not-able-to-add-empty-view-below-recyclerview

在接受的答案中反弹“重新定位按钮”的想法,材料设计指南的滚动技术部分具有该想法的一种可能实现。

即,浮动操作按钮打破了内容和具有灵活空间的应用栏之间的边缘。滚动时:

灵活空间缩小,直到只剩下工具栏。当滚动到页面顶部时,灵活空间再次增长到位。

浮动操作按钮在屏幕上作为一个扩展的材料进行动画处理。

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

应用栏和内容之间的工厂