移動瀏覽的指導方針

Applies to Windows and Windows Phone

移動瀏覽或捲動可讓使用者在單一檢視內進行瀏覽,以顯示無法容納在檢視區中的檢視內容。檢視範例包括電腦的資料夾結構、文件庫或相簿。

如需了解此功能的運作情形,請參閱應用程式功能,從開始到完成系列:  使用者互動:觸控輸入...等等

可行與禁止事項

移動瀏覽指標和捲軸

  • 確保可以移動瀏覽/捲動,才將內容載入到應用程式中。

  • 顯示移動瀏覽指標和捲軸來提示位置及大小。 如果您提供自訂瀏覽功能,請隱藏它們。

    附註  與標準捲軸不同,移動瀏覽指標僅用來提供資訊。 這些指標不對輸入裝置顯示,而且完全不能以任何方式操作。

單軸移動瀏覽 (一維溢位)

  • 對延長超過一個檢視區界限 (垂直或水平) 的內容區域,使用單軸移動瀏覽。

    • 若為項目的一維清單,請使用垂直移動瀏覽。
    • 若為格線中的項目,請使用水平移動瀏覽。
  • 如果必須讓使用者在貼齊點之間移動瀏覽並停止時,請不要利用單軸移動瀏覽來使用強制貼齊點。 強制貼齊點會保證使用者停止在貼齊點上。請改用鄰近性貼齊點。

任意方向移動瀏覽 (二維溢位)

  • 對延長超過兩個檢視區界限 (垂直和水平) 的內容區域,使用雙軸移動瀏覽。

    • 若是使用者可能會往多個方向移動的無結構內容,請覆寫預設的柵欄行為並使用任意方向移動瀏覽。
  • 任意方向移動瀏覽通常適用於影像或地圖內。

分頁檢視

  • 當內容是由離散的元素所組成或您想要顯示整個元素時,請使用強制貼齊點。這可能包含一本書或雜誌的頁面、一個項目資料欄或個別的影像。

    • 貼齊點應被放置在每個邏輯界限上。
    • 每個元素都應該調整大小或縮放以符合檢視範圍。

邏輯和關鍵點

  • 如果內容中有使用者可能停住的關鍵點或邏輯位置,請使用鄰近性貼齊點。例如,區段標頭。

  • 如果定義了最大和最小大小限制或界限,可以在使用者達到或超出這些界限時,使用視覺化回饋作為顯示。

鏈結內嵌或巢狀的內容

  • 對於文字與格線內容,請使用單軸移動瀏覽 (通常為水平) 與欄配置。在這些情況下,內容通常會在欄與欄之間自然換行和流動,以及讓使用者經驗保持一致,並且可以跨 Windows 市集應用程式探索。

  • 不要使用內嵌的可移動瀏覽區域來顯示文字或項目清單。因為只有在區域內偵測到輸入接觸點時,才會顯示移動瀏覽指標與捲軸,所以這並非直覺式或可探索的使用者經驗。

  • 如果兩個可移動瀏覽區域的移動瀏覽方向相同,請勿將兩者鏈結,或將其中一個區域置於另一個區域內 (如下圖所示)。當達到子區域的界限時,這可能會導致在父區域發生非預期的移動瀏覽。請考慮讓移動瀏覽軸成垂直。

    示範與其容器朝同方向捲動之內嵌可移動瀏覽區域的影像。

其他用法指導方針

利用觸控進行移動瀏覽 (搭配單指或多指使用撥動或滑動手勢) 就像是使用滑鼠捲動。移動瀏覽互動更像是旋轉滑鼠滾輪或滑動捲動方塊,而不是按一下捲軸。除非在 API 中進行區別或某些裝置特定 Windows UI 的要求,我們都將這兩種互動稱為移動瀏覽。

