1、交互设计1—搜索交互设计

目的:提高用户找到目标商品的效率,从而提升购买转化率
场景:明确商品购买(主要)、逛
指标:使用频率、搜索步长、快速重搜率、满意度

电商产品案例分析2

a、明显的搜索位置

b、解析搜索需求

识别词根
预测内容
历史记录
分类提升
自动容错

c、搜索内容展示——筛选框

电商产品案例分析2
无结果
电商产品案例分析2
预加载(占位符)与懒加载
电商产品案例分析2

交互设计2——电商导航设计

目的 更容易让用户找到自己想要的商品或信息。并且平台可以进行
场景 明确商品购买、逛(主要)
指标 非搜索的购买步长、非搜索的购买时长、跳出率、购买转化率

a、淘宝首页导航

淘宝
电商产品案例分析2
京东
电商产品案例分析2
拼多多
电商产品案例分析2
小红书
电商产品案例分析2

淘宝 首页没有集中的分类模板,按照产品功能和附属子产品模块进行划分
京东 首页采用了与淘宝相同的布局格式,顶部都设置了搜索入口,与淘宝不同的是京东标签栏设置了商品分类入口
拼多多 采用了与京东相同的分类功能模块,使用了顶部文字侧滑导航
小红书 以社区为强运营导向的电商产品,他们的导航布局与常规设计有根本的差异性

常见APP导航设计

导航分类 优点 缺点
Tab导航——顶部、底部 展示更多标签下的内容、方便切换; tab的上下层的顶部导航哦那个一造成五擦欧总,占用一定的页面高度
舵式导航 突出重要且频繁的操作入口 如若隐藏的功能过多,增加了用户的操作流程
抽屉式 隐藏非主要功能、非核心功能的干扰,节省界面的利用空间 由于可发现性低,流量低,用户的学习成本高
分段式 易发现,适用于高频率切换的界面,方便操作 样式守旧,灵活性不高,数量受限
列表式 延展性高可以增加信息,方便分组分类简单清晰易于理解 只能通过排序来区分个入口的重要;列表过多难以查找。切换困难
陈列式 应变能力高;组织方式常见,直观容易理解 逻辑性较弱,偏向于无强目的的流量;主功能和分类以及内容之间的切换较为麻烦
宫格式 方便理解,容易查找,较强的延展性 哦那个胡无法直接看到想要选择服务的内容部分,需要点击后才能看到具体的界面内容,会增加用户的选择压力
点聚式 占据空间小,会吸引点击 影响悬浮按钮下得到内容,用户理解上会出现一定的障碍

顶部、底部导航
电商产品案例分析2
舵式导航
电商产品案例分析2抽屉式导航
电商产品案例分析2
分段式导航
电商产品案例分析2
列表式导航
电商产品案例分析2
陈列式导航
电商产品案例分析2
宫格式导航
电商产品案例分析2
点聚式导航
电商产品案例分析2
交互知识推荐

尼尔森十大交互原则
Material Design http://material.io/
IOS人机界面指南
About Face 3/4 交互设计精髓

相关文章: