UED设计培训
美国上市UED设计培训机构

400-111-8989

热门课程

APP搜索如何利用交互设计?

  • 发布:达内ued编辑05
  • 来源:设计教程
  • 时间:2018-09-17 15:01

APP搜索如何利用交互设计?搜索结果页是指用户点击搜索后看到的搜索内容的聚合页面,是用户搜索的终极目标。一个好的产品设计一定是符合用户行为习惯和用户体验的。

APP搜索如何利用交互设计

一、搜索官方规范

Android(Google Material Design)

搜索操作应该至少包含以下4个动作要素:打开、输入、提交、展示。

下面的元素可以帮助提高搜索的体验:语音搜索;搜索历史;搜索词自动补充,且补充的结果是你的应用的数据库中的已有词汇。

iOS

苹果建议搜索框可以包含下面的三个元素:默认提示词、取消按钮、清空按钮。

一、苹果还给出了一些搜索栏在设计上的建议:

1. 如果有必要,可在搜索栏中提供一些提示和上下文(来帮助用户)。

比如输入框中的默认提示词,文案可以为:“搜索衣服 鞋 首饰”或者单纯的“搜索”两个字。在输入框的上面,也可以提供简明的一句话提示,如图所示:

2. 考虑在搜索栏下方提供快速入口和其他内容,以帮助用户更快找到结果。

例如iOS自带应用Safari,当你点击搜索栏的输入框时,应用就会展示你的书签,或者历史搜索,这样通过点击内容,有时候能免去输入的麻烦。

3. 在搜索栏的下面,可加入“分段选择控件”,以帮助用户缩小搜索的范围。

很多电商APP已经做了对搜索列表的筛选操作,如淘宝、天猫。

个人输出交互设计规范——搜索搜索栏获取用户键入的文本,用以作为搜索的关键字*。

A.初始状态时,键盘默认收起,搜索框左侧显示搜索按钮,输入框内可以显示占位符,用来描述控件的作用例如“搜索”)或者提醒用户是在哪里搜索;

B.点击搜索框后,文本框内显示光标定位(和引导文字),同时弹出键盘;

C.当输入文字后,引导文字消失,右边显示清空按钮;点击清空按钮,可以清除所有搜索栏中的内容。点击清空按钮不会退出搜索模式,只是清空内容;

D.完成输入后,光标及删除按钮消失,文本框处于不可输入状态,键盘收起。

二、搜索中间页,实际上除了满足产品运营需求以外,也是对用户潜在需求的挖掘和满足,也是产品可靠性的一种体现。

1.提示信息

提示信息时与该场景下能够实现的搜索功能相关的文案内容,常见样式为出现在搜索框中的纯文案,当然也可以在整个页面中展示。

2.分类搜索功能

搜索前就能够选择搜索范围的功能,在一些平台内容较多需要细分的App中较为常见。

3.搜索历史

搜索历史前端可以作为一种快速搜索的功能入口,呈现用户的搜索历史,一来可以方便用户下次点击的时候对于重复性的内容实现快速搜索,二来也便于收集用户习惯。

注:在设计搜索历史是需要注意以下几点,包括用户行为特征和产品策略的内容:

位置:搜索内容位置会处于页面顶部,紧贴搜索框展示,此时用户的视觉焦点在这里,更容易注意到;

显示样式:一般搜索词会作为一个完整的搜索内容呈现,而且会涉及到点击操作,因此不适合折行或者截断显示,以便让用户一目了然自己搜索了哪些词,一般的处理方式固定行数显示,以btn样式显示,强化可点击的操作意象;

编辑操作:并不是所有用户对于占据页面大部分高度的内容都是认同或需要的,编辑删除操作必不可少;

数量限制:最后还要限制一下露出数量,前面由于限制了显示策略,因此要根据用户潜在的搜索内容文案数量确认当前的露出数量;露出内容少则对用户的了意义不大,因为旧的内容很容易被新的搜索词替换掉,露出较多则会占据页面太多高度,考虑到此时页面会调起输入法,因此也不适合露出太多内容。