根據輸入裝置,使用者會透過下列其中一種裝置,在可移動瀏覽的區域內移動瀏覽:

  • 使用滑鼠、觸控板或主動式畫筆/手寫筆按一下捲動箭號、拖曳捲動方塊,或在捲軸內按一下。
  • 使用滑鼠的滾輪按鈕來模擬拖曳捲動方塊的動作。
  • 延伸的按鈕 (XBUTTON1 和 XBUTTON2),如果滑鼠支援。
  • 使用鍵盤方向鍵來模擬拖曳捲動方塊的動作,或頁面鍵來模擬在捲軸內按一下的動作。
  • 使用觸控、觸控板或被動式畫筆/手寫筆往想要的方向滑動,或將手指往想要的方向撥動。

滑動需要將手指慢慢朝移動瀏覽方向移動。這會產生一對一關係,內容會依手指移動的速度和距離移動瀏覽。撥動 (需要快速滑動並提起手指) 會將下列物理作用套用到移動瀏覽動畫:

  • 減速 (慣性):提起手指會讓移動瀏覽開始減速。這類似於在光滑的表面上滑動到停止的現象。
  • 吸力:減速時如果到達貼齊點或內容區域界限,移動瀏覽動力會產生輕微的反彈效果。

移動瀏覽的類型

Windows 8 支援三種移動瀏覽類型:

  • 單軸 - 僅支援一個方向的移動瀏覽 (水平或垂直)。
  • 柵欄 - 支援所有方向的移動瀏覽。不過,一旦使用者超出某個特定方向的距離閾值,移動瀏覽就會受限於該軸。
  • 任意方向 - 支援所有方向的移動瀏覽。

移動瀏覽 UI

移動瀏覽的互動經驗對輸入裝置都是唯一的,同時還要提供類似的功能。

可移動瀏覽的區域

可移動瀏覽區域行為是在設計階段透過階層式樣式表 (CSS) 顯示給使用 JavaScript 的 Windows 市集應用程式的開發人員。

根據偵測到的輸入裝置,提供兩種移動瀏覽顯示模式:

  • 觸控時為移動瀏覽指標。
  • 使用其他輸入裝置 (包括滑鼠、觸控板、鍵盤以及手寫筆) 時為捲軸。

附註  只有當觸控接觸是在可移動瀏覽的區域內時,才會顯示移動瀏覽指標。同理,只有當滑鼠游標、畫筆/手寫筆游標或鍵盤焦點是在可捲動的區域內時,才會顯示捲軸。

移動瀏覽指標

移動瀏覽指標類似於捲軸中的捲動方塊。它們指示了顯示內容佔可移動瀏覽總區域的比例,以及顯示內容在可移動瀏覽區域中的相對位置。

下圖顯示兩個長度不同的可移動瀏覽區域及其移動瀏覽指標。

顯示兩個長度不同的可移動瀏覽區域及其移動瀏覽指標的影像。

移動瀏覽行為
貼齊點

撥動手勢的移動瀏覽,在提起手指時,將慣性行為引入互動。利用慣性作用,內容會繼續移動瀏覽,直到達到某個距離閾值,而不用使用者直接輸入。使用貼齊點修改這種慣性行為。

貼齊點會指定應用程式內容的邏輯停止點。貼齊點的作用就像是供使用者使用的分頁機制,將在大型可移動瀏覽區域的過度滑動或撥動減至最低程度。使用它們即可處理不精確的使用者輸入,確保檢視區中可以顯示特定內容子集或關鍵資訊。

貼齊點有兩種類型:

  • 鄰近性 - 提起手指後,如果慣性作用讓貼齊點停在距離閾值範圍內,就會選取該貼齊點。移動瀏覽仍然可以在鄰近性貼齊點之間停止。
  • 強制 - 選取的貼齊點為提起手指之前,在最後一個越過之貼齊點之前或之後的那個貼齊點 (取決於手勢的方向和速度)。移動瀏覽必須在強制貼齊點上停止。

對於一些模擬分頁內容或具有項目邏輯群組而可以被動態重新分組以納入檢視區或顯示範圍中的應用程式 (例如網頁瀏覽器和相簿) 來說,移動瀏覽貼齊點相當有用。

