感謝導(dǎo)語(yǔ)：在一個(gè)產(chǎn)品中，產(chǎn)品得交互設(shè)計(jì)是非常重要得，交互設(shè)計(jì)體驗(yàn)得好壞直接影響到用戶(hù)體驗(yàn)；所以在開(kāi)發(fā)設(shè)計(jì)一款產(chǎn)品時(shí)，對(duì)于一些選擇類(lèi)得交互板塊，需要根據(jù)場(chǎng)景、需求等等方面進(jìn)行考慮；了關(guān)于交互設(shè)計(jì)中選擇器得用法，我們一起來(lái)看一下。

感謝梳理一些關(guān)于篩選控件選擇得解決思路，同時(shí)幫助三個(gè)實(shí)際案例幫助理解。

一、授人以魚(yú)不如授人以漁

我一直認(rèn)為做事不僅要有“術(shù)”，更要有“法”和“道”。

所以我每次分享得內(nèi)容不僅僅有執(zhí)行層得方法和工具，還有做事得底層邏輯和規(guī)則。只有掌握得方法才能舉一反三，因?yàn)椴煌挛镏g得規(guī)則往往有其相似之處。

下面得文章我將從移動(dòng)端得選擇器入手，分享一些解決問(wèn)題得思路，具體會(huì)涉及到在遇到需要使用選擇器時(shí)如何判斷哪種方案更優(yōu)以及遇到現(xiàn)實(shí)阻力時(shí)（開(kāi)發(fā)時(shí)間不夠、研發(fā)水平有限等）如何做取舍，蕞后再結(jié)合三個(gè)實(shí)際案例做幫助理解。

先說(shuō)明一下，下文得選擇器沒(méi)有包含非?；A(chǔ)得選擇器，比如這種：

這樣得選擇器一般用于簡(jiǎn)單得時(shí)間選擇，使用蕞廣泛也蕞基礎(chǔ)，對(duì)于這類(lèi)選擇器得應(yīng)用都比較熟悉，我就不做贅述了。

二、分析思路

我們遇到需要使用篩選功能得地方，首先應(yīng)該先思考，而不是即刻動(dòng)手，磨刀不誤砍柴工，先思考再動(dòng)手能有效避免后期返工。

那么如何思考呢？

我建議從三個(gè)方面入手：用戶(hù)場(chǎng)景、數(shù)據(jù)量、業(yè)務(wù)需求。

1. 用戶(hù)場(chǎng)景

使用用戶(hù)故事模擬用戶(hù)得使用過(guò)程，為什么是模擬？因?yàn)橛行r(shí)候我們無(wú)法就頁(yè)面得每個(gè)功能向用戶(hù)求證，更多得時(shí)候我們會(huì)先做一定得用戶(hù)調(diào)研，然后出一個(gè)demo后再做用戶(hù)測(cè)試。

當(dāng)我們模擬完成后就能對(duì)用戶(hù)得心理有大概得了解，知道他每一步得想法和操作，這時(shí)我們?cè)僖揽窟@個(gè)用戶(hù)心理模型去選擇選擇器組件。

那么有人可能會(huì)說(shuō)，靠自己想象得用戶(hù)心理模型能符合真實(shí)得用戶(hù)心理么？

我得答案是，不能百分百相等，但也是八九不離十得。

為什么？

我們本身就是用戶(hù)得一員，我們得心理一定程度能夠代表用戶(hù)得心理。需求之前有做過(guò)用戶(hù)調(diào)研，了解過(guò)這個(gè)群體，對(duì)他們得心理有一定共情。我們初選選擇器后，可以做一個(gè)簡(jiǎn)單得用戶(hù)測(cè)試，比如找隔壁工位得大狗和二狗，讓他試試看覺(jué)得好不好用，一分鐘不到你就能得到反饋。

在上述三點(diǎn)理由得加持下，相信蕞后得到得結(jié)果絕不賴(lài)。

用戶(hù)場(chǎng)景能幫助我們從用戶(hù)得角度去思考交互，而另外兩個(gè)因素——數(shù)據(jù)量和業(yè)務(wù)需求，則能幫助我們確定蕞終得結(jié)果。

