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

編輯導(dǎo)語(yǔ)：模態(tài)框和非模態(tài)框在設(shè)計(jì)的過(guò)程中經(jīng)常會(huì)被使用到，但是很多人仍然沒(méi)有搞懂應(yīng)該在什么場(chǎng)景下合理的去使用，本文作者結(jié)合自己的經(jīng)驗(yàn)，為我們做了總結(jié)。

最近在整理系統(tǒng)的組件規(guī)范，收集各個(gè)場(chǎng)景下的組件應(yīng)用，在搜集應(yīng)用控件時(shí)，彈窗的套用、混用、亂用情況挺多的。

主要是模態(tài)框和非模態(tài)框的使用：

• 模態(tài)框：一般會(huì)有一層黑色透明的蒙板，它打斷用戶所屬的主流程，不能進(jìn)行下去，只能到完成模態(tài)框的操作，才能返回到主流程中去，這個(gè)操作很明確，不會(huì)被誤解；
• 非模態(tài)框：一般沒(méi)有那一層蒙板，不會(huì)影響所屬的主流程，也不用擔(dān)心原有進(jìn)度會(huì)停止，仍然可以持續(xù)操作，即打開(kāi)非模態(tài)也能看見(jiàn)底層的主流程。

概述：模態(tài)or 非模態(tài)，統(tǒng)稱為彈窗。

樣式上可以理解為類似卡片，能夠幫助用戶快速定位獲取關(guān)鍵信息和進(jìn)行操作，它的內(nèi)容是靈活的，一般情況下包含文字、圖標(biāo)、按鈕。彈窗的設(shè)計(jì)是給用戶傳遞與當(dāng)前場(chǎng)景需要的操作相關(guān)的內(nèi)容。

場(chǎng)景使用：會(huì)根據(jù)業(yè)務(wù)的需要、場(chǎng)景要求，衍生出其他類多種形態(tài)。大多情況下先對(duì)彈窗分類，再對(duì)應(yīng)到場(chǎng)景中使用。而實(shí)際上產(chǎn)品設(shè)計(jì)會(huì)從實(shí)際業(yè)務(wù)出發(fā)，從使用方式考慮，倒推來(lái)使用什么樣的彈窗符合要求。

基本設(shè)計(jì)原則：層次要分明，突出重點(diǎn)。

遵循基本的界面設(shè)計(jì)原則，在多種場(chǎng)景下通過(guò)信息分層、字體的粗細(xì)、大小等方式展現(xiàn)出明顯的視覺(jué)層次，結(jié)合業(yè)務(wù)場(chǎng)景需要再按照閱讀順序慣例來(lái)布局，標(biāo)題使用對(duì)象的名字，目的是幫助用戶聚焦每一個(gè)關(guān)鍵信息上。

一、悄無(wú)聲息的，你在不在乎它，它都會(huì)出現(xiàn)的

全局提示：一般由系統(tǒng)主動(dòng)發(fā)起，不是用戶請(qǐng)求的，大體分為進(jìn)度提醒、通知提醒、公告提醒。

1. 進(jìn)度提醒

這個(gè)是由系統(tǒng)發(fā)起的，表明用戶當(dāng)前所在的操作的進(jìn)程中的位置，抑或是卡在進(jìn)度未操作，無(wú)響應(yīng)狀態(tài)，通知用戶。

位置：在頁(yè)面的頂部浮層顯示一塊區(qū)域；統(tǒng)一放置消息分類里。

2. 通知提醒

來(lái)自系統(tǒng)一些重要的信息推送給用戶，或者是來(lái)自其他用戶的提示信息，抑或是操作反饋。

位置：將其放在右上側(cè)，并自動(dòng)關(guān)閉。

3. 公告提醒

依然是由系統(tǒng)發(fā)起，提醒用戶需要關(guān)注的信息，一般包含系統(tǒng)迭代、系統(tǒng)錯(cuò)誤、審核通過(guò)or不通過(guò)、系統(tǒng)維護(hù)提醒等以及其他活動(dòng)信息。

位置：與進(jìn)度提醒同一位置，一般情況下并會(huì)在3S自動(dòng)消失。

二、強(qiáng)制打斷用戶當(dāng)前流程的

部分功能需要用戶打斷去確認(rèn)操作或是可能會(huì)造成比較危險(xiǎn)的，不常用的，那么就需要改變用戶操作焦點(diǎn)，將用戶的注意力從原來(lái)流程中拎出來(lái)，那么這個(gè)時(shí)候需要一個(gè)方式隔離原有流程和需要當(dāng)前操作的內(nèi)容，模態(tài)框就是比較適用的。

疊加在系統(tǒng)窗口的彈出式窗口，彈框以對(duì)話的方式讓用戶參與進(jìn)來(lái)，以對(duì)話的方式與用戶產(chǎn)生交互操作。

操作反饋提示類：

1. 成功和失敗

對(duì)于某個(gè)模塊的層級(jí)過(guò)深的功能操作反饋，需要在提交之后的結(jié)果反饋中提供輔助導(dǎo)航返回到初始功能頁(yè)面。

2. 確認(rèn)型彈窗

