中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

隨著互聯(lián)網(wǎng)應(yīng)用的不斷發(fā)展，彈窗組件已經(jīng)成為了界面設(shè)計(jì)中不可或缺的一部分。彈窗組件可以幫助我們更好地展示信息，提供更多的交互方式，以及增強(qiáng)用戶體驗(yàn)。但是，設(shè)計(jì)一個(gè)好的彈窗組件并不是一件容易的事情。需要考慮的因素很多，比如彈窗的類型、場(chǎng)景、功能、樣式等等。同時(shí)，彈窗是一把雙刃劍，用的好能使用戶行為更加聚焦從而提效，如果使用的不恰當(dāng)，可能會(huì)使用戶產(chǎn)生負(fù)面情緒甚至擊退潛在用戶。因此，本文將為大家系統(tǒng)剖析彈窗組件，介紹常用的幾種彈窗組件設(shè)計(jì)的指導(dǎo)原則以及使用場(chǎng)景、技巧，幫助大家更高效正確的設(shè)計(jì)出易用的彈窗，提升產(chǎn)品的用戶體驗(yàn)。

彈窗組件是產(chǎn)品中重要的核心組件之一，是一種瞬態(tài)的交互式視圖，它會(huì)在“合適”的時(shí)間彈出到頁(yè)面的最頂層，并借由用戶的一次點(diǎn)擊完成關(guān)閉。文章將從彈窗的定義及分類，彈窗的設(shè)計(jì)規(guī)范，彈窗的設(shè)計(jì)實(shí)踐三個(gè)部分進(jìn)行講解。

一、彈窗定義及分類

彈窗的定義：彈窗是一種模式窗口，它出現(xiàn)在應(yīng)用程序內(nèi)容界面z軸最上方，用于提供關(guān)鍵信息或要求做出決定。彈窗具備兩個(gè)特點(diǎn)及作用：一個(gè)是聚焦用戶視線，再一個(gè)是給予用戶重要提示。

常見(jiàn)彈窗示例

彈窗的分類：從彈窗的交互特點(diǎn)上來(lái)看，可分為模態(tài)彈窗和非模態(tài)彈窗兩種。模態(tài)是UI控件或視圖的一種狀態(tài)，用戶只能對(duì)處于模態(tài)的控件或視圖進(jìn)行響應(yīng)，不能操作其他非模態(tài)的控件或視圖。兩者的主要區(qū)別在于是否打斷當(dāng)前進(jìn)程，以及需不需要用戶對(duì)其進(jìn)行回應(yīng)。

模態(tài)彈窗：會(huì)打斷用戶的正常操作，要求用戶必須對(duì)其進(jìn)行回應(yīng)，否則不能繼續(xù)其它操作。

非模態(tài)彈窗：則不會(huì)影響用戶的操作，用戶可以不對(duì)其進(jìn)行回應(yīng)，繼續(xù)當(dāng)前的操作。

模態(tài)彈窗與非模態(tài)彈窗差異

常見(jiàn)的模態(tài)彈窗主要有：對(duì)話框（Dialog）、操作欄（Actionbar），以及選擇視窗（Modal view）、模態(tài)氣泡（Popovers）；常見(jiàn)的非模態(tài)彈窗主要有：提示框（Toast），提示對(duì)話框（Snackbar）。

模態(tài)彈窗與非模態(tài)彈窗示例

對(duì)話框（Dialog）：對(duì)話框是一種模態(tài)彈窗，需要得到用戶的實(shí)時(shí)反饋，是連接產(chǎn)品與用戶的主要功能形式之一，通?？梢园缪菀龑?dǎo)、詢問(wèn)、確認(rèn)、警示等一些列功能角色，但由于其阻斷感強(qiáng)，且操作不可忽略，所以在產(chǎn)品設(shè)計(jì)中需謹(jǐn)慎使用。

對(duì)話框特點(diǎn)及示例

操作欄（Actionbar）：操作欄是對(duì)話框的一種延伸，也是模態(tài)彈窗，用戶必須進(jìn)行操作，彈窗才會(huì)消失，和對(duì)話框的區(qū)別是操作欄擁有更多的功能按鈕，其重點(diǎn)在操作。

操作欄特點(diǎn)及示例

提示框（Toast）：一般出現(xiàn)在頁(yè)面的中下方，顯示幾秒然后自動(dòng)消失，其阻斷感弱，一般用來(lái)顯示操作結(jié)果，或者提示提醒。

提示框特點(diǎn)及示例

