Windows Phone Panorama 控件設計準則

轉自：http://msdn.microsoft.com/zh-cn/library/windowsphone/design/hh202912(v=vs.105).aspx

適用於： Windows Phone 8 | Windows Phone OS 7.1

Panorama 控件顯示可以從一邊平移到另一邊的項視圖。它是應用的全屏容器和導航模型。

Panorama 控件

外觀和操作

全景體驗是本機 Windows Phone 外觀的一部分。與旨在適合手機屏幕邊界的標準應用不同，全景應用通過使用超出屏幕邊界的長水平畫布提供了一個查看控件、數據和服務的獨特方式。這些固有的動態視圖使用分層動畫和內容，以便各層以不同的速度流暢地平移，類似於視差效果。

全景應用的元素用作更具體體驗的起始點。您的目標應該是在視覺上向用戶呈現豐富的內容。

詳細說明

用戶界面由按其自身獨立運動邏輯運行的層類型組成：一個背景圖像、一個 Panorama 標題、Panorama 區域標題和 Panorama 區域。縮略圖可完善體驗，並且是全景視圖的主要元素。它們鏈接到在全景體驗之外使用的內容或媒體。

背景圖像是最低的層，併爲 Panorama 提供了豐富的雜誌般的感覺。背景通常是一張整幅圖像，它可能是應用最直觀的部分。

Panorama 標題應標識應用，並且應當清晰可見，而無論用戶以何種方式進入應用。

Panorama 區域是封裝有其他控件和內容的全景應用的組件。Panorama 區域的移動速率與手指平移或輕拂的速率相同。

Panorama 區域標題對於任何給定的 Panorama 區域都是可選的。

縮略圖可以是全景視圖的主要元素。它們鏈接到在全景體驗之外使用的內容或媒體。

帶縮略圖的 Panorama 控件

標準用法

全景體驗包括一個 Panorama 控件以及一個或多個 PanoramaItem 控件。Panorama 控件用作應用的基礎，PanoramaItem 控件託管各個內容部分。基於應用的要求，您可以將多個 PanoramaItem 控件添加到 Panorama 控件表面，其中每一個都提供一種具有獨特目的的功能。例如，一個 PanoramaItem 可能包含一系列鏈接和控件，而另一個則是縮略圖圖像的儲存庫。用戶可以使用 Panorama 應用已提供的手勢支持在這些部分之間來回平移。

設計準則

Panoramas 一般準則：

Panorama 控件支持從後向前包裝，也支持從前向後包裝。使用這種效果可以正確地設計您的應用流。
如果在 Panorama 中使用應用欄，請將“模式”設置爲“最小化”。此模式專門用於將 Panorama 頁上的屏幕空間最大化。有關更多信息，請參見 Windows Phone 的應用欄。
爲了品質以及限制用戶導航瀏覽的視圖數量，Panorama 控件中的區域不應超過四個。內容越複雜使用的區域應越少。不要讓過多的區域令用戶不知所措。只需四五個區域，用戶就可以判明他們所處的方位，以及左側和右側的內容。
Panorama 控件僅支持縱向。Panorama 控件不支持橫向。不得旋轉 Panorama 控件內啓動的對話框以避免衝突體驗。
Panorama 控件可以在系統托盤中顯示進度條，也可以在啓動時全屏顯示“加載”指示器。當更新或刷新 Panorama 控件的某個區域時，會顯示系統托盤中的進度條，但不會阻止用戶交互。
首次訪問：顯示的第一個區域需將 Panorama 控件標題妥善左對齊。對於將哪一區域作爲默認設置這一問題並無標準指導；具體取決於將要顯示的內容。
對於後續訪問，當用戶再次訪問同一 Panorama 控件時，會將用戶轉到上次中斷時訪問的窗格。
不要在 Pivot 控件內部使用 Panorama 控件，反之亦然。不過，您可以鏈接 Panorama 控件區域中的各項，指引用戶進入 Pivot 控件。
不要使用可在 Panorama 控件內部平移或滾動的控件。例如，將 Map 控件放入 Panorama 控件區域中可能會造成該 Panorama 控件難以使用。難以分辨所輸入手勢的用意。例如，如果您有一個滑塊，您嘗試將其向左滑動，並且您是在 Panorama 控件的區域之中，則無法確定您是希望滾動區域還是希望移動滑塊。解決方案是導航到一個需要手勢輸入的帶控件的子頁。只要爲手勢交互啓用地圖，您就可以在 Panorama 控件的區域中放置地圖。您可以覆蓋會激活該地圖的按鍵。按下按鍵會實際導航到一個僅具有 Map 控件的單獨頁面。用戶隨後可按“返回”按鍵返回到 Panorama 區域。
有關何時使用 Panorama 控件與 Pivot 控件的更多指導，請查看以下主題：

