WP8.1學習系列(第十七章)——Windows Phone重要圖形、視覺指標和通知

標籤：

美感在手機應用中是不可或缺的，它是直觀操作的代名詞。在 Windows Phone 中，你的磁貼、啟動顯示畫面、表徵圖、控制項和導航的視覺元素會引起使用者對應用程式內的相關任務、優先事項或操作的注意，並採用新穎的且令人信服的方式顯示資訊。你的應用將需要自訂設計的動態磚、動畫表徵圖以及啟動顯示畫面映像（用於在使用者載入應用時向其介紹應用）。這些設計和其他視覺指標是本部分的主題。

盡量少使用圖形。請記住，使用可以引起視覺吸引力的內容和版式，並且始終不要使用純天然修飾的視覺元素。

請記住，在移動平台上，簡潔性是最具有吸引力的重要資源。如果藝術映像合適，請使用高品質、原創的圖形藝術映像、品牌或攝影作品。確保藝術映像滿足或超過應用所需的尺寸，並且確保明確和易懂。

磁貼

對於使用者可在手機“開始”螢幕中設定的應用或其內容而言，磁貼是一種可輕鬆識別的可視捷徑。通過將應用的磁貼固定到視圖可自訂要在“開始”螢幕上顯示哪些磁貼。動態磚比表徵圖更有價值，因為它可以顯示關於應用或與其相關的資訊。例如，天氣應用的磁貼可以動態顯示溫度。我們強烈建議你使用此功能，因為它可使你的應用更有用。

最佳磁貼可以傳送有關應用的資訊，彰顯你的個性品牌，並在螢幕上所有其他磁貼中顯得鶴立雞群。磁貼可以向使用者傳送資訊，方法是顯示使用系統字型的可選計數器，更新提供的磁貼背景映像，或者顯示使用了固定大小和顏色的系統字型的可選磁貼。使用磁貼通知服務控制計數器、背景映像和磁貼更新。計數器的主題色始終是使用者所選的主題色。計數器顯示是可選的。

Microsoft 及其行動電信業者和硬體製造商夥伴已安裝了帶有某些磁貼的 Windows Phone 裝置。這些磁貼一致反映獨特的 Windows Phone 體驗。

有關詳細資料，請參閱磁貼和徽章指南。

磁貼藝術映像非常重要

如果你使用多個磁貼映像，則它們應該在視覺上與其他每個映像一致，並具有可識別的主題或風格。無法更改顏色、字型、字型顏色或計數器顯示的大小。

不包含磁貼映像或標題的應用將顯示一個系統定義的通用表徵圖和項目名稱。如果開發應用的設計預算不高，可以去很多費用合理的網站購買表徵圖。無論你是不是自行設計該磁貼，都請支付或購買該磁貼，使其保持簡單。表徵圖應該具有簡單的幾何圖形並限制精美圖案的數量。如果可以，它們應該使用人們已熟悉的隱喻。

注意  謹慎使用磁貼通知。過度使用會縮短電池壽命。

要避免的樣式

• 3D 版式
• 帶有漸層、斜面或投射陰影的表徵圖或背景
• 圓角
• 黑色或白色背景；磁貼背景將在深色或淺色主題中消失
• 使用不明確的非描述性表徵圖
• 帶有彩色映像的透明背景

正確和錯誤的磁貼用法

磁貼背景顏色

磁貼有兩個關鍵元素：在前景、方塊、彩色背景中顯示的表徵圖或徽標。這兩個映像會相輔相成。

選擇一個可代表你的品牌並使前景表徵圖易於查看或讀取的背景顏色。顯示了遵循指南的三個樣本。

Phone Company、Adatum、Margie‘s Travel

你應該避免使用黑色或白色背景，因為磁貼背景將在深色或淺色主題中消失。

黑色磁貼背景顏色的錯誤用法

如果你希望你的磁貼背景與手機 UI 使用相同佈景主題色彩，則可以將磁貼背景設定為透明。如果執行了此操作，則需瞭解以下重要注意事項：

