无码一区二区三区中文字幕

柔性屏和雙屏來啦，設計師必學跨屏設計規范

2020-3-13 濤濤

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

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

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

柔性屏和雙屏設備

2019年是否算得上是雙屏設備元年，現在下結論為時過早，但是去年三星 Galaxy Fold 和 Moto Razr 的發布，確實給廣大硬件廠商好好打了一個樣。

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

圖片來自 TheVerge

當然，華為的 Mate Xs 也是相當優秀的產品，這款明顯對標三星 Galaxy Fold 2 的產品，并沒有將柔性屏制作成為向內折疊，而是完全翻過來，將它作為外屏來進行設計，反向折疊，展開的時候，屏幕自然延展。

圖片來自 TheVerge

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

圖片來自 TheVerge

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

圖片來自 TheVerge

圖片來自Engadget

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

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

圖片來自 TheVerge

考慮到聯想在此之前已經發布過帶有LEC+墨水屏的雙屏設備 Yoga Book 2，可以說聯想是已經具備了制造兩種不同類型屏幕設備的能力。

作為對手的戴爾，帶來了分別對標聯想這兩個系列的對應產品：Concept Ori 和 Concept Duet。

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

圖片來自 TheVerge

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

圖片來自 TheVerge

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

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

圖片來自愛范兒

與之相反，采用硬質雙屏設計的硬件設備，從生產成本、工藝成熟度、價格上，都更加有優勢。

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

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

雙屏硬件的操作系統

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

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

圖片來自 TheVerge

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

圖片來自 TheVerge

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

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

下面是基于微軟官方文檔，精簡編譯后的規范：

雙屏的交互規則

雙屏交互概述

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

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

圖片來自 TheVerge

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

圖片來自 TheVerge

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

1、擁抱和改進現有的功能

響應式布局

比起傳統的響應式布局，對于雙屏硬件，我們要討論的「響應」模式要復雜得多。就像下面這張圖中所說的，要為這樣多樣、復雜的情況進行設計：

我們默認用戶在多數時候，是處于雙屏展開的狀態，當用戶打開 APP 的時候，它的主要界面窗口，將會最大化占據一個屏幕，這個時候另一個屏幕處于空置狀態，用戶可以在這個屏幕上打開另外的應用，并且用戶可以通過托拽窗口的方式，來重新整理窗口和APP的排布模式。

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

2、擁抱和改進現有的功能

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

雙屏的響應式布局

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

考慮到你的應用將會在很多不同尺寸、不同長寬比、不同類型的設備上運行，所以你的應用程序應該足以應對各種不同的情況。請記住，你的設計將會遭遇和以往截然不同的屏幕尺寸和長寬比，比如縱向（全景視圖）、橫向（較寬的全景視圖）、縱向雙屏分別顯示等不同情況。

考慮所有的屏幕方向

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

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

雙屏為多任務提供更好的顯示環境，你不會知道用戶會在什么樣的場合，以什么樣的姿勢來握持設備，但是考慮潛在的使用姿態，可以讓你更好得對應用進行設計和優化。

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

支持多種輸入模式

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

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

托拽交互

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

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

應用的多屏呈現

用戶會希望在兩塊屏幕上并排顯示同一應用中的不同內容，因此你的你用應該支持多實例呈現和運行。

多媒體內容畫中畫體驗

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

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

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

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

在設計雙屏設備之前，你需要遵循下面的四個基本原則：
提供持續的價值：能夠良好地支持不同的交互模式，充分利用不同交互模式和多屏交互，讓用戶可以靈活地執行任務。它不應該只有有限的使用方法和模式，與其簡單的支持一兩種模式，不如多考慮幾種不同的交互模式。
不要只想著「跨屏」：應用不應該只在跨屏狀態下才好用，不要將一些基本的功能在非跨屏狀態下隱藏，避免用戶需要跨屏才能用到基本功能。
用戶始終享有掌控力：為了避免給用戶帶來不可預期的破壞性體驗，是否要跨屏，這個應該由用戶自己來進行選擇，而不是一打開就跨屏。
讓跨屏可預測：了解用戶使用跨屏模式的場景，并且使用貼合用戶預期的設計。確保不同的跨屏模式和呈現結果是用戶可預期的。

