交互設(shè)計師必學(xué)的跨屏設(shè)計規(guī)范

時間：2022-05-29 12:27:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 12:27:01 來源：網(wǎng)絡(luò)營銷

我們總在期待 Next Big Thing，企盼下一次數(shù)字革命。喊了這么多年的物聯(lián)網(wǎng)現(xiàn)在還沒有明顯起來的跡象，而 VR 也因為頭戴設(shè)備的大型化和沉浸式場景的泛用性較差的原因，反倒是 AR 和 MR 依托智能手機(jī)、浴霸式鏡頭組和 APP 有一定起色，但是也沒有到革命性改變的程度，只能算是一個小趨勢。當(dāng)然，人工智能/深度學(xué)習(xí)所帶來的影響更加深遠(yuǎn)，但是短時間以內(nèi)，它所帶來的變化趨近于隱形。

而最近2年，各種雙屏和柔性屏的發(fā)布，則可能是距離我們最近的硬件變革，可能和柔性屏/雙屏設(shè)備有關(guān)。

也許現(xiàn)在說硬件交互設(shè)計到了類似 2007 年 iPhone 發(fā)布一樣拐點有點夸張，但是對于現(xiàn)在幾乎純粹拼配置死水微瀾一樣的手機(jī)電腦市場而言，這種明顯區(qū)別于以往的硬件設(shè)計，將會直接帶來交互、設(shè)計和體驗上的改變。

一、柔性屏和雙屏設(shè)備

三星 Galaxy Fold 和 Moto Razr 的發(fā)布，確實給廣大硬件廠商好好打了一個樣。

盡管Galaxy Fold 折戟沉沙了，但是高昂的沉沒成本和大勢所趨讓三星肯定不能就這么算了， 回爐再造一番之后今年又帶著船薪版本的 Galaxy Fold 2 殺將回來，順帶還兼顧女性市場整了一個對標(biāo) Moto Razr 的化妝盒手機(jī) Galaxy Z flip。

當(dāng)然，華為的 Mate Xs 也是相當(dāng)優(yōu)秀的產(chǎn)品，這款明顯對標(biāo)三星 Galaxy Fold 2 的產(chǎn)品，并沒有將柔性屏制作成為向內(nèi)折疊，而是完全翻過來，將它作為外屏來進(jìn)行設(shè)計，反向折疊，展開的時候，屏幕自然延展。

不過思路最為清奇的并非是華為，而是 TCL。就在這幾天，TCL 帶來了兩款全新的原型機(jī)，一款手機(jī)帶有兩個折疊軸，相當(dāng)于是將傳統(tǒng)手機(jī)屏幕延展到以往的3倍，徹底折疊開相當(dāng)于是一個 10英寸的平板電腦（回過頭來想，就像是將一個平板電腦反向折疊到手機(jī)的大小，但是重量不變……）。

另外一款原型機(jī)則選擇了抽拉式的設(shè)計，機(jī)身可以如同抽屜一樣拉開，柔軟的屏幕會被拉出，延展開來差不多和 iPad Mini 一個大小了。

除了這幾款之外，在今年年初的 CES 消費電子展上，聯(lián)想、戴爾、華碩，這些目前世界上最大的消費電子制造商，紛紛帶來了各自的折疊屏和雙屏設(shè)備。

聯(lián)想帶來的 ThinkPad X1 Fold，是一個價格昂貴的柔性折疊屏平板電腦，它額外附帶了一個藍(lán)牙鍵盤。

考慮到聯(lián)想在此之前已經(jīng)發(fā)布過帶有LEC+墨水屏的雙屏設(shè)備 Yoga Book 2，可以說聯(lián)想是已經(jīng)具備了制造兩種不同類型屏幕設(shè)備的能力。

作為對手的戴爾，帶來了分別對標(biāo)聯(lián)想這兩個系列的對應(yīng)產(chǎn)品：Concept Ori 和 Concept Duet。

Concept Ori 采用的是兩塊傳統(tǒng)硬屏，你既可以讓一款屏幕作為屏幕，另一塊作為虛擬輸入鍵盤或者手繪板，也可以使用配備的藍(lán)牙鍵盤，吸附在底下的屏幕上來進(jìn)行輸入，而且當(dāng)鍵盤移動到靠近轉(zhuǎn)軸的地方，還能讓底下露出的半塊屏幕作為觸控板來使用：



Concept Duet 在概念上則和 聯(lián)想的 ThinkPad X1 Fold 類似，一塊柔性可折疊的屏幕，便于收納，一體連接。



看了這么多硬件，是不是覺得信息量有點大？不過簡單來說，所有的這些產(chǎn)品，都在說一件事情：屏幕要延展開，這是一個正在發(fā)生的趨勢。

同時，我們還注意到一個很明顯的特征，就是所有的這些柔性屏設(shè)備都非常的……騷，且貴。動輒兩三千美元的起步價，如果可靠堅挺也就算了，不僅轉(zhuǎn)軸易損，且屏幕也存在易損的問題。根據(jù) ifanr 最新的上手評測，即使是在優(yōu)化了轉(zhuǎn)軸和屏幕折疊角度之后，三星所發(fā)布的 Galaxy Z Flip 的屏幕中段依然有著不可忽視的折痕，這一問題可能會是絕大多數(shù)折疊柔性屏設(shè)備的通病。

與之相反，采用硬質(zhì)雙屏設(shè)計的硬件設(shè)備，從生產(chǎn)成本、工藝成熟度、價格上，都更加有優(yōu)勢。

值得注意的是，柔性折疊屏和硬質(zhì)雙屏設(shè)備，在基本的使用體驗和邏輯上是一致的，除了極少數(shù)特殊的設(shè)備之外（比如 TCL的雙折疊式的概念機(jī)），多數(shù)情況下，兩者是差不多的。

