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

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

一、原交互方案說明

下面是我們某個(gè)學(xué)員的項(xiàng)目案例：

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

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

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

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

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

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

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

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

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

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

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

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

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

第二個(gè)改動(dòng)，則是將篩選項(xiàng)切換成每行一條，提高篩選信息的可讀性和交互性。且因?yàn)樵诓煌捻撁嬷校瑢傩院Y選可能會(huì)有很長的名字，所以增加左側(cè)標(biāo)題的空間。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)尾

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

作者：超人的電話亭