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是一个重要的元素。
& 通常的安排
一般是分成四个部分
- App Icon:重要:如果当前的界面不是最顶层的一个,那么在App Icon的左边应该加一个向左的箭头,来进行返回的导航
- View Controller:如果你的应用要在不同的View中显示数据,这部分允许用户来切换View。一般的作法是用一个drop-down菜单或者是Tab Controls。如果只有一个界面,那这里可以显示App Title或者更长点的商标信息
- Action Buttons:把你应用当中最重要的Action放在这个地方。不适合在这里的Actions都放到Action overflow。
- Action overflow:把不常用的Actions移到Action overflow。
& 适应旋转以及不同尺寸的屏幕
写一个应用时一个重要的UI 问题就是如何适应屏幕旋转和不同尺寸的屏幕。你可以通过使用split action bars来适应这种变化,就是把action bar 内容分配到不同的bars里,这些可以位于main action之下,或者在屏幕最下。
& Split Action Bars布局考虑
如果是这样的布局,一般分成三个部分:
- Main Action Bar
- Top Bar
- 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. 在一个分割的子屏幕下。
- 基于数量多少来分割设置的内容:
- 7个或更少:不要分割
- 8 到10个:把它们分割成1到2个部分(section)。如果有些是单独的,判断它们是否是重要的,如果重要,放在最上面;如果不是,放到最下面的“OTHER”。
- 11 到15个:跟上面的一样,但把它们分成2到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里使用向右箭头