Android 关于操作栏 ActionBar 的设计原则【转载+整理】

原文地址

本文内容

• 操作栏目的
• 基本布局
• 适应旋转和不同的屏幕尺寸
• 副操作栏的布局
• 操作栏按钮
• 上下文操作栏
• 操作栏清单

设计原则就是为你在编写 Android APP 时，尤其是如何安排操作按钮的位置，以及顺序等等，能大幅度提供用户体验的，提供的一个指导思想。值得时不时地回忆一下，这些指导原则都是经过长时间实践得到的结论。一个 APP 好不好，在你最开始时，点击一遍所有的菜单和按钮，就清楚了。在使用过大量 Android APP 后，你会发现，遵循了下面这些原则的 APP 将会有更好的用户体验。

我们知道，往往国企的那些软件，都很难用，比如银行手机客户端，操作繁杂、界面难看、功能有限……基本上，那就是糊弄领导的东西，完全不是给用户用的，农业银行手机客户端，在我所用过的所有银行手机客户端中算是不错的了（而且，转账没有手续费），操作有点不便，尤其是“返回”操作，有种“不知身在何处”的感觉；而建设银行手机客户端，最近进行了一次大的调整，竟然采用了 Android 5.0 的风格，将菜单功能变成一个可以用手指操作转动的按钮，近期的又做了一次更新，对这个用手指转动的方式做了一次改变，暂时就不评价，只有一个感觉——乱了点。中信银行手机客户端，是最令我生气的——最简单的转账功能，要是不在电脑客户端添加转账的账户，就不能在手机客户端进行转账，等于手机客户端完全无法使用。

而大多数商业 IT 公司们的 APP 做得都还可以，能看出来，由于商业利益的驱使，是动了脑筋的，比如支付宝手机客户端，姑且认为跟银行手机客户端属于同一类型，至少在金融方面，但无论从任何角度看，支付宝都完胜银行的~归根结底，手机屏幕毕竟有限，要想像笔记本或台式机那样展示复杂的菜单、操作和注释，的确困难重重，姑且不论别的，即便是注释，也是能少就少，没有更好，完全用图标展示……因此，不花点心思是肯定不行的~

绝对不能将电脑或 Web 应用程序，直接照搬到手机上。最近按了个“起点读书”，有点崩溃的感觉，有点 Web 应用程序直接变成 Android APP 的节奏，结果：操作繁杂、功能重复、注释太多、界面凌乱、强奸了 ActoinBar 等等。起点网站挺火啊，手机 APP 怎么搞成这样呢，应该直接把他们做产品的人开了，完全不理解 Android 的精髓……

操作栏目的

---

“操作栏”对于 Android APP 来说是最重要的设计元素。它通常在应用运行的所有时间都待在屏幕顶部。

操作栏的主要目的是：

• 突出重要的操作（例如“新建”和“搜索”），并且可以方便的使用。
• 在应用内提供统一的导航和视图切换体验。
• 将较少使用的功能收集到“更多操作”菜单中，减少界面上的杂乱布局。
• 为你的应用提供一个展示其特点的空间。

如果你是编写 Android APP 新手，请注意操作栏是需要实现的最重要的设计元素。根据下面的指导来设计你的 APP，使其和 Android 核心应用达到统一的界面体验。

 

基本布局

---

对于大多数应用，操作栏可以分割为 4 个不同的功能区域。

图 1 操作栏

• 1. 应用图标

应用图标是应用的标识。在应用图标的位置放置你自己的 logo。

注意：如果当时应用不在顶层界面，那么在图标左边放置一个向左的箭头，表示“向上”按钮，使用户可以回到上一级界面。“向上”按钮的更多细节，请查看 导航 一节。

图 2 应用图标以及有和没有“向上”按钮的状态

• 2. 视图控制

如果你的 APP 通过多个不同的视图显示数据，那么视图控制区域将允许用户切换视图。可以使用下拉菜单或者标签控件来实现。

但如果你的 APP 没有多个视图，那么你可以在这里显示不可操作的内容，例如标题或者品牌信息。

• 3. 操作按钮

显示应用中最重的操作。如果图标放不下了，就自动移入“更多操作”菜单。

• 4. 更多操作

将使用频率低的操作放在这个菜单里。

区分这4个区域很重要。比如，应该在“操作按钮”区域放置那些操作，最常见的就是“搜索”，你总不能把使用频率这么高的操作“藏”在很深的位置吧，用户一定天天咒你~再比如，在“更多操作”区域，放置使用频率较低的操作，可以即便是使用较低，也要仔细安排那些操作的顺序~

 

适应旋转和不同的屏幕尺寸

---

UI 设计最重要的一件事就是让其自动适应旋转和不同的屏幕尺寸。

