2021-10-15 鶴鶴
首先我們先了解下官方Ant Design對查詢列表的定義：
查詢列表可以查看和處理大量的條目數(shù)據(jù)，常有導(dǎo)航至詳情的作用，
用戶可在列表頁對條目進(jìn)行篩選、搜索、對比、新增、分析、下鉆至條目完整詳情頁等操作。
幫助用戶更高效的查看、處理、查找條目。
易讀性：采用格式一致外觀，突出有利于對象識別的關(guān)鍵信息。利用富交互分層展示信息以減少認(rèn)知負(fù)荷；
可尋性：列表以易于瀏覽的邏輯排序。提供合適的搜尋組件幫助用戶快速查找信息；
數(shù)據(jù)過濾 + 數(shù)據(jù)統(tǒng)計(jì) + 數(shù)據(jù)列表 + 批量操作
現(xiàn)在有了官方解答指導(dǎo)，我們就先從分析模仿開始
從四個(gè)維度開始一一分析：
常規(guī)的數(shù)據(jù)過濾分為兩種類型：
特點(diǎn)【結(jié)構(gòu)化+有限范圍】，篩選需求和數(shù)據(jù)都是結(jié)構(gòu)化的，
比如有一個(gè)用戶信息表，需要篩選出性別【男】+城市【北京】+年齡段【18-24歲】的用戶，就是因?yàn)樾畔傩钥梢员涣炕筒鸾馓幚恚覀儾拍芏鄺l件組合篩選（且的關(guān)系）出來；
組件：選擇器（單選/多選）；
布局：上下結(jié)構(gòu)（常用）、左右結(jié)構(gòu)，條件多時(shí)要配合可折疊操作；
形式：區(qū)域堆疊、表頭、彈窗；
特點(diǎn)【非結(jié)構(gòu)化+模糊/精準(zhǔn)匹配】，搜索的需求是非結(jié)構(gòu)化的，
比如還是用戶信息表，需要查到一個(gè)叫【寧榮榮】的信息，你就只能去手動(dòng)打字去搜索，因?yàn)樾彰情_放式的信息，無法被結(jié)構(gòu)化處理。
組件：基礎(chǔ)搜索框、高級搜索框；
布局：跟隨列表，常放置其左上角或右上角；
關(guān)于具體使用，搜索不用多說，遵循系統(tǒng)統(tǒng)一性原則，選擇一處固定位置就好，
對于B段產(chǎn)品，業(yè)務(wù)本身比較復(fù)雜，篩選條件偏多，原則建議從使用高低頻入手，高頻顯性，低頻置后、折疊都可（后續(xù)可以出一片詳細(xì)的篩選篇分享下）
數(shù)據(jù)統(tǒng)計(jì)一般作為查詢列表的重要配角出現(xiàn)，方便用戶直觀了解到當(dāng)前頁面的統(tǒng)計(jì)信息。
就是列表數(shù)據(jù)提煉出來統(tǒng)計(jì)信息，數(shù)據(jù)名稱+數(shù)值，左右、上下布局都可，
有一點(diǎn)強(qiáng)調(diào)一下，業(yè)務(wù)的數(shù)據(jù)統(tǒng)計(jì)要求和條件篩選聯(lián)動(dòng)變化，就要放在條件篩選下方，
如果統(tǒng)計(jì)數(shù)值是固定值，就放置條件篩選上方。
這里的列表主要陳述標(biāo)準(zhǔn)的【表格Table】形式，
表格被公認(rèn)為是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一。
它常和排序、搜索、篩選、分頁等其他元素一起協(xié)同，適用于信息的收集和展示，以及操作結(jié)構(gòu)化數(shù)據(jù)，
明顯優(yōu)勢就是結(jié)構(gòu)簡單，分隔歸納明確，使信息之間更易于對比，大大提升了用戶對信息的接收效率和理解程度。
常規(guī)內(nèi)容構(gòu)成：
Header：標(biāo)題、篩選（高頻）、操作按鈕、表搜索、icon（列設(shè)置、刷新、全屏）
Table-Header：復(fù)選框、序號、列名稱、icon（排序、提示、列篩選、列搜索）
Table-Content：數(shù)據(jù)內(nèi)容、按鈕
Footer：多選數(shù)量，分頁器
批量操作是作用于整個(gè)頁面的操作，故放置與頁面最底部，當(dāng)然這個(gè)可以根據(jù)應(yīng)用場景調(diào)整位置，
常見操作有【批量刪除】【批量禁用】【批量導(dǎo)出】。
筆者也是從0開始接觸B端設(shè)計(jì)，開始查閱了相關(guān)很多設(shè)計(jì)規(guī)范體系，一頓狼吞虎咽，依葫蘆畫瓢出了設(shè)計(jì)模板
下圖就是依據(jù)Ant Design設(shè)計(jì)出的第一版查詢列表模板
經(jīng)過產(chǎn)品和研發(fā)評審，這樣的布局表現(xiàn)雖說“五臟俱全”、“兼容性較好”，但是脫離了用戶實(shí)際使用場景和交互路徑，割裂感也很強(qiáng)，
舉個(gè)例子，你準(zhǔn)備蓋一個(gè)房子，常規(guī)講應(yīng)該有有客廳、臥室、書房、廚房和衛(wèi)生間五個(gè)空間，但你現(xiàn)在只是單純用磚塊砌了五個(gè)房間，大小一樣，毫無順序，想必你也不會(huì)這么蓋···，我們現(xiàn)在從頭開始，你是不是會(huì)考慮：
1、是不是進(jìn)門應(yīng)該是客廳，是不是應(yīng)該大一點(diǎn)好接待客人；
2、書房是不是應(yīng)該遠(yuǎn)離，減少噪音；
3、哪些房子需要窗戶，窗戶朝哪邊好通風(fēng)，陽光充足；
4、等等···
總結(jié)一句：我們設(shè)計(jì)出的交互操作&視覺呈現(xiàn)，要契合用戶實(shí)際使用場景和路徑，而不是自己YY。
怎么獲取你想要的答案？調(diào)研和競品分析。
調(diào)研可以向產(chǎn)品、銷售、交付人員獲取你想要的信息，
競品分析可以找同類型產(chǎn)品進(jìn)行優(yōu)劣分析，取其精華。
下面列舉調(diào)研和競品分析的幾個(gè)點(diǎn)說明下：
問：產(chǎn)品或銷售登門拜訪客戶時(shí)，演示電腦分辨率是多少？客戶使用電腦分辨率是多少？
答：多為老式筆記本電腦且分辨率偏小，1440*900、1366*768偏多。
機(jī)會(huì)點(diǎn)：上圖數(shù)據(jù)來自百度統(tǒng)計(jì)-流量研究院也只能作為輔助參考，最終還是要看產(chǎn)品實(shí)際用戶設(shè)備情況，為了保證頁面內(nèi)容盡可能多的展示在屏幕上，布局得緊湊，要優(yōu)先適配小屏幕效果，所以設(shè)計(jì)稿尺寸得調(diào)整為1440*800（去除瀏覽器頂部頁簽+地址欄+Win任務(wù)欄高度，再取整）。
問：詢問客戶使用查詢列表頁面是否能高效的查看、處理、查找條目
答：查詢查看沒問題，就是一屏數(shù)據(jù)內(nèi)容展示的太少，標(biāo)題欄、篩選和數(shù)據(jù)統(tǒng)計(jì)占了太多高度，而且篩選也不常用，導(dǎo)出按鈕在底部不明顯，橫向滑動(dòng)很難用，看錯(cuò)行。
機(jī)會(huì)點(diǎn)：優(yōu)化布局，篩選考慮折疊或者表頭篩選，橫向數(shù)據(jù)堆積能否換行展示，導(dǎo)出操作是否可以放在上方？
優(yōu)點(diǎn)：列表內(nèi)容占主要視覺面積，篩選采用表頭和自定義配置條件功能結(jié)合，列內(nèi)容可自定義隱藏/顯示/前置和列固定左側(cè)，優(yōu)先展示用戶自己想看的信息，減少橫向滾動(dòng)條操作和提升小屏用戶體驗(yàn)，將主動(dòng)權(quán)交給用戶，列表視圖和分屏視圖也滿足了不同用戶的查看需求，以上這些都是很好的優(yōu)化方向。
優(yōu)點(diǎn)：同樣列表內(nèi)容占主要視覺面積，高頻篩選放出來，低頻篩選采用折疊交互方式，用戶有需要?jiǎng)t點(diǎn)開【更多篩選】去操作，頂部有數(shù)據(jù)統(tǒng)計(jì)支持總攬，Table內(nèi)容對于強(qiáng)關(guān)聯(lián)的內(nèi)容進(jìn)行上下組合（節(jié)省橫向空間），所有的操作按鈕集合到右上角，方便用戶定位操作。
總結(jié)一下：
以上就是筆者在調(diào)研和競品分析上可以獲取到的主要信息，雖說第一版套用AntD模板的設(shè)計(jì)并不理想，但對于初入B端行業(yè)的筆者來說著實(shí)重要，對查詢列表的框架、功能、和交互有了基礎(chǔ)指導(dǎo)和了解，才能有后續(xù)的一些針對特定業(yè)務(wù)場景的設(shè)計(jì)優(yōu)化改版，凡事還是得現(xiàn)有基礎(chǔ)理論支持，后面的路才會(huì)走的更遠(yuǎn)。
言歸正傳，下圖就是針對上面的總結(jié)優(yōu)化后的查詢列表，相比第一版（可上劃參考對比）變化還是挺大的，各位可以對照的優(yōu)化點(diǎn)細(xì)細(xì)體會(huì)下：
1、取消面包屑（系統(tǒng)深度較淺），優(yōu)化（減少）標(biāo)題欄高度；
2、增加數(shù)據(jù)統(tǒng)計(jì)，區(qū)域板塊使用分割線劃分，減少割裂感；
3、頁面操作按鈕集合放置在右上角，主按鈕統(tǒng)一在最右側(cè)；
4、高頻篩選常駐+表頭篩選結(jié)合交互（這里其實(shí)還是有問題的，對于組合篩選操作并不易用，待優(yōu)化）；
5、增加Table刷新和列設(shè)置操作（刷新和設(shè)置icon）；
6、列鎖定（鎖子icon）可以快速自定義設(shè)置優(yōu)先左側(cè)固定；
7、Table內(nèi)容根據(jù)業(yè)務(wù)內(nèi)容屬性合并上下組合展示，節(jié)省橫向面積（寧可上下滑動(dòng)，也不要橫向滑動(dòng)，至少減少橫向滑動(dòng)的距離）；
這一版看起來整體架構(gòu)層級依然清晰明確，從視覺角度看更豐富、更有節(jié)奏感，從交互來看也更符合用戶的操作場景，新增了幾個(gè)輔助功能，讓用戶可以根據(jù)自己的業(yè)務(wù)需要自定義配置列表內(nèi)容，更有掌控感，能更高效的查看、處理、查找相關(guān)信息，這也是基本達(dá)到了查詢列表的設(shè)計(jì)目標(biāo)。
經(jīng)過和產(chǎn)品經(jīng)理溝通，此次優(yōu)化思路和方向也很準(zhǔn)確，獲得了肯定，后續(xù)的迭代還需持續(xù)進(jìn)行。
調(diào)研和競品分析帶來的好處想必各位也體會(huì)到了，凡是我們不了解不精通的，就去多看看多搜搜，總會(huì)有收獲，站在巨人的肩膀上總會(huì)看的更遠(yuǎn)。
這次的分享是自己在探索B端道路上的小經(jīng)歷，同時(shí)也體會(huì)到一些更深層次的東西，比如設(shè)計(jì)的意義在哪，什么是好的設(shè)計(jì)，怎么才能做出“好”的產(chǎn)品，在此分享給各位，希望能給大家?guī)硇┧季S上的變化，共同進(jìn)步。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn