Material Design 摺疊屏設計指南（4）：多視窗互動

本文譯自 Material Design 3 官方摺疊屏設計指南： https://m3.material.io/foundations/adaptive-design/foldables

全文分為：概述、佈局、元件、多視窗互動、動效五個模組，本篇翻譯多視窗互動。

第一篇概述譯文點此檢視

第二篇佈局譯文點此檢視

第三篇元件譯文點此檢視

多視窗互動

摺疊屏提供更大的顯示面積，經過優化，可以同時顯示多個 App。這種額外的空間對於多工處理或依賴資訊比較或管理的工作流程特別有用。通過最大限度地減少使用者在單個螢幕上的 App 之間的切換，使得生產力、授權和更無縫的使用者流成為可能。

在 Android 12 中，使用者可以在新的概覽（overview）中建立和審視多個視窗。請點選以下連結瞭解更多關於 Android 12 “最近使用的應用螢幕”的內容。（ https://developer.android.com/guide/components/activities/recents ）

拖或放（Drag & Drop）

使用 Android 的拖和放框架，你可以讓使用者以圖形化地拖放手勢來移動資料。該手勢可以在同一 App 中移動到一個檢視到另一個檢視，或者在啟用多視窗模式在一個 App 和另一個 App 之間移動。

儘管該框架主要是為資料移動而設計，但你也可以將其用於其他 UI 操作，例如，你可以建立 App，當用戶將一個顏色的圖示拖到另一個圖示上時，將兩個顏色混合。

App 連續性

在可摺疊裝置上執行 App 時，App 可以從一個螢幕自動過渡到另一個螢幕。過渡後，App 應該在相同的狀態和位置上繼續執行，當前的任務無縫銜接。

使用者需求

建立、排列和調整視窗的方式對所有使用者和任何螢幕尺寸來說都應該直截了當。

無縫視窗管理的模式包括：

• 運用 Material 動效指南中所描述的平滑過渡（smooth transitions）
• 確保使用者可以輕鬆建立多個視窗，並根據需要在它們之間移動
• 確保心智模式（mental models）和互動模式的簡單性，這樣使用者就不需要考慮哪種模式適合哪種任務。
• 在可摺疊裝置中，包括那些帶物理、有縫鉸鏈的裝置，設計和實現視窗互動應該一致

視窗建立和行為

Android 為使用者提供了多種建立多視窗檢視的模式。

工作列（Taskbar）

在 Android 12 中，工作列為釘住和建議的 App 提供了一個啟動點，可以很輕鬆把 App 變成獨立的視窗。要建立一個新視窗，使用者需要從工作列中選擇並拖動 App，然後移動 App 圖示來指示視窗應該顯示的位置。

上下文選單

使用者可以通過 App 上下文選單的概覽（overview）來建立多個視窗。

調整視窗大小

預設情況下，多視窗被建立為 50/50 並排分割視窗。多視窗是一種臨時狀態。當把手（handle）拖動到螢幕的邊緣時，被縮小的視窗將關閉，退出多視窗檢視。

視窗可以進一步調整為 1:3 或 2:3 的比例。這些比例提供了主視窗和副視窗相互轉換，提供了更大的靈活性，並允許根據需要將重點放在其中一個 App 上。

螢幕把手可以被拖動和釋放以建立所需的視窗比例。把手會自動調整到最近的捕捉點（Snap point）。

把手也可以用來關閉其中一個視窗，這將退出多視窗檢視。

App 的大小可以填滿三分之一的可用視窗空間。由於螢幕面積減少和對佈局的擠壓，確保 App 在這個狹窄的寬度上仍然可以提供可用的體驗，避免在這個比例下進行復雜的操作。

拖和放（Drag and drop）

在可摺疊裝置上的拖和放互動用於組織、編輯和一次為一個或多個元素應用操作，使普通使用者目標更簡單、更高效。可摺疊裝置為拖和放操作提供一個優勢，因為額外的螢幕或表面區域可以簡化操作，併為拖和放的專案提供即時反饋。

請記住，對於較大的螢幕，當拖動由觸控板或追蹤速度較慢的滑鼠控制時，可能很難將一個物件移動較大的距離，因為手指可能在拖動的物件到達目的地之前就移動到了觸控板的邊緣。

