編輯導(dǎo)語：表單設(shè)計(jì)模式有許多種，其中，抽屜表單便是其中之一。那么，B端產(chǎn)品中的抽屜表單該如何設(shè)計(jì)？本篇文章里，作者總結(jié)了抽屜表單的常見設(shè)計(jì)場(chǎng)景，并就其對(duì)應(yīng)的設(shè)計(jì)策略做了總結(jié)和梳理，一起來看一下吧。

關(guān)鍵詞：表單、抽屜、抽屜表單。

抽屜表單也就是將表單置于抽屜載體下的一種表單設(shè)計(jì)模式，抽屜會(huì)從屏幕的上下左右任意一側(cè)滑出。

由于抽屜的交互形式認(rèn)知在相關(guān)專業(yè)人士心中不像彈窗這么固定，因此當(dāng)表單置于抽屜時(shí)，常常引發(fā)產(chǎn)品團(tuán)隊(duì)內(nèi)部的討論。

但并不是說抽屜表單是無規(guī)律可循的，因此知果根據(jù)經(jīng)驗(yàn)，為大家整理了目前知果遇到的抽屜表單場(chǎng)景，希望能給大家?guī)ヒ恍﹩l(fā)。

文章將從以下5部分展開：

抽屜內(nèi)容構(gòu)成；無蒙版抽屜；有蒙版抽屜；雙層抽屜；表單抽屜方向。

一、抽屜內(nèi)容構(gòu)成

抽屜和彈窗的內(nèi)容構(gòu)成基本一致，包括了header區(qū)、body區(qū)、footer區(qū)。

header區(qū)：主要由標(biāo)題、描述和關(guān)閉按鈕組成。標(biāo)題可以讓用戶知曉該表單的意圖，描述是對(duì)標(biāo)題信息的進(jìn)一步解釋，關(guān)閉按鈕可以讓用戶退出操作。body區(qū)：主要由描述組件、提示信息、表單組件組成，包括輸入框、選擇器、時(shí)間控件、單選控件等。具體可以看知果的這篇文章了解：表單第一趴 | B端表單設(shè)計(jì)5部分footer區(qū)：主要由行動(dòng)按鈕構(gòu)成，一般為確定和取消。行動(dòng)按鈕的整體位置和主次按鈕位置，不同的產(chǎn)品團(tuán)隊(duì)采用不同的方式。設(shè)計(jì)的原則優(yōu)先考慮全局統(tǒng)一，再在此基礎(chǔ)上可以根據(jù)不同業(yè)務(wù)場(chǎng)景進(jìn)行特殊化定制。

由于抽屜可承載的內(nèi)容比彈窗多，交互的形式也比彈窗和頁面型表單靈活，因此采用抽屜式表單的設(shè)計(jì)模式，越來越受到設(shè)計(jì)師與產(chǎn)品團(tuán)隊(duì)的青睞。

二、無蒙版表單抽屜

無蒙版表單抽屜是表單抽屜的一種形式，另一種是有蒙版表單抽屜。我們先來看下無蒙版表單抽屜。從字面意思我們就可以知道無蒙版表單抽屜就是抽屜下面是不存在蒙版的，抽屜與原頁面是上下關(guān)系。

1. 使用場(chǎng)景

產(chǎn)品團(tuán)隊(duì)期望使用無蒙版表單抽屜的場(chǎng)景在于，用戶在操作表單的時(shí)候，需要同時(shí)查看抽屜下面的信息，便于判斷表單中某些信息填寫是否正確。通常沒有蒙版的表單抽屜，用戶點(diǎn)擊抽屜外部是可以關(guān)閉抽屜的，無需非要點(diǎn)擊“關(guān)閉”按鈕（參考釘釘）。但有些產(chǎn)品，也會(huì)做成外部點(diǎn)擊不可關(guān)閉。

