天下没有难做的移动端模板

帆软产品经理
手机作为管理者的数据管理阵地,发挥了愈发重要的作用,然而手机虽然便捷,奈何屏幕终究不够大,数据在手机上的呈现变成了新的研究课题,你是不是有这样的困惑

  • 在PC上设计手机报表,总觉得差距有点大
  • 如何在有限的屏幕内把数据展现地更有层次?
  • 厌倦了流式布局?想要让数据拥有更多交互?
  • C端的APP越做越好看,领导的审美需求被无限放大?

帆软移动端,为手机驾驶舱带来了更多可能性,下面我们通过X个小技巧,为你排忧解难




1、设置手机画布,让设计器与最终结果更接近

(注:需依赖9.0设计器4月24号及以后jar包)

在PC设计器中设计手机模板,由于屏幕尺寸的较大差异,我们可能会对组件布局、组件大小的设置存在很多的问题。

利用手机画布的新功能,在设计手机报表之前时,将画布切换为适应手机尺寸,让模板内容在设计器上的样式与手机上的最终效果更为接近,减少不必要的调整

决策报表
普通报表
frm格式画布大小.png cpt格式画布大小.png




2、整体流式布局

C端主流APP的流布局设计同样适用于B端的数据展现,双指在屏幕上滑动的过程中获取自己想关注的数据内容

在整体布局的设计中,建议采用:先汇总再细分的原则

将不同时间粒度下的汇总数据优先呈现出来,让管理者一眼就能看到指标当前的进展与状态,做到心中有数以后在向下拆解

数据细分过程中需要,按照一定的分析逻辑,比如说:整体走势、趋势分析=》分类占比分析=》分类明细数据

设计器中组件的排列方式(点击图片放大预览) demo示例(点击图片放大预览)
流式布局.png 布局.jpg




3、多维度切换,丰富组件交互,扩展模板内容

由于手机屏幕尺寸有限,如果一张模板只单纯的使用流式布局,想要新增内容就会让模板的高度越来越高,管理者在阅读这样的模板时就需要耗费大量的下滑动作
我们可以针对整个模板或者在某一个组件上增加一下交互动作,让数据更加立体化


3.1 tab组件


将不同维度数据的内容填充至不同的tab页内部,即可在一张模板内部预览不同维度的数据

并且当一个决策报表内只有一个tab容器时,tab组件的标题会固定与报表顶部,从而在预览某一tab页内容时可以随时切换其他tab页

设计器中界面(点击图片放大预览) 实际效果(点击图片放大预览)
tab设计样式.png tab.gif



3.2 动态参数与组件联动

当一张模板样式固定时,可以通过这两种方式实现对不同数据的过滤,可以简化用户的操作交互动作,同时也省去了制作多张模板的时间

比如图1,可以通过不同时间粒度参数的切换,动态显示不同时间维度的企业运营数据,不需要通过年>月>日层层钻取的方式来实现

比如图2,可以通过不同指标类型参数的切换,动态显示不同指标的走势、分部趋势等信息,不需要在通过两张模板来实现

这两种方式的唯一区别在于:动态参数是对整张模板数据的刷新,而组件联动可以自由配置需要刷新数据的组件

demo1(点击图片放大预览) demo2(点击图片放大预览)
动态参数2.jpg 动态参数.gif



3.3 图表轮播

一个数据指标如果需要通过多个图表来进行可视化展现,往往我们会选择流式布局,将多个图表自上至下一一排列开来

但是如果我们需要关联多张图表进行分析,这样的组合方式由于屏幕大小的限制,无法在一屏内展示,不符合用户的交互习惯

这种情况下,我们可以选择用图表轮播的方式来实现,并且多个图表的交互不仅可以选择轮播的方式,也可以设置为手动切换,

图表轮播.gif




4、细节优化


4.1 组件标题

FR移动端有三种设置组件标题的方式,不同的设置方式也有不同的效果与优势

4.1.1 组件>样式>标题
推荐指数:★★★★★
优势:设置简单快捷,便于格式统一
劣势:由于样式固化,个性化空间有限

4.1.2 报表块标题
推荐指数:★★★★☆
优势:灵活多变的报表块,只有想不到,没有做不到
劣势:每一个标题都需要通过报表块实现,操作起来较为繁琐

