过年期间,Google正式宣布取消Android系统中MENU键的使用,也就是基于Android 4.0系统的手机都应没有MENU这一固定按键。这无疑是个变革性的改动,在我眼中,这似乎把Android较iOS交互的一处优势砍掉了。

Google用Action Bar作为MENU的替代,而又强调Action Bar不是MENU,我理解Google的意思,是想用一种全新的模式理解这一界面操作控件。相信Google是做足了用户测试才做此决策,我对测试结果和解释比较好奇。

这里把Android Design网站上官方关于Action Bar的信息翻译一下,一方面作为将来Android app改版前的学习,另一方面,希望深入了解Google改用Action Bar的初衷。

什么是Action Bar?

Action Bar被认为是新版Android系统中最重要的交互元素,在程序运行中一直置于顶部,主要起到的作用在于:

  • 突出显示一些重要操作(如“最新”、“搜索”等)

  • 在程序中保持统一的页面导航和切换方式

  • 将使用频率低的功能放在Action overflow中,节省页面空间

  • 一个固定区域显示程序标示

Action Bar分成四个区域:

  1. 程序图标:可显示软件icon,也可用其他图标代替。当软件不在最高级页面时,图标左侧会显示一个左箭头,用户可以通过这个箭头向上导航。

  2. 视图切换:当程序通过不同的视图方式(Views)展现信息时,这部分区域可以让用户在不同视图间切换。

  3. 功能按钮:这个放最重要的软件功能,放不下的按钮就自动进入Action overflow了。

  4. Action overflow

屏幕旋转及不同分辨率适配

Action Bar可拆分成多行,形成split action bars,来适应不同分辨率,拆分后一般包含三个部分:

  1. 主要Main action bar:用户可以通过main action bar导航至上一级,因此这个操作条是必须的;

  2. 顶部Top bar:当页面上有不同的内容视图时,可在这个条上使用TAB或spinner下拉菜单的形式切换;

  3. 底部Bottom bar:要展现更多操作和功能,在页面最下端排列。

关于上下文操作条

Contextual Action Bar (CAB) 是在一些特定页面操作下,短暂叠在原有action bar上面的控件,经常用在对所选文字和数据进行相关操作时,从性质上看,比较像右键弹出菜单,也就是对所选区域的可选操作。

Action Bar包含元素

Tabs,不多说了,见图

可左右滑动的tabs:可滑动的tabs条独占一行,宽度为整个屏幕宽度;当你有大量需要切换的项目或不确定多少项目时使用。

Spinners下拉条

官方给出使用spinner而不用tab的情况:

  • 当不希望tab占据太多页面竖直方向上的空间

  • 当认为用户不需要经常在项目之间切换时

操作按钮

Google还在官方介绍上给出了一种给功能按钮排序提供依据的FIT模式,如果下面任何一项适用,则把该按钮放在action bar上是合适的,否则放在overflow中即可。

F – Frequent 高频

  • 当用户在这个页面时,是否10次中至少有7次会使用这个按钮?

  • 用户是否通常要连续使用很多次?

  • 如果每次使用该功能都要多一步操作,会不会很繁琐?

I – Important 重要

  • 你是否希望每个用户都能发现这个功能,或者因为它很酷或者是你的卖点?

  • 你是否认为当需要用到这个按钮时,应该很容易触及?

T – Typical 典型

  • 在相似的软件中,这个功能是不是通常是的最重要操作?

  • 在上下文环境下,如果这个操作按键被埋在overflow中,用户会不会惊讶?

下面的链接里包含一些系统自带操作的图标素材,针对不同屏幕分辨率,可以使用在Holo Light和Holo Dark主题中;另外包括图标的Adobe Illustrator源文件可供自行修改。

Download the Action Bar Icon Pack

Action overflow

Action overflow中存放并不会频繁用到的操作。按照官方网页上的说法,“Overflow图标仅显示在没有MENU硬按键的手机上,而对于有MENU键的 手机,overflow图标是不显示的,当用户点击MENU按键时弹出。”这样的说法比较蹊跷,似乎和Google敦促手机厂商及软件开发商取消MENU 的行为不相匹配。

Action bar上可以放下多少操作按钮?