提示對(duì)話框（Snackbar）：提示對(duì)話框是一種兼容提示與操作的消息控件。其和Toast類似，在不操作的情況下幾秒后自動(dòng)消失，同時(shí)滑動(dòng)頁(yè)面等也可忽略消息，容器中一般放置輕量的行動(dòng)按鈕。

提示對(duì)話框特點(diǎn)及示例

綜上，以上四類彈窗從橫向打擾度、縱向業(yè)務(wù)助力性角度，對(duì)比可以得到如下二維線性對(duì)比圖。當(dāng)有運(yùn)營(yíng)活動(dòng)、推廣等業(yè)務(wù)屬性較強(qiáng)的信息需要展示時(shí)，可以對(duì)價(jià)值進(jìn)行評(píng)估判斷是否選用強(qiáng)制性較強(qiáng)且打擾度較高的對(duì)話框進(jìn)行，若權(quán)衡業(yè)務(wù)價(jià)值后發(fā)現(xiàn)不需要對(duì)話框這樣過(guò)度打擾用戶的方式，可以嘗試能否選用snack bar或其他彈窗解決；

從橫向即時(shí)性、縱向重要性角度，同樣對(duì)比可以得到如下二維線性對(duì)比圖。toast多用于即時(shí)性較強(qiáng)的狀態(tài)或結(jié)果的反饋，snack bar多用于推送等非即時(shí)性提示，而對(duì)話框則用于即使性強(qiáng)且重要性很高需要用戶第一時(shí)間完成操作或決策的場(chǎng)景。

四類彈窗不同維度對(duì)比

二、設(shè)計(jì)規(guī)范

接下來(lái)讓我們看下以上四類代表性彈窗各自的設(shè)計(jì)規(guī)范以及注意點(diǎn)。

1. 對(duì)話框

（1）元素及設(shè)計(jì)規(guī)范

首先來(lái)看對(duì)話框，對(duì)話框是一種模態(tài)窗口。在解決模態(tài)之前，將禁用對(duì) UI 其余部分的訪問(wèn)。所有模態(tài)表面在設(shè)計(jì)上都是中斷的——它們的目的是讓用戶專注于所有出現(xiàn)在其表面之上的內(nèi)容。

對(duì)于對(duì)話框的設(shè)計(jì)，有三點(diǎn)核心設(shè)計(jì)原則，分別是：專注聚焦、直接的、有幫助。專注：即將用戶注意力集中，以確保他們的內(nèi)容得到解決；直接的：對(duì)話應(yīng)該直接傳達(dá)信息并致力于完成任務(wù)，因此他必須是簡(jiǎn)單直接的；有幫助：對(duì)話框應(yīng)出現(xiàn)以響應(yīng)用戶任務(wù)或操作，并帶有相關(guān)或上下文信息，簡(jiǎn)潔有效。

一個(gè)完整的對(duì)話框一般由以下5個(gè)部分組成，其中，標(biāo)題、行動(dòng)按鈕是兩個(gè)基礎(chǔ)必備元素，輔助內(nèi)容、關(guān)閉控件、粗布蒙層是非必要元素。

對(duì)話框要素組成

1）標(biāo)題：

標(biāo)題是對(duì)話框向用戶傳達(dá)其目的、作用的核心手段，使用時(shí)需與行動(dòng)按鈕配合呼應(yīng)。有以下幾個(gè)注意點(diǎn)：

• 標(biāo)題需要盡可能簡(jiǎn)短、清晰，可以是陳述或問(wèn)題；
• 避免使用道歉（“抱歉打擾了”）、警告（“警告！”）或含糊不清（“你確定嗎？”）等文案；
• 盡量在屬性對(duì)話框中使用名詞，在功能對(duì)話框的標(biāo)題中使用動(dòng)詞；

*屬性對(duì)話框：向用戶呈現(xiàn)或讓用戶改變所選對(duì)象的屬性或者設(shè)置，主要具備說(shuō)明、呈現(xiàn)的作用；

*功能對(duì)話框：為用戶提供功能操作的彈窗，需要詢問(wèn)用戶的決策來(lái)執(zhí)行下一步操作。

2）輔助內(nèi)容：

輔助內(nèi)容的作用是輔助表達(dá)對(duì)話框的目的或?yàn)橛脩籼峁┎僮髅姘?。有以下幾個(gè)注意點(diǎn)：

• 輔助內(nèi)容視覺(jué)優(yōu)先級(jí)弱于主標(biāo)題；
• 信息內(nèi)容同樣需要簡(jiǎn)潔明練，同時(shí)要與主題關(guān)聯(lián)順承；c、輔助內(nèi)容可以是文案也可以包含簡(jiǎn)單的交互行為，如選單、橫滑等。