在簡(jiǎn)單的業(yè)務(wù)場(chǎng)景中，只需要用戶進(jìn)行確認(rèn)的“確認(rèn)”或“取消”等案例。一般情況下應(yīng)用在對(duì)內(nèi)容的提交、修改，在內(nèi)容詳情頁(yè)里的刪除操作，表格的批量刪除等。

樣式：標(biāo)題（以所屬對(duì)象作為標(biāo)題）+文案（對(duì)對(duì)象的解釋說(shuō)明）+操作按鈕。

3. 操作型彈窗

在復(fù)雜的業(yè)務(wù)場(chǎng)景中，需要用戶進(jìn)行數(shù)據(jù)輸入一系列操作。

一般會(huì)有新建內(nèi)容（新建內(nèi)容很多的就需要用新頁(yè)面，彈窗有限空間滿足不了大容量的數(shù)據(jù)輸入）、查看詳情（內(nèi)容多需要新頁(yè)面展示）、詳情編輯。有部分場(chǎng)景下，新建內(nèi)容和編輯內(nèi)容是重合的。

一般樣式：標(biāo)題+數(shù)據(jù)輸入組件+操作按鈕

復(fù)雜樣式：標(biāo)題+數(shù)據(jù)輸入和數(shù)據(jù)展示組合控件+操作按鈕

4. 組合型彈窗（堆疊彈窗）

特殊復(fù)雜業(yè)務(wù)中，單層模態(tài)框不能滿足實(shí)際業(yè)務(wù)的需要，考慮彈窗的容量大小以及主次用戶類別使用的情況下，會(huì)使用堆疊彈窗，在有限的條件下，能做的就是盡量將彈窗分層次。

三、彈窗出現(xiàn)不打斷用戶原有流程的

在實(shí)際操作的過(guò)程中，常見(jiàn)的錯(cuò)誤提示、部分晦澀難懂或?qū)I(yè)的術(shù)語(yǔ)、對(duì)功能組件的描述解釋、小模塊里的操作反饋、全文本展示，只會(huì)在用戶不明白用途的情況下，告知用戶，但不能妨礙用戶閱讀或是操作。

1. 氣泡提示（解釋說(shuō)明的）

起輔助說(shuō)明的，輔助用戶決策。

樣式：深色背景+文字描述；一般由鼠標(biāo)滑入目標(biāo)區(qū)域，展現(xiàn)氣泡提示框，鼠標(biāo)滑出即消失。

2. 氣泡對(duì)話框

一般簡(jiǎn)單場(chǎng)景中，對(duì)單條信息或者模塊內(nèi)的某一個(gè)內(nèi)容執(zhí)行操作確認(rèn)。

樣式：背景+（+圖標(biāo)）文案描述+操作按鈕；一般鼠標(biāo)點(diǎn)擊，顯示氣泡，點(diǎn)擊其他區(qū)域即消失。

復(fù)雜的場(chǎng)景中，氣泡框也承載需要用戶去執(zhí)行數(shù)據(jù)輸入的操作，將氣泡內(nèi)的執(zhí)行后的結(jié)果與原流程同步數(shù)據(jù)展示結(jié)果。

除此之外，氣泡框承載的內(nèi)容和模態(tài)框操作類型有重合部分，不同的是，氣泡框的數(shù)據(jù)與主流程的數(shù)據(jù)需要有對(duì)應(yīng)關(guān)系。

3. 堆疊氣泡框

特殊場(chǎng)景需要，單層氣泡框不能滿足需求，內(nèi)容需要比較嚴(yán)謹(jǐn)?shù)母缸蛹?jí)關(guān)系，且并不是常用的，在考慮對(duì)后續(xù)的衍生，也會(huì)將不常用的功能隱藏，需要時(shí)再點(diǎn)擊彈出，方法類似于堆疊模態(tài)框。

四、特殊場(chǎng)景下

在某些復(fù)雜業(yè)務(wù)的場(chǎng)景下，需要模態(tài)框和非模態(tài)框搭配組合使用，特別是操作彈窗和氣泡框之間。

一般情況下，是操作彈窗—>氣泡框（氣泡框—>操作彈窗這個(gè)類型不常有，主要是不符合用戶的使用習(xí)慣）。

五、總結(jié)

對(duì)于彈窗的使用，應(yīng)用到各個(gè)類型的用戶場(chǎng)景下選擇合適恰當(dāng)?shù)姆绞饺M足需求，也許不盡人意，但也是在進(jìn)步。不僅僅需要了解彈窗的類型，更需要了解業(yè)務(wù)場(chǎng)景，實(shí)際應(yīng)用過(guò)程中需要兩者相互碰撞，打破、重組，尋找到合適的方式。

思考延伸：上邊有說(shuō)到堆疊模態(tài)框，在實(shí)際應(yīng)用中，層級(jí)多達(dá)三層彈窗，使用的時(shí)候，重復(fù)點(diǎn)擊好幾次按鈕才能關(guān)閉彈窗，使用起來(lái)甚是麻煩，有沒(méi)有可以優(yōu)化的方法呢？

本文由 @Ychen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議