一、什么是“查詢”？

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

查詢的動作主要由搜索和篩選組成，這里要強調一下查詢和篩選的區別

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

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

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

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

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

二、數據過多時，“查詢”為什么要優化？

當數據過多，導致“查詢條件”的搜索項和“搜索結果”的數據項過多的情形。查詢操作優先級混亂，增加操作人員的使用負擔和效率

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

三、操作修改實例

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

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

問題分析：

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

2、單項選擇框對多選的字段兼容性差，表達效果弱

3、查詢區域設計語言混亂，輸入框 選擇框 時間選擇框 數值框同時出現 視覺上渙散，混亂 

改良目標：

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

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

3、將同一數據類型的查詢字段合并，頁面只出現一個時間組件、數值框

改良方法：

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

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

3、將同一數據類型的查詢字段合并，頁面只出現一個時間組件、數值框

四、具體案例

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

對于單個查詢項 

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

鑒于后臺系統查詢種類繁雜，我們大體把他分為關鍵字搜索，日期選擇，數值范圍，單選多選

為保持設計語言統一，可以將關鍵詞搜索和日期選擇合并展示，折疊不同的數據項。

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

2.搜索項分類選擇

當搜索項中的數據項過多還可使用另一種優化形式，使用下拉框與分類形式相結合。為方便用戶快

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

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

對于整個查詢區域的布局

1.折疊收起過多搜索項

2.通過開關收起過多搜索項

3.通過分類搜索項目，用標簽跳轉區分

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

問題分析：

1、操作按鈕數量過多

2、操作按鈕樣式類似，無法體現功能優先級

改良目標：

1、精簡按鈕數量

2、根據按鈕功能地位，強化/弱化按鈕樣式體現層級關系

改良方法：

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

2、弱化次要按鈕

四、具體案例

問題分析：

1、表頭與關鍵數據列固定列表內數據行的橫向、縱向數據過多

2、無法自定義展示的數據列

改良目標：

1、將重要的數據項固定，梳理過多的數據項

2、增加自定義展示數據列的功能

改良方法：

1、選擇使用表頭固定及關鍵數據列固定，方便對應查看數據標題及內容

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

四、具體案例

1.表頭與關鍵數據列固定

列表內數據行的橫向、縱向數據過多時，選擇使用表頭固定及關鍵數據列固定，方便對應查看數據標題及內容。

2.分類篩選字段展示

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

5.自定義篩選字段展示

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

五、實際操作

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

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

方案一

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

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

數據展示區域    使用分類展示+表頭與關鍵數據列固定

優點    首頁展示查詢內容最少，頁面簡潔，可以展示更多查詢數據，頁面和彈框內將類似字段折疊展示，內容緊            湊，操作便捷

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

方案二

查詢條件區域    通過篩選開關，選擇是否展示篩選字段 字段選項鋪開展示

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

數據展示區域    使用自定義顯示表格字段

優點    首頁可以直接編輯字段，展示內容最多，直觀方便，可操作性強，交互路徑短

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

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

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

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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