龙喵专栏 /设计 /内容

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

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

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

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

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

搜索过程和反馈

1. 点击搜索框
UI中的核心页面——搜索页

2.输入搜索信息
UI中的核心页面——搜索页

3. 执行搜索命令
UI中的核心页面——搜索页

搜索设计及体验

1.产品+设计,搜索入口—搜索中间页—搜索过程—搜索结果页(搜索功能);

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

搜索入口形式

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

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

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

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

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

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

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

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

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

搜索中间页

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

分为:

1.   搜索栏(3种)

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

2.辅助区

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

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

分为:列表式—扩展性强(可以展示更详细的信息,也可支持收藏、删除等操作)。

标签式—节约空间适合简短的关键词搜索;

删除方式,长按标签删除(少见淘宝)、列表轻滑删除、一键清空。

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

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

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

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

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

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

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

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

(4)搜索框分类

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

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

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

(5)辅助区分类

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

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

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

3. 键盘区

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

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

今日头条(左图)
示联想的关键词
最基础的联想方式 

淘宝(右图)
补全信息精准搜索
提供更为高效的关键

搜索结果页交互细节

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

2.结果分类(根据内容类别需要)

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

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

4.保留搜索词(方便修改,认知匹配)

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

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

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

结果页筛选的交互样式

展开式 、下拉式  、侧拉式(精确筛选)、快捷标签辅助。

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

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/149.html

[ 美图设计导航 ]:http://ailongmiao.com/design/

评论

继续阅读

  选择打赏方式

打赏

打赏