WP8.1學習系列(第十八章)——Windows Phone 互動和可用性

標籤：

本主題討論了布局會對應用的可用性產生怎樣的影響。在應用的可用性上下文中還討論了其他常用 UI，例如搜尋和設定。

在繼續使用控制項和互動之前，請執行以下操作：

• 有關概念化應用的策略，請參閱盡你所能，設計最佳 Windows Phone 應用。
• 閱讀控制項設計指南中關於標準系統控制項的內容。

觸摸目標和文本

你的應用應該向使用者呈現具有足夠大小的觸摸目標。使用者在點擊控制項時應得到反饋，說明其點擊已對控制項產生作用，並允許其在應用內繼續執行操作。為此，Windows Phone 對觸摸目標和文本的使用有一些特定要求。

大小要求

觸控設計需在大小、間距和可視之間取得多元平衡。達到這一平衡會降低所謂的“目標擷取困難指數”—換言之，它可使控制項更容易按下。

廣泛的使用者測試已表明 9 毫米的方塊是所有 Microsoft 觸摸平台的理想觸摸目標大小。

9 毫米或更大的方塊是觸摸 UI 資產的理想觸摸目標

允許更小的命中目標高度，最低目標大小為 7 毫米。在這些情況下，最好是具有更寬的可視資產。例如，清單項目或功能表項目應該較寬。

7 毫米是最低目標大小

關於 9 毫米要求

建議觸摸目標大小是不小於 9 毫米的方塊。將它用於支援絕大部分任務的控制項。

如果空間受到嚴格限制，則可以在寬度很大的情況下使用 7 毫米的最低觸摸目標大小。

九毫米這一數字是由數百小時的使用者測試確定的，並且可以表示非連續任務和連續任務的最低平均錯誤率（或錯誤點擊與總點擊次數的比率）。9 毫米的最低觸摸目標大小可將錯誤率限制到低達 1.6%。

最低觸摸目標大小為 7 毫米。將它用於較少使用的控制項或足夠寬的控制項（不小於 15 毫米），並且只在設計受到太多高度限制時使用。

最低可視大小

可觸摸項的最低可視大小不應小於 4.2 毫米。如果小於此大小，則使用者根本不會認為該項是可觸摸的。當需要較小的可視資產時使用此大小。目標應當為 10-15 毫米或更大。

提示:  在大部分情況下，須使可視大小等於觸摸目標大小。使用間距可使控制面板更容易被命中。

評估錯誤點擊的後果

在為控制項分配目標大小時，始終牢記任務上下文並評估錯誤率。存在主要錯誤後果的控制項應該具有較大的目標。在運動中使用的控制項也應具有較大的目標。

例如，系統電話撥號程式應具有非常大的觸摸目標，因為錯誤點擊會產生高昂的代價：使用者可能撥打錯誤的號碼。在容錯性較高的操作中，可以選擇使用較小的目標。

顯示觸摸目標的非連續部分。

觸摸目標部分

在上一個磁貼示圖中，請注意以下內容：

• 可視間距：控制項和按鈕之間適當的間距能夠增加觸摸的舒適感。
• 可視資產：這是使用者將看到的表徵圖/控制項/文本的實際大小。
• 觸摸目標：這是圍繞顯示的可視資產的綠色邊框。觸摸目標可以等於或大於可視資產大小，但絕不能小於可視資產大小。在常見控制項樣式指南中，它們由綠色線表示。
• 死空間：兩個可觸摸項之間的間距是指不執行任何操作的地區。

要瞭解有關製作外觀出色的磁貼的詳細資料，請參閱磁貼和徽章指南。

使用較小的目標

如果空間和任務妨礙你使用合適的觸摸目標，請考慮如何變換觸摸目標的以下屬性以改善體驗：

• 形狀
• 位置
• 使用頻率
• 任務上下文
• 可視設計（填充/間距）
• 錯誤後果

	使目標大小大於可視資產。如果資產的可視大小小於目標，則可視資產的大小不得小於 4.5 毫米。
	在相鄰的可視資產之間引入間距。在這些情況下，通過在相鄰的資產之間加入間距（最低 2 毫米）來調整命中目標大小，可得到更合適的命中目標。
	在資產周圍建立可視填充。通過引入可視填充建立安全邊界的方式，可降低命中較小目標的難度。這將降低命中目標的感知難度。

 

在定義 UI 元素的合適大小時，請考慮該元素及其附帶任務的重要性。普通任務（如檢查電子郵件）不應獲得使用者太多的關注；特殊任務才應吸引更多的關注。

調整小控制項間距

如果你具有小元素，則可以通過使用間距調整到目標大小。使用間距調整間隔緊密的小控制項。請記住將間距用於間隔緊密的小控制項。

