平移或滾動讓使用者能在同一視圖中導航,以顯示未完全顯示在視口內的內容。 檢視的例子包括電腦的資料夾結構、文件庫或相簿。
重要 API: Windows.UI.Input、 Windows.UI.Xaml.Input
可行與禁止事項
平移指示器與滾動條
在載入應用程式內容前,務必確認可進行平移或滾動。
顯示平移指示器和滾動條,提供位置與大小提示。如果你提供自訂導航功能,請隱藏它們。
注意 與標準滾動條不同,平移指示器僅供資訊。 它們不會接觸到輸入裝置,也無法以任何方式控。
單軸平移(一維溢出)
對於超出一個檢視區界限 (垂直或水平) 的內容區域,使用單軸平移。
- 用於一維項目列表的垂直平移。
- 對項目網格進行水平滾動。
如果使用者必須能在切換點之間平移並停止,就不要在單軸平移中使用強制的吸附點。 強制的彈跳點保證使用者會在彈跳點停下。 建議用近接吸附點。
自由式平移(二維溢出)
對於超出兩個檢視區界限 (垂直和水平) 的內容區域,使用雙軸平移。
- 覆蓋預設的軌道行為,對於使用者可能多向移動的非結構化內容,使用自由平移。
自由平移通常適合在影像或地圖中導航。
分頁視圖
當內容由離散元素組成或你想顯示整個元素時,使用強制的吸附點。 這可以是書籍或雜誌的頁面、一欄的項目,或是個別圖片。
- 每个邏輯邊界上都應放置一個吸附點。
- 每個元素都應該根據視角調整大小或縮放。
邏輯與關鍵點
如果內容中有一些使用者可能會停下來的關鍵點或邏輯位置,請使用接近點來捕捉。 例如,一個章節標題。
若定義最大與最小尺寸限制或邊界,請使用視覺回饋示範使用者何時達到或超越這些邊界。
串接嵌入或巢狀內容
文字與格狀內容可使用單軸平移(通常為水平)及欄式佈局。 在這些情況下,內容通常會自然地從一欄包裹到另一欄,保持使用者體驗在 Windows 應用程式間的一致性與可發現性。
不要用嵌入的可平移區域來顯示文字或項目清單。 由於平移指示器和滾動條只有在區域內偵測到輸入接觸時才會顯示,因此使用者體驗並不直覺或易於發現。
當兩個可平移區域都朝同一個方向平移時,不要將其中一個連接或放置在另一個可平移區域中,如圖所示。 當子區域的邊界被觸及時,可能會意外導致父區域被平移。 請考慮將平移軸設定為垂直。
其他用法指導方針
使用觸控進行平移時,可以用一根或多根手指進行滑動或滑行手勢,這就像用滑鼠捲動一樣。 平移操作最像是旋轉滑鼠滾輪或滑動滾動框,而不是點擊滾動條。 除非 API 中有區分,或是某個裝置特定的 Windows UI 要求,否則我們就把這兩種互動都稱為平移(panning)。
Windows 10 秋季創作者更新 - 行為變更 預設情況下,主動筆在 Windows 應用程式中現在會滾動或平移(如同觸控、觸控板和被動筆),而不是進行文字選擇。 如果你的應用程式依賴於先前的行為,你可以禁用筆滾動並恢復到之前的行為。 詳情請參閱 ScrollViewer 類別的 API 參考主題。
根據輸入裝置的不同,使用者可透過以下方式在可平移區域內平移:
- 用滑鼠、觸控板或主動式筆/觸控筆點擊滾動箭頭、拖曳滾動滑塊,或在滾動條內點擊。
- 滑鼠的滾輪按鈕用來模擬拖動卷軸框。
- 如果滑鼠有支援,則 XBUTTON1 和 XBUTTON2 是擴充按鈕。
- 鍵盤方向鍵模擬拖曳滾動框,頁面鍵則模擬捲軸內點擊的動作。
- 使用觸控、觸控板或觸控筆,將手指往想要的方向滑動或掃動。
滑動是指手指慢慢朝平移方向移動。 這導致內容的移動速度和距離與手指完全同步,形成一種一對一的對應關係。 滑動手勢是指快速滑動並抬起手指,這會對平移動畫應用以下物理效果:
- 減速(慣性):抬起手指會使平移開始減速。 這就像在滑溜的表面上滑行然後停下來一樣。
- 吸收:在減速過程中,平移慣性會在達到吸附點或內容區域邊界時產生輕微的反彈效應。
搖攝的類型
Windows 支援三種平移:
- 單軸-平移僅支援單向(水平或垂直)。
- Rails——支援全方位平移。 然而,一旦使用者在特定方向跨越距離門檻,平移就會被限制在該軸上。
- 自由形式 - 支援全方位平移。
捲動介面
平移的互動體驗對輸入裝置是獨特的,同時仍提供類似功能。
根據偵測到的輸入裝置,有兩種平移顯示模式:
- 平移觸控指示器。
- 滾動條可用於其他輸入裝置,包括滑鼠、觸控板、鍵盤和觸控筆。
注意 當觸控接觸點位於可平移的區域時,平移指示器才會顯示。 同樣地,只有當滑鼠游標、筆/觸控筆游標或鍵盤焦點在可捲動區域內時,捲軸才會顯示。
平移指示器 平移指示器類似於滾動條中的滾動框。 它們表示顯示內容與可平移總面積的比例,以及顯示內容在可平移區域中的相對位置。
下圖展示了兩個長度不同可平移的區域及其平移指示器。
平移行為吸附點 使用滑動手勢進行平移時,當觸控點被抬起後,會引入慣性行為。 在慣性作用下,內容會持續平移,直到達到某個距離門檻,且使用者無需直接輸入。 使用捕捉點來改變這種慣性行為。
Snap 點會指定應用程式內容中的邏輯性停止點。 從認知上看,捕捉點作為使用者的分頁機制,減少在大面積可平移區域過度滑動或撥動時的疲勞。 透過它們,你可以處理不精確的使用者輸入,並確保視窗中顯示特定內容或關鍵資訊的子集。
吸附點有兩種類型:
- 接近度——在接觸被抬起後,若慣性運動停止在吸附點的距離閾值內,則選擇吸附點。 平移仍可在鄰近的對齊點之間停止。
- 強制性 - 所選的彈跳點是緊接於或接續於接觸被抬起前所跨越的彈跳點(視手勢方向與速度而定)。 平移必須在強制設置的卡點停止。
平移吸附點對於模擬分頁內容或具有可動態重新組合以符合視口或顯示方式的網頁瀏覽器和相簿等應用程式非常有用。
以下圖示展示了當平移到某個點並釋放時,內容會自動平移到合理的位置。
輕掃以平移。
抬起觸控接觸。
可平移區域會在捕捉點停止,而不是在觸控點被抬起的地方停止。
Rails 內容可能比顯示裝置的尺寸和解析度更寬、更高。 因此,二維平移(水平與垂直)通常是必要的。 在這些情況下,導軌強調沿著運動方向(垂直或水平)的平移,從而來提升使用者的體驗。
下圖展示了軌道的概念。
串接嵌入或巢狀內容
當使用者在某個元素中達到縮放或滾動限制,該元素已被巢狀於另一個可縮放或可滾動元素後,你可以指定該父元素是否應該繼續其子元素開始的縮放或捲動操作。 這稱為縮放或滾動連鎖處理。
鏈結用於在包含一個或多個單軸或自由平移區域的單軸內容區域內進行平移操作(當觸控點位於這些子區域之一時)。 當子區域的平移邊界在特定方向被觸及時,則會在同一方向的父區域啟動平移。
當一個可平移區域嵌套在另一個可平移區域中時,必須指定容器與嵌入內容之間有足夠的空間。 在下圖中,一個可平移區域被放置在另一個可平移區域內,兩者的移動方向彼此垂直。 每個區域都有充足空間讓使用者進行平移。
若空間不足,如下圖所示,嵌入的可平移區域可能會干擾容器內的平移,導致一個或多個可平移區域的非預期平移。
此指引對於像是支援在單一照片或地圖中無限制平移,同時支援在相簿中單軸平移(平移至前一張或下一張圖片)或細節區域的照片相簿或地圖應用程式,也十分有用。 在提供與自由平移圖片或地圖對應細節或選項區的應用程式中,我們建議頁面版面從細節與選項區開始,因為圖片或地圖的無限制平移區域可能會干擾平移至細節區。
相關文章
範例
檔案取樣