谷歌是如何做好折疊屏適配的？我總結了這4點！

大家有沒有感覺到，最近關于折疊屏的新聞越來越多了。

雖然我周圍沒見到什么人買折疊屏，但架不住廠商熱情高漲啊。

全球各大廠商幾乎都在拼命鉆研折疊屏手機，而且?guī)缀趺堪l(fā)布一款都有技術革新。

根據(jù)面板供應鏈市場研究機構 DSCC 的數(shù)據(jù)，2021 年第三季度折疊屏手機迎來了爆發(fā)性的銷量成長，除了比前一季度增加了 215%，出貨量更是達到 260 萬臺。

雖然這點數(shù)據(jù)比起全球 2.66 億的手機總銷量來說不算什么，但未來的事情誰又說得準呢？

隨著折疊屏越來越火，作為一個做過好幾年手機 APP 的設計師，我內心隱隱有些不安。如果折疊屏手機真的普及了，恐怕會給 UI 和交互設計帶來很大的變化。

到時候，稍微講究一點的 APP 都要補充很多適配規(guī)則，甚至可能需要重新設計布局架構，因為做不做折疊屏的適配，對體驗和視覺效果的影響真的很明顯。

例如，下圖就是 Google Due 為折疊屏做適配的真實案例：

做好適配后，折疊屏看起來酷炫，優(yōu)勢展露無遺。

如果不做適配，折疊屏不但顯得毫無優(yōu)勢，你還會覺得中間那條縫十分礙眼。

為了把折疊屏的優(yōu)勢發(fā)揮出來，設計師們可以操心的地方多了去了。蘋果現(xiàn)在是沒有折疊屏手機，所以想要了解折疊屏適配設計的話，最好是去看看 Android 系統(tǒng)—— Google 確實做了一番研究。

最新版的 Material Design 設計系統(tǒng)中，有專門針對折疊屏適配的研究，我今天就以此為基礎，給大家捋一捋：

1. 觸摸范圍
2. 頁面分割
3. 鉸鏈
4. 彈窗

觸摸范圍

折疊屏的手機屏幕更大，觸摸范圍肯定也不一樣。

非折疊屏手機以單手操作為主，但是折疊屏手機如果展開，就不可能單手操作了，以雙手為主。

上圖來源：Material You

上面三個區(qū)域中，3 號區(qū)需要手指彎曲較大，1 號區(qū)需要手指盡力，2 號區(qū)是操作起來最舒適的。

頂部，尤其是中間那一部分，手指很難觸達，避免放置常用操作。

頁面分割

首先，有的屏幕是原來手機的尺寸，從中間對折的，有的還沒有 90° 的狀態(tài)，要么折疊要么展開。

這種還比較好辦，因為大部分時間都是展開使用，不太需要額外的適配設計。

比較麻煩的是雙屏尺寸的折疊屏，因為這種屏幕會經常使用展開 90° 的桌面模式。

最簡單的適配方式是下圖這種單列適配，適合上下翻折，但這種就對桌面模式很不友好。

這種不太適合左右翻折，否則中間容易看到一條豎直折痕。

如果是左右翻折，最好是考慮這種左右布局了，更大效率地利用 2 倍的屏幕空間。

但是這種左右布局也會有風險，折疊屏的展開寬度畢竟不及平板設備，也要考慮分成兩列之后空間夠不夠用。

桌面模式可能是看視頻或打字的常用模式，也要考慮如何快速切換布局：

鉸鏈

上面那么多模式，已經很讓人汗顏，但折疊屏的復雜性還不止如此。因為硬件限制，折疊屏中間都會存在一個鉸鏈。各大廠商都在努力抹平鉸鏈造成的視覺影響，但用久了幾乎沒有哪家不出現(xiàn)凹痕的。那個小凹痕平時也沒什么，但如果圖片或文字段落跨越那道鉸鏈，就難保不看出問題。

退一萬步說，就算凹痕小到看不出來，鉸鏈依舊會給交互造成影響。因為鉸鏈上的觸感肯定不怎么好，重要的信息和按鈕都最好避開那道杠。

更何況，還可能存在鉸鏈處觸控問題，甚至屏幕分段的問題。

彈窗

前面講了為什么鉸鏈的存在會給 APP 設計造成很大影響，這里就要說影響最大的一個組件了。

彈窗是不能直接用以前的樣式了，否則剛好卡在鉸鏈那個地方。Material You 的解決辦法是，讓折疊屏的彈窗出現(xiàn)在屏幕一側。

哪怕是完全展開狀態(tài)，也不能把彈窗放在中間，因為你無法確定用戶的這個折疊屏，是不是真的無縫。

總結

今天這篇文章的內容有沒有用，主要還是取決于折疊屏會不會普及。就我個人而言，如果要買折疊屏，估計主要奔著嘗鮮去，對用戶體驗這塊其實并沒有什么指望。但是以后的事情真不好說，不知道大家怎么看？

歡迎關注作者的微信公眾號：「體驗進階」