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

關鍵詞：表單、抽屜、抽屜表單。

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

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

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

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

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

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

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

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

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

二、無蒙版表單抽屜

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

1. 使用場景

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

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

3. 劣勢

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

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

4. 解決劣勢

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

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

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

三、有蒙版表單抽屜

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

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

1. 使用場景

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

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

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

3. 劣勢

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

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

4. 解決劣勢

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

例如，在編輯表單中，增加一個選項“保存并編輯下一條”或“保存并新建下一條”來讓當前抽屜無需關閉，便可進入下一交互流程。

四、雙層表單抽屜

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

1. 使用場景

當?shù)谝粚映閷现械谋韱雾棻澈筮€帶著一連串需要填寫或者配置的信息時，通常會使用雙層或者多層抽屜。

2. 優(yōu)勢

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

3. 劣勢

假設抽屜的層級過深，用戶會容易迷失在抽屜中，而找不到回去的路。

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

五、表單抽屜方向

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

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

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

六、寫在最后

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

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

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

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

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

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

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

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

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

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

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

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

事實上，我們在設計側進行判斷到底要采取哪種設計方式時，最直接的就是了解用戶實際場景，通過實際場景來決定我們的設計策略。

這讓知果想起一件事情：

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

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

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

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

#專欄作家#

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

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

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