以手机淘宝为例，看原型图易缺失的交互场景
source link: http://www.uisdc.com/interaction-scene-about-prototype
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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」
「交互设计中易被忽视的细节」
【优设网 原创文章 投稿邮箱：[email protected]】
================明星栏目推荐================
优优教程网： UiiiUiii.com是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。
设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com
Recommend
-
74
好的工具是利器，坏的工具是钝器。每个人都可以找得到最适合他的利器，我希望你也一样。 如果你是 UX/UI 设计师，你一定会听说过无数个交互原型工具。设计资讯网站总是不厌其烦地介绍新的交互原型工具，标题通常是： 《这款最新的设计工具，也许你该上手试试》 《...
-
55
AxureUX - AxureUX 是一个交互原型模板及元件库分享平台 - NEXT
-
28
原型图的交互说明是针对原型图内容元素的解释文字，可以从宏观和微观两个层面展开分析，本文结合图例主要说明宏观角度输出交互说明应该注意的地方。 原型图的交互说明是针对原型图内容元素的解释文字。 清晰准确的交互说明能够起到以下作用： 减少交互设计师与产品...
-
58
一小时上手，分分钟作出高大上交互动效。Win&Mac双平台，支持Sketch和AdobeXD无插件导入… 孔子曰：「工欲善其事必先利其器！交互...
-
55
上一篇文章从宽泛的宏观角度说明了输出原型图交互说明需要注意的事项，本篇结合图例尝试从微观角度通过分类，阐述输出移动端原型图交互说明应该注意的细节。 页面元素交互说明的具体内容与之前提到的交互自查表的内容有关联。我们可以从以下几大类展开分析：模式与...
-
60
无论是产品经理还是交互设计师，产品的原型（框架图）都是经常要绘制的，原型图目前有手绘草图、有使用类似Axure之类的设计工具绘制出线框架图。还有的交互设计师用Sketch画出高保真的原型，到底我们要画到什么程度的原型才算好呢？...
-
6
大家用axure做移动端原型的时候，交互效果做的多吗？ 请问一下大家，大家用axure做原型的时候，交互效果做的多不多，本人做移动端的时候，做的很少，因为怕做了动效而没有标注全的话，开发迷惑！
-
3
汤姆猫：“汤姆猫”IP已植入AI交互产品功能原型中 ...
-
5
作为打工人，都了解发票业务吧！下面这篇文章是笔者整理分享的以淘宝为例谈谈发票系统如何提效的相关内容，大家一起往下看看吧！
-
9
互联网10年最受欢迎的7个交互原型软件 更新时间：2023-11-29 15:32:06 互联网发展轰轰烈烈，尤其是这 10 年互联网风起云涌，今天我们就来一起了解互联网 10 年最受欢迎的 7 个交互原型软件，分别是即时设计、Maze 、Marvel...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK