一、什么是“查詢”？

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

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

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

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

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

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

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

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

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

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

三、操作修改實例

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

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

問題分析：

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

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

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

改良目標：

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

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

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

改良方法：

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

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

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

四、具體案例

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

對于單個查詢項 

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

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

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

若一個搜索同時存在兩種及以上狀態(tài)，可以通過標簽展示刪除

2.搜索項分類選擇

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

速選擇加入了“本項全選/反選”和“全部全選/反選”的功能。其中，“本項全選/反選”是針對當前項

的批量操作，“全部全選/反選”是針對所有項的批量操作。

對于整個查詢區(qū)域的布局

1.折疊收起過多搜索項

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

3.通過分類搜索項目，用標簽跳轉(zhuǎn)區(qū)分

4.通過增加新彈框，隱藏使用頻率低的查詢項

問題分析：

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

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

改良目標：

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

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

改良方法：

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

2、弱化次要按鈕

四、具體案例

問題分析：

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

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

改良目標：

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

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

改良方法：

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

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

四、具體案例

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

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

2.分類篩選字段展示

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

5.自定義篩選字段展示

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

五、實際操作

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

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

方案一

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

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

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

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

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

方案二

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

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

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

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

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

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

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

文章來源：站酷  作者酸奶烤鴨

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

藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)