腾讯网网站内容定位( Android端的视觉还原走查工具的解析和思考过程设计思维)

　　腾讯网网站内容定位(

Android端的视觉还原走查工具的解析和思考过程设计思维)

　　一、你为什么要做“他的摇滚”？

　　界面设计诞生20年来，设计还原度低的问题一直困扰着设计师。设计稿很高大上，但还原时却面目全非。解决界面还原问题一直是一个不断考验设计者和开发者眼力和耐心的过程。最后，我们的设计师用他们的强大力量设计了“和山石”APP来解决这个问题。

　　二、什么是“他的摇滚”？

　　《和山石》是安卓端的视觉还原和穿行工具。您可以通过以下视频了解基本功能。

　　视频链接：

　　三、对于演练，设计和技术有什么区别？

　　出现的问题是：界面还原度不是很高，技术思维对同一件事有不同的分析和出发点，导致对同一问题有不同的看法。

　　技术思维特点：解耦思维，降低耦合度和代码复杂度，提高代码独立运行的能力。

　　设计思维的特点：本质性思维，通过一系列问题剥离表面的层层，直达问题的本质。

　　四、技术思维的思维过程

　　底层、框架、代码、接口分离，减少耦合，保持相互独立，降低代码复杂度和良好的运行能力。所谓视觉就是MVC中View视觉控件中的一系列界面参数（Modeler, Viewer, Controller）。“你只需要告诉你区别有多大，增加字体大小，什么颜色值就可以了”这样的词你一定很熟悉。

　　五、设计思维的思考过程

　　设计思维的本质思维是通过一系列问题找到解决问题的关键点。

　　1. 我们要解决什么问题？

　　遍历还原问题。

　　2. 演练的本质是什么？

　　比较两个接口的区别

　　3. 他们如何比较？

　　4. 为什么开发设计不好？

　　5. 认为可以快速复制用于开发？

　　设计演练的思路和方法是在设计端得到验证和实施的有效解决方案之一，证明了该方法具有一定的可行性。

　　6. 有没有更好的解决方案？

　　在此基础上，有没有更便捷高效的穿行方式，比如智能界面检测比对？我们也对这个方向的可行性做了一轮预研。Android手机的布局信息与Sketch完全不同。如果要统一设计和开发的布局框架信息，执行标准非常严格。最后，我们放弃了智能检测比对方案。出发点是，如果我们不能给出有意义的检测结果和建议，那么对于walk-through检查就没有根本的帮助。但我们正在努力在PC端尝试更智能的检测方法。

　　7. 什么样的工具可以解决这个问题？

　　想象一下，如果手机上有一个穿行工具，无论你在工作站、会议室、外出还是在家，都可以随时随地完成穿行。它会是什么样子？

　　六、可以随时随地完成穿行巡查的“其他山石”

　　根据Android移动端的特点，利用浮动窗口菜单调出任意界面上方的工具栏。导入设计稿后，将设计稿叠加在界面上进行详细对比。具体功能如下图所示：

　　1. 产品定位及功能

　　确定产品定位

　　根据穿行场景和目标人群，我们希望这个工具是一个快速简单的穿行工具，满足不同的角色。它可以轻松使用，随时随地完成演练。

　　确定产品特性

　　巡视检查的主要内容包括以下五个方面。《其他山石》的主要功能包括前四个，在有限的人力投入基础上，可以覆盖大部分的穿行工作。

　　2. 同类产品分析

　　马克曼

　　一款PC端标注工具，包括尺寸测量、间距测量、取色、描述文字等主要功能。

　　Photoshop

　　一款功能强大的专业制图软件，设计师在演练时会用到它的部分功能。

　　草图

　　一款专业的界面设计软件，功能更精简，操作更快更轻。我很少使用 Sketch 进行走查检查，因为有时我需要还原界面图片。使用PS会更符合我的个人习惯。

　　3. 主界面显示

　　浮动菜单和主要功能

　　颜色选择器功能和网格功能

　　七、设计响应

　　目前，《和山石》正在应用宝内试用，为设计界以外的人提供了一种简单快捷的方式完成演练。我们在合作过程中收到了很多积极的反馈，界面的整体还原度有了明显的提升。很多开发者的整体还原度都在90%以上，一些比较简单的页面也是100%还原的，比如下图的普通卡。还原为开发同学走过“其他山石”截图，一次通过率高。

　　根据我们收到的运营背景统计，除了应用宝之外，《和山石》得到了用户的积极传播，这也让我们更有信心继续提升他的体验。