更智能的视觉验收提效方案

1. 支付宝体验科技沙龙 · 数金荟蒙娜丽莎 - 更智能的视觉走查提效方案演讲人：申姜（甘文鹏）

2. 自我介绍 Golang Android Java iOS TypeScript Sketch JavaScript Ruby Python 申姜（甘文鹏）一个来自【网商银行-移动渠道部】的，知识学杂了的，啥啥都会一点的，经常做一些“奇奇怪怪”小工具的开发工程师。

3.

4.

5. 目录背景方案推导基于图像算法的智能走查方案蒙娜丽莎的平台化建设未来展望

6. 一个小案例

7. 被设计师支配的恐惧有没有似曾相识的感觉？被设计师反复摩擦苦不苦？反复修改反复打包烦不烦？

8. 其实设计师也很苦

9. 其实设计师也很苦

10. 更深一层的原因统一性视觉还原度差的影响统一性不一致会影响用户养成的习惯认知品牌形象信息传达用户主观认知难度提升功能和美感被影响，造成难使用，产品粗劣的印象对信息层级，内容表意传达出现偏差，流程链路不清晰品牌受损操作学习成本高影响用户决策产品难用产生负面情绪流失用户

11. 冲突很严重，矛盾很尖锐灵魂拷问：就没有优雅一点、高效一点的解决方案吗？? ？

12. 开始探索新方案

13. 传统的走查方式是怎样的内部的走查方案 —— 手动叠图业内的解决方案 —— 他山石

14. 效能漏损到底在哪里？人力×1 反复标注时间>36h 反复沟通设计修改反复开发设计软件输出效率极低基于屏幕输出反复修改人力× 反复部署时间>24

15. 效能漏损到底在哪里？人力×1 反复标注时间>36h 反复沟通设计修改反复开发设计软件输出效率极低基于屏幕输出自动化标注？反复修改人力× 反复部署时间>24 自动化修改代码？

16. 基于图像算法的智能走查方案

17. 方案一：基于计算机视觉的“像素眼” —— 像素作差导出画板像素作差手机截图字体？色号？位置？大小？边距？走查报告

18. 方案二：基于DOM节点的像素级走查 parser to html DOM DIFF </> deploy to html 走查报告

19. 方案二：基于DOM节点的像素级走查挑战一：Sketch怎么转换成 HTML DOM ？ parser to html DOM DIFF </> deploy to html 走查报告

20. 方案二：基于DOM节点的像素级走查挑战一：Sketch怎么转换成 HTML DOM ？ parser to html DOM DIFF </> 走查报告 deploy to html 挑战二：DOM节点如何搜索匹配？

21. 视觉稿精准解析方案 - 基本原理 Sketch - Artboard Image - Layer MacOS - UIView ① 图层清洗 ② 属性转换 Web - DOM ③ 文本 - div；图片 - img; 生成HTML

22. 视觉稿精准解析方案 - 方案落地 Sketch 的插件机制我们的解析插件 —— bkcodego sketchtool 拉起插件，执行解析流程

23. 视觉稿精准解析方案 - 解析结果解析结果 - HTML 解析结果 - 图片、CSS

24. 视觉稿精准解析方案 -集群化服务云服务 MacMini 非标集群接受任务消息消息队列任务存储 sketchtool 拉起 bkcodego插件 Sketch Runtime 任务调度回调处理 sketch 文件下载画板遍历页面遍历元数据导出版本过滤图层遍历图层过滤属性转换结构导出任务回调 OpenApi - HTTP 非标机房

25. 基于OpenCV + MobileNetV2的节点匹配算法 - 基本原理 sketch转html 生成URL 无头浏览器渲染 dom 节点清洗、去重、合并、重建两个dom树遍历匹配代码部署生成URL 无头浏览器渲染 dom 节点清洗、去重、合并、重建对比节点样式生成报告

26. 基于OpenCV + MobileNetV2的节点匹配算法 - 基本原理 sketch转html 生成URL 无头浏览器渲染 dom 节点清洗、去重、合并、重建两个dom树遍历匹配代码部署生成URL 元数据获取无头浏览器渲染 dom 节点清洗、去重、合并、重建对比节点样式生成报告

27. 基于OpenCV + MobileNetV2的节点匹配算法 - 基本原理 sketch转html 生成URL 无头浏览器渲染 dom 节点清洗、去重、合并、重建两个dom树遍历匹配代码部署生成URL 元数据获取无头浏览器渲染 dom 节点清洗、去重、合并、重建 dom & box修正对比节点样式生成报告

28. 基于OpenCV + MobileNetV2的节点匹配算法 - 基本原理 sketch转html 生成URL 无头浏览器渲染 dom 节点清洗、去重、合并、重建两个dom树遍历匹配代码部署生成URL 元数据获取无头浏览器渲染对比节点样式生成报告 dom 节点清洗、去重、合并、重建 dom & box修正节点匹配 & 样式对比

29. 基于OpenCV + MobileNetV2的节点匹配算法 - 元数据获取 sketch to dom code deploy sketch html url dev html url selenium + chromedriver 渲染分屏截图 SIFT - matchKeypoints拼接 dom-tree dom-clip page-image

30. 基于OpenCV + MobileNetV2的节点匹配算法 - DOM&BOX修正为啥要修正？margin、padding dom-tree 控件分类（text or image）：innerHTML==textContent ? 边框修正（padding fix）：控件透明、像素作差、box取最小图像合并（0.8 < iou < 1.0）：重叠但不包含遍历节点，重建dom-tree：dom去重、父子兄弟关系计算

31. 基于OpenCV + MobileNetV2的节点匹配算法 - 节点匹配+样式对比 dom-tree page-image average_hash过滤（0.5 < hash < 0.99） sketch-tree & dev-tree 交叉遍历搜索匹配：形状、文本、图像相似度（MobileNetV2）样式比对：字体、字号、位置、大小、颜色等生成报告

32. 基于OpenCV + MobileNetV2的节点匹配算法 - 架构图样式对比控件匹配字体异常颜色异常 Mobilenet 深度指纹边缘去重尺寸异常边缘匹配节点合并 … 位置异常文本匹配相对匹配透明图层过滤 … 视觉重布局 … DOM清洗属性修正无头浏览器渲染 MaskRCNN 控件分类分批截图 iou 交叉检测 dom截图 OpenCV图像处理长图拼接元数据获取 Chrome Simulator SIFT - matchKeypoints dom 导出 json

33. 蒙娜丽莎的平台化建设一个流程五大功能

34. 五大功能 ① 自动生成走查报告，自动更新对比 ② 走查报告一键分享，快速协同 ④ 历史文件切换，可多个走查项目并行 ③ 批注协作功能，点对点对焦修改细节 ⑤ 保留叠图对比能力

35. 一个流程

36. 一个流程

37. 效果如何

38. 效果如何 1天

39. 未来展望

40. FOR 解析 FOR 走查 FOR 开源 ① Figma 设计稿解析 ① 线上业务视觉巡检 ① 解析服务开源？ ② 解析服务上云 ② 页面异常感知 ② 走查服务开源？ ③ 区块走查 ③ 敬请期待… ④ 泛化样式走查

41. THANKS

42. 智能视觉走查 - 微信群个人微信