4.热门搜索词

突出当前平台主推的内容,或者高频的搜索词都可以放置于此。搜索热词一般是产品需求驱动出现的,可以让页面内容更加丰满,同时也露出当前的主推内容,提升内容的曝光率和点击量。

*注:不同于搜索历史的时,这部分内容是产品后台配置的,不是用户行为产生的内容,因此就存在用户接受度的问题。

在数量上需要更加斟酌。根据产品内容属性的不同,纯文案的搜索词在10(或7±2)个左右能够让用户一目了然,较为复杂样式的搜索词则更要简化数量,让用户能够抓住信息的重点。

放置过多搜索词,不仅会稀释用户的注意力,更多的情况是被调起的输入法遮挡,反而降低曝光率。

5.其他用户推荐信息与广告运营位

搜索过程页操作便捷化与简洁化,产品功能人性化与智能化

此时用户主要的注意力焦点在输入过程中,因此目前的过程是操作功能为主,策略也需要以更好地满足用户的操作功能为导向。输入过程的简洁、便捷、快速是影响用户体验的关键痛点。

输入搜索词的过程中光标已经定位于此,搜索框处于激活状态,此时页面元素一般包括:

搜索框(一般带着提示词);

清除按钮(一般以X的形式出现,点击可清空当前全部搜索词,同时点击后可返回搜索中间页或跳出搜索功能);

三、搜索btn(iOS端键盘有搜索按键,但Android的输入法可能不是原生的,无法判断当前的状态,因此从通用性角度考虑,适宜放置一个显著的搜索btn)。

1.搜索联想词

根据用户逐渐输入内容而不断呈现的包含输入关键词的列表。搜索联想词能够帮助用户的输入信息起到纠正、提醒、引导的作用,给用户提供便捷搜索的作用。

2.分类匹配

用户在搜索的过程中可以实时切换分类范围,同时显示固定范围下的搜索数量,不断自己的搜索范围能够让最终的搜索结果更加准确。

从产品策略来看,搜索结果页也是一个信息内容聚合的关键页面,除了呈现必要的目标信息,往往还可以在其中放置更多偏向于产品策略的相关信息。

1.多tab分类展示

当内容品类过多时,可以分tab标签或者分card显示对应的内容。

2.功能操作

与搜索结果的属性相关,主要用于缩短操作路径,大部分的用户可以快速完成相关功能操作。

如:视频类内容,则会露出播放或下载缓存btn;如:电商类产品则可出现购买或者加入购物车btn,用户可直接点击加入购物车,缩短整个流程的操作次数。

3.轻量化搜索结果页

这种搜索结果页样式使用户单维度的搜索,例如电话簿或者地区选择等,搜索的结果和用户的搜索目标都是单一维度且高度一致的。

这种设计方式主要源自于以下几种原因:

用户端:用户在这种搜索场景下的目标比较单一和固定,同时对于结果有一定的预期,因此可直接显示搜索结果;

产品端:搜索范围固定,内容固定,目标内容在很长一段时间内不会变化,可以实现快速搜索,避免了请求服务器的加载loading过程中耗费的时间;

来源:垚焱  人人都是产品经理

感谢大家阅读由UED职场分享的“APP搜索如何利用交互设计?”希望对大家有所帮助,想了解更多培训信息请关注UED培训机构官网

免责声明:以上内容仅作为信息传播,文中部分信息来源于互联网,仅供阅读参考。

预约申请免费试听课

上一篇:UED设计师之设计构图形式美法则
下一篇:Ued设计师必看书单分享

设计中如何提高对比度?

Ued设计师的LOGO设计小技巧

为什么插画在UI设计中很重要?

ued培训课程内容是什么?UED设计是什么?

选择城市和中心
贵州省

广西省

海南省