編輯導語：Material Design 不僅僅是安卓陣營産品的設計規範和風格，甚至它鼓勵設計師和開發者把這種風格用在蘋果設備和 windows設備上。作為設計規範，它很包容，卻有時又非常嚴格。使用了 Material Design 的産品給人很強的統一感和秩序感。而折疊屏的發展有需要又新的設計指南，下面跟着作者一起來看看吧！

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

一、設備與環境

了解硬件和 UI 的注意事項是設計自适應體驗的關鍵。

當 App 适應可折疊屏幕時需要考慮的條件和限制。

二、姿态

姿态是指可折疊設備可以采取的屏幕配置，能為 App 提供多少種不同的布局環境。

1. 折疊

折疊姿态的正面屏幕使用了與典型手機相似的比例。

當你為折疊姿态的屏幕設計時，請參考Material Design中有關移動設備的通用指南。

與普通手機的比例相似，折疊姿态有一塊正面屏幕。

三、展開姿态

展開姿态是指打開的屏幕，它通常是正面屏幕的兩倍大小或一個小平闆電腦的大小。展開的姿态分為橫屏和豎屏方向。

在展開姿态下，設備的折疊鉸鍊在某些型号上可能會很明顯。最為獨特的是微軟的 Surface Duo，鉸鍊完全從物理上把屏幕分割開。

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

1. 展開橫向

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

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

2. 展開豎向

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

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

3. 立放姿态（tabletop）

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

立放姿态是一種屏幕姿态，屏幕一半水平，另外一半垂直或者半折。

四、可達性

當屏幕展開時，除非調整手的握姿，否則對于大多數人來說，屏幕上方的 25% 是夠不着的。為了适應設備和手的大小，限制放置在屏幕上方 25% 的交互元素數量。此外，避免将重要的交互元素放在離屏幕下方邊緣太近的地方。有些用戶，特别是手比較大的用戶，可能很難觸及屏幕下方邊緣的區域。

當用戶拿着一個展開的設備時，他們的手指觸及範圍是有限的。在布局中指定說明交互的時候，要考慮到以下這三個人體工程學區域。

1. 用戶可能通過伸長手指到達這個區域，這使得許多人在觸及這個區域時略顯不便。
2. 用戶可以舒适地到達這個區域。
3. 當手握住設備時，觸及這個區域具有挑戰性。

展開的設備示意圖，呈現三個不同的交互注意區域。

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

當用戶用兩隻手握住設備時，屏幕的頂部區域（1）難以觸及。

将關鍵和常用的元素放在靠近屏幕下方和角落的地方，會使得它們更難接觸到。

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

五、中心鉸鍊

由于設備的鉸鍊實現了折疊，折疊屏幕的中心會有觸覺差異。

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

展開屏幕上中心的鉸鍊示意圖

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

處于豎向模式下設備中心的鉸鍊示意圖

折疊設備的鉸鍊有兩種類型：

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

1. 無縫鉸鍊的設備

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

2. 有縫鉸鍊的設備

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

避免放置關鍵動作（比如對話框）沿中心鉸鍊放置。

千萬别這樣！避免将關鍵動作放在中心鉸鍊上。

可以這樣！将對話框等關鍵元素放在屏幕的兩邊。

千萬别這樣！避免将關鍵動作放在屏幕的中間。

六、劃分屏幕

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

1. 橫向

在橫向模式下，把主要的導航組件放在屏幕的垂直邊緣（1）上，并将内容和元素分割成兩列（2）。

内容和元素被分成兩列，一個導航欄（1）提供符合人體工程學方式的導航體驗。而内容被分成兩列，使用屏幕的寬度（2）。

2. 豎向

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

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

如果内容能在狹窄的視野中容納而不會過度失真，那麼可以使用兩列展開的縱向布局。

當心！隻有當内容适合較窄的視圖時，才能在縱向布局中使用兩列。

複雜的列表條目使人很難在兩個壓縮的列中舒适地查看内容。

七、擴展或組合窗口

在為可折疊設備進行設計時，有兩種主要的方法來管理擴展和收縮的屏幕空間。

當屏幕空間因為設備的展開而擴大時，更大的畫布可以用來擴展現有視圖或添加一個單獨的、額外的視圖。

當展開時，列表中的第一個對象應該默認打開，除非有條目被選中。

1. 擴展窗口

擴展意味着采取典型的移動設備設計，重新排列元素和内容，以更好地利用空間。這可能意味着增加第二列内容或重新排列内容區域。這種方法類似于網頁上的響應式設計。包括以下例子：

• 增加第二列内容
• 創建一個更複雜的照片布局
• 引入更多的負空間（留白）

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

2. 合并窗口

為了适應更大的屏幕，移動設備 UI 中的兩個不同的視圖可以在一個更大的設備上作為單個視圖呈現。考慮從一個流程中提取多個屏幕，并将它們呈現在可折疊設備上以單一視圖呈現。

包括以下例子：

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

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

3. 滾動

根據你的 App 如何擴展或組合窗口，折疊設計的滾動行為在展開設計中發生變化。

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

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

兩個可折疊的設備。1（左邊）顯示兩個獨立的滾動列，2（右邊）顯示單頁的滾動内容。

4. 沉浸式布局

沉浸式布局将注意力集中在單一的動作或窗口上，為一個特定的目标創造無幹擾的環境。

包括以下例子：

通過使 App 的布局專注在視頻電話上，這種體驗不會與其他内容争奪注意力。

作者：龍爪槐守望者；公衆号：龍爪槐守望者

本文由 @龍爪槐守望者 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部