4.1.3 图表块标题
推荐指数:★★★☆
优势:图表标题可以与图表本身结合的更加紧密
劣势:由于样式固化,个性化控件有限

组件标题.jpg


4.2 组件间隔与背景

C端的APP为了满足用户阅读的舒适感,会为不同类型的功能区域之间设置间隔,移动端报表也是一样,我们需要让用户更愿意阅读模板中的数据

一般情况下,移动报表不会简单的只有一个表格或者一个图表,而是包含了很丰富的内容,由很多的组件组合而来,这个时候怎样才能让我们做出来的报表更加具有条理性呢?

关键是需要对我们报表里面的内容按照类别或者模块来进行划分,合理的布局

  • 在普通报表模式下,我们需要为每个模块添加明显的标题
  • 在决策报表模式下,移动端默认为每个组件保留了间隔,可以通过为body主体与组件设置不一样的背景颜色加以区分,凸显间隔效果


间隔.jpg


4.3 让指标板更美观

我们在第二节组件整体流式布局中提到,需要将管理者关注的指标以汇总的形式展现于模板的显眼位置,如果单纯的用表格形式来展现,这样的效果一定不够突出,那这里我们推荐两种方式

4.3.1 巧妙利用小图标与标题或者指标名称组合
小图标.png

为大家安利一个获取小图标的网站:http://www.iconfont.cn/


4.3.2 组合不同样式的指标卡

利用报表块的高度自由的特点,组合出自己喜欢的指标卡样式

指标卡.jpg


4.4 适当的视觉冲击突出数据

除了通过独立的图表组件将数据可视化以外,可以利用报表块的强大功能,将数据本身与颜色、进度条、增长趋势组合起来,让数据更具凸显的效果

数据可视.jpg


5、模板配色


5.1、调色表的技巧

没有难看的颜色,只有不协调的配色,利用进阶色表,来进行色彩搭配吧,我们每个人都可以成为视觉设计师

1 (2).png

在进阶色表中,按照固定规则提取颜色,来应用到自己的报表中或者图表中,就能生成色彩协调的视觉效果

例如可以横向依次选取同一色系的颜色:

2.png

也可以纵向依次选取颜色:

3.png

或者对角线选取颜色,或者跳格取色,按照特定规律提取颜色然后组合,就可以得到良好的颜色效果,选取颜色的时候注意颜色的连贯性

4.png


5.2 配色参考

小编整理了移动端模板的常用配色表分享给大家

5.png

为大家安利一个配色的小工具:http://www.peise.net/tools/web/


五、移动端干货合集
【专题汇总】移动端解决方案

编辑于 2018-5-25 10:47  
参与人数 +1 F豆 +10 理由
langzixdjun + 10 太棒了,给你32个赞,么么哒

查看全部评分

发表于 2018-4-26 11:15:15
好棒好棒
发表于 2018-4-26 11:17:38
666666
发表于 2018-4-26 11:18:23
如果不是我发了条抖音,沙发或板凳应该都是我的!!!
发表于 2018-4-27 07:13:45
来自手机
学习啦
发表于 2018-4-27 08:51:09
先收了再说
发表于 2018-4-29 15:09:38
收藏了
发表于 2018-4-30 17:04:28
发表于 2018-5-2 13:21:44
学习了
发表于 2018-5-10 14:05:30
配色的小工具实用
发表于 2018-5-16 09:05:16
赞赞赞
发表于 2018-5-18 16:10:51
发表于 2018-7-24 11:54:40
写的不错,很到位
发表于 2018-8-3 15:05:19
棒棒棒
发表于 2018-9-27 16:41:04
发表于 2018-10-24 11:51:18
厉害了我的--
发表于 2018-10-25 09:56:33
先收了再说
发表于 2018-11-20 08:35:22
感谢分享,谢谢。
发表于 2019-2-28 10:35:30
发表于 2019-4-20 09:56:42
赞啊赞
发表于 2021-6-21 09:22:24
干货满满
发表于 2021-7-20 11:48:53
我来看看这个模板
发表于 2022-4-22 13:43:37
有没有系统学习移动端模板课程
发表于 2022-12-7 16:26:26
配色小工具怎么打不开了
发表于 2023-1-12 14:45:53
这很美丽。。。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

26回帖数 28关注人数 44204浏览人数
最后回复于:2023-5-19 17:36

返回顶部 返回列表