重要說明:  無論實際控制項的大小如何，都要使用充足的間距，以便仍可容納 9 毫米的最小觸摸目標大小。

假設你擁有一個 4 毫米的複選框控制項。使觸摸目標加大 3-5 毫米，以便達到 7-9 毫米大小。如果你希望進一步減少錯誤，請在複選框控制項和下一個相鄰的 9 毫米目標之間加入間距（或者一個 262-dpi 裝置上大約 90 個像素）。使用遊標卡尺測量裝置上的映像；重要的是大小，而不是像素計數。

異常

某些控制項（例如螢幕小鍵盤和超連結控制項）使用演算法提高觸摸精度。

像鍵盤和超連結列表這樣的例外需要使用更正機制（如命中目標大小調整演算法）或縮放來得到更合適的命中目標。在大多數情況下，目標高度比寬度更重要，但是存在一些例外（例如，軟鍵盤上的鍵的寬度可能影響目標擷取）。確保至少在一個維度中達到理想的目標大小。

軟鍵盤

如果一切都失敗，請設法不要在一個小的命中目標周圍放置太多相鄰的命中目標。

相鄰的命中目標過多

最小文字大小

版式元素的大小和位置對於螢幕布局的構成至關重要。現代設計的基礎缺乏鑲邊元素，這意味著文本和版式是非常重要的元素。

提示:  使字型標籤和提示清晰可見，並有適當的間距。Windows Phone 上的最小字型大小是 15 磅。

核心元素通常使用邊界和架構這樣的額外元素來精巧地構造內容的布局。確保使用不同的字型大小、顏色或樣式在螢幕上建立需要的階層，以便使用者能夠方便地識別主要任務和次要任務。

建立自訂控制項

考慮應用內容的填充方案或顯示方式時，直到查閱了控制項中的標準系統控制項設計指南，才能建立你自己的自訂控制項。

建立自訂控制項只是為了使功能、任務或操作更易於完成或理解。

考慮將系統標準控制項用作自訂控制項中的操作範例。如果在查看內容過程中使用控制項，請謹慎使用這些控制項。控制項應在全屏查看過程中逐漸淡出。

按鈕

若要提供貫穿 Windows Phone 平台的一致體驗，請在放置按鈕時遵循常見結構，這一點很重要。這樣做將為使用者的導航提供簡單一致的結構。

瞭解將免費向你提供哪些硬體和軟體也很重要。對於入門者，每個 Windows Phone 都包含了三個操縱按鈕：—後退、開始和搜尋。瞭解這三個按鈕在整個系統上的使用方式可協助防止 UI 和應用流中發生問題。

首頁按鈕和 Back 堆棧

在你的使用者介面中放置一個“首頁”按鈕對於典型的導航模型來說是一個例外。平台上的創新雖然不一定是壞事，但是更改平台預期的互動模型可能會使使用者感到迷惑。此標準不包括當使用者已從深層連結啟動應用且沒有 Back 堆棧時的情況；在此情況下，需要一些方法來返回到首頁。

在應用中實現“首頁”按鈕還可能導致另一個問題，這個問題對你的應用具有更為嚴重的影響：它可能意外地造成使用者在使用“首頁”按扭和硬體“後退”按扭進行導航時陷入無限迴圈（或接近無限迴圈）的情況。如果他們使用“後退”按扭從一個應用移回到你的應用以到達另一個應用，這一迴圈會變得更糟。確保這些問題不會影響你的應用。

所有應用都具有不同的互動流，其中某些應用與另外一些相比可能更為複雜。但是，嘗試使應用的體繫結構儘可能地保持簡略，並充分使用列表和透視，這樣使用者無需多少步驟便可以導航回到登入螢幕，並從這裡到達之前啟動的應用。如有疑問，嘗試類比平台中已存在的常見元素和導航結構；這可以減小使用者感到困惑的可能性。

“後退”和“關閉”按鈕

你的應用 UI 中絕不能具有“後退”或“關閉”按鈕。Windows Phone 在每台裝置上都提供了一個物理“後退”按鈕，以便你可以使應用的導航保持簡潔。

不正確：應用中包含“後退”和/或“關閉”按鈕

浮動按鈕

浮動按鈕會產生不一致且令人困惑的導航。使用應用程式列是向頁面添加命令的最佳方法。有關應用程式列的詳細資料，請參閱基本圖形、可視指標和通知（Windows Phone 市集應用）。

浮動按鈕

如果無法將所有命令放置在應用程式欄上，則確保將其一致地放置在你的 UI 中。可變的位置可能會干擾內容瀏覽，隨意放置的表徵圖甚至可能看起來不像可以與使用者互動的元素。

