共用方式為


小工具互動設計指導方針

注意

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

重要

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

本文提供設計 Windows 小工具互動的詳細指引。

小工具應該可以一目了然且專注,而且應該代表應用程式主要用途的單一層面。 小工具可以提供一或多個動作呼叫。 當使用者按一下動作呼叫時,小工具應該啟動相應的應用程式或網站,而不是在小工具本身實作該動作。 小工具只有一個主要頁面,可以包含多個互動。 在小工具中按一下項目時,不應該將您帶到完全不同的小工具視圖。 例如,在天氣小工具中,您可能會顯示多天的天氣情況,但按一下其中一天不會展開詳細資訊,而是會啟動應用程式或網頁。

以下是針對每個支援的小工具大小,建議的最大觸控點數。

小工具大小 最大觸控點
small 1
medium 3
大尺寸 4

Windows Widget 中不支援下列導覽元素:

  • 小工具內不支援樞紐
  • 小工具內不支援 L2 頁面
  • 小工具內不支援垂直或水平捲動

容器

下列影像顯示小工具範本中容器元素的範例用法。 容器會將視覺元素分組為資料行和資料列,以建立階層式方格結構。

說明容器之小工具的四個影像。影像中的小工具會將元素分割成數據列和數據行,以提供階層式方格結構。

下列影像顯示小工具範本中影像連結元素的範例用法。

說明影像連結之小工具的兩個影像。影像會以數據行和數據列排列,以建立方格。

分頁

下列影像顯示小工具範本中的分頁範例。 分頁控制項可以水平或垂直對齊。 當游標懸停時,瀏覽建號會出現。

這組兩個影像會顯示水平分頁。在第一個影像中,點數據行會沿著右側對齊。一個點較大,表示目前使用中的頁面。在第二個影像中,游標將滑鼠停留在小工具底部的向下箭號上,讓使用者移至下一頁。小工具頂端有相符的向上指箭號,可供流覽至上一頁。

這組兩個影像會顯示垂直分頁。在第一個影像中,一列點沿著底部對齊。一個點較大,表示目前使用中的頁面。在第二個影像中,游標將滑鼠停留在小工具右側的向右箭號上,讓使用者移至下一頁。小工具左側有相符的左指箭號,可供流覽至上一頁。

這兩個影像示範當小工具具有影像背景時,分頁控件的外觀。

下列影像顯示小工具範本中的超連結範例。

說明超連結之小工具的兩個影像。第一個影像顯示文字的超連結字串。文字是純文字。在第二個影像中,滑鼠游標停留在超連結上,導致文字加底線。

顯示超連結置中小工具底部的影像,就在分頁點的水平數據列上方。紅色 X 表示分頁點和超連結不應位於相同的空間中。在另一個影像右側顯示超連結,但分頁點會垂直對齊右側的數據行。綠色檢查表示這兩個專案的位置正確。

說明下拉功能表的兩個小工具影像。在左側影像中,下拉功能表會折疊。在右側影像中,下拉式清單會展開並延伸至小工具的框線

如果使用者與功能表或下拉式清單互動,小工具可以暫時超出其小工具大小。 如果使用者按一下功能表/下拉式清單區域外部,功能表應該能夠輕鬆關閉。