search bar

一、设计原则

1. 确定搜索框样式

• 填充色：通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色，方便用户查找。
• 线框：多用于干净简洁的背景页面
• 投影：常用于风格简洁轻量的风格页面，同时搜索功能级别较高的场景。
• 透明度：常用于背景色复杂的场景，目的是为不破坏背景页面的整体效果，在视觉上更和谐。
• 无外框：用于风格简洁的大留白的页面。

2. 是否需要圆角

• 直角
• 圆角矩形：通常以4~8px最为常用
• 胶囊：适用于活泼，年轻，具有亲和力的品牌风格。
• 异形

二、设计tips

1.搜索框的设计应当和整个网站的设计风格保持一致，同时在视觉上要略显突出，便于用户发觉它的存在。
2.如果网站的内容足够多，搜索框在设计上显著程度应该越高，如果搜索功能对于你的网站至关重要，那么你应该采用较大的对比度，确保输入框和按钮从背景中脱颖而出。

3.使用最简略直观的放大镜图标，细节越少，越容易识别。

4.一个可以输入27个字符的输入框是比较合适的，基本能够满足90％的查询条件。

三、作用

当应用内包含大量的信息的时候，用户通过搜索快速地定位到特定的内容。

方式：扫一扫、文字输入、语音检索、图片、视频

四、使用说明

• 1.对于搜索的规范，iOS 官方给出的是隐藏搜索栏，用户通过下拉展示搜索栏。Android是通过搜索图标控件引导用户点击出现搜索栏。
• 2.搜索栏中可置入语音，通过语音进行搜索。

五、分类

1.

1）独立的搜索tab

将搜索作为一个独立tab的场景,搜索对用户和产品本身都非常重要，用户使用搜索功能非常频繁，用户能通过tab栏快捷定位到搜索，如app store，ios的照片，微博。

2）搜索框

①最常见的入口形式即在页面顶部以搜索框形式出现，这种形式又分为以下几种交互方式：

②搜索框随着上滑操作消失，反向滑动到顶部时出现，如微信，ios的备忘录都是这种方式。

③上滑时搜索框收起变为搜索icon，反向滑动时搜索框出现，如支付宝，百度网盘

④搜框冻结在页面顶部，方便用户快捷使用，多用于内容，电商类产品，搜索功能很重要。如淘宝，京东，小红书，知乎，美团都是这种方式。

3）搜索icon

以搜索icon的形式出现在页面右/左上角也是很常见的一种

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

4）隐藏式搜索框/icon

搜索默认隐藏，通过交互动作触发。①比如微信小程序页面，由于用常用的小程序呈现，浏览的操作成本低于搜索操作成本。②从微信-发现页点击进入的「小程序」页，搜索框默认在顶部出现，这是因为，这个页面承载的内容更多，用户更多的场景是搜索新的小程序。‍

体验感较差。