1、交互设计1—搜索交互设计
| 目的:提高用户找到目标商品的效率,从而提升购买转化率 |
|---|
| 场景:明确商品购买(主要)、逛 |
| 指标:使用频率、搜索步长、快速重搜率、满意度 |
a、明显的搜索位置
b、解析搜索需求
| 识别词根 |
|---|
| 预测内容 |
| 历史记录 |
| 分类提升 |
| 自动容错 |
c、搜索内容展示——筛选框
无结果
预加载(占位符)与懒加载
交互设计2——电商导航设计
| 目的 | 更容易让用户找到自己想要的商品或信息。并且平台可以进行 |
|---|---|
| 场景 | 明确商品购买、逛(主要) |
| 指标 | 非搜索的购买步长、非搜索的购买时长、跳出率、购买转化率 |
a、淘宝首页导航
淘宝
京东
拼多多
小红书
| 淘宝 | 首页没有集中的分类模板,按照产品功能和附属子产品模块进行划分 |
|---|---|
| 京东 | 首页采用了与淘宝相同的布局格式,顶部都设置了搜索入口,与淘宝不同的是京东标签栏设置了商品分类入口 |
| 拼多多 | 采用了与京东相同的分类功能模块,使用了顶部文字侧滑导航 |
| 小红书 | 以社区为强运营导向的电商产品,他们的导航布局与常规设计有根本的差异性 |
常见APP导航设计
| 导航分类 | 优点 | 缺点 |
|---|---|---|
| Tab导航——顶部、底部 | 展示更多标签下的内容、方便切换; | tab的上下层的顶部导航哦那个一造成五擦欧总,占用一定的页面高度 |
| 舵式导航 | 突出重要且频繁的操作入口 | 如若隐藏的功能过多,增加了用户的操作流程 |
| 抽屉式 | 隐藏非主要功能、非核心功能的干扰,节省界面的利用空间 | 由于可发现性低,流量低,用户的学习成本高 |
| 分段式 | 易发现,适用于高频率切换的界面,方便操作 | 样式守旧,灵活性不高,数量受限 |
| 列表式 | 延展性高可以增加信息,方便分组分类简单清晰易于理解 | 只能通过排序来区分个入口的重要;列表过多难以查找。切换困难 |
| 陈列式 | 应变能力高;组织方式常见,直观容易理解 | 逻辑性较弱,偏向于无强目的的流量;主功能和分类以及内容之间的切换较为麻烦 |
| 宫格式 | 方便理解,容易查找,较强的延展性 | 哦那个胡无法直接看到想要选择服务的内容部分,需要点击后才能看到具体的界面内容,会增加用户的选择压力 |
| 点聚式 | 占据空间小,会吸引点击 | 影响悬浮按钮下得到内容,用户理解上会出现一定的障碍 |
顶部、底部导航
舵式导航抽屉式导航
分段式导航
列表式导航
陈列式导航
宫格式导航
点聚式导航
交互知识推荐
| 尼尔森十大交互原则 |
|---|
| Material Design http://material.io/ |
| IOS人机界面指南 |
| About Face 3/4 交互设计精髓 |