小工具設計基本概念

  • 發行項

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

小工具大小

一張截圖顯示空白小工具模板，展示小、中和大尺寸。一張截圖展示天氣小工具的小、中和大尺寸範例。一張截圖展示交通小工具的小、中和大尺寸範例。

小工具有三種大小可供選擇。 建議您建立並考慮所有三種大小，並為每種大小做出相應的調整。 小尺寸和中尺寸的小工具更容易被注意到，因為它們在動態回饋中出現的頻率更高。 大尺寸有助於顯示更深入的資訊。 支援多種尺寸，讓使用者靈活地自訂選擇要釘選到小工具面板上的小工具。

Small

在設計小尺寸小工具時，簡潔和易懂的小工具原則，變得更加重要。 小尺寸小工具不應試圖將所有功能塞進一個大尺寸小工具中。 專注於一個使用者互動或一個關鍵資訊，可以通過一個觸控目標在這裡呈現。

中

相較於小尺寸小工具，中尺寸小工具提供了更多的空間，因此可以包含更多功能或其他資訊。 中尺寸小工具也可以提供與小尺寸小工具相同的專注體驗，但提供 2-3 個觸控目標。

大尺寸

大尺寸提供了更多展示資訊的空間，但內容仍應保持專注且易於取用。 另外，大尺寸的卡片可以醒目提示一個影像或主題，並提供更加沉浸式的體驗。 大尺寸的觸控目標不得超過 3-4 個。

色彩和主題

三個示範輕色調主題的小工具模板。第一個是帶有白色背景的空白小工具。第二個是帶有淺色漸變背景的空白小工具。第三個是帶有圖像背景的小工具。所有三個小工具都以深色字體顯示「文字」，以展示與淺色背景的對比。

三個示範暗色調主題的小工具模板。第一個是帶有黑色背景的空白小工具。第二個是帶有深色漸變背景的空白小工具。第三個是帶有圖像背景的小工具。所有三個小工具都以淺色字體顯示「文字」，以展示與暗色背景的對比。

Windows 11 支援兩種色彩模式：淺色和深色。 每個模式都包含一組中性色彩值，這些值會自動調整以確保最佳對比。 針對您支援的每個小工具大小，請務必為淺色和深色主題建立個別的設計，讓小工具在更廣泛的操作系統和使用者的主題選擇中順暢地整合。 小工具背景支援使用純色/深色背景、漸層色調或影像背景進行自訂。

兩個小工具範例並排。左側範例具有淺色漸變背景，文字使用淺灰色字體。圖像上標有紅色X，表示低對比度使文字難以閱讀。右側圖像具有淺色漸變背景，文字使用深黑色字體。圖像上標有綠色勾，表示高對比度使文字清晰可讀。

兩個小工具範例並排。左側範例具有高度飽和的彩色背景圖像，文字使用深色字體。圖像上標有紅色X，表示低對比度使文字難以閱讀。右側圖像具有淡化的彩色背景和深黑色字體的文字。圖像上標有綠色勾，表示高對比度使文字清晰可讀。

選擇背景色彩、影像和內容時，請確定有足夠的色彩對比，以確保可讀性和可使用性。

Web 內容協助工具指南 (WCAG) 2.0 AA 層級，需要標準文字的對比度至少為 4.5：1，大型文字則為 3：1。 WCAG 2.1 需要圖形和使用者介面元件的對比度至少為 3：1 (例如表單輸入框線)。 WCAG AAA 層級需要標準文字的對比度至少為 7：1，大型文字則為 4.5：1。 大型文字定義為 14 點 (通常是 18.66px) 和粗體或更大，或 18 點 (通常是 24px) 或更大。

邊界

一張帶有指引線的小工具示意圖，指示邊距。旁邊是一張小工具示意圖，邊距內的區域被藍色填充以顯示內容區域。

每個小工具周圍都有 16px 的邊界，以及無法放置內容的 48px 屬性區域 。 唯一可以位於右側邊界和下邊界的元件是分頁點。 如需分頁點位置的範例，請參閱 Widget 互動設計指引的分頁一節。

兩個小工具範例並排。左側圖像顯示將小工具分為三列的指引線，示範列與列之間有4像素的間距。右側圖像顯示將小工具分為三行的指引線，示範行與行之間有4像素的間距。

對於使用容器的小工具，每個元素之間的裝訂邊為 4px，而容器應該會觸碰邊界的邊緣。 您的內容也應該使用四個 Px 的倍數間距和調整大小值，確保設計在不同螢幕解析度下呈現時清晰、完美。

在設計內容時，您也應該參閱 Windows 應用程式的內容設計基本概念中有關間距和裝訂邊的指引。

印刷樣式

兩個片語「The quick brown fox jumped over the lazy dog」並排。右側的片語字體加粗。

一張表格，顯示小工具不同元素的示例文字。在圖像下方以純文字重新建立表格，不顯示渲染外觀。

為了提高可存取性，以下表格呈現了上面影像中顯示的表格文字。

範例 大小/線條高度 調適型卡片公式
標題 12/16 epx 小型，較淺
本文 14/20 epx 預設，較淺
本文 (適用於超連結) 14/20 epx 預設，較淺，輔色
本文強式 14/20 epx 預設、較粗
本文大尺寸 18/24 epx 中尺寸、較淺
最大主體 18/24 epx 中尺寸，較粗
子標題 20/28 epx 大尺寸、較粗
標題 28/36 epx 超大尺寸、較粗

Segoe UI 是 Widget 和 Windows 中使用的字型。 上述字體坡形包括了如何在「調適型卡片設計工具」中正確設定正確樣式的公式。 字體樣式不應偏離上述指定的公式。 如需使用「調適型卡片設計工具」建立小工具範本的詳細資訊，請參閱使用「調適型卡片設計工具」建立小工具範本。

兩個小工具範例，顯示片語「The quick brown fox jumped over the lazy dog」和文字「超連結」。左側圖像具有淺色背景的深色文字。右側圖像具有深色背景的淺色文字。兩張圖片中的超連結文字均為藍色。

在「調適型卡片設計工具」中，標題和本文複製會使用與小工具主題相關聯的預設色彩。 進一步區分標題與本文複本的另一個選項，是使用預設色彩的微妙版本。 輔色僅用於超連結。

圖示

設定檔圖片

四個圓形頭像的示例，從左到右尺寸遞減。圖像標有「96」、「48」、「32」和「24」。

如果您的小工具包含顯示使用者設定檔 (例如社交媒體摘要或串流)，請使用下列其中一個允許的圓形設定檔大小：96x96px、48x48px、32x32px 或 24x24px。

工具提示

一張日曆小工具的圖像，顯示了一個日曆約會。滑鼠游標懸停在約會主題行上，該行被截斷，並顯示工具提示顯示完整主題行。

當小工具中的標題文本被截斷時，可以使用工具提示。 根據最佳實踐，文本應該整潔地放在小工具空間內，不需要截斷；然而，這在某些情況下可能不會發生，比如語言本地化、系統文字縮放或引用某些內容時 (例如文章標題、歌曲名稱)。 這不適用於小工具上的本文。