起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Material Design 折疊屏設計指南（1）：概述
編輯導語：Material Design 不僅僅是安卓陣營產品的設計規范和風格，甚至它鼓勵設計師和開發者把這種風格用在蘋果設備和 windows設備上。作為設計規范，它很包容，卻有時又非常嚴格。使用了 Material Design 的產品給人很強的統一感和秩序感。而折疊屏的發展有需要又新的設計指南，下面跟著作者一起來看看吧！
折疊屏使用柔性屏幕可以折疊或展開，根據你的需要無縫擴展可用的屏幕空間。
了解硬件和 UI 的注意事項是設計自適應體驗的關鍵。
當 App 適應可折疊屏幕時需要考慮的條件和限制。
姿態是指可折疊設備可以采取的屏幕配置，能為 App 提供多少種不同的布局環境。
1. 折疊
折疊姿態的正面屏幕使用了與典型手機相似的比例。
當你為折疊姿態的屏幕設計時，請參考Material Design中有關移動設備的通用指南。
與普通手機的比例相似，折疊姿態有一塊正面屏幕。
展開姿態是指打開的屏幕，它通常是正面屏幕的兩倍大小或一個小平板電腦的大小。展開的姿態分為橫屏和豎屏方向。
在展開姿態下，設備的折疊鉸鏈在某些型號上可能會很明顯。最為獨特的是微軟的 Surface Duo，鉸鏈完全從物理上把屏幕分割開。
Sureface Duo 鉸鏈完全把屏幕分成兩塊（譯者配圖）
1. 展開橫向
橫向模式適用于較長的屏幕邊水平，較短的邊豎直。
在展開橫向時，較長的屏幕邊是水平，較短的邊垂直。
2. 展開豎向
豎向模式適用于較長的屏幕邊垂直，較短的屏幕邊水平。
在展開豎向時，較長的屏幕邊垂直，較短的屏幕邊水平。
3. 立放姿態（tabletop）
立放姿態描述一種特別的屏幕姿態，其中折疊屏一半與另外一半垂直。立放姿態類似于筆記本電腦：屏幕的一半是水平的，就像平放在桌上一樣，而另一半則約 90 度一樣豎立著。
立放姿態是一種屏幕姿態，屏幕一半水平，另外一半垂直或者半折。
當屏幕展開時，除非調整手的握姿，否則對于大多數人來說，屏幕上方的 25% 是夠不著的。為了適應設備和手的大小，限制放置在屏幕上方 25% 的交互元素數量。此外，避免將重要的交互元素放在離屏幕下方邊緣太近的地方。有些用戶，特別是手比較大的用戶，可能很難觸及屏幕下方邊緣的區域。
當用戶拿著一個展開的設備時，他們的手指觸及范圍是有限的。在布局中指定說明交互的時候，要考慮到以下這三個人體工程學區域。
- 用戶可能通過伸長手指到達這個區域，這使得許多人在觸及這個區域時略顯不便。
- 用戶可以舒適地到達這個區域。
- 當手握住設備時，觸及這個區域具有挑戰性。
展開的設備示意圖，呈現三個不同的交互注意區域。
限制屏幕上方四分之一的交互。如果不改變持握姿勢，屏幕上方的 25% 是很難觸及的。
當用戶用兩只手握住設備時，屏幕的頂部區域（1）難以觸及。
將關鍵和常用的元素放在靠近屏幕下方和角落的地方，會使得它們更難接觸到。
千萬別這樣！避免將 FABs（浮動動作按鈕）等元素放在離屏幕下方太近的地方。這使得它們難以觸及，因為較大的設備會限制拇指能夠伸向的距離，特別是在單手使用設備時。
由于設備的鉸鏈實現了折疊，折疊屏幕的中心會有觸覺差異。
避免將重要的信息和動作放在展開的屏幕的中心 48dp 上。
展開屏幕上中心的鉸鏈示意圖
以豎向模式下的中心鉸鏈舉例。避免在這個區域放置重要的交互元素
處于豎向模式下設備中心的鉸鏈示意圖
折疊設備的鉸鏈有兩種類型：
- 幾乎看不到的無縫鉸鏈，盡管一些用戶可能會感覺到屏幕表面有觸覺差異。
- 鉸鏈在物理上將設備劃分成兩個屏幕（比如前文提到的微軟 Surface Duo）。
1. 無縫鉸鏈的設備
在有物理鉸鏈的設備上，將屏幕設計成兩個不同的部分，這樣就可以使接縫和屏幕之間顯得很和諧。
2. 有縫鉸鏈的設備
一個對話框案例，該對話框位于有縫鉸鏈半邊屏幕的中心附近。
避免放置關鍵動作（比如對話框）沿中心鉸鏈放置。
千萬別這樣！避免將關鍵動作放在中心鉸鏈上。
可以這樣！將對話框等關鍵元素放在屏幕的兩邊。
千萬別這樣！避免將關鍵動作放在屏幕的中間。
當把屏幕劃分成組合區域時，避免在屏幕中間的 48dp 放置重要動作。2 欄布局的組合效果最好。
1. 橫向
在橫向模式下，把主要的導航組件放在屏幕的垂直邊緣（1）上，并將內容和元素分割成兩列（2）。
內容和元素被分成兩列，一個導航欄（1）提供符合人體工程學方式的導航體驗。而內容被分成兩列，使用屏幕的寬度（2）。
2. 豎向
在縱向布局中使用一列。在縱向模式下，水平空間是有限的，幾乎沒有空間可以實現有意義的兩列。
在可折疊的 App 的縱向布局中使用單列
如果內容能在狹窄的視野中容納而不會過度失真，那么可以使用兩列展開的縱向布局。
當心！只有當內容適合較窄的視圖時，才能在縱向布局中使用兩列。
復雜的列表條目使人很難在兩個壓縮的列中舒適地查看內容。
在為可折疊設備進行設計時，有兩種主要的方法來管理擴展和收縮的屏幕空間。
當屏幕空間因為設備的展開而擴大時，更大的畫布可以用來擴展現有視圖或添加一個單獨的、額外的視圖。
當展開時，列表中的第一個對象應該默認打開，除非有條目被選中。
1. 擴展窗口
擴展意味著采取典型的移動設備設計，重新排列元素和內容，以更好地利用空間。這可能意味著增加第二列內容或重新排列內容區域。這種方法類似于網頁上的響應式設計。包括以下例子：
- 增加第二列內容
- 創建一個更復雜的照片布局
- 引入更多的負空間（留白）
與通常使用單列（左圖）的移動設備布局相比，可折疊設備（右圖）可能會使用多列布局。
2. 合并窗口
為了適應更大的屏幕，移動設備 UI 中的兩個不同的視圖可以在一個更大的設備上作為單個視圖呈現?？紤]從一個流程中提取多個屏幕，并將它們呈現在可折疊設備上以單一視圖呈現。
包括以下例子：
- 收件箱視圖與單消息視圖并列
- 文本消息列表視圖和單對話視圖并列
- 文件瀏覽器視圖與打開的文件夾并列
- 音樂家專家信息與音樂播放器控件同時出現。
在移動端（左圖），一個應用程序有兩個屏幕，可以合并成單個兩列布局，用于開發的可折疊設備（右圖）。
3. 滾動
根據你的 App 如何擴展或組合窗口，折疊設計的滾動行為在展開設計中發生變化。
如果你擴展一個窗口，你可以決定整個屏幕是一起滾動還是每一邊（每一列）獨立滾動。
如果你選擇組合窗口，屏幕的每一面將作為獨立的滾動區域操作。
兩個可折疊的設備。1（左邊）顯示兩個獨立的滾動列，2（右邊）顯示單頁的滾動內容。
4. 沉浸式布局
沉浸式布局將注意力集中在單一的動作或窗口上，為一個特定的目標創造無干擾的環境。
包括以下例子：
- 玩游戲
- 看電影
- 視頻通話
- 創意 App
通過使 App 的布局專注在視頻電話上，這種體驗不會與其他內容爭奪注意力。
作者：龍爪槐守望者；公眾號：龍爪槐守望者
本文由 @龍爪槐守望者 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
