交互設計``篩選功能

最近在做一個供內(nèi)部使用的語料分析工具，主要針對電商交易流程中的客服聊天記錄和交易評價。 踩了不少坑贡避，記錄一些心得痛黎。

ToB電商客服聊天產(chǎn)品

開啟一個新產(chǎn)品，首先當然是定位你的產(chǎn)品刮吧，形成產(chǎn)品的感性認知湖饱。講解ToC與ToB產(chǎn)品差別、不同行業(yè)ToB產(chǎn)品差別的文章汗牛充棟杀捻。這里只再強調一遍：務必深刻理解你的產(chǎn)品服務的業(yè)務的整個邏輯井厌，不僅熟記軀干，還要親身體驗到每一個枝節(jié)致讥。（有無數(shù)人強調仅仆，也有無數(shù)人犯錯，這里面的教訓可以再寫一篇文章了垢袱。）

對于電商產(chǎn)品的篩選功能來說墓拜，ToC，是決定用戶體驗的核心功能之一,篩選漏斗做的越好惶桐，用戶觸達目標商品的可能性就越大撮弧；ToB，則是最不能犯錯的模塊姚糊，數(shù)據(jù)的精準篩選是一切分析的前提贿衍。篩選功能看似簡單，卻也有好些坑要填救恨。

篩選的需求

要做好篩選贸辈，第一部當然是確定好篩選的需求。

篩選需求一定要詳細了解到枝節(jié)

篩選需求的搜集肠槽，不是了解清楚有哪些篩選項就完了擎淤，結合數(shù)據(jù)庫數(shù)據(jù)，對每一個篩選項預期數(shù)量級秸仙、單項字節(jié)長度范圍嘴拢、是否可以標簽化、是否需要多選寂纪，都應當清楚席吴。這里前期的業(yè)務邏輯調研就發(fā)揮了巨大的作用。最后綜合全部需求特征捞蛋，構筑你的目標場景孝冒。

篩選模塊的功能設計

有了篩選需求，就開始為篩選模塊設計功能拟杉。

常見的篩選功能：篩選-復選與全選庄涡、全局搜索與欄目搜索、篩選記錄與快捷清除

• 復選與全選功能取決于業(yè)務使用需求搬设。
• 全局搜索一般用于單條搜索穴店，在業(yè)務路徑清晰的ToB產(chǎn)品中不多見撕捍，欄目搜索的需要取決于當前篩選欄內(nèi)的條目數(shù)量，一般來說條目數(shù)量>20當前篩選欄就得有搜索了迹鹅。
• 篩選記錄與快捷清除功能主要看篩選行為的頻次卦洽，如果在一次完整的分析流程中需要多次篩選，那么篩選記錄與快捷清除是一個收益很大的功能斜棚，否則這個功能就沒有什么必要阀蒂。

由于我的產(chǎn)品的篩選功能是一個低頻功能，故沒有為產(chǎn)品規(guī)劃篩選記錄與快捷清除模塊弟蚀；而對于聊天記錄的集合分析也用不上全局搜索蚤霞，所以我重點規(guī)劃了復選與欄目搜索功能。

根據(jù)需求建立場景設計功能

篩選模塊的交互樣式設計

整體展現(xiàn)：平鋪還是彈出

要對篩選模塊進行交互樣式設計义钉，除了掌握條數(shù)字段等基本信息昧绣，我們還需要掌握用戶對篩選功能的使用頻次，C端產(chǎn)品需要大量的用戶調研確定用戶層次捶闸，而B端還是對業(yè)務現(xiàn)狀的理解夜畴。

淘寶網(wǎng)篩選

平鋪是指將篩選項完全羅列在當前頁面內(nèi)，我們熟知的淘寶網(wǎng)就是采用這種模式删壮，對于淘寶網(wǎng)來說贪绘，篩選是個常用功能。

這樣展現(xiàn)的好處是篩選更為直觀央碟，操作便捷税灌，篩選效率更高∫谒洌可以看到這種展現(xiàn)樣式有一定的限制菱涤，那就是展現(xiàn)條目本身是標簽或者可以標簽化，要么條目的最大字節(jié)長度在較低的水平洛勉，總體數(shù)量可要控制在一個合理的區(qū)間粘秆，如果篩選條目數(shù)量多到一屏放不下，則需要考慮彈出式篩選收毫，甚至是將將篩選獨立成頁翻擒。

百度高級篩選

彈出式的代表是下拉列表，百度的高級篩選正是這種樣式牛哺，對于百度搜索，搜索條件篩選依附于全局搜索劳吠，是專家用戶才會使用的功能引润，并且一次搜索一般只需一次篩選，所以設計采用下拉列表痒玩，并隱藏在高級篩選中淳附。

當篩選條目數(shù)量較多時议慰，一個額外的空間更為友好。而如果篩選功能的使用頻次較低奴曙，將它隱藏在下一個層級别凹，為關鍵信息預留更多位置也是很合理的。

欄目搜索的樣式

由于篩選條目數(shù)>20洽糟，故我們?yōu)楫a(chǎn)品篩選添加搜索炉菲。

欄目搜索既可以放置在下拉列表頂端，也可以與篩選框整合坤溃。

搜索位于下拉列表頂端

搜索位于篩選框內(nèi)

下拉列表頂端使搜索功能更加明顯拍霜，但是要多占一行位置；與篩選框整合的話薪介，在篩選框內(nèi)閃動光標也可以提示搜索功能的存在（以目前的用戶教育水平祠饺，光標閃動交互提示完全足夠）。我個人傾向于使用第二種汁政，無論哪種道偷，注意保持整體交互風格的一致性便好。

如此長的商品名——古老的復選框

在實際設計商品篩選時记劈，超長的商品名配上復選需求讓商品篩選十分麻煩勺鸦。淘寶寶貝名長達40~50字，而且由于重要信息一般在整個名字的中部抠蚣，所以簡單省略是不可取祝旷。可如果檢點做成下拉篩選框嘶窄，這里就有一個交互體驗問題怀跛，單條名稱如此之長，商品篩選又通常是個集合柄冲，以至于用戶選到后面完全忘記自己選擇了什么吻谋。

一番思考后，我搬出了常用于上個時代的雙篩選欄现横，配合搜索使用漓拾。

雙篩選欄

這個雙篩選欄常見于一些大型分析軟件（SPSS、ArcGIS等）中戒祠，它很好地解決了忘記自己選擇了什么骇两、是否選擇完全的尷尬。

商品篩選——隱藏的商品編號

需求中提到姜盈，需要用商品編號（ID）定位商品低千，但是放置一串串相似的數(shù)字在篩選框中，這個用戶體驗可太差了（長數(shù)字的可讀性太低）馏颂。

你猜用戶會不會瘋掉示血？

為了解決這個問題棋傍，我與前端小伙伴商量了一下。最后的解決方案是商品ID在篩選框中不顯示难审，但可以通過搜索匹配出來瘫拣。

數(shù)字匹配名稱

總結

ToB產(chǎn)品的篩選相對于ToC來說通用性要弱很多，比起用戶體驗從有到優(yōu)的優(yōu)化告喊，很多時候是在解決從無到有的過程麸拄。情況越是復雜多面，九月要注重前期的調研和信息搜集葱绒，盡可能考慮好每一個問題感帅。