折疊屏使用柔性屏幕可以折疊或展開，根據(jù)你的需要無縫擴(kuò)展可用的屏幕空間。

設(shè)備與環(huán)境

了解硬件和 UI 的注意事項是設(shè)計自適應(yīng)體驗的關(guān)鍵。

當(dāng) App 適應(yīng)可折疊屏幕時需要考慮的條件和限制。

姿態(tài)

姿態(tài)是指可折疊設(shè)備可以采取的屏幕配置，能為 App 提供多少種不同的布局環(huán)境。

折疊

折疊姿態(tài)的正面屏幕使用了與典型手機(jī)相似的比例。

當(dāng)你為折疊姿態(tài)的屏幕設(shè)計時，請參考 Material Design 中有關(guān)移動設(shè)備的通用指南。

與普通手機(jī)的比例相似，折疊姿態(tài)有一塊正面屏幕。

展開姿態(tài)

展開姿態(tài)是指打開的屏幕，它通常是正面屏幕的兩倍大小或一個小平板電腦的大小。展開的姿態(tài)分為橫屏和豎屏方向。

在展開姿態(tài)下，設(shè)備的折疊鉸鏈在某些型號上可能會很明顯。最為獨特的是微軟的 Surface Duo，鉸鏈完全從物理上把屏幕分割開。

Sureface Duo 鉸鏈完全把屏幕分成兩塊（譯者配圖）

展開橫向

橫向模式適用于較長的屏幕邊水平，較短的邊豎直。

在展開橫向時，較長的屏幕邊是水平，較短的邊垂直。

展開豎向

豎向模式適用于較長的屏幕邊垂直，較短的屏幕邊水平。

在展開豎向時，較長的屏幕邊垂直，較短的屏幕邊水平。

立放姿態(tài)（tabletop）

立放姿態(tài)描述一種特別的屏幕姿態(tài)，其中折疊屏一半與另外一半垂直。立放姿態(tài)類似于筆記本電腦：屏幕的一半是水平的，就像平放在桌上一樣，而另一半則約 90 度一樣豎立著。

立放姿態(tài)是一種屏幕姿態(tài)，屏幕一半水平，另外一半垂直或者半折。

可達(dá)性

當(dāng)屏幕展開時，除非調(diào)整手的握姿，否則對于大多數(shù)人來說，屏幕上方的 25% 是夠不著的。為了適應(yīng)設(shè)備和手的大小，限制放置在屏幕上方 25% 的交互元素數(shù)量。此外，避免將重要的交互元素放在離屏幕下方邊緣太近的地方。有些用戶，特別是手比較大的用戶，可能很難觸及屏幕下方邊緣的區(qū)域。

當(dāng)用戶拿著一個展開的設(shè)備時，他們的手指觸及范圍是有限的。在布局中指定說明交互的時候，要考慮到以下這三個人體工程學(xué)區(qū)域。

1. 用戶可能通過伸長手指到達(dá)這個區(qū)域，這使得許多人在觸及這個區(qū)域時略顯不便。
2. 用戶可以舒適地到達(dá)這個區(qū)域。
3. 當(dāng)手握住設(shè)備時，觸及這個區(qū)域具有挑戰(zhàn)性。

展開的設(shè)備示意圖，呈現(xiàn)三個不同的交互注意區(qū)域。

限制屏幕上方四分之一的交互。如果不改變持握姿勢，屏幕上方的 25% 是很難觸及的。

當(dāng)用戶用兩只手握住設(shè)備時，屏幕的頂部區(qū)域（1）難以觸及。

將關(guān)鍵和常用的元素放在靠近屏幕下方和角落的地方，會使得它們更難接觸到

千萬別這樣！避免將 FABs（浮動動作按鈕）等元素放在離屏幕下方太近的地方。這使得它們難以觸及，因為較大的設(shè)備會限制拇指能夠伸向的距離，特別是在單手使用設(shè)備時。

中心鉸鏈

由于設(shè)備的鉸鏈實現(xiàn)了折疊，折疊屏幕的中心會有觸覺差異。

避免將重要的信息和動作放在展開的屏幕的中心 48dp 上。

展開屏幕上中心的鉸鏈?zhǔn)疽鈭D

以豎向模式下的中心鉸鏈舉例。避免在這個區(qū)域放置重要的交互元素

處于豎向模式下設(shè)備中心的鉸鏈?zhǔn)疽鈭D

折疊設(shè)備的鉸鏈有兩種類型：

1. 幾乎看不到的無縫鉸鏈，盡管一些用戶可能會感覺到屏幕表面有觸覺差異。
2. 鉸鏈在物理上將設(shè)備劃分成兩個屏幕（比如前文提到的微軟 Surface Duo）。

無縫鉸鏈的設(shè)備

