一、什么是“查詢”？

“查詢”是指用戶在通過(guò)某些查詢條件進(jìn)行數(shù)據(jù)篩選后，再以“表格”的展現(xiàn)形式進(jìn)行數(shù)據(jù)呈現(xiàn)，以到達(dá)篩選數(shù)據(jù)，快速查看的目的。

查詢的動(dòng)作主要由搜索和篩選組成，這里要強(qiáng)調(diào)一下查詢和篩選的區(qū)別

搜索和篩選的主要區(qū)別是:搜索可以自定義查詢條件，篩選是必須按照特定的條件字段查詢，如“是”、“否”、“不限”、“男”等條件

一般語(yǔ)境下，不支持模糊搜索的查詢結(jié)果為單項(xiàng)數(shù)據(jù)，如姓名查詢，訂單號(hào)查詢，這些查詢操作只能輸出一條結(jié)果，即查一得一

舉例 手機(jī)號(hào)搜索 139xxxx2918 正常情況下是輸入11位號(hào)碼進(jìn)行搜索數(shù)據(jù) 得到手機(jī)號(hào)碼為139xxxx2918的各項(xiàng)數(shù)據(jù)，即查一得一

輸入139進(jìn)行搜索查詢也可以得到多條手機(jī)號(hào)碼包括139的數(shù)據(jù)，但是一定程度上失去了手機(jī)號(hào)搜索的意義

所以建議在后臺(tái)數(shù)據(jù)查詢的頁(yè)面，將搜索和篩選這兩個(gè)操作區(qū)域通過(guò)換行或者間隔拉大進(jìn)行比較清晰的區(qū)分，不要在搜索字段的區(qū)域里面混入篩選的內(nèi)容。

二、數(shù)據(jù)過(guò)多時(shí)，“查詢”為什么要優(yōu)化？

當(dāng)數(shù)據(jù)過(guò)多，導(dǎo)致“查詢條件”的搜索項(xiàng)和“搜索結(jié)果”的數(shù)據(jù)項(xiàng)過(guò)多的情形。查詢操作優(yōu)先級(jí)混亂，增加操作人員的使用負(fù)擔(dān)和效率

好的查詢界面可以通過(guò)折疊，新增彈框等方式，合理的編排查詢層級(jí)關(guān)系，在保證查詢功能完整性的情況下，高頻查詢優(yōu)先展示，編輯方便，預(yù)覽快捷，增加工作效率。

三、操作修改實(shí)例

我們來(lái)看一下什么樣的界面屬于查詢條件過(guò)多，搜索結(jié)果項(xiàng)過(guò)多的頁(yè)面，分析一下臃腫的部分和解決方法。

查詢頁(yè)面可以分為三個(gè)區(qū)域，查詢條件區(qū)域、操作按鈕區(qū)域和數(shù)據(jù)展示區(qū)域，分析一下3個(gè)區(qū)域冗余和待優(yōu)化的地方才可以設(shè)計(jì)出交互良好簡(jiǎn)介的頁(yè)面

問(wèn)題分析：

1、搜索條件和篩選條件混合，功能區(qū)混亂

2、單項(xiàng)選擇框?qū)Χ噙x的字段兼容性差，表達(dá)效果弱

3、查詢區(qū)域設(shè)計(jì)語(yǔ)言混亂，輸入框 選擇框 時(shí)間選擇框 數(shù)值框同時(shí)出現(xiàn) 視覺上渙散，混亂 

改良目標(biāo)：

1、查詢區(qū)域搜索和篩選字段重新編排，并且進(jìn)行優(yōu)先級(jí)整理排序

2、重新設(shè)計(jì)針對(duì)多選的字段的選擇組件

3、將同一數(shù)據(jù)類型的查詢字段合并，頁(yè)面只出現(xiàn)一個(gè)時(shí)間組件、數(shù)值框

改良方法：

1、查詢區(qū)域搜索和篩選字段重新編排，并且進(jìn)行優(yōu)先級(jí)整理排序

2、重新設(shè)計(jì)針對(duì)多選的字段的選擇組件

3、將同一數(shù)據(jù)類型的查詢字段合并，頁(yè)面只出現(xiàn)一個(gè)時(shí)間組件、數(shù)值框

四、具體案例

   鑒于后臺(tái)系統(tǒng)的龐大數(shù)據(jù)量，查詢條件難免會(huì)出現(xiàn)過(guò)多的情況，為保持各頁(yè)面簡(jiǎn)潔統(tǒng)一，默認(rèn)當(dāng)數(shù)據(jù)超過(guò)N條的時(shí)候，將其余查詢條件進(jìn)行收起處理，防止查詢條件過(guò)長(zhǎng)，導(dǎo)示影響用戶查看搜索結(jié)果。這種收起狀態(tài)可以通過(guò)幾種不同的形式呈現(xiàn)。

對(duì)于單個(gè)查詢項(xiàng) 

1.相同搜索類型合并展示

鑒于后臺(tái)系統(tǒng)查詢種類繁雜，我們大體把他分為關(guān)鍵字搜索，日期選擇，數(shù)值范圍，單選多選

為保持設(shè)計(jì)語(yǔ)言統(tǒng)一，可以將關(guān)鍵詞搜索和日期選擇合并展示，折疊不同的數(shù)據(jù)項(xiàng)。

若一個(gè)搜索同時(shí)存在兩種及以上狀態(tài)，可以通過(guò)標(biāo)簽展示刪除

2.搜索項(xiàng)分類選擇

當(dāng)搜索項(xiàng)中的數(shù)據(jù)項(xiàng)過(guò)多還可使用另一種優(yōu)化形式，使用下拉框與分類形式相結(jié)合。為方便用戶快