常用控制項的 Windows Phone 庫提供了一種一致的方法，可用於實現 UI 內的命令 UI。遵循 Windows Phone 的設計資源建議的布局理念，可獲得整個平台通用的互動性。

使用搜尋

搜尋內建於每個 Windows Phone 的硬體和軟體中。你無法修改或更改硬體搜尋按鈕的行為。有關詳細資料，請參閱 Windows Phone 第一印象中的“搜尋按鈕”部分。

採用標準方式顯示設定

在 Windows Phone 中，應用設定是在應用自身內部執行的。你無權將應用設定放置在系統和應用程式系統應用設定之內。

提示:  你需要熟悉系統設定選項並考慮各種使用者佈建如何影響 UI 或應用行為。例如，如果你建立的是已串連 Web 服務的應用，應當考慮使用者將手機設為飛航模式時應用的行為。

對於具有幾個可供使用者選擇的設定的應用，你應該在應用中建立設定頁面，並按照系統和應用程式系統應用設定中的布局和行為模仿它。

按照系統設定頁面模仿應用設定頁面。

對應用設定進行的更改應當立即實現。這意味著無需“完成”、“確定”或其他確認對話方塊。在某些情況下，即使更改立即發生，使用者也可能得不到更改已發生更改的反饋，直到有進行中的事件完成或未來事件發生為止。有關提供反饋的詳細資料，請參閱 Windows Phone 的動畫、動作和輸出。

保持應用設定簡短清晰應當作為一項設計目標。複雜的多頁面、多層級應用設定會使使用者感到沮喪或困惑，還以為他們已經完全進入另一個應用。

重要說明:  避免建立具有兩個以上頁面的應用設定。

此外，還要記住以下事項：

• 需要多個螢幕的設定應該使用覆蓋半個螢幕，以避免在顯示軟鍵盤時丟失上下文。
• 如果無法撤銷某個任務，則始終向使用者提供取消選項。例如，文本輸入。
• 針對覆蓋或刪除資料的操作，或者不可恢複的操作，提供取消按鈕。
• 如果你使用的是帶有應用和取消按鈕的其他螢幕，單擊這些按鈕應執行關聯操作並使使用者返回到主設定螢幕。
• 提供可禁用在應用內通過網路擷取資料的資料使用方式的選項。

若要使設定控制台的標題保持一致，設定頁面的標題應如下所示：

應用程式設定

<控制台名稱/應用程式名稱>

應用內廣告

下面是 Windows Phone 中廣告單位最低品質的基本準則。查看這些準則時，請記住你的廣告也必須與 Windows Phone 設計原則保持一致。

沒有要顯示的廣告時，AdControl 將自行隱藏。在你的應用中包括代碼來應對此情況並回收可用空間。

建議廣告單位大小

AdControl 的預設大小和建議大小為 480 x 80 像素。這是 Windows Phone 中的廣告的建議大小。

即使在 pubCenter 中使用 300 x 50 像素的格式大小建立了廣告單位，為了獲得更好的使用者體驗，還需要將 AdControl 大小設定為 480 x 80。較小的廣告單位格式將在此空間內置中，並通過 pubCenter 中的廣告單位大小設定在 AdControl 裡面呈現。例如，300 x 50 像素的廣告將以 300 x 50 像素顯示，其廣告單位的中部位於 AdControl 中間。中顯示了此配置。

置中的廣告控制項

提示:  包括 300 x 50 像素的 AdControl 大小以保持向後相容性。它可能在未來被棄用。若要避免在以後修訂你的廣告單位，請考慮在 480 x 80 像素的標準 AdControl 大小中建立新廣告。

廣告定位

將 AdControl 放置在螢幕的頂部或底部。建議的位置是給定視圖的頂部或底部。

全尺寸 AdControl

滾動查看器

滾動查看器內包含的廣告將隨使用者對內容的滾動在頁面上顯示或消失。如果你希望廣告在使用者滾動時保持固定，請將 AdControl 放置在滾動查看器之外。將滾動查看器放置在螢幕的頂部或底部。

通過中心或透視控制項使用廣告

當使用者平移到鄰近的部分或項目時，將不會看到包含在中樞控制項內的某個部分中（或透視控制項內的某個項目中）的廣告。若要將廣告保留在所有部分或項目上，請將 AdControl 放置在該控制項之外，如左側所示。若要在各種部分或項目上顯示不同的廣告，請在針對每個單獨廣告的每個部分或項目中建立 AdControl 的新執行個體，如右側所示。

中樞控制項中的廣告

透視控制項中的廣告

顏色

使用系統佈景主題色彩。如果你要更改佈景主題色彩，請選取合適的顏色，以便 AdControl 邊界和文本仍便於閱讀。

WP8.1學習系列(第十八章)——Windows Phone 互動和可用性