牛逼的Android UI--第18章 与用户交互相关的设计模式 （下1）

第18章 与用户交互相关的设计模式（下1）

 

 

使用快速操作设计模式

利用快速操作（Quick Actions）设计模式可以使用户的操作只对页面中的一项或几项起作用。快速操作设计模式经常用于列表页面或需要在一个页面显示好几项的时候。

 

解决的问题

有的应用需要在一个页面显示好几个项，比如邮件应用、便签应用、待办事列表。用户希望他的操作只影响他选择的那个项。例如删除、编辑、移动这些操作。

在电脑上用户比较习惯用鼠标右键来点击他们想要操作的项目。但是在触摸屏上这样的方法显然是不行的，因此需要找到替代的方法。

 

解决方案

有好几种解决这种问题的方案都属于快速操作设计模式。每种都有各自的适用情境。首先要介绍的是上下文操作栏（Contextual Action Bar），但是它是依赖以操作栏（Action Bar）设计模式的。相较于下拉菜单和自定义覆盖层，上下文操作栏有时就显得比较难处理。上下文操作栏是唯一支持批量操作的解决方案（就是可以一次操作几个项）。

注意，在第21章的时候会讲到一个与之相关的反设计模式，叫着快速滑动覆盖层操作（Swipe Overlay Quick Actions）。

 

上下文操作栏（Contextual Action Bar）

上下文操作栏其实是对之前介绍的操作栏模式的扩展。这也是安卓设计指南推荐的解决方案。上下文操作栏有时也叫着操作栏激活模式（action mode）。Gmail应用在邮件列表页面就用了上下文操作栏，它可以显示用户可以对那些选择了的项所能做的操作（如图18-8）。操作栏的内容改变了，并且显示可以对所选项执行的操作。操作栏最左边的图标变成了一个对勾图标，用户可以点击这个图标来取消之前的操作。安卓的后退按钮也能达到同样的效果。

使用上下文操作栏的时候，应该明确的表明列表中的项目是可以被选择的。最好的做法是给每个列表中的项加个复选框（checkbox）。这样加了复选框后，用户就可以很容易的实现多选并且对它们进行编辑。在列表中使用复选框的时候需要保证它的点击作用域足够大，因为默认情况下它的作用域只是那个小方框而已（比如你点击列表项，它会跳转到选中项的详细内容页面去），你必须确定复选框的区域足够大。太小会让用户迷惑和失望。

长按也应该能选中列表项。

可以从安卓设计指南了解更多关于上下文操作栏的信息：http://developer.android.com/design/patterns/actionbar.html#contextual

 

下拉式菜单

毕竟操作栏的空间有限，因此列表项的一些操作可以放到下拉式菜单里面。谷歌的音乐播放器（如图18-9）就很好地利用了下拉式菜单来存放一些快速操作。

 

下拉菜单的指示符号一定要比较清晰地让用户知道这可以打开下拉菜单。不管是单击菜单指示符号还是长按列表项，都应该可以打开下拉菜单。

 

自定义覆盖层

第三种方式就是使用自定义覆盖层为用户展示快速操作。尽管这不是展示快速操作的标准方式也可能带来更多的开发工作，不过结果还是比较炫的。如图18-10所示，TouristEye应用就使用了自定义图层。这个应用没有过多的快速操作，也不需要任何批量操作。自定义图层是没浸入式的，用户也很容易上手。注意看每个列表项右边的指示图标，它就是用来开启自定义图层的。

 

结论

提供用户简单和一致的操作是很重要的。如果为了执行操作而强迫用户跳转到另一个页面，就会让用户觉得很麻烦。使用这些常见的设计模式更容易让用户明白应用的功能。用户也不用花时间去想怎么去执行想要的操作。

 

长按

长按已经成为触屏的标准手势。它已经替代了鼠标右键的功能。过去人们常常点击鼠标右键来操作文件或别的，因此长按也需要达到这样的效果。不管你选择之前说的哪一种方案，你都需要保证长按能让用户执行快速操作。（不要反人类去改变人们的习惯。。。）

 

大屏幕适配

这些方案适配到大屏幕都很容易。上下文操作栏巧妙地使用屏幕空余的空间来显示操作（例如图18-11那样）（用fragment搞定完事儿）。至于其他的操作保持和小屏幕上的一样就好了。

 

注意事项和批评

随着安卓设计的更新，呈现快速操作的方式也有了改变。尽管它们已经过时，但在有的应用里你可能还能看到以冰激凌版本样式来展现快速操作的，你应该与时俱进，别再用旧的技术。无论是从设计还是实现来看，上下文操作栏都是比较好的，并且能让你更容易使用。

 

在你设计快速操作的时候，值得注意的是不管你选择何种实现方式，你都应该让用户知道他们选中了哪项，并且他的操作会影响到这些项。在第21章的时候我会讲到关于这个的反模式（不好的模式）。

 

具体实现

根据你选择的不同的方案，有的实现很简单，有的有点难度。

 

上下文操作栏的实现

可以通过安卓SDK来实现上下文操作栏，也可能通过ActionBarSherlock三方库来实现。大部分繁琐的东西框架和库都已经完成了。

 

当使用ActionBarSherlock来实现时，你只需要提供一个ActionMode就行了。上下文操作栏经常用回调的方式来实现。如下实例代码是一个基本的实现框架：

 

private final class ExampleActionMode implements ActionMode.Callback {
@Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {

menu.add(“Example action 1”).setShowAsAction(
MenuItem.SHOW_AS_ACTION_IF_ROOM);

return true;
}

 

@Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
    return false;
}

 

@Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
    // react to selections
    mode.finish(); // end action mode
    return true;
}

 

@Override
public void onDestroyActionMode(ActionMode mode) {
}

}

 

调用活动（Activity）所提供的startActionMode就能开启操作模式了，将操作模式作为参数传入：

startActionMode(new ExampleActionMode());

 

下拉快速操作菜单的实现

要实现下拉快速操作菜单，需要实现下拉列表UI组件。这个下拉组件在显示和处理操作的时候需要特别注意。第11章有更多关于下拉列表的内容。（没有翻译，请查看原版）。

 

另一个实现下拉菜单的方式是使用View.registerForContextMenu()。安卓文档有更详细的内容和示例：http://developer.android.com/guide/topics/ui/menus.html#FloatingContextMenu。

 

自定义覆盖层的实现

自定义覆盖层是三种方案中最复杂的。幸好有开源的三方库支持。New Quick Actions 3D就是其中一个。你可以从github上获取详细说明和源码：https://github.com/lorensiuswlt/NewQuickAction3D。

 

此章未完待续。。。。。。