記錄一下平時(shí)遇到的各種交互組件，持續(xù)更新。

抽屜式彈窗

最近流行了一種可拉式彈窗（稱呼為B），這種彈窗可以用手點(diǎn)擊橫線處，往上滑動(dòng)展開(kāi)，往下滑動(dòng)收起。和經(jīng)常提到的抽屜式彈窗（稱呼為A）很類似，所以，對(duì)比著傳統(tǒng)抽屜式彈窗，分析一下這種彈窗。

1）首先從表象上來(lái)對(duì)比兩者的區(qū)別

布局：A類彈窗，全部隱藏，一般由一個(gè)icon觸發(fā)，不占主要屏幕，內(nèi)容一般為列表；B類彈窗，露出屏幕1/3的長(zhǎng)度，并在主屏之上，內(nèi)容可以為列表，也可承接圖片、文本、聊天框等。

動(dòng)作：A類彈窗的呼出，需要點(diǎn)擊手勢(shì)或者邊緣右滑，左滑或者點(diǎn)擊空白處收回；B類彈窗需要用戶按住彈窗頂部“橫線”，控上滑動(dòng)展開(kāi)或者下滑收起。

反饋：A類彈窗觸發(fā)之后，占據(jù)屏幕4/5，幾乎看不到底層頁(yè)面，底層頁(yè)面關(guān)閉或者暫停；B類彈窗上滑后可以控制最高距離，一般占滿屏幕3/5-4/5，底部頁(yè)面動(dòng)作仍在進(jìn)行。

2）深入本質(zhì)思考這種彈窗的使用場(chǎng)景和作用

所以兩者的區(qū)別在于：（1）觸發(fā)前的占屏比例；（2）可以承載的內(nèi)容；（3）觸發(fā)的手勢(shì)；（4）觸發(fā)后的底層頁(yè)面行為。

A類彈窗將不常用的功能隱藏，盡可能的減少頁(yè)面的占有率，但是很難去發(fā)現(xiàn)，觸發(fā)條件有點(diǎn)困難，可以用在隱藏?zé)o關(guān)緊要的功能點(diǎn)上，同時(shí)，功能有無(wú)對(duì)用戶的使用路徑?jīng)]有太大的影響；而B(niǎo)類彈窗更多的是參與到用戶的使用路徑上，比如查看地圖的時(shí)候可以同時(shí)查找地點(diǎn)，兩者之間有一定的邏輯關(guān)系，可以理解為先做底部頁(yè)面的任務(wù)，然后在做上層B類彈窗的任務(wù)或者上層任務(wù)幫助底層任務(wù)更好的實(shí)現(xiàn)。再加上上下滑手勢(shì)習(xí)慣，也符合用戶沉浸流程的心境，加上底部頁(yè)面的行動(dòng)一直存在，所以，體驗(yàn)上更加輕便，不會(huì)感覺(jué)中斷當(dāng)前任務(wù)；同時(shí)，B類彈窗可以承接更多的內(nèi)容形態(tài)，發(fā)揮點(diǎn)更多。

總結(jié)一下就是，當(dāng)遇到某一使用場(chǎng)景需要頻繁的幫助或者顯示邏輯相關(guān)的信息時(shí)，可以采用B類彈窗。

手勢(shì)類

長(zhǎng)按與左滑，兩者都使用了交互四策略里面的“隱藏”，將二級(jí)功能菜單隱藏，通過(guò)手勢(shì)觸發(fā)。

1）使用體驗(yàn)上來(lái)看，長(zhǎng)按需要一定的緩沖時(shí)間，左滑幾乎沒(méi)有緩沖，用戶使用感知上左滑比長(zhǎng)按更加輕便；長(zhǎng)按彈出的菜單，由于需要切換成點(diǎn)擊手勢(shì)，可能會(huì)導(dǎo)致菜單消失的錯(cuò)誤；相比左滑手勢(shì)加點(diǎn)擊手勢(shì)，用戶的沉浸感更強(qiáng)，不容易出錯(cuò)。

2）功能上看，長(zhǎng)按也有移動(dòng)列表的功能模型，在同一平臺(tái)用同種手勢(shì)，會(huì)影響用戶的學(xué)習(xí)和造成混淆；如果有左滑手勢(shì)，當(dāng)前頁(yè)面的菜單左右切換也會(huì)造成沖突，不可使用。

3）顯示上看，長(zhǎng)按集合更多的功能選項(xiàng)，可以根據(jù)屏幕，決定可以容納幾個(gè)，同時(shí)也可以運(yùn)用至文本、聊天框、icon等小控件上面，長(zhǎng)按的信息可以完全展示；而左滑只能運(yùn)用至列表形態(tài)，可以容納的功能較少，一般2個(gè)主題功能加更多，點(diǎn)擊更多會(huì)出現(xiàn)其他的功能彈窗；其次，左滑列表會(huì)導(dǎo)致列表信息被遮擋，從而影響用戶的判斷。