设计规范之全局搜索

       搜索框一种常见的交互控件，用于精准提取海量的信息中的准确内容。看似可有可无却至关重要，可以快速定位到用户所需的信息。搜索框几乎存在所有的网站和APP中，尤其是海量内容为导向的产品之中，例如音乐库、电商类网站，做好搜索（框）尤其重要。

        做搜索（框）前，你要考虑以下几方面：

    1、要不要做。

        目标对象很难找到时

• 对象很多时；如从Mockplus的图标库中需要找到某个图标时。

• 可能的目标对象不在同一个位置时；如在磁盘中查找某类型文件时。

• 数据很难找到时；如在一篇长文本中搜索某个字符串时。

        需要查找特定的内容时；

       我们在淘宝中搜索匹配某种特征的商品时。

        需要的结果不能在5秒找到时

         2、放在哪里。

       如果搜索对于你的应用或网站来说是重要的功能，那么搜索框必须放在显眼的位置，让用户一眼就能找到。

        研究发现，搜索框放置的最佳位置是你网站上每个页面的左上角或右上角，用户可以使用常见的F形扫描模式轻松找到它理  想情况下，搜索框应该完美匹配网站的整体设计，并在用户需要时轻松展现。Android、iOS等主要以居中为主。

          3、数据量。

         当然这个主要是服务端同学需要考虑的，作为设计我们遇见大数据量，交互上需要考虑前端请求服务端数据并显示的时间差处理。

           4、权限控制。

          系统中会划分多种角色，搜索框要根据角色定义进行数据筛查，避免越界展示。

           5、模糊查询、精确查询。

以下是搜索（框）的交互情况：

1.搜索一般状态

搜索一般状态通常指默认状态、获取焦点、输入中、失去焦点4种状态，只需要把示例图和说明列示出来，就很容易理解了。

• 默认状态：输入框提示语为：请输入客户姓名/编号。

• 获取焦点：获取输入光标，提示语不消失。

• 输入中：①输入中，实时显示联想结果，匹配的词汇高亮显示；②鼠标悬浮结果列表时，样式有变化；③点击列表结果，在新窗口打开相应客户全景视图。

• 失去焦点：保留输入的内容。

2.搜索异常状态

本案例中，搜索的异常状态会分为两种情形，其中一种是搜索不到客户，即搜索无匹配的结果，这时需要增加相应的提示，例如“没有找到相关客户”；另外一种是客户经理输入非法字符，如“#@￥%……&*（）”这些，系统是不支持的，这时可以采用输入非法字符不展示或者用错误提示“请输入中文字符或数字”的方式来规避。

但是，再进一步思考，这两种异常情形可以合并简化处理，因为客户经理的目标是搜索到相应的客户，而不是完成表单输入，他输入的内容不会保存到数据库，所以不需要强制输入有效字符，我们可以把两种情形都归结为他的输入“没有找到相关的客户”。

统一处理方法为：输入内容匹配不到结果，或者输入非法字符，统一醒目提示“没有找到相关的客户”。

3.其他限制条件

（1）数据权限

 

（2）匹配结果限制

          当搜索匹配结果太多时，例如输入大姓“张”可能匹配到几百个姓张的客户，如果全部列出来则需要搜索结果列表出现滚动条，且影响搜索效率，所以限制最多返回10条匹配结果。

（3）限制“Enter”键搜索、点击图标搜索

由于是精准搜索，需要从匹配结果中进行选择，而不是根据关键词匹配到一个搜索结果页，所以限制了使用键盘“Enter”键和点击图标搜索。