編輯導(dǎo)語(yǔ)：你是否想要了解如何去設(shè)計(jì)多窗口交互呢？本篇文章中，作者翻譯了Material Design 的折疊屏設(shè)計(jì)指南，通過(guò)講解概述、布局、組件、多窗口交互、動(dòng)效這五個(gè)模塊帶領(lǐng)大家去學(xué)習(xí)設(shè)計(jì)，一起來(lái)看看吧！

本文譯自 Material Design 3 官方折疊屏設(shè)計(jì)指南：https://m3.material.io/foundations/adaptive-design/foldables

全文分為：概述、布局、組件、多窗口交互、動(dòng)效五個(gè)模塊，本篇翻譯多窗口交互。

一、多窗口交互

折疊屏提供更大的顯示面積，經(jīng)過(guò)優(yōu)化，可以同時(shí)顯示多個(gè) App。這種額外的空間對(duì)于多任務(wù)處理或依賴信息比較或管理的工作流程特別有用。通過(guò)最大限度地減少用戶在單個(gè)屏幕上的 App 之間的切換，使得生產(chǎn)力、授權(quán)和更無(wú)縫的用戶流成為可能。

在 Android 12 中，用戶可以在新的概覽（overview）中創(chuàng)建和審視多個(gè)窗口。請(qǐng)點(diǎn)擊以下鏈接了解更多關(guān)于 Android 12 “最近使用的應(yīng)用屏幕”的內(nèi)容。

（https://developer.android.com/guide/components/activities/recents）

二、拖或放（Drag & Drop）

使用 Android 的拖和放框架，你可以讓用戶以圖形化地拖放手勢(shì)來(lái)移動(dòng)數(shù)據(jù)。該手勢(shì)可以在同一 App 中移動(dòng)到一個(gè)視圖到另一個(gè)視圖，或者在啟用多窗口模式在一個(gè) App 和另一個(gè) App 之間移動(dòng)。

盡管該框架主要是為數(shù)據(jù)移動(dòng)而設(shè)計(jì)，但你也可以將其用于其他 UI 操作，例如，你可以創(chuàng)建 App，當(dāng)用戶將一個(gè)顏色的圖標(biāo)拖到另一個(gè)圖標(biāo)上時(shí)，將兩個(gè)顏色混合。

三、App 連續(xù)性

在可折疊設(shè)備上運(yùn)行 App 時(shí)，App 可以從一個(gè)屏幕自動(dòng)過(guò)渡到另一個(gè)屏幕。過(guò)渡后，App 應(yīng)該在相同的狀態(tài)和位置上繼續(xù)運(yùn)行，當(dāng)前的任務(wù)無(wú)縫銜接。

1. 用戶需求

創(chuàng)建、排列和調(diào)整窗口的方式對(duì)所有用戶和任何屏幕尺寸來(lái)說(shuō)都應(yīng)該直截了當(dāng)。

無(wú)縫窗口管理的模式包括：

• 運(yùn)用 Material 動(dòng)效指南中所描述的平滑過(guò)渡（smooth transitions）
• 確保用戶可以輕松創(chuàng)建多個(gè)窗口，并根據(jù)需要在它們之間移動(dòng)
• 確保心智模式（mental models）和交互模式的簡(jiǎn)單性，這樣用戶就不需要考慮哪種模式適合哪種任務(wù)

在可折疊設(shè)備中，包括那些帶物理、有縫鉸鏈的設(shè)備，設(shè)計(jì)和實(shí)現(xiàn)窗口交互應(yīng)該一致。

用戶通常使用多個(gè)窗口來(lái)并排顯示和使用 App。例如，收件箱 和 照片 App 并排。

四、窗口創(chuàng)建和行為

Android 為用戶提供了多種創(chuàng)建多窗口視圖的模式。

1. 任務(wù)欄（Taskbar）

在 Android 12 中，任務(wù)欄為釘住和建議的 App 提供了一個(gè)啟動(dòng)點(diǎn)，可以很輕松把 App 變成獨(dú)立的窗口。要?jiǎng)?chuàng)建一個(gè)新窗口，用戶需要從任務(wù)欄中選擇并拖動(dòng) App，然后移動(dòng) App 圖標(biāo)來(lái)指示窗口應(yīng)該顯示的位置。

任務(wù)欄可以作為創(chuàng)建多個(gè)窗口的起點(diǎn)。

