對話框和抽屜的使用場景淺析

3 評論 9143 瀏覽 95 收藏 8 分鐘

編輯導讀:對話框和抽屜都是在父級頁面之上打開一個浮層,在不用離開父級任務的基礎上,完成另一個任務。在企業(yè)級中后臺產品中,兩者都很常見。在有些場景下,對話框和抽屜有時總給人一種兩者皆可的感覺?;隗w驗統(tǒng)一性原則,應該將二者進行區(qū)分,制定出明確的使用規(guī)范。本文將從對話框和抽屜的特性入手,嘗試總結出一套明確的使用規(guī)范。

一、特性

從對話框和抽屜各自的特性入手進行分析,找出二者的差異點,以此作為使用場景判別的基礎。

1. 聚焦性

  • 對話框通常位于父級頁面的中心,與用戶常規(guī)的視覺焦點是重合的,對用戶的注意力的壟斷性較強烈,內容的聚焦性也更強
  • 抽屜通常位于父級頁面的邊緣,不在用戶常規(guī)的視覺焦點中心,具有一定的偏移,內容的聚焦性較弱

2. 延續(xù)性

  • 對話框通常是從父級頁面的中心彈出,具有較強的阻斷性,適合相對于原界面較為獨立的內容
  • 抽屜通常是從父級頁面的邊緣滑出,具有較強的連貫性,適合與原界面具有延續(xù)關系的內容

3. 父級內容可見性

  • 由于對話框通常位于父級頁面的中心,因此通常會遮擋住父級頁面的核心內容,父級內容可見性較差
  • 抽屜通常位于父級頁面的邊緣,因此通常不會遮擋住父級頁面的核心內容,父級內容可見性較好

抽屜的父級內容可見性較好,僅限于抽屜寬/高度較小的情況下,否則,抽屜在父級可見性方面并不占優(yōu)勢。

4. 多層可用性

  • 對話框懸浮在父級界面的中心,多層對話框要么會互相完全遮擋,導致用戶不清楚自己所在的層級,要么錯層展示,這又會使界面比較混亂。因此,對話框的多層可用性較差
  • 抽屜僅有一邊不貼著父級的邊緣,多層抽屜僅在寬/高上有所不同,錯層后能明確的區(qū)分出層級,且齊整有序,多層可用性相對較好

但還是應該從流程/信息層級優(yōu)化入手,盡量避免多層模態(tài)界面的出現。

5. 內容承載量

從內容承載量的角度來區(qū)別對話框與抽屜,并不具有說服力,兩者都可擴展,甚至是擴展至全屏。

二、使用場景

以上總結了對話框與抽屜的特性,根據這些特性,我們能夠隱隱感覺到對話框與抽屜一定有各自適合的使用場景,而不是兩者皆可。

1. 根據內容分類判別

根據內容分類,可將使用場景分為信息確認、操作反饋、表單編輯、內容展示這四類。但僅根據內容分類場景,是無法在表單編輯與內容展示場景中準確判別應使用對話框還是抽屜。

2. 根據父子界面的關系判別

在表單編輯與內容展示場景中,還需分析父子界面之間的關系,并結合對話框與抽屜的特性,來判別當前場景適合對話框還是抽屜。

可綜合分析子界面的獨立性與聚焦性,僅在子界面同時具有較高的獨立性與聚焦性時使用對話框,在其他情況下,則使用抽屜更為合適。

  • 組合一:高聚焦性 + 高獨立性 — 對話框
  • 組合二:高聚焦性 + 低獨立性 — 抽屜
  • 組合三:低聚焦性 + 高獨立性 — 抽屜
  • 組合四:低聚焦性 + 低獨立性 — 抽屜

三、案例舉例

案例一:華為云

在此處的主任務是填寫表單,抽屜中的內容是對父級界面中某一個表單項的解釋,并不需要高度壟斷用戶的注意力。

因此屬于低聚焦性 + 低獨立性,使用抽屜更合適。

案例二:華為云

此處的主任務是向父級界面中新增一條內容,對話框中的表單編輯是需要用戶高度關注的,且此表單編輯不依賴父級界面。

因此屬于高聚焦性+高獨立性,使用對話框更合適。

案例三:華為云

此處的主任務可能是任何其他正在進行中的任務,查看消息只是作為臨時任務。

因此屬于低聚焦性 + 高獨立性,使用抽屜更合適。

案例四:釘釘郵箱

此處的主任務是查看郵件詳情,但同時兼顧了快速切換郵件的功能,使用抽屜能夠完全看到郵件狀態(tài)、發(fā)件人及部分主題,方便用戶快速切換。

因此屬于高聚焦性 + 低獨立性,使用抽屜更合適。

案例五:銷售易

此處的主任務是對父級界面功能介紹,需要用戶在接觸父界面之前,就先了解到這些功能介紹,需要引起用戶足夠的注意力。

因此屬于高聚焦性 + 高獨立性,使用對話框更合適

四、結語

以上純屬個人當前見解,還需更多的實踐驗證及交流討論。

 

本文由@三多的設計筆記 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很有啟發(fā) 謝謝

    來自浙江 回復
  2. 特意注冊點贊

    來自四川 回復
  3. 很有啟發(fā) 謝謝

    來自廣東 回復