5000 字重磅干貨！設(shè)計(jì)師必備跨屏設(shè)計(jì)規(guī)范（交互篇）

在上一篇文章《重磅！柔性屏和雙屏來啦，設(shè)計(jì)師必學(xué)跨屏設(shè)計(jì)規(guī)范》當(dāng)中，我詳細(xì)分析了雙屏硬件趨勢的發(fā)展?fàn)顟B(tài)和未來方向，同時(shí)也翻譯整理了微軟最新的 Windows 10X 操作系統(tǒng)當(dāng)中，面向雙屏硬件的交互設(shè)計(jì)規(guī)范中的前半部分。

圖片來自Theverge

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

圖片來自Theverge

跨平臺(tái)的雙屏交互設(shè)計(jì)邏輯

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

圖片來自Theverge

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

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

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

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

1、畫布拓展模式

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

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

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

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

• 地圖類應(yīng)用
• 繪圖類應(yīng)用

2、主從屏模式

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

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

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

這種設(shè)計(jì)模式的價(jià)值：

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

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

• 具有列表或者圖庫的應(yīng)用
• 郵件類應(yīng)用
• 事務(wù)管理型應(yīng)用
• 照片或者圖片管理類應(yīng)用
• 帶有播放列表的音樂類應(yīng)用
• 具有復(fù)雜多樣層級(jí)結(jié)構(gòu)的應(yīng)用

圖片來自Theverge

3、并排翻頁模式

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

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

這種設(shè)計(jì)模式的價(jià)值：使用類似書本的并排布局設(shè)計(jì)，來創(chuàng)造更好的閱讀體驗(yàn)。

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

• 文檔類的應(yīng)用
• 涉及到內(nèi)容分頁的應(yīng)用
• 專門用來閱讀的應(yīng)用
• 帶有畫布和畫板類控件的應(yīng)用

4、雙屏對(duì)比模式

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

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

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

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

圖片來自Theverge

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

• 涉及到并排顯示從而進(jìn)行前后對(duì)比（比如程序和文檔預(yù)覽）的編輯類工具
• 支持內(nèi)容和相應(yīng)的上下文信息展示的應(yīng)用（例如餐廳的地圖和其他文本信息的并列顯示）
• 讓用戶進(jìn)行相似項(xiàng)目的并列對(duì)比
• 使用兩個(gè)相同控件和畫布來顯示內(nèi)容，但是各自保持獨(dú)立（比如筆記類應(yīng)用，一屏繪圖一屏做筆記）

5、伴行面板模式

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

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

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

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

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

• 有多層級(jí)的應(yīng)用，將輔助性的、上下文信息顯示在主屏旁邊
• 圖像和繪圖類的創(chuàng)意工具
• 音樂和視頻類的剪輯工具
• 游戲類的應(yīng)用

外設(shè)交互模式

使用 Windows 10X 的雙屏硬件還有一個(gè)獨(dú)特的功能， Wonder Bar 。

圖片來自Theverge

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

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

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

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

Wonder Bar 的設(shè)計(jì)原則

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

圖片來自Theverge

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

• 隨時(shí)可以精確輸入：對(duì)于涉及到生產(chǎn)力的任務(wù)和操作，精確輸入是無價(jià)的。Wonder Bar 應(yīng)該確保用戶能夠精確地操作，細(xì)致準(zhǔn)確地導(dǎo)航。
• Wonder Bar 應(yīng)該是課預(yù)測的：用戶應(yīng)該有能力在自己認(rèn)為合適的情況下，享受 Wonder Bar 帶來的好處，它應(yīng)該遵循分層模型（后面介紹），并且它應(yīng)該和整個(gè) Windows 10X 的導(dǎo)航體系保持一致。
• 體驗(yàn)并非僅僅局限于 Wonder Bar：并非每種屏幕狀態(tài)下都提供 Wonder Bar，因此用戶不在筆記本模式下的時(shí)候，用戶不應(yīng)該因?yàn)?Wonder Bar 的缺失而影響體驗(yàn)。Wonder Bar 應(yīng)該是在基礎(chǔ)體驗(yàn)的基礎(chǔ)上提升效率，而不能應(yīng)為缺失而影響整體交互。
• 始終考慮用戶的情況：Wonder Bar 的使用場景和用戶所處的狀態(tài)、使用的姿勢、屏幕的翻轉(zhuǎn)情況息息相關(guān)。在設(shè)計(jì) Wonder Bar 的體驗(yàn)的時(shí)候，應(yīng)該兼顧到這些因素。
• 簡單的體驗(yàn)是最好的：通過研究發(fā)現(xiàn)，對(duì)于多任務(wù)操作操作，低復(fù)雜度的輕量級(jí)操作，是最為成功的。Wonder Bar 的設(shè)計(jì)理應(yīng)優(yōu)先考慮用戶的舒適度和安心程度。

基礎(chǔ)輸入功能

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

虛擬觸控板

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

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

多功能輸入面板

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

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

應(yīng)用集成

概述

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

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

圖片來自Theverge

系統(tǒng)媒體播放組件

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

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

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

有關(guān)如何使用這些控件，你可以參考這些文檔：

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

縮略疊加模式

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

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

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

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

Wonder Bar 的交互模式

可用的應(yīng)用區(qū)域

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

圖片來自Theverge

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

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

Z軸上的界面分層

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

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

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

圖片來自Theverge

結(jié)語

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

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

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