將 App 從任務(wù)欄拖到屏幕的一側(cè)會(huì)創(chuàng)建一個(gè)分窗口視圖（split-window view）。

2. 上下文菜單

用戶可以通過(guò) App 上下文菜單的概覽（overview）來(lái)創(chuàng)建多個(gè)窗口。

當(dāng)使用上下文菜單將 App 固定在屏幕邊緣后，從概覽中點(diǎn)擊第二個(gè) App 將觸發(fā)分屏。

3. 調(diào)整窗口大小

默認(rèn)情況下，多窗口被創(chuàng)建為 50/50 并排分割窗口。多窗口是一種臨時(shí)狀態(tài)。當(dāng)把手（handle）拖動(dòng)到屏幕的邊緣時(shí)，被縮小的窗口將關(guān)閉，退出多窗口視圖。

窗口可以進(jìn)一步調(diào)整為 1:3 或 2:3 的比例。這些比例提供了主窗口和副窗口相互轉(zhuǎn)換，提供了更大的靈活性，并允許根據(jù)需要將重點(diǎn)放在其中一個(gè) App 上。

屏幕把手可以被拖動(dòng)和釋放以創(chuàng)建所需的窗口比例。把手會(huì)自動(dòng)調(diào)整到最近的捕捉點(diǎn)（Snap point）。

把手也可以用來(lái)關(guān)閉其中一個(gè)窗口，這將退出多窗口視圖。

使用分屏把手調(diào)整和關(guān)閉多個(gè)窗口大小

豎屏 50/50 分割

橫屏 50/50 分割

App 的大小可以填滿三分之一的可用窗口空間。由于屏幕面積減少和對(duì)布局的擠壓，確保 App 在這個(gè)狹窄的寬度上仍然可以提供可用的體驗(yàn)，避免在這個(gè)比例下進(jìn)行復(fù)雜的操作。

App 的大小可以填滿三分之一的可用窗口空間。由于屏幕面積減少和對(duì)布局的擠壓，確保 App 在這個(gè)狹窄的寬度上仍然可以提供可用的體驗(yàn)，避免在這個(gè)比例下進(jìn)行復(fù)雜的操作。

五、拖和放（Drag and drop）

在可折疊設(shè)備上的拖和放交互用于組織、編輯和一次為一個(gè)或多個(gè)元素應(yīng)用操作，使普通用戶目標(biāo)更簡(jiǎn)單、更高效。可折疊設(shè)備為拖和放操作提供一個(gè)優(yōu)勢(shì)，因?yàn)轭~外的屏幕或表面區(qū)域可以簡(jiǎn)化操作，并為拖和放的項(xiàng)目提供即時(shí)反饋。

請(qǐng)記住，對(duì)于較大的屏幕，當(dāng)拖動(dòng)由觸摸板或追蹤速度較慢的鼠標(biāo)控制時(shí)，可能很難將一個(gè)對(duì)象移動(dòng)較大的距離，因?yàn)槭种缚赡茉谕蟿?dòng)的對(duì)象到達(dá)目的地之前就移動(dòng)到了觸摸板的邊緣。

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

盡管該框架主要是為數(shù)據(jù)移動(dòng)而設(shè)計(jì)，但你也可以將其用于其他 UI 操作，例如，你可以創(chuàng)建 App，當(dāng)用戶將一個(gè)顏色的圖標(biāo)拖到另一個(gè)圖標(biāo)上時(shí)，將兩個(gè)顏色混合。

六、粗略和精細(xì)的投放

投放的粗細(xì)程度通常應(yīng)該隨著完成一個(gè)動(dòng)作對(duì)交互的預(yù)期依賴而提高。對(duì)于觸摸交互，避免將拖動(dòng)的項(xiàng)目放在可能被手指或手遮擋的地方。

1. 粗略投放

可拖動(dòng)項(xiàng)目的目標(biāo)可以是粗略的，也可以是精細(xì)的，這取決于 App 場(chǎng)景的不同。

拖動(dòng)到一個(gè)粗略的位置通常會(huì)導(dǎo)致該項(xiàng)出現(xiàn)在一系列條目或內(nèi)容塊的末端。

2. 精確投放

相比之下，對(duì)于精確投放的交互在過(guò)程中提供反饋，提示投放將發(fā)生的確切位置。

例如，在發(fā)信息和編寫文件時(shí)，光標(biāo)可以用來(lái)顯示被放下元素將出現(xiàn)的相對(duì)精確的位置。

