編輯導(dǎo)語(yǔ)：Material Design 不僅僅是安卓陣營(yíng)產(chǎn)品的設(shè)計(jì)規(guī)范和風(fēng)格，甚至它鼓勵(lì)設(shè)計(jì)師和開(kāi)發(fā)者把這種風(fēng)格用在蘋(píng)果設(shè)備和 windows設(shè)備上。作為設(shè)計(jì)規(guī)范，它很包容，卻有時(shí)又非常嚴(yán)格。使用了 Material Design 的產(chǎn)品給人很強(qiáng)的統(tǒng)一感和秩序感。而折疊屏的發(fā)展有需要又新的設(shè)計(jì)指南，下面跟著作者一起來(lái)看看吧！

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

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

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

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

二、姿態(tài)

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

1. 折疊

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

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

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

三、展開(kāi)姿態(tài)

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

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

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

1. 展開(kāi)橫向

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

在展開(kāi)橫向時(shí)，較長(zhǎng)的屏幕邊是水平，較短的邊垂直。

2. 展開(kāi)豎向

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

在展開(kāi)豎向時(shí)，較長(zhǎng)的屏幕邊垂直，較短的屏幕邊水平。

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

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

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

四、可達(dá)性

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

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

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

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

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

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

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

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

五、中心鉸鏈

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

避免將重要的信息和動(dòng)作放在展開(kāi)的屏幕的中心 48dp 上。

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

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

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

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

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

1. 無(wú)縫鉸鏈的設(shè)備

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

2. 有縫鉸鏈的設(shè)備

一個(gè)對(duì)話(huà)框案例，該對(duì)話(huà)框位于有縫鉸鏈半邊屏幕的中心附近。

避免放置關(guān)鍵動(dòng)作（比如對(duì)話(huà)框）沿中心鉸鏈放置。

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

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

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

六、劃分屏幕

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

1. 橫向

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

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

2. 豎向

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

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

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

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

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

七、擴(kuò)展或組合窗口

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

當(dāng)屏幕空間因?yàn)樵O(shè)備的展開(kāi)而擴(kuò)大時(shí)，更大的畫(huà)布可以用來(lái)擴(kuò)展現(xiàn)有視圖或添加一個(gè)單獨(dú)的、額外的視圖。

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

1. 擴(kuò)展窗口

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

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

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

2. 合并窗口

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

包括以下例子：

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

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

3. 滾動(dòng)

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

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

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

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

4. 沉浸式布局

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

包括以下例子：

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

通過(guò)使 App 的布局專(zhuān)注在視頻電話(huà)上，這種體驗(yàn)不會(huì)與其他內(nèi)容爭(zhēng)奪注意力。

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

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

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