視圖模式: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的清單跳轉的。

 

文中如有錯誤,歡迎指出;轉載請標明出處,謝謝!源位址:HTTP://www.54xiaomeng.com/?p=681

源位址:HTTP://www.54xiaomeng.com/?p=681

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.