UI中的核心页面——搜索页

无论是UI设计师还是交互设计师，我们都必须清楚“核心”页面如何设计，哪些细节是要注意的。一般来说，核心页面主要有搜索页、加载页、弹框、表单页、缺省页、引导页以及启动页。

搜索页被称为APP中的检索系统，也就是说我们不仅能看到搜索按钮，还会跳转到搜索中间页，通过搜索中间页的历史记录、推荐以及关键词联想，我们可以找到需要的内容，所以检索系统是一个很庞大的体系。今天我们就来谈谈搜索。

我认为评价搜索体验的三个维度分别是：高效度、精确度、友好度 。下面我们就细化来看一看。

搜索过程和反馈

1.点击搜索框

2.输入搜索信息  

3.执行搜索命令

搜索设计及体验

1.产品+设计，搜索入口—搜索中间页—搜索过程—搜索结果页（搜索功能）；

2.用户体验，开始搜索—查看历史推荐—输入—查看搜索结果（搜索操作）。

搜索入口形式

1.标签栏搜索：把一个独立的tab作为搜索入口，这一整页，为搜索功能的拓展提供了很大空间，可以做各种尝试，适合将搜索作为重要流量的入口的App，如新浪微博。新浪微博的尝试更加丰富，包括分类、话题以及不同类型的推荐，运营的空间大，搜索功能高频且重要。

2. 隐藏式搜索框（偶尔使用），功能既不高频也不重要。这种形式的搜索功能是被弱化的，入口在主页上不可见，有的折叠在其它入口中，有的可通过手势唤起。这类产品的搜索功能是相对低频的功能。典型的一种是下拉出现搜索框，平时搜索入口隐藏，不占用空间，需要时又可下拉迅速呼出。

3. 导航栏搜索框（经常使用），是应用最广泛的一种形式，大多居于页面顶部，较为醒目。有些App在滑动页面时，还会将搜索框置顶显示，便于用户随时使用。

搜索框内一般有预设文案，提示用户可搜索的关键词类型。目前越来越多的App（尤其是电商类）把搜索框作为运营的入口，放一些热词、活动、新品/新功能等关键信息。

4. 导航栏搜索icon（经常使用），搜索icon应用广泛，位置一般在页面右上角。相对搜索框，搜索icon的引导性稍差，运营空间也有限，但可以节约导航栏空间，适合于将搜索作为辅助功能的场景。一般应用于知识社群类产品（如人人都是产品经理、简书）。

搜索中间页

分为：

1.搜索栏（3种）

2.辅助区

（1）历史记录（列表式—复杂关键词、标签式—比较简单）

考虑到搜索页的空间、有效性，通常需要控制历史记录的数目和时间范围。

分为：列表式—扩展性强（可以展示更详细的信息，也可支持收藏、删除等操作）。标签式—节约空间适合简短的关键词搜索；删除方式，长按标签删除（少见淘宝）、列表轻滑删除、一键清空。

  

（2）分类搜索（根据业务决定位置）当App中涉及到的业务类型较多时，会出现多种类别的搜索结果，有多种视觉表现形式。为了满足部分目的性用户，快速、准确地找到自己预期的结果，通常会设置分类搜索

  

（3）热搜（位置由运营决定）热搜的作用类似于搜索框中的预设文案，起引导作用。

热搜的位置是产品运营决定的（位置靠下会被键盘遮盖）常见的热搜主要有4种：大数据排名（用户搜索关键字数据）；个性化推荐（猜你喜欢）：根据用户资料、轨迹等信息；做智能化推荐；平台运营内容（为某些品类引流）；商业推广（商业广告）。

（4）搜索框分类

适合那些需求明确的用户。如在58同城中，搜索二手房还是租房，用户是特别明确的。在搜索框中默认限定类别，可能会导致搜索结果偏差。为了照顾到更多用户，大多数App提供了“全部”类别，并默认搜索“全部”类别下的结果。

（5）辅助区分类

将分类置于辅助区，不仅可以展示出分类下的内容，而且通过holo的滑动手势操作可以让分类的交互更加流畅。

3. 键盘区

Tips：把主推功能放在上面，清除icon和“取消”不能有冲突  

  

        

 今日头条（左图）          淘宝（右图）             

 展示联想的关键词           补全信息精准搜索

 最基础的联想方式           提供更为高效的关键信息

 

搜索结果页交互细节

1.智能纠错联想（引导用户、提高效率）

2.结果分类（根据内容类别需要）

3.默认排序（据一些因素做综合排序，如用户偏好、点击量、转化率、平台运营、商业推广等。排序策略通常比较复杂，不同的平台会考虑不同因素、赋予不同的权重。）

4.保留搜索词（方便修改，认知匹配）

5.排序筛选（不同行业不同筛选维度。时间、距离、热度、价格、销量等）

6.无结果或少结果（纠错联想、运营推荐）

结果页筛选的交互样式

   展开式        下拉式   侧拉式（精确筛选）  快捷标签辅助