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

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

相关推荐

  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • 这场UED界的大会堪比最近最火爆的雄安楼市

    2011年,阿里UED委员会的几位童鞋一商量,想给互联网的UED们一个搭交流学习的场子,就发起了第一届UCAN。如今,UCAN已经从阿里的UED的大团建发展成了国内最热门的设计大会之一。2017届的UCAN今天在阿里巴巴西溪园区召开,小编在现场看到走道都坐着人,800多人的场子,10000人报名,快赶上抢房摇号的阵仗了。报名的观众不但专业齐全,视觉、交互、用研、工程师、产品经理一个不拉,而且来自的公司阵容也很强大,腾讯、百度、亚马逊……...

    2018-02-01
  • 这是我见过的最差的作品集【UXRen译#171】

    作者:Alex Cornell (Facebook设计师)   |  翻译:冬柏,校审:天蛙   这是我见过的最差的作品集。我总结了一下这些糟糕的作品集,都存在以下几点问题:   1、作品集只有一个段落 在你的个人网站我没有看到任何作品…

    交互专题 2017-08-07
  • 聊下你不知道的交互设计:交互设计师在项目中是如何工作的

    从事交互设计3年了,经常有朋友和同事问我“到交互到底干嘛的?”答曰:“根据用户的需求及场景,用简单、愉悦的方式完成任务”。但他们似乎还是不太明白。

    2017-05-25
  • 交互设计师的60日计划第二十天

    这几天觉得好像没有什么可写了,会不会是姨妈所以脑子比较迟钝→_→昨天初中闺蜜突然叫我十一去秦皇岛玩,因为找不到人陪我去台湾所以果断的买好了所有票订好了房和她们去玩玩,晚上同事为了犒劳自己这几天准备晋级的…

    交互专题 2015-08-20
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28
  • 交互设计师的60日计划之第一天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • Axure RP 8 入门手册 – 第1章(上)

    第一篇基础第1章准备工作与注意事项第1节下载安装Axure RP8第2节原型相关的文件类型第3节文件自动备份与找回第4节功能区域的视图设置前言【网络稿】2015年夏天,经济形势日趋恶劣,小楼所在的公司业务规模大幅缩减,无奈之下,公司决定各部门进行裁员。小楼断然决定主动申请辞职。2015年8月17日,AxureRP8.0Beta版首次发布的日子,小楼提着收拾好的杂物袋,站在公司的门外,看着公司的LOGO墙,旁边是一年前来到公司的大学生苏苏...

    2018-03-29
  • 以开发的视角做设计:开发眼中的设计稿长什么样?

    面对完全不一样的媒介,设计师们会有不一样的目标,也会使用不一样的手法进行设计。 比如说一名 UI 设计师与平面设计师的最大区别,大概就是在于 UI 设计师能够以开发的视角来做设计。

    2017-05-01