2020-3-13 濤濤
我們總在期待 Next Big Thing，企盼下一次數(shù)字革命。喊了這么多年的物聯(lián)網(wǎng)現(xiàn)在還沒有明顯起來(lái)的跡象，而 VR 也因?yàn)轭^戴設(shè)備的大型化和沉浸式場(chǎng)景的泛用性較差的原因，反倒是 AR 和 MR 依托智能手機(jī)、浴霸式鏡頭組和 APP 有一定起色，但是也沒有到革命性改變的程度，只能算是一個(gè)小趨勢(shì)。當(dāng)然，人工智能/深度學(xué)習(xí)所帶來(lái)的影響更加深遠(yuǎn)，但是短時(shí)間以內(nèi)，它所帶來(lái)的變化趨近于隱形。
而最近2年，各種雙屏和柔性屏的發(fā)布，則可能是距離我們最近的硬件變革，可能和柔性屏/雙屏設(shè)備有關(guān)。
也許現(xiàn)在說(shuō)硬件交互設(shè)計(jì)到了類似 2007 年 iPhone 發(fā)布一樣拐點(diǎn)有點(diǎn)夸張，但是對(duì)于現(xiàn)在幾乎純粹拼配置死水微瀾一樣的手機(jī)電腦市場(chǎng)而言，這種明顯區(qū)別于以往的硬件設(shè)計(jì)，將會(huì)直接帶來(lái)交互、設(shè)計(jì)和體驗(yàn)上的改變。
2019年是否算得上是雙屏設(shè)備元年，現(xiàn)在下結(jié)論為時(shí)過(guò)早，但是去年三星 Galaxy Fold 和 Moto Razr 的發(fā)布，確實(shí)給廣大硬件廠商好好打了一個(gè)樣。
盡管Galaxy Fold 去年折戟沉沙了，但是高昂的沉沒成本和大勢(shì)所趨讓三星肯定不能就這么算了， 回爐再造一番之后今年又帶著船薪版本的 Galaxy Fold 2 殺將回來(lái)，順帶還兼顧女性市場(chǎng)整了一個(gè)對(duì)標(biāo) Moto Razr 的化妝盒手機(jī) Galaxy Z flip。
圖片來(lái)自 TheVerge
當(dāng)然，華為的 Mate Xs 也是相當(dāng)優(yōu)秀的產(chǎn)品，這款明顯對(duì)標(biāo)三星 Galaxy Fold 2 的產(chǎn)品，并沒有將柔性屏制作成為向內(nèi)折疊，而是完全翻過(guò)來(lái)，將它作為外屏來(lái)進(jìn)行設(shè)計(jì)，反向折疊，展開的時(shí)候，屏幕自然延展。
圖片來(lái)自 TheVerge
不過(guò)思路最為清奇的并非是華為，而是 TCL。就在這幾天，TCL 帶來(lái)了兩款全新的原型機(jī)，一款手機(jī)帶有兩個(gè)折疊軸，相當(dāng)于是將傳統(tǒng)手機(jī)屏幕延展到以往的3倍，徹底折疊開相當(dāng)于是一個(gè) 10英寸的平板電腦（回過(guò)頭來(lái)想，就像是將一個(gè)平板電腦反向折疊到手機(jī)的大小，但是重量不變……）。
圖片來(lái)自 TheVerge
另外一款原型機(jī)則選擇了抽拉式的設(shè)計(jì)，機(jī)身可以如同抽屜一樣拉開，柔軟的屏幕會(huì)被拉出，延展開來(lái)差不多和 iPad Mini 一個(gè)大小了。
圖片來(lái)自 TheVerge
圖片來(lái)自Engadget
除了這幾款之外，在今年年初的 CES 消費(fèi)電子展上，聯(lián)想、戴爾、華碩，這些目前世界上最大的消費(fèi)電子制造商，紛紛帶來(lái)了各自的折疊屏和雙屏設(shè)備。
聯(lián)想帶來(lái)的 ThinkPad X1 Fold，是一個(gè)價(jià)格昂貴的柔性折疊屏平板電腦，它額外附帶了一個(gè)藍(lán)牙鍵盤。
圖片來(lái)自 TheVerge
考慮到聯(lián)想在此之前已經(jīng)發(fā)布過(guò)帶有LEC+墨水屏的雙屏設(shè)備 Yoga Book 2，可以說(shuō)聯(lián)想是已經(jīng)具備了制造兩種不同類型屏幕設(shè)備的能力。
作為對(duì)手的戴爾，帶來(lái)了分別對(duì)標(biāo)聯(lián)想這兩個(gè)系列的對(duì)應(yīng)產(chǎn)品：Concept Ori 和 Concept Duet。
Concept Ori 采用的是兩塊傳統(tǒng)硬屏，你既可以讓一款屏幕作為屏幕，另一塊作為虛擬輸入鍵盤或者手繪板，也可以使用配備的藍(lán)牙鍵盤，吸附在底下的屏幕上來(lái)進(jìn)行輸入，而且當(dāng)鍵盤移動(dòng)到靠近轉(zhuǎn)軸的地方，還能讓底下露出的半塊屏幕作為觸控板來(lái)使用：
圖片來(lái)自 TheVerge
Concept Duet 在概念上則和 聯(lián)想的 ThinkPad X1 Fold 類似，一塊柔性可折疊的屏幕，便于收納，一體連接。
圖片來(lái)自 TheVerge
看了這么多硬件，是不是覺得信息量有點(diǎn)大？不過(guò)簡(jiǎn)單來(lái)說(shuō)，所有的這些產(chǎn)品，都在說(shuō)一件事情：屏幕要延展開，這是一個(gè)正在發(fā)生的趨勢(shì)。
同時(shí)，我們還注意到一個(gè)很明顯的特征，就是所有的這些柔性屏設(shè)備都非常的……騷，且貴。動(dòng)輒兩三千美元的起步價(jià)，如果可靠堅(jiān)挺也就算了，不僅轉(zhuǎn)軸易損，且屏幕也存在易損的問(wèn)題。根據(jù) ifanr 的上手評(píng)測(cè)，即使是在優(yōu)化了轉(zhuǎn)軸和屏幕折疊角度之后，三星所發(fā)布的 Galaxy Z Flip 的屏幕中段依然有著不可忽視的折痕，這一問(wèn)題可能會(huì)是絕大多數(shù)折疊柔性屏設(shè)備的通病。
圖片來(lái)自愛范兒
與之相反，采用硬質(zhì)雙屏設(shè)計(jì)的硬件設(shè)備，從生產(chǎn)成本、工藝成熟度、價(jià)格上，都更加有優(yōu)勢(shì)。
值得注意的是，柔性折疊屏和硬質(zhì)雙屏設(shè)備，在基本的使用體驗(yàn)和邏輯上是一致的，除了極少數(shù)特殊的設(shè)備之外（比如 TCL的雙折疊式的概念機(jī)），多數(shù)情況下，兩者是差不多的。
只不過(guò)存在一個(gè)問(wèn)題，雙屏設(shè)備的交互和體驗(yàn)，需要有對(duì)應(yīng)操作系統(tǒng)支持，因?yàn)閺膯纹恋诫p屏，其實(shí)交互邏輯已經(jīng)發(fā)生了巨大的改變。
一直在創(chuàng)新且「穩(wěn)健」地更新軟硬件的蘋果公司，應(yīng)該不會(huì)在市場(chǎng)未曾成熟的情況下選擇發(fā)布硬件，這意味著你不會(huì)很快看到雙屏 iOS 硬件，而面向著大量 OEM 廠商的 Android 和 Windows 則截然不同。著兩年廠商已經(jīng)身體力行證明了一件事情：只要操作系統(tǒng)和設(shè)計(jì)跟上，硬件馬上量產(chǎn)不是問(wèn)題。
最近泄漏的 Android 11 的新特性已經(jīng)出現(xiàn)了可折疊屏幕的影子，但是具體情況恐怕要到因?yàn)橐咔樘钡?Google I/O 大會(huì)上會(huì)揭曉答案。但是另一邊，賊心不死的微軟，已經(jīng)開始布局面向可雙屏設(shè)備的新一代操作系統(tǒng) Windows 10X了。
圖片來(lái)自 TheVerge
去年微軟發(fā)布的兩款雙屏設(shè)備 Surface Duo 和 Surface Neo 并不都是采用尚未發(fā)布的 Windows 10X 操作系統(tǒng)，但是兩者都沿用了幾乎相同的交互邏輯，較小的 Neo 采用的是 Android 操作系統(tǒng)。這兩款硬件和系統(tǒng)交互設(shè)計(jì)，將會(huì)在未來(lái)一段時(shí)間以內(nèi)，成為雙屏硬件的軟件交互的重要參考和主要標(biāo)桿，聯(lián)想和戴爾這波 OEM 廠商，無(wú)疑是參考著微軟的風(fēng)向標(biāo)來(lái)搞硬件產(chǎn)品的。
圖片來(lái)自 TheVerge
傳統(tǒng)而臃腫的「開始」菜單欄在 Windows 10X 當(dāng)中，被精簡(jiǎn)為我們更熟悉的模式，新的 Windows 10X 在原有的 Windows 10 的基礎(chǔ)上，應(yīng)該有對(duì)移動(dòng)端（比如 ARM 架構(gòu)的CPU）和小屏幕有更好的支持。
但是，更有價(jià)值的，是微軟為雙屏設(shè)備所制定的交互設(shè)計(jì)規(guī)范。
下面是基于微軟官方文檔，精簡(jiǎn)編譯后的規(guī)范：
雙屏交互概述
雙屏設(shè)備可以基于不同的工業(yè)設(shè)計(jì)，有多種硬件樣式。微軟發(fā)布的 Surface Neo 和 Surface Duo 可以作為典型的雙屏設(shè)備作為參考。雙屏本身可以借由鉸鏈、轉(zhuǎn)軸來(lái)連接，也可以基于柔性屏來(lái)實(shí)現(xiàn)。
所有的雙屏設(shè)備都具備有折疊、旋轉(zhuǎn)、翻轉(zhuǎn)的功能，兩塊屏幕都可以用來(lái)作為顯示，也可以一個(gè)做屏幕一個(gè)承載虛擬鍵盤，當(dāng)然也可以借由外設(shè)，構(gòu)建、組合成為新的模式。所以，為這樣的硬件設(shè)計(jì)的時(shí)候，需要考慮到各種不同的情況，并且適配硬件，幫助用戶實(shí)現(xiàn)更多的目標(biāo)。
:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/19247637/akrales_190930_3649_0139.jpg)
圖片來(lái)自 TheVerge
當(dāng)用戶打開應(yīng)用的時(shí)候，它的主要界面窗口應(yīng)該最大化，占據(jù)一塊屏幕的全寬和全高。這樣用戶可以一次打開多個(gè)不同的應(yīng)用，顯示在雙屏上。
圖片來(lái)自 TheVerge
當(dāng)然，你的APP 也可以完整鋪滿兩個(gè)屏幕，這個(gè)界面布局被稱為「跨屏布局」。在默認(rèn)情況下，它應(yīng)該像在大屏幕上一樣，一個(gè)窗口跨屏幕顯示。但是你可以修改這種模式，讓它可以鋪滿兩個(gè)屏幕的同時(shí)，還可以兼顧到中間有轉(zhuǎn)軸和鉸鏈的硬件。對(duì)于這個(gè)問(wèn)題，我們隨后有詳細(xì)的討論。
響應(yīng)式布局
比起傳統(tǒng)的響應(yīng)式布局，對(duì)于雙屏硬件，我們要討論的「響應(yīng)」模式要復(fù)雜得多。就像下面這張圖中所說(shuō)的，要為這樣多樣、復(fù)雜的情況進(jìn)行設(shè)計(jì)：
我們默認(rèn)用戶在多數(shù)時(shí)候，是處于雙屏展開的狀態(tài)，當(dāng)用戶打開 APP 的時(shí)候，它的主要界面窗口，將會(huì)最大化占據(jù)一個(gè)屏幕，這個(gè)時(shí)候另一個(gè)屏幕處于空置狀態(tài)，用戶可以在這個(gè)屏幕上打開另外的應(yīng)用，并且用戶可以通過(guò)托拽窗口的方式，來(lái)重新整理窗口和APP的排布模式。
同時(shí)，單個(gè)應(yīng)用程序也應(yīng)該可以進(jìn)行跨屏布局，既可以讓單個(gè)應(yīng)用分別在兩塊屏幕上各呈現(xiàn)一個(gè)窗口，也可以作為單個(gè)窗口完整鋪滿兩塊屏幕。不論是充分利用接縫的存在，還是說(shuō)盡可能地利用全部屏幕區(qū)域來(lái)聚焦單個(gè)內(nèi)容，應(yīng)用程序應(yīng)該都可以做到。當(dāng)然，這些情況我們隨后會(huì)單獨(dú)說(shuō)到。
首先，作為一個(gè)已有的應(yīng)用程序，在雙屏設(shè)備上應(yīng)該能夠繼承原有的功能，并且盡可能地兼容雙屏的體驗(yàn)。在開始討論如何為雙屏場(chǎng)景進(jìn)行設(shè)計(jì)應(yīng)用之前，我們先應(yīng)該對(duì)雙屏交互進(jìn)行介紹。
雙屏的響應(yīng)式布局
首先，無(wú)論屏幕尺寸如何，方向如何，應(yīng)用程序應(yīng)該都可以保持良好的外觀，善用 UI 平臺(tái)的現(xiàn)有的布局技術(shù)，通過(guò)合理地縮放來(lái)自適應(yīng)，填滿屏幕。如果你的屏幕元素依賴屏幕長(zhǎng)寬比，那么應(yīng)該善用平臺(tái)給的 API 來(lái)進(jìn)行靈活的優(yōu)化。
考慮到你的應(yīng)用將會(huì)在很多不同尺寸、不同長(zhǎng)寬比、不同類型的設(shè)備上運(yùn)行，所以你的應(yīng)用程序應(yīng)該足以應(yīng)對(duì)各種不同的情況。請(qǐng)記住，你的設(shè)計(jì)將會(huì)遭遇和以往截然不同的屏幕尺寸和長(zhǎng)寬比，比如縱向（全景視圖）、橫向（較寬的全景視圖）、縱向雙屏分別顯示等不同情況。
考慮所有的屏幕方向
用戶在很多平臺(tái)上有習(xí)慣的、常見的屏幕方向，比如在 Android 和 iOS 上，通常應(yīng)用是豎屏顯示的，在 Windows 上，多數(shù)情況下是橫向全屏顯示的。而在雙屏設(shè)備上，這種情況會(huì)發(fā)生改變。
比如你的應(yīng)用原本是為豎屏設(shè)計(jì)的，但是需要經(jīng)常輸入內(nèi)容，那么你要考慮到雙屏設(shè)備上，你的應(yīng)用可能是會(huì)被橫屏顯示，用戶會(huì)像用筆記本電腦那樣來(lái)使用應(yīng)用，也就是說(shuō)兩塊屏幕都橫向顯示，靠下平攤在桌面的屏幕會(huì)顯示虛擬鍵盤或者手寫區(qū)域，作為輸入窗口，而顯示窗口也是橫向的。
雙屏為多任務(wù)提供更好的顯示環(huán)境，你不會(huì)知道用戶會(huì)在什么樣的場(chǎng)合，以什么樣的姿勢(shì)來(lái)握持設(shè)備，但是考慮潛在的使用姿態(tài)，可以讓你更好得對(duì)應(yīng)用進(jìn)行設(shè)計(jì)和優(yōu)化。
根據(jù)我們的研究，如果你的應(yīng)用是注重輸入的應(yīng)用，那么用戶在平面上打字和輸入將會(huì)是最舒服也最常見的姿勢(shì)。那么在這種情況下，你應(yīng)該針對(duì)橫屏顯示進(jìn)行針對(duì)性的優(yōu)化。
支持多種輸入模式
對(duì)于新的雙屏設(shè)備，通常都支持多種輸入模式，包括打字輸入，屏幕觸摸和手寫筆這樣的截至。這意味著用戶可以靈活地根據(jù)需求，選擇不同的姿勢(shì)和輸入模式，并且快速切換，以適應(yīng)不同的需求。
換句話來(lái)說(shuō)，就是你在設(shè)計(jì)的時(shí)候，需要支持所有的輸入方式，以便用戶可以自由選擇交互模式。
托拽交互
你的應(yīng)用應(yīng)該支持屏幕托拽，這不僅是為了兼容雙屏設(shè)備，而是對(duì)于絕大多數(shù)的設(shè)備的使用情況而進(jìn)行兼容，確保用戶體驗(yàn)的一致和靈活。只不過(guò)相比于在屏幕單屏上進(jìn)行托拽移動(dòng)，在雙屏上托拽移動(dòng)，將會(huì)帶來(lái)更多的可能性，并且這樣也將會(huì)在雙屏使用場(chǎng)景之下，最為重要的交互模式之一。
為了確保托拽操作的自然，你需要確保諸如文本、圖像、視頻等常見的交互對(duì)象和元素，可以在任何地方進(jìn)行剪切、復(fù)制、粘貼，并且對(duì)于共享和放松之類的操作也啟用托拽操作，這將最大化地利用雙屏的優(yōu)勢(shì)。
應(yīng)用的多屏呈現(xiàn)
用戶會(huì)希望在兩塊屏幕上并排顯示同一應(yīng)用中的不同內(nèi)容，因此你的你用應(yīng)該支持多實(shí)例呈現(xiàn)和運(yùn)行。
多媒體內(nèi)容畫中畫體驗(yàn)
如果你的應(yīng)用是一個(gè)多媒體應(yīng)用，那么應(yīng)該支持畫中畫模式，用戶可以邊看視頻邊執(zhí)行別的操作。
上面提及的很多功能屬于基礎(chǔ)應(yīng)用要求，并不是專門針對(duì)雙屏設(shè)備而做，但是如果你的應(yīng)用支持上面的功能，那么在雙屏上將會(huì)明顯擁有更好的用戶體驗(yàn)。接下來(lái)，我們著重聊一下在雙屏設(shè)備上進(jìn)行設(shè)計(jì)的問(wèn)題。
在雙屏設(shè)備上，你的應(yīng)用應(yīng)當(dāng)支持在單個(gè)屏幕上運(yùn)行，也可以在雙屏上運(yùn)行，當(dāng)一個(gè)應(yīng)用在兩個(gè)屏幕上顯示的時(shí)候，我們稱之為「跨屏」，而跨屏顯示這個(gè)問(wèn)題對(duì)于雙屏設(shè)備而言，是至關(guān)重要的，如何顯示將會(huì)帶來(lái)巨大的影響。這種獨(dú)特交互模式可能會(huì)解鎖前所未有的使用方法。比如，有轉(zhuǎn)軸和接縫的雙屏設(shè)備，因?yàn)槠聊坏奶卣鞫浅＿m合分隔并行式的生產(chǎn)力解決方案。
跨屏是用戶的選擇
用戶有選擇如何使用應(yīng)用的方式的權(quán)力，包括何時(shí)跨屏顯示。某些應(yīng)用可能在單屏或者跨屏顯示的時(shí)候，看起來(lái)不夠好看，但是如何使用的權(quán)力，應(yīng)該交給用戶去選擇。
盡管本文會(huì)針對(duì)如何處理多屏布局提供幾種不同的方案和想法，但是請(qǐng)選擇適合你的用戶和應(yīng)用的呈現(xiàn)方式。
考慮用戶意圖和設(shè)備方向
當(dāng)你的兩個(gè)屏幕都被利用起來(lái)的時(shí)候（橫向雙屏，縱向雙屏），了解用戶的意圖至關(guān)重要。盡管還有更多的調(diào)研需要做，但是結(jié)合我們目前已有的觀察，可以得出如下的趨勢(shì)：
在為雙屏設(shè)備設(shè)計(jì)應(yīng)用的時(shí)候，有四種常見的布局方案是你需要考慮的。通常這取決于應(yīng)用是單屏還是跨屏，是默認(rèn)視圖還是全屏視圖：
1、單屏默認(rèn)模式
2、跨屏默認(rèn)模式
3、單屏全屏模式
4、跨屏全屏模式
當(dāng)單個(gè)應(yīng)用以單個(gè)窗口運(yùn)行，并且跨越兩個(gè)屏幕的時(shí)候，跨屏布局就出現(xiàn)了。如果你原有的應(yīng)用從未針對(duì)雙屏設(shè)備進(jìn)行優(yōu)化的話，那么系統(tǒng)會(huì)提示你「應(yīng)用將會(huì)擴(kuò)展并占據(jù)所有屏幕」，并且這個(gè)時(shí)候，應(yīng)用界面會(huì)自行調(diào)整大小，適應(yīng)新的尺寸。
這種情況下，界面中間的接縫會(huì)顯得非常明顯。這是雙屏設(shè)備先天的副產(chǎn)物。要如何優(yōu)雅地處理接縫？這就是下面這節(jié)內(nèi)容將會(huì)探討的問(wèn)題，我們將會(huì)提供一些常見的處理方案yi。
是否總是要適應(yīng)接縫？
如果你的應(yīng)用不作任何優(yōu)化就直接在雙屏設(shè)備上投放使用，接縫并不總會(huì)給用戶體驗(yàn)帶來(lái)影響。比如地圖類應(yīng)用，用戶可以隨意移動(dòng)地圖內(nèi)容，接縫帶來(lái)的割裂并不會(huì)對(duì)使用體驗(yàn)造成實(shí)質(zhì)性的影響。在后面「擴(kuò)展畫布」這一節(jié)，將會(huì)對(duì)這個(gè)問(wèn)題進(jìn)行深入討論。
但是對(duì)于另外一部分應(yīng)用，接縫帶來(lái)的問(wèn)題就非常嚴(yán)重了。比如在一個(gè)表格類應(yīng)用當(dāng)中，如果不作修改和調(diào)整，有的內(nèi)容會(huì)直接被接縫給割裂開，你必須進(jìn)行滾動(dòng)才能正常查看。而對(duì)于某些相對(duì)更加固定無(wú)法移動(dòng)的元素而言，接縫帶來(lái)的體驗(yàn)是破壞性的。而這個(gè)時(shí)候，我們需要使用一些技術(shù)方案來(lái)處理這個(gè)問(wèn)題。
規(guī)避接縫
將元素移到一邊
由于兩塊屏幕之間有明顯的接縫，因此當(dāng)用戶在使用應(yīng)用的時(shí)候，某些 UI 元素可能會(huì)正好被穿過(guò)接縫，邏輯上這不會(huì)影響功能，但是如果將這些 UI 元素移動(dòng)到屏幕的一邊來(lái)顯示，會(huì)提供更好的體驗(yàn)。最好避免在接縫處顯示文本內(nèi)容，這會(huì)影響可讀性。
應(yīng)用程序?qū)υ捒驊?yīng)該移到屏幕的一邊，尤其是需要點(diǎn)擊按鈕操作的時(shí)候。
底部菜單應(yīng)該移動(dòng)到屏幕一側(cè)，而不是延伸到兩個(gè)屏幕上。
用戶調(diào)用上下文菜單的時(shí)候，應(yīng)該將接縫視作為屏幕邊界處理，尤其是在靠近屏幕邊緣的地方觸發(fā)菜單的時(shí)候。
應(yīng)用內(nèi)的下拉菜單或者可擴(kuò)展容器如果可能會(huì)跨越接縫的話，應(yīng)該改變擴(kuò)展方向。
當(dāng)整個(gè)應(yīng)用界面擴(kuò)展開來(lái)的時(shí)候，應(yīng)該整個(gè)移動(dòng)到屏幕的上側(cè)，而不是在靠近中心的位置橫跨接縫。
貼合接縫
使用偶數(shù)列并和接縫對(duì)齊
當(dāng)界面中使用網(wǎng)格布局的時(shí)候，垂直或者水平方向盡量使用偶數(shù)行或者偶數(shù)列，這樣可以讓接縫和界面間隙正好重合，用戶可以更加舒適地查看信息。
在網(wǎng)格中使用偶數(shù)列，尤其是對(duì)于容器、表單，并且考慮到接縫來(lái)控制間距。
除此之外，還有許多應(yīng)用會(huì)考慮充分利用另外一個(gè)屏幕來(lái)顯示彈出菜單或者下級(jí)頁(yè)面的內(nèi)容。這種使用邏輯確實(shí)會(huì)讓應(yīng)用更加易用，并且在視覺上會(huì)更加干凈清爽。但是請(qǐng)記住，如果彈出的界面并不是全屏的，可能會(huì)暗示它是可折疊和可關(guān)閉的，因此，你需要根據(jù)實(shí)際的設(shè)計(jì)需求，來(lái)靈活的處理呈現(xiàn)樣式。全覆蓋另外一屏的彈出界面，更加適合小尺寸屏幕。
重新排列 UI 元素
移動(dòng)到接縫的任一側(cè)
還有一種用來(lái)優(yōu)化響應(yīng)式布局的方法是，當(dāng)屏幕方向或者大小發(fā)生變化的時(shí)候，重新排列你的內(nèi)容。這種方式讓你可以在兩個(gè)屏幕上隨意擴(kuò)展你的內(nèi)容，你可以通過(guò)分組來(lái)重新排列，以更有目的的方式來(lái)適配屏幕和內(nèi)容。
遮罩和分割
對(duì)于一些無(wú)法重新排列的元素，比如全屏圖片和視頻，這個(gè)時(shí)候只能使用遮罩和分割的方式來(lái)處理。
遮罩的思路是，將接縫視作為一個(gè)遮罩元素，而圖片被它給遮擋了一部分，根據(jù)格式塔原理，我們的大腦會(huì)自動(dòng)補(bǔ)足缺少的部分，遮罩遮罩處理方式適合處理多媒體（視頻，圖片等）這樣的畫布類型的場(chǎng)景，在這些場(chǎng)景下，保持圖像的連續(xù)性比顯示內(nèi)容的完整性更加重要。
分割的思路是將內(nèi)容均勻切割為兩個(gè)部分，完整呈現(xiàn)，這對(duì)于包含有多個(gè)控件和元素的普通界面而言，是更加合理的處理方式，包括可能會(huì)出現(xiàn)在屏幕中間的按鈕。
根據(jù)類型的不同，這兩種處理方式各有優(yōu)勢(shì)，我們將繼續(xù)跟進(jìn)不同的用戶行為特征，來(lái)尋求更優(yōu)的解決方案。
文章來(lái)源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net