视图模式：Android ViewPager & WP Pivot

转载于http://www.54xiaomeng.com/?p=681

在iOS，Android和WP三家移动平台上，iOS的可用性是目前用户接受程度最高的，但是Android和WP也有不少各自平台的设计亮点，本章主要介绍Android和WindowsPhone的两种特色视图模式：Viewpager &  Pivot。而且博主很负责的说，这两种视图模式是优异于iOS平台的。

1.名词解释

Android的ViewPager

ViewPager实际上就是一种同级选项卡排列的视图模式，用户可以通过最简单的左右滑动手势实现选项卡之间的切换。最常见的如Google官方应用：Play商店、 Play音乐。

操作手势：区域内左右滑动或点击标题均可实现视图的切换

官方文档对于这种视图的描述 ： 点击查看

Fixed tabs

Fixed tabs are always visible on the screen, and can’t be moved out of the way like scrollable tabs. Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.

Use fixed tabs to support quick changes between two or three app views. Fixed tabs should always allow the user to navigate between the views by swiping left or right on the content area.

开发者可以查看官方的Android APIs: 点击查看

ViewPager在实际应用的优缺点：

• 优点：整屏左右滑动是最容易的操作手势之一，ViewPager可以方便用户在同级视图中快速切换，初次进入页面可以一次性加载两页，减少一次请求次数。
• 缺点：对于初次使用应用的用户，ViewPager并不能让用户理解一共有几个视图以及视图的名称；视图的数量不宜超过5个，且从5#视图回到1#视图必须滑动4次。

Windows Phone的Pivot视图

Pivot可以翻译成枢轴视图或选项卡视图，用于用户需要经常切换的同级页面，设计理念上同Android的ViewPager，唯一的区别是Pivot视图可循环切换。

操作手势：区域内左右滑动或点击标题均可实现视图的切换

Pivot的适用范围：

• 注册登录
• 产品列表页的标签筛选
• 全景视图下的同级子页面
• 层级简单注重体现内容忽略结构的页面

官方文档对于这种视图的描述 ：  点击查看

 

2.案例说明

需要在一个手机屏幕中呈现完整的产品详情页，产品详情页包括

• 产品概要信息
• 基础信息
• 附加信息
• 详细信息

那么使用 iOS的设计规范来呈现这个页面应该是这样子：

阅读完所有信息需要有四个页面间跳转，需要按三次返回键。

而用Viewpager和Pivot视图模式呈现这样的页面只需简单的左右滑动即可，如果视图较少，程序还可以控制为一次服务器请求加载完所有信息。

通过这样的案例，我们可以发现如果用户有一定的认知能力，这两种视图的切换效率是明显高于iOS的列表跳转的。