Share via

輪替

  • 發行項

本文章介紹用於旋轉的新 Windows UI，並提供在 Windows 應用程式中使用此新互動機制時應考慮的使用者體驗指導方針。

重要 API：Windows.UI.Input、Windows.UI.Xaml.Input

可行與禁止事項

  • 使用旋轉來協助使用者直接旋轉 UI 元素。

其他用法指導方針

旋轉概述

旋轉是 Windows 應用程式使用的觸控最佳化技術，讓使用戶能夠以環形方向 (順時針或逆時針) 旋轉物件。

視輸入裝置而定，會使用下列方式執行旋轉互動：

  • 使用滑鼠主動式畫筆/手寫筆移動所選物件的旋轉移駐夾。
  • 直接觸摸或使用被動式畫筆/手寫筆透過旋轉手勢沿著所需方向旋轉物件。

何時使用旋轉

使用旋轉來協助使用者直接旋轉 UI 元素。 下圖顯示支援旋轉互動的一些手指位置。

diagram demonstrating various finger postures supported by rotation.

注意直覺來說，在大多數情況下，旋轉點是兩個觸控點之一，除非使用者可以指定與接觸點無關的旋轉點 (例如：在繪圖或版面配置應用程式中)。 下圖示範如果不採用這種方式限制旋轉點時，會如何降低使用者體驗。

第一張圖片顯示第一個 (拇指) 和第二個 (食指) 觸控點：食指接觸樹，拇指接觸樹枝。

image showing the two initial touch points for the rotation gesture. 在第二張圖片中，圍繞第一個 (拇指) 觸控點進行旋轉。 旋轉之後，食指仍然觸碰樹幹，並且拇指仍然觸碰樹枝 (旋轉點)。

image showing a rotated picture with the rotation point constrained to one of the two initial touch points. 在第三張圖片中，旋轉中心是由應用程式所定義 (或由使用者設定) 為圖片的中心點。 旋轉之後，由於圖片並未圍繞其中一個手指旋轉，因此不能直接操作 (除非使用者已選擇這個設定)。

image showing a rotated picture with the rotation point constrained to the center of the picture rather than either of the two initial touch points. 在最後一張圖片中，旋轉中心由應用程式定義 (或由使用者設定) 為圖片左邊緣中間的一個點。 同樣，除非使用者選擇這個設定，否則在這種情況下無法直接操作。

image showing a rotated picture with the rotation point constrained to the leftmost center of the picture rather than either of the two initial touch points.

 

Windows 10 支援三種旋轉類型：自由、受限以及組合。

類型 描述
自由旋轉

自由旋轉能讓使用者將內容360 度自由旋轉到任意位置。當使用者放開物件時，物件仍然保持在所選位置。 自由旋轉對於繪圖和版面配置應用程式非常有用，例如：Microsoft PowerPoint、Word、Visio 和Paint 以及 Adobe Photoshop、Illustrator 和 Flash。
受限旋轉

受限旋轉支援在操作期間自由旋轉，但放開時以 90 度 (0、90、180 和 270) 遞增強制貼齊點。 當使用者放開物件時，物件會自動旋轉到最近的貼齊點。

受限旋轉是最常用的旋轉方法，而且它的工作方式與捲動內容類似。 使用者透過貼齊點雖然不夠精確，但仍能實現他們的目標。 受限旋轉對於網頁瀏覽器和相簿之類的應用程式非常有用。
組合旋轉

組合旋轉支援包含區域 (類似於平移的指導方針中的圍欄) 的自由旋轉，這些區域位於受限旋轉強制的每個 90 度貼齊點上。 如果使用者在其中一個 90 度區域之外放開物件，則物件仍保持在該位置；否則，物件會自動旋轉到貼齊點。

注意 使用者介面圍欄是目標周圍的某個區域限制向特定值或位置的移動，從而影響其選取範圍的一項功能。
 

範例

封存範例