光標(biāo)反饋對(duì)被拖動(dòng)的圖形的移動(dòng)做出反應(yīng)。這些微妙的指示器顯示了對(duì)象將在文本中精確位置。

七、視覺(jué)指示器

顯示可拖動(dòng)個(gè)元素的視覺(jué)指示器可以非常突出，也可以大部分時(shí)候隱藏，這取決于優(yōu)先級(jí)。指示器模式從最明顯到最不明顯排列如下：

1. 對(duì)象上可見(jiàn)的持久可供性（affordance，譯者備注：人對(duì)事物功能的理解），如表示視覺(jué)抓握的把手
2. 上下文中的明確的提示（call-out），比如標(biāo)簽文案（labels）
3. 在被動(dòng)交互（如懸停）或通過(guò)上下文暗示之前，線索在視覺(jué)上是隱藏的
4. 完全隱藏直到拖動(dòng)動(dòng)作被啟動(dòng)

根據(jù)用例和流程，有時(shí)可能需要提高指示器的級(jí)別，而在其他時(shí)候，它可能不是流程中的主要交互，作為支持和補(bǔ)充性的指示器更合適。

八、放置區(qū)域（Drop zones）

放置區(qū)域是一致的視覺(jué)模式，它闡明了預(yù)期和交互類型。放置區(qū)域模式的例子包括：

（1）持續(xù)性區(qū)域

在任何拖動(dòng)操作開(kāi)始之前，靜止時(shí)顯示的占用空間。用于告知拖放操作是可用的，并且可以作為功能拖放。例如頁(yè)面上用于上傳文件時(shí)的加載區(qū)域。

（2）熱點(diǎn)（Hotspots）

當(dāng)拖動(dòng)開(kāi)始時(shí)出現(xiàn)的指示器，以幫助告知可發(fā)生拖放交互的位置。當(dāng)有個(gè)多個(gè)拖放區(qū)域可用時(shí)，或者當(dāng)它有助于指出屏幕的哪一部分將被拖放影響時(shí)，這種方法可能很有用。

（3）預(yù)定義區(qū)域

當(dāng)拖動(dòng)啟動(dòng)時(shí)顯示邊界。告知作為容器的預(yù)定義空間，拖放將填充該空間。例如，在主屏幕上重新對(duì) App 排序，或者顯示重新排序的列表?xiàng)l目將被放置在哪里。

（4）窗口

告知拖動(dòng)的條目將在何處替換屏幕的一部分，例如用于創(chuàng)建多窗口。默認(rèn)情況下，這種模式是共平面的（coplanar，譯者備注：幾何術(shù)語(yǔ)，指幾何形狀在三維空間內(nèi)占用同一平面的關(guān)系），導(dǎo)致周圍屏幕元素被推動(dòng)。

九、在 App 之間拖動(dòng)

當(dāng)一個(gè)條目從一個(gè) App 移動(dòng)到另一個(gè) App 時(shí)，交互會(huì)受到拖動(dòng)項(xiàng)目的 MIME 類型（Mutipurpose Internet Mail Extensions Type，譯者備注：網(wǎng)絡(luò)中的媒體類型，比如圖片、視頻、文本等）和放置區(qū)域的影響。大多數(shù)被拖動(dòng)的元素都屬于圖像或文本類型。

1. 拖動(dòng)單一條目

十、無(wú)障礙

無(wú)障礙拖和放交互的主要考慮因素包括：

依靠鍵盤導(dǎo)航的用戶可能看不到光標(biāo)的變化狀態(tài)來(lái)表示某個(gè)條目是可以拖動(dòng)的?？梢栽黾右曈X(jué)可供性（例如抓握、圖標(biāo)或更高的視覺(jué)層級(jí)）來(lái)向用戶傳達(dá)這一信息。

為啟動(dòng)拖動(dòng)提供一致的模式，或者引入后備方案，以幫助用戶在多個(gè)產(chǎn)品和平臺(tái)上遷移。

Aria 和 Role 屬性（譯者備注：幫助視力障礙用戶的功能，例如放大鏡、語(yǔ)音朗讀和高對(duì)比度等）、一致的鍵盤控制和讀屏器支持應(yīng)該在整個(gè)交互過(guò)程中表明可拖動(dòng)性和狀態(tài)。

原文鏈接：https://m3.material.io/foundations/adaptive-design/foldables

作者：龍爪槐守望者；公眾號(hào)：龍爪槐守望者

本文由 @龍爪槐守望者 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議