Android 应用该是个啥样子?

作者: admin 发表于 七 20, 2012 分类在 转载

对于应用该是个啥样子以及如何运作,Android 平台并没有硬性的准则。谷歌一开始就很明确,他们没有计划规定什么是可接受的,什么不是。这里有一系列《UI准则》,但多数只是关注像图标(icons)、部件(widget)和菜单(menu)这样的小玩艺。
平台面世以来,曾出现过成千上万套不同应用 UI 方案,应用的观感非常不统一。现在,随着平台的成熟和应用数量的激增,Android UI 的交汇点正在出现 。某些 UI 特性已经成为通用标准,其中的一些甚至已经通过某种方式成为了 SDK 库的一部分。不久,用户可以期待应用能以更加统一的方式运作。某些控制和交互模型将成为 Android 整体体验的一部分。

在本文中,我想从某个较高的层次来总结 Android UI 的常见功能。之前我曾写过一些关于 UI 模式的文章,但从未从宏观的角度来看待过这个问题。现在,我想将它们归拢起来,以展现我对 Android 应用看起来应该是啥样子的观点。

冰淇凌三明治

就在不久之前,最新的 Android 版本(4.0)发布了。该版本中出现了有“史”以来数量最多的用户体验改进。很自然,这些改进将会影响将来 Android 应用的外观。一些改进可以向前移植到旧版本,但是并不是所有的都可以。本文主要讨论当下 Android 应用的外观。我们可以期待很快就看到 ICS UI 的变革,但事实是:市场上有差不多 200,000,000 部 Android 设备运行从 2.1 到 2.3 之间的版本。

应用登录画面

很多应用都使用了仪表盘(Dashboard) UI 模式。如果应用的主功能超过一项,此界面将会是个非常不错的起点。仪表盘展现了应用最重要的功能,并提供了简便的快捷访问方式。

enter image description here

Android 用户都非常熟悉仪表盘。如果运用得当,该方法能够让用户在第一眼看到应用时产生“宾至如归”的感觉。

enter image description here
enter image description here
enter image description here

通用应用程序画面

实际的窗体画面总是以多种形式出现,但只有少数特性变得非常通用且为用户所学习掌握和期待。屏幕顶端的操作条(Action Bar)非常通用而且易于把握概念。

  • 左上角扮演着应用图标或者 Home
    图标的角色。点击操作即可把用户带到应用的首页。新的动作条将用户带到上一级画面而不是首页这种做法是毫无意义的。
  • 动作条的中间将会扮演提供画面标题的角色,同时显示应用的品牌颜色或当前应用子功能的颜色。
  • 屏幕的右上角会放置代表当前画面的最重要可执行功能的图标。在画面的这个部分,应当只有与当前画面内容相关的动作。但搜索功能已成为此规则的一个常见例外情况。

enter image description here

enter image description here
enter image description here
enter image description here

请查阅 Jake Wharton 的 ActionBarSherlock 图书馆项目了解操作条的实现。

列表画面

列表是 Android UI 中最常见的部件之一。在展示数据时,如果不知道数据量将会有多大,它将会很有用。
当然,列表也有自己的弊端。为较好地展示列表内容的全貌,每个条目应相对较小。但另一方面,如果把大量信息塞到狭小的区域内,可能会导致用户难以使用列表及查阅要交互的条目。

针对在 Android 中如何使用列表如果有些准则这是件好事。用户已经习惯于某些特定的元素和功能,如果列表遵循了某个类似的方法,用户的学习曲线将会更为平缓。

列表画面的动作条

列表画面可使用操作条来展示整个列表所指向的目标操作。请注意,列表画面的操作条不应当是用户对某个(或多个但不是全部)列表条目执行操作的位置。

列表项和勾选框

通常,列表项自身仅包含很少的文本和图片元素。常见的情况是,每个列表项都有一个勾选框,用于选择一个或多个列表项来执行操作。

将勾选框放在列表项的最左端有以下几个好处:

  1. 我们习惯于在所选项目的左边看到勾选框。无论是在网页、桌面程序用户界面还是在移动设备的某个地方都是这样。
  2. 在列表项的边上放置一个勾选项允许我们给勾选框建立更大的点击区域,并由此让用户能够更轻松地区分是对某个列表条目进行点击还是选择。
  3. 条目左边的图形部件创建了便捷的可视化提示,用于告诉用户某个条目结束而另一个条目开始,使用户对列表的快速扫描更加轻松。

次要条目控制

一些条目需要更多的交互可能性,而不仅仅是选择(勾选框)或者导航(点击)。这种控制方式的最常见用例是对行条目进行标注星号或者添加书签。次要控制的唯一正常位置是条目的最右端。其它任何位置都将导致点击区域方面的问题。

enter image description here

Aldiko 和 Google Mail 是恰当运用列表的出色范例。Aldiko 选择将勾选框放在右边,因为它们有可见的支配文件夹图标,如果再在其后放置一个勾选框将使得 UI 在感觉上失去平衡。

