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

原文地址

本文内容

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

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

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

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

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

操作栏目的



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

操作栏的主要目的是:

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

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

 

基本布局



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

图 1 操作栏

1. 应用图标

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

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

2. 视图控制

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

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

3. 操作按钮

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

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 原则,考虑哪些操作放在操作栏上,哪些放在“更多操作”菜单中。如果操作栏中的图标太多了,使用底部的副操作栏。

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

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

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

时间: 2024-10-14 05:09:41

Andriod 关于操作栏 ActionBar 的设计原则【转载+整理】的相关文章

扩展用户体验之操作栏ActionBar

一.什么是ActionBar 熟悉Android的人应该很清楚ActionBar指的是哪一部分,不熟悉的人并不清楚其的重要性,特别是Web app与Hybrid app开发者基本没有这一概念,当然在你们平时的开发中也用到了类似于ActionBar功能的布局部分,只是实现当时不同而已,一个使用Java实现,一个使用html来布局. 那到底什么是ActionBar呢?每个App的不同界面中都有一个相同的部分,这部分UI一般在一个App中是一致的,这部分就是导航栏,导航栏中一般有返回导航菜单,应用图标

数据库设计原则[转载]

转自http://www.iteye.com/topic/281611 1. 原始单据与实体之间的关系  可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体. 在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对应多个实体,或多张原始单证对应一个实体. 这里的实体可以理解为基本表.明确这种对应关系后,对我们设计录入界面大有好处. [例1]:一份员工履历资料,在人力资源信息系统中,就对应三个基本表:员工基本情况表.社会关系表.工作简历

数据库设计原则转载

1. 原始单据与实体之间的关系 可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体. 在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对应多个实体,或多张原始单证对应一个实体. 这里的实体可以理解为基本表.明确这种对应关系后,对我们设计录入界面大有好处. [例1]:一份员工履历资料,在人力资源信息系统中,就对应三个基本表:员工基本情况表.社会关系表.工作简历表.   这就是“一张原始单证对应多个实体”的典型例子. 2. 主键与外键

深入浅析JavaScript的API设计原则(转载)

一.接口的流畅性 好的接口是流畅易懂的,他主要体现如下几个方面: 1.简单 操作某个元素的css属性,下面是原生的方法: ? 1 document.querySelectorAll('#id').style.color = 'red'; 封装之后 ? 1 2 3 4 function a(selector, color) { document.querySelectorAll(selector)[].style.color = color } a('#a', 'red'); 从几十个字母长长的一

设计模式与设计原则简介(一)

什么是设计模式? 我们知道对于很多数学问题,经常会有多种不同的解法 而且这其中可能会有一种比较通用简便高效的方法 我们在遇到类似的问题或者同一性质的问题时,也往往采用这一种通用的解法 将话题转移到程序设计中来 对于软件开发人员, 在软件开发过程中, 面临的一般问题的解决方案就是设计模式(准确的说是OOP中) 当然,如同数学的解题思路一样,设计模式并不是公式一样的存在 设计模式(Design pattern)代表了最佳的实践 是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的宝贵经验 是

Android 创建项目ActionBar(操作栏)不显示的问题

昨晚在新建一个项目的时候,发现想创建一个带操作栏的项目,无论我怎么调,就是创建不出来. 在创建工程的时候选择了 但是打开运行还是没有操作栏 但是看了看其他的项目,AndroidManifest.xml文件以及styles.xml文件以及其他布局文件代码都是一样的,为什么其他的项目能显示呢? 查了好长时间都没有解决.最后在书中找到了答案. 又是一个版本兼容的问题(最近遇到了N多类似问题),操作栏组件是在 Android 3.0 (API 11)中被引入的,它是一个导航面板,代替了每个Activit

RESTful API的设计原则

最近一直在做公司的一个API平台的项目,前后大约有半年多了,中间穿插了好多其他的项目一起做的.上周经理要求写文档,我就重新打开项目开始检阅之前的代码,发现好多地方当初设计的并不合理,忽然就想到,一个好的API平台,应该怎么来设计呢?有哪些规范要遵守呢?面对自己的项目,感觉好多地方都要改,但是已经有人在用了,怎么办?全都要改动吗?所以就上网找解决方案,然后就发现一精品贴,现转载过来,以备不时查阅. 原文地址:http://www.cnblogs.com/moonz-wu/p/4211626.htm

好RESTful API的设计原则

说在前面,这篇文章是无意中发现的,因为感觉写的很好,所以翻译了一下.由于英文水平有限,难免有出错的地方,请看官理解一下.翻译和校正文章花了我大约2周的业余时间,如有人愿意转载请注明出处,谢谢^_^ Principles of good RESTful API Design 好RESTful API的设计原则 Good API design is hard! An API represents a contract between you and those who Consume your da

Good UI--UI设计原则<转>

Good UI是一家研究用户体验的设计机构.我们知道成功的页面设计不仅有很高的转化率更便于用户使用,既能满足商业目标更能为用户带来良好的体验.今天为大家分享一些Good UI 在一些项目中获取的设计以及运营策略等方面的经验. 1. 用通栏布局代替多栏布局 2. 给用户些好处,别急着做生意 3. 整合相似的功能,去掉零碎的UI元素 4.利用社会认同效应,别总是自吹自擂 5.主要功能需要多次强化显示 6.区分选中和可点击的状态,不要使用户困惑 7.布局有层次有重点,而非简单罗列 8. 允许用户撤销操