近年來(lái)，盡管大眾持觀望態(tài)度，全球各大手機(jī)廠商仍然熱衷于折疊屏手機(jī)的研發(fā)與革新。本文以最新版的 MaterialDesign設(shè)計(jì)系統(tǒng)為基礎(chǔ)，對(duì)折疊屏手機(jī)的觸摸范圍、頁(yè)面分割、鉸鏈和彈窗四個(gè)方面對(duì)比式地進(jìn)行討論，推薦感興趣的童鞋閱讀分享～

大家有沒(méi)有感覺(jué)到，最近關(guān)于折疊屏的新聞越來(lái)越多了。

雖然我周?chē)鷽](méi)見(jiàn)到什么人買(mǎi)折疊屏，但架不住廠商熱情高漲啊。

全球各大廠商幾乎都在拼命鉆研折疊屏手機(jī)，幾乎每發(fā)布一款都有技術(shù)革新。

根據(jù)面板供應(yīng)鏈?zhǔn)袌?chǎng)研究機(jī)構(gòu) DSCC 的數(shù)據(jù)，2021 年第三季度折疊屏手機(jī)迎來(lái)了爆發(fā)性的銷(xiāo)量成長(zhǎng)，除了比前一季度增加了215%，出貨量更是達(dá)到 260 萬(wàn)臺(tái)。

雖然這點(diǎn)數(shù)據(jù)比起全球 2.66 億的手機(jī)總銷(xiāo)量來(lái)說(shuō)不算什么，但未來(lái)的事情誰(shuí)又說(shuō)得準(zhǔn)呢？

隨著折疊屏越來(lái)越火，作為一個(gè)做過(guò)好幾年手機(jī) APP 的設(shè)計(jì)師，我內(nèi)心隱隱有些不安。

如果折疊屏手機(jī)真的普及了，恐怕會(huì)給 UI 和交互設(shè)計(jì)帶來(lái)很大的變化。

到時(shí)候，稍微講究一點(diǎn)的 APP 都要補(bǔ)充很多適配規(guī)則，甚至可能需要重新設(shè)計(jì)布局架構(gòu)，因?yàn)樽霾蛔稣郫B屏的適配，對(duì)體驗(yàn)和視覺(jué)效果的影響真的很明顯。

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

做好適配后，折疊屏看起來(lái)酷炫，優(yōu)勢(shì)展露無(wú)遺。

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

為了把折疊屏的優(yōu)勢(shì)發(fā)揮出來(lái)，設(shè)計(jì)師們可以操心的地方多了去了。

蘋(píng)果現(xiàn)在是沒(méi)有折疊屏手機(jī)，所以想要了解折疊屏適配設(shè)計(jì)的話，最好是去看看 Android 系統(tǒng)—— Google 確實(shí)做了一番研究。

最新版的 MaterialDesign設(shè)計(jì)系統(tǒng)中，有專門(mén)針對(duì)折疊屏適配的研究，我今天就以此為基礎(chǔ)，給大家捋一捋：

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

一、觸摸范圍

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

非折疊屏手機(jī)以單手操作為主，但是折疊屏手機(jī)如果展開(kāi)，就不可能單手操作了，以雙手為主。

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

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

二、頁(yè)面分割

首先，有的屏幕是原來(lái)手機(jī)的尺寸，從中間對(duì)折的，有的還沒(méi)有 90° 的狀態(tài)，要么折疊要么展開(kāi)。

這種還比較好辦，因?yàn)榇蟛糠謺r(shí)間都是展開(kāi)使用，不太需要額外的適配設(shè)計(jì)。

比較麻煩的是雙屏尺寸的折疊屏，因?yàn)檫@種屏幕會(huì)經(jīng)常使用展開(kāi)90° 的桌面模式。

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

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

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

但是這種左右布局也會(huì)有風(fēng)險(xiǎn)，折疊屏的展開(kāi)寬度畢竟不及平板設(shè)備，也要考慮分成兩列之后空間夠不夠用。

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

三、鉸鏈

上面那么多模式，已經(jīng)很讓人汗顏，但折疊屏的復(fù)雜性還不止如此。

因?yàn)橛布拗疲郫B屏中間都會(huì)存在一個(gè)鉸鏈。

各大廠商都在努力抹平鉸鏈造成的視覺(jué)影響，但用久了幾乎沒(méi)有哪家不出現(xiàn)凹痕的。

那個(gè)小凹痕平時(shí)也沒(méi)什么，但如果圖片或文字段落跨越那道鉸鏈，就難保不看出問(wèn)題。

退一萬(wàn)步說(shuō)，就算凹痕小到看不出來(lái)，鉸鏈依舊會(huì)給交互造成影響。

因?yàn)殂q鏈上的觸感肯定不怎么好，重要的信息和按鈕都最好避開(kāi)那道杠。

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

四、彈窗

前面講了為什么鉸鏈的存在會(huì)給 APP 設(shè)計(jì)造成很大影響，這里就要說(shuō)影響最大的一個(gè)組件了。

彈窗是不能直接用以前的樣式了，否則剛好卡在鉸鏈那個(gè)地方。

Material You 的解決辦法是，讓折疊屏的彈窗出現(xiàn)在屏幕一側(cè)。

哪怕是完全展開(kāi)狀態(tài)，也不能把彈窗放在中間，因?yàn)槟銦o(wú)法確定用戶的這個(gè)折疊屏，是不是真的無(wú)縫。

五、總結(jié)

今天這篇文章的內(nèi)容有沒(méi)有用，主要還是取決于折疊屏?xí)粫?huì)普及。

就我個(gè)人而言，如果要買(mǎi)折疊屏，估計(jì)主要奔著嘗鮮去，對(duì)用戶體驗(yàn)這塊其實(shí)并沒(méi)有什么指望。

但是以后的事情真不好說(shuō)，不知道大家怎么看？

#專欄作家#

作者：Z Yuhan，一名前華為騰訊留英設(shè)計(jì)師；公眾號(hào)：體驗(yàn)進(jìn)階。

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

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