<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 移動端常用組件用法解析:對話框設(shè)計(jì)|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

          2023-12-5    周周

          移動端常用組件用法解析:對話框設(shè)計(jì)

          一、定義

          一種模態(tài)①窗口。它在用戶需要做出選擇或輸入信息時(shí)出現(xiàn),直到用戶做出選擇或取消操作之前,會阻止與應(yīng)用的其他部分交互。

          移動端常用組件用法解析:對話框設(shè)計(jì)

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

          二、觸發(fā)場景

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

          1. 確認(rèn)操作:

          當(dāng)應(yīng)用需要用戶確認(rèn)執(zhí)行重要或潛在風(fēng)險(xiǎn)的操作時(shí),如刪除文件、清除數(shù)據(jù)或退出賬戶等。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          2. 錯(cuò)誤和警告:

          向用戶顯示錯(cuò)誤、警告等重要的提示信息,尤其是當(dāng)這些錯(cuò)誤或警告可能影響用戶的操作或數(shù)據(jù)安全時(shí)。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          3. 隱私協(xié)議:

          當(dāng)應(yīng)用需要從用戶那里收集特定的信息和隱私協(xié)議等。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          4. 權(quán)限請求:

          請求用戶授權(quán),例如訪問位置信息、通知權(quán)限、相機(jī)和麥克風(fēng)訪問等。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          5. 操作選擇:

          當(dāng)應(yīng)用需要用戶在幾個(gè)選項(xiàng)之間做出選擇時(shí),如設(shè)置選項(xiàng)、操作選擇等。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          6. 表單輸入:

          當(dāng)前需要進(jìn)行表單輸入時(shí),如登錄 icloud 需要輸入密碼以完成驗(yàn)證時(shí)。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          三、注意事項(xiàng)

          1. 強(qiáng)阻斷性:

          點(diǎn)擊遮罩無法讓 Dialog 消失,只有點(diǎn)擊 Dialog 上的操作才能使其消失。具備強(qiáng)阻斷性。

          2. 選項(xiàng)限制:

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

          移動端常用組件用法解析:對話框設(shè)計(jì)

          ②兩到三個(gè)選項(xiàng):

          1. 根據(jù)認(rèn)知負(fù)荷理論,人的工作記憶容量有限。喬治·A·米勒的經(jīng)典研究提出,人類的短期記憶一次大約只能處理 7 個(gè)(加減 2 個(gè))信息單位。當(dāng)信息量超過這個(gè)范圍時(shí),認(rèn)知負(fù)荷增加,處理效率下降。對話框選項(xiàng)過多會超出這個(gè)認(rèn)知處理的最佳范圍;
          2. 據(jù)希克定律(Hick’s Law),決策時(shí)間與選項(xiàng)數(shù)量呈對數(shù)關(guān)系。這意味著增加選項(xiàng)數(shù)量會顯著增加用戶做出決策所需的時(shí)間;
          3. 由于 Dialog 是強(qiáng)阻斷組件,用戶只有操作完成后,才能結(jié)束當(dāng)前流程。故選項(xiàng)應(yīng)該在(7-2)的基礎(chǔ)上減半,以此提升用戶完成效率。

          關(guān)于希克定律的應(yīng)用實(shí)例:

           

           

          3. 使用適當(dāng):

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

          4. 易用的交互

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

          移動端常用組件用法解析:對話框設(shè)計(jì)

          四、案例示意

          以下為常見的案例示意。包含錯(cuò)誤示意和對應(yīng)的正確示意。

          ×錯(cuò)誤示意:按鈕和標(biāo)題文案都含有取消,容易產(chǎn)生歧義。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          √ 正確示意:標(biāo)題文案和操作文案避免歧義的發(fā)生。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          ×錯(cuò)誤示意:增加了雙重判斷,使得語句的表達(dá)多了一層判斷邏輯。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          √ 正確示意:不使用雙重判斷,文案表達(dá)簡單清晰。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          ×錯(cuò)誤示意:操作項(xiàng)大于 3 個(gè)時(shí),應(yīng)使用底部操作面板。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          √ 正確示意:底部操作面板弱阻斷,且底部操作面板可以承載更多的操作項(xiàng)。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          ×錯(cuò)誤示意:毀滅性操作,應(yīng)該在對話框有明顯的視覺提示。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          √ 正確示意:操作項(xiàng)含有刪除字樣,且紅字提示,用戶可清楚地感知操作風(fēng)險(xiǎn)。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          ×錯(cuò)誤示意:決策操作在左側(cè),關(guān)閉在右側(cè)。不符合主流產(chǎn)品習(xí)慣。用戶容易習(xí)慣性的點(diǎn)擊右側(cè)的取消按鈕,導(dǎo)致操作失敗。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          √ 正確示意:決策操作在右側(cè),符合iOS和Android主流產(chǎn)品習(xí)慣。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          ×錯(cuò)誤示意:標(biāo)題文案和操作文案不一致。標(biāo)題為確認(rèn),操作按鈕為確定。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          √ 正確示意:標(biāo)題文案和操作文案一致。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          ×錯(cuò)誤示意:標(biāo)題文案和操作文案無關(guān)聯(lián)性。

          移動端常用組件用法解析:對話框設(shè)計(jì)

          √ 正確示意:標(biāo)題文案和操作文案一致。

          移動端常用組件用法解析:對話框設(shè)計(jì)

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

          文章來源:優(yōu)設(shè)網(wǎng)    作者:ASAK設(shè)計(jì)

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

          藍(lán)藍(lán)設(shè)計(jì)(m.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

          關(guān)鍵詞:UI設(shè)計(jì)公司界面設(shè)計(jì)公司UI設(shè)計(jì)服務(wù)公司數(shù)據(jù)可視化設(shè)計(jì)公司UI交互設(shè)計(jì)公司高端網(wǎng)站設(shè)計(jì)公司用戶體驗(yàn)公司軟件界面設(shè)計(jì)公司、軟件qt開發(fā)軟件wpf開發(fā)軟件vue開發(fā)

          日歷

          鏈接

          個(gè)人資料

          存檔

          国产精品日韩深夜福利久久 | 香蕉久久av一区二区三区| 久久99精品久久久久久久不卡| 久久精品国产精品亚洲艾草网美妙| 久久精品aⅴ无码中文字字幕不卡 久久精品aⅴ无码中文字字幕重口 | 中文字幕日本人妻久久久免费 | 综合久久一区二区三区| 久久亚洲美女精品国产精品| 久久久国产精品福利免费| 欧洲国产伦久久久久久久| 国产偷久久久精品专区| 久久精品国产久精国产思思| 激情伊人五月天久久综合| 久久国产美女免费观看精品| 亚洲国产精品无码久久九九 | 精品久久久久久综合日本| 国产欧美久久久精品影院| 人人狠狠综合88综合久久| 国产精品视频久久久| 久久99精品久久久久久| 亚洲国产精品无码久久青草 | 久久精品国产一区二区电影| 91麻豆精品国产91久久久久久| 日韩一区二区三区视频久久| 94久久国产乱子伦精品免费| 久久99国产精品99久久| 狠狠色婷婷久久综合频道日韩 | 久久久久亚洲AV无码麻豆| 久久综合精品国产二区无码| 国产一区二区久久久| 奇米影视7777久久精品| 青青青青久久精品国产h久久精品五福影院1421| 久久精品国产亚洲αv忘忧草| 精品无码久久久久久久久久| 99精品国产综合久久久久五月天 | 久久久久亚洲AV无码观看| 久久精品国产亚洲AV久| 久久精品桃花综合| 久久久无码精品亚洲日韩京东传媒 | 四虎国产精品免费久久久| 久久久久免费看成人影片|