只不過存在一個問題，雙屏設(shè)備的交互和體驗，需要有對應(yīng)操作系統(tǒng)支持，因為從單屏到雙屏，其實交互邏輯已經(jīng)發(fā)生了巨大的改變。

二、雙屏硬件的操作系統(tǒng)

一直在創(chuàng)新且「穩(wěn)健」地更新軟硬件的蘋果公司，應(yīng)該不會在市場未曾成熟的情況下選擇發(fā)布硬件，這意味著你不會很快看到雙屏 iOS 硬件，而面向著大量 OEM 廠商的 Android 和 Windows 則截然不同。這兩年廠商已經(jīng)身體力行證明了一件事情：只要操作系統(tǒng)和設(shè)計跟上，硬件馬上量產(chǎn)不是問題。

最近泄漏的 Android 11 的新特性已經(jīng)出現(xiàn)了可折疊屏幕的影子，但是具體情況恐怕要到因為疫情跳票的 Google I/O 大會上會揭曉答案。但是另一邊，賊心不死的微軟，已經(jīng)開始布局面向可雙屏設(shè)備的新一代操作系統(tǒng) Windows 10X了。

微軟發(fā)布的兩款雙屏設(shè)備 Surface Duo 和 Surface Neo 并不都是采用尚未發(fā)布的 Windows 10X 操作系統(tǒng)，但是兩者都沿用了幾乎相同的交互邏輯，較小的 Neo 采用的是 Android 操作系統(tǒng)。這兩款硬件和系統(tǒng)交互設(shè)計，將會在未來一段時間以內(nèi)，成為雙屏硬件的軟件交互的重要參考和主要標(biāo)桿，聯(lián)想和戴爾這波 OEM 廠商，無疑是參考著微軟的風(fēng)向標(biāo)來搞硬件產(chǎn)品的。

毫無疑問，Windows 10X 很精準(zhǔn)地拿捏了市場方向和設(shè)計的方向——雙屏比柔性屏更容易實現(xiàn)，相應(yīng)的，接縫是必須解決的基礎(chǔ)交互問題。在新系統(tǒng)的交互設(shè)計上，微軟優(yōu)先考慮解決接縫的問題。解決了接縫問題，那么接下來，就需要討論系統(tǒng)和應(yīng)用程序，在具體交互上，到底有哪些常見的交互模式，和硬件要如何結(jié)合。

傳統(tǒng)而臃腫的「開始」菜單欄在 Windows 10X 當(dāng)中，被精簡為我們更熟悉的模式，新的 Windows 10X 在原有的 Windows 10 的基礎(chǔ)上，應(yīng)該有對移動端（比如 ARM 架構(gòu)的CPU）和小屏幕有更好的支持。

但是，更有價值的，是微軟為雙屏設(shè)備所制定的交互設(shè)計規(guī)范。

三、雙屏的交互規(guī)則

雙屏設(shè)備可以基于不同的工業(yè)設(shè)計，有多種硬件樣式。微軟發(fā)布的 Surface Neo 和 Surface Duo 可以作為典型的雙屏設(shè)備作為參考。雙屏本身可以借由鉸鏈、轉(zhuǎn)軸來連接，也可以基于柔性屏來實現(xiàn)。

所有的雙屏設(shè)備都具備有折疊、旋轉(zhuǎn)、翻轉(zhuǎn)的功能，兩塊屏幕都可以用來作為顯示，也可以一個做屏幕一個承載虛擬鍵盤，當(dāng)然也可以借由外設(shè)，構(gòu)建、組合成為新的模式。所以，為這樣的硬件設(shè)計的時候，需要考慮到各種不同的情況，并且適配硬件，幫助用戶實現(xiàn)更多的目標(biāo)。

當(dāng)用戶打開應(yīng)用的時候，它的主要界面窗口應(yīng)該最大化，占據(jù)一塊屏幕的全寬和全高。這樣用戶可以一次打開多個不同的應(yīng)用，顯示在雙屏上。

當(dāng)然，你的APP 也可以完整鋪滿兩個屏幕，這個界面布局被稱為「跨屏布局」。在默認(rèn)情況下，它應(yīng)該像在大屏幕上一樣，一個窗口跨屏幕顯示。但是你可以修改這種模式，讓它可以鋪滿兩個屏幕的同時，還可以兼顧到中間有轉(zhuǎn)軸和鉸鏈的硬件。對于這個問題，我們隨后有詳細(xì)的討論。

1、擁抱和改進(jìn)現(xiàn)有的功能

比起傳統(tǒng)的響應(yīng)式布局，對于雙屏硬件，我們要討論的「響應(yīng)」模式要復(fù)雜得多。就像下面這張圖中所說的，要為這樣多樣、復(fù)雜的情況進(jìn)行設(shè)計：

我們默認(rèn)用戶在多數(shù)時候，是處于雙屏展開的狀態(tài)，當(dāng)用戶打開 APP 的時候，它的主要界面窗口，將會最大化占據(jù)一個屏幕，這個時候另一個屏幕處于空置狀態(tài)，用戶可以在這個屏幕上打開另外的應(yīng)用，并且用戶可以通過托拽窗口的方式，來重新整理窗口和APP的排布模式（具體可查看億企邦《移動APP導(dǎo)航設(shè)計的10種模式》的相關(guān)介紹）。

同時，單個應(yīng)用程序也應(yīng)該可以進(jìn)行跨屏布局，既可以讓單個應(yīng)用分別在兩塊屏幕上各呈現(xiàn)一個窗口，也可以作為單個窗口完整鋪滿兩塊屏幕。不論是充分利用接縫的存在，還是說盡可能地利用全部屏幕區(qū)域來聚焦單個內(nèi)容，應(yīng)用程序應(yīng)該都可以做到。當(dāng)然，這些情況我們隨后會單獨說到。

2、擁抱和改進(jìn)現(xiàn)有的功能