• 僅將你的磁貼設定為透明。與你的應用一起提交的其他磁貼不應該具有透明背景。
• 將你的前景表徵圖設定為白色。如果前景表徵圖是彩色的，則該表徵圖將不可見，或者看起來與某些手機佈景主題色彩不和諧，如所示。

未將前景表徵圖設定為白色時的問題

啟動顯示畫面

許多應用需要花一些時間來進行載入。利用這個機會通過啟動顯示畫面向使用者介紹你的應用。啟動顯示畫面僅在幾秒鐘內可見，因此我們建議你不要使用任何需要使用者注意或花費時間來閱讀的文本。相反，使用此空間將使用者的注意力轉換到具有圖形的應用中。良好的啟動顯示畫面是應用的圖形廣告，並且自始至終都是使用顏色和圖形。

正確和錯誤的啟動顯示畫面

計劃你的應用的開啟視圖時，請牢記以下幾點：

• 如果你的應用使用載入或介紹頁面，則這些頁面不應該包含在 Back 堆棧中。換言之，當使用者按下後退按鈕時，應該跳過這些頁面。
• 存在幾個與後退按鈕和應用的第一個相關的認證要求。有關詳細資料，請參閱 Windows Phone 的技術認證要求。

視覺指標

Windows Phone 使用三個不同類型的指標顯示任務進度、滾動視圖、訊號強度、電池壽命以及其他重要訊息。

進度列指示器

進度列指示器顯示與某個活動或一系列事件相關的應用內活動。它是一個可整合到狀態列中並可顯示在多個應用頁面上的系統控制項。有關狀態列的詳細資料，請參閱本主題後面的“狀態列”部分。

注意  與標準進度列一樣，狀態列進度列指示器可以是確定的，也可以是不確定的。確定的進度列指示器具有起點和終點。除非任務完成，否則不確定的進度列指示器將繼續運行。

對下載內容等任務使用確定的進度列指示器，而對遠端連線等任務使用不確定的進度列指示器。

有關如何向使用者顯示任務進度的詳細資料，請參閱進度控制項。

滾動指標

當螢幕上的內容（例如較長文本或映像）超出可視頁面的邊界，並且使用者進行平移或輕拂時，頁面將會滾動。使用者滾動時，對於垂直滾動，可見滾動指標在右側顯示；而對於水平滾動，指標沿底部顯示。這些捲軸指示內容的長度或寬度超出頁面，並表示頁面上的當前位置。在頁面滾動結束時，一秒鐘後滾動指標會從視圖淡出。

滾動指標不是使用者的操作行為，而是對其下內容的覆蓋。其主要功能是向使用者提供一個有關頁面大小的提示。

使用稱為滾動查看器的可平移和可縮放控制項，你可以在應用中實現滾動。滾動查看器通常填充螢幕，並包含比自身大的內容。這樣，使用者就可以圍繞擴充到螢幕邊界外部的內容地區進行導航。

狀態列

狀態列是一個指標欄，可以在應用工作區預留部分利用簡單、乾淨的圖示顯示系統層級的狀態資訊。它自動更新以提供不同通知，並讓使用者注意到系統層級的狀態。

有關詳細資料，請參閱 Windows Phone 第一印象中的“狀態列”部分。

應用程式列

應用程式列為你提供了一個位置，以便最多將四個最常執行的 App任務和視圖顯示為表徵圖按鈕。此欄提供一個視圖，可以顯示具有文本提示的表徵圖按鈕，以及稱為應用程式列菜單的可選操作功能表（在使用者點擊序列點的視覺指標或向上輕拂應用程式列時啟用）。

應用程式列

使用應用程式列，而不是建立自己的菜單系統。這有助於在裝置的所有應用上建立一致使用者體驗。該應用程式列為你提供菜單動畫和旋轉支援。

你可以將應用程式列添加到全部都是標記的應用頁面中。

