Android UI 模式(patterns)

Multi-pane 布局


当在写一个Android应用时,要记住Android设备有很多不同的屏幕尺寸类型。要保证内容能适应多屏幕尺寸以及屏幕朝向。

Panels是一个很好的能实现这个要求的方法。当横向时,有很多空间,它们允许你把多个视图结合成一个复合视图,当可用空间比较少的时候,它们会把内容分割开。

& 把多个视图结合成一个:在小的设备上,典型的安排是分成一个主要的grid或list视图和一个detail视图。点击一个项目后,进入detail视图。但因为平板上有很多空间,你可以使用panels把多个相关的list和detail视图结合成一个复合的视图。这可以更有效地使用多余的空间,并且使应用导航更为简单。

& 复合视图和朝向改变(与平板有关,先略过)

 

Swipe Views


有效地导航也是一个良好设计要关心的部分。用Swipe,可以通过一个简单的手势来实现从一个item到另一个item的转换,使浏览和使用数据变得更为流畅。

& 在Detai视图间Swipe

在之前的设计里,比如邮件,是分为一个List视图和一个Detail视图,点击进入一个item之后,要看其他的item,只能退出去后再点击进入。这叫“pogo-sticking”。

现在可以通过使用Swipe手势来导航上一个/下一个 视图。

& 在Tabs间Swipe

如果使用Action Bar tabs,使用Swipe在不同的视图间进行切换。

 

Selection


 

Android 3.0 开始,长按手势的作用全局性的变为了数据选择。这影响你处理多选择和上下文Actions的方式。

& 变化

之前长按的效果是显示上下文Actions,在3.0之后,用作选择数据,把上下文Action和selection management function 结合成一个新的元素,叫作CAB(contextual action bar)

& 使用 CAB

这个CAB是一个暂时性出现在你的应用当前的Action Bar位置的一个东西。出现在长按一个item之后。在这里,用户可以进行下列操作:

  • 通过点击来选择其他的item
  • 从CAB里触发一个Action,并应用到所有高亮的数据item上。这个CAB自动消失。
  • 通过导航Bar里的back键来消除CAB,同时也取消这些已选中的高亮。

& 选择CAB Actions

 你可以决定在CAB上放哪些Action。可以参考Action Bar pattern指引,来决定哪些item是可以放到CAB里的。

& 动态调整CAB Actions

大多数情况下,当用户选择了很多的item之后,CAB需要有一个动态的变化。

Action Bar


Action Bar是一个很重要的元素。主要目的如下:

  • 把重要的Action放到明显的地方,并且很容易可以想到去哪里访问
  • 支持统一的导航并在应用里切换
  • 通过提供一个放置多余的Action的Action来减少混乱

要注意,Action Bar是一个重要的元素。

& 通常的安排

一般是分成四个部分

  1. App Icon:重要:如果当前的界面不是最顶层的一个,那么在App Icon的左边应该加一个向左的箭头,来进行返回的导航
  2. View Controller:如果你的应用要在不同的View中显示数据,这部分允许用户来切换View。一般的作法是用一个drop-down菜单或者是Tab Controls。如果只有一个界面,那这里可以显示App Title或者更长点的商标信息
  3. Action Buttons:把你应用当中最重要的Action放在这个地方。不适合在这里的Actions都放到Action overflow。
  4. Action overflow:把不常用的Actions移到Action overflow。

& 适应旋转以及不同尺寸的屏幕

写一个应用时一个重要的UI 问题就是如何适应屏幕旋转和不同尺寸的屏幕。你可以通过使用split action bars来适应这种变化,就是把action bar 内容分配到不同的bars里,这些可以位于main action之下,或者在屏幕最下。

& Split Action Bars布局考虑

如果是这样的布局,一般分成三个部分:

  1. Main Action Bar
  2. Top Bar
  3. Bottom Bar

如果用户可以回到上层界面,Main action 要包括一个小的箭头

如果允许用户快速在应用的界面间切换,可以在top bar里使用Tabs或spinner

如果要显示Actions,或者action overflow,使用Bottom bar

 