首先，作為一個已有的應(yīng)用程序，在雙屏設(shè)備上應(yīng)該能夠繼承原有的功能，并且盡可能地兼容雙屏的體驗。在開始討論如何為雙屏場景進(jìn)行設(shè)計應(yīng)用之前，我們先應(yīng)該對雙屏交互進(jìn)行介紹。

（1）、雙屏的響應(yīng)式布局

首先，無論屏幕尺寸如何，方向如何，應(yīng)用程序應(yīng)該都可以保持良好的外觀，善用 UI 平臺的現(xiàn)有的布局技術(shù)，通過合理地縮放來自適應(yīng)，填滿屏幕。如果你的屏幕元素依賴屏幕長寬比，那么應(yīng)該善用平臺給的 API 來進(jìn)行靈活的優(yōu)化。

考慮到你的應(yīng)用將會在很多不同尺寸、不同長寬比、不同類型的設(shè)備上運行，所以你的應(yīng)用程序應(yīng)該足以應(yīng)對各種不同的情況。請記住，你的設(shè)計將會遭遇和以往截然不同的屏幕尺寸和長寬比，比如縱向（全景視圖）、橫向（較寬的全景視圖）、縱向雙屏分別顯示等不同情況（具體可查看億企邦《響應(yīng)式設(shè)計時代該如何進(jìn)行網(wǎng)站設(shè)計》的相關(guān)介紹）。

（2）、考慮所有的屏幕方向

用戶在很多平臺上有習(xí)慣的、常見的屏幕方向，比如在 Android 和 iOS 上，通常應(yīng)用是豎屏顯示的，在 Windows 上，多數(shù)情況下是橫向全屏顯示的。而在雙屏設(shè)備上，這種情況會發(fā)生改變。

比如你的應(yīng)用原本是為豎屏設(shè)計的，但是需要經(jīng)常輸入內(nèi)容，那么你要考慮到雙屏設(shè)備上，你的應(yīng)用可能是會被橫屏顯示，用戶會像用筆記本電腦那樣來使用應(yīng)用，也就是說兩塊屏幕都橫向顯示，靠下平攤在桌面的屏幕會顯示虛擬鍵盤或者手寫區(qū)域，作為輸入窗口，而顯示窗口也是橫向的。

雙屏為多任務(wù)提供更好的顯示環(huán)境，你不會知道用戶會在什么樣的場合，以什么樣的姿勢來握持設(shè)備，但是考慮潛在的使用姿態(tài)，可以讓你更好得對應(yīng)用進(jìn)行設(shè)計和優(yōu)化。

根據(jù)我們的研究，如果你的應(yīng)用是注重輸入的應(yīng)用，那么用戶在平面上打字和輸入將會是最舒服也最常見的姿勢。那么在這種情況下，你應(yīng)該針對橫屏顯示進(jìn)行針對性的優(yōu)化。

（3）、支持多種輸入模式

對于新的雙屏設(shè)備，通常都支持多種輸入模式，包括打字輸入，屏幕觸摸和手寫筆這樣的截至。這意味著用戶可以靈活地根據(jù)需求，選擇不同的姿勢和輸入模式，并且快速切換，以適應(yīng)不同的需求。

換句話來說，就是你在設(shè)計的時候，需要支持所有的輸入方式，以便用戶可以自由選擇交互模式。

（4）、托拽交互

你的應(yīng)用應(yīng)該支持屏幕托拽，這不僅是為了兼容雙屏設(shè)備，而是對于絕大多數(shù)的設(shè)備的使用情況而進(jìn)行兼容，確保用戶體驗的一致和靈活。只不過相比于在屏幕單屏上進(jìn)行托拽移動，在雙屏上托拽移動，將會帶來更多的可能性，并且這樣也將會在雙屏使用場景之下，最為重要的交互模式之一。

為了確保托拽操作的自然，你需要確保諸如文本、圖像、視頻等常見的交互對象和元素，可以在任何地方進(jìn)行剪切、復(fù)制、粘貼，并且對于共享和放松之類的操作也啟用托拽操作，這將最大化地利用雙屏的優(yōu)勢。

（5）、應(yīng)用的多屏呈現(xiàn)

用戶會希望在兩塊屏幕上并排顯示同一應(yīng)用中的不同內(nèi)容，因此你的你用應(yīng)該支持多實例呈現(xiàn)和運行。

（6）、多媒體內(nèi)容畫中畫體驗

如果你的應(yīng)用是一個多媒體應(yīng)用，那么應(yīng)該支持畫中畫模式，用戶可以邊看視頻邊執(zhí)行別的操作。

3、雙屏用戶體驗常見注意事項

上面提及的很多功能屬于基礎(chǔ)應(yīng)用要求，并不是專門針對雙屏設(shè)備而做，但是如果你的應(yīng)用支持上面的功能，那么在雙屏上將會明顯擁有更好的用戶體驗。接下來，我們著重聊一下在雙屏設(shè)備上進(jìn)行設(shè)計的問題。

在雙屏設(shè)備上，你的應(yīng)用應(yīng)當(dāng)支持在單個屏幕上運行，也可以在雙屏上運行，當(dāng)一個應(yīng)用在兩個屏幕上顯示的時候，我們稱之為「跨屏」，而跨屏顯示這個問題對于雙屏設(shè)備而言，是至關(guān)重要的，如何顯示將會帶來巨大的影響。這種獨特交互模式可能會解鎖前所未有的使用方法。比如，有轉(zhuǎn)軸和接縫的雙屏設(shè)備，因為屏幕的特征而非常適合分隔并行式的生產(chǎn)力解決方案。

在設(shè)計雙屏設(shè)備之前，你需要遵循下面的四個基本原則：

①、提供持續(xù)的價值：能夠良好地支持不同的交互模式，充分利用不同交互模式和多屏交互，讓用戶可以靈活地執(zhí)行任務(wù)。它不應(yīng)該只有有限的使用方法和模式，與其簡單的支持一兩種模式，不如多考慮幾種不同的交互模式。

