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

01 始末緣由

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

先确認細節再開始實施，我暗自竊喜于這種處事方式可以減少設計返工、倒逼業務方思考、審核真僞需求，殊不知在此過程中也會錯失更多：

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

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

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

02 案例一：在表單中“添加多條數據”

配置頁面是B端産品中十分常見的，若在同一系統多個信息配置表單中，都需要添加數據的功能，字段數量、錄入規則、用戶偏好都不夠明晰，如何設計呢？

1. 定義步驟框架

添加數據也可以分為三步：選擇添加功能、錄入數據、确認添加。針對這三步，又拆分出是否需手動觸發添加功能，數據錄入方式是輸入、選擇還是查詢，逐條确認還是統一确認添加，是否支持删除修改、如何操作。

2. 搜羅交互模式

接下來都是圍繞以上三步，找到既定範圍内可參考的設計模式，通常可以按照原系統中已有組件、曆史方案、競品用例的順序。添加多條數據可以有以下幾種範本：

1. 直接錄入，逐條确認添加：錄入和添加時操作便捷；但修改時需先删除或增加表格編輯狀态，無形中提高了操作成本或開發成本；
2. 複文本框，多條數據同時添加：适合高級使用者高效批量錄入數據；但提示信息多，學習成本略高；
3. 先觸發添加操作，後錄入數據，統一确認：增改一體，添加和編輯都很快捷，适用于較多數據錄入操作；但統一提交數據時易造成數據查詢和保存的壓力；
4. 觸發添加操作後逐條添加：通用型最強，便于功能拓展；但觸發Dialog或Popover産生支線任務，增加步驟；

3. 确認最佳方案

組件本身确實各有優劣，隻是在特定階段的不同使用場景中選出最佳。

結合産品的生命周期階段、性質和團隊現狀，分析出該組件目前最關鍵的三個維度：用戶操作效率、前端開發成本、組件功能拓展。因此最适宜的方案是上述第四類，需要添加數據時觸發操作，逐條添加，展示錄入項，支持删改。

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

• “彈窗套彈窗合适嗎？”
• “浮層操作區那麼小，容易誤操作吧？”
• “提交成功總要有提示，跳個新頁面吧。”
• “彈窗打破了業務流程，用戶最好在一個頁面裡完成所有任務。”
• “……”

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

在Web端系統中，若出現支線任務，通常可以借助浮層/氣泡卡片、對話框、抽屜或打開新頁面，其中彈窗和抽屜又分為模态和非模态的狀态。這些交互模式的大緻特點如下：

1. 氣泡卡片

一般可容納較少的信息量，但輕量的樣式和交互方式對主任務幹擾性弱，适用于信息提示、簡單的确認和操作的擴展内容。

2. 對話框

對話框一般為加遮罩的模态彈窗，需聚焦完成子任務，如填寫表單、撰寫郵件，彈窗内容的多少相對自由，可根據信息量的多少調整彈窗尺寸。

3. 抽屜

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

4. 新頁面

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

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

• 當支線任務權重較大時，可以考慮新頁面處理。
• 一般情況可以根據支線任務内容的多少來選擇使用氣泡、對話框還是抽屜。
• 抽屜可包含較多信息量，需對照上級頁面填寫時，非模态展示。
• 需聚焦支線任務本身時，對話框和模态抽屜都可，需考慮産品設計的一緻性，建議首選抽屜，因為抽屜可拓展性更強，支持多層抽屜，解決彈窗套彈窗的問題。

04 最後

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

細節不容小觑，打開格局，看清本質也尤為重要。有句話叫“用産業的眼光看行業，用行業的眼光看企業”，也正是這個意思。

作者：Zoey，交互設計師。Zoeyux。

本文由 @Zoey 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash ，基于 CC0 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部