解析 | 移動端常用組件:對話框(Dialog)的用法

0 評論 4229 瀏覽 23 收藏 10 分鐘

對話框這一組件在移動端十分常見,那么你是否對這一組件有足夠的了解呢?這篇文章里,作者從觸發場景、注意事項、案例拆解等方面,對移動端組件“對話框”做了解析,一起來看看吧。

本篇文章講解移動端設計中一個常用組件:對話框(Dialog)。

本文大綱如下:

  1. 定義
  2. 觸發場景
  3. 注意事項
  4. 案例示意

注:文中的組件樣式來自于開源的光音設計規范。

一、定義

一種模態①窗口。它在用戶需要做出選擇或輸入信息時出現,直到用戶做出選擇或取消操作之前,會阻止與應用的其他部分交互。

①模態:特定的界面狀態或行為,其中用戶的交互被限制在某個特定的界面元素上,直到完成一個特定的任務或操作。

二、觸發場景

對話框(Dialog)通常用于以下幾種主要場景:

1. 確認操作

當應用需要用戶確認執行重要或潛在風險的操作時,如刪除文件、清除數據或退出賬戶等。

2. 錯誤和警告

向用戶顯示錯誤、警告等重要的提示信息,尤其是當這些錯誤或警告可能影響用戶的操作或數據安全時。

3. 隱私協議

當應用需要從用戶那里收集特定的信息和隱私協議等。

4. 權限請求

請求用戶授權,例如訪問位置信息、通知權限、相機和麥克風訪問等。

5. 操作選擇

當應用需要用戶在幾個選項之間做出選擇時,如設置選項、操作選擇等。

6. 表單輸入

當前需要進行表單輸入時,如登錄icloud需要輸入密碼以完成驗證時。

三、注意事項

1. 強阻斷性

點擊遮罩無法讓Dialog消失,只有點擊Dialog上的操作才能使其消失。具備強阻斷性。

2. 選項限制

避免在對話框中提供過多選項。通常,兩到三個選項②足以覆蓋大多數場景。當超過三個時,則需要用Action Sheet(操作面板),如下圖所示:

② 兩到三個選項:

1)根據認知負荷理論,人的工作記憶容量有限。喬治·A·米勒的經典研究提出,人類的短期記憶一次大約只能處理7個(加減2個)信息單位。當信息量超過這個范圍時,認知負荷增加,處理效率下降。對話框選項過多會超出這個認知處理的最佳范圍;

2)據??硕桑℉ick’s Law),決策時間與選項數量呈對數關系。這意味著增加選項數量會顯著增加用戶做出決策所需的時間;

3)由于Dialog是強阻斷組件,用戶只有操作完成后,才能結束當前流程。故選項應該在(7-2)的基礎上減半,以此提升用戶完成效率。

3. 使用適當

只在真正需要用戶的注意或決策時使用對話框。過度使用對話框會打擾用戶體驗,并可能導致用戶對這些警告變得麻木和失去耐心。

4. 易用的交互

提供明確的交互選項,如明確地“取消”和“確定”按鈕。確保按鈕必須清楚地描述它們的作用。例如:確定取消關注嗎?這樣的文案和操作會產生歧義,應該盡量避免。

四、案例示意

以下為常見的案例示意。包含錯誤示意和對應的正確示意。

?錯誤示意:按鈕和標題文案都含有取消,容易產生歧義。

? 正確示意:標題文案和操作文案避免歧義的發生。

?錯誤示意:增加了雙重判斷,使得語句的表達多了一層判斷邏輯。

? 正確示意:不使用雙重判斷,文案表達簡單清晰。

?錯誤示意:操作項大于3個時,應使用底部操作面板。

? 正確示意:底部操作面板弱阻斷,且底部操作面板可以承載更多的操作項。

?錯誤示意:毀滅性操作,應該在對話框有明顯的視覺提示。

? 正確示意操作項含有刪除字樣,且紅字提示,用戶可清楚地感知操作風險。

?錯誤示意:決策操作在左側,關閉在右側。不符合主流產品習慣。用戶容易習慣性的點擊右側的取消按鈕,導致操作失敗。

? 正確示意決策操作在右側,符合iOS和Android主流產品習慣。

?錯誤示意:標題文案和操作文案不一致。標題為確認,操作按鈕為確定。

? 正確示意標題文案和操作文案一致。

?錯誤示意:標題文案和操作文案無關聯性。

? 正確示意標題文案和操作文案一致。

以上就是關于對話框(Dialog)的定義、觸發場景、注意事項和案例示意。如果大家喜歡想看其他組件用法,甚至是整個系列的設計規范,可以在評論區留言。

為我投票

我在參加人人都是產品經理2023年度評選,希望喜歡我的文章的朋友都能來支持我一下~

點擊下方鏈接進入我的個人參選頁面,點擊紅心即可為我投票。

每人每天最多可投30票,投票即可獲得抽獎機會,抽取書籍、人人都是產品經理紀念周邊&起點課堂會員等好禮哦!

投票傳送門:https://996.pm/YD5eg

作者:Echo

來源公眾號:ASAK設計(ID:ASAK_Design),ASAK設計團隊(Astro x Akira)

本文由 @ASAK設計 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!