抖店动销，抖店体验分提升。抖店任何业务可添加微信：ad07668
本文将介绍拍立淘结果页从上线至今出现的体验问题及解决方案。前言拍立淘结果页从上线至今，经历了许多年的迭代，始终保留了一个抠图的功能——用户可以在图片上自主选择要搜索的图片区域功能经过这么多年使用，由于当初的实现没有那么精细，
本文将介绍拍立淘结果页从上线至今出现的体验问题及解决方案。
前言
拍立淘结果页从上线至今，经历了许多年的迭代，始终保留了一个抠图的功能——用户可以在图片上自主选择要搜索的图片区域
功能经过这么多年使用，由于当初的实现没有那么精细，导致一直存在一些体验上的问题，用户重点反馈的内容包含以下几个部分：
- 抠图不易操作
- 找不到抠图框
- 小物件搜索不出来
- ….
基于以上这些问题，我们进行了一一解决，下面进入正题。
交互体验
?找不到框
用户在进入结果页后，会在背景处显示一整张原图，由于底部存在结果面板，导致图片显示区域被压缩，所以会有一部分图片被隐藏，对于不了解功能的用户来说，不知道图片是可以滑动的，假如主体框刚好就在隐藏的图片区域里，用户就没法框选主体了。
?抠图不易操作
原先的抠图组件存在一些bug
- 触摸冲突
- 主动抠图后主体圆点缺失
- 主体点击无效
?交互优化
基于以上问题，我们对抠图交互进行了重构，具体改动如下
- 图片等比例缩放，整张图可以完整显示于面板上方
- 基础能力重构实现
- 新增图片缩放能力
- 新增图片移动能力
抠图组件包含以下几种基础操作
- 边框四个角调整
- 边框四个边调整
- 边框整体位置调整
- 主体圆点选中
原先的抠图组件对于触摸的逻辑缺少封装设计，所有逻辑都糅合在一个类中，代码不易维护。重构后的组件对于抠图操作进行了抽象，基于手指的动作，抽象了以下接口
/**
* 前置判断
*/
fun judge(fingerArray: SparseArray<FingerPos>, selectedObjectRegion: RegionPart, totalObjects: List<RegionPart>, selfDefinedObject: RegionPart): Boolean
/**
* 手指松开
*/
fun onTouchRelease(selectedObjectRegion: RegionPart, totalObjects: List<RegionPart>, selfDefinedObject: RegionPart)
/**
* move 回调
*/
fun onTouchEvent(fingerArray: SparseArray<FingerPos>, selectedObjectRegion: RegionPart, totalObjects: List<RegionPart>, selfDefinedObject: RegionPart): Boolean基于组件提供的操作，进行了以下封装
后续若有新的操作，继承拓展即可
对于触摸操作，我们定义了以下优先级，优先级从高到低排列
- 主体点击
- 图片缩放
- 四角调整
- 四边调整
- 框体位置调整
- 图片移动
- 触摸流程如下
- 图片缩放
由于图片整体缩放到了结果面板上方，如果用户想要搜一些特别小的物件，例如模特手上的手表，那么必然不好操作，因此我们增加了图片缩放的功能，图片缩放功能完全还原iOS系统相册的实现。
下面介绍一下缩放的实现。
观察 iOS系统相册的缩放能力，可以发现，当双指缩放图片时，图片会基于双指中间那一点进行缩放，保证双指中间的内容是不变的。
并且当手指距离不变，围绕一个点旋转时，手指中间的那个像素是始终不变的。
- 旋转
- 平移
基于以上观察，我们可以得出基本的实现方案
- 双指按下时，计算出当前双指中间的像素点在图片上的绝对坐标
- 双指移动时，基于手指移动的距离，放大或者缩小图片
- 双指移动时，保证按下时的中间像素点始终保持在手指中间
override fun onTouchEvent(fingerArray: SparseArray<FingerPos>, selectedObjectRegion: RegionPart, totalObjects: List<RegionPart>,selfDefinedObject : RegionPart): Boolean {
targetView ?: return false
if (fingerArray.size() < 2) {
scale = -1f
return true
}
val pos1 = fingerArray[0] ?: return true
val pos2 = fingerArray[1] ?: return true
if (scale < 0) {
//刚触发双指缩放，记录当前scale 值
scale = targetView!!.getImageView().scaleX
...
//记录手指中间的像素坐标
centerPosition = getCenterPosition(pos1, pos2)
}
//计算当前双指距离
val currentDistance = sqrt((sqr(pos1.currX - pos2.currX) + sqr(pos1.currY - pos2.currY)).toDouble()).toFloat()
//计算上一次触摸时的双指距离
val lastDistance = sqrt((sqr(pos1.lastX - pos2.lastX) + sqr(pos1.lastY - pos2.lastY)).toDouble()).toFloat()
//计算第一次进入双指缩放时的手指距离
val startDistance = sqrt((sqr(pos1.startX - pos2.startX) + sqr(pos1.startY - pos2.startY)).toDouble()).toFloat()
val delta = (currentDistance - lastDistance) / startDistance
zoomScale += delta
zoomScale = maxDelta.coerceAtMost(minDelta.coerceAtLeast(zoomScale))
val currScale = scale * zoomScale
targetView!!.setImageScale(currScale)
//计算缩放后的手指中间像素坐标
val currPos = getCenterPosition(pos1, pos2)
//根据坐标和 scale，移动图片，保证图片在正确的位置
moveImage((currPos[0] - centerPosition!![0]) * currScale, (currPos[1] - centerPosition!![1]) * currScale, false)
return true
}抠图流程
?流程梳理
- 结果页流程
可以看到，在发送请求时，会先缩放一次图片(长边最长640,短边最长320)，然后服务端处理完成后，同时将图片保存到存储服务上，生成链接，连同内容数据打包回传给端上，然后端上交付给前端进行渲染。
- 用户抠图流程
?现有问题
分析以上流程就会发现，客户端初始化请求时将图片进行了缩小，上传到服务端以后会得到一个图片链接，后续前端的所有请求都会基于这个链接。因此，如果用户想要搜索一个模特手上的手表，对于用户来说，手表看着挺大的，但是如果是缩放后的图，手表那一点大小，基本是不可识别的。
可以看到，此时搜索后的结果和图片内容是完全无关的。
?优化
我们对抠图后的流程做了调整，当用户想要搜索的图片区域做了调整后，端上将图片从原始图片(未缩放)中切割出来，重新走一遍图片上传流程，基于切割后的图进行商品召回，增大 query 图像的尺寸，提高准确度。
可以看到效果十分明显，优化后的搜索结果和商品相关度大幅度上涨。
总结
对于老代码，我们要勇于去优化重构，勿以点小而不为（手动滑稽~）目前整体改动已经跟随 10.15.0 版本上线，并且增加了 ab，相信数据上会有较大的提升~
作者:薛贤俊（隽弦）
来源:微信公众号:大淘宝技术
出处:https://mp.weixin.qq.com/s/MCJXK9aq6QC3NMTfTamrFQ
抖店动销，抖店体验分提升。抖店任何业务可添加微信：ad07668
如若转载，请注明出处：https://www.zg8899.cn/48417.html
相关推荐
-
好运测试未来30天，我会遇见惊喜吗？！事业运测试免费？
奈喜塔罗路还是由你来走，而我负责为你驱除迷雾。其实生活总是充满惊喜的，就看我们愿不愿意去承认，也要看我们到底有没有发现惊喜的心态和眼睛。一个人的心态往往会决定很多事情，至少心态可以决定或者影响自己的心情。有些惊喜是非常重要的存在，它能给我们枯燥的生活带来乐趣。现在就跟着奈喜老师一起来占卜，看看近期你可以收获什么意外之喜？塔罗牌占卜将帮助你找寻内在的能量，聆听内心的声音，寻找心灵的
-
500亿大市场，火锅底料沸腾出圈！川好美高利润惊艳市场！辣圈火锅食材超市加盟费？
已经立冬了，一口煮沸的汤底，包裹着各类食材，热腾腾的火锅最能取悦人心。2000多年前，古人就开始食用猪、牛、羊、鸡、鱼等种类的火锅。随着烹调技术进一步发展，各式火锅相继登场。市场突破200亿火锅底料市场百家争鸣随着我国经济快速发展，居民生活水平的不断提升，对餐饮的需求日益增长，使火锅餐饮行业蓬勃发展，而作为制作火锅核心材料的“火锅底料”行业也呈现出快速发展态势。市
-
7.6%！B股指数突然暴跌，见底了？！创业板必须两年经验才可以开通新股吗？
大盘全天低开后冲高回落，三大指数表现分化，沪指跌超1％，创业板指涨近1％，宁德时代等创业板权重股表现强势。盘面上，赛道股迎来反弹，热泵、TOPCON电池等方向领涨，日出东方、万和电气、盾安环境、大元泵业等涨停，但大多数赛道股午后冲高回落。旅游酒店股大涨，华天酒店涨停，众信旅游涨超8％。板块方面，酒店
-
带嘤TD界的扛把子，有炮塔有弹夹的TD，全都是科技与狠活啊！？
各位车长大家好啊！听说最近总有人拿GSOR1008与新的九级金币车TL-7相比较，说TL-7是1008的美系九级版，1008直呼委屈：那台蟹车也配跟我比吗？今天小编就来替1008正名，来聊聊这台带嘤TD界的扛把子~WG给它的历史描述是——一个搭载了摇摆式炮塔的自行反坦克炮项目。此项目于1960年代早期开
-
还有一个多月过年，这些“必需品”将涨价，大家提前做好打算！还有多久过年2022倒计时？
不得不说，时间过得非常的快，还有一个多月的时间就要到新的一年了，很快就会迎来我国的传统节日春节，这也是一年当中最为重要的一个节日，很多老百姓非常重视这个节日的存在。毕竟不管是在多远的外出打工人员，到了过年的时候，基本上都会选择回家与家人团聚一堂。如今，很多家庭都在进行年货的筹备，不过，不少人发现，有很多商品的价格出现了明显的增长，年关将至，这六件商品的价格将会出现一定程度的增长，为了能够避免在购买
-
搬家过程中需要注意的一些事项，选对搬家方法省时省！择日搬家吉日查询？
导语:搬家一定要提前做好搬家规划，选择一个良辰吉日非常重要，但是要想让搬家非常顺利，也有很多需要注意的事情。对于第一次搬家的小伙伴来说，很多事情都会忽略，而且搬家这件事本身就非常繁琐，因此需要提前了解搬家的注意事项。搬家老师傅总结了这4点，建议提前收藏，这样才能提高搬家效率，节省时间的同时减小
-
楠竹加工促增收_敲开群众“致富门”！家庭办厂致富信息怎么写？
红网时刻新闻10月28日讯（通讯员李臻）“以前，我们自己把竹子拉出去卖需要很高的运费，卖的价钱也不高，现在加工点就建在竹山的旁边，直接帮助我们节约了运输成本，省下不少钱。”正在加工点操作分割楠竹的郭大叔开心地说到。这是位于桂东产业开发区内众意竹木开发有限公司
-
个体工商户入驻注册流程！开网开店货源？
个体工商户入驻注册流程仔细讲解：一、注册具体流程：步骤一：名称核准登记准备好以上材料之后，需要在一窗通上进行网报，把所有信息提交到一窗通上，然后等待结果就可以了。步骤二：提交公司注册资料到工商局领取公司设立登记的各种表格，包括设立登记申请表、股东(发起人)名单、董事经理监理情况、法人代表登记表、指定代表或委托代理
-
鱼跃医疗“舒服圈”突围！鱼跃官网旗舰店？
独立稀缺穿透质量比体量更重要!作者：陈晚邻编辑：李静风品：沈禾车一来源：铑财——铑财研究院大神腾讯，又有大动作！9月19日晚，鱼跃医疗公告称，子公司江苏讯捷医疗科技有限公司（下称“讯捷医疗”）拟引进战投深圳市社创向善科技有限合伙企业（有限合伙）（下称“腾讯”）。拟以2.91亿元认购讯捷医疗19.5%股份，腾讯成为第二大股东。要知道，主营医疗急救的迅捷医疗上半年净亏2584.4万元，净资产仅1.16
-
华融信托7.32%股权将被司法拍卖，起拍价4.93亿元！淘宝网网络司法拍卖平台？
华融信托7.32%股权将被司法拍卖，起拍价为4.93亿元。9月26日，澎湃新闻（记者注意到阿里司法拍卖平台显示，浙江省杭州市中级人民法院将于10月24日10时至10月25日10时（延时除外）在杭州市中级人民法院淘宝网司法拍卖网络平台上，对珠海市华策集团有限公司持有的华融国际信托有限责任公司（下称华融