日期:
来源:帆软服务号收集编辑:
移动端布局实现所见即所得!
满足业务分析与查看需求,在终端设备表现在提升空间利用率的基础上"快、准、精"地查看数据、良好的视觉交互体验、方便快捷地进行信息传递。 提升开发效率,降低开发难度,又能满足一定灵活度
1、移动端布局页内组件替换为H5解析,实现所见即所得
移动端布局边界区域调大,提升编辑体验 移动端布局看到的效果和手机端基本一致(还在持续迭代中) 移动端布局中,新增样式设置,包括 PC & 客户端 需要分别设置的属性,以及移动端专有的属性,移动端布局设置后不影响PC看板编辑与预览
2、可以调整终端显示时组件的间隔、页面背景
客户端默认会有10px的边距与间隔,若不需要间隔,或希望调小,可以在页面设置中调整
除间隔外,页面背景也可以和PC端区分,尤其是采用图片背景的情况下,可以替换为适合手机尺寸的背景
3、文本、指标卡等组件,可以设置不显示全屏按钮,以提升视觉使用体验
文本、图表、表格等组件均可设置 尤其是指标卡并列、文本标题等场景,全屏功能必要性不大,去掉反而可以提升视觉与使用体验
4、保存与返回仪表板分开
1、表格宽度移动端可以设置自适应规则
PC端表格可以设置自适应规则
2、文本和指标卡自适应也进行了优化
标题类文本推荐采用宽度自适应,文本不会自动换行,根据内容长度实现宽度自适应; 描述类文本推荐不设置,保持文字大小不变,自动换行显示; 指标卡推荐采用整体适应,宽高均完整显示;
仅调整布局,发现文本标题过大,不美观、指标卡出现文字显示不全的现象;
手机端合适大小显示,且避免了文字过大或显示截断问题(文本组件的所见即所得略有欠缺)
BI移动端DEMO