Android UX & UI 最佳实践: 设计有效的导航

时间:2021-05-08 05:31:51

Best Practices for User Experience & UI

Designing Effective Navigation

  导航:帮助用户有效直观地使用你的应用。

Planning Screens and Their Relationships

  应用的信息模型可以用实体关系图表示(entity-relationship diagrams (ERDs))。

  定义出信息模型之后,就可以定义你的app所需要的所有屏幕画面。然后定义出屏幕之间的直接关系、跳转逻辑。这样就得到了screen map

  之后就可以设计一些细节,比如导航跳转按钮之类的。

Planning for Multiple Touchscreen Sizes

  Android设备是有不同的类型和尺寸的,比如手机、平板,甚至还有电视。

  你的应用应该能够适配不同的屏幕尺寸和方向,提供平衡且美观的布局。

  当平板横放的时候,通常是从左到右,详细程度递增。

  很多桌面应用和网站都提供了左侧导航板,或者使用一种master/detail的两面板布局方式。

  单面板一般使用Activity实现,多面板可以用Fragment实现。

  多面板需要考虑的一个重要问题就是屏幕方向问题,当多面板解决了平板上的布局问题时,在横向可能工作得很好,但是垂直屏幕时又出了问题,所以可能会需要根据不同的屏幕方向写不同的布局。

  在解决平板纵向布局问题时,一些常用的策略如下:

  Stretch:拉伸宽度。

Android UX & UI 最佳实践: 设计有效的导航

Android UX & UI 最佳实践: 设计有效的导航

  Expand/collapse:展开/折叠:比如将左侧导航列表折叠。

Android UX & UI 最佳实践: 设计有效的导航

Android UX & UI 最佳实践: 设计有效的导航

  Show/Hide:显示/隐藏:这种方法将左侧完全隐藏。

Android UX & UI 最佳实践: 设计有效的导航

Android UX & UI 最佳实践: 设计有效的导航

  

  Stack:重新堆叠你的panel。

Android UX & UI 最佳实践: 设计有效的导航

Android UX & UI 最佳实践: 设计有效的导航

  通过提供多面板的布局,我们可以把屏幕结成组,可以重新规划一下上一节中的screen map。

Providing Descendant and Lateral Navigation

  导航有两种,纵向和横向的,也即继承的和横向的(Descendant and Lateral)。

Android UX & UI 最佳实践: 设计有效的导航

  兄弟屏幕的关系也分两种:关系相关的(collection-related)和部分相关的(section-related)

Android UX & UI 最佳实践: 设计有效的导航

  前者表达同一个集合中的项目之间的关系,部分相关,表达的是同一个parent的不同部分。

Buttons and Simple Targets

  这种section-related的屏幕之间,最直观的导航方式是在parent里提供各种按钮之类的控件来进行触摸导航。

  选择了控件后,相应的child screen被打开,完全取代当前屏幕。

  一种常用的基于button的模式就是dashboard(仪表盘)模式。这个模式是一种展现所有部分的很好的方法。

  大的目标会让UI更易用。Dashboard模式通常用于同等重要性的部分,但是这个模式在更大的屏幕上看起来并不是很漂亮,并且用户需要额外的这一步才能进入到真正的应用内容中。

Lists, Grids, Carousels, and Stacks

  对于集合关系的元素,比如文字信息,最直观的方式是垂直滚动的列表。

  对于照片或者视频,比较常用的是:竖直滚动的格子(grid),水平滚动的列表(有时叫做carousels(旋转木马?)),或者是stacks(有时也叫cards)。

Android UX & UI 最佳实践: 设计有效的导航

  这种list-based模式的导航通常用于显示元素较多的集合,但是也会有问题,那种项目较多、较深的列表(drill-down list navigation),通常是没有效率和繁重的,要得到一个特定的部分有可能需要点击(触摸)很多次,用户体验会不佳,尤其对比较着急的用户来说。

  使用垂直的列表也比较尴尬,在大的屏幕上,宽度被扩展,高度一定,会有很多没用的空白。

  一种缓解的方法就是加入文字信息,说明一下;另一种就是在这个list旁边加入其它的一个水平的面板。

Tabs

  对于水平导航来说,使用tab是很常见的。Tab比较适合于小的集合(小于4)的section-based的屏幕。

  Tab应该一直保持一致,每次选择Tab之后只有Content区域会发生变化,并且Tab应当一直都在。

  Tab应该没有历史,并且应该在顶端。

Horizontal Paging (Swipe Views)

  另一个比较流行的水平导航模式是水平的page,也叫swipe views

  这种模式最好用于collection-related的屏幕。和tab一样,这种模式也可以嵌套其他。

  这种水平滑动page模式适用于内容有相似性,并且页数比较少的情况。

  可以和Tab结合。对于collection-related的项目来说,如果屏幕之间有顺序关系,这种page模式是最直观的。

  如果子screen有水平平移的表面,比如地图,是不适用这种模式的。

Providing Ancestral and Temporal Navigation

  导航不只是往下往child走,还应该向上向祖先走。并且要遵循Android的约定,提供返回键的回退功能

Support Temporal Navigation: Back

  提供临时的导航,即历史回退,是Android系统重要的一个方面。

  所有的Android用户都会期待back键会把他们带回到上一个屏幕。

  屏幕历史的最根部是Launcher application,也即桌面,即按Back按钮足够多的次数后回返回到桌面,并且此时再按Back,就什么事也不会发生了。

Provide Ancestral Navigation: Up and Home

  在Android 3.0之前,最常见的向上导航就是Home返回。

  这通常是通过设备上的菜单按钮,或者屏幕左上角的Home按钮(经常是作为Action Bar的一部分)实现的。

  通过选择Home,用户通常会被带到屏幕继承关系的最上层,即应用的首页。

  提供对应用首页的直接入口可以给用户安慰和安全感。不管他们在应用的哪个部分,只要他们选择Home,就可以回到熟悉的首页。

  Android 3.0引入了Up,在Action Bar里作为Home键的替代品。

  选择Up,用户将会返回本继承层次中的父屏幕。

  这种导航通常是返回上一个屏幕(像Back键一样),但也不总是这样。

  程序员必须要确定每个屏幕的Up都会返回一个单独的、确定的父画面。

  在有些情况下,Up也可以用来执行一些动作,比如侧边栏的显示隐藏控制

  实现注意:实现Home或者Up的时候,要注意back stack的清理。

  可以在intent中用标记 FLAG_ACTIVITY_CLEAR_TOP and FLAG_ACTIVITY_NEW_TASK来实现。

Putting it All Together: Wireframing the Example App

  http://developer.android.com/training/design-navigation/wireframing.html

参考资料

  Best Practices for User Experience & UI

  http://developer.android.com/training/best-ux.html

  Designing Effective Navigation

  http://developer.android.com/training/design-navigation/index.html

  Multi-pane Layouts

  http://developer.android.com/design/patterns/multi-pane-layouts.html

  Navigation

  http://developer.android.com/design/patterns/navigation.html