3）行動(dòng)按鈕：

行動(dòng)按鈕是對(duì)話框執(zhí)行操作或解決問(wèn)題的核心交互元件，是用戶決策的關(guān)鍵出口，有以下幾個(gè)注意點(diǎn)：

• 按鈕中文案簡(jiǎn)短易懂，一般保持在1~4個(gè)字符之間；
• 按鈕的視覺(jué)優(yōu)先級(jí)較高，突出明顯且易于點(diǎn)擊操作；
• 按鈕文案盡量為用戶的直接操作行為，而不是間接的邏輯判斷。

按鈕的層次結(jié)構(gòu)與優(yōu)先級(jí)表達(dá)按鈕的視覺(jué)優(yōu)先級(jí)層次有三種，由高到低分別是高度強(qiáng)調(diào)、中度強(qiáng)調(diào)、低度強(qiáng)調(diào)，分別對(duì)應(yīng)三類按鈕，即填充按鈕，視覺(jué)優(yōu)先級(jí)以及引導(dǎo)點(diǎn)擊性最強(qiáng)，其次是輪廓按鈕，最次級(jí)是純文本按鈕。

按鈕層次結(jié)構(gòu)及優(yōu)先級(jí)

一個(gè)彈窗一次可以在布局中顯示多個(gè)按鈕，因此高強(qiáng)調(diào)按鈕可以與執(zhí)行次要功能的中強(qiáng)調(diào)按鈕和低強(qiáng)調(diào)按鈕配合使用。

按鈕優(yōu)先級(jí)搭配使用建議

按鈕的召喚行為彈窗中左右功能按鈕的次序排布，用戶的慣性認(rèn)知為：左后退，右行進(jìn)。

相關(guān)的研究論據(jù)：

通常，我們?cè)诋a(chǎn)品中會(huì)為了達(dá)成某種指標(biāo)，需要在界面上引導(dǎo)用戶去完成我們希望其完成的操作。且這類操作是可以達(dá)成某種目的的，我們把這類操作稱為「召喚行為」，該按鈕成為召喚按鈕，又稱CTA（Call To Action），即從元素的角度引導(dǎo)用戶完成任務(wù)，提升產(chǎn)品轉(zhuǎn)化率。

還需要配合不同彈窗類型的標(biāo)題文案/說(shuō)明文案意向以及使用場(chǎng)景，來(lái)進(jìn)行召喚按鈕的設(shè)計(jì)，總結(jié)如下。

4）關(guān)閉控件

對(duì)話框必須保證具備一條以上可以快速撤退的出口（警報(bào)對(duì)話框除外），并且明顯、穩(wěn)固可靠，便于用戶在特殊場(chǎng)景快速撤離，需要注意：

a、對(duì)話框常用的關(guān)閉形式：

• “關(guān)閉”按鈕，可以在彈窗內(nèi)部/外部；
• “返回”按鈕，一般在彈窗內(nèi)部；
• 輕拍蒙層，即點(diǎn)擊彈窗周圍任意位置；

b、系統(tǒng)警報(bào)類型對(duì)話框會(huì)在設(shè)備或應(yīng)用要求用戶當(dāng)即決策才能進(jìn)行后續(xù)運(yùn)行的時(shí)候出現(xiàn)，此時(shí)用戶需要優(yōu)先執(zhí)行當(dāng)前操作，或者使用物理按鈕后撤；

c、其他常見(jiàn)對(duì)話框中，即便行動(dòng)按鈕中包含類似“取消”、“關(guān)閉”等選項(xiàng)時(shí)，也需要額外設(shè)置關(guān)閉按鈕，便于用戶在無(wú)需耗費(fèi)認(rèn)知&決策成本下，可以快速后撤；

5）海拔

通常對(duì)話框以 24dp 的高度（z軸）顯示并且可以顯示陰影，可以依據(jù)不同場(chǎng)景通過(guò)調(diào)節(jié)陰影的彌散程度來(lái)控制（OS 2.0規(guī)范了投影的彌散范圍）。它們出現(xiàn)在其他內(nèi)容之上，通常在它們下方有一個(gè)覆蓋所有應(yīng)用程序內(nèi)容的蒙層。

6）蒙層

蒙層是一種臨時(shí)處理，可應(yīng)用于頁(yè)面內(nèi)容表面，目的是使表面上的內(nèi)容不那么突出。為了表示應(yīng)用程序的其余部分無(wú)法訪問(wèn)，并將注意力集中在對(duì)話框上，對(duì)話框后面的表面被蒙層覆蓋。

（2）對(duì)話框類型

