雙螢幕裝置簡介
雙螢幕裝置是具有兩個對稱螢幕的可攜式裝置，可透過獨特的方式共同運作，以彈性的尺寸提供生產力。
透過 Microsoft 的 Surface Duo 之類雙螢幕裝置，人們完成工作的速度將會更勝以往：於上班途中在一個螢幕上做筆記，然後在另一個螢幕檢閱完整的專案提案；於等候午餐時，坐在餐桌前使用軟體或硬體鍵盤撰寫一封貼心的電子郵件；然後在回歸正常生活時觀看影片、瀏覽網路或閱讀電子書。
雖然雙螢幕裝置可為應用程式帶來新的可能，但現有的應用程式仍可在裝置上如預期般運作，而且您不必做什麼也能獲得改善。 本文件會對此提出說明，同時也會展示可藉由讓應用程式感知到裝置的雙螢幕特性，而能增強應用程式體驗的新方式。
雖然現在市面上有不同的雙螢幕裝置，而且還有很多即將推出，但我們相信一定能有一個共通的方法可以用來設計適用於這些裝置的應用程式。 希望這能讓您的應用程式不需要從頭針對每個裝置重新設計，就能觸及更多裝置。
不論您鎖定的作業系統或所用的開發語言是什麼，本文會討論其皆能適用的共通設計模式和概念。 如需針對雙螢幕裝置開發應用程式的平台特定資訊，請參閱 Kotlin 和 Java、React Native、Xamarin、Unity 遊戲開發、Web 技術或 Windows。
這項技術仍在持續發展，這裡所提出的指導方針可能會隨著我們的發展而有所改變。 歡迎您提供意見。
雙螢幕概觀
雙螢幕裝置有各式各樣的硬體和工業設計變化。 最近發行的 Surface Duo 以及其他規劃中的裝置，旨在協助定義類別，但其他裝置可能會有更大的顯示器或不同的轉軸設計。 在設計應用程式時請記住一點，那就是您應該避免針對市面上現今的任何特定裝置規格來進行設計。
所有雙螢幕裝置都可以折疊、翻轉和旋轉。 兩個螢幕都可作為顯示器，或者，也可以將其中一個螢幕作為鍵盤。 不同的外形規格會支援各式各樣的活動，讓使用者得以將裝置融入到其使用情境。 藉由利用應用程式的各種模式，您將可協助使用者達成更多目標。
當使用者啟動應用程式時，其核心視窗會以最大化狀態開啟，佔據單一螢幕的完整寬度和高度。 使用者可以用這種方式一次開啟多個應用程式，以便並排使用應用程式和進行直覺式的拖放案例。
應用程式也可以同時出現在兩個螢幕上，這稱為「跨螢幕」版面配置。 根據預設，應用程式的行為會像是在較大的螢幕上顯示一樣。 您可以修改現有的應用程式配置以配合兩個螢幕之間的接縫，或者，您也可以更進一步，設計讓應用程式使用為了充分利用雙螢幕裝置而特別建立的配置控制項。 本文稍後會更詳細地討論這一點。
採用和改善現有功能
您可能早已使用應用程式來充分利用許多功能，這些功能只要略做修改，就能在 Microsoft 所支援的雙螢幕裝置上繼續運作，並能繼續提供絕佳的應用程式體驗。 我們會先探討這些功能，然後再討論要如何特別為雙螢幕案例設計應用程式。
回應式應用程式配置
如果您將應用程式設計為使用回應式配置，則不論裝置的螢幕大小和方向為何，該應用程式在每個裝置上都會有良好表現。 針對您選擇的 UI 平台使用現有配置技術，使其自動調整以填滿螢幕。 如果您的螢幕元素會與大小和外觀比例相依，請使用 UI 平台所提供的 API，以在大小或外觀比例有所變更時調整配置。
因為應用程式會在許多不同的裝置上執行，因此您應該已經將其開發為可應付各種螢幕和視窗大小，而且應該能繼續順暢地運作。 不過請您記住，您可能需要考量到在電腦和行動裝置上不常見的新螢幕大小和外觀比例，例如直向 (較高視野)、橫向 (較寬視野)、雙直向 (直向寬度的兩倍) 及雙橫向 (橫向高度的兩倍)。
考慮所有裝置方向
我們希望使用者能夠以適合他們的方式有創意地使用雙螢幕裝置。 這表示您的應用程式不一定會總是用於典型的方向；Android 的直向或 Windows 的橫向。 請考慮支援所有方向和螢幕的設定。 例如，如果您的應用程式主要是針對直向所設計的，但會支援大量文字輸入，則使用者在雙螢幕裝置上很可能會採用將鍵盤放到下方螢幕的橫向方向來使用。
若要進行多工工作，雙螢幕配置可以提供更好的環境。 您不一定知道使用者將保留裝置的模式;但瞭解潛在的模式可讓您針對最適合您 app 的模式優化您的應用程式。
我們的研究顯示，使用者更習慣在平面上輸入或書寫。 如果您的應用程式需要大量輸入，例如作筆記的應用程式，您就可以針對橫向配置的使用情境來將應用程式最佳化 (如果您尚未這麼做)。
支援各種輸入
包括新的雙螢幕裝置在內，有許多裝置都支援各種輸入方式，包括打字、觸控和手寫筆。 雙螢幕裝置的彈性可讓使用者快速切換模式以符合其工作。 為確保使用者有絕佳的體驗，請確定您的應用程式可支援所有可用的輸入類型，以便讓使用者既保有掌控能力，又能以慣用方式與您的應用程式互動。
拖放
確保應用程式可支援拖放功能，也可以確保使用者在使用不同類型的輸入方式時一樣會有絕佳體驗，不只是在使用雙螢幕裝置時，也包括適用所有其他裝置類型時。
您早已可以利用拖放功能。 不過，並排執行應用程式的雙螢幕裝置特別適合使用拖放式互動來獲得絕佳的應用程式體驗。
若要讓應用程式啟用拖放功能，請先想想當使用者可以直接在您應用程式的體驗中向內或向外操作文字、連結、影像或豐富物件時的情況，然後：
- 在可以剪下、複製和貼上的任何位置，都啟用拖放功能。
- 在可以共用內容的任何位置，則考慮啟用拖放功能。
應用程式的多重執行個體
使用者可能會想要利用第二個螢幕來檢視相同應用程式的不同內容。 若要啟用此功能，請考慮支援多個執行個體，讓應用程式的多個執行個體並排執行。
媒體的子母畫面體驗
如果您要建置媒體應用程式，並讓其獲得可在另一個應用程式正在執行時，繼續在前景播放影片的好處，請考慮支援子母畫面體驗。 有了更多實際可用的螢幕空間後，使用者就有機會透過觀看影片並同時執行另一項工作來實現多工作業。
雙螢幕使用者體驗考量
在上一節中，我們討論了您可以在應用程式中支援、雖非雙螢幕裝置所特有，卻可讓應用程式在雙螢幕裝置上執行時的使用者體驗獲得改善的功能。 現在，我們要看看您可以做些什麼，以便只在您的應用程式執行於雙螢幕裝置上時才提供獨特的體驗。
在雙螢幕裝置上，您的應用程式既可以在單一螢幕上執行，也可以橫跨兩個螢幕。 當單一應用程式橫跨兩個螢幕呈現時，即稱為「跨螢幕」。 您應用程式回應跨螢幕狀態的方式會對使用者體驗產生巨大影響。 雙螢幕裝置啟用的唯一模式可能會解除鎖定您的應用程式可用方式。 比方說，如果裝置中間下方有接縫，便非常適合可從內容分隔獲益的生產力案例。
下面有一些原則，請先仔細考量之後，再決定適合您應用程式的特定雙螢幕設計技術：
- 提供連續值
- 在進行應用程式所執行的端對端工作流程時，跨螢幕狀態應該能擴增使用者的體驗。 這不應該成為只是短暫有價值的自訂狀態。 您不應該只考慮特定螢幕，而是要有全面性的看法。
- 不能全靠跨螢幕
- 應用程式不應該只在跨螢幕時才有卓越表現。 請勿將基本功能埋藏在跨螢幕狀態下，而讓使用者必須跨螢幕使用應用程式才能執行基本工作。
- 讓使用者永遠能掌控一切
- 為了避免使用者遇到無法預期 (或可能有破壞性) 的體驗，應用程式不應該在使用者未主動起始的情況下自動進入跨螢幕狀態。 請讓使用者自行決定。
- 讓跨螢幕變得可預測
- 了解使用者想要跨螢幕的意圖並就此做出設計。 請確定跨螢幕的結果是可預測的，並可在任何給定的時間增添價值。
跨螢幕是使用者的選擇
使用者可以完全掌控應用程式的使用方式，包括要在何時跨螢幕使用應用程式。 在這種設定下，某些應用程式 (例如計算機) 的介面看起來可能不怎麼好，也可能會因此衍生任何好處，但這仍是使用者的選擇。 不過，您可能會決定，既然大多數使用者都不會選擇跨螢幕使用您的應用程式，因此不做任何調整來配合使用者的動作也沒關係。
雖然本文針對了要如何處理多螢幕配置提供了幾個不同的概念，但請選擇適合您使用者和應用程式的選項。
考量使用者意圖和裝置方向
在設計應用程式的體驗以利用兩個螢幕時，請務必了解跨螢幕 (雙橫向和雙直向設定) 背後的使用者意圖。 雖然還有許多研究要做，但我們會開始觀察這些使用者偏好的趨勢：
- 在雙橫向中，使用者想要的是使用更多實際可用的螢幕空間，因此會使用兩個螢幕來擴張內容區域。
- 在雙直向中，使用者偏好進行多工或生產力活動，因此會使用兩個螢幕來將內容分隔開來和分組。
在決定要如何套用雙螢幕設計模式時，請記住這一點。 如果您徹底調整應用程式的配置和體驗，使用者是否有好處，或者，是否只要排列應用程式的控制項和元素，使其不會遭到接縫所遮蔽，就能支援跨螢幕功能？
考量所有支援的配置
在設計雙螢幕裝置的應用程式體驗時，根據應用程式是在單一螢幕上還是跨螢幕使用，以及此為預設視野還是全螢幕視野，您需要考量四種配置案例。
單一預設
- 根據預設，應用程式會以最大化的狀態開啟，並佔用單一螢幕。 在雙螢幕模式中，使用者可以彼此執行兩個應用程式，以同時比較、取用或交互參考內容。
- 預設支援。 如果您的應用程式設計為可應付不同的螢幕大小和直向與橫向方向 (如先前所述)，您就不需要再做調整。
跨螢幕預設
- 當裝置處於雙螢幕模式 (雙直向或雙橫向) 時，使用者可以跨兩個螢幕擴充單一應用程式，讓內容有更多空間。 使用者要自己讓應用程式成為跨螢幕狀態，根據程式的設計，應用程式不會自己進入此狀態。
- 選擇性支援。 跨螢幕模式是雙螢幕裝置的特有模式。 如果您未對應用程式進行任何修改，則其行為會如同在一個大型螢幕上顯示一樣。 不過，您可以實作一系列的配置最佳化，讓您的應用程式得以利用雙螢幕裝置的獨特功能。 本文稍後會有更詳細的說明。
單一全螢幕
- 此配置與預設配置類似，不同之處在於系統 UI (工作列、系統匣、應用程式列、應用程式標題) 會隱藏起來，以創造完整的沉浸式體驗，適合用來玩遊戲和播放影片。
- 選擇性支援。 您可以使用可用的 API 來讓應用程式進入全螢幕模式。
跨螢幕全螢幕
- 您可以透過程式設計的方式展開您的應用程式，以在跨螢幕執行時使用全螢幕模式。 如果在單一螢幕上以全螢幕模式顯示的應用程式是由使用者執行跨螢幕配置的，則應用程式會維持全螢幕。
- 選擇性支援。 請考量跨螢幕模式下的全螢幕和單一螢幕的好處。
如何處理接縫
跨越兩個螢幕呈現單一應用程式時，就會發生跨螢幕版面配置。 根據預設，如果未針對此案例自訂應用程式，系統就會通知應用程式其現在佔用了較大的螢幕寬度和高度，因此應用程式的 UI 會自行調整大小以符合新的螢幕尺寸。
當應用程式橫跨兩個螢幕時，便會產生「接縫」，也就是兩個螢幕中間的空間。 這是製作雙螢幕裝置所產生的副產品。 本節會討論一些概念和技術，供您在讓應用程式處理接縫時納入考量。
我一定要配合接縫嗎？
視您的應用程式而定，有些 UI 可以完美地依現況使用。 如果使用者可以操作應用程式的內容以避開接縫的阻礙，您可以決定不要為了配合接縫而做出調整。
例如，地圖應用程式可以橫跨兩個螢幕來充分利用實際可用的螢幕空間，而不必做什麼調整來處理接縫，因為使用者可以自行移動地圖內容以避開接縫。 後面的延伸畫布一節會有詳細討論。
下圖顯示的是格線 UI，使用者可以輕鬆地捲動即可避開接縫。 不過，如果 UI 不會捲動 (例如格線上方的工具列)，您可以考慮貼齊邊界，這是我們稍後會討論的其中一項技術。 建議您和使用者一起測試不同的設計構想，以決定最適合您應用程式的選項。
避開接縫
將專案移至一端
因為兩個螢幕中間有明顯的接縫，所以當使用者跨螢幕使用應用程式時，接縫可能會遮蔽一些 UI (尤其是在應用程式配置內置中的元素)。 這不會造成任何功能上的問題，應用程式仍可繼續運作；不過，如果 UI 能夠移到螢幕的某側，使用體驗就會更好。 這是很好的經驗法則，可避免文字或內容顯示在接縫處，而影響應用程式的辨識和使用。
應用程式啟動的對話方塊應該移至其中一個螢幕，而不是延展到兩個螢幕上，特別是當裡面有按鈕或使用者需要進行的動作時。
底部功能表應該移至其中一側，而不是延展到兩個螢幕上。
使用者叫用的操作功能表應該將接縫視為邊界，特別是在叫用位置接近螢幕邊緣時。
應用程式內下拉式功能表或可擴大的容器應該變更擴大方向。
跨螢幕使用應用程式時，請將 UI 移至上方或左邊螢幕的中央，而不是移至整個應用程式區域的中央。
貼齊接縫
讓偶數個資料行貼齊接縫邊緣
如果您的 UI 有格線或表格式配置，而您將垂直或水平線貼齊接縫，使用者就能更容易地檢視和使用應用程式。
在您的格線中使用偶數個資料行 (特別是容器、資料表等)，並考慮將邊界朝向接縫。
此外，許多應用程式會利用將部分螢幕 UI 覆蓋在應用程式內容上的方式。 視大小而定，您可以讓覆蓋的 UI 改為完全佔據第二個螢幕。 這可讓您的應用程式更容易使用，畫面也會變得更清爽。 請記住，覆蓋的部分 UI 有時可能表示其具有折疊性或者只會暫時存在，因此在變更此行為時請留意其互動暗示。 這項技術可能更適合尺寸較小的裝置。
重新排列 UI 元素
移至接縫任一側
您可以使用一種回應式配置技術來進行雙螢幕裝置的最佳化，那就是在螢幕方向或大小有所變更時重新排列內容。 您不需要橫跨兩個螢幕任意延展應用程式元素，而是用更好的群組方式重新排列元素，更主動地調整應用程式內容。
遮蔽和分割
軟體處理接縫的方式有兩種。 一種是「遮蔽」，一種是「分割」。
遮蔽技術會在接縫背面呈現影像。 當影像部分受阻時，我們的大腦會自己將「看不見」的部分連接起來。 這項技術通常適用於媒體 (影片、相片等) 以及畫布類型的案例，在這類情況下，讓影像保持連續比確保顯示所有內容更為重要。
分割技術會將影像切開來呈現影像。 這種行為就和在多個監視器上顯示應用程式時一樣。 應用程式如果有許多控制項 (例如按鈕)，且可能會出現在兩個螢幕中間，就很適合使用這項技術。
根據所要建立的應用程式類型而定，這兩種選項各有其優點，我們接下來會繼續了解不同案例的最佳預設行為。
雙螢幕應用程式模式
先前所討論的技術主要是為了配合接縫，讓應用程式繼續為使用者提供價值。 下列模式可讓您利用有兩個螢幕的特點。
下面有 5 個雙螢幕模式供您考量。 雙螢幕裝置的模式不只這些，這裡所提供的模式只是為了讓您作為想像力的發展起點。
延伸的畫布
「延伸畫布」模式是最簡單的雙螢幕模式，但是功能很強大。 如果您需要更大的畫布來進行繪製等工作，或者您的應用程式有自由流動的畫布可供使用者任意捲動以避開接縫，則可以考量這個模式。 這可讓您的應用程式擁有更多實際可用的螢幕空間，而不必將其限縮到其中一個螢幕。
此模式只適用於 UI 的畫布部分。 如果接縫會遮蔽應用程式的非畫布部分，您還是需要使用其他技術來配合接縫。
關鍵價值：
延伸畫布可讓使用者利用雙螢幕裝置所提供較大實際可用的螢幕空間。
可能受益於此模式的應用程式類型：
- 地圖應用程式
- 繪製畫布應用程式
清單詳細資料
「清單詳細資料」模式具有一個主窗格 (通常會有一個清單檢視) 和用來顯示內容的詳細資料窗格。 當選取清單中的項目時，詳細資料窗格即會更新。 當您有更大的檢視區域時，此模式自然就很好用。 這個模式經常用於電子郵件和通訊錄。
利用兩個不同的螢幕並貼齊至自然邊界，您便可以用一個螢幕來顯示「項目」清單，再用另一個螢幕顯示所選項目的詳細資料。
如先前所述，我們會開始觀察使用者的趨勢，了解其是否偏好使用雙橫向視野來利用較大的實際可用螢幕空間。 因此，您可以考慮在雙重直向畫面模式中並排顯示清單和詳細資料檢視，但在雙重橫向畫面模式時則變更為只顯示清單或詳細資料檢視。
關鍵價值：
將導覽或概觀與詳細資料分開，可讓使用者深入探索內容，同時保持其在整體清單/彙總中的位置。
可能受益於此模式的應用程式類型：
- 具有清單或資源庫的應用程式
- 郵件應用程式
- 排程應用程式
- 相片或影像鑑藏應用程式
- 具有播放清單和歌曲詳細資料的音樂應用程式
- 具有強式導覽結構的應用程式
雙頁面
有些應用程式自然傾向於類似書籍分頁體驗。 您可以使用自然界限，從集合 (例如頁面或圖片) 顯示數個項目，否則可能需要使用者一次檢視一個。
視您的應用程式而定，您可以決定將每 2 頁分頁，或一次推進一頁。
關鍵價值：
利用書本的擬態比喻以在每個螢幕展示一個頁面，以方便閱讀。
可能受益於此模式的應用程式類型：
- 文件導向的應用程式
- 有分頁內容的應用程式
- 為閱讀而建立的應用程式
- 具有分項畫布的應用程式 (例如，筆記、美術板)
雙重檢視
具備兩個畫面提供天然的能供性，可並排比較和對比相同類型內容的兩個版本，例如兩個影像、清單或文件。
這種檢視也可用來同時以兩種不同的方式顯示相同的資訊，讓每個螢幕都順暢地運作以提供更多資訊給使用者。 例如，一個螢幕上是餐廳清單，另一個螢幕上則是所在位置的地圖。
如果您想要在不用設計兩個特定檢視的情況下達成雙重檢視類型的體驗，請考慮改為為應用程式支援多個執行個體，以利用 OS 所提供的內建支援。 這種方式適用於比較兩個索引標籤上所開啟的兩樣產品或其他類似案例。
關鍵價值：
在相同容器中有多個相同應用程式的檢視，允許並排比較相似類型內容。
可能受益於此模式的應用程式類型：
- 受益於並排前後狀態的編輯工具 (例如，Markdown 程式碼和預覽)
- 內容和情境並排 (例如，地圖和餐廳清單)
- 可讓使用者比較類似項目的應用程式
- 具備含有協調內容的兩個畫布，但是讓每個頁面分開；例如，畫布在一邊，作筆記時在另一邊
隨附窗格
隨附窗格模式是一個絕佳的機會，可讓您採用隱藏的第二層表面，並在應用程式跨螢幕使用時公開，藉此充分利用新增實際可用的螢幕空間。
您也可以透過將應用程式畫布放在一個螢幕上，並使用另一個螢幕來保存可供操作畫布內容的工具，來利用兩個螢幕。 在針對工具案例使用隨附窗格時，由於人體工學的緣故，工具可能比較適合出現在右邊或底部，但仍請您測試應用程式以了解怎麼樣的配置最適合您的應用程式。
關鍵價值：
藉由將先前內嵌的第 2 層功能提升至表面以加快存取速度，顯示互補內容來強化使用者的工作 (通常具有主要/次要關係)。
將取用內容與互動工具分開，可讓使用者更輕鬆地剖析內容並將焦點放在內容上。 它可讓工具更接近手部，特別是在雙橫向模式中，以提供更豐富的體驗。
可能受益於此模式的應用程式類型：
- 補充資訊會出現在主要內容旁邊的生產力應用程式
- 影像繪圖應用程式之類的創意工具
- 音樂或影片編輯器應用程式
- 遊戲應用程式
後續步驟
選取開發平台以了解如何建置雙螢幕應用程式：