写给新手的控件设计指南（1）：UI栏

以搜索icon的形式出现在页面右/左上角也是很常见的一种，这种形式对应的场景是：搜索功能必不可少，但优先级没那么高，或页面元素过多，以小icon的形式出现节省空间。如支付宝-财富页面和淘宝-微淘页面，搜索都是以icon的形式放在页面右上角。

4）隐藏式搜索框/icon

搜索默认隐藏，通过交互动作触发。比如微信小程序页面，搜索是默认隐藏的，下拉才会出现。由于触发动作过于隐蔽，导致很多用户都不知道该搜索功能，因为该页面本身是通过微信消息页面下拉出现，用户的普遍认知是页面顶部已显示完全。

既然用户找不到，微信为什么还这么做呢？

我们来分析一下小程序这个页面的使用场景，这个页面包含两部分内容，一个是「最近使用」，一个是「我的小程序」，这两部分相对来说数量没那么多，用户可以通过浏览快速找到目标，浏览的操作成本低于搜索操作成本，搜索的使用频率较低，所以将搜索默认隐藏。

再来看从微信-发现页点击进入的「小程序」页，搜索框默认在顶部出现，这是因为，这个页面承载的内容更多，用户更多的场景是搜索新的小程序。‍

苹果自带的app很多都采用了这种方式，如设置，备忘录，都是通过下拉操作唤出搜索框，大家可以自己体验一下。我个人认为这种隐藏体验并不好，隐藏可以有，但是需要明确告知用户如何唤出，像设置和备忘录以及微信小程序的唤出方式做的过于隐蔽，导致用户找不到搜索在哪。

5）特殊形式

还有一些特殊的形式，如苹果系统左滑进入搜索页，下拉激活搜索框

‍（2）搜索中

1）点击搜索入口

点击搜索入口后，分两种情况，跳转新页面或仍留在当前页面。

跳转新页面是为了承载更多信息，前面有说到搜索是运营的一个机会点，所以在这个页面除了展示与搜索相关的信息外，还会有运营信息的漏出，这个新页面的构成大部分情况如下：

‍

搜索框被激活，键盘自动弹出，这个时候要注意，键盘不要遮盖住重要信息。还有一种情况是，进入新页面后搜索框未被激活，键盘也不会弹出，需要再次点击搜索框才会激活键盘，这样的好处是给运营留下更多空间，如抖音之前便是采用这种方式：

‍

但这样搜索流程就多了一步，体验不顺畅。在抖音最新更新的版本中，已经放弃了这种方式，想来以抖音现在的实力，已不需要通过在搜索页面漏出更多内容提高内容的浏览量了。

留在当前页面完成搜索的情况，一般适用于搜索内容量小，且搜索范围为当前页面的内容。比如电话-通讯录页面的搜索。

2）搜索又分为即时搜索和点击搜索按钮进行搜索，即时搜索指用户每输入一个字，系统就会进行一次搜索，非常快捷，搜索效率高，但对程序的计算能力要求也高。

输入搜索信息完毕后点击搜索按钮进行搜索，这种方式虽效率不高，但对技术的要求也相对较低。

（3）搜索后 搜索结果

1）多数据——结果分类呈现/筛选

当搜索结果数据过多时，为了方便用户快速准确的找到目标，可以对搜索结果进行分类或提供筛选功能。如微信，淘宝的搜索结果页都是通过顶部tab对结果进行分类，同时淘宝还提供了筛选功能。

2）少数据——智能推荐其他相关内容

当搜索到的数据过少时，可以通过智能推荐其他相关内容的方式引导用户扩大搜索范围，进而得到目标结果。

3）无数据——智能推荐其他相关内容

无数据和少数据一样，通过智能推荐其他相关内容的方式引导用户扩大搜索范围，进而得到目标结果。

比如自如搜索房源时，当没有符合搜索条件的房源时，系统会自动推荐其他与搜索条件相关的房源供用户选择，提升了用户体验，同时提高了成交率。

4）错误数据——智能纠错

当用户输入的搜索信息错误时，为其提供正确的词供其选择，或直接展示正确的搜索结果。如淘宝和微信都是采取的后者的方式：

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!