共用方式為

小工具互動設計指導方針

  • 發行項

注意

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

重要

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

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

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

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

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

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

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

容器

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

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

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

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

分頁

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

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

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

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

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

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

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

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

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