跨屏是用戶的選擇

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

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

考慮用戶意圖和設備方向

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

在橫向雙屏模式下，用戶更多希望充分利用屏幕空間，因此量屏幕多是用來擴展展示內容；
在縱向雙屏模式下，用戶通常喜歡執行多任務或者提高生產力的活動。因此這兩塊屏幕會被分開使用，或者分組使用。
考慮所有支持的布局

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

1、單屏默認模式

默認情況下，應用程序應該是最大化狀態占據一個屏幕。在雙屏分別顯示模式下，用戶可以單獨同兩屏的應用界面進行交互和處理，確?？梢赃M行使用、比較甚至交叉引用。
這個狀態應該是默認的。就像之前說的，如果你的應用已經支持了不同分辨率、不同長寬比的屏幕，那么你不用做其他更多的事情。

2、跨屏默認模式

當設備處于雙屏狀態下（橫屏雙屏或者豎屏雙屏），用戶可以將單個窗口從一個屏幕直接延伸覆蓋兩個屏幕，為內容呈現提供更多的空間。這應該是用戶自己的選擇，而不應該作為默認打開的模式固化到程序和設置當中。
這一模式應該是可選的。這種跨屏顯示單個窗口的模式，應該是雙屏設備所獨有的。如果你對于你的應用不做針對性（針對雙屏）的修改的話，它會像是在一個完整的大屏幕上顯示一樣。但是，你也可以針對雙屏進行優化，確保你的應用可以兼容雙屏設備的獨特形態。這些將在后續詳細說明。

3、單屏全屏模式

這種模式和之前的單屏默認模式是類似的，但是系統的UI（系統的任務欄、菜單欄、程序菜單、頂部標題等）將會隱藏，這樣可以給你帶來沉浸式的體驗，是游戲和視頻類應用的理想選擇。
這種模式應該是可選的。你可以使用系統提供的 API 來實現單屏全屏模式。

4、跨屏全屏模式

同樣的，你可以通過開發和優化來實現適合雙屏的跨屏顯示模式。如果用戶在跨屏的時候選擇的是跨屏全屏顯示模式，那么應用在擴展之后，將會覆蓋整個屏幕，并隱藏系統UI 元素。
這種模式應該是可選的，你需要考慮的因素和跨屏默認模式類似。

4、如何處理接縫

當單個應用以單個窗口運行，并且跨越兩個屏幕的時候，跨屏布局就出現了。如果你原有的應用從未針對雙屏設備進行優化的話，那么系統會提示你「應用將會擴展并占據所有屏幕」，并且這個時候，應用界面會自行調整大小，適應新的尺寸。

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

是否總是要適應接縫？

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

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

規避接縫

將元素移到一邊

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

應用程序對話框應該移到屏幕的一邊，尤其是需要點擊按鈕操作的時候。

底部菜單應該移動到屏幕一側，而不是延伸到兩個屏幕上。

用戶調用上下文菜單的時候，應該將接縫視作為屏幕邊界處理，尤其是在靠近屏幕邊緣的地方觸發菜單的時候。

應用內的下拉菜單或者可擴展容器如果可能會跨越接縫的話，應該改變擴展方向。

當整個應用界面擴展開來的時候，應該整個移動到屏幕的上側，而不是在靠近中心的位置橫跨接縫。

貼合接縫

使用偶數列并和接縫對齊

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

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

除此之外，還有許多應用會考慮充分利用另外一個屏幕來顯示彈出菜單或者下級頁面的內容。這種使用邏輯確實會讓應用更加易用，并且在視覺上會更加干凈清爽。但是請記住，如果彈出的界面并不是全屏的，可能會暗示它是可折疊和可關閉的，因此，你需要根據實際的設計需求，來靈活的處理呈現樣式。全覆蓋另外一屏的彈出界面，更加適合小尺寸屏幕。