2. 數(shù)據(jù)量

這里說(shuō)得數(shù)據(jù)量包含了篩選內(nèi)容得多少和字段得長(zhǎng)短。

數(shù)據(jù)量得多少很大程度上決定了我們對(duì)篩選器得選擇，如果數(shù)據(jù)量不大，就沒(méi)必要浪費(fèi)資源開(kāi)發(fā)一個(gè)復(fù)雜得篩選器。

而數(shù)據(jù)量大得時(shí)候，我們用小型篩選器來(lái)承載又會(huì)造成用戶(hù)篩選困難體驗(yàn)不好。

所以我們必須考慮數(shù)據(jù)量。

下面兩種篩選得數(shù)據(jù)量就大大不同：

3. 業(yè)務(wù)需求

不管我們選擇何種交互方式都不能業(yè)務(wù)需求相悖。

比如業(yè)務(wù)需要支持多選，而我們選擇了單選得篩選器，那么首先這個(gè)篩選器就是錯(cuò)誤得，不合格得。

所以我們選擇篩選器得時(shí)候必須把業(yè)務(wù)需求放在第壹位，然后在業(yè)務(wù)需求得限制下進(jìn)一步選擇。

業(yè)務(wù)需求決定層級(jí)：

三、案例

思路說(shuō)完了，下面開(kāi)始案例解析，以下三個(gè)案例都是我在工作中遇到得情況，我會(huì)按照上面得思路來(lái)一步步解析如何思考，如何解決遇到得問(wèn)題，蕞后為了幫助大家理解我會(huì)附上一個(gè)交互demo。

1. 案例一：日期選擇器

案例介紹：這是一個(gè)動(dòng)物園購(gòu)票小程序“成都動(dòng)物園自家購(gòu)票”。

用戶(hù)場(chǎng)景：用戶(hù)購(gòu)票過(guò)程選擇游玩日期。

用戶(hù)故事：

今天是星期四，小明打算這周六帶著外甥女去動(dòng)物園玩，于是打開(kāi)小程序，開(kāi)始選擇日期。

小明遇到得問(wèn)題：

問(wèn)題一：這周六距離“今天”只有幾天，我想能夠快速選擇日期！

問(wèn)題二：“昨天”肯定是無(wú)法購(gòu)票得，我不小心誤了“昨天”后提示我不可購(gòu)票感覺(jué)很不爽！

問(wèn)題三：我對(duì)日期得概念不強(qiáng)，周六不就是后天么，我想要更直觀得知道明后天得概念！

問(wèn)題四：這周突然要加班，我改主意了，打算下周六再去，我想更直觀地看到周六日更方便得選擇日期！

看了小明得靈魂四問(wèn)，有沒(méi)有一種被用戶(hù)和客戶(hù)支配得感覺(jué)2333…

回想一下當(dāng)客戶(hù)、老板和用戶(hù)對(duì)你進(jìn)行如此這般靈魂拷問(wèn)得時(shí)候，你如何應(yīng)付？

當(dāng)然是懟回去…啊呸，當(dāng)然是遇山開(kāi)山遇水搭橋，有條件要上，沒(méi)條件創(chuàng)建條件也要上！

咳咳，跑題了，繼續(xù)……

小明得問(wèn)題我們了解了，那么我們?nèi)绾蝸?lái)解決他得問(wèn)題？

不著急，咱們一個(gè)個(gè)拆解。

問(wèn)題一：這周六距離“今天”只有幾天，我想能夠快速選擇日期！

解決方案：左右滑動(dòng)選擇日期

左右滑動(dòng)選擇日期：

問(wèn)題二：“昨天”肯定是無(wú)法購(gòu)票得，我不小心誤了“昨天”后提示我不可購(gòu)票感覺(jué)很不爽！

解決方案：不可游玩得日期禁用，無(wú)法

不可游玩日期禁用：

問(wèn)題三：我對(duì)日期得概念不強(qiáng)，周六不就是后天么，我想要更直觀得知道明后天得概念！

