對話方塊和飛出視窗

對話方塊和飛出視窗是發生需要通知、核准,或使用者其他資訊的情況時所顯示的暫時性 UI 元素。

對話方塊

Example of a dialog

對話方塊是提供內容相關應用程式資訊的強制回應 UI 重疊項目。 對話方塊會封鎖與應用程式視窗的互動,直到對話方塊確實關閉為止。 而且對話方塊通常會需要使用者執行某種動作。

飛出視窗

Example of a flyout

飛出視窗是輕量型關聯式快顯,可顯示與使用者所執行動作相關的 UI。 其中包含位置和大小調整邏輯,並且可以用來顯示次要控制項或顯示更多有關項目的詳細資料。

與對話方塊不同,飛出視窗可以透過點選或按一下飛出視窗以外的某個位置、按 Esc 鍵或 [上一頁] 按鈕、調整應用程式視窗的大小,或變更裝置的方向來快速關閉飛出視窗。

這是正確的控制項嗎?

對話方塊和飛出視窗可確保使用者知道重要資訊,但他們也會中斷使用者體驗。 因為對話方塊為強制回應 (封鎖),所以會打擾使用者,並防止他們繼續執行動作,直到他們與對話方塊互動為止。 飛出視窗提供較不擾人的體驗,但顯示太多飛出視窗可能會分散注意力。

決定要使用對話方塊或飛出視窗之後,您必須選擇要使用哪一個。

鑑於對話方塊會封鎖互動而飛出視窗不會,對話方塊應該保留給您希望使用者放下手邊工作以專注於特定資訊或回答問題的情況。 另一方面,飛出視窗可以在您想要引起注意時使用,但如果使用者想要忽略也沒關係。

適合使用對話方塊的情況...

  • 表示使用者「必須」先閱讀並確認才能繼續執行工作的重要資訊。 範例包括:
    • 當使用者的安全性可能遭到入侵時
    • 當使用者即將永久改變有價值的資產時
    • 當使用者即將刪除有價值的資產時
    • 確認應用程式內購買
  • 套用至整體應用程式內容的錯誤訊息,例如連線錯誤。
  • 問題,當應用程式需要詢問使用者封鎖問題時,例如當應用程式無法代表使用者選擇時。 封鎖問題無法忽略或延後,且應該為使用者提供定義完善的選擇。

適合使用飛出視窗的情況...

  • 收集完成動作之前所需的其他資訊。
  • 顯示僅在某些情況下有關聯的資訊。 例如,在相片庫應用程式中,當使用者按一下影像縮圖時,您可以使用飛出視窗來顯示大型版本的影像。
  • 顯示詳細資訊,例如頁面上項目的詳細資料或較長的描述。

避免使用對話方塊與飛出視窗的方法

考量您要分享之資訊的重要性:是否重要到必須打擾使用者? 此外請考慮需要顯示資訊的頻率;如果您要每隔幾分鐘顯示一個對話方塊或通知,您可能會想要改為在主要 UI 中配置這項資訊的空間。 例如,在聊天用戶端中,並非每次朋友登入時顯示飛出視窗,您可能會顯示目前線上朋友的清單,並在朋友登入時醒目提示。

對話方塊常用來在執行動作之前確認該動作 (例如刪除檔案)。 如果您預期使用者經常執行特定動作,請考慮提供一種方式讓使用者在動作發生錯誤時復原動作,而不是每次強制使用者確認動作。

範例

  • 如果您已安裝 WinUI 3 Gallery 應用程式,請按一下這裡開啟應用程式並查看 ContentDialogFlyout 運作情形。 從 Microsoft Store 取得應用程式,或在 Github 上取得原始程式碼。

如何建立對話方塊

請參閱對話方塊文章

如何建立飛出視窗

請參閱飛出視窗文章