用好的交互設(shè)計來管理復(fù)雜-「篩選器」

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

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

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

第一類:分層級篩選

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

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

常見App類型:云盤類虏冻、購物類肤粱、健身類、打車類等厨相,如圖所示:

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

全新浮層践磅,全屏展示:

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

另外篩選的類型僅為一種,或者需要定制化誓篱。譬如地理位置朋贬、定位城市、O2O的不同模式及優(yōu)勢窜骄,與此同時锦募,展示的信息需要不斷擴充,或者有計劃增加邻遏、修改的情況糠亩。如上的情況下選用新增一頁的模式,擴展性更強准验,同時對版本交互穩(wěn)定性會更高赎线。

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

第二類:綜合性篩選

底部Bar垂寥,抽屜模式:

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

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

常見App類型:旅行類

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

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

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

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

《設(shè)計心理學(xué)2》中提到:“日常的生活通常是復(fù)雜的,但并非由于某個特定活動時復(fù)雜的官硝,而是因為有那么多表面上簡單的活動矗蕊,每一個都有它自己的一套特定的需求短蜕,把大量的簡單活動合在一起,結(jié)果就會是復(fù)雜和令人困惑的:整體大于它各部分的總和”傻咖。所以對于大量內(nèi)容及品類需要展示給用戶的時候朋魔,產(chǎn)品設(shè)計不能過分簡單,簡單本身不一定是良性的卿操,簡單也不意味著更少的功能警检。

常見App類型:百貨類

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末崭放,一起剝皮案震驚了整個濱河市哨苛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌币砂,老刑警劉巖建峭,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異道伟,居然都是意外死亡迹缀,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門蜜徽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祝懂,“玉大人,你說我怎么就攤上這事拘鞋⊙馀睿” “怎么了?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵盆色,是天一觀的道長灰蛙。 經(jīng)常有香客問我,道長隔躲,這世上最難降的妖魔是什么摩梧? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮宣旱,結(jié)果婚禮上仅父,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好笙纤,可當(dāng)我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布耗溜。 她就那樣靜靜地躺著,像睡著了一般省容。 火紅的嫁衣襯著肌膚如雪抖拴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天腥椒,我揣著相機與錄音阿宅,去河邊找鬼。 笑死笼蛛,一個胖子當(dāng)著我的面吹牛家夺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播伐弹,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拉馋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了惨好?” 一聲冷哼從身側(cè)響起煌茴,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎日川,沒想到半個月后蔓腐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡龄句,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年回论,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片分歇。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡傀蓉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出职抡,到底是詐尸還是另有隱情葬燎,我是刑警寧澤,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布缚甩,位于F島的核電站谱净,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏擅威。R本人自食惡果不足惜壕探,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望郊丛。 院中可真熱鬧李请,春花似錦派继、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽庆猫。三九已至认轨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間月培,已是汗流浹背嘁字。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留杉畜,地道東北人纪蜒。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像此叠,于是被迫代替她去往敵國和親纯续。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容