共用方式為


小工具狀態和內建 UI 元件

注意

針對發行前產品的部分相關資訊,在產品正式發行時可能會有大幅修改。 Microsoft 對此處提供的資訊,不做任何明確或隱含的瑕疵擔保。

重要

此主題中描述的功能可在 Windows 的開發人員通道預覽版本中使用,從 25217 版本開始。 如需 Windows 預覽版本的資訊,請參閱 Windows 10 Insider Preview

Widget 狀態

當 Widgets Board 上顯示小工具時,根據小工具面板的目前狀態和您的應用程式而定,有數個不同的狀態,例如當小工具載入、小工具處於錯誤狀態,或使用者自訂小工具版面配置時。 有些狀態是由您的應用程式設計和實作,有些則是 Widgets 主機內建。 本節說明並描述每個小工具狀態。 請記住,小工具可支援淺色和深色主題,因此內建狀態和自訂狀態的外觀可能會隨目前主題改變。

預設狀態

A screenshot of a widget in the default state

預設狀態是小工具正常執行時的外觀。 這是小工具的主要使用者體驗。 您可以設計小工具預設狀態的版面配置。 雖然小工具預設狀態的 UI 可能會隨使用者設定而變更,但小工具的預設狀態應該完全實作,而且在使用者設定之前不應該是空的。 如果小工具需要使用者登入,您可能想要實作登出狀態,如下所述。 如需為小工具建立預設狀態的設計指引,請參閱小工具設計基本概念

建議事項

  • 當處於預設狀態時,小工具應具有個人化外觀並連接到使用者。
  • 小工具應該顯示在目前時刻為使用者帶來價值的吸引人內容。
  • 讓使用者能夠立即開始與小工具互動。
  • 提供一個反映您應用程式 UI 的 UI,同時在小工具的設計限制內保持一致性,以最大程度地降低學習曲線。
  • 考慮使用使用者的位置來預先填入像運動和建議的行事曆新增之類的內容資料,而不是一般資料。
  • 允許項目之間有充足間距。

避免事項

  • 將小工具用於一般商業供應項目。 內容應該反映使用者的願望和意圖。
  • 避免忙碌且複雜的版面配置。

追求舒適的資訊密度,並在每個小工具大小中保持良好的負空格,以幫助實現快速瀏覽模式。 如果要包含許多資訊,請考慮使用下一個尺寸來顯示更多內容。 同時考慮內容對於使用者快速瀏覽和取用的難易程度。

考慮在小工具中新增令人驚喜和愉悅的時刻,以提升使用者體驗。 例如,對於「家庭」或「行事曆」小工具,可以透過不同的視覺效果突出顯示孩子的生日。

這是具有最大設計靈活性的狀態。 使用本文中的指導方針,以及小工具原則小工具設計基本概念,以及 小工具互動設計指引,以設計您想要如何配置內容。

已登出狀態 (適用於需要驗證的小工具)

A screenshot of a widget in the signed-out state

某些小工具案例可能需要使用者登入或執行其他動作,才能查看個人化小工具內容。 當使用者未登入時,您應該考慮呈現非個人化內容。

錯誤狀態 - 系統提供

A screenshot of a widget in the error state

如果 Widgets Board 基於某些原因,無法擷取小工具的版面配置或資料,則會顯示錯誤狀態。 Windows 將顯示帶有錯誤訊息和重新載入按鈕的小工具標頭。 這個訊息在每個小工具中看起來都一樣。

如果有可供顯示的快取內容,小工具標頭將以以下格式顯示資料上次重新整理的時間:

  1. 如果小於一小時,則以分鐘數顯示
  2. 如果超過一小時,則四捨五入到最接近的小時

在顯示快取訊息時,長的小工具合作夥伴名稱將被截斷,最多顯示 15 個字元。

自訂狀態

從 Windows 應用程式 SDK 1.4 開始,小工具可以提供自訂範本,讓使用者自訂小工具的外觀或小工具顯示的資料。 自訂 UI 定義於 JSON 範本中。

內建 Widget UI 元件

小工具的某些 UI 元素內建在小工具體驗中,雖然這些元素無法由小工具提供者自訂,但請務必注意這些元素是什麼,以及其行為方式。

內容功能表 (系統提供)

Context menu

當使用者按下右上方的三點圖示時,就會顯示內容功能表。 此功能表可讓使用者選取慣用的小工具大小,並存取小工具的設定狀態。 合作夥伴會使用相同的範本小工具註冊「由 ___ 提供」。

屬性區域

A screenshot of a widget with a red box and label calling out the attribution area at the top of the widget containing the widget name and icon.

屬性區域會根據小工具註冊期間所提供的小工具名稱和圖示,由小工具面板呈現。 如需註冊小工具的詳細資訊,請參閱 Widget 提供者套件資訊清單 XML 格式