移动端专栏第六弹—财务管理驾驶舱

Finereport产品运营
一.应用场景
财务管理驾驶舱是移动端重点场景之一。作为企业的管理者,对公司的财务情况应该了如指掌。单单借助PC端可能没办法做到“随时随地”,但移动设备可以打破时间和空间的限制,让管理者随时随地都可以了解到实时财务信息,再结合定时推送功能,让数据传递变得更加快速和精准,以便快速给予决策。
直接看效果
财务管理驾驶舱.png
二.解决方案内容
本套财务管理驾驶舱提供深浅两套配色(基于大家的需求,小编又调试了一个浅色的驾驶舱,欢迎大家尝试,如果有更好的配色方案,也可私聊我)
提供了财务管理常规数据指标(大家根据需求灵活调整即可)

该方案主要解决两个核心问题:
1.组件太多,如何进行合理布局
移动端展示多组件一直以来是报表开发者的一个难题,今天小编跟大家一起探讨下,核心要素:确定展示内容和表现形式——将内容进行模板划分(分类)——利用tab块丰富空间。

a.确定展示内容和表现形式:
设计移动驾驶舱前,要进行充分的业务调研,确定下展示的数据以及数据的表现形式,比如指标卡、明细表、图表等,这里小编就不展开细说了

2.png

ps:给大家安利一下组件商城,官方提供了一些移动端组件:https://market.fanruan.com/reuse

b.将内容进行模块划分(分类):
移动端内容分类是至关重要的步骤,囫囵吞枣地将内容随意放置是移动端的大忌。移动端一般都是先汇总再细分,一定要根据业务需求做好模块划分,将每一个模块的内容归到一类,逻辑清晰,使用者看起来也容易理解

c.利用tab块丰富空间:
归类做完了,还是有很多组件要怎么处理?合理利用tab去丰富空间,先上效果图:

带tab标题的轮播.gif

圆点切换tab.gif

选择tabpane>移动端,首先先设置样式模板,这里可以利用丰富的tab属性;其次可以设置显示标题、支持滑动切换、显示圆点指示器,就可以实现上图两种效果

tab设置.png

可参考帮助文档:
2.如何快速了解驾驶舱内容且能精准查找?
对管理层来说,需要一眼了解到整张驾驶舱的内容,并且能够快速触达自己关注的内容。从大多数移动端驾驶舱来看,能够在一屏展示下所有内容的情况还是比较少的,那么该如何体现数据价值呢?
利用移动端组件导航快速定位功能,将模块划分的主题展示在右侧导航里,不仅可以展示驾驶舱“大纲”,而且通过点击右侧导航,快速切换到页面制定位置。

3.png

1)选择body>移动端,进行导航样式设置,尺寸、颜色、大小皆可自定义

4.png

2)选择需要设置为导航的组件>移动端,勾选使用导航,设置导航名称

5.png



3.细节优化
当然,模板中还有一些细节上的处理,标题、间隔、圆角设置、配色等,这里就不一一细说了。感兴趣的可看历史文档。


三.免费demo
可扫码预览demo,打开解决方案>财务管理驾驶舱

h5移动端.png

需要模板的同学可直接到模板商城进行下载:点击下载


编辑于 2020-11-26 16:49  

发表于 2020-11-27 09:58:32
发表于 2020-11-30 10:47:38
厉害厉害,希望以后用的上
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2回帖数 10关注人数 8038浏览人数
最后回复于:2023-3-2 09:27

返回顶部 返回列表