小工具互動設計指導方針

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

小工具應該讓人一眼就能掌握，且重點明確，並應呈現應用程式主要用途中的單一面向。 小工具可提供一個或多個行動呼籲。 當使用者按一下動作呼叫時，小工具應該啟動相應的應用程式或網站，而不是在小工具本身實作該動作。 一個小工具只有一個可容納多個互動功能的主頁。 點按小工具中的某個項目時，都不應將您帶到該小工具的完全不同檢視畫面。 例如，在天氣小工具中，您可能會顯示多天的天氣情況，但按一下其中一天不會展開詳細資訊，而是會啟動應用程式或網頁。

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

小工具大小 最大觸控點數
小 1
適中 3
大尺寸 4

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

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

容器

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

四張說明容器的小工具圖片。圖片中的小工具將元素劃分為列與欄，以提供階層式網格結構。

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

兩張說明圖片連結的小工具圖片。這些圖片以欄和列排列，形成網格。

分頁

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

這組兩張圖片顯示水平分頁。在第一張圖片中，一欄圓點沿著右側對齊。其中一個圓點較大，用來表示目前作用中的頁面。在第二張圖片中，游標停留在小工具底部的向下箭頭上，讓使用者移至下一頁。小工具頂端有一個與之對應的向上箭頭，可供前往上一頁。

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

這兩張圖片顯示當小工具設有圖片背景時，分頁控制項的外觀。

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

兩張說明超連結的小工具圖片。第一張圖片顯示一串帶有超連結的文字。文字為純文字。在第二張圖片中，滑鼠游標停留在超連結上，使文字加上底線。

一張圖片顯示超連結置中於小工具底部，位置就在底部分頁圓點水平排列的一列上方。紅色 X 表示分頁圓點和超連結不應出現在同一區域。右邊的另一張圖片則顯示超連結位於底部，但分頁圓點垂直對齊並排列在右側成一欄。綠色勾號表示這兩個元素的這種配置是正確的。

兩張說明下拉式選單的小工具影像。在左側影像中，下拉式選單處於收合狀態。在右側影像中，下拉式選單已展開，並延伸至小工具邊框外

如果使用者正在操作選單或下拉式選單，小工具可以暫時稍微超出其原本的尺寸。 選單應採用點擊外部即關閉的行為；如果使用者點擊選單／下拉式選單區域外部，則應關閉選單。

  • Last updated on