②、不要只想著「跨屏」：應(yīng)用不應(yīng)該只在跨屏狀態(tài)下才好用，不要將一些基本的功能在非跨屏狀態(tài)下隱藏，避免用戶需要跨屏才能用到基本功能。

③、用戶始終享有掌控力：為了避免給用戶帶來不可預(yù)期的破壞性體驗，是否要跨屏，這個應(yīng)該由用戶自己來進(jìn)行選擇，而不是一打開就跨屏。

④、讓跨屏可預(yù)測：了解用戶使用跨屏模式的場景，并且使用貼合用戶預(yù)期的設(shè)計。確保不同的跨屏模式和呈現(xiàn)結(jié)果是用戶可預(yù)期的。

（1）、跨屏是用戶的選擇

用戶有選擇如何使用應(yīng)用的方式的權(quán)力，包括何時跨屏顯示。某些應(yīng)用可能在單屏或者跨屏顯示的時候，看起來不夠好看，但是如何使用的權(quán)力，應(yīng)該交給用戶去選擇。

盡管本文會針對如何處理多屏布局提供幾種不同的方案和想法，但是請選擇適合你的用戶和應(yīng)用的呈現(xiàn)方式。

（2）、考慮用戶意圖和設(shè)備方向

當(dāng)你的兩個屏幕都被利用起來的時候（橫向雙屏，縱向雙屏），了解用戶的意圖至關(guān)重要。盡管還有更多的調(diào)研需要做，但是結(jié)合我們目前已有的觀察，可以得出如下的趨勢：

①、在橫向雙屏模式下，用戶更多希望充分利用屏幕空間，因此量屏幕多是用來擴(kuò)展展示內(nèi)容；

②、在縱向雙屏模式下，用戶通常喜歡執(zhí)行多任務(wù)或者提高生產(chǎn)力的活動。因此這兩塊屏幕會被分開使用，或者分組使用。

（3）、考慮所有支持的布局

在為雙屏設(shè)備設(shè)計應(yīng)用的時候，有四種常見的布局方案是你需要考慮的。通常這取決于應(yīng)用是單屏還是跨屏，是默認(rèn)視圖還是全屏視圖：

①、單屏默認(rèn)模式

默認(rèn)情況下，應(yīng)用程序應(yīng)該是最大化狀態(tài)占據(jù)一個屏幕。在雙屏分別顯示模式下，用戶可以單獨同兩屏的應(yīng)用界面進(jìn)行交互和處理，確?？梢赃M(jìn)行使用、比較甚至交叉引用。

這個狀態(tài)應(yīng)該是默認(rèn)的。就像 之前說的，如果你的應(yīng)用已經(jīng)支持了不同分辨率、不同長寬比的屏幕，那么你不用做其他更多的事情。

②、跨屏默認(rèn)模式

當(dāng)設(shè)備處于雙屏狀態(tài)下（橫屏雙屏或者豎屏雙屏），用戶可以將單個窗口從一個屏幕直接延伸覆蓋兩個屏幕，為內(nèi)容呈現(xiàn)提供更多的空間。這應(yīng)該是用戶自己的選擇，而不應(yīng)該作為默認(rèn)打開的模式固化到程序和設(shè)置當(dāng)中。

這一模式應(yīng)該是可選的。這種跨屏顯示單個窗口的模式，應(yīng)該是雙屏設(shè)備所獨有的。如果你對于你的應(yīng)用不做 針對性（針對雙屏）的修改的話，它會像是在一個完整的大屏幕上顯示一樣。但是，你也可以針對雙屏進(jìn)行優(yōu)化，確保你的應(yīng)用可以兼容雙屏設(shè)備的獨特形態(tài)。這些將在后續(xù)詳細(xì)說明。

③、單屏全屏模式

這種模式和之前的單屏默認(rèn)模式是類似的，但是系統(tǒng)的UI（系統(tǒng)的任務(wù)欄、菜單欄、程序菜單、頂部標(biāo)題等）將會隱藏，這樣可以給你帶來沉浸式的體驗，是游戲和視頻類應(yīng)用的理想選擇。

這種模式應(yīng)該是可選的。你可以使用系統(tǒng)提供的 API 來實現(xiàn)單屏全屏模式。

④、跨屏全屏模式

同樣的，你可以通過開發(fā)和優(yōu)化來實現(xiàn)適合雙屏的跨屏顯示模式。如果用戶在跨屏的時候選擇的是跨屏全屏顯示模式，那么應(yīng)用在擴(kuò)展之后，將會覆蓋整個屏幕，并隱藏系統(tǒng)UI 元素。

這種模式應(yīng)該是可選的，你需要考慮的因素和跨屏默認(rèn)模式類似。

4、如何處理接縫

當(dāng)單個應(yīng)用以單個窗口運行，并且跨越兩個屏幕的時候，跨屏布局就出現(xiàn)了。如果你原有的應(yīng)用從未針對雙屏設(shè)備進(jìn)行優(yōu)化的話，那么系統(tǒng)會提示你「應(yīng)用將會擴(kuò)展并占據(jù)所有屏幕」，并且這個時候，應(yīng)用界面會自行調(diào)整大小，適應(yīng)新的尺寸。

這種情況下，界面中間的接縫會顯得非常明顯。這是雙屏設(shè)備先天的副產(chǎn)物。要如何優(yōu)雅地處理接縫？這就是下面這節(jié)內(nèi)容將會探討的問題，我們將會提供一些常見的處理方案。

（1）、是否總是要適應(yīng)接縫？

