恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
以手机淘宝为例,看原型图易缺失的交互场景
0.0°
2017-11-14 原创文章 经验/观点 举报 2987 20 14 5

手机淘宝搜索栏出现历史搜索旨在减少用户文本输入,可以快速查看以前搜索的商品。搜索发现通过用户的操作行为智能推荐用户感兴趣的商品,增加用户的访问深度和购物兴趣。


目前手机淘宝的搜索初始界面iOS 和Android版对历史搜索的交互采取两种不同的形式。iOS版通过用户长按历史搜索的关键词,出现叉号,用户点击叉号进行删除关键词,删除过程中无需用户进行二次确认。Android版用户通过长按,出现弹框,需要进行二次确认。

Image title

Image title

iOS版优点:相对于Android版,iOS 用户在删除过程中可以做到所见即所得,操作简单。


iOS版缺点:1.用户在长按出现删除icon,但是用户如果不删除关键词,则无法恢复正常状态。2.叉号icon过小,有时候可能会出现点不中的情况。


Android版缺点:1.通过长按删除关键词,出现弹框,从长按到出现弹框手指操作跳跃过大。2.弹框仅仅起到了防错功能,无法起到二次确认删除某个关键词的作用(弹框提示语没有标明删除的是哪个关键词)。


手机淘宝中的历史搜索,一个看似简单的交互流程,可能蕴含着很多的交互场景,但如果交互设计师/产品经理首次设计类似的需求交互时可能会遗漏很多交互场景。


我以iOS版手机淘宝历史搜索为例。通过展示的原型图来讨论易遗漏的交互场景,希望通过这篇文章可以让读者得到收获,并总结出以后如何避免遗漏交互细节与定义。


大纲如下:

1.历史搜索原型图

2.易遗漏的交互场景

3.总结


1.历史搜索原型图

历史搜索原型图展示分三个小场景:

1.1历史搜索的关键词全部删除。

2.历史搜索的关键词单个删除。

3.搜索发现的关键词处理。


1.1历史搜索的关键词全部删除

Image title

原型图上面的交互定义有以下:

1.极限值的定义:确定历史搜索和搜索发现最多关键词为10个,且取最新的10个关键词

2.全部删除出现二次确认的警示框

3.全部删除后,搜索发现位置移动定义


1.2历史搜索的关键词单个删除

Image title

原型图上面的交互定义有以下:

1.对单击关键词操作的交互说明

2.长按之后删除,其他关键词的移动定义


1.3搜索发现的关键词处理

Image title

原型图上面的交互定义有以下:

1.对隐藏和开启操作的定义

2.搜索发现的关键词手势定义


以上原型图貌似一看没什么问题。其实遗漏了很多交互场景,大家可以找出存在哪些遗漏吗?


2.易遗漏的交互场景


2.1用户长按关键词,关键词出现叉号icon。如果单击其他关键词,如何交互?缺乏定义说明。如果不做说明,可能会出现以下两种情况。

Image title2.2用户长按关键词,关键词出现叉号icon。如果用户长按其他关键词,之前关键词叉号icon是否还存在?如果不做说明,可能会出现以下两种情况。

Image title


2.3用户长按关键词,关键词出现叉号icon。如果单击其他关键词,进入下级界面,返回界面为哪个状态界面?如果不做说明,可能会出现以下三种情况。

Image title


2.4如果历史搜索关键词挨着删除,最后全部删完?历史搜索字段是否保留,如果保留是文案说明历史搜索关键词为空?这里又有两种情况。

Image title


以上四种遗漏的交互场景,在设计过程中都必须要定义说明,不然到了开发阶段,就会出现各种问题。


3.总结

为什么易出现如此多遗漏。原因有以下情况:

1.因为在历史搜索中存在长按手势,那么在整个交互界面时,其他可交互元素也要考虑长按操作

2.出口与入口的忽略

3.仅仅考虑最大极限情况,却没有考虑最小极限


通过一个小小的历史搜索就遗漏这么多问题。如果涉及到大的产品需求,想全面不遗漏交互场景,需要考虑以下情况:

1.明确所有场景和使用人群

2.交互逻辑无缺失

3.异常场景不遗漏

4.异常状态有说明

5.手势操作不遗漏

6.关键字段有规则定义

7.极限情况有定义

8.是否涉及到多种角色和权限

9.刷新、加载、转场说明


更新:2017-11-14

收藏

20人已收藏

UEDC

欢迎大家关注交流

  • 7

    作品

  • 301

    粉丝

  • 19

    关注

  • APP设计中,6组常见组件的区别与用法
  • 我在ITUX做交互设计的经验感悟
  • 附源文件| 如何制作统一可复用iOS/MD元件库
  • 案例讲解 | 移动端的长表单应该如何设计?

    猜你喜欢

      2017-11-14 原创文章 经验/观点 举报 2987 20 14 5

      以手机淘宝为例,看原型图易缺失的交互场景

      0.0°

      你确定要举报以手机淘宝为例,看原型图易缺失的交互场景

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年11月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      14
      20
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录