后臺(tái)列表設(shè)計(jì)避坑指南_上

　　列表頁(yè)是構(gòu)成后臺(tái)使用界面的重要組成之一，聚合了眾多信息并提供操作入口。區(qū)別于小而美的C端產(chǎn)品列表，后臺(tái)系統(tǒng)的用戶希望列表的內(nèi)容又多又全面(表格)，但在操作時(shí)又能支持快速定位(搜索，包含 篩選)、準(zhǔn)確處理(操作)。這需求貌似有些矛盾，但在很多場(chǎng)景下，例如客服在接待客戶時(shí)窗口時(shí)間極其短暫，既要全面獲取相關(guān)信息，又要快速應(yīng)對(duì)解決客戶問(wèn)題。因此這需求不僅合理而且是剛需。
 

　　列表頁(yè)由「搜索」、「表格」和「操作項(xiàng)」三大基本塊組成。剛才提到的矛盾點(diǎn)也是由這三個(gè)模塊之前的互相影響和制約(后面會(huì)詳細(xì)闡述)。我們當(dāng)初由于在設(shè)計(jì)時(shí)忽視了特定場(chǎng)景細(xì)節(jié)，以及生搬硬套了一些看起來(lái)很美很簡(jiǎn)約的交互樣式，沒(méi)有處理好這三個(gè)模塊內(nèi)部以及之間的關(guān)系，被用戶抱怨說(shuō)不好用。今天AAA教育郭老師就將這篇文章中「搜索」、「列表」、「操作」三塊問(wèn)題進(jìn)行分析和定位，盤點(diǎn)一下那些被淘汰掉的解決方案，給大家提供一份避坑指南。
 

　　注意，不存在「最好」的通用方案，只有應(yīng)對(duì)具體需求「最合適」的解決方案。
 

　　搜索
 

　　1. 問(wèn)題定位
 

　　搜索功能的主要問(wèn)題是，條件特別多。如果全部條件堆疊在屏幕上，會(huì)嚴(yán)重?cái)D占列表的展示空間，使得首屏留給列表的空間所剩無(wú)幾。用戶在尋找具體搜索條件時(shí)，仿佛大海撈針，耗時(shí)費(fèi)力。

 

　　造成搜索條件多的原因，一方面是由于數(shù)據(jù)信息量大，維度多。在非精準(zhǔn)搜索的場(chǎng)景下，少量的條件不足以篩選出特定內(nèi)容。另外列表由多個(gè)職責(zé)權(quán)限的用戶共用，展示的是各權(quán)限下條件合集。
 

　　設(shè)計(jì)方案要能同時(shí)滿足下面3個(gè)需求：
 

　　用戶可以快速找到搜索條件——控制條件的數(shù)量;
 

　　能滿足搜索細(xì)致程度上的要求——搜索條件要充足;
 

　　將展示區(qū)域更多留給表格——避免搜索區(qū)域占用太多屏幕空間。
 

　　淘汰方案1：把搜索條件按照權(quán)限隱藏

 

　　例如職責(zé)A的用戶展示搜索條件1、2、3、4，職責(zé)B的用戶搜索條件1、2、5、6。此方案確實(shí)能同時(shí)滿足①②③，但需要非常細(xì)致的配置工作。若組織架構(gòu)發(fā)生變動(dòng)，維護(hù)的工作量很難預(yù)估。
 

　　淘汰方案2：將搜索條件放置在列表左側(cè)

 

　　這個(gè)方案試圖滿足需求③，希望保證首屏的展示主體是列表，但其實(shí)列表的橫向展示空間被擠占了。如果列表很寬，那么瀏覽的時(shí)候就需要頻繁的左右滑動(dòng)。若是設(shè)備不支持左右滑動(dòng)(不包含觸摸板)，用戶只能頻繁拖動(dòng)滾動(dòng)條，想一想這體驗(yàn)就很糟糕。
 

　　另外搜索區(qū)域的展示布局由塊面轉(zhuǎn)變?yōu)闂l狀，需要向下滾動(dòng)(可能是多次)才能完整預(yù)覽所有條目，降低了搜索效率。
 

　　淘汰方案3：默認(rèn)顯示少數(shù)搜索條件，全部條件轉(zhuǎn)移至彈窗內(nèi)呈現(xiàn)

 

　　這樣設(shè)計(jì)后，看起來(lái)也能滿足①②③——默認(rèn)狀態(tài)下的列表確實(shí)清爽了不少。
 

　　但如果用戶需要多次切換搜索條件的組合方式時(shí)，需多次打開(kāi)+關(guān)閉彈窗，大大增加點(diǎn)擊次數(shù)。這種方案還需要注意一點(diǎn)：搜索條件和結(jié)果展示之間的具有強(qiáng)關(guān)聯(lián)性，需要在特定區(qū)域展示當(dāng)前生效的搜索條件。
 

　　淘汰方案4：隱藏輸入框標(biāo)題，使用占位符提示搜索內(nèi)容

 

　　某個(gè)同學(xué)提出這個(gè)方案，原因是標(biāo)題在輸入框上方，隱藏標(biāo)題可以使搜索條件排布的更緊密，給列表騰地方。這種設(shè)計(jì)其實(shí)挺常見(jiàn)，但前提是輸入框數(shù)量極少，且為用戶所熟知。但后臺(tái)系統(tǒng)有些輸入框需要選擇「是」或「否」，選擇后用戶只憑「是」或「否」，可能回想不出這個(gè)選項(xiàng)對(duì)應(yīng)的是什么搜索條件。
 

　　淘汰方案5：縮短輸入框列寬，從而增加每行的列數(shù)，減少行數(shù)

 

　　這樣可以減少篩選項(xiàng)的行數(shù)，目的也是在首屏給列表騰地方。但填寫(xiě)至輸入框的文本只能展示前面幾個(gè)字，影響預(yù)覽和理解。例如在地區(qū)的輸入框中只能顯示「浙江省杭州市…」無(wú)法看到「區(qū)」、「街道」等更詳細(xì)的重要信息。
 

　　最終方案：用戶可設(shè)置展示哪些選項(xiàng)，且通過(guò)賬號(hào)記錄設(shè)置結(jié)果

 

　　這個(gè)方案較全面的解決了問(wèn)題，每個(gè)用戶都可以根據(jù)自己的需求和習(xí)慣決定展示哪些選項(xiàng)，甚至選項(xiàng)排序。這個(gè)方案滿足了①②③的需求，但這個(gè)需要后端開(kāi)發(fā)的支持。
 

　　還有一件事
 

　　如果后臺(tái)系統(tǒng)的數(shù)據(jù)加載時(shí)間比較久(不管是數(shù)據(jù)量大還是開(kāi)發(fā)方式導(dǎo)致)，盡量避免采用輸入/選擇后即執(zhí)行搜索的交互樣式。這可能導(dǎo)致每次輸入/選擇后用戶都需要被迫等待。如果選擇N個(gè)搜索條件，等待時(shí)間要乘以N。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。