用好的交互設(shè)計(jì)來管理復(fù)雜-“篩選器”

7 評論 33488 瀏覽 156 收藏 8 分鐘

我們必須按照人們的行為方式來設(shè)計(jì),而不是按照我們希望他們應(yīng)有的行為來設(shè)計(jì)。

好的設(shè)計(jì)不是讓事情變得簡單(如果復(fù)雜是符合需求的),而是去管理復(fù)雜。在《在做交互設(shè)計(jì)時,你需要知道這幾大定律》中我們總結(jié)了Tesler’s >Law/泰思勒定律(復(fù)雜性守恒定律),這個定律告訴我們:每個應(yīng)用程序都有固有的不可簡化的復(fù)雜性,問題需要是由用戶還是設(shè)計(jì)者去處理需要產(chǎn)品經(jīng)理用心思考。有時復(fù)雜僅僅來源于那些應(yīng)該經(jīng)過過濾的大量信息。我們必須按照人們的行為方式來設(shè)計(jì),而不是按照我們希望他們應(yīng)有的行為來設(shè)計(jì)。

正如諾曼所說 “復(fù)雜是世界的一部分,但它不應(yīng)該令人困惑 ” 好的設(shè)計(jì)能夠幫助我們馴服復(fù)雜,不是讓事物變得簡單,而是去管理復(fù)雜。產(chǎn)品經(jīng)理需要保持“設(shè)計(jì)者—產(chǎn)品—用戶”的合作關(guān)系,讓設(shè)計(jì)與復(fù)雜共生,使得復(fù)雜的內(nèi)容變得簡單易用且交互清晰。在諸多展示大量信息的功能中,“分類篩選”就是一個典型的Feature。?今天我們就來分析幾類“篩選器”的交互設(shè)計(jì),并剖析下他們的優(yōu)劣。

第一類:分層級篩選

下拉菜單,浮層模式 (目前較為常見的模式)

這類展示模式更適合篩選內(nèi)容分類較少,且分類層級不超過兩層,通常情況下標(biāo)簽篩選內(nèi)容不多于10個,同時能在2-3排展示完全。

常見App類型:云盤類、購物類、健身類、打車類等,如圖所示:

下拉浮層,展示一級分類

當(dāng)篩選內(nèi)容足夠具體化,能高度的概括為耦合度較低的信息分類的情況下,建議使用本類篩選交互模式。因?yàn)檫@類模式的信息展示足夠直接明顯,用戶操作步驟較少而且清晰。

全新浮層,全屏展示:

這類篩選器,一般來講會囊括關(guān)鍵詞篩選,同類信息排序兩種內(nèi)容。與其分散展現(xiàn),不如聚合在一個整頁做選擇。這類交互模式更偏向篩選的關(guān)鍵詞足夠簡潔易懂,同時有一定的定制思維在里面。通常情況下,關(guān)鍵詞的覆蓋內(nèi)容更加貼合產(chǎn)品的核心表現(xiàn),或者產(chǎn)品經(jīng)理需要突出展示某類信息。

另外篩選的類型僅為一種,或者需要定制化。譬如地理位置、定位城市、O2O的不同模式及優(yōu)勢,與此同時,展示的信息需要不斷擴(kuò)充,或者有計(jì)劃增加、修改的情況。如上的情況下選用新增一頁的模式,擴(kuò)展性更強(qiáng),同時對版本交互穩(wěn)定性會更高。

常見App類型:游記類、垂直電商類,如圖所示:

全屏覆蓋,新頁面模式

第二類:綜合性篩選

底部Bar,抽屜模式:

用戶習(xí)慣性的瀏覽方式,一般來講是 “F” 的形狀,即自左向右,自上而下。當(dāng)這些關(guān)鍵區(qū)域被頭條,副題,熱點(diǎn)以及重要文章之類的核心入口占據(jù)時,

“篩選”這類重置頁面內(nèi)容的功能放置底部位置,就顯得更加干凈,且不喧兵奪主。同時基于用戶操作習(xí)慣的考慮,抽屜式的頁面彈出,擴(kuò)展性會更強(qiáng),內(nèi)容聚合度會更高。

常見App類型:旅行類

抽屜式

由于對內(nèi)容篩選的要求較多,因此需要高度整合的篩選器,同時展示的區(qū)域普遍要求較大,信息承載較多,在選擇篩選器設(shè)計(jì)交互形式的時候,通常會使用底部Bar,抽屜式的展示方式。

