編輯導(dǎo)語(yǔ)：設(shè)計(jì)折疊屏手機(jī)等移動(dòng)設(shè)備時(shí)，參考Material Design 中的通用指南也許會(huì)有很大幫助。這篇文章介紹了折疊屏在打開、關(guān)閉和旋轉(zhuǎn)時(shí)畫面的不同呈現(xiàn)形式，以及如何用動(dòng)效進(jìn)行流暢的過(guò)渡。推薦對(duì)折疊屏感興趣的童鞋閱讀。

一、打開、關(guān)閉和旋轉(zhuǎn)設(shè)備

1. 折疊狀態(tài)到橫屏展開

動(dòng)效被用來(lái)突出由更大的、展開的畫布所顯示的新內(nèi)容。

導(dǎo)航欄和詳情頁(yè)的動(dòng)畫用來(lái)引起人們的注意。

可折疊設(shè)備上的郵件 App 從折疊姿態(tài)到展開的橫屏姿態(tài)

避免了在折疊或展開后停留在之前姿態(tài)的布局上。相反，隨著設(shè)備的折疊和展開，進(jìn)行了不同姿態(tài)的無(wú)縫過(guò)渡。

千萬(wàn)別這樣！避免啟動(dòng)布局變換時(shí)出現(xiàn)延遲

姿態(tài)的連續(xù)性也可以在 banner 的動(dòng)效中得到加強(qiáng)，banner 寬度延展以利用更大的屏幕寬度。搜索欄也可以有類似的表現(xiàn)。

當(dāng)進(jìn)入立放模式時(shí)，像視頻這樣的主角元素可以擴(kuò)展到屏幕的上半部分，像媒體控件這樣的輔助元素填補(bǔ)屏幕的下半部分。

二、組件變換

1. 邊框進(jìn)入和退出

這種變換用于靠近屏幕邊緣的組件，這些組件根據(jù)布局自適應(yīng)時(shí)情況退出或進(jìn)入。

• 底部導(dǎo)航
• 側(cè)邊導(dǎo)航
• 應(yīng)用欄
• 面板（Sheet）
• 媒體控制

隨著屏幕的展開，底部導(dǎo)航變換成側(cè)邊導(dǎo)航

2. 新增一個(gè)面板

面板會(huì)由一個(gè)更大的畫布（canvas）展示出來(lái)，這種變換是用來(lái)吸引人們對(duì)一個(gè)新面板的注意的。

隨著屏幕尺寸的增加，一個(gè)輔助面板從側(cè)面進(jìn)入視圖

3. 同級(jí)變換：導(dǎo)航

頂級(jí)導(dǎo)航條目之間的對(duì)等變換使用共享的 Y 軸。詳情頁(yè)面根據(jù)所選列表?xiàng)l目的對(duì)應(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. 對(duì)話框出現(xiàn)

使用動(dòng)效將注意力吸引到對(duì)話框中顯示的新內(nèi)容。

文本和按鈕的垂直動(dòng)效為對(duì)話框擴(kuò)展增加了細(xì)節(jié)。

可以這樣！可以用分階段垂直動(dòng)效來(lái)顯示對(duì)話框

不要從中心均勻地展開對(duì)話框。對(duì)話框展開時(shí)，內(nèi)容不應(yīng)淡入、重疊或相反的方向運(yùn)動(dòng)。

千萬(wàn)別這樣！避免引入拒用統(tǒng)一縮放的對(duì)話框

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

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

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

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