1. UI还原度检测
UI还原度检测是指通过对原型、设计稿等UI设计稿件进行还原处理，使得最终呈现的界面与设计稿一致或尽可能接近的过程。在现代互联网和移动应用的设计开发过程中，UI还原度扮演着至关重要的角色，随着用户对产品用户体验的要求不断提升，如何保证UI的还原度成为了设计师和开发者需要面对的挑战之一。
设计还原度是指设计以及最终产品符合顶层设计理念和设计规范，在不同界面、不同系列的产品中，保持相应的一致性，严格还原设计稿。设计还原度除了指界面上的还原度外，交互和动效设计的还原度也包含在内。
1.1 核心概念
- 设计还原度：指设计以及最终产品符合顶层设计理念和设计规范，在不同界面、不同系列的产品中保持一致性，严格还原设计稿
- 还原度检查：也叫还原度验证、设计走查、设计验证，是保证研发实际实现的效果是否和设计稿一致的过程
1.2 常见的设计还原度问题包括：
- 基本界面还原问题：通常以不符合4大基本设计原则(亲密、对齐、重复、对比)的形式出现
- 界面一致性问题：如不同界面的按钮尺寸、样式不一致，颜色存在细微差异等
- 交互一致性问题：如产品中不同弹窗的弹出和关闭方式差异
- 不同平台的自适应问题：如设计稿是iOS的，但还要开发H5和安卓平台导致的适配问题
- 功能未还原：如漏掉了界面元素或某种状态，导致产品功能不如预期
过早介入：功能bug多，难以跑完全部流程
过晚介入：留给修正问题的时间不足
2. UI还原度检测方法与评估标准
2.1 检测方法
-
像素级对比方法：
- 通过页面叠加对比的方式，对HTML页面和UI设计界面进行对比
- 针对特别复杂图形比对时可以进行逐层拆分，逐层对比后进行叠加对比
-
分层检测方法：
- 将界面分解为不同层级(布局层、组件层、元素层)进行逐层检查
- 先检查整体布局结构，再检查组件位置和样式，最后检查细节元素
UI检测大多集中在开发结束后期，并且有UI人员进行截图比对，效率不高还可能会影响项目进度。mirror可以将比对提前到开发阶段，由开发人员自行检测。
3. mirror（镜子）测试工具
mirror是全新的UI还原度检测工具，使用时机提前到开发阶段，界面开发人员，在页面中加载脚本，可以实时进行UI还原检测。
3.1 在页面中引入mirror脚本
xml
<script type="module" src="https://ys-zjrs.haier.net/download/cdn/mirror.min.js"></script>引入后页面会出现操作UI检测面板，可以上传UI图和本地代码进行比对。
作为辅助工具，他有以下优点：
- 能够实时将开发的界面和UI图进行比较；
- 支持热更新显示，保存相应配置，刷新页面不会对配置造成影响；
- 比对的方式丰富，可以根据实际情况进行调整；
- 适用于UI设计人员和软件开发人员对UI进行检测；
- 适配移动端和PC端界面开发；
3.2 动态演示
见csdn：blog.csdn.net/weixin_4155...
3.3 功能详细说明
UI图片
图片大小
调整位置
透明度
混合模式
后续会推出mirror APP版检测工具，助力APP开发效率提升。
团队介绍
「智慧家技术平台-ToC服务平台」以用户行为数据为基础，利用推荐引擎为用户提供"千人千面"的个性化推荐服务，改善用户体验，持续提升核心业务指标。通过构建高效、智能的线上运营系统，全面整合数据资产，实现数据分析-人群圈选-用户触达-后效分析-策略优化的运营闭环，并提供可视化报表，一站式操作提升数字化运营效率。