對(duì)話框在的內(nèi)容部分可以內(nèi)嵌功能組件，可以是文案、選項(xiàng)、下拉框等，從功能特點(diǎn)上，主要分為警報(bào)。

對(duì)話框功能類型

1）警報(bào)對(duì)話框

警報(bào)對(duì)話框會(huì)用緊急信息、細(xì)節(jié)或操作來(lái)打斷用戶。迫使用戶當(dāng)前處理系統(tǒng)的緊急問(wèn)題

警報(bào)對(duì)話框

2）簡(jiǎn)單對(duì)話框

簡(jiǎn)單對(duì)話框顯示選擇后立即生效的項(xiàng)目列表。

簡(jiǎn)單對(duì)話框

3）確認(rèn)對(duì)話框

確認(rèn)對(duì)話框要求用戶在關(guān)閉對(duì)話框之前確認(rèn)選擇。

確認(rèn)對(duì)話框

4）全屏對(duì)話框

全屏對(duì)話框填滿整個(gè)屏幕，包含需要一系列任務(wù)才能完成的操作。

全屏對(duì)話框

2. 功能對(duì)話框

Actionbar功能框可以看成是Dialog對(duì)話框的一種延伸設(shè)計(jì)，兩者都是模態(tài)彈窗，用戶必須進(jìn)行回應(yīng)，否則彈窗不會(huì)消失，用戶無(wú)法繼續(xù)其它操作。Actoinbar比Dialog擁有更多的功能按鈕，提供給用戶更多的功能選擇。

Actionbar功能框注意點(diǎn)

注意點(diǎn)：1、敏感的功能操作一般用紅色字體標(biāo)出（也可以設(shè)計(jì)其它顏色以突出某個(gè)功能按鈕）。2、當(dāng)功能按鈕數(shù)量很多的時(shí)候，純文本列表的形式閱讀效率較低，此時(shí)可以用圖形加文字描述排列的形式來(lái)進(jìn)行展示。這種樣式下需要注意彈窗內(nèi)各功能按鈕的UI設(shè)計(jì)和排列布局。

Actionbar功能框注意點(diǎn)

3. 提示條

Toast提示條是一種非模態(tài)彈窗，它彈出一個(gè)小信息，作為提醒或消息反饋來(lái)用，一般用來(lái)顯示操作結(jié)果，或者應(yīng)用狀態(tài)的改變。

Snackbar提示條組成要素

Toast提示條注意點(diǎn)

Toast提示條案例

4. 提示對(duì)話框

Snackbar它也是一種非模態(tài)彈窗，同時(shí)擁有Toast和Dialog的特點(diǎn)，既不會(huì)打斷用戶正常的操作流程，可以告訴用戶信息內(nèi)容，還可以與用戶進(jìn)行簡(jiǎn)單的對(duì)話交互（用戶可以點(diǎn)擊行動(dòng)按鈕進(jìn)行回應(yīng)）。

Snackbar提示對(duì)話框的要素組成

Snackbar提示對(duì)話框注意點(diǎn)

Snackbar與Toast特點(diǎn)對(duì)比

三、彈窗設(shè)計(jì)實(shí)踐

彈窗設(shè)計(jì)的思路可以系統(tǒng)化總結(jié)為以下四個(gè)步驟：

1. 設(shè)計(jì)目標(biāo)分析：明確設(shè)計(jì)目標(biāo)，平衡業(yè)務(wù)&用戶，確認(rèn)彈窗出現(xiàn)的目標(biāo)價(jià)值；
2. 確定出現(xiàn)時(shí)機(jī)/位置：梳理用戶體驗(yàn)路徑，判斷彈窗出現(xiàn)的時(shí)機(jī)位置；
3. 選擇彈窗類型：明確提示/引導(dǎo)等功能的產(chǎn)品定位及優(yōu)先級(jí)，選擇合適的彈窗類型；
4. 確定彈窗信息：確認(rèn)彈窗中各信息元素內(nèi)容、布局、優(yōu)先級(jí)表達(dá)。

彈窗設(shè)計(jì)思路

下面通過(guò)一個(gè)實(shí)際需求案例來(lái)進(jìn)行彈窗的設(shè)計(jì)應(yīng)用。需求的背景，是業(yè)務(wù)側(cè)希望在聯(lián)運(yùn)用戶支付的過(guò)程中，提升未開(kāi)通小額免密用戶的小額免密開(kāi)通率，低額度小額免密用戶的額度升檔率。

設(shè)計(jì)目標(biāo)分析

確認(rèn)時(shí)機(jī)位置

選擇合適的彈窗

確認(rèn)彈窗信息