Android 拖和放框架（Android drag and drop framework）

儘管該框架主要是為資料移動而設計，但你也可以將其用於其他 UI 操作，例如，你可以建立 App，當用戶將一個顏色的圖示拖到另一個圖示上時，將兩個顏色混合。

粗略和精細的投放

投放的粗細程度通常應該隨著完成一個動作對互動的預期依賴而提高。對於觸控互動，避免將拖動的專案放在可能被手指或手遮擋的地方。

粗略投放

可拖動專案的目標可以是粗略的，也可以是精細的，這取決於 App 場景的不同。

拖動到一個粗略的位置通常會導致該項出現在一系列條目或內容塊的末端。

精確投放

相比之下，對於精確投放的互動在過程中提供反饋，提示投放將發生的確切位置。

例如，在發信息和編寫檔案時，游標可以用來顯示被放下元素將出現的相對精確的位置。

游標反饋對被拖動的圖形的移動做出反應。這些微妙的指示器顯示了物件將在文字中精確位置。

視覺指示器

顯示可拖動個元素的視覺指示器可以非常突出，也可以大部分時候隱藏，這取決於優先順序。指示器模式從最明顯到最不明顯排列如下：

1. 物件上可見的持久可供性（affordance，譯者備註：人對事物功能的理解），如表示視覺抓握的把手
2. 上下文中的明確的提示（call-out），比如標籤文案（labels）
3. 在被動互動（如懸停）或通過上下文暗示之前，線索在視覺上是隱藏的
4. 完全隱藏直到拖動動作被啟動

根據用例和流程，有時可能需要提高指示器的級別，而在其他時候，它可能不是流程中的主要互動，作為支援和補充性的指示器更合適。

放置區域（Drop zones）

放置區域是一致的視覺模式，它闡明瞭預期和互動型別。放置區域模式的例子包括：

• 持續性區域： 在任何拖動操作開始之前，靜止時顯示的佔用空間。用於告知拖放操作是可用的，並且可以作為功能拖放。例如頁面上用於上傳檔案時的載入區域。
• 熱點（Hotspots）： 當拖動開始時出現的指示器，以幫助告知可發生拖放互動的位置。當有個多個拖放區域可用時，或者當它有助於指出螢幕的哪一部分將被拖放影響時，這種方法可能很有用。
• 預定義區域： 當拖動啟動時顯示邊界。告知作為容器的預定義空間，拖放將填充該空間。例如，在主螢幕上重新對 App 排序，或者顯示重新排序的列表條目將被放置在哪裡。
• 視窗： 告知拖動的條目將在何處替換螢幕的一部分，例如用於建立多視窗。預設情況下，這種模式是共平面的（coplanar，譯者備註：幾何術語，指幾何形狀在三維空間內佔用同一平面的關係），導致周圍螢幕元素被推動。

在 App 之間拖動

當一個條目從一個 App 移動到另一個 App 時，互動會受到拖動專案的 MIME 型別（Mutipurpose Internet Mail Extensions Type，譯者備註：網路中的媒體型別，比如圖片、視訊、文字等）和放置區域的影響。大多數被拖動的元素都屬於影象或文字型別。

拖動單一條目

單一條目 MIME 型別	拖動型外觀
圖片	靜態圖片縮圖
視訊	靜態圖片縮圖
文字	文字塊
App	App 圖示
模態	檔案縮圖（無預覽）
字型	檔案縮圖（無預覽）

無障礙

無障礙拖和放互動的主要考慮因素包括：

• 依靠鍵盤導航的使用者可能看不到游標的變化狀態來表示某個條目是可以拖動的。可以增加視覺可供性（例如抓握、圖示或更高的視覺層級）來向用戶傳達這一資訊。
• 為啟動拖動提供一致的模式，或者引入後備方案，以幫助使用者在多個產品和平臺上遷移。
• Aria 和 Role 屬性（譯者備註：幫助視力障礙使用者的功能，例如放大鏡、語音朗讀和高對比度等）、一致的鍵盤控制和讀屏器支援應該在整個互動過程中表明可拖動性和狀態。