如果操作按钮和软件标题等放在一排,放按钮的空间只能最多占用一半空间,如果按钮采用屏幕底部的整行action bar则可以使用整个屏幕宽度。

屏幕宽度值Density-independent Pixels(dp)决定可以放置的图标数:

  • 少于360 dp = 2个图标

  • 360-499 dp = 3个图标

  • 500-599 dp = 4个图标

  • 多于600 dp = 5个图标

图中最后一列中的“o”表示一个操作按钮,“=”代表overflow图标

分享功能

当软件中需要对内容进行分享,比如照片、视频,可以在action bar上使用share action provider,它会自动显示最常用到的一个分享按钮和可以下拉的更多分享选项。

转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1014/437.html

 

Android系统UI交互控件Action Bar初探的更多相关文章

  1. Android开发UI之控件-Android-PullToRefresh

    下拉刷新,使用的是Android-PullToRefresh,Github--https://github.com/chrisbanes/Android-PullToRefresh PullToRef ...

  2. Android高级_视频播放控件

    一.Android系统自带VideoView控件 1. 创建步骤: (1)自带视频文件放入res/raw文件夹下: (2)声明初始化VideoView控件: (3)创建视频文件Uri路径,Uri调用p ...

  3. Android常用酷炫控件(开源项目)github地址汇总

    转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...

  4. Android 常用炫酷控件(开源项目)git地址汇总

    第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.P ...

  5. UI常用控件

    UICommonlyUsedControls [UI常用控件] 不需要学习多么深入,但是要知道系统提供的有用的控件. 一.UISwitch(开关) 二.UIActivityIndicatorView( ...

  6. QMUI UI库 控件 弹窗 列表 工具类 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  7. UWP学习记录9-设计和UI之控件和模式6

    UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...

  8. UWP学习记录4-设计和UI之控件和模式1

    UWP学习记录4-设计和UI之控件和模式1 1.控件和事件简介 在 UWP 应用开发中,控件是一种显示内容或支持交互的 UI 元素. 控件是用户界面的构建基块. 我们提供了超过 45 种控件供你使用, ...

  9. Android 性能优化——之控件的优化

    Android 性能优化——之控件的优化 前面讲了图像的优化,接下来分享一下控件的性能优化,这里主要是面向自定义View的优化. 1.首先先说一下我们在自定义View中可能会犯的3个错误: 1)Use ...

随机推荐

  1. 八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

    HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only a ...

  2. bind类成员函数

    首先描述一个情景: 先贴出代码: class Solution { public: bool compare(int a, int b) { return a > b; } int functi ...

  3. resteasy web Guice集成版本

    xxxx:8080/resteasy/messageservice/aaaa Hello : aaaa web.xml <context-param> <param-name> ...

  4. MVC - 12.HtmlHelper

    1.动态生成URL @Url.Action("Index3","Stu3") @Url.RouteUrl("Default2", new { ...

  5. css - 字体图标的制作

    很多的时候我们在开发过程中一般都是直接使用图片,尤其在移动页面频繁请求图片对性能不是很好 ,所以图标字体的应用也越来越广泛.一般情况下直接用的是font awesome字体,但是有时候需要制作自己风格 ...

  6. selenium c# 的注意事项

    http://chromedriver.storage.googleapis.com/index.html chromedriver的下载地址http://selenium-release.stora ...

  7. CentOS7.5字体美化

    背景知识 有衬线 (Serif) 无衬线 (Sans Serif) 和等宽 (Monospace) 字型 1 有衬线 (Serif) 字型是比较正式的字体,比划粗细不一,在笔划的边缘有装饰部分(我的理 ...

  8. 【笔试题】Java 易错题精选

    笔试题 Java 易错题精选 1.写出下列程序的运行结果( )String 不变性Java 值传递 public class Test { public static void main(String ...

  9. SpringBoot学习:在Interillj Idea上快速搭建SpringBoot项目

    一.创建SpringBoot项目 二.导入Jar包(pom.xml) <?xml version="1.0" encoding="UTF-8"?> ...

  10. HDU 6462.人类史上最大最好的希望事件-递推 (“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛)

    人类史上最大最好的希望事件 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...