一、前言
作为一名设计师，常常有个问题困扰我们，如何输出一个正确靠谱的设计方案呢？
首先，设计是用来解决问题，除非你是耶稣基督或释迦摩尼转世，你无法提供一个绝对最优的解决方案，唯有是在试错的过程中不断校验，从中挑出最少出错，并且在当前的资源条件限制下能够有效落地那一版方案。
有一句话说得好，好的交互体验不被人察觉，而糟糕的设计却总是想方设法留住你的视线。确实，好的体验或许并不能为你的企业带来多大的商业价值，然而糟糕的设计却能给企业带来灾难。少犯错误乃至不放错误，就需要逃离主观的思维定势，确保有一手客观的信息输入去不断推翻和迭代我们的认知。今天我想介绍的就是，如何利用hotjar自动化采集数据去佐证我们的设计提案，进而不断迭代优化降低犯错概率。
二、原型的选择及准备
首先你需要准备你要测试的原型，这里推荐三种原型方案：
1）Framer：能做到还原native的交互效果，支持调用各种手机引擎以及逻辑判断。写好一套framer原型能够更加精准地预判上线后的效果，采集的数据也更贴合线上数据。缺点是门槛高，周期相对较长。
2）Axure：如果你的原型页面较多，你更多想测试页面间的跳转采集数据的转化状况，可以考虑用此方案。
3）PS：没错，实在条件限制又想快速校验。你也可以用ps，（对你们那都用photoshop），来配合切片工具输出html工程文件。用来单纯采集用户对界面信息陈列所作出的行为反馈。
推荐以上三种工具的理由是，他们输出物都是html工程文件。这方便为我们后期嵌入三方数据抓取脚本(tracking code)做铺垫。
三、原型的上传及发布
这一步我们需要获取原型的网址，当然Framer有自己的云端服务器也可以访问工程文件夹进行二次编辑后直接发布。Axure当然也能发布到axure云获取链接，但是一旦发布无法编辑工程文件(.rp后缀的文件非html)，这里我推荐生成html文件后上传github服务器获取网址，具体方法如下：
1）下载github客户端，没有账号的申请一个账号
2）新建本地仓库用英文命名，新建gh-pages分支，把要上传的工程文件夹根目录文件拷贝到新建的本地仓库文件夹
3）添好日志提交
4）同步到github服务器
这时浏览器键入：github账户名.io/仓库名/ 就能访问你的原型地址。
比如我的原型地址：https://shengjun89.github.io/mzjk-loan/
tips：上传PS输出的静态html文件同样适用此方法。
四、嵌入数据抓取的JS脚本
这个阶段是我们整个流程的核心，秘密武器hotjar粉墨登场，看一下官网描述：一站式数据分析和反馈采集（All-in-one analytics and feedback），接下来跟着我一步一步操作见证奇迹。
1）上hotjar官网：hotjar.com注册免费账号（翻墙访问可能会更快）
2）新增站点，输入我们前面得到的网址链接
3）复制tracking code，用代码编辑器打开你工程文件夹里的index.html文件，将代码复制到head标签内部。注意每个站点对应唯一的一个hjid。
拷贝tracking cod粘贴到index文件头部
4）因为文件有修改，所以再次回到github客户端，commit提交最新的修改然后上传服务器，点击右上角sync同步。
5）回到hotjar官网，验证代码有没有生效，如果生效网页左上角有认证成功提示。至此你原型数据抓取的代码就埋好了。
五、添加任务验收成果
常用的几个功能依次给大家做个介绍：
1）Heatmaps 热力图：记录不同终端下，用户点击、轻敲、移动、滚动操作的热力状态。元素的点击则有点击占比记录。
四个步骤生成热力图：1.项目命名-> 2.设置PV数上限 -> 3.导入目标页面链接（可定位到页面内的具体元素）-> 4. 完成创建
即便是静态设计稿你也可以发布给用户模拟操作完，通过生成的热力图去校验页面的交互元素及信息架构是否符合用户的预期。
2）Recording 录屏记录：这里以录屏的形式记录了用户访问链接后的所有行为轨迹，移动端的原型也建议用户用pc打开链接，这样通过抓取到鼠标的行为轨迹模拟眼动轨迹。除此之外录屏列表里还有用户IP，目标页面，访问时间，访问设备等信息。可以用来检测不同浏览器和设备访问下适配情况。
为保护用户隐私，数字会被做掩码处理
3）Funnels转化漏斗：设置步骤和相应步骤下匹配的url路径，去检验在哪些步骤丢失了大部分的访客。
4）Form表单：跟踪用户录入表单在哪个阶段访问数据下滑
5）Surveys添加问卷：你可以拟定一份问卷，提供问题答案的单选或多选项，或者采集用户使用的主观感受或优化建议等信息反馈。
六、总结
最后，这些原型数据会始终存在于你hotjar的站点类目里，你可以在任何提案或复盘时候拿出这些数据，做小规模的推断和佐证。当然所有的原型测试数据采集仅仅是产品上线前验证设计的一种过渡方案，项目上线后要以线上数据为准，切莫本末倒置。
如果你也有任何原型测试的方法或见解，欢迎给我留言。