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

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

相关推荐

  • 02案例:用户体验与结婚教练

    02 案例:用户体验与结婚教练来自信息读书00:0017:04用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为...

    微信热点 2018-03-27
  • 令人惊叹的移动交互设计欣赏

    dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟! Dash Dash Jeff Broderick   Rally Inte…

    2016-05-24
  • 今天的扁平化设计中,值得注意的4个要点

    扁平化设计本身在不断进化过程中,会在逐步根据需求和实际状况而进化,事实上它也正是不停地向着更实用、更有用的方向前进着。极简主义是形式和功能的完美结合。内容为王,而色彩服务于内容。文本已经成为一种重要的可视化设计元素。你总不希望用户被你的字体诱导分心了吧?

    2017-05-08
  • 如何从零开始临摹大神的作品?

    在我们探讨设计原理的核心之前,我们需要明确构成视觉语言的5种元素。线段在动态设计中是点的集合。线段生成了运动,吸引我们的眼睛去跟随它的运动轨迹。线段可以是直线、曲线、虚线或粗细变化的线,它是构成形状的基本元素。

    2017-05-22
  • 案例分析:怎样避免交互设计中的「刻板印象 」

    刻板印象有好有坏。在合适的场景、时间、项目中,去最大化它的积极作用,尽量避免它的消极作用,才能真正的平衡设计、工作,甚至生活。

    2017-08-04
  • 浅谈APP交互设计师是一个什么样的职位

    这篇文章算是一篇对APP交互设计师重新阐述的一篇常识文章。希望对哪些想要从事APP交互设计师的小伙伴们有一定的基础认识。
    今天跟大家从下面4个方面来聊聊APP交互设计师到底是一个什么样的职位。

    2017-05-29
  • [译]可用性之外:使用劝导式模式设计(上)

    你可能已经有一个很好的产品。你做了可用性设计,你也拥有了几个经常使用你产品的核心客户。然而,这在激烈的竞争中往往并不突出。你的产品具有高跳出率,只有很少的用户会回到应用中,用户比你期望中更快地抛弃你的产品,一般情况下,用户不会深入所有你的产品所提供的体验。

    2017-05-27
  • 网页设计中的极简风格—无的力量

    作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

    2017-05-25
  • 3分钟带你掌握11个最常用的交互控件

    本文作者将来总结一下各个控件的特点,方便各位更好的理解这些控件。(更具体的说明请参考:iOS和Android规范解析——警告框(Alerts)对比)(更具体的说明请参考:iOS和Android规范解析——简易菜单、简易对话框和弹出框 )(更具体的说明请参考: iOS和Android规范解析——简易菜单、简易对话框和弹出框 )
    (更具体的说明请参考: iOS和Android规范解析——底部浮层(上))
    (更具体的说明请参考: iOS和Android规范解析——底部浮层(下))(更具体的说明请参考: iOS和Android规范解析——确认弹框、全屏弹框和模态视图)

    2017-04-30
  • 商业模式驱动视频互动设计:手淘的视频就该这么玩儿

    当商业目标和设计碰撞在一起之后,商业模式使设计的目标更明确,而设计能为商业模式带来更好的体验。

    2017-05-16