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

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

文章目录[隐藏]

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

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

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

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

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

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

iOS版优点:相对于Android版,iOS 用户在删除过程中可以快速删除,长按之后,手指立刻可以触控到叉号icon进行删除。

iOS版缺点

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

Android版缺点

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

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

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

一.  历史搜索原型图

目前手机淘宝的搜索初始界面iOS 和Android版对历史搜索的交互采取两种不同的形式。

iOS版通过用户长按历史搜索的关键词,出现叉号,用户点击叉号进行删除关键词。删除过程中无需用户进行二次确认。

二. iOS版历史搜索原型图

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

  • 历史搜索的关键词全部删除。
  • 历史搜索的关键词单个删除。
  • 搜索发现的关键词处理。

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

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

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

  • 极限值的定义:确定历史搜索和搜索发现最多关键词为10个。
  • 删除出现二次确认的警示框。
  • 全部删除后,搜索发现位置移动定义。

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

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

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

  • 对单击关键词操作的交互说明。
  • 长按之后删除,其他关键词的移动定义。

搜索发现的关键词处理

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

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

  • 对隐藏和开启操作的定义。
  • 搜索发现的关键词手势定义。

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

三. 遗漏的交互场景

用户长按关键词,关键词出现叉号icon

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

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

用户长按关键词,关键词出现叉号icon

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

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

用户长按关键词,关键词出现叉号icon

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

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

如果历史搜索关键词挨着删除,最后全部删完?

历史搜索字段是否保留,如果保留是文案说明历史搜索关键词为空?这里又有两种情况。

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

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

四. 总结

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

  • 因为在历史搜索中存在长按手势,那么在整个交互界面时,其他可交互元素也要考虑长按操作。
  • 出口与入口的忽略。
  • 仅仅考虑最大极限情况,却没有考虑最小极限。

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

  • 明确所有场景和使用人群。
  • 交互逻辑无缺失。
  • 异常场景不遗漏。
  • 异常状态有说明。
  • 手势操作不遗漏。
  • 关键字段有规则定义。
  • 极限情况有定义。
  • 是否涉及到多种角色和权限。
  • 刷新、加载、转场说明。

欢迎关注作者的微信公众号:「UEDC」

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

交互设计中易被忽视的细节」

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34320/

(0)
震天下震天下
上一篇 2017-09-29 12:55
下一篇 2017-10-11

相关推荐

  • 十种正确的可用性度量方法(上)

    现在大家在做产品、谈需求、讲体验时,都说不能拍脑门儿要用说数据说话。好,那问题来了,针对不同的问题我们要什么样子的数据来说话呢?这确实需要我们好好思考,下文将通过一些小栗子为大家做一个简单的梳理。

    2017-05-28
  • 交互设计初语言——我对交互设计的理解

    隔壁部门要我做一份关于交互设计科普的讲座,所以做了下ppt,现在放出来大家指点下。 PS:里面有几页用到了我曾经参加的来自BAT公司的老师的内容,如涉及侵权可删除。 因为都是图片,所以慎入哦,建议在wifi模式观…

    2016-08-01
  • 交互设计

    产品设计流程和方法产品设计4大原则交互设计及基本原理(简约4策略)交互设计的作用【未完,待续~~~】

    2018-01-31
  • 不要忽视色彩在手机APP设计中的作用

    在本文中,我们将讨论在APP中与色彩相关的重要知识点。 我们将涵盖传统的配色方案模式(单色,相似色,互补色),不严格基于任何一种模式的自定义色彩组合,同时我们还将学习如何为你的APP选择色彩与对比度来增强可用性。

    2017-05-08
  • 用户体验方向的复试炸药包

    喜大普奔,北师大终于出分数线了,虽然心理学部的院线还没有出来~但是过没过线,你心里应该没点Balance吗?对于没有参加提前复试的同学,对于接下来的复试,师兄在这里想灵魂拷问一番,准备好复试了吗?知道怎么准备吗?知道UX复试要考什么吗?别问我,我也不知道。但是作为去年参加过正常批复试而且成绩不低的老司机,我还是可以在这说两句的。(咳咳~全场都注意啦!)参加过去年提前复试的同学应该知道去年UX的复试变动很大,比之前两年灵活了很多,辅导机构...

    2018-03-07
  • 探讨:对话式交互会成为未来主流的交互方式吗?

    本文详细分析了对话式交互的优缺点和应用场景,适合产品经理、UI设计师和交互设计师来阅读。

    2017-05-07
  • 移动交互设计欣赏(GIF)

    今天为大家上一组动态的移动交互设计,好好欣赏哦!   更多讨论内容请关注:学堂群:156360020 | 微信号:Aioued | 新浪微博:艾欧交互学堂

    2014-11-20
  • 从用户视角看设计:分享我从用户测试里吸取的5个教训

    用户视角对于设计师来说,是需要学习的。

    2017-05-05
  • App收银台交互设计思考

    数十万互联网从业者的共同关注!作者:柒0。作者授权早读课转载。来源:简书编辑:Juvae最近完成了“app收银台设计重构”的需求(一期为“账户充值”),作为一个刚毕业的交互新人,踩了一些坑,总结了这次思考的过程与…

    2017-08-01
  • Axure画产品原型最新常用组件分享(一)

    画产品原型是产品经理必备的一项硬技能,一般使用axure进行制作,很多人可能都知道axure,但是怎么利用axure把产品原型画的又快又好并不是一件容易的事;原型要画的好,最重要的不是你掌握多复杂的功能,而是要制定好设计规范;下面我把移动产品原型制作中常见的一些元素按照一定的设计规范制作成组件分享给大家,你只要把相应的元件拖动到自己的工作界面,简单修改文字就可以使用了,这是第一个部分,包括以下内容:一. 手机外壳二. 空页面模板三. 常...

    2018-04-05