如果你的應(yīng)用不作任何優(yōu)化就直接在雙屏設(shè)備上投放使用，接縫并不總會給用戶體驗帶來影響。比如地圖類應(yīng)用，用戶可以隨意移動地圖內(nèi)容，接縫帶來的割裂并不會對使用體驗造成實質(zhì)性的影響。在后面「擴(kuò)展畫布」這一節(jié)，將會對這個問題進(jìn)行深入討論。

但是對于另外一部分應(yīng)用，接縫帶來的問題就非常嚴(yán)重了。比如在一個表格類應(yīng)用當(dāng)中，如果不作修改和調(diào)整，有的內(nèi)容會直接被接縫給割裂開，你必須進(jìn)行滾動才能正常查看。而對于某些相對更加固定無法移動的元素而言，接縫帶來的體驗是破壞性的。而這個時候，我們需要使用一些技術(shù)方案來處理這個問題。

（2）、規(guī)避接縫

由于兩塊屏幕之間有明顯的接縫，因此當(dāng)用戶在使用應(yīng)用的時候，某些 UI 元素可能會正好被穿過接縫，邏輯上這不會影響功能，但是如果將這些 UI 元素移動到屏幕的一邊來顯示，會提供更好的體驗。最好避免在接縫處顯示文本內(nèi)容，這會影響可讀性。

應(yīng)用程序?qū)υ捒驊?yīng)該移到屏幕的一邊，尤其是需要點擊按鈕操作的時候。

底部菜單應(yīng)該移動到屏幕一側(cè)，而不是延伸到兩個屏幕上。

用戶調(diào)用上下文菜單的時候，應(yīng)該將接縫視作為屏幕邊界處理，尤其是在靠近屏幕邊緣的地方觸發(fā)菜單的時候。

應(yīng)用內(nèi)的下拉菜單或者可擴(kuò)展容器如果可能會跨越接縫的話，應(yīng)該改變擴(kuò)展方向。

當(dāng)整個應(yīng)用界面擴(kuò)展開來的時候，應(yīng)該整個移動到屏幕的上側(cè)，而不是在靠近中心的位置橫跨接縫。

（3）、貼合接縫

使用偶數(shù)列并和接縫對齊。

當(dāng)界面中使用網(wǎng)格布局的時候，垂直或者水平方向盡量使用偶數(shù)行或者偶數(shù)列，這樣可以讓接縫和界面間隙正好重合，用戶可以更加舒適地查看信息。

在網(wǎng)格中使用偶數(shù)列，尤其是對于容器、表單，并且考慮到接縫來控制間距。

除此之外，還有許多應(yīng)用會考慮充分利用另外一個屏幕來顯示彈出菜單或者下級頁面的內(nèi)容。這種使用邏輯確實會讓應(yīng)用更加易用，并且在視覺上會更加干凈清爽。



但是請記住，如果彈出的界面并不是全屏的，可能會暗示它是可折疊和可關(guān)閉的，因此，你需要根據(jù)實際的設(shè)計需求，來靈活的處理呈現(xiàn)樣式。全覆蓋另外一屏的彈出界面，更加適合小尺寸屏幕。

（4）、重新排列 UI 元素

移動到接縫的任一側(cè)

還有一種用來優(yōu)化響應(yīng)式布局的方法是，當(dāng)屏幕方向或者大小發(fā)生變化的時候，重新排列你的內(nèi)容。這種方式讓你可以在兩個屏幕上隨意擴(kuò)展你的內(nèi)容，你可以通過分組來重新排列，以更有目的的方式來適配屏幕和內(nèi)容。

（5）、遮罩和分割

對于一些無法重新排列的元素，比如全屏圖片和視頻，這個時候只能使用遮罩和分割的方式來處理。

遮罩的思路是，將接縫視作為一個遮罩元素，而圖片被它給遮擋了一部分，根據(jù)格式塔原理，我們的大腦會自動補(bǔ)足缺少的部分，遮罩遮罩處理方式適合處理多媒體（視頻，圖片等）這樣的畫布類型的場景，在這些場景下，保持圖像的連續(xù)性比顯示內(nèi)容的完整性更加重要。

分割的思路是將內(nèi)容均勻切割為兩個部分，完整呈現(xiàn)，這對于包含有多個控件和元素的普通界面而言，是更加合理的處理方式，包括可能會出現(xiàn)在屏幕中間的按鈕。

根據(jù)類型的不同，這兩種處理方式各有優(yōu)勢，我們將繼續(xù)跟進(jìn)不同的用戶行為特征，來尋求更優(yōu)的解決方案。

四、跨平臺的雙屏交互設(shè)計邏輯

需要在此強(qiáng)調(diào)的是，這種雙屏的設(shè)計范式，其實是跨平臺的通用規(guī)則——很程度上，這套交互邏輯是不受操作系統(tǒng)限制的，而且微軟很雞賊的一點在于，他們發(fā)布的 Surface Duo 和 Surface Neo 并非都使用了 Windows 10X 的系統(tǒng)，其中 Surface Duo 用的是 Android 系統(tǒng)，并且在微軟的這套規(guī)范當(dāng)中，還有一半的開發(fā)指南，是 Android 平臺的！

在開發(fā)文檔當(dāng)中，除了很具體地展示出了分別在 Android 平臺和 Windows 10X 平臺上的界面控件和交互設(shè)計范例，而且還加入了相關(guān)的代碼段示例，具體實現(xiàn)的方式，關(guān)鍵參數(shù)等信息。

1、雙屏應(yīng)用交互模式

之前的規(guī)范當(dāng)中，我們討論了如何去更好地適配接縫的問題，接下來，我們將會探討一下雙屏的應(yīng)用模式。

通常，應(yīng)用程序在雙屏硬件當(dāng)中，通常將會采用下面的5種模式，雖然它們并不是唯一的選擇，但是這5種推薦的常用模式，應(yīng)該能夠給你帶來足夠的想象空間。

2、畫布拓展模式

