中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

搜索看似簡單，但是細節很多，早前寫過一篇關于搜索方面的文章《交互設計基本功：如何設計一個好用的搜索框？》，幫大家普及了搜索方面的知識，但是不同設備、不同場景下搜索功能的設計千差萬別，做好搜索的交互設計，還需要大量的案例實踐。本次帶來了一個后臺全局搜索的設計案例，幫助大家打開思路。

導讀目錄：

• Chapter 1 需求背景
• Chapter 2 需求分析
• Chapter 3 交互設計：搜索一般狀態、搜索異常狀態、其他限制條件

Chapter 1 需求背景

一個類CRM的后臺管理系統，客戶經理可以通過客戶列表檢索名下的客戶，現在增加客戶全景視圖（客戶詳情），點擊列表上的客戶名稱即可打開客戶全景視圖。新的需求是，增加一個全局搜索的功能，通過搜索客戶名稱或者客戶編號即可直達客戶全景視圖。

拿到這個需求之后，是不是覺得很簡單？不就是在頂部顯眼的位置增加一個搜索框嘛，只需要1分鐘就可以搞定，連設計圖都準備好了（見下圖）。然而，我們都知道，搜索功能并非這么簡單，換個說法就是，這樣的設計稿并沒有把所有細節考慮周全，是不可能通過設計評審的。

Chapter 2 需求分析

既然沒有那么簡單，我們拿到需求的第一步還是需要進行需求分析，需求分析的過程和方法見仁見智，這個例子可以用一種自問自答的方法進行需求分析：

1. 這個全局搜索的功能是否值得做？——值得，為直達單客戶全景視圖增加了入口，且節省中間先查看列表的步驟，該功能使用頻次高。
2. 搜索功能放在哪個位置比較合適？——全局搜索，一般放在右上角比較顯眼的位置（個別網站在頂部中央），遵循web網站的搜索習慣。
3. 搜索的數據量大不大？——據了解，每一名客戶經理名下平均有1000名客戶，數據量不大。（這涉及到從數據庫提取數據的效率）。
4. 是否有搜索權限控制？——有數據權限控制，客戶經理只能搜索到自己名下的客戶，不能搜索到其他客戶經理的客戶。
5. 搜索是模糊匹配還是精準匹配？——精準匹配，客戶經理輸入客戶姓名/編號進行匹配，編號是唯一標識，用于區分同名客戶，精確匹配，同時也意味著可以放棄展示模糊搜索結果頁，從搜索匹配列表中選擇結果。
6. 大致的交互流程是怎么樣的？——輸入客戶姓名/編號→選中客戶→跳轉到全景視圖。

Chapter 3 交互設計

1.搜索一般狀態

搜索一般狀態通常指默認狀態、獲取焦點、輸入中、失去焦點4種狀態，只需要把示例圖和說明列示出來，就很容易理解了。

• 默認狀態：輸入框提示語為：請輸入客戶姓名/編號。
• 獲取焦點：獲取輸入光標，提示語不消失。
• 輸入中：①輸入中，實時顯示聯想結果，匹配的詞匯高亮顯示；②鼠標懸浮結果列表時，樣式有變化；③點擊列表結果，在新窗口打開相應客戶全景視圖。
• 失去焦點：保留輸入的內容。

2.搜索異常狀態

本案例中，搜索的異常狀態會分為兩種情形，其中一種是搜索不到客戶，即搜索無匹配的結果，這時需要增加相應的提示，例如“沒有找到相關客戶”；另外一種是客戶經理輸入非法字符，如“#@￥%……&*（）”這些，系統是不支持的，這時可以采用輸入非法字符不展示或者用錯誤提示“請輸入中文字符或數字”的方式來規避。

但是，再進一步思考，這兩種異常情形可以合并簡化處理，因為客戶經理的目標是搜索到相應的客戶，而不是完成表單輸入，他輸入的內容不會保存到數據庫，所以不需要強制輸入有效字符，我們可以把兩種情形都歸結為他的輸入“沒有找到相關的客戶”。

統一處理方法為：輸入內容匹配不到結果，或者輸入非法字符，統一醒目提示“沒有找到相關的客戶”。

3.其他限制條件

（1）數據權限

根據需求分析得知，客戶經理只能搜索到自己名下的客戶，不能搜索到其他客戶經理的客戶，交互說明中要增加相應的注明文字。

（2）匹配結果限制

當搜索匹配結果太多時，例如輸入大姓“張”可能匹配到幾百個姓張的客戶，如果全部列出來則需要搜索結果列表出現滾動條，且影響搜索效率，所以限制最多返回10條匹配結果。

（3）限制“Enter”鍵搜索、點擊圖標搜索

由于是精準搜索，需要從匹配結果中進行選擇，而不是根據關鍵詞匹配到一個搜索結果頁，所以限制了使用鍵盤“Enter”鍵和點擊圖標搜索。

以上，就是一個完整的后臺全局搜索的設計案例，它是基于后臺產品的實際場景提供的設計解決方案，不適用于所有場景，僅提供一些設計思路供參考。

作者：夜雨，高級交互設計師，專注金融行業-智能投顧方向，大部分時間在復雜后臺系統中遨游。簡書：夜雨y；微信公眾號：iueuxd。

本文由 @夜雨 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自unsplash，基于CC0協議