當(dāng)需要篩選的內(nèi)容為多種類型,且多層級,譬如:“國家-省份-城市”這類層層嵌套的模式,就建議使用底部Bar的展示方式。相對于“大眾點(diǎn)評”及其他O2O的應(yīng)用,選擇自上而下的抽屜模式篩選器來說,更建議使用底部Bar的模式,因?yàn)榈撞緽ar的篩選,當(dāng)刷新數(shù)據(jù)時會更直接的看到內(nèi)容的展示,而自上而下的抽屜模式會遮蓋底部的內(nèi)容展示,相對而言,信息篩選的及時性就降低了。

新開界面,復(fù)合嵌套:

當(dāng)品類多,且分類細(xì)的時候,通常需要把類別做第一層框架的分類,然后在第一層框架中再進(jìn)行一次分類,表現(xiàn)形式可以是Tab或者抽屜收起。

《設(shè)計(jì)心理學(xué)2》中提到:“日常的生活通常是復(fù)雜的,但并非由于某個特定活動時復(fù)雜的,而是因?yàn)橛心敲炊啾砻嫔虾唵蔚幕顒?,每一個都有它自己的一套特定的需求,把大量的簡單活動合在一起,結(jié)果就會是復(fù)雜和令人困惑的:整體大于它各部分的總和”。所以對于大量內(nèi)容及品類需要展示給用戶的時候,產(chǎn)品設(shè)計(jì)不能過分簡單,簡單本身不一定是良性的,簡單也不意味著更少的功能。

常見App類型:百貨類

新開頁面,復(fù)合嵌套

對于不同的App應(yīng)用,選擇合適的內(nèi)容篩選模式。對產(chǎn)品經(jīng)理在交互設(shè)計(jì)及產(chǎn)品框架上的理解要求是比較高的,如何把零散且重要的信息聚合整理在一個小小的篩選器中,需要我們從產(chǎn)品功能的具體要求出發(fā),考慮場景化及易用性的前提下,盡量做到合理。

 

作者:權(quán)莉,微信昵稱:Mandy權(quán)。一名快樂的產(chǎn)品經(jīng)理!

本文由 @權(quán)莉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 針對“底部bar篩選器”刷新時不影響用戶查看內(nèi)容我有一些自己的思考:
    個人感知,當(dāng)用戶首次進(jìn)入需要篩選的列表頁時,如果頁面內(nèi)容是用戶想要的,只是需要個性化的篩選(也就是說次重要篩選)時采用底bar形式是可行的。但是如果用戶剛進(jìn)來就需要用到篩選器而且是必然用到時,也就沒有必要考慮采用底部bar了,因?yàn)檫M(jìn)來的此刻瞬間,用戶的訴求不是查看內(nèi)容而是進(jìn)行篩選操作。
    我堅(jiān)信每一種形式的誕生和使用一定是有場景和用戶訴求的,也一定能找到使用根源。

    回復(fù)
  2. 針對“底部bar篩選器”刷新時不影響用戶查看內(nèi)容我有一些自己的思考:
    個人感知,當(dāng)用戶首次進(jìn)入需要篩選的列表頁時,如果頁面內(nèi)容是用戶想要的,只是需要個性化的篩選(也就是說次重要篩選)時采用底bar形式是可行的。但是如果用戶剛進(jìn)來就需要用到篩選器而且是必然用到時,也就沒有必要考慮采用底部bar了,因?yàn)檫M(jìn)來的此刻瞬間,用戶的訴求不是查看內(nèi)容而是進(jìn)行篩選操作。

    回復(fù)
  3. 這還是主流的篩選方式,現(xiàn)在很多都支持漸進(jìn)式引導(dǎo)篩選了,插在列表頁里面。既可以提高篩選器的曝光,又可以慢慢的引導(dǎo)用戶說出自己的需求,進(jìn)而縮小范圍。

    來自上海 回復(fù)
    1. 學(xué)習(xí)了, :mrgreen:

      來自四川 回復(fù)
  4. 分層級篩選的設(shè)計(jì)過程中一定要處理好交集與并集的關(guān)系,否則會出現(xiàn)很奇怪的事情

    來自廣東 回復(fù)
    1. 是的,同意同意。

      來自四川 回復(fù)
  5. 不錯

    來自廣東 回復(fù)