你可以使用“副操作栏”来做到。你可以在“副操作栏”中放置一些操作，“副操作栏”可以根据需要放在操作栏下面或者屏幕底部。

图 3 自动适应旋转和不同的屏幕尺寸

 

副操作栏的布局

---

当你要把操作放在多个操作栏中时，一般有三个选择：

1. 操作栏
2. 顶部栏
3. 底部栏

如果用户可以导航到应用的上一级屏幕，那么操作栏中至少要放置“向上”按钮。

为了让用户可以快速切换屏幕和视图，在顶部栏中放置标签或者下拉菜单（spinner）。

当没有足够的空间显示操作图标时，使用底部栏。

图 4 副操作栏

 

操作栏按钮

---

操作栏按钮展示应用中的重要功能。考虑一下哪些功能最常用，把它们放在操作栏上。由于屏幕尺寸的限制，系统会把一部分按钮移到“更多操作”菜单中，所以想好这些功能的排列顺序。

图 5 Gmail 应用的一组操作栏按钮

按照 FIT 标准来选择和展示操作栏按钮。

• F — 常用

人们进入该屏幕，70% 是为了使用该功能吗？

人们经常连续使用这些功能吗？

完成这些操作多花一些时间很烦人吗？

• I — 重要

这个功能很酷或者是你应用的卖点？

这个功能操作起来困难吗？

• T — 典型

在类似的应用中，这是不是最主要的功能？

某些情况下，人们会不会对这个操作跑到更多功能菜单中而感到惊讶？

如果符合 FIT 中的一条，它就可以进入操作栏，否则还是放在“更多操作”菜单里吧。

内置的图标应当用来表示一些确定的通用操作，例如“刷新”和“分享”。下面的下载链接提供了一个图标包，其中的图标可以缩放到多种屏幕分辨率，并且适合于浅色和深色的 Holo 主题。图标包中还有没有样式化的图标，可以和你自己的主题搭配，并且提供了 Adobe® Illustrator® 源文件，你可以自己修改。

下载操作栏图标包

更多操作

“更多操作”为用户选择那些不常用的操作提供了一条途径。该按钮只会在没有“菜单”键的手机上显示，如果有硬件“菜单”键，用户需要按该按钮打开“更多操作”菜单。

图 6 “更多操作”总是在最右边

操作栏中能放得下多少图标呢？按下面的规则来吧：

• 操作栏的所有图标不能占用超过操作栏 50% 的宽度，底部操作栏则可以使用全部宽度来摆放图标。
• 按 (dp) 为单位，不同的屏幕宽度在操作栏内能摆放的图标数量如下:
  • 小于 360 dp = 2 个图标
  • 360-499 dp = 3 个图标
  • 500-599 dp = 4 个图标
  • 600 dp 或更宽 = 5 个图标

表 1：上面的表格中，“o”表示一个操作栏图标，“=”表示“更多操作”菜单按钮

分享

如果你的应用可以分享图片或影片，那么在操作栏上放置一个分享按钮。该按钮会显示最近使用的分享服务，以达到快速分享。这个按钮应当出现在选择时的上下文操作栏中，放在选择提示的旁边，点击后会弹出菜单，包括了分享的选项。

图 7 相册应用提供了扩展的分享选项

 

上下文操作栏

---

“上下文操作栏”（contextual action bar，CAB）是一个浮于操作栏上的临时操作栏，用来放置一些特定的子任务。“上下文操作栏”一般在项目选择和文字选择时出现。

图 8 浏览器和 Gmail 应用中的上下文操作栏

长按可选择的内容，进入选择模式，显示上下文操作栏。

此时用户可以：

• 通过触摸选择项目。
• 在上下文操作栏中选择操作，并应用于所有已选项目。之后上下文操作栏自动消失。
• 通过导航栏的“返回”按钮关闭上下文操作栏，也可以通过点击上下文操作栏的选择图标关闭它。关闭上下文操作栏的同时要取消所有的选择。

当你让用户长按来选择项目时，需要使用上下文操作栏。你可以控制上下文操作栏中的图标，使用户可以执行不同的操作。

更多信息，请参考 选择 一节。

 

操作栏清单

---

当设计操作栏时，考虑以下问题：

• 对于当前的任务，视图切换很重要吗？

如果视图切换对你的应用很重要，那么使用标签或者下拉菜单。

• 哪些操作应当一直出现在操作栏上，哪些可以放在“更多操作”菜单中？

按照 FIT 原则，考虑哪些操作放在操作栏上，哪些放在“更多操作”菜单中。如果操作栏中的图标太多了，使用底部的副操作栏。

• 哪些内容足够重要需要一直显示？

有时一些上下文信息对于你的应用很重要。比如收件箱中未读信息数量或者正在播放的歌曲信息。仔细考虑操作栏的布局安排。