速選擇加入了“本項(xiàng)全選/反選”和“全部全選/反選”的功能。其中，“本項(xiàng)全選/反選”是針對(duì)當(dāng)前項(xiàng)

的批量操作，“全部全選/反選”是針對(duì)所有項(xiàng)的批量操作。

對(duì)于整個(gè)查詢區(qū)域的布局

1.折疊收起過(guò)多搜索項(xiàng)

2.通過(guò)開關(guān)收起過(guò)多搜索項(xiàng)

3.通過(guò)分類搜索項(xiàng)目，用標(biāo)簽跳轉(zhuǎn)區(qū)分

4.通過(guò)增加新彈框，隱藏使用頻率低的查詢項(xiàng)

問(wèn)題分析：

1、操作按鈕數(shù)量過(guò)多

2、操作按鈕樣式類似，無(wú)法體現(xiàn)功能優(yōu)先級(jí)

改良目標(biāo)：

1、精簡(jiǎn)按鈕數(shù)量

2、根據(jù)按鈕功能地位，強(qiáng)化/弱化按鈕樣式體現(xiàn)層級(jí)關(guān)系

改良方法：

1、將使用頻率不高的按鈕折疊展示

2、弱化次要按鈕

四、具體案例

問(wèn)題分析：

1、表頭與關(guān)鍵數(shù)據(jù)列固定列表內(nèi)數(shù)據(jù)行的橫向、縱向數(shù)據(jù)過(guò)多

2、無(wú)法自定義展示的數(shù)據(jù)列

改良目標(biāo)：

1、將重要的數(shù)據(jù)項(xiàng)固定，梳理過(guò)多的數(shù)據(jù)項(xiàng)

2、增加自定義展示數(shù)據(jù)列的功能

改良方法：

1、選擇使用表頭固定及關(guān)鍵數(shù)據(jù)列固定，方便對(duì)應(yīng)查看數(shù)據(jù)標(biāo)題及內(nèi)容

2、通過(guò)增加自定義字段展示和支持列寬，就能盡可能多的展示需要觀察的數(shù)據(jù)項(xiàng)

四、具體案例

1.表頭與關(guān)鍵數(shù)據(jù)列固定

列表內(nèi)數(shù)據(jù)行的橫向、縱向數(shù)據(jù)過(guò)多時(shí)，選擇使用表頭固定及關(guān)鍵數(shù)據(jù)列固定，方便對(duì)應(yīng)查看數(shù)據(jù)標(biāo)題及內(nèi)容。

2.分類篩選字段展示

數(shù)據(jù)行橫向字段過(guò)多時(shí)，可將字段分類展示，根據(jù)不同的分類去展示字段，即可全局查看，又可分類查看。根據(jù)用戶選擇的分類進(jìn)行橫向滾動(dòng)，方便查看數(shù)據(jù)。

5.自定義篩選字段展示

數(shù)據(jù)行橫向字段過(guò)多時(shí)，還可將字段自定義展示，用戶可以自定義選擇展示的篩選字段和調(diào)整順序，根據(jù)用戶的要求將常用的高頻率的篩選字段優(yōu)先展示，提高工作效率。

五、實(shí)際操作

以上的內(nèi)容是按照查詢頁(yè)面的三個(gè)部分臃腫的地方提出的解決方法，但是優(yōu)化查詢頁(yè)面的交互，使得查詢操作既高效又舒適

還是得依據(jù)各個(gè)查詢頁(yè)面的業(yè)務(wù)需求，將以上不同的解決方法組合，才能得到一個(gè)適應(yīng)于自己當(dāng)下任務(wù)的方案。

方案一

查詢條件區(qū)域    將低頻率的篩選條件折疊到高級(jí)篩選中+搜索項(xiàng)分類選擇+將關(guān)鍵字搜索字段合并展示

操作按鈕區(qū)域    將低頻率的操作按鈕折疊到更多按鈕中    

數(shù)據(jù)展示區(qū)域    使用分類展示+表頭與關(guān)鍵數(shù)據(jù)列固定

優(yōu)點(diǎn)    首頁(yè)展示查詢內(nèi)容最少，頁(yè)面簡(jiǎn)潔，可以展示更多查詢數(shù)據(jù)，頁(yè)面和彈框內(nèi)將類似字段折疊展示，內(nèi)容緊            湊，操作便捷

缺點(diǎn)    頁(yè)面交互路徑增長(zhǎng)，編輯數(shù)據(jù)要進(jìn)彈窗，不夠方便，次要按鈕和次要查詢字段被折疊隱藏，新客戶不易找            到

方案二

查詢條件區(qū)域    通過(guò)篩選開關(guān)，選擇是否展示篩選字段 字段選項(xiàng)鋪開展示

操作按鈕區(qū)域    將低頻率的操作按鈕折疊到更多按鈕中

數(shù)據(jù)展示區(qū)域    使用自定義顯示表格字段

優(yōu)點(diǎn)    首頁(yè)可以直接編輯字段，展示內(nèi)容最多，直觀方便，可操作性強(qiáng)，交互路徑短

缺點(diǎn)    頁(yè)面鋪開高度過(guò)高，關(guān)閉篩選開關(guān)無(wú)法預(yù)覽篩選條件，打開開關(guān)，則壓縮表格空間，電腦一屏展示數(shù)據(jù)較            少

靈活運(yùn)用布局和組件的簡(jiǎn)化方法，才能搭配出適合自己產(chǎn)品的最優(yōu)設(shè)計(jì)，以上內(nèi)容僅供參考，希望大家可以學(xué)到的是設(shè)計(jì)方法，而不是組件和布局本身。感謝觀看。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷  作者酸奶烤鴨

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)