在上一篇文章《重磅！柔性屏和雙屏來啦，設計師必學跨屏設計規範》當中，我詳細分析了雙屏硬件趨勢的發展狀態和未來方向，同時也翻譯整理了微軟最新的 Windows 10X 操作系統當中，面向雙屏硬件的交互設計規範中的前半部分。

圖片來自Theverge

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

圖片來自Theverge

跨平台的雙屏交互設計邏輯

需要在此強調的是，這種雙屏的設計範式，其實是跨平台的通用規則——很程度上，這套交互邏輯是不受操作系統限制的，而且微軟很雞賊的一點在於，他們發布的 Surface Duo 和 Surface Neo 並非都使用了 Windows 10X 的系統，其中 Surface Duo 用的是 Android 系統，並且在微軟的這套規範當中，還有一半的開發指南，是 Android 平台的！

圖片來自Theverge

在開發文檔當中，除了很具體地展示出了分別在 Android 平台和 Windows 10X 平台上的界面控件和交互設計範例，而且還加入了相關的代碼段示例，具體實現的方式，關鍵參數等信息。

雙屏應用交互模式

之前的規範當中，我們討論了如何去更好地適配接縫的問題，接下來，我們將會探討一下雙屏的應用模式。

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

1、畫布拓展模式

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

這種模式僅適用於一部分大面積UI畫布，接縫最多是遮蓋一部分只讀內容，如果接縫遮蓋了關鍵的UI交互控件，依然需要你進行調整 UI 以繞開接縫。

這種設計模式的價值：擴展畫布，允許用戶在大畫布模式下瀏覽信息和內容。

可以從這種模式中獲益的應用範例：

• 地圖類應用
• 繪圖類應用

2、主從屏模式

所謂的主從屏模式並不難理解，它最常見的一種模式，是一屏幕显示列表，而另外一屏显示你所選中列表條目中的詳細內容。當你選中新的列表條目的時候，另外一側的詳情頁也跟着切換。這種主從屏模式是傳統的側邊欄列表-詳情頁的交互模式的延伸。最常見的範例是电子郵件和通訊錄這樣的應用。

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

就像之前說的，我們開始注意到用戶傾向於使用雙橫屏展開模式（類似攤開書本之後翻轉90度的狀態）來瀏覽信息的傾向，因此，你在設計的時候，可以在用戶翻轉屏幕的時候，改為上屏显示單條目的主視圖，而下屏显示詳細視圖的模式。

這種設計模式的價值：

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

可以從這種模式中獲益的應用範例：

• 具有列表或者圖庫的應用
• 郵件類應用
• 事務管理型應用
• 照片或者圖片管理類應用
• 帶有播放列表的音樂類應用
• 具有複雜多樣層級結構的應用

圖片來自Theverge

3、並排翻頁模式

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

根據你的應用特點，你可以選擇一次翻兩頁，也可以一次翻一頁。

這種設計模式的價值：使用類似書本的並排布局設計，來創造更好的閱讀體驗。

可以從這種模式中獲益的應用範例：

• 文檔類的應用
• 涉及到內容分頁的應用
• 專門用來閱讀的應用
• 帶有畫布和畫板類控件的應用

4、雙屏對比模式

如果你有應用需要並排显示對比同一文檔的不同樣式、或者同類型的不同文檔，那麼你可以使用雙屏對比模式。

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

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

這種設計模式的價值：在同一應用內，使用同一容器來显示多個視圖，通過並排显示進行對比和其他的操作。

圖片來自Theverge

可以從這種模式中獲益的應用範例：

• 涉及到並排显示從而進行前後對比（比如程序和文檔預覽）的編輯類工具
• 支持內容和相應的上下文信息展示的應用（例如餐廳的地圖和其他文本信息的並列显示）
• 讓用戶進行相似項目的並列對比
• 使用兩個相同控件和畫布來显示內容，但是各自保持獨立（比如筆記類應用，一屏繪圖一屏做筆記）

5、伴行面板模式

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

這種模式可以將一個面部或者畫布呈現在一個屏幕上，然後使用另外一個屏幕來显示操作相關內容、相應的工具，子菜單，這樣達到充分利用屏幕空間的目的。根據不同的使用場景，你需要針對橫屏和豎屏模式進行調試，選擇合適的展示方式。

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

這種模式不僅能夠將用戶所獲取的內容和需要交互的工具區分開，而且使得用戶對於不同功能、目的的內容，區分開來，有選擇地使用。在雙橫屏模式下，上屏显示內容，下屏進行交互，可以帶來符合語境和人體工程學的體驗。