對於 Panorama 標題：

對 Panorama 標題使用純文本或圖像，如徽標。您還可以使用多個元素，例如徽標和文本（或其他 UI 元素）。
確保標題的字體或圖像顏色在整個背景內正常顯示，並且在可見性上不依賴於背景圖像。使用系統字體和樣式，除非需要特定的品牌體驗（使用其他字體、大小或顏色）。
在“開始”中對啓動磁貼使用相同的 Panorama 標題，以保持一致性。
避免設置 Panorama 標題動畫，或動態更改其大小。
對 Panorama 標題使用相對於最頂級內容層較慢的運動速率（並且慢於背景圖片）。

對於 Panorama 區域標題:

對 Panorama 區域標題使用純文本。或者，您可以使用圖像。您可以使用多個元素，如圖像和文本（或 UIElement 類中的其他元素）。
確保 Panorama 區域標題不依賴於背景圖片。
避免設置 Panorama 區域標題動畫，因爲標題將會移動。
平移帶有 Panorama 區域標題的整個 Panorama 區域，即使存在多個控件存在也是如此。
當用戶導航到新區域時，在屏幕外設置 Panorama 區域標題動畫。
Panorama 區域標題應當有不同的行爲，這具體取決於區域的寬度是大於還是小於屏幕寬度。如果區域的寬度較大，則應當設置水平動畫 - 標題不應位於區域左上角，而應當在 Panorama 移動的同時，以不同的速度沿頂部移動。在這些情況下，不應進行垂直滾動。或者，如果區域的寬度小於屏幕寬度，則標題應當始終設置在屏幕左上角。在這些情況下，不應設置任何水平動畫，並且標題應當隨內容移動。

對於 Panorama 區域：

通過在 Panorama 區域中的列表或網格內垂直滾動是可以接受的，只要它是在區域的範圍內進行，並且不與水平滾動平行即可。
當用戶導航到新區域時，在屏幕外設置 Panorama 區域動畫。
請考慮隱藏 Panorama 區域，直到它們有內容要顯示爲止。

背景插圖最佳做法：

您並不總是需要具有背景或複雜背景。
照片背景可使 Panorama 控件呈現卓越的視覺效果。
Panorama 控件能以主題形式提供，並且該應用品牌顏色可以覆蓋系統主題。
在 Panorama 控件主題內添加嵌入文本和徽標時，請務必謹慎，因爲這樣可能會導致系統托盤或其他元素重疊或封閉問題。
通過對內容中包含的文本和圖像進行選擇，保持 Panorama 控件體驗的完整性和美感，使其不顯得雜亂和擁擠。
使用深色、柔和的低對比度背景。一項實用技術是使用背景圖像頂部的半透明黑色或白色篩選器（矩形）增強文本的易讀性。這可以在位圖編輯工具中完成，也可以使用矩形控件覆蓋在背景圖像頂部。
最好使用單個圖像作爲 Panorama 控件的背景。
使用一個單色背景或跨整個 Panorama 控件的圖像。如果決定使用圖像，Silverlight 所支持的任何 UI 圖像類型都是可接受的。但是，推薦使用 JPEG 圖像，因爲其文件大小通常小於其他格式。
您可以使用多個圖像作爲背景，但是請注意，在任意給定時刻都只會顯示一個圖像。
背景圖像應當在 480 x 800 像素和 1024 x 800 像素（寬 x 高）之間，以確保較高的性能、最少的加載時間，以及不需要縮放處理。