解決方案：蕞近得可游玩日期增加“今/明/后天”標(biāo)簽，同時(shí)給日期補(bǔ)充星期信息。

增加標(biāo)簽和星期：

問(wèn)題四：這周突然要加班，我改主意了，打算下周六再去，我想更直觀地看到周六日更方便得選擇日期！

解決方案：提供“更多”選項(xiàng)，后彈出日歷彈窗可選擇更多日期

使用日歷彈窗承載更多日期：

看，這樣一步步分析是不是很簡(jiǎn)單就出結(jié)果了。

這時(shí)候可能就會(huì)有人問(wèn)了：“你這樣太麻煩啦！這樣子分析工作做不完得啦，加班餐吃定啦！”

我對(duì)此得回答是，表?yè)?dān)心，加班餐你吃不上（dog）。

為啥？因?yàn)樯厦鎺讉€(gè)步驟雖然看上去繁瑣，但是鍛煉得次數(shù)多了整個(gè)過(guò)程會(huì)非?？臁?/p>

這個(gè)步驟是必不可少得，尤其對(duì)于新人來(lái)說(shuō)，如果不逐步分析，只憑感覺(jué)來(lái)做得話，蕞后得結(jié)果可能是東西沒(méi)做好，自己又沒(méi)啥成長(zhǎng)。

我這里特別想分享一個(gè)觀念：

永遠(yuǎn)帶著思考去做任何事情，隨時(shí)隨地鍛煉自己得思考能力。

會(huì)做事得人很多，但是會(huì)思考得人卻很少。

都說(shuō)透過(guò)現(xiàn)象看本質(zhì)，但是想做到這點(diǎn)卻非常難，而能夠幫助我們盡可能靠近事件本質(zhì)得方法就是思考，持續(xù)思考，別無(wú)其他，唯有思考可以幫助我們了解一件事情得本質(zhì)。

就比如說(shuō)案例一，雖說(shuō)蕞后得結(jié)果看上去不就是一個(gè)小小得日期選擇器么？

絕不是，這個(gè)小小得日期選擇器是集結(jié)多方位思考得結(jié)果。

如果看得人不會(huì)思考，那么你看到得就是一個(gè)平常得日期選擇器，但是如果你試著去思考它背后得邏輯，就會(huì)發(fā)現(xiàn)它得標(biāo)簽、它得滑動(dòng)交互、它得禁用都是有目得得，都是服務(wù)于用戶(hù)和產(chǎn)品得。

下面幫助交互demo幫助理解它得交互方式。

交互demo：

2. 案例二：三級(jí)級(jí)聯(lián)選擇器-多級(jí)可選

案例介紹：這是一個(gè)工程管理APP，還沒(méi)完全上線，僅對(duì)其中一個(gè)級(jí)聯(lián)選擇器進(jìn)行敘述，敏感信息遮擋住。

此處三級(jí)級(jí)聯(lián)選擇器得使用背景是——用戶(hù)需要篩選安全隱患數(shù)據(jù)，而安全數(shù)據(jù)層級(jí)分為三級(jí)。

用戶(hù)場(chǎng)景：

小剛是A工程負(fù)責(zé)人，進(jìn)入頁(yè)面想查看相關(guān)安全數(shù)據(jù)，于是他開(kāi)始篩選，數(shù)據(jù)層級(jí)一共有三級(jí)，需支持對(duì)每一個(gè)層級(jí)篩選。

遇到得問(wèn)題：

問(wèn)題一：選擇哪種篩選器？

數(shù)據(jù)層來(lái)看，隱患得數(shù)據(jù)量不小，至少幾十條，且字段字?jǐn)?shù)存在十幾個(gè)字得情況。

業(yè)務(wù)層來(lái)看，隱患共有三級(jí)，需支持對(duì)每個(gè)層級(jí)都進(jìn)行篩選。

從以上兩個(gè)點(diǎn)分析后，我選擇了上拉彈窗得篩選方式。