可以從這種模式中獲益的應用範例：

• 有多層級的應用，將輔助性的、上下文信息显示在主屏旁邊
• 圖像和繪圖類的創意工具
• 音樂和視頻類的剪輯工具
• 遊戲類的應用

外設交互模式

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

圖片來自Theverge

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

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

Wonder Bar 的人體工程學優勢

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

Wonder Bar 的設計原則

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

圖片來自Theverge

下面是 Wonder Bar 的設計原則：

• 隨時可以精確輸入：對於涉及到生產力的任務和操作，精確輸入是無價的。Wonder Bar 應該確保用戶能夠精確地操作，細緻準確地導航。
• Wonder Bar 應該是課預測的：用戶應該有能力在自己認為合適的情況下，享受 Wonder Bar 帶來的好處，它應該遵循分層模型（後面介紹），並且它應該和整個 Windows 10X 的導航體系保持一致。
• 體驗並非僅僅局限於 Wonder Bar：並非每種屏幕狀態下都提供 Wonder Bar，因此用戶不在筆記本模式下的時候，用戶不應該因為 Wonder Bar 的缺失而影響體驗。Wonder Bar 應該是在基礎體驗的基礎上提升效率，而不能應為缺失而影響整體交互。
• 始終考慮用戶的情況：Wonder Bar 的使用場景和用戶所處的狀態、使用的姿勢、屏幕的翻轉情況息息相關。在設計 Wonder Bar 的體驗的時候，應該兼顧到這些因素。
• 簡單的體驗是最好的：通過研究發現，對於多任務操作操作，低複雜度的輕量級操作，是最為成功的。Wonder Bar 的設計理應優先考慮用戶的舒適度和安心程度。

基礎輸入功能

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

虛擬觸控板

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

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

多功能輸入面板

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

其中文本建議相當於是備選文本，或者文本的自動聯想和填充。除此之外，它還能集成剪貼板，將已經複製的文本、圖片甚至視頻直接放在裏面，某種意義上，甚至可以放一個媒體庫進來。

應用集成

概述

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

當你在 Windows 10X 中調用其中任何一個組件或者概念的時候，他Wonder Bar 會直接呈現這一功能，而無需你執行其他的任何操作。

圖片來自Theverge

系統媒體播放組件

調用 Windows 中的 SystemMediaTransportControls 這個類，就可以讓你使用系統的媒體播放組件，然後你就可以通過 MediaPlayer 來播放所有的多媒體。

當 Wonder Bar 出現的時候，媒體播放組件會出現在 Wonder Bar 當中，在 Wonder Bar 之外的 Actor Center 當中，同樣可以針對多媒體進行管理。

如果沒有 Wonder Bar，那麼媒體播放組件會出現在 Action Center 當中：

有關如何使用這些控件，你可以參考這些文檔：

https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/integrate-with-systemmediatransportcontrols
https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/SystemMediaTransportControls

縮略疊加模式

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

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

和前面的媒體播放組件類似，當 Wonder Bar 出現的時候，速略視圖就會直接拉到 Wonder Bar 中显示，如果 Wonder Bar 關閉了，那麼程序縮略視圖會出現在屏幕一角，並且可以被隨便移動。

如果你有多個縮略疊加窗口存在，那麼默認情況下，最新創建的窗口，會显示在 Wonder Bar 當中，當然，用戶可以選擇显示哪個，但是不能在 Wonder Bar 中显示多個。

Wonder Bar 的交互模式

可用的應用區域

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

圖片來自Theverge

由於 Windows 10X 可能會被應用到不同大小、不同分辨率、不同比例的屏幕上，所以，Wonder bar 的可用區域可能會隨着硬件的變化而出現變化。

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

Z軸上的界面分層

由於 Wonder Bar 上涉及到的組件並不全是平鋪開，所以它們在虛擬的 Z 軸上是存在上下層關係的。比如候選詞觸摸區，只有在輸入文本的時候才會出現，有的是原本就存在的，所以在設計的時候，要注意前後關係。

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

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

圖片來自Theverge

結語

終於把這份官方設計規範當中，涉及到交互設計的部分都整理出來了。毫無疑問，雙屏硬件的靈活度比單屏不止複雜了一種。這種自然靈活的機制帶來的不僅有更多的機會，還有幾乎無法完全封堵住的各種小問題。

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

這篇文章中的內容整合自微軟的官方指南：Introduction to dual-screen devices

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五平台首頁_5000 字重磅乾貨！設計師必備跨屏設計規範（交互篇）