2. 優(yōu)勢(shì)無蒙版表單抽屜信息與頁面信息沒有完全隔離，有利于用戶通過頁面信息直接判斷表單信息填寫的對(duì)錯(cuò)，或者錄入的節(jié)奏。假如是編輯數(shù)據(jù)表單，無需通過關(guān)閉抽屜后再點(diǎn)擊數(shù)據(jù)彈出抽屜，而是可以通過隨時(shí)點(diǎn)擊數(shù)據(jù)來切換數(shù)據(jù)對(duì)應(yīng)的編輯表單。在關(guān)閉抽屜時(shí)，非常簡(jiǎn)單和靈活，隨意點(diǎn)擊即可。

3. 劣勢(shì)

無蒙版表單抽屜屬于非模態(tài)彈窗，因此對(duì)于用戶的約束作用比較弱，這樣子就容易讓用戶誤操作產(chǎn)生問題。

例如，編輯表單的過程中，不小心點(diǎn)擊了抽屜外部區(qū)域：一種情況，表單被不小心關(guān)閉了；另一種情況是，當(dāng)前數(shù)據(jù)表單被切換成了其他數(shù)據(jù)表單。而對(duì)于用戶來說，是無法知道自己剛才修改的內(nèi)容有無保存的。

4. 解決劣勢(shì)

那么，假如要防止用戶的誤操作該怎么辦呢？

第一，不論新增類表單還是編輯類表單，當(dāng)用戶沒有對(duì)表單內(nèi)容保存而切換或關(guān)閉時(shí)，彈出二次確認(rèn)彈窗給用戶，告知用戶有數(shù)據(jù)未保存，是否確認(rèn)要關(guān)閉。如果想讓用戶知曉哪些信息是改過的，可以給出一些視覺上的設(shè)計(jì)。

第二，對(duì)于新增內(nèi)容型的表單抽屜，雖然允許用戶隨意關(guān)閉，但當(dāng)用戶再次新增時(shí)，保持原來填寫過的表單信息。對(duì)于編輯類的表單，與（一）的處理方式一致。

三、有蒙版表單抽屜

有蒙版的表單抽屜，顧名思義就是抽屜與頁面信息之間有一層蒙版作為隔離，它們互相之間的層級(jí)關(guān)系是「列表頁面（下）、蒙版（中）、抽屜（上）」。

有蒙版的表單抽屜與彈窗表單的交互模式基本一致，只是抽屜可承載的內(nèi)容比彈窗要多。

1. 使用場(chǎng)景

當(dāng)表單信息過多，但又不合適通過頁面級(jí)表單來錄入的時(shí)候（頁面級(jí)表單會(huì)讓用戶看不到整個(gè)的數(shù)據(jù)列表頁，但數(shù)據(jù)列表頁對(duì)用戶有一定的參考作用），通常產(chǎn)品團(tuán)隊(duì)或設(shè)計(jì)師會(huì)采用有蒙版表單抽屜。

它與無蒙版表單抽屜的很大區(qū)別在于：有蒙版表單抽屜期望約束用戶的行為，不期望用戶的一些隨意操作，而影響表單的錄入狀態(tài)。假設(shè)用戶要關(guān)閉抽屜，需要主動(dòng)的進(jìn)行操作。

2. 優(yōu)勢(shì)與無蒙版表單抽屜相比，通過對(duì)用戶操作行為的約束，有利于用戶完成一個(gè)目標(biāo)后再進(jìn)入到下一個(gè)目標(biāo)。與頁面級(jí)表單相比，在同樣可承載較大信息的情況下，還能看到整個(gè)列表頁面的概況。與彈窗類表單相比，可以承載的內(nèi)容比彈窗多，且還能看到整個(gè)列表頁面的概況（彈窗蒙版下的可見信息是截?cái)嗟?，而抽屜相?duì)整體一些）。

3. 劣勢(shì)

