Windows Phone 市集應用程式 Hub 控制項的指導方針

發行項
05/06/2015

Hub 控制項的各個部份 (Hub 標頭、Hub 區段標頭等等)

說明

Hub 控制項—在手機上僅適用於直式方向—顯示可左右移動瀏覽的一系列區段。它是應用程式的全螢幕容器和瀏覽模型。

Hub (之前稱為 "Panoramic"**) 經驗是原生 Windows Phone 外觀和操作的一部分。中樞應用程式與設計成適應手機螢幕範圍的應用程式不同，中樞應用程式利用寬形的視覺畫布，在水平方向延伸超出螢幕範圍，而提供了檢視控制項、資料和服務的獨特方式。在 Windows Phone 上，這些原本的動態檢視使用分層的動畫和內容，如此各層可以不同的速度順暢地移動瀏覽，與視差效果類似。

中樞應用程式中的區段是做為更詳細經驗的起點。您的目標應該是為使用者提供一個視覺上包含豐富內容的呈現。

範例

Windows Phone 應用程式：Hub 控制項

使用者介面由多層組成，它們可獨立移動：背景色彩或影像、Hub 標頭、Hub 區段標頭以及 Hub 區段。

若已設定時，背景影像是最底層，目的是為 Hub 提供一個豐富、如同雜誌外觀的感受。背景影像通常是跨頁影像，而且可能是應用程式中最具有視覺效果的部分。

Hub 標頭可識別應用程式，而且無論使用者用何種方式進入應用程式，它都應該是可見的。

Hub 區段是中樞應用程式的元件，這個應用程式包含其他控制項和內容。Hub 區段與觸控移動瀏覽或撥動的移動速率相同。Hub 區段標頭在任何特定 Hub 區段中都是選擇性的。

縮圖可以是重要的元素，並且連結到其他頁面上的內容或媒體。

包含縮圖的 Hub 控制項

用法指導方針

取決於應用程式的需求，您可以新增數個 Hub 區段到 Hub 控制項—每一個都提供獨特的功能用途。例如，一個區段可能包含一系列連結和控制項，另一個區段則是縮圖影像的存放庫。使用者可以使用 Hub 控制項內建的手勢支援，在這些區段之間來回移動瀏覽。

設計指導方針

Hub 控制項的行為和轉譯僅支援直式方向。
Hub 控制項可以包含佈景主題，而您也可以覆寫預設色彩等等。
為 Windows Phone 的 Hub 控制項使用換行效果，從最後一個區段換行到第一個區段，反之亦然。包含 1 或 2 個區段的 Hub 無法換行。包含 3 個以上區段的 Hub 才能換行。
在 Windows Phone 上，如果您在 Hub 中使用應用程式列，請將應用程式列的模式設為「最小化」**。這個模式是專為最大化 Hub 頁面上的畫面空間而設計的。如需詳細資訊，請參閱 Windows Phone 的應用程式列。
當啟動 Hub 控制項時，請在 [系統匣] 中顯示進度列或全螢幕的「載入中」指示器。
更新或重新整理 Hub 控制項的區段，但不阻止使用者互動時，請在 [系統匣] 中顯示進度列。
第一次造訪：顯示的第一個區段應該具有正確地靠左對齊的 Hub 標頭。並沒有哪個區段必須是預設的標準指導；它取決於要呈現的內容。
如果後續會造訪相同的 Hub 控制項，請將使用者帶回到他們之前離開時所在的區段。
在一個 Hub 控制項中不要建立超過五個區段。這是出於效能考量的緣故，同時可以限制使用者必須瀏覽的區域數量。當內容較為複雜時，請使用較少的區段數。不要使用太多區段而讓使用者眼花撩亂。應用程式只包含四或五個區段，讓使用者可以一眼看出他們所在的位置以及左右兩邊的資訊。
不要在 Hub 控制項內使用 Pivot 控制項，反之亦然。不過，您可以將 Hub 區段中的項目連結到包含 Pivot 控制項的另一個頁面。
不要使用可在 Hub 控制項內移動瀏覽或捲動的控制項。例如，在 Hub 區段內放入一個地圖控制項，會讓 Hub 控制項變得難以使用。手勢輸入會造成混淆。例如，如果您有一個滑桿並試著向左滑動，而您又位於 Hub 控制項的區段中，那麼就無法辨別您是要捲動區段或移動滑桿。對於需要手勢輸入的控制項，其解決方案是將它放入自己的頁面並瀏覽到該頁面。您可以將停用手勢的控制項放置在 Hub 區段—可能是地圖。您可以重疊會啟動地圖的按鈕。按下按鈕會瀏覽到只包含地圖的另一個頁面。接著使用者可以按下返回按鈕回到 Hub 區段。
如需何時使用 Hub 控制項與 Pivot 控制項的更多指導，請檢視下列主題：

Hub 標頭：

使用純文字或影像 (如標誌)。您也可以使用多個元素，如標誌和文字 (或其他 UI 元素)。
確定標頭的字型或影像色彩在整個背景影像上都是清楚可見的 (因為這兩個會獨立移動)。除非有需要使用不同字型、大小或色彩的特定品牌經驗，否則請使用系統字型和樣式。
避免讓標頭產生動畫效果或動態變更其大小。
為了保持一致性，請讓 Hub 標頭符合 [開始] 畫面中的啟動磚。
設定 Hub 控制項及設計標頭的配置時，避免遮蔽 [系統匣] 或其他元素。

Hub 區段標頭：

使用純文字或影像 (如標誌)。您也可以使用多個元素，如標誌和文字 (或其他 UI 元素)。
確定標頭的字型或影像色彩在整個背景影像上都是清楚可見的 (因為這兩個會獨立移動)。除非有需要使用不同字型、大小或色彩的特定品牌經驗，否則請使用系統字型和樣式。
避免讓標頭產生動畫效果或動態變更其大小。

Hub 區段：

精心挑選區段內容中包含的文字和影像，讓 Hub 不會變得雜亂或擁擠，保持整體 Hub 控制項經驗的美觀。
如果您使用垂直捲動，請將方向納入考量。Hub 區段中可以接受垂直捲動，只要區段的寬度大於畫面寬度即可。
除非 Hub 區段有內容可以顯示，否則請考慮隱藏它們。

背景圖案

深色、柔和及低對比的背景是最佳選擇。單色或漸層色。
背景使用低調且不顯眼的相片可讓 Hub 控制項在視覺上更具吸引力。不過，應該避免使用包含許多鮮亮色彩的相片，因為它們會讓區段很難閱讀。有個實用技術是在相片頂端使用半透明的黑色或白色濾鏡 (矩形)。您可以在點陣圖編輯工具中進行，然後將影像平面化。
背景影像應該橫跨整個 Hub 控制項。這表示其外觀比例應該符合 Hub 控制項的外觀比例，而且其大小應該考量最常用的裝置解析度、最大的裝置解析度及效能。建議使用 JPEG 格式，讓檔案大小變小。
即使應用程式正在執行中，您仍然可以從一個背景影像切換到另一個，但一次只能顯示一個影像。

縮圖