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

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

一、原交互方案說明

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

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

但該案例中的篩選，是由用戶完全自定義實現(xiàn)的，需要用戶先添加篩選條目，并設(shè)置每個篩選條目內(nèi)的規(guī)則。

篩選條目內(nèi)的規(guī)則如下：

屬性類型 —— 條件 —— 屬性參數(shù)

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

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

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

在這個篩選規(guī)則內(nèi)，多個篩選條目是 "并且" 關(guān)系而不是"或"關(guān)系，篩選出來的結(jié)果，要滿足所有這些條件，而不是只有其中之一。且在篩選條目中，一個屬性只能出現(xiàn)一次制定一個篩選條件，不能使用類似 "年齡 >18" 加 "年齡 < 18" 的組合。

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

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

二、交互的設(shè)計和說明

這次先直接看我優(yōu)化完的第一個版本：

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

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

第三個調(diào)整，則是將條件和參數(shù)做成一個輸入框。這么做最重要的理由，就是有很多屬性篩選是沒有選擇運算符的必要的。比如省份需要篩選，那篩選只需要考慮選出的省，而沒有 "不包含某省" 的使用需求?；蚴沁x擇性別的時候，也只有選擇男或女，而不應(yīng)該出現(xiàn)"不包含男"、"不包含女"這種情況。

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

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

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

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

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

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

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

而唯一一個優(yōu)勢 —— 省空間，包含了"萬一添加了十幾個選項，那表格不得頂?shù)每床灰?quot;的場景。

"萬一"就是整個交互設(shè)計過程中最大的敵人和謊言，因為我們經(jīng)常會在設(shè)計思考和評審中討論萬一，并想去兼容這種情況，但成熟的產(chǎn)品和設(shè)計師，一定會去考慮這個萬一的權(quán)重。

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

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

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

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

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

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

結(jié)尾

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

作者：超人的電話亭