由于蒙版的存在，用戶操作上沒那么靈活，用戶需要完成一個(gè)抽屜交互閉環(huán)才可進(jìn)入下一個(gè)環(huán)節(jié)。如：「編輯——修改數(shù)據(jù)——保存（抽屜關(guān)閉）——再次編輯——修改數(shù)據(jù)——保存（抽屜關(guān)閉）——…」往復(fù)循環(huán)。

而對(duì)于無蒙版表單抽屜來說，假如交互行為設(shè)計(jì)的輕量，可以通過點(diǎn)擊列表頁的數(shù)據(jù)來隨意切換對(duì)應(yīng)的表單抽屜（默認(rèn)用戶修改過的數(shù)據(jù)，但用戶未主動(dòng)保存的，系統(tǒng)也默認(rèn)不保存），但這種方式并不優(yōu)。

4. 解決劣勢(shì)

對(duì)于必須完成一條數(shù)據(jù)的交互閉環(huán)才能開啟下一條數(shù)據(jù)交互行為的有蒙版表單抽屜來說，我們可以通過添加一些功能來讓這個(gè)交互更友好一些。

例如，在編輯表單中，增加一個(gè)選項(xiàng)“保存并編輯下一條”或“保存并新建下一條”來讓當(dāng)前抽屜無需關(guān)閉，便可進(jìn)入下一交互流程。

四、雙層表單抽屜

雙層表單抽屜，甚至多層表單抽屜，在目前的B端交互界面上已經(jīng)越來越常見了。雙層表單抽屜指的就是第一層 表單中的某個(gè)表單項(xiàng)的操作需要第二個(gè)頁面來承載時(shí)，就出現(xiàn)了雙層表單抽屜的概念。小伙伴們可以試一下釘釘群中的功能「群設(shè)置-群管理」，就會(huì)出現(xiàn)雙層抽屜的設(shè)計(jì)模式。

1. 使用場(chǎng)景

當(dāng)?shù)谝粚映閷现械谋韱雾?xiàng)背后還帶著一連串需要填寫或者配置的信息時(shí)，通常會(huì)使用雙層或者多層抽屜。

2. 優(yōu)勢(shì)

讓用戶在不離開當(dāng)前環(huán)境的情況下，依然可以不斷操作相關(guān)內(nèi)容，有一種逐層下探，解鎖奧秘的感覺。

3. 劣勢(shì)

假設(shè)抽屜的層級(jí)過深，用戶會(huì)容易迷失在抽屜中，而找不到回去的路。

4. 解決劣勢(shì)當(dāng)層級(jí)不深（2層內(nèi)）：采用返回按鈕即可，或采用彈窗承載。當(dāng)層級(jí)過深（大于2層）：采用面包屑的方式。

五、表單抽屜方向

在很多組件庫中，我們可以發(fā)現(xiàn)，抽屜的滑出方向分為上、下、左、右四種。

而實(shí)際業(yè)務(wù)場(chǎng)景中，只有右側(cè)和下側(cè)是比較常用的。右側(cè)通常承載表單，而下側(cè)通常會(huì)放一些日志、詳情、聯(lián)系人信息等查閱類信息為主。

由于PC屏幕是矩形的，因此，下側(cè)的抽屜與右側(cè)的抽屜在頁面占位上，是不同的。右側(cè)抽屜可以寬度達(dá)到屏幕的2/3區(qū)域；但下側(cè)抽屜的高度最好不要大于屏幕高度的1/2，太高會(huì)遮住頁面大部分的信息，只露出一個(gè)導(dǎo)航條，給用戶有一種迷失在頁面上的感受。解決高度不夠的下側(cè)抽屜，我們還可以給予「拖拽」功能來讓用戶自定義高度。

六、寫在最后

在分享了以上類型的表單抽屜后，總結(jié)起來有這么幾種。

1. 數(shù)據(jù)詳情

特點(diǎn)：用戶需要經(jīng)常來回切換?？床煌瑪?shù)據(jù)的詳情。

