从零开始的Android:常见的UI设计模式

尽管Android允许您创建几乎任何可能需要的自定义视图或用户界面,但事实证明,在正确的情况下,有一些用户界面模式可以很好地适用于用户。 在本教程中,您将学习其中的一些模式,以及它们如何通过在使用应用程序时创造出色的体验来帮助用户。

1.主画面

用户在打开应用程序时看到的第一个屏幕通常是最重要的。 从这里开始,您的用户应该能够执行快速动作并继续前进,或者进一步深入到您的应用中以完善他们想要完成的工作。

根据您的应用程序的目标,为该屏幕选择用户界面设计模式。 重要的是要注意,大多数应用程序在其主屏幕上使用不止一种模式,只要它支持其应用程序的总体目标即可。

清单和详细信息

列表和详细信息模式是您将在移动设备上看到的最常见的模式之一。 顾名思义,您以列表格式显示数据,当单击该列表中的项目时,它将打开一个显示更多详细信息的新屏幕。

尽管此模式称为列表和详细信息,但没有理由也不能将相同的逻辑应用于网格设计。 此模式的关键特征是,列表/网格中的每个项目在被选中时都应执行显示更多详细信息的相同操作。

在Google Play音乐应用程序中可以看到这种模式的示例,该应用程序为用户提供了一张专辑网格,可以选择该专辑网格来显示该专辑可用的歌曲。 环聊是列表和详细信息模式的另一个示例。 环聊可让您选择一个对话以查看整个对话并与之互动。

Google Play音乐网格

轮播

有时,仅凭一个列表是不够的。 如果您的应用具有各种类别,并且可以很好地用图像表示内容,则轮播模式可能对您有用。 在此模式中,您将采用列表和详细信息模式,并在同一屏幕上多次使用它。 区别在于列表项可以水平滚动而不是垂直滚动。

在Google Play商店应用程序中可以看到这种模式的示例,该应用程序显示了可浏览的多种类别应用程序的轮播。

Google Play商店中的轮播模式

地图

并非所有的应用程序都是围绕需要显示用户数据列表而构建的。 移动设备的主要特征之一是,它们在用户外出旅行时用于查找事物非常有用。 为此,地图通常是一个很好的工具。

如果您的应用是围绕显示位置,导航或旅行构建的,则地图可能对您的用户来说是完美的。 虽然这种模式的明显例子是在Google Maps中,但许多其他应用程序(例如WazeUber )也以地图为主要焦点而构建。

位智的地图主屏幕

2.导航和动作

虽然您刚刚了解了可以在应用程序主屏幕上使用的几种用户界面模式,但您可能仍需要一种导航至应用程序内其他部分的方法。 幸运的是,Android用户熟悉一些常用的导航模式,以帮助您创建可以使用的出色应用程序。

标签

选项卡通常与列表和详细信息模式结合使用。 如果您有多个在某种程度上相关但具有不同类别的列表,那么对每个类别使用带有选项卡的ViewPager可能是导航应用程序的有效解决方案。

当您的应用程序中只有几个部分时,此模式很有用,因为它为用户提供了一种快速简便的方法来更改视图。 但是,如果要在选项卡中放入五个或更多项目,则应考虑将导航操作移到抽屉中。

ViewPager选项卡设计模式

根据Android的材料设计指南,选项卡也可以存在于屏幕底部,如Google+应用程序所示。

底部标签设计模式

导航抽屉

导航抽屉是一个视图,可以从应用程序的侧面滑出,以便向用户显示选项列表。 这种设计模式在Android应用程序中经常使用,以提供一种方法来更改应用程序中的部分或执行不必绑定到任何屏幕的全局操作。

由于此模式非常适合用于顶层导航,因此可以轻松地将其与tabs模式配对以在您的应用程序中创建复杂的导航方案。

导航抽屉设计模式

工具列

您可能已经注意到,Android应用程序中的大多数页面在屏幕顶部都包含一个工具栏。 至少,该工具栏包含该部分或应用程序的标题,但是工具栏设计模式还有助于将操作按钮直接放置在工具栏或溢出菜单中,以允许用户在应用程序的该部分中执行任务。

在Google Keep应用程序中可以找到一个示例,该应用程序使您可以更改便笺的颜色,向该便笺中添加其他人以及溢出菜单中存在的许多其他操作。

工具栏设计模式与操作按钮

浮动动作按钮

浮动操作按钮模式使开发人员可以突出显示用户在应用程序的一部分中可以执行的单个操作。 此类操作的示例包括电子邮件客户端中的撰写浮动操作按钮,音乐应用程序中的播放/暂停按钮或管理事件或数据的应用程序中的添加按钮。

请勿将这种模式用于次要动作或任何具有破坏性的操作,因为浮动动作按钮旨在在使用时在屏幕上有很强的显示感。

浮动动作按钮

3. Android尺寸

尽管上面讨论的某些模式可用于其他形状因素,但它们大多与设计电话或平板电脑应用程序有关。 最近,谷歌已开始在各种其他类型的设备(包括电视和智能手表)上使用Android。 这就要求采用新的设计模式,以充分利用每种尺寸。

Android Wear

由于显示屏尺寸较小,因此为Android Wear引入了一套全新的用户界面设计模式。 Wear与卡片和操作按钮系统配合使用,用户可以使用GridViewPagerGridViewPager滑动。

您还可以继续使用列表和详细信息模式,但是列表项将需要更大并且可以固定到位,以便用户可以轻松访问它们。 有关为Android Wear设计的更多信息,请参见官方文档

Android Wear卡和操作按钮UI设计模式

电视

尽管Android Wear设备的设计模式必须考虑较小的屏幕尺寸,但针对Android TV的设计却存在相反的问题。 屏幕更大,用户离屏幕更远。

电视应用程序不仅需要考虑这两点,而且电视还使用D-pad控制器而不是触摸屏进行交互。 因此,轮播方式效果很好。

TV UI设计模式的内容行

用户可以在几行项目之间移动,然后水平滚动以查看他们可用的内容。 当用户找到要查看的项目时,可以选择该项目以查看详细信息屏幕,该屏幕提供了该项目的操作列表。

结论

尽管这还远远没有列出Android用户界面设计模式,但已向您介绍了Android上一些最常见的模式,以及如何使用它们来提高应用程序的可用性。

话虽这么说,并不是所有的应用程序都是一样的,有时您可能需要针对用户与应用程序交互的方式提出创造性的解决方案。 所有模式的共同点是它们简单,可用且不会妨碍用户。

在继续使用和学习Android时,您将获得必要的经验,以了解在特定情况下什么是有效的,什么是无效的。

翻译自: https://code.tutsplus.com/tutorials/android-from-scratch-common-ui-design-patterns--cms-26044

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值