后臺列表設(shè)計避坑指南_上

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

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

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

　　搜索
 

　　1. 問題定位
 

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

 

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

　　還有一件事
 

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

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