設計注意事項：

• 除非有令人信服的理由來重寫佈景主題色彩，否則使用使用者定義的系統佈景主題色彩。使用自訂色彩會影響按鈕表徵圖的顯示品質、造成菜單動畫中的異常視覺效果，並縮短某些裝置上的電池壽命。
• 應用程式列的不透明度可以進行細微調整，但是我們建議你使用值為 0、0.5 和 1 的不透明度。
• 和操縱按鈕（後退、開始和搜尋）一樣，應用程式列始終位於相同的顯示器邊緣，並在縱向或橫向延伸到螢幕的整個寬度。表徵圖按鈕自身將旋轉以對齊手機的方向。
• 縱向模式中的應用程式列高度和橫向模式的中的寬度是固定的，無法修改。它可設定為顯示或隱藏。

有關如何本地化應用程式列的說明和樣本，請參閱如何構建 Windows Phone 的本地化應用。

應用程式列菜單

應用程式列菜單為可選方式，供使用者從應用程式列訪問特定任務時選擇。放置應用程式列菜單中較少使用的任務。

當使用者點擊序列點的視覺指標或向上輕拂應用程式列時，將啟用此菜單。通過點擊菜單地區的外部或點、使用後退按鈕或者選擇功能表項目或應用程式列表徵圖，可以取消該視圖。

應用程式列菜單

設計注意事項：

• 若要防止菜單滾動，將菜單中顯示的項目數量限制為 5 個。
• 如果應用程式列功能表項目的文本太長，該文本將超出螢幕。對於功能表項目文本，建議最大長度介於 14 和 20 個字元之間。同樣，在此空間中，少即是多。
• 如果未顯示功能表項目，將僅顯示表徵圖文本提示。
• 應用程式列菜單將保留在螢幕上，直到使用者執行某個操作為止。

應用程式列表徵圖

應用程式列表徵圖應清晰且易於理解，並且應該使用使用者熟悉的實際隱喻。最佳表徵圖應該具有簡單的幾何圖形，並限制精美圖案的數量。

按鈕應該包含一個表徵圖和一個文本提示。文本提示應該簡短，為該按鈕執行的操作提供上下文，但它們不需要完整描述。例如，可水平翻轉映像的按鈕。無需“水平翻轉”，“翻轉”便已足夠。

注意  按鈕應該包含一個表徵圖和一個文本提示。

應用程式列按鈕可顯示為啟用或禁用狀態。已禁用按鈕的一個樣本是唯讀應用情境中的刪除按鈕。

應用程式列表徵圖

為應用中的最常使用的主要操作使用表徵圖按鈕。請勿盲目使用更多表徵圖。

使用注意事項：

• 某些操作難以通過一個表徵圖清晰表達。將這些操作放置在應用程式列菜單中。
• 當使用者顯示應用程式列菜單時，將顯示應用程式列表徵圖的文本提示。
• 請勿使用表示後退按鈕（可在頁面堆棧中向後導航）的“表徵圖”按鈕。所有 Windows Phone 裝置都具有專用的硬體後退按鈕，應始終為後退導航使用該按鈕。
• 旋轉應用程式列時，請選擇具有明確含義的表徵圖。應用程式列將自動處理螢幕方向中的更改。當裝置處於橫向方向時，菜單會在螢幕的一側垂直顯示。旋轉表徵圖按鈕，以便向使用者豎直顯示表徵圖，但是列表中表徵圖的順序不會發生變化。請考慮，當發生旋轉時，表徵圖的原意是否會不清楚，尤其是類似表徵圖或對稱表徵圖。

設計注意事項：

• 表徵圖映像大小應為 76 x 76 像素。
• 表徵圖映像應在使用 Alpha 色板的透明背景上使用白色前景。按鈕的白色前景圖形應該適合映像中心的 41 x 41 正方形地區，以便它不會與圓重疊。
• 不是建議大小的映像將會縮放以適應，並且可能會降低應用程式列表徵圖的整體映像品質。
• 每個表徵圖按鈕上顯示的圓都通過應用程式列繪製，並且不應該包含在源映像中。