載體：無蒙版表單抽屜（隨意切花、關(guān)閉，無需提示）。

2. 數(shù)據(jù)表單「新增型」

特點(diǎn)：用戶一次新增一條數(shù)據(jù)，或一次連續(xù)新增幾條數(shù)據(jù)。

載體：彈窗或有蒙版表單抽屜（用戶編輯過當(dāng)前表單數(shù)據(jù)，但未保存關(guān)閉時(shí)，給出二次確認(rèn)提示；需要連續(xù)新增時(shí)，給出「保存并新增下一條」選項(xiàng)）。

3. 數(shù)據(jù)表單「編輯型」

特點(diǎn)：用戶一次編輯一條數(shù)據(jù)，或一次連續(xù)編輯幾條數(shù)據(jù)。

載體：彈窗或有蒙版表單抽屜（用戶編輯過當(dāng)前表單數(shù)據(jù)，但未保存關(guān)閉時(shí)，給出二次確認(rèn)提示；需要連續(xù)編輯時(shí)，給出「保存并編輯下一條」選項(xiàng)）。當(dāng)然，還有一種情況，需要編輯的數(shù)據(jù)字段是一樣時(shí)，設(shè)計(jì)「批量編輯」功能就可以。

因此，在查看「數(shù)據(jù)詳情類數(shù)據(jù)」的情況下，如果想用抽屜作為載體，我們可以直接使用“無蒙版表單抽屜”。

如果是表單類的，不論新增還是編輯，最好都采用有蒙版形式，一來交互模式簡(jiǎn)單，無需研發(fā)側(cè)做復(fù)雜的各種條件判斷，二來約束用戶行為；假如用戶期望連續(xù)性操作，給一個(gè)「保存并編輯下一條」選項(xiàng)即可。

事實(shí)上，我們?cè)谠O(shè)計(jì)側(cè)進(jìn)行判斷到底要采取哪種設(shè)計(jì)方式時(shí)，最直接的就是了解用戶實(shí)際場(chǎng)景，通過實(shí)際場(chǎng)景來決定我們的設(shè)計(jì)策略。

這讓知果想起一件事情：

有個(gè)產(chǎn)品經(jīng)理想在工作臺(tái)上做一個(gè)板塊，它將用戶每天要待辦的各種類別的事情全呈現(xiàn)在這個(gè)模塊中，他期望用戶每天打開系統(tǒng)第一件事就是來這個(gè)版塊。可由于空間有限，用戶可判斷關(guān)鍵要素的信息不完整。該模塊上線后，知果去回訪用戶，用戶壓根都不用，他們是直接進(jìn)入詳細(xì)列表頁去看的，并沒有將工作臺(tái)上的該模塊作為快捷導(dǎo)航入口。

這就說明一個(gè)問題，任何的功能不要輕易拿經(jīng)驗(yàn)和理論猜測(cè)，一定要深入用戶實(shí)際場(chǎng)景。

今天說的表單抽屜設(shè)計(jì)到底使用哪種也如此，它們各有優(yōu)劣，可以解決問題，也可以引發(fā)一些問題。沒有完美的設(shè)計(jì)策略，還是要看用戶場(chǎng)景是什么。

好了，今天知果的分享就到這里，期望能給大家?guī)ヒ恍﹩l(fā)。

#專欄作家#

知果，公眾號(hào)：知果日記，人人都是產(chǎn)品經(jīng)理專欄作家。浙江工商大學(xué)品牌設(shè)計(jì)專業(yè)碩士，《B端思維-產(chǎn)品經(jīng)理的自我修煉》作者。在產(chǎn)品設(shè)計(jì)流程、產(chǎn)品設(shè)計(jì)原則、產(chǎn)品設(shè)計(jì)方法、產(chǎn)品設(shè)計(jì)規(guī)范方面均有豐富經(jīng)驗(yàn)

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

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