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. 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里使用向右箭头