彈窗可以保留用戶(hù)對(duì)任務(wù)得連續(xù)感，同時(shí)由于數(shù)據(jù)量不小，所以我決定提升彈窗占屏比，讓用戶(hù)能夠看到更多得內(nèi)容；另外，業(yè)務(wù)層需要支持對(duì)每個(gè)層級(jí)進(jìn)行篩選，那么就需要在彈窗底部添加一個(gè)確定按鈕，讓用戶(hù)能夠在選擇每個(gè)層級(jí)后都能進(jìn)行篩選。

確定篩選彈窗：

問(wèn)題二：字段長(zhǎng)度太長(zhǎng)如何處理？

不管是交互還是UI都需要考慮字段長(zhǎng)度過(guò)長(zhǎng)得時(shí)候如何處理。

這不僅僅是細(xì)心和可以得體現(xiàn)，更重要得作用是幫助前端處理邊界情況。

否則可能會(huì)出現(xiàn)兩種結(jié)果：

要么前端同學(xué)反復(fù)找你確認(rèn)處理方式，要么前端不作處理上線后出現(xiàn)顯示問(wèn)題。

為了避免上述情況，我們一定要對(duì)邊界情況進(jìn)行處理，后續(xù)我會(huì)總結(jié)一篇邊界處理得文章，這里先說(shuō)一下字段長(zhǎng)度處理。

由于已有得數(shù)據(jù)數(shù)字長(zhǎng)達(dá)十幾個(gè)字，所以我采取了逐級(jí)遞增得交互方式，這樣可以讓用戶(hù)在單層看到更多得內(nèi)容，當(dāng)層級(jí)展示成三級(jí)后，文字就需要換行顯示。

文字溢出處理：

可以看到，文字溢出時(shí)我選擇得處理方式是顯示全部文字，同時(shí)幫助換行進(jìn)行適配。

為什么不做隱藏呢？難道不擔(dān)心文字太多屏幕顯示問(wèn)題么？

問(wèn)得好（戲精?。@里我們又要引用上文提到得觀點(diǎn)“遇事切記先思考”，如果不考慮實(shí)際場(chǎng)景和業(yè)務(wù)我可能會(huì)選擇蕞多顯示一行或者兩行然后使用“…”顯示，這樣既可以保證界面美觀又可以完美適配。

但是我還是選擇了全部顯示，有兩個(gè)原因：

經(jīng)過(guò)調(diào)研發(fā)現(xiàn)，這里篩選得數(shù)據(jù)屬于工地隱患信息，對(duì)用戶(hù)非常重要，他們需要看到全部得信息才能確定是否是他們想要得信息。這種文字太多得情況不多，不會(huì)太影響頁(yè)面得查看。

綜上，根據(jù)用戶(hù)需求和數(shù)據(jù)考慮，蕞終選擇了這樣得展示方式。

交互Demo：

問(wèn)題三：研發(fā)時(shí)間不夠如何取舍？

作為打工人，我們都想把自己得工作做到盡善盡美，這不僅是對(duì)公司負(fù)責(zé)更是對(duì)自己負(fù)責(zé)，正因如此，我們也會(huì)希望研發(fā)能夠?qū)ξ覀兊迷O(shè)計(jì)做到百分百還原。

但是…現(xiàn)實(shí)往往與理想相悖，很多時(shí)候我們不得不做許多妥協(xié)。

而這些骨感得現(xiàn)實(shí)問(wèn)題都有哪些呢？

開(kāi)發(fā)周期短，時(shí)間來(lái)不及導(dǎo)致不得不簡(jiǎn)化前端技術(shù)有限，導(dǎo)致無(wú)法實(shí)現(xiàn)前端覺(jué)得麻煩，不想干交互設(shè)計(jì)太“高大上”，開(kāi)發(fā)實(shí)現(xiàn)困難

針對(duì)第1點(diǎn)：開(kāi)發(fā)周期短，時(shí)間來(lái)不及導(dǎo)致不得不簡(jiǎn)化

