移动应用从搜索栏到结果页交互流程京东案例

需求分析-京东案例

场景模拟&＃xff1a;漫画家赛尾田在创作原画期间弄断了一根自动铅&＃xff0c;少年JUMP一直在催稿&＃xff0c;赛尾田只能在家通过电商应用app在线选购&＃xff0c;他一直想试试德国的1、施什么楼品牌自动铅&＃xff08;商品品牌要求&＃xff09;&＃xff0c;预算是2、500元以内&＃xff08;价格范围要求&＃xff09;&＃xff0c;最好3、明天就能送到&＃xff08;物流配送时间要求&＃xff09;&＃xff0c;现在他开启了京东app&＃xff0c;如何4、快速的锁定&＃xff08;用户目标明确&＃xff09;他所需自动铅列表&＃xff1f;

1.首页操作

点击一级搜索栏&＃xff08;全局搜索&＃xff09; 用户使用app时间有限&＃xff0c;购买目明 确&＃xff0c;直接点击搜索栏。

2. 模态视图过渡页

关键字模糊及预想功能

在此处输入系统会自动预想出一部分基于数据分析的推荐系统

通过热搜标签能反映出赛尾田最近在研究相机、电视和饮品。

搜索历史

显示了赛尾田之前使用京东快速查找过的商品&＃xff08;其实他最后一次在京东买的是海贼王女帝的抱枕&＃xff09;-要支持用户删除搜索历史功能

3. 使用模态视图的意义

模态框:是让用户只有在完成当前的任务或关闭一个信息或页面之后&＃xff0c;才 能去做其它的事情。操作列表、警告和动作视图都提供了模态框。当屏幕上 出现模态框时&＃xff0c;用户必须通过点击按钮或是其它特殊方式才能退出。例如在 。模态框可以占据整个屏幕、 整个上级视图(比如气泡弹出框)、或者屏幕的一部分。模态框通常有 “完 成” 和 “取消” 按钮来退出视图。

4.为什么使用模态视图---新浪

舵式导航发布功能使用模态视图原理

舵式导航是指在首页标签栏中放置“发布按钮” &＃xff0c;用户从任意一级页面点击“发布”后都是以模态视图形式浮于当前页面上。关闭后浮层消失&＃xff0c;显示用户操作前所在主页。如以常规视图点击发布进入子页面&＃xff0c;点击左上角“返回”按钮无法判断应该回到哪个一级页面。

电商类点击搜索栏浮出模态视图过渡原理

1、首先点击搜索栏后直接从当前首页呼出键盘、热门标签和历史搜索会造成视觉混乱&＃xff0c;严重影响用户体验。

2、点击电商类应用一级搜索栏后进入模态视图过渡页面&＃xff0c;意义在于模态视图链接后台数据库&＃xff0c;根据用户输入关键字进行全站到品类的筛选&＃xff0c;模态视图与常规页面的区别在于常规页面用户操作后实施保存&＃xff0c;模态视图需要用户点击“取消”“关闭”活“完成”等执行按钮后开始执行操作。

3、通过模态视图用户点击执行按钮后统一执行操作可以有效降低服务器响应成本。

5.响应结果页

点击返回应直接回到京东首页&＃xff0c;无法返回至临时视图

一级、二级范围栏&＃xff1a;通常伴随搜索结果页出现&＃xff0c;帮助用户在搜索结果页呈现的大量数据中进一步实现品类到独立产品集合的筛选

此时未解决需求&＃xff1a;

1、施什么楼品牌自动铅&＃xff08;商品品牌要求&＃xff09;

2、500元以内&＃xff08;价格范围要求&＃xff09;

3、明天就能送到&＃xff08;物流配送时间要求&＃xff09;

6. 条件筛选页面

通过二级范围栏&＃xff0c;根据商品所在分类显示给予相关特定筛选条件及选择物流。

需求解决进度&＃xff1a;

1、施什么楼品牌自动铅&＃xff08;商品品牌要求&＃xff09;

2、500元以内&＃xff08;价格范围要求&＃xff09;

3、明天就能送到&＃xff08;物流配送时间要求&＃xff09;

一级范围栏提供价格升降序排序功能&＃xff0c;也可点击筛选进入商品条件筛选临时页面&＃xff0c;在价格区间输入价格数值。

7.最终搜索结果页

用户需求最终解决效果

1、施什么楼品牌自动铅&＃xff08;商品品牌要求&＃xff09;

2、500元以内&＃xff08;价格范围要求&＃xff09;

3、明天就能送到&＃xff08;物流配送时间要求&＃xff09;

4、快速的锁定&＃xff08;用户目标明确&＃xff09;

8. 搜索功能逻辑分析-总结

常见的搜索引擎分三类&＃xff1a;门户搜索引擎、垂直搜索引擎和本地搜索。

移动应用主要根据垂直搜索和本地搜索将搜索入口分为三级&＃xff1a;一级搜索&＃xff08;面向全站的全局搜索&＃xff09;、二级搜索&＃xff08;面向用户个人数据的本地搜索&＃xff09;和三级搜索&＃xff08;基于多维度考虑的弱化式全局搜索&＃xff0c;响应率低、引导用户注意其他内容等等&＃xff09;电商类应用的搜索功能逻辑主要是用户在使用搜索时分步解决需求的过程&＃xff0c;以京东为例&＃xff0c;分别要考虑到模态视图过渡页&＃xff08;全站到品类的筛选过程&＃xff09;、搜索结果页面范围栏的使用&＃xff08;通过范围栏的条件筛选缩小商品列表范围&＃xff09;和最终结果页。

来源&＃xff1a;千锋UI设计