編輯導讀：把大象塞進冰箱需要幾步？眾所周知，只需要三步。但是這三步細分之下的步驟，才是解決問題的思路。本文作者將用大象冰箱思維，分析如何運用在交互設(shè)計中，與大家分享。

01 始末緣由

工作中難以避免的會處理不夠明確的需求，以前我習慣將待確認的問題清單羅列清楚，統(tǒng)一找上游或更高層確認，便于接下來工作的完成。

先確認細節(jié)再開始實施，我暗自竊喜于這種處事方式可以減少設(shè)計返工、倒逼業(yè)務(wù)方思考、審核真?zhèn)涡枨?，殊不知在此過程中也會錯失更多：

• 依賴他人思考和結(jié)論，難以深入理解主體，不利于系統(tǒng)化思維的形成；
• 基于高精度內(nèi)容創(chuàng)作，失去創(chuàng)新的可能性；
• 等待反饋的過程本身，降低了工作推進的效率。

就像是面對“大象放到冰箱需要幾步完成“這個問題，按照我往常的處理方式，一定會先列出大象要放到冰箱的難點，譬如是否必須保證大象存活？可否借助其他工具？冰箱能否承載高負荷？待解答后再開始設(shè)計規(guī)劃。

跳出局囿，其實將大象放進冰箱，僅需要打開冰箱、放進大象、關(guān)上冰箱這三步。至于細分步驟及后續(xù)困難，皆不跳脫這三大步的框架。這才是解決問題的思路，我姑且稱這種方式為大象冰箱思維。至此，我開始將其運用于交互設(shè)計工作。

02 案例一：在表單中“添加多條數(shù)據(jù)”

配置頁面是B端產(chǎn)品中十分常見的，若在同一系統(tǒng)多個信息配置表單中，都需要添加數(shù)據(jù)的功能，字段數(shù)量、錄入規(guī)則、用戶偏好都不夠明晰，如何設(shè)計呢？

1. 定義步驟框架

添加數(shù)據(jù)也可以分為三步：選擇添加功能、錄入數(shù)據(jù)、確認添加。針對這三步，又拆分出是否需手動觸發(fā)添加功能，數(shù)據(jù)錄入方式是輸入、選擇還是查詢，逐條確認還是統(tǒng)一確認添加，是否支持刪除修改、如何操作。

2. 搜羅交互模式

接下來都是圍繞以上三步，找到既定范圍內(nèi)可參考的設(shè)計模式，通常可以按照原系統(tǒng)中已有組件、歷史方案、競品用例的順序。添加多條數(shù)據(jù)可以有以下幾種范本：

1. 直接錄入，逐條確認添加：錄入和添加時操作便捷；但修改時需先刪除或增加表格編輯狀態(tài)，無形中提高了操作成本或開發(fā)成本；
2. 復(fù)文本框，多條數(shù)據(jù)同時添加：適合高級使用者高效批量錄入數(shù)據(jù)；但提示信息多，學習成本略高；
3. 先觸發(fā)添加操作，后錄入數(shù)據(jù)，統(tǒng)一確認：增改一體，添加和編輯都很快捷，適用于較多數(shù)據(jù)錄入操作；但統(tǒng)一提交數(shù)據(jù)時易造成數(shù)據(jù)查詢和保存的壓力；
4. 觸發(fā)添加操作后逐條添加：通用型最強，便于功能拓展；但觸發(fā)Dialog或Popover產(chǎn)生支線任務(wù)，增加步驟；

3. 確認最佳方案

組件本身確實各有優(yōu)劣，只是在特定階段的不同使用場景中選出最佳。

結(jié)合產(chǎn)品的生命周期階段、性質(zhì)和團隊現(xiàn)狀，分析出該組件目前最關(guān)鍵的三個維度：用戶操作效率、前端開發(fā)成本、組件功能拓展。因此最適宜的方案是上述第四類，需要添加數(shù)據(jù)時觸發(fā)操作，逐條添加，展示錄入項，支持刪改。

03 案例二：為“支線任務(wù)”選擇交互組件

• “彈窗套彈窗合適嗎？”
• “浮層操作區(qū)那么小，容易誤操作吧？”
• “提交成功總要有提示，跳個新頁面吧?！?/li>
• “彈窗打破了業(yè)務(wù)流程，用戶最好在一個頁面里完成所有任務(wù)。”
• “……”

從業(yè)來最頻繁討論的問題之一便是彈窗系列，其實歸結(jié)就是產(chǎn)生支線任務(wù)時，該如何設(shè)計人機交互界面。當有人咨詢我該如何處理這類問題時，我總要事無巨細的問清楚這個需求的前因后果、使用場景、受眾特點等等。何不試試大象冰箱思維呢？

在Web端系統(tǒng)中，若出現(xiàn)支線任務(wù)，通?？梢越柚?氣泡卡片、對話框、抽屜或打開新頁面，其中彈窗和抽屜又分為模態(tài)和非模態(tài)的狀態(tài)。這些交互模式的大致特點如下：

1. 氣泡卡片

一般可容納較少的信息量，但輕量的樣式和交互方式對主任務(wù)干擾性弱，適用于信息提示、簡單的確認和操作的擴展內(nèi)容。

2. 對話框

對話框一般為加遮罩的模態(tài)彈窗，需聚焦完成子任務(wù)，如填寫表單、撰寫郵件，彈窗內(nèi)容的多少相對自由，可根據(jù)信息量的多少調(diào)整彈窗尺寸。

3. 抽屜

抽屜可以是模態(tài)或非模態(tài)，需要與原頁面對照查看或操作時，可以選擇非模態(tài)；需要沉浸式完成支線任務(wù)操作時，則選用模態(tài)抽屜。抽屜占據(jù)較大的頁面空間，適用于大量信息的填寫與編排。

4. 新頁面

支線任務(wù)權(quán)重已經(jīng)等于甚至大于主任務(wù)，并且支線任務(wù)的操作較多，可考慮新開頁面，并提供面包屑或返回按鈕回到原任務(wù)。如新建營銷活動，包含多個步驟下的長表單填寫。

對幾種常用模式的特點和應(yīng)用場景了然于胸時，便可以整理出一份使用策略單。

• 當支線任務(wù)權(quán)重較大時，可以考慮新頁面處理。
• 一般情況可以根據(jù)支線任務(wù)內(nèi)容的多少來選擇使用氣泡、對話框還是抽屜。
• 抽屜可包含較多信息量，需對照上級頁面填寫時，非模態(tài)展示。
• 需聚焦支線任務(wù)本身時，對話框和模態(tài)抽屜都可，需考慮產(chǎn)品設(shè)計的一致性，建議首選抽屜，因為抽屜可拓展性更強，支持多層抽屜，解決彈窗套彈窗的問題。

04 最后

通過碎片化的信息內(nèi)容，建立全局性的策略模型，不僅可以挖掘更深層的需求本體，也可以制定策略方向、培養(yǎng)體系思維。設(shè)計規(guī)范、交互組件庫便是利用該思維方式，將文字、icon、色彩定義為最小顆粒原子，再到分子、控件和業(yè)務(wù)組件。

細節(jié)不容小覷，打開格局，看清本質(zhì)也尤為重要。有句話叫“用產(chǎn)業(yè)的眼光看行業(yè)，用行業(yè)的眼光看企業(yè)”，也正是這個意思。

作者：Zoey，交互設(shè)計師。微信公眾號：Zoeyux。

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

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