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

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

相关推荐

  • 骁龙835助力VR交互新体验,自由就要6DOF!

    今天,Pico 在北京举办新品发布会上,发布了旗下全球首款同时实现头部和手部 6DOF 追踪及交互的量产 VR 一体机 Pico Neo——搭载Qualcomm® 骁龙™835 移动 VR 平台,带来更加自由、沉浸的 VR 交互体验。Pico Neo 是 Pico 旗下最新一代 VR 一体机产品,搭载了Qualcomm骁龙835移动VR平台,采用一体式 ID 设计,更轻更透气的全包布材料,配备 3K 高清显示屏,4GB 高速 RAM,6...

    2018-01-30
  • QQ空间是怎么设计直播功能的?

    什么?空间也做直播了!没错,在当今直播的热潮下,国内外的直播产品大都是基于陌生人的关系链,且内容结构与视觉效果同质化严重。如何让用户更好的分享生活?如何为用户提供差异化的内容消费?如何给用户更多新鲜趣味的互动玩法?这是我们做直播希望解决的问题。
    Qzone依托自身优势,另辟蹊径地发掘基于好友关系链的直播场景。与此同时,我们不断探索更符合空间用户直播的设计形态,发掘与竞品的差异点,寻找直播的下一个突破口,通过系统化的设计,为用户提供非一般的直播体验。

    2016-07-27
  • 腾讯大神教你写出合格的产品交互文案

    做产品的时间越久,越发现文案的重要性;今天我们来聊聊交互文案。 文案最初是桌子的指代,后来演变成一种职业;现在说起文案一般指以文字表现创意策略。交互中当然会涉及文案,虽说在整个前端展示中并不算突出,但…

    2016-01-13
  • 几乎是最完美的用户体验模型—CUBI

    【导读】我们都希望能做出引人注目的创意项目——能解决业务问题,同时通过有意义、有价值的体验吸引用户的项目。然而,紧缩的预算以及紧张的时间安排,都给创造真正新颖的设计、确定设计流程中的遗漏,以及充分考虑…

    交互设计 2015-04-24
  • 从交互设计的角度,看iOS11的5点不足

    提前下载了开发者版本的iOS11体验了大半个月,除了很耗电、手机很烫以外,道长打算从交互设计的角度去浅析一下个人对iOS11部分交互以及可改进的地方,为了避免篇幅过长,所以只挑几点出来讲。

    2017-08-04
  • 设计和建立设计体系规范的小贴士

    毫无疑问,我被问到最多的就是关于设计规范体系的建立。所以在过去几年里,最多思考的就是如何设计、建立完整的设计体系,像Marvel, Bantam 和 Modulz这样的产品,下面我想分享一些我学到的方法。

    2017-05-05
  • 应用中的游戏化设计

    作者:_Ammy   游戏借着其互动性、反馈性、挑战性、快速成长性等特点,拥有着让玩家长期专注于其中的神奇力量。而若将游戏的这些特点引入到一般的产品设计上,也可能会产生意想不到的效果,这就是游戏化。游戏化的…

    交互专题 2017-08-07
  • 交互设计师的60日计划之第十天

    今天一直处于多线程高并发的状态,所以大脑目前已经死机了。一上午的用户访谈,今天的用户很专业,所以得到很多有用的信息;下午和产品经理过wiki优化的事情,确定大致的方向,然后开了一下午周会;回来和视觉一起…

    交互专题 2015-08-20
  • 通过导航加强用户体验的3个原则

    文章介绍了导航设计中的3个原则,将以下原则付诸实践,或许会使用户体验大大Max!

    2017-05-06
  • 《破茧成蝶》读书笔记——修炼用户体验设计师的技能

    【文章摘要】本篇为我的部分读书笔记,所以看到什么,觉得还比较有用就顺便写了下来,内容并不一定适合所有人。 作者:iamzhaowr 完整读书笔记请去我的简书页面阅读 关于《破茧成蝶》 推荐京东购买:链接 本书由资…

    2016-04-08