這種「畫布拓展」模式是最簡單的雙屏模式，但是這種模式非常強(qiáng)大。如果你需要更大的操作空間來執(zhí)行諸如繪圖這樣的工作，或者是需要寬闊、流動的畫布，并且如果某些重要的內(nèi)容被接縫所遮蓋（比如說網(wǎng)頁），那么用戶可以便捷地滑動，繞開接縫，看到內(nèi)容。這種處理方法最常見，而它的好處是在于可以提供更多的屏幕空間，而不是將內(nèi)容限制在單一屏幕上。

這種模式僅適用于一部分大面積UI畫布，接縫最多是遮蓋一部分只讀內(nèi)容，如果接縫遮蓋了關(guān)鍵的UI交互控件，依然需要你進(jìn)行調(diào)整 UI 以繞開接縫。

這種設(shè)計模式的價值：擴(kuò)展畫布，允許用戶在大畫布模式下瀏覽信息和內(nèi)容。

可以從這種模式中獲益的應(yīng)用范例：

? 地圖類應(yīng)用

? 繪圖類應(yīng)用

3、主從屏模式

所謂的主從屏模式并不難理解，它最常見的一種模式，是一屏幕顯示列表，而另外一屏顯示你所選中列表條目中的詳細(xì)內(nèi)容。當(dāng)你選中新的列表條目的時候，另外一側(cè)的詳情頁也跟著切換。這種主從屏模式是傳統(tǒng)的側(cè)邊欄列表-詳情頁的交互模式的延伸。最常見的范例是電子郵件和通訊錄這樣的應(yīng)用。

這樣一來，這種模式就利用了接縫的天然分割作用，它適用與絕大多數(shù)有層級的偏列表類信息展示。

就像之前說的，我們開始注意到用戶傾向于使用雙橫屏展開模式（類似攤開書本之后翻轉(zhuǎn)90度的狀態(tài)）來瀏覽信息的傾向，因此，你在設(shè)計的時候，可以在用戶翻轉(zhuǎn)屏幕的時候，改為上屏顯示單條目的主視圖，而下屏顯示詳細(xì)視圖的模式。

這種設(shè)計模式的價值：

將列表導(dǎo)航和詳情頁面去分開，讓用戶可以更加深入地了解內(nèi)容，同時還能夠清晰地了解自己在整個列表中的位置。

可以從這種模式中獲益的應(yīng)用范例：

? 具有列表或者圖庫的應(yīng)用

? 郵件類應(yīng)用

? 事務(wù)管理型應(yīng)用

? 照片或者圖片管理類應(yīng)用

? 帶有播放列表的音樂類應(yīng)用

? 具有復(fù)雜多樣層級結(jié)構(gòu)的應(yīng)用

4、并排翻頁模式

諸如信息閱讀類的應(yīng)用，其實大家會傾向于使用類似書本一樣的并排開本的分頁體驗，這可以使用雙屏天然的分隔機(jī)制，來并列查看多個項目，比如頁面和圖片，而不用用戶一個一個逐個查看。

根據(jù)你的應(yīng)用特點，你可以選擇一次翻兩頁，也可以一次翻一頁。

這種設(shè)計模式的價值：使用類似書本的并排布局設(shè)計，來創(chuàng)造更好的閱讀體驗（具體可查看億企邦《如何才能讓頁面文字閱讀起來更舒適》的相關(guān)介紹）。

可以從這種模式中獲益的應(yīng)用范例：

? 文檔類的應(yīng)用

? 涉及到內(nèi)容分頁的應(yīng)用

? 專門用來閱讀的應(yīng)用

?帶有畫布和畫板類控件的應(yīng)用

5、雙屏對比模式

如果你有應(yīng)用需要并排顯示對比同一文檔的不同樣式、或者同類型的不同文檔，那么你可以使用雙屏對比模式。

它用來顯示同一文檔的不同形態(tài)，以無縫的方式給用戶帶來更多的信息，例如一屏顯示餐廳的文本地址，另外一屏在地圖上顯示它的位置。

如果你需要在特定的視圖下顯示同一文檔、文件或者狀態(tài)，那么的應(yīng)用本身應(yīng)該支持多實例的展示，這樣才能充分利用系統(tǒng)提供的這一功能支持。這對于在支持選項卡的應(yīng)用非常有用，這樣你可以通過兩個選項卡打開類似的文檔、文件，進(jìn)行對比乃至于更多的操作。

這種設(shè)計模式的價值：在同一應(yīng)用內(nèi)，使用同一容器來顯示多個視圖，通過并排顯示進(jìn)行對比和其他的操作。



可以從這種模式中獲益的應(yīng)用范例：

? 涉及到并排顯示從而進(jìn)行前后對比（比如程序和文檔預(yù)覽）的編輯類工具

? 支持內(nèi)容和相應(yīng)的上下文信息展示的應(yīng)用（例如餐廳的地圖和其他文本信息的并列顯示）

? 讓用戶進(jìn)行相似項目的并列對比

? 使用兩個相同控件和畫布來顯示內(nèi)容，但是各自保持獨立（比如筆記類應(yīng)用，一屏繪圖一屏做筆記）

6、伴行面板模式

伴行面板模式模式是將一屏當(dāng)中被選中元素所涉及到的、原本被隱藏的下級菜單，或者下級信息，在另外一個屏幕中展示出來。

這種模式可以將一個面部或者畫布呈現(xiàn)在一個屏幕上，然后使用另外一個屏幕來顯示操作相關(guān)內(nèi)容、相應(yīng)的工具，子菜單，這樣達(dá)到充分利用屏幕空間的目的。根據(jù)不同的使用場景，你需要針對橫屏和豎屏模式進(jìn)行調(diào)試，選擇合適的展示方式。

這種設(shè)計模式的價值：將預(yù)先埋入到應(yīng)用中的次級信息，通過另外一屏展示出來。這樣的多層級展示，補(bǔ)充上下文環(huán)境，增加了交互的維度。