上下文Action Bars


 

参见上文

 

Action Bar元素


 

Tabs:

如果希望用户经常在几个部分间切换,可以使用Tabs。 有两种Tabs:固定的(fixed)跟可滑动的(scrollable)

Scrollable:经常占据整个Bar的宽度,当前的活动View在中间位置,因此需要在一个专用的Bar里。可以自己水平的scroll,来显示更多其他的view。使用情况:如果有很多的Views或者你不确定有多少Views,因为可能是动态添加的。Scrollable Tabs应该总是允许用户通过左右Swipe来切换Views。

Fixed Tabs:固定的Tabs不能被移动,当屏幕朝向变化时,它可能会被移动到Top bar位置去。

Spinners:

在这些情况下使用Spinners,而不是Tabs:

  • 不想放弃竖直屏幕时,给Tab bar安排好的空间
  • 你希望你的用户不是经常地切换视图

Action buttons:

要分清楚哪些Action是经常使用的,并根据这个来安排它们的位置。应该显示最常用的Actions,把其他不是常用的放到overflow里。如果一个Action在当前不被使用,把它隐藏掉,而不是显示为不能用。

使用FIT表来分辨优先级。如果FIT中有一个适用,就把它放到Action bar,否则就放到Action overflow里。

Action overflow:

把不常用的Action放到这里。这个东西只出现在没有实体按键的手机里。如果有menu实体按键的手机,就可以通过点击menu按来显示Action icon。

在Action bar里能放多少个图标,也有一定的要求。参见这部分的guide。

 Sharing data:

任何时候你想分享数据,比如图片或电影,在你的Action bar里使用share action provider。这个Share action provider是用来加速分享。

总结:

在说干计划分割Action bars的时候,问以下问题:

  • View导航对于这个任务来说,有多重要?如果是很重要的,那么可以使用tabs或spinners
  • 哪些Action需要直接放到Action bar里,哪些要放到action overflow里?使用FIT表来决定
  • 在发生变化时,哪些元素要发生变化。如何跟着变化走。

 

Notifications


 

提示系统允许你的应用给用户提示重要的事件,比如信息之类的东西。但是太多的,不重要的信息会打扰用户,所以要慎重地使用。

& 何时使用:

创建一个用户喜欢的应用,要意识到,用户的注意力和焦点是一个应该受保护的资源。也就是不要随便打断用户的注意力。创建一个Notification是一个要小心的事。

Notifications应该被使用在时间敏感事件上,尤其如果这些事件还包括了其他人。比如信息,是时间敏感的,并且包括了其他的人;日历提醒,也是这样的。

& 不应该使用:

  • 不是直接对用户产生效果的信息,或者不是时间敏感的
  • 如果相关的信息界面正在显示,那也不要使用Notification system,而是用应用里的UI 来提示用户。
  • 不要在低级别的技术操作上打扰用户,比如保存或同步信息,或者更新应用之类的。
  • 如果应用自己可以修复错误,就不要通过Notification的方式还打断用户去提醒他这个错误
  • 不要为Service去用Notification,因为用户无法开始也无法停止它
  • 不要创建多余的提示,仅仅为了显示你的商标,这样会疏远用户。

& 设计指导:

  • Make it personal:记住要加上icon,这样用户才能分别出是哪个应用发出的这个提示
  • 导航到正确的地方:当用户点击这个提示时,要跳到这条提示所对应的正确的地方。要能显示相关的数据。如果这条提示是一个堆(stack),那么就跳到detail界面的上一层
  • 为时间敏感事件添加Timestamp:系统默认地会在右上角显示一个时间,考虑这个时间戳对你的内容是否有价值。如果没价值,考虑这条信息是否有必要吸引用户注意力。如果确实有必要,再决定是否显示这个时间戳。
  • Stack 你的提示:如果有两个类似的提示过来,注意不要把它们一个个列出来,而是在右下角用一个数字表示堆叠。这样子的话,在点击后,跳到的界面可能跟单独的情况有所不同。
  • 自我清除:有些信息只是在一个特定的时间点才会有意义,过了这个点之后就没意义了,所以最好能够自我清除掉。
  • 在你的消息里提供一些小的信息:可以提供一个小的信息,然后自动隐藏。
  • 让消息提示变得可选:在你应用的设置里加一个消息的设置,让用户可以决定是否有消息提示。
  • 使用易区别的icons

