视图模式:Android ViewPager & WP Pivot

在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的列表跳转的。

文中如有错误,欢迎指出;转载请标明出处,谢谢!

 

 

  1. 个人认为上述ios的点击查看操作更多的是之前微软操作系统留下的一种习惯延伸,本质都是:icon展现,点击进入。尽管android与windows8的切换理念更加快捷,甚至更加前沿,但用户的历史习惯让他们感觉自然,这种自然感甚至可以让他们忽略哪个更快!新颖且优秀的交互方式在普遍的历史残留习惯面前,优势不会太过明显。

    • 用户习惯是培养出来的,如果设计者不改变方式,用户习惯永远也不会变。当然用户习惯的改变需要时间,也需要有大量用户基础的产品才能对习惯造成影响,我也在文章中说了对有一定认知能力的用户,Android和WP这种视图方式是优于iOS的。

  2. 我个人觉得,得放到不同场景中分析。如果只有5个模块,且用户浏览时候目标性不强,则Viewpager和Pivot应该是不错的浏览方式。如果用户第一次使用你这个系统,而且product detail中有“描述”、“规格参数”、“图片”、”评论“、”供应商报价“……等等。那Viewpager和Pivot在浏览时候会让用户无法预见结果,从而或多或少的降低操作安全感。

  3. Pingback: 孔余祈云

  4. Pingback: 视图模式:Android ViewPager & WP Pivot | 艾艾时代

  5. 那最后一张图做例子,如果我要从Product Details到Additional Info页面我要滑动两次,返回也需要两次。这点上来说并没有比iOS有多大的便利。

  6. 其实还应该说一下android中的actionbar的设计,在进入4.0之后的版本后,actionbar也可通过滑动点击快速切换,此设计经常与viewpager结合使用已达到互补的效果。

  7. Pingback: 视图模式:Android ViewPager & WP Pivot « 移动科技网

  8. Pingback: 视图模式:Android ViewPager & WP Pivot | 随心录 - 天下无敌

  9. Pingback: 视图模式:Android ViewPager & WP Pivot | 艾艾时代

  10. Pingback: 邹到玟吟