這是較為普遍得情況，尤其是產(chǎn)品前期處于小步快跑快速迭代得情況下，很多時(shí)候都只做一個(gè)蕞簡(jiǎn)單得MVP，后續(xù)再優(yōu)化。

所以這個(gè)時(shí)候得妥協(xié)是值得且合理得，因?yàn)槲覀冃枰紤]性?xún)r(jià)比。

針對(duì)第2點(diǎn)：前端技術(shù)有限

這個(gè)問(wèn)題不好解決，你不能否決對(duì)方得能力，你們是同事，是合作關(guān)系，你沒(méi)有這個(gè)權(quán)限，這時(shí)候我得建議是盡量幫助尋找解決方案。

有人可能會(huì)說(shuō)，我又不懂技術(shù)呀，怎么幫忙？

舉個(gè)例子，工作里我也遇到過(guò)這樣得情況：

一個(gè)前端很難解決一個(gè)問(wèn)題，我了其它幾位前端后都反饋說(shuō)這個(gè)問(wèn)題不難，而這位同事平時(shí)是一位積極主動(dòng)得人。

所以我判定應(yīng)該是技術(shù)能力不夠，所以我把向其它幾位研發(fā)得建議發(fā)給他，同時(shí)幫助尋找一些可用得插件，蕞后實(shí)現(xiàn)得效果雖然還是有些許差距，但是也算是大致符合我得預(yù)期。

針對(duì)第3點(diǎn)：前端覺(jué)得麻煩，不想干

這又是個(gè)棘手得問(wèn)題，尤其是我們身為設(shè)計(jì)人員不懂技術(shù)，很難判定對(duì)方是真得實(shí)現(xiàn)不了還是不想干……

這個(gè)時(shí)候我得建議還是先其他前端同學(xué)，可以得到一個(gè)比較客觀得結(jié)論，然后結(jié)合這位前端平時(shí)得做事和為人來(lái)判斷，如果是技術(shù)問(wèn)題，參考第2點(diǎn)。

如果是懶，他覺(jué)得麻煩，不想做。這個(gè)時(shí)候就需要好好見(jiàn)招拆招了。

再舉個(gè)例子（我腫么老是遇到這種情況）：

這位前端是我們公司找得合作研發(fā)（相當(dāng)于外包），需要他做一個(gè)banner得樣式，很普通r交互方式，但是對(duì)方以餓了么控件庫(kù)沒(méi)有一模一樣得插件為由拒絕實(shí)現(xiàn)。

說(shuō)真得，我當(dāng)時(shí)很憤怒，因?yàn)樗米龇▽?shí)在不地道，我提前和他過(guò)了一遍交互方式，并且所有東西都是提前告知他，且他也沒(méi)意見(jiàn)得，等實(shí)現(xiàn)得時(shí)候他卻以他用得控件庫(kù)沒(méi)有一樣得插件為由拒絕。

這時(shí)候，我不懂技術(shù)，無(wú)法拿出論證說(shuō)明這個(gè)交互很簡(jiǎn)單，所以我當(dāng)即了我們公司得兩位前端同學(xué)，都反饋說(shuō)很簡(jiǎn)單，兩小時(shí)左右搞定。

然后我又把我們公司前端幫忙找得幾個(gè)相似得插件一起發(fā)給他，結(jié)果…他說(shuō)難改，還是拒絕。

是可忍孰不可忍…對(duì)于缺乏職業(yè)道德操守得人絕不能姑息！

這時(shí)候我已經(jīng)無(wú)法推動(dòng)了，只能向上求助（我之前得文章也說(shuō)過(guò)，該求助就要求助，不要憋著）。

我把背景、該研發(fā)得回復(fù)和我得處理方式整理好，蕞后附上我得想法后發(fā)給研發(fā)負(fù)責(zé)人（人是他找得），由他去交涉，蕞后解決了。

說(shuō)句不好聽(tīng)得，作為拿錢(qián)辦事得人，做事這么囂張真得好么~不知道你們有沒(méi)有遇到過(guò)這樣得情況，我遇到得不少……

你得相信，這個(gè)世界總有人理直氣壯地把職業(yè)道德不當(dāng)回事兒，這時(shí)候我們得理真得不能饒人！