這種模式不僅能夠?qū)⒂脩羲@取的內(nèi)容和需要交互的工具區(qū)分開，而且使得用戶對于不同功能、目的的內(nèi)容，區(qū)分開來，有選擇地使用。在雙橫屏模式下，上屏顯示內(nèi)容，下屏進(jìn)行交互，可以帶來符合語境和人體工程學(xué)的體驗。

可以從這種模式中獲益的應(yīng)用范例：

? 有多層級的應(yīng)用，將輔助性的、上下文信息顯示在主屏旁邊

? 圖像和繪圖類的創(chuàng)意工具

? 音樂和視頻類的剪輯工具

? 游戲類的應(yīng)用

五、 外設(shè)交互模式

使用 Windows 10X 的雙屏硬件還有一個獨特的功能， Wonder Bar 。

以 Surface Neo 為例，它就額外附帶一個鍵盤，用來提高用戶的輸入效率，彌補(bǔ)屏幕鍵盤輸入體驗和速度上的不足。當(dāng)雙屏設(shè)備，比如 Surface Neo 以筆記本形態(tài)展開方式，鍵盤就可以以磁力吸附的方式，吸在底部邊緣，這個時候，露出的一部分屏幕就成了 Wonder Bar了，它和 新款Macbook Pro 上的 Smart Bar 有著異曲同工之妙，但是定制性、靈活性更強(qiáng)。

當(dāng)然，如果你使用的屏幕虛擬鍵盤的時候，同樣可以使用 Wonder Bar 組件。

1、Wonder Bar 的人體工程學(xué)優(yōu)勢

Wonder Bar 支持用戶以更加傳統(tǒng)的筆記本電腦模式在雙屏設(shè)備上進(jìn)行操作，同時強(qiáng)大的定制性，讓 Wonder Bar 成為了出色的交互中控臺，無論是切換音樂，滾動頁面，還是搭配輸入法選詞，它都有著便捷的特性。

2、Wonder Bar 的設(shè)計原則

Wonder Bar 為用戶提供了大量補(bǔ)充行的工具，輔助多任務(wù)操作，具有著不可替代的價值。但是 Wonder Bar 當(dāng)中所放置的功能應(yīng)該是有明確意圖、避免用戶注意力耗散的組件。所以，Wonder Bar 的功能、體驗和用戶注意力之間應(yīng)該做合理的平衡。

下面是 Wonder Bar 的設(shè)計原則：

（1）、隨時可以精確輸入：對于涉及到生產(chǎn)力的任務(wù)和操作，精確輸入是無價的。Wonder Bar 應(yīng)該確保用戶能夠精確地操作，細(xì)致準(zhǔn)確地導(dǎo)航。

（2）、Wonder Bar 應(yīng)該是課預(yù)測的：用戶應(yīng)該有能力在自己認(rèn)為合適的情況下，享受 Wonder Bar 帶來的好處，它應(yīng)該遵循分層模型（后面介紹），并且它應(yīng)該和整個 Windows 10X 的導(dǎo)航體系保持一致。

（3）、體驗并非僅僅局限于 Wonder Bar：并非每種屏幕狀態(tài)下都提供 Wonder Bar，因此用戶不在筆記本模式下的時候，用戶不應(yīng)該因為 Wonder Bar 的缺失而影響體驗。Wonder Bar 應(yīng)該是在基礎(chǔ)體驗的基礎(chǔ)上提升效率，而不能應(yīng)為缺失而影響整體交互。

（4）、始終考慮用戶的情況：Wonder Bar 的使用場景和用戶所處的狀態(tài)、使用的姿勢、屏幕的翻轉(zhuǎn)情況息息相關(guān)。在設(shè)計 Wonder Bar 的體驗的時候，應(yīng)該兼顧到這些因素。

（5）、簡單的體驗是最好的：通過研究發(fā)現(xiàn)，對于多任務(wù)操作操作，低復(fù)雜度的輕量級操作，是最為成功的。Wonder Bar 的設(shè)計理應(yīng)優(yōu)先考慮用戶的舒適度和安心程度。

3、基礎(chǔ)輸入功能

Windows 10X 當(dāng)中，Wonder Bar 提供虛擬觸摸板和多種不同類型的輸入功能。

（1）、虛擬觸控板

在雙拼設(shè)備上，實體鍵盤和虛擬鍵盤能夠提供Wonder 和傳統(tǒng)的筆記本的鍵盤輸入類似的體驗，而傳統(tǒng)筆記本上所帶有的觸控板，則可以用 Wonder Bar 來實現(xiàn)。用戶可以在 Wonder Bar 的觸控板上使用熟悉的手勢交互，包括多指交互，因此，這對于他們的工作流程是狠自然的。觸控板屬于 Wonder Bar 當(dāng)中集成的基本組件。

此外， Wonder Bar 還支持手寫輸入，這可以極大地方便用戶在使用過程中隨時記筆記。這是一種常見且直觀的多任務(wù)操作模式。

（2）、多功能輸入面板

除了我們上面提到的兩種常見的輸入功能之外，它還可以支持文本建議、表情符號、GIF 等多種不同的輸入內(nèi)容，彌補(bǔ)鍵盤和手寫的不足。

其中文本建議相當(dāng)于是備選文本，或者文本的自動聯(lián)想和填充。除此之外，它還能集成剪貼板，將已經(jīng)復(fù)制的文本、圖片甚至視頻直接放在里面，某種意義上，甚至可以放一個媒體庫進(jìn)來。

4、應(yīng)用集成

Wonder Bar 還能為應(yīng)用程序提供輔助性的控件、信息，為了實現(xiàn)這一功能，我們將 Windows 10X 上已有的兩個組件/概念（系統(tǒng)媒體播放組件和縮略疊加模式）直接和 Wonder Bar 結(jié)合到一起，作為示范。

