B 端交互中，有很多需求和應用場景是獨有的，特殊的，沒辦法找到一模一樣的參考照抄。作為設計師，我們只能自己構思方案并輸出。

而做交互最大的難點，就是找出真正合理的方案而不是只遵照團隊/領導的建議，換句話說就是你設計出有效的結果并說服團隊通過。

更多評審方法：

一、原交互方案說明

下面是我們某個學員的項目案例：

這個頁面的篩選模塊和常規篩選不同，常規篩選是預設好篩選的屬性，等用戶填入數值后提交再生成篩選結果。

但該案例中的篩選，是由用戶完全自定義實現的，需要用戶先添加篩選條目，并設置每個篩選條目內的規則。

篩選條目內的規則如下：

屬性類型 —— 條件 —— 屬性參數

屬性類型即當前頁面內表格數據項包含的屬性，比如在一個用戶表格中，用戶包含姓名、身高、年齡、性別等屬性，那么就可以選擇其中一個。但不能選擇和創建不存在的屬性，所以屬性類型的設置是一個單選操作。

條件即對后續篩選參數的運算方式，包含等于、不等于、包含、等于空四個類型。其中等于空是比較特殊的運算符，直接指定了篩選參數為“空”。

屬性參數則是用于運算的參數，比如具體年齡、日期、時間、地址參數等等。

在這個篩選規則內，多個篩選條目是 “并且” 關系而不是“或”關系，篩選出來的結果，要滿足所有這些條件，而不是只有其中之一。且在篩選條目中，一個屬性只能出現一次制定一個篩選條件，不能使用類似 “年齡 >18” 加 “年齡 < 18” 的組合。

了解完產品邏輯，再回到原設計中?？梢灾苯咏o結論，篩選的多列排版是非常不利于查看的，且每條篩選的設置并不合理，包括屬性要在這個階段選擇，以及后續包含增減項的按鈕。

所以下面，我們就要基于它來完成調整，并闡述如何解釋交互方案的思路。

二、交互的設計和說明

這次先直接看我優化完的第一個版本：

在這個改動中，首先修改添加篩選項的步驟，在添加過程中可以直接選擇要篩選的屬性類型，一方面可以一次性完成要篩選的條目創建，另一方面在下方的設置中，可以減少選擇項，讓每個條目的信息更清晰。

第二個改動，則是將篩選項切換成每行一條，提高篩選信息的可讀性和交互性。且因為在不同的頁面中，屬性篩選可能會有很長的名字，所以增加左側標題的空間。

第三個調整，則是將條件和參數做成一個輸入框。這么做最重要的理由，就是有很多屬性篩選是沒有選擇運算符的必要的。比如省份需要篩選，那篩選只需要考慮選出的省，而沒有 “不包含某省” 的使用需求。或是選擇性別的時候，也只有選擇男或女，而不應該出現“不包含男”、“不包含女”這種情況。

總結起來屬性中填入篩選項的情況包含：

1. 數值類可以使用運算符
2. 只能在既定選項中選擇
3. 直接填入自定義信息

后面兩種情況一個是下拉菜單一個是輸入框，只有第一種情況需要額外的操作步驟，即下拉菜單先選擇條件類型，然后再輸入相關的數值。

在這套方案中，最大的問題就是一行只有一條篩選，是不是太浪費空間了？

這是篩選和表單中最老生常談的問題，而我們要解決這類問題，不是光靠嘴說，而是要去模擬實際的場景做不同方案的對比，講解其中的優劣，比如添加 6 個篩選選項。

原案例的做法中，除了讓篩選區域短一點，還解決了什么問題？它只創造了更多的問題：

1. Z 字型瀏覽的順序缺乏檢索的效率
2. 格子太多很難識別每個篩選的條件，且操作起來困難
3. 不容易處理屬性標題過長的問題
4. 要過多考慮響應式的兼容規則和列數
5. 開發難度比較高，落地效果會更差

而唯一一個優勢 —— 省空間，包含了“萬一添加了十幾個選項，那表格不得頂得看不見”的場景。

“萬一”就是整個交互設計過程中最大的敵人和謊言，因為我們經常會在設計思考和評審中討論萬一，并想去兼容這種情況，但成熟的產品和設計師，一定會去考慮這個萬一的權重。

因為很多萬一的場景出現的概率非常非常低，兼容這些情況是有必要的，但重點是 —— 要不要為了兼容萬一犧牲絕大多數場景的體驗。

在并列篩選條件中，添加的條件越多，篩選的結果越少。而添加一大堆篩選項的概率實際上非常低。這就需要在整個項目所有同類頁面中做排查，哪個頁面有添加一大堆篩選的場景。

如果這種場景都很極端、或者干脆沒有，那就不要提這種沒有意義的萬一來干擾交互的設計。如果出現的場景非常普遍，那才會考慮多列縮短高度的做法。

交互的決策就是做取舍的過程，而取舍以真實場景為依據。要優先考慮的是高權重、高頻次操作的需求和場景，而不是為了低權重的需求而犧牲前者。

而要在評審中出現反對，就需要把不同的方案都做出來進行優劣的直接對比，簡單的話可以直接做成設計稿對比，復雜的話可以用 Axure 等軟件實現比較擬真的交互進行對比。

最后，放一個我沒放出來的版本，將篩選操作做在表頭上的版本，你們可以自己考慮有哪些優劣，適用在什么樣的場景：

結尾

時間不怎么多，沒有按預期做完更豐富的交互細節和操作方式，但意思已經表達清楚了，你們看著理解。

歡迎關注作者的微信公眾號：「超人的電話亭」