
有许多不错的工具可以帮助我们生成app热力图,简单且美观,但不那么美丽的是,它的价格。
在产品的日常工作中,数据分析也是非常重要的一环,而app热力图是能快速了解本产品各功能模块渗透率及使用频次的方式之一。
这里我将用Axure教大家画app热力图,辅助大家更高效地处理日常工作。
1. 添加app图片

2. 设置不透明度
选中图片,在style 属性栏设置不透明度,这里设置为60%。
设置不透明度的原因为,后续要添加热力图的渗透率数据,降低不透明度可以让数据展示更清晰。

3. 添加box
添加box并将其覆盖在app某一功能区域。

4. 选中box,设置box的颜色

5.设置box的不透明度
按照该功能区域的渗透率设置box的不透明度,比如:渗透率为48%,则不透明度设置为48%。

6.添加渗透率数据标签

7.模块组合
新建一个新的app外框,并将在app原图上的所有模块选中并组合。

8.复制完稿
将组合后的模块复制,并粘贴至右侧的app框中,则完成了app的渗透率热力图。

左右两张图片可以结合起来看,因为左侧的app原图能够清晰看出app上所有功能区域,而右侧的纯热力图可以让你更快掌握该app界面的各区域的渗透程度。(注:以上数据均为虚构,仅做展示效果。)
怎么样,是不是很简单呢? 当我第一次要画热力图时,去网上搜索了教程,但是都没有找到简单好用的方式,于是就用Axure自己画了个,这里也将我的方法分享给大家,希望对大家有所帮助。
最后想说一句,热力图只是工具,一种展现数据的方式,核心在于帮助研究者直观看出各区域的数据情况,从而能快速发现问题并优化,美观是次要的。
欢迎关注我的公众号,微信搜索“大同晓异”,“晓”是拂晓的晓,将分享互联网产品、运营、技术等相关信息,希望与你一同进步。
网友评论