當(dāng)你在 Windows 10X 中調(diào)用其中任何一個組件或者概念的時候，他Wonder Bar 會直接呈現(xiàn)這一功能，而無需你執(zhí)行其他的任何操作。

（1）、系統(tǒng)媒體播放組件

調(diào)用 Windows 中的 SystemMediaTransportControls 這個類，就可以讓你使用系統(tǒng)的媒體播放組件，然后你就可以通過 MediaPlayer 來播放所有的多媒體。

當(dāng) Wonder Bar 出現(xiàn)的時候，媒體播放組件會出現(xiàn)在 Wonder Bar 當(dāng)中，在 Wonder Bar 之外的 Actor Center 當(dāng)中，同樣可以針對多媒體進(jìn)行管理。

如果沒有 Wonder Bar，那么媒體播放組件會出現(xiàn)在 Action Center 當(dāng)中：

（2）、縮略疊加模式

縮略疊加模式有一個更通俗的名稱，就是畫中畫。它是窗口縮小化的一種模式，通常切換到這個模式之后，會出現(xiàn)一個長期處于最上層的浮動小窗口，其中會包含應(yīng)用的內(nèi)容。很多用戶會使用畫中畫模式來看視頻，又不影響執(zhí)行其他的操作。

除了播放媒體之外，它還有其他的用途。使用縮略視圖來呈現(xiàn)某些特定的應(yīng)用，比如計算器就可以使用縮略視圖，方便你隨時調(diào)用和計算。

和前面的媒體播放組件類似，當(dāng) Wonder Bar 出現(xiàn)的時候，速略視圖就會直接拉到 Wonder Bar 中顯示，如果 Wonder Bar 關(guān)閉了，那么程序縮略視圖會出現(xiàn)在屏幕一角，并且可以被隨便移動。

如果你有多個縮略疊加窗口存在，那么默認(rèn)情況下，最新創(chuàng)建的窗口，會顯示在 Wonder Bar 當(dāng)中，當(dāng)然，用戶可以選擇顯示哪個，但是不能在 Wonder Bar 中顯示多個。

5、Wonder Bar 的交互模式

關(guān)于Wonder Bar 的交互模式，我們就從可用的應(yīng)用區(qū)域和Z軸上的界面分層這2個方面簡單的講解一下：

（1）、可用的應(yīng)用區(qū)域

無論是系統(tǒng)的媒體播放組件，還是畫中畫控件，他們都只能占據(jù) Wonder Bar 寬度的一般。無論是在使用實體鍵盤還是虛擬鍵盤的時候，它們都只能占據(jù)如下圖所示的區(qū)域，并且還要給鍵盤預(yù)留一個候選詞的觸控區(qū)域。

由于 Windows 10X 可能會被應(yīng)用到不同大小、不同分辨率、不同比例的屏幕上，所以，Wonder bar 的可用區(qū)域可能會隨著硬件的變化而出現(xiàn)變化。

另外，候選詞觸控區(qū)域也可能因為實體鍵盤和虛擬鍵盤的大小差異，而出現(xiàn)位置高低變化的可能性。當(dāng)然，涉及到實體鍵盤，還有更多 Wonder Bar 與之結(jié)合的玩法，這個就需要靈活對待了。

（2）、Z軸上的界面分層

由于 Wonder Bar 上涉及到的組件并不全是平鋪開，所以它們在虛擬的 Z 軸上是存在上下層關(guān)系的。比如候選詞觸摸區(qū)，只有在輸入文本的時候才會出現(xiàn)，有的是原本就存在的，所以在設(shè)計的時候，要注意前后關(guān)系。

比如縮略疊加窗口，也就是畫中畫窗口，最新創(chuàng)建的那個窗口會出現(xiàn)在最上面，用戶可以通過 Taskview 和 Taskbar 來切換不同的畫中畫窗口。這些都是需要考慮的因素。

值得一提的是，戴爾所設(shè)計的雙屏概念設(shè)備 Concept Duet 明顯是為了 Windows 10X 所設(shè)計的，不過目前在 CES 上展示的版本依然只是運行了 Windows 10，而其中也集成了類似 Wonder Bar 的設(shè)計。底部的觸控區(qū)的設(shè)計，明顯比起 Surface Neo 的設(shè)計，更加貼近傳統(tǒng)筆記本電腦的交互模式，而這一設(shè)計，可能也會隨著雙屏硬件的發(fā)展，而逐漸成為這種交互模式中的最佳實踐。

終于把這份官方設(shè)計規(guī)范當(dāng)中，涉及到交互設(shè)計的部分都整理出來了。毫無疑問，雙屏硬件的靈活度比單屏不止復(fù)雜了一種。這種自然靈活的機(jī)制帶來的不僅有更多的機(jī)會，還有幾乎無法完全封堵住的各種小問題。

雙屏硬件交互模式，可能會在未來很長一段時間內(nèi)，都需要設(shè)計師來不斷完善，也許是很多新的硬件、軟件、服務(wù)的破局契機(jī)。我們一起學(xué)習(xí)和期待吧。

億企邦點評：

當(dāng)今的互聯(lián)網(wǎng)產(chǎn)品設(shè)計市場競爭日益激烈，其本質(zhì)為用戶體驗之爭。如何協(xié)調(diào)適合多終端的界面設(shè)計，使跨屏應(yīng)用更加符合平臺特性和提升用戶體驗變得愈發(fā)重要，因而富有研究價值和意義。

面對跨屏復(fù)雜性特征，根據(jù)系統(tǒng)設(shè)計目的性、層次性和開放性的原理，以用戶為中心提供設(shè)計對策，并考慮跨屏產(chǎn)品的“易用性”，從信息架構(gòu)、視覺風(fēng)格、界面元素以及交互體驗的角度總結(jié)了四個針對跨屏復(fù)雜性的界面設(shè)計原則。