在有物理鉸鏈的設(shè)備上，將屏幕設(shè)計成兩個不同的部分，這樣就可以使接縫和屏幕之間顯得很和諧。

有縫鉸鏈的設(shè)備

一個對話框案例，該對話框位于有縫鉸鏈半邊屏幕的中心附近。

避免放置關(guān)鍵動作（比如對話框）沿中心鉸鏈放置。

千萬別這樣！避免將關(guān)鍵動作放在中心鉸鏈上。

可以這樣！將對話框等關(guān)鍵元素放在屏幕的兩邊。

千萬別這樣！避免將關(guān)鍵動作放在屏幕的中間。

劃分屏幕

當(dāng)把屏幕劃分成組合區(qū)域時，避免在屏幕中間的 48dp 放置重要動作。2 欄布局的組合效果最好。

橫向

在橫向模式下，把主要的導(dǎo)航組件放在屏幕的垂直邊緣（1）上，并將內(nèi)容和元素分割成兩列（2）。

內(nèi)容和元素被分成兩列，一個導(dǎo)航欄（1）提供符合人體工程學(xué)方式的導(dǎo)航體驗。而內(nèi)容被分成兩列，使用屏幕的寬度（2）。

豎向

在縱向布局中使用一列。在縱向模式下，水平空間是有限的，幾乎沒有空間可以實現(xiàn)有意義的兩列。

在可折疊的 App 的縱向布局中使用單列

如果內(nèi)容能在狹窄的視野中容納而不會過度失真，那么可以使用兩列展開的縱向布局。

當(dāng)心！只有當(dāng)內(nèi)容適合較窄的視圖時，才能在縱向布局中使用兩列。

復(fù)雜的列表條目使人很難在兩個壓縮的列中舒適地查看內(nèi)容。

當(dāng)心！

擴(kuò)展或組合窗口

在為可折疊設(shè)備進(jìn)行設(shè)計時，有兩種主要的方法來管理擴(kuò)展和收縮的屏幕空間。

當(dāng)屏幕空間因為設(shè)備的展開而擴(kuò)大時，更大的畫布可以用來擴(kuò)展現(xiàn)有視圖或添加一個單獨的、額外的視圖。

當(dāng)展開時，列表中的第一個對象應(yīng)該默認(rèn)打開，除非有條目被選中。

擴(kuò)展窗口

擴(kuò)展意味著采取典型的移動設(shè)備設(shè)計，重新排列元素和內(nèi)容，以更好地利用空間。這可能意味著增加第二列內(nèi)容或重新排列內(nèi)容區(qū)域。這種方法類似于網(wǎng)頁上的響應(yīng)式設(shè)計。包括以下例子：

• 增加第二列內(nèi)容
• 創(chuàng)建一個更復(fù)雜的照片布局
• 引入更多的負(fù)空間（留白）

與通常使用單列（左圖）的移動設(shè)備布局相比，可折疊設(shè)備（右圖）可能會使用多列布局。

合并窗口

為了適應(yīng)更大的屏幕，移動設(shè)備 UI 中的兩個不同的視圖可以在一個更大的設(shè)備上作為單個視圖呈現(xiàn)?？紤]從一個流程中提取多個屏幕，并將它們呈現(xiàn)在可折疊設(shè)備上以單一視圖呈現(xiàn)。

包括以下例子：

1. 收件箱視圖與單消息視圖并列
2. 文本消息列表視圖和單對話視圖并列
3. 文件瀏覽器視圖與打開的文件夾并列
4. 音樂家專家信息與音樂播放器控件同時出現(xiàn)。

在移動端（左圖），一個應(yīng)用程序有兩個屏幕，可以合并成單個兩列布局，用于開發(fā)的可折疊設(shè)備（右圖）。

滾動

根據(jù)你的 App 如何擴(kuò)展或組合窗口，折疊設(shè)計的滾動行為在展開設(shè)計中發(fā)生變化。

如果你擴(kuò)展一個窗口，你可以決定整個屏幕是一起滾動還是每一邊（每一列）獨立滾動。

如果你選擇組合窗口，屏幕的每一面將作為獨立的滾動區(qū)域操作。

兩個可折疊的設(shè)備。1（左邊）顯示兩個獨立的滾動列，2（右邊）顯示單頁的滾動內(nèi)容。

沉浸式布局

沉浸式布局將注意力集中在單一的動作或窗口上，為一個特定的目標(biāo)創(chuàng)造無干擾的環(huán)境。

包括以下例子：

1. 玩游戲
2. 看電影
3. 視頻通話
4. 創(chuàng)意 App

通過使 App 的布局專注在視頻電話上，這種體驗不會與其他內(nèi)容爭奪注意力

歡迎關(guān)注作者的微信公眾號：「龍爪槐守望者」