樣本表徵圖資產

採用 PNG 格式的一組應用程式列表徵圖資產（深色和淺色）將作為 Windows Phone SDK 的一部分進行安裝。應用程式列中僅應該使用白色表徵圖（名為“Dark”的檔案夾中的表徵圖）。若要尋找這些項目，請導航到：

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\<version>\Icons\Dark

通知

對於應用開發，Windows 通知服務旨在提供具有專用、有彈性和持久的通道提供雲端服務，從而為行動裝置發送通知。

當雲端服務需要向裝置發送推播通知時，它會向 Windows 通知服務發送通知請求，從而使該通知作為磁貼通知、Toast 通知或原始通知路由到應用或裝置上。

有三種方法可用於顯示推播通知：磁貼通知、Toast 通知和原始通知。

磁貼通知

磁貼通知通知使用者可能發生的更改或事件，對使用者工作流程不具有破壞性。它們顯示在“開始”磁貼上。使用磁貼通知，你可以在磁貼上動態設定屬性，例如計數、背景映像和標題。

磁貼通知

針對僅感知通知使用磁貼通知。

Toast 通知

Web 服務可產生一種稱為 Toast 通知的特殊推播通知，可從使用者請求某個操作。Toast 通知會顯示一個橫幅（它是位於螢幕頂部的主題色中的不透明欄），從而在左側顯示應用表徵圖的縮小版本。提供兩個欄位的文本：一個是粗體標題，另一個是正常副標題。長度大於顯示地區的文本將被截斷。

橫幅顯示 10 秒，然後消失。如果點擊該橫幅，將啟動已發送 Toast 通知的應用。Toast 通知是系統範圍內的通知，但是它們不會干擾使用者流，也不需要幹預以解析。例如，使用者接收簡訊或立即訊息時的通知。

橫幅

針對操作請求的通知使用 Toast 通知。例如，通過立即訊息用戶端或對等應用產生的通知。但是請慎用這些通知；所有應用均具有對 Toast 通知的存取權限，太多橫幅會使使用者感到厭煩。

應用必須預設關閉 Toast 通知。Toast 通知應與使用者個人相關，並且對時間十分敏感。通常，它們會保留對等通訊，如同在 SMS 應用程式中一樣。

原始通知

需要應用內操作的通知完全由應用控制並僅反映該應用。這些通知稱為原始通知。它們可以通過應用自行產生或從 Web 服務發送。沒有用於顯示原始通知的系統範圍的方法。

原始通知

針對應用程式內通知使用需要使用者操作的原始通知。

網路中斷的情況

• 如果沒有網路連接，則應用應提供相應的警告。可以使用飛航模式測試警告。
• 驗證該應用在沒有可用網路時是否仍可導航。儘管可能沒有傳入資料，但應用的導航功能應仍起作用。
• 如果網路中斷中斷了某個功能或操作，則始終讓使用者知道發生了什麼問題。

包括終端使用者許可協議

終端使用者許可協議（即 EULA）是使用者在初次開機應用時允許遵循的一組使用指南。它會列出使用者的權利，正如你所設想的那樣。它是你和購買應用的使用者之間的協議，該協議規定使用者不能濫用應用。

應用的使用應基於使用者是否接受 EULA。如果使用者不接受 EULA 條款，則不允許該使用者使用應用。

此聲明應該討論你支援的應用的行為和使用，包括有關內容、許可證、安裝、啟用、驗證、基於 Internet 的服務或某些資訊的使用的特定條款。它還是通知使用者更新你的計劃、提供應用升級或者使用軟體格式和標準的好方法。如果你的應用與某個企業相關聯，你的 EULA 還應該指示你的企業的註冊位置，以及你是否提供任何形式的擔保。

WP8.1學習系列(第十七章)——Windows Phone重要圖形、視覺指標和通知