enter image description here
enter image description here

永无止境的列表

很多列表中所包含的项目都要通过网络连接来加载。在此情况下,加载过程可能会花上一些时间,列表将生成新的列表项的速度可能会赶不上用户滚动操作的 速度。当用户滚动到列表的底部时,应用应当自动开始获取更多列表项。指示器(Indicator)告诉用户更多正在加载的条目将会出现在列表的尾部。在其 中使用像进度条这样的加载动画是个不错的想法。用户会把动画和正在执行中的任务关联起来。

enter image description here

到达列表的底部时,Android Market 和 Twtter 都会自动加载更多的列表项。

enter image description here
enter image description here

单行操作——长按——快速操作

给用户提供一种无须先进入条目画面即可对单行条目执行操作的方法。
由于电话和平板设备没有鼠标右键(实际上也没有左键),一种触摸屏特定的“右键点击”藉此产生。通过长按某个条目,用户表明他们想要对该特定条目执行某个操作。

有种叫做快速操作的用户界面模式,可用于显示某个条目对应操作。最初所使用的图形方法几乎都已经绝迹了,但其概念犹存。通常是某种形式的覆盖菜单,显示了一份非常简单的操作列表。通常只有 3 到 5 项。无论在可视化方面快速操作是如何实现的,有几点是必须谨记的:

  • 不要覆盖选中的条目! 特别是在删除操作时,如果能够始终看到要操作的目标条目,用户的信心将会倍增。
  • 只显示简单的操作。需要大量交互的操作应当在单独的条目画面中处理,而不是在快速操作当中。

enter image description here

Aldiko、Asto 文件管理器和 Google+ 在快速操作中均使用了多种不同的视觉风格。无论使用哪种风格,它们都通过长按画面中某个条目来调用。

Aldiko 和 Astro 都是良好的设计范例,但 Google+ 却打破了在使用单独弹出菜单时隐藏目标条目这一规则。我希望他们能够在将来的版本中修正这一可用性缺陷。

enter image description here
enter image description here
enter image description here

多条目操作

如果列表中使用了我前面谈到的勾选框控件,就可以允许用户选择多个条目。通过选择多个条目,用户看表明要对所有选中条目执行某个操作的意图。
处理针对多个条目的操作的常见方法是在画面的底部增加一个 UI面板,一旦用户选中某个勾选框,则提供多个可用操作的按钮。一段漂亮的滑动动画将会给 UI 添加不少平滑和精致的感觉。当最后一个选项被选中或者操作执行后,该面板将会自动消失。

enter image description here

在多条目操作方面,Aldiko 和 GMail 都处理得不错。在底部面板出现时,两个应用都会播放一段精美的滑动动画。Aldiko 还在 import 按钮当中添加一个数字来告诉用户共选中了多少个条目。这是个非常不错的额外功能,但并不适用于所有的情况。

enter image description here
enter image description here

关于列表的更多信息

要了解关于列表的更多技术细节信息,请阅读以下两个系列的优秀文章:

Styling Android 的 Mark Allison:

AndroidDevBlog 的 Cyril Mottier:

标签页

很多应用都以这种或那种形式使用了标签页,帮助用户在多个页面中操作。Android 版本 Honeycomb (3.0) 和 Ice Cream Sandwich (4.0) 对标签页的工作模式及外观做了大幅修改。我的观点是这种修改正是我们要加入应用当中的去东西,无论该应用运行在哪个平台。

最近我在这篇博文中写过关于 ICS 的内容,所以在此我不打算重复该内容。长话短说,发生变化的是在不同标签页之间进行导航的新方法。用户的期待是:如果应用中有标签页,他们可以通过按住并拖动(Swiping)来切换。

enter image description here

Android Market 和 Google+ 是通过拖动手势在多个标签页中进行导航操作的不错范例。

enter image description here
enter image description here

Mark Allison 也曾撰写了关于该技术实现的多篇出色文章:

签出 Jake Wharton 的图书馆项目可获取实现细节方面的帮助:

ViewPagerIndicator at GitHub

结论

Android 正在迅速发育成熟成一个可靠且稳定的平台。应用在观感方面开始具备全面的稳定性,而用户则开始期待 UI 中可以使用确定的方式交互。尽管没有官方的准则,但对出色的应用进行深入研究,可让我们更好地理解自己应该如何去做。

备注: 文中涉及到的界面术语翻译:
1、UI:User Interface,用户界面,文中未译。
2、Screen:屏幕、画面,本文中一律译作“画面”。
3、Landing Screen:本文中译作“登录画面”,貌似不太准确。
4、Action Bar:操作条
5、list item:列表条目
6、item:条目
7、list screen:列表画面
8、checkbox:勾选框
9、multi-items 多条目
10、panel 面板
11、tab 标签页
12、swiping 按住并拖动(手势),触摸屏常用操作手势

 

原文链接:What Android Apps Should Look like?