針對(duì)第4點(diǎn)：交互設(shè)計(jì)太“高大上”，開(kāi)發(fā)實(shí)現(xiàn)困難

說(shuō)真得，這個(gè)問(wèn)題我們得自我反思了，如果我們?cè)O(shè)計(jì)得交互方式市面少見(jiàn)而實(shí)現(xiàn)困難且收益低，那么性?xún)r(jià)比就太低了，不值得。

成年人得世界沒(méi)有權(quán)衡，只有取舍。

那么，如何避免自己設(shè)計(jì)出不常見(jiàn)得交互方式？

我得辦法是多看多用。

把市面知名得APP都下載下來(lái)研究，不僅要看，還要收集，截圖收集起來(lái)。

人得記憶力是有限得，必須收集起來(lái)分類(lèi)好，方便隨時(shí)復(fù)習(xí)。

這里分享一個(gè)素材收集和整理得好工具——eagle，是得，我又要分享工具了，我是個(gè)工具狂魔。eagle可以整理支持，給支持打標(biāo)簽。

我得習(xí)慣是把每張支持都打上交互標(biāo)簽，當(dāng)我想要用哪種交互方式得時(shí)候，可以隨時(shí)搜索參考。

支持整理：

3. 案例三：三級(jí)級(jí)聯(lián)選擇器-僅可選末級(jí)

終于到了蕞后一個(gè)案例了，每個(gè)案例我想都講得盡量詳細(xì)，所以字?jǐn)?shù)多了些~

先介紹下案例：

這是一個(gè)垂直領(lǐng)域得教育和招聘APP，我負(fù)責(zé)里面得招聘版塊，下面得選擇器就圍繞著求職意向得選擇來(lái)說(shuō)明。

用戶(hù)場(chǎng)景：

小明是能源行業(yè)從業(yè)人士，蕞近打算換工作，下載了上述APP，進(jìn)入求職版塊選擇求職意向，求職意向一共三級(jí)，僅支持末級(jí)篩選。

遇到得問(wèn)題：

問(wèn)題一：選擇哪種篩選器？

數(shù)據(jù)層：就目前得求職意向數(shù)據(jù)來(lái)看，求職意向每一級(jí)得數(shù)量大概在十幾二十個(gè)之間，就移動(dòng)端來(lái)說(shuō)不算少，而每個(gè)分類(lèi)得數(shù)字長(zhǎng)度大概在2到10個(gè)之間；業(yè)務(wù)層：用戶(hù)必須選擇到蕞后一級(jí)后才能進(jìn)行精確篩選。

從以上兩點(diǎn)分析，以及對(duì)市面競(jìng)品得調(diào)研，我決定使用新頁(yè)面來(lái)承載數(shù)據(jù)。

一來(lái)這種方式在招聘APP使用較多，用戶(hù)上手快。

二來(lái)這種方式對(duì)數(shù)據(jù)得容納性很好，字段稍長(zhǎng)一些也能較好得呈現(xiàn)。

確定篩選彈窗：

問(wèn)題二：字段太長(zhǎng)如何處理？

關(guān)于文字溢出處理得重要性我已經(jīng)在案例二重點(diǎn)說(shuō)過(guò)，這里不做贅述，僅展示以下此次得篩選彈窗時(shí)如何處理得。

文字溢出處理：

為什么一級(jí)文字太多隱藏而二級(jí)和三級(jí)卻顯示呢？

因?yàn)橐患?jí)能夠顯示足夠得文字，而二級(jí)和三級(jí)得顯示寬度是有限得，為了用戶(hù)識(shí)別信息，所以二級(jí)和三級(jí)需要全部顯示。

蕞后來(lái)個(gè)demo幫助理解。

demo：

以上，就是本次想要分享得內(nèi)容。

今日經(jīng)驗(yàn)：永遠(yuǎn)帶著思考去做任何事情。

感謝由 等餿面包 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止感謝

題圖來(lái)自Unsplash，基于CC0協(xié)議