下圖顯示移動瀏覽至特定點並放開時,如何造成內容自動移動瀏覽至某個邏輯位置。

顯示可移動瀏覽區域的影像。顯示可移動瀏覽區域被移動瀏覽至左側的影像。顯示已在某個邏輯貼齊點停止移動瀏覽之可移動瀏覽區域的影像。
撥動以移動瀏覽。提起手指。可移動瀏覽區域會在貼齊點停止,而不是提起手指的位置。

 

柵欄

內容可以寬於和高於顯示裝置的維度及解析度。基於這個理由,二維移動瀏覽 (水平和垂直) 通常是必需的。柵欄可改進這些案例中的使用者經驗,透過沿著動作方向的軸線 (垂直或水平) 強調移動瀏覽來完成。

下圖示範柵欄的概念。

畫面中有柵欄限制移動瀏覽範圍的圖表

鏈結內嵌或巢狀的內容

使用者達到元素 (巢狀於其他可縮放或可捲動元素內) 的縮放或捲動限制後,您可以指定父項元素是否應繼續執行由其子元素開始的縮放或捲動作業。這稱為縮放或捲動「鏈結」。

對於在包含一或多個單軸或任意方向移動瀏覽區域的單軸內容區域內所進行的移動瀏覽 (當觸控接觸是發生在這些子區域的其中一個之內),可以使用鏈結。當達到子區域某個特定方向的移動瀏覽界限時,便會啟動父區域同一方向的移動瀏覽。

當一個可移動瀏覽區域巢狀於另一個可移動瀏覽區域內時,在容器與內嵌的內容之間指定足夠的空間便相當重要。在下圖中,一個可移動瀏覽區域被置於另一個可移動瀏覽區域內,各自成垂直方向。每個區域中都有充分的空間可供使用者移動瀏覽。

示範內嵌的可移動瀏覽區域的影像。

如果空間不足 (如下圖所示),內嵌的可移動瀏覽區域便可能干擾容器中的移動瀏覽,並導致在一或多個可移動瀏覽區域中發生非預期的移動瀏覽。

示範內嵌的可移動瀏覽區域邊框間距不足的影像。

對於在個別影像或地圖內支援無限制移動瀏覽的應用程式 (如相簿或地圖應用程式),同時在相簿內 (上一個或下一個影像) 或詳細資料區域內支援單軸移動瀏覽,這個指導方針也很實用。在提供對應任意方向移動瀏覽影像或地圖之詳細資料或選項區域的應用程式中,我們建議頁面配置先從詳細資料和選項區域開始,因為影像或地圖的無限制移動瀏覽區域可能會干擾移動瀏覽到詳細資料區域。

相關主題

適用於設計者
一般使用者互動的指導方針
回應滑鼠互動
回應鍵盤互動
觸控互動設計
適用於開發人員 (HTML)
快速入門:指標
快速入門:DOM 手勢與操作
快速入門:靜態手勢
快速入門:操作手勢
實作鍵盤協助工具
適用於開發人員 (XAML)
有效載入、儲存和顯示大型資料集
以遞增方式更新 GridView 與 ListView 項目
改善包含 GridView 與 ListView 控制項之應用程式的啟動時間
快速入門:觸控輸入
快速入門:處理指標輸入
實作鍵盤協助工具
適用於開發人員 (使用 DirectX 搭配 C++ 的 Windows 執行階段應用程式)
回應觸控輸入 (DirectX 和 C++)
範例 (DOM)
HTML 捲動、移動瀏覽和縮放範例
輸入:可具現化手勢範例
範例 (Windows 市集應用程式 API)
輸入:操作和手勢 (JavaScript) 範例
輸入:Windows 8 手勢範例
輸入:XAML 使用者輸入事件範例
XAML 捲動、移動瀏覽和縮放範例
範例 (DirectX)
DirectX 觸控輸入範例
輸入:操作和手勢 (C++) 範例

 

 

顯示:
© 2014 Microsoft