起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Material Design 折疊屏設計指南（5）：動效
編輯導語：設計折疊屏手機等移動設備時，參考Material Design 中的通用指南也許會有很大幫助。這篇文章介紹了折疊屏在打開、關閉和旋轉時畫面的不同呈現形式，以及如何用動效進行流暢的過渡。推薦對折疊屏感興趣的童鞋閱讀。
一、打開、關閉和旋轉設備
1. 折疊狀態到橫屏展開
動效被用來突出由更大的、展開的畫布所顯示的新內容。
導航欄和詳情頁的動畫用來引起人們的注意。
可折疊設備上的郵件 App 從折疊姿態到展開的橫屏姿態
避免了在折疊或展開后停留在之前姿態的布局上。相反，隨著設備的折疊和展開，進行了不同姿態的無縫過渡。
千萬別這樣！避免啟動布局變換時出現延遲
姿態的連續性也可以在 banner 的動效中得到加強，banner 寬度延展以利用更大的屏幕寬度。搜索欄也可以有類似的表現。
當進入立放模式時，像視頻這樣的主角元素可以擴展到屏幕的上半部分，像媒體控件這樣的輔助元素填補屏幕的下半部分。
二、組件變換
1. 邊框進入和退出
這種變換用于靠近屏幕邊緣的組件，這些組件根據布局自適應時情況退出或進入。
- 底部導航
- 側邊導航
- 應用欄
- 面板（Sheet）
- 媒體控制
隨著屏幕的展開，底部導航變換成側邊導航
2. 新增一個面板
面板會由一個更大的畫布（canvas）展示出來，這種變換是用來吸引人們對一個新面板的注意的。
隨著屏幕尺寸的增加，一個輔助面板從側面進入視圖
3. 同級變換：導航
頂級導航條目之間的對等變換使用共享的 Y 軸。詳情頁面根據所選列表條目的對應順序向上或向下滑動。
Y 軸上的元素同步變換，以加強內容狀態的微妙變化
4. 父子導航：列表
嵌套列表的父子變換使用共享的 X 軸轉換。
列表條目轉換成詳情視圖
5. 父子導航：卡片
卡片使用容器變換進行父子變換。
卡片容器可以從一個小元素擴展到沉浸式視圖
6. 對話框出現
使用動效將注意力吸引到對話框中顯示的新內容。
文本和按鈕的垂直動效為對話框擴展增加了細節。
可以這樣！可以用分階段垂直動效來顯示對話框
不要從中心均勻地展開對話框。對話框展開時，內容不應淡入、重疊或相反的方向運動。
千萬別這樣！避免引入拒用統一縮放的對話框
原文鏈接：https://m3.material.io/foundations/adaptive-design/foldables/overview
作者：龍爪槐守望者；公眾號：龍爪槐守望者
本文由 @龍爪槐守望者 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
