过年期间,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. 一个python拖库字段的小脚本

    import requests import re all_column = dict() all_db = "db_zf,dg_activity,dg_activity_log,dg_ad ...

  2. Linux进程的创建函数fork()及其fork内核实现解析

    进程的创建之fork() Linux系统下,进程可以调用fork函数来创建新的进程.调用进程为父进程,被创建的进程为子进程. fork函数的接口定义如下: #include <unistd.h& ...

  3. device tree --- label

    [label:] <device node name>[@ unit-address] 為 device node 取 label name, 可以在其它位置使用 &label 存 ...

  4. Phoenix批量修改数据

    很简单的一个东西,查了挺久的,浪费了很多的时间 直接用Upsert Into Select就可以了 例:把tables表中cloumn2列等于bbb的都改成aaa Upsert Into Table  ...

  5. cpu占用高 20180108

    1.top 中的mysql占用高,在mysql中开启慢查询,用tail -f  监控慢查询日志,发现是有表的索引不合理: 2.top 中的php_fpm的进程数高,修改了一下php_fpm的配置文件p ...

  6. mycncart自定义主题

    本文是自己通过其他主题,自学的,如果有什么问题,可以提出建议? 参考资料:opencart官网 www.opencart.com  或 mycncart的官网上的一些教程 www.mycncart.c ...

  7. awk处理之案例六:awk根据条件插入文本

    编译环境 本系列文章所提供的算法均在以下环境下编译通过. [脚本编译环境]Federa 8,linux 2.6.35.6-45.fc14.i686 [处理器] Intel(R) Core(TM)2 Q ...

  8. [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })

    问问你自己,看得懂这行代码吗?要是看不懂就点击进来看看吧,要是看的懂得话,可以绕路 1.call:call(thisObj,arg1,arg2,arg3) [].forEach.call($$(&qu ...

  9. LeetCode解题报告—— 2 Keys Keyboard & Longest Palindromic Substring & ZigZag Conversion

    1. Longest Palindromic Substring Given a string s, find the longest palindromic substring in s. You ...

  10. 【转载】PDB命令行调试Python代码

    转载自这里. (博主按:PDB调试python代码和用GDB调试c++代码很类似) 你有多少次陷入不得不更改别人代码的境地?如果你是一个开发团队的一员,那么你遇到上述境地的次数比你想要的还要多.然而, ...