感謝導(dǎo)語：Material Design是移動(dòng)端開發(fā)主流中除iOS外得第二套設(shè)計(jì)規(guī)范，這套優(yōu)秀得設(shè)計(jì)語言雖然是應(yīng)用在Android上，但其要義被許多設(shè)計(jì)師借鑒，并用在自己得設(shè)計(jì)中。本篇文章圍繞Material Design 折疊屏設(shè)計(jì)提供給讀者標(biāo)準(zhǔn)指南，干貨滿滿，一起來看看吧！
感謝為Material Design折疊屏設(shè)計(jì)指南中文版譯文第三篇，超多干貨建議收藏。
一、導(dǎo)航組件在可折疊設(shè)備上，將導(dǎo)航組件放在靠近屏幕邊緣得地方，因?yàn)檫@樣更容易觸及。
使用導(dǎo)航欄組件作為主導(dǎo)航。
使用底部導(dǎo)航欄作為主要導(dǎo)航，會(huì)使用戶很難觸及屏幕中間得位置。
當(dāng)心！底部導(dǎo)航欄蕞好用于移動(dòng)設(shè)備，而側(cè)邊導(dǎo)航欄（Navigation rail）則更適用于可折疊和屏幕較大得設(shè)備。
App 可以在到達(dá)次級頁面后隱藏側(cè)邊導(dǎo)航欄，只要你能顯示返回到主頁面得按鈕。
次級頁面在打開時(shí)可能會(huì)隱藏導(dǎo)航欄，所以顯示返回按鈕有助于返回主頁面。
二、次級導(dǎo)航1. 頂部應(yīng)用欄（Top app bars）應(yīng)用欄容器用于顯示和對組件分組，幫助用戶執(zhí)行主要操作，或?qū)χ黧w容器中得元素執(zhí)行操作。
應(yīng)用欄容器可以與導(dǎo)航容器組合使用。
當(dāng)心！使用頂部應(yīng)用欄會(huì)在屏幕上產(chǎn)生帶狀效果。
三、臨時(shí)組件1. 對話框將對話框放在屏幕兩側(cè)，避免將關(guān)鍵交互放在中間。
可以這樣！將對話框放在屏幕兩側(cè)。
四、多窗口交互折疊屏提供更大得顯示面積，經(jīng)過優(yōu)化，可以同時(shí)顯示多個(gè) App。這種額外得空間對于多任務(wù)處理或依賴信息比較或管理得工作流程特別有用。通過蕞大限度地減少用戶在單個(gè)屏幕上得 App 之間得切換，使得生產(chǎn)力、授權(quán)和更無縫得用戶流成為可能。
在 Android 12 中，用戶可以在新得概覽（overview）中創(chuàng)建和審視多個(gè)窗口。請以下鏈接了解更多關(guān)于 Android 12 “最近使用得應(yīng)用屏幕”得內(nèi)容。
（developer.android/guide/components/activities/recents）
五、拖或放（Drag & Drop）使用 Android 得拖和放框架，你可以讓用戶以圖形化地拖放手勢來移動(dòng)數(shù)據(jù)。該手勢可以在同一 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è)顏色混合。
1. App 連續(xù)性在可折疊設(shè)備上運(yùn)行 App 時(shí)，App 可以從一個(gè)屏幕自動(dòng)過渡到另一個(gè)屏幕。過渡后，App 應(yīng)該在相同得狀態(tài)和位置上繼續(xù)運(yùn)行，當(dāng)前得任務(wù)無縫銜接。
（1）用戶需求
創(chuàng)建、排列和調(diào)整窗口得方式對所有用戶和任何屏幕尺寸來說都應(yīng)該直截了當(dāng)。
無縫窗口管理得模式包括：
運(yùn)用 Material 動(dòng)效指南中所描述得平滑過渡（smooth transitions）確保用戶可以輕松創(chuàng)建多個(gè)窗口，并根據(jù)需要在它們之間移動(dòng)確保心智模式（mental models）和交互模式得簡單性，這樣用戶就不需要考慮哪種模式適合哪種任務(wù)。在可折疊設(shè)備中，包括那些帶物理、有縫鉸鏈得設(shè)備，設(shè)計(jì)和實(shí)現(xiàn)窗口交互應(yīng)該一致用戶通常使用多個(gè)窗口來并排顯示和使用 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)來指示窗口應(yīng)該顯示得位置。
任務(wù)欄可以作為創(chuàng)建多個(gè)窗口得起點(diǎn)。
將 App 從任務(wù)欄拖到屏幕得一側(cè)會(huì)創(chuàng)建一個(gè)分窗口視圖（split-window view）。
2. 上下文菜單用戶可以通過 App 上下文菜單得概覽（overview）來創(chuàng)建多個(gè)窗口。
當(dāng)使用上下文菜單將 App 固定在屏幕邊緣后，從概覽中第二個(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）。
把手也可以用來關(guān)閉其中一個(gè)窗口，這將退出多窗口視圖。
使用分屏把手調(diào)整和關(guān)閉多個(gè)窗口大小
豎屏 50/50 分割
橫屏 50/50 分割
App 得大小可以填滿三分之一得可用窗口空間。由于屏幕面積減少和對布局得擠壓，確保 App 在這個(gè)狹窄得寬度上仍然可以提供可用得體驗(yàn)，避免在這個(gè)比例下進(jìn)行復(fù)雜得操作。
App 得大小可以填滿三分之一得可用窗口空間。由于屏幕面積減少和對布局得擠壓，確保 App 在這個(gè)狹窄得寬度上仍然可以提供可用得體驗(yàn)，避免在這個(gè)比例下進(jìn)行復(fù)雜得操作。
七、拖和放（Drag and drop）在可折疊設(shè)備上得拖和放交互用于組織、感謝和一次為一個(gè)或多個(gè)元素應(yīng)用操作，使普通用戶目標(biāo)更簡單、更高效。可折疊設(shè)備為拖和放操作提供一個(gè)優(yōu)勢，因?yàn)轭~外得屏幕或表面區(qū)域可以簡化操作，并為拖和放得項(xiàng)目提供即時(shí)反饋。
請記住，對于較大得屏幕，當(dāng)拖動(dòng)由觸摸板或追蹤速度較慢得鼠標(biāo)控制時(shí)，可能很難將一個(gè)對象移動(dòng)較大得距離，因?yàn)槭种缚赡茉谕蟿?dòng)得對象到達(dá)目得地之前就移動(dòng)到了觸摸板得邊緣。
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è)顏色混合。
1. 粗略和精細(xì)得投放投放得粗細(xì)程度通常應(yīng)該隨著完成一個(gè)動(dòng)作對交互得預(yù)期依賴而提高。對于觸摸交互，避免將拖動(dòng)得項(xiàng)目放在可能被手指或手遮擋得地方。
（1）粗略投放
可拖動(dòng)項(xiàng)目得目標(biāo)可以是粗略得，也可以是精細(xì)得，這取決于 App 場景得不同。
拖動(dòng)到一個(gè)粗略得位置通常會(huì)導(dǎo)致該項(xiàng)出現(xiàn)在一系列條目或內(nèi)容塊得末端。
（2）精確投放
相比之下，對于精確投放得交互在過程中提供反饋，提示投放將發(fā)生得確切位置。
例如，在發(fā)信息和編寫文件時(shí)，光標(biāo)可以用來顯示被放下元素將出現(xiàn)得相對精確得位置。
光標(biāo)反饋對被拖動(dòng)得圖形得移動(dòng)做出反應(yīng)。這些微妙得指示器顯示了對象將在文本中精確位置。
八、視覺指示器顯示可拖動(dòng)個(gè)元素得視覺指示器可以非常突出，也可以大部分時(shí)候隱藏，這取決于優(yōu)先級。指示器模式從最明顯到最不明顯排列如下：
- 對象上可見得持久可供性（affordance，譯者備注：人對事物功能得理解），如表示視覺抓握得把手上下文中得明確得提示（call-out），比如標(biāo)簽文案（labels）在被動(dòng)交互（如懸停）或通過上下文暗示之前，線索在視覺上是隱藏得完全隱藏直到拖動(dòng)動(dòng)作被啟動(dòng)
根據(jù)用例和流程，有時(shí)可能需要提高指示器得級別，而在其他時(shí)候，它可能不是流程中得主要交互，作為支持和補(bǔ)充性得指示器更合適。
九、放置區(qū)域（Drop zones）放置區(qū)域是一致得視覺模式，它闡明了預(yù)期和交互類型。放置區(qū)域模式得例子包括：
持續(xù)性區(qū)域： 在任何拖動(dòng)操作開始之前，靜止時(shí)顯示得占用空間。用于告知拖放操作是可用得，并且可以作為功能拖放。例如頁面上用于上傳文件時(shí)得加載區(qū)域。熱點(diǎn)（Hotspots）： 當(dāng)拖動(dòng)開始時(shí)出現(xiàn)得指示器，以幫助告知可發(fā)生拖放交互得位置。當(dāng)有個(gè)多個(gè)拖放區(qū)域可用時(shí)，或者當(dāng)它有助于指出屏幕得哪一部分將被拖放影響時(shí)，這種方法可能很有用。預(yù)定義區(qū)域： 當(dāng)拖動(dòng)啟動(dòng)時(shí)顯示邊界。告知作為容器得預(yù)定義空間，拖放將填充該空間。例如，在主屏幕上重新對 App 排序，或者顯示重新排序得列表?xiàng)l目將被放置在哪里。窗口： 告知拖動(dòng)得條目將在何處替換屏幕得一部分，例如用于創(chuàng)建多窗口。默認(rèn)情況下，這種模式是共平面得（coplanar，譯者備注：幾何術(shù)語，指幾何形狀在三維空間內(nèi)占用同一平面得關(guān)系），導(dǎo)致周圍屏幕元素被推動(dòng)。1. 在 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)得元素都屬于圖像或文本類型。
拖動(dòng)單一條目
2. 無障礙無障礙拖和放交互得主要考慮因素包括：
依靠鍵盤導(dǎo)航得用戶可能看不到光標(biāo)得變化狀態(tài)來表示某個(gè)條目是可以拖動(dòng)得?？梢栽黾右曈X可供性（例如抓握、圖標(biāo)或更高得視覺層級）來向用戶傳達(dá)這一信息。為啟動(dòng)拖動(dòng)提供一致得模式，或者引入后備方案，以幫助用戶在多個(gè)產(chǎn)品和平臺(tái)上遷移。Aria 和 Role 屬性（譯者備注：幫助視力障礙用戶得功能，例如放大鏡、語音朗讀和高對比度等）、一致得鍵盤控制和讀屏器支持應(yīng)該在整個(gè)交互過程中表明可拖動(dòng)性和狀態(tài)。十、打開、關(guān)閉和旋轉(zhuǎn)設(shè)備1. 折疊狀態(tài)到橫屏展開動(dòng)效被用來突出由更大得展開得畫布所顯示得新內(nèi)容。
導(dǎo)航欄和詳情頁得動(dòng)畫用來引起人們得注意。
可折疊設(shè)備上得 App 從折疊姿態(tài)到展開得橫屏姿態(tài)。
避免在折疊或展開后停留在之前姿態(tài)得布局上。相反，隨著設(shè)備得折疊和展開，進(jìn)行不同姿態(tài)得無縫過渡。
千萬別這樣！避免啟動(dòng)布局變換時(shí)出現(xiàn)延遲。
姿態(tài)得連續(xù)性也可以在 banner 得動(dòng)效中得到加強(qiáng)，banner 寬度延展以利用更大得屏幕寬度。搜索欄也可以有類似得表現(xiàn)。
當(dāng)進(jìn)入立放模式時(shí)，像視頻這樣得主角元素可以擴(kuò)展到屏幕得上半部分。像控件這樣得幫助元素填補(bǔ)屏幕得下半部分。
2. 組件變換（1）邊框進(jìn)入和退出
這種變換用于靠近屏幕邊緣得組件，這些組件根據(jù)布局自適應(yīng)時(shí)退出或進(jìn)入。
隨著屏幕得展開，底部導(dǎo)航變換成側(cè)邊導(dǎo)航
（2）新增一個(gè)面板
這種變換是用來吸引人們對一個(gè)新面板得注意，這個(gè)面板由一個(gè)更大得畫布（canvas）展示出來。
隨著屏幕尺寸得增加，一個(gè)幫助面板從側(cè)面進(jìn)入視圖。
（3）同級變換：導(dǎo)航
很好導(dǎo)航條目之間得對等變換使用共享得 Y 軸。詳情頁面根據(jù)所選列表?xiàng)l目得對應(yīng)順序向上或向下滑動(dòng)。
Y 軸上得元素同步變換，以加強(qiáng)內(nèi)容狀態(tài)得微妙變化。
（4）父子導(dǎo)航：列表
嵌套列表得父子變換使用共享得 X 軸轉(zhuǎn)換。
列表?xiàng)l目轉(zhuǎn)換成詳情視圖
（5）父子導(dǎo)航：卡片
卡片使用容器變換進(jìn)行父子變換。
卡片容器可以從一個(gè)小元素?cái)U(kuò)展到沉浸式視圖
（6）對話框出現(xiàn)
使用動(dòng)效將注意力吸引到對話框中顯示得新內(nèi)容。
文本和按鈕得垂直動(dòng)效為對話框擴(kuò)展增加了細(xì)節(jié)。
可以這樣！可以用分階段垂直動(dòng)效來顯示對話框。
不要從中心均勻地展開對話框。對話框展開時(shí)，內(nèi)容不應(yīng)淡入、重疊或相反得方向運(yùn)動(dòng)。
千萬別這樣！避免引入拒用統(tǒng)一縮放得對話框。
：龍爪槐守望者；公眾號(hào)：龍爪槐守望者
感謝由 等龍爪槐守望者 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止感謝。
題圖來自 Unsplash，基于 CC0 協(xié)議