& 交互:

一般的提示可以通过左右Swipe来取消掉,但是进行中的(ongoing)提示不能被取消,如音乐播放或者下载之类的操作。

 

Settings


& 流程和结构:

  • 在Action Overflow里提供对Settings的访问。从来都不要把它单独放到Action Bar中,而是把它放到overflow中。位置位于倒数第二个,仅高于“Help”
  • 不要把所有的设置都放到Settings里:太多的选项也会造成混乱。要根据一个表来决定是否把一个选择放到Settings里
  • 如果还是有很多的设置,把相关的凑到一起:在一个部分中,最好只有7(+-)2个的数量选项,如果多于10个,用户的浏览,理解和决定就会有难度。可以把它们分成几组,通过两种方法来分组:1. 在一个区间划分下;2. 在一个分割的子屏幕下。
  • 基于数量多少来分割设置的内容:
    1. 7个或更少:不要分割
    2. 8 到10个:把它们分割成1到2个部分(section)。如果有些是单独的,判断它们是否是重要的,如果重要,放在最上面;如果不是,放到最下面的“OTHER”。
    3. 11 到15个:跟上面的一样,但把它们分成2到4个部分
    4. 16个以上:如果有4个或以上相关的内容,把它们聚到一块

& 设计

  • Checkbox:选择或没有选择上
  • Multiple choice:有多个离散的选择,但用户只能选择其中一个
  • Slider:用于非离散的,连续的值
  • Date/time:用户需要使用日期
  • 子界面:指引用户去一个更为复杂的设置界面:如果导航到一个单独的子界面,使用同样的标题;如果导航到一串子页面,标题使用第一步里的名字
  • List 子界面:如果一个设置的内容包含很多相似的选项,用这个。
  • Master on/off switch:为同一类的Settings设置开关。例如wifi开关。如果选择为off,下面的列表同时消失。
  • Individual on/off switch:跟上面的不同在于,在第一个界面里不能直接开关,点击进入子界面后,才可以设置。正文部分是对这个设置的说明。
  • Depedency:这个Setting是跟另外的Setting有关的。比如另一个设置被选择了,这个设置才可以使用。

 

向后兼容


 

用虚拟导航控制的手机,在Action Bar里有一个Button,也就是overflow部分,可以放很多的选项;

实体的机子,用menu键来替代overflow这个Button,但弹出来的内容显示在屏幕底部,而不是在顶部。

遗留下来的问题:如果是为2.3开发的应用,则会在导航Bar的最右边出一个action overflow,用来显示menu。

 

Pure Android


 

不要跟其他平台上设计得一样。

& 不要模仿其他平台上的元素:

不要把其他平台上的UI元素以及它们的行为拿过来使用。如果想要息定义UI元素,要根据自己的产品来做,而不要根据一个不同的平台来做。

& 不要搬抄其他平台特殊的图标:

当你把一个应用从其他平台移植过来的时候,注意要准备一份Android上的图标副本

& 不要使用底部Tab bars:

有些平台使用底部的Tab bars来切换界面。在Android里,切换界面的Tab bars一般在顶部,而在底部是用来显示split action bar 。

& 不要硬编码链接到其他应用:

如果要使用其他的应用,不要在代码里写死要用哪个其他的应用,而是用Android intent API来打开一个选择页面,让用户选择用哪个相关应用来处理这个事件。如果是分享的话,考虑使用Action bar里的Share Action Provider 来处理分享事件。

& 不要在Action bars里使用带标签的返回按钮:

不要像IOS里的返回那样。

& 不要在item里使用向右箭头

 

 

 

 

 

 

 

posted @ 2012-10-18 11:23  peterZ.D  阅读(3695)  评论(0编辑  收藏  举报