大象冰箱思維 | 高格局處理設計問題

3 評論 3396 瀏覽 24 收藏 9 分鐘

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

01 始末緣由

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

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

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

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

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

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

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

1. 定義步驟框架

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

2. 搜羅交互模式

接下來都是圍繞以上三步,找到既定范圍內可參考的設計模式,通??梢园凑赵到y中已有組件、歷史方案、競品用例的順序。添加多條數據可以有以下幾種范本:

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

3. 確認最佳方案

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

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

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

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

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

在Web端系統中,若出現支線任務,通??梢越柚?氣泡卡片、對話框、抽屜或打開新頁面,其中彈窗和抽屜又分為模態和非模態的狀態。這些交互模式的大致特點如下:

1. 氣泡卡片

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

2. 對話框

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

3. 抽屜

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

4. 新頁面

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

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

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

04 最后

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

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

 

作者:Zoey,交互設計師。微信公眾號:Zoeyux。

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 無論設計問題還是其他問題,眾所周知都是要有明確計劃的,交互設計中這種思維更加重要。

    回復
  2. 又學到一個大象大象冰箱思維,之前一直以為交互設計其實更多的是看設計師本人的感覺,現在發現并不是這個樣子的。

    來自河南 回復
  3. 產品設計流程看似簡單,但是拆分后每一步都需要仔細規劃,找出盲點。

    來自江蘇 回復