交互设计——搜索控件的分析

用户头像
上海/UI设计师/7年前/2029浏览
交互设计——搜索控件的分析
用户头像
UIada

今天聊聊关于搜索控件的那些事

Hello,又来和大家一起讨论交互设计,今天聊聊关于搜索控件。

作为一名交互设计师,分析过的控件、界面元素千千万。但基础的元素还是那几个,其中搜索控件最为常见。

 

搜索控件的使用场较多,可以帮助用户精准定位,用户对于它的感知度很高。当用户看到放大镜icon时,潜意识里就知道“这里是搜索功能”,可以通过它来检索想要的事物。

 

正是因为搜索控件的常见性,才让我们有了分析它的动力。本文很多分析角度,是从APP设计出发。

 

 

主要从以下角度分析搜索控件:

1.使用场景

2.控件样式

3.触发条件

4.搜索过程

5.搜索结果

6.退出

 

一.使用场景

基于过去的经验,总结用户在什么样的情况下,使用搜索框做什么。

 

常见例子:

1.新闻类应用,用户根据关键词,检索想看的内容;

2.社交类应用,用户输入关键信息,用于检索特定的人或信息

3.电商类应用,用户输入关键词,快速找到想要的商品

4.地图类应用,用户输入信息,用于快速定位

 

从上面举例中,很容易发现搜索栏的主要功能是:快速定位到想要的内容。

 

 

 

二.控件样式

控件样式常见有以下几种:

icon、icon+搜索框、icon+搜索框+关键词提示等。

三.触发条件——怎样进入搜索功能

用户通过什么样的操作,才能进入到搜索功能呢?

常见的触发方式有:点击搜索icon或者搜索框。

 

 

四.搜索过程

搜索过程又分为:输入前、输入、输入后三个步骤。

1.输入前

考虑是否应该给用户提示:可以在什么地方输入怎样的信息或关键词?是否默认的推荐一些内容?是否放搜索记录?

 



 


 

 

2.正在输入

是否使用智能搜索(输入前面的信息,后面智能推荐、补充,邮箱输入经常用到)?输入有误怎么操作?输入的关键词太长,怎么显示?


 

 

 

 

 

3.输入后

输入结束后,什么样的操作触发APP去搜索?

常见的做法是将触发的按钮放在键盘上,让用户在输入完关键词后,就近点击搜索按钮、触发搜索功能,又节约界面的位置。(这里直接复用上面案例,并非排版错误)

 

五.搜索结果

搜索结果怎么展示?列表逐条文字的形式、图片+文字的形式?搜索结果是否需要分组或分类展示?是否需要筛选功能?是初次搜索还是第N次搜索?(N>1)。

 

六.退出搜索——该如何退出

常见的退出操作方式有三种:点击取消文字,退出搜索页面,另一种是点击返回按钮,返回到上一页、退出搜索页;最后一种,通过点击界面的关闭按钮,关闭搜索界面。


 


今天的搜索控件的讨论告一段落,希望和大家一起进步。

 

 

 

 

 

 

 

 

 

 


10
举报
|
29
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】体育icon
3D卡通UI界面图标可爱插画免扣素
拟物风质感写实UI卡片合集源文件
智能家居中心 简约 UI设计组件库
【新年UI图标】旅行icon
【新年UI图标】影音icon
盲盒APP UI设计
新拟态风格 UI设计组件库
3D渐变流体抽象矢量UI背景图
户外旅行飞机情侣假日出行
新能源APP应用UIKit
【新年UI图标】积分icon
钱包ui模板
【新年UI图标】珠宝icon
手表表盘UI系列
科技医疗透明柜UI界面设计
UI 登录界面设计模板包
UI界面 组件
Security Camera UI kit
高级感金属拟物 UI设计组件库
【新年UI图标】礼物/活动icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI通用设计素材1
你可能喜欢
大家都在看
登录注册