提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

运用App的设计思路打造移动端报表

susie 帆软员工 版主
发表于 2019-9-2 17:29:02 | 显示全部楼层 |取消关注该作者的回复
现状

接上一篇 移动端demo更新,移动端报表有着随时随地、迅速获取的特性,然而大部分报表工程师之前还只接触过PC端报表的制作,报表工程师面对移动端报表该怎么设计却无从下手。

用户的移动端需求
甲方爸爸的需求:手机上看不清,字要大、字要大、字再大一点!

1.png


实际甲方爸爸需求:移动端屏幕小,要传达出关键信息,要醒目、显眼、一目了然

PC端和移动端的区别

交互方式
PC端:PC端使用键盘、鼠标进行交互。
移动端:通过按钮、手势完成交互,交互方式多为点击、滑动,表现形式简单,但是用户感知性强。

显示方式
PC端:屏幕大、内容丰富,可视效果好。
移动端:屏幕小、可承载的内容少。

手机端呈现的困惑

手机屏幕小,如何避繁就简,层次清晰的展现出内容
如何让高层管理人员在手机上快速查看到关键信息
千篇一律的流式布局,想要拥有更多布局交互模式
用户对可视化的要求也越来越高,更多地是追求“高颜值”的可视化

解决方案
11.png


本文想简单介绍下如何借助 FineReport 软件,运用 App 的设计思路,打造一款随时随地查看数据、分析数据的移动端报表。

主导航结构——横向
主导航结构,是呈现模板的主要功能架构及布局的导航方式,是应用。

顶部Tab:导航一直存在,具有选中状态,可快速切换另一个导航。
               点击上方的Tab实现视图间的切换,满足沉浸式阅读需求。

1.jpg

优点:1、直接展示最重要接口内容信息
         2、分类位置固定,清楚当前所在入口位置
         3、减少界面跳转的层级,轻松在各入口间频繁跳转
缺点:1、功能入口过多时,该模式显得笨重不实用

底部Tab:相比于顶部Tab,底部Tab导航更接近拇指操作热区,更符合人机交互。

2.png

优点1、可见性非常好,底部Tab非常明显,易于发现;
            2、同时,由于实在底部,操作性也非常好

Tab滑动标题:左右滑动切换视图,不需要点击Tab。

3.png

优点:单页面内容整体性强,聚焦度高
缺点:不能跳跃性地查看间隔的页面

轮播导航(Tab点点滑动):相比于Tab标题滑动标题,这种方式最大程度保证了页面的简洁性和内容的完整性,操作方便,左右滑动切换。

4.png

优点:1、单页面内容整体性强
         2、线性的浏览方式有顺畅感、方向感
缺点:1、不适合展示过多页面
         2、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面


内容界面结构——纵向
内容界面结构导航,是针对内容界面的呈现、布局所整理出来的设计模式

宫格导航:九宫格是一种常见的功能型导航,这种导航的思路很简单,就是把功能排布出来,任君挑选。

5.png

优点:1、清晰展现各入口,方便用户快速查询
缺点:1、菜单之间的跳转要回到初始点
         2、标题不易过长

陈列馆式导航:陈列馆式导航设计区别于宫格式,在于可用来呈现实时内容(经常更新、视觉效果直观的内容)。

6.png

优点:1、与列表式、宫格式相比较,陈列馆式表现形式、视觉效果更加丰富。
         2、展示直观,且方便浏览经常更新的内容。
缺点:1、容易形成界面内容过多,显得杂乱

卡片式导航:卡片以浓缩的形式提供了快速并且相关的信息。卡片是含有图片和文字在内的小矩形模块,它是用户了解更多细节信息的「入口」。

7.png

优点:每个部分的操作比较独立,不会受到其他部分的干扰信息,不拥挤、浏览体验较好。
缺点:无法承载过多的信息。

列表导航:当界面信息的种类比较单一,或者只是作为信息的链接入口时,我们可以使用列表式结构。这种结构可以高效、清晰地展示信息,可以容纳的信息比较多。

8.png

优点:1、list列表纵向长度没有限制,上下滑动可以查看无限内容;
         2、list列表在视觉上整齐美观,用户接受度很高;
         3、list列表可以展示内容长和次级文字的标题。
缺点:1、页面跳转后总是从头开始;
         2、一页展示内容过多,用户疲劳度增加;
         3、页面重点内容不突出。

折叠式导航:(又称手风琴式),能在一屏幕内显示更多的细节,无需页面跳转。

9.png

优点:1、两级结构可承载较多信息,同时保持界面简洁;
         2、减少界面跳转,提高操作效率高。
缺点:分类位置不固定,当展开的内容较多时,容易将页面布局打乱。

轮盘布局:半隐藏部分内容,指引用户左右滑动察看。

10.png

下拉菜单式:是一种瞬时的导航方式,即只有在我们需要的时候才会显示出来。能让用户在有限的屏幕空间上做更多的动作,可以用来筛选同一信息列表下不同类别的信息。

11.png

这里的导航布局模式只是一种参考,这些模式其实还有各种各样的变形,这里就不一一展开了。
当然上述的模板里也不是只是用到单一的布局模式,很多都是混合使用的,把一些基础布局进行结合做成复合形式的布局,一般的组合会在2-3个之间。
以上是以App设计的思路角度对移动端模板的设计进行一些指导。在实际落地过程中,需要全局把控,从报表结构、数据选择、主页设计,元素搭配组合等方面着手设计,是一项痛并快乐着的过程。


制作第一张移动端报表
看了这么多,你学会如何运用App的思路打造一款移动端报表了吗?
设计器、App 下载地址
跟随帮助文档来制作 第一张移动端报表
文中使用到的模板 下载地址

此帖共有 243 位番薯登录后查看

已有6人关注本帖

九霄随便来看看

本帖被以下淘专辑推荐:

回复

使用道具 举报

lym71 社区微信达人 初学乍练(Lv1)
发表于 2019-9-3 09:20:56 | 显示全部楼层 |取消关注该作者的回复
6666666666666666666
  • 评论

回复 支持 反对

使用道具 举报

饭团君 社区微信达人实名认证 帆软员工 管理员
发表于 2019-9-4 09:30:59 | 显示全部楼层 |取消关注该作者的回复
这两个帖子中demo模板的下载链接已经在本主题下方给出啦
要是没看到,下面的链接也是哦
https://help.finereport.com/doc-view-2931.html
  • 评论

回复 支持 反对

使用道具 举报

幸福341  初学乍练(Lv1)
发表于 2019-9-4 10:35:52 | 显示全部楼层 |取消关注该作者的回复
资瓷!
  • 评论

回复 支持 反对

使用道具 举报

传说哥 实名认证 番薯互助团队 帆软员工 管理员
发表于 2019-9-4 14:08:52 | 显示全部楼层 |取消关注该作者的回复
屏幕小,字要“大”。分享很给力
  • 评论

回复 支持 反对

使用道具 举报

确实是个孩子谥  初学乍练(Lv1)
发表于 2019-9-4 15:07:45 | 显示全部楼层 |取消关注该作者的回复
下载模板用起来。
  • 评论

回复 支持 反对

使用道具 举报

知足常乐77  初学乍练(Lv1)
发表于 2019-9-4 20:25:48 | 显示全部楼层 |取消关注该作者的回复
好贴 关注了
  • 评论

回复 支持 反对

使用道具 举报

黄源 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2019-9-5 09:05:16 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

后知 社区微信达人 渐入佳境(Lv2)
发表于 2019-9-5 10:57:05 来自手机 | 显示全部楼层 |取消关注该作者的回复
感谢susie小姐姐分享,字很大很好看
  • 评论

回复 支持 反对

使用道具 举报

向往草原403  初学乍练(Lv1)
发表于 2019-9-5 11:14:22 | 显示全部楼层 |取消关注该作者的回复
感谢分享~
  • 评论

回复 支持 反对

使用道具 举报

JerrySong 社区微信达人 版主
发表于 2019-9-6 17:14:50 | 显示全部楼层 |取消关注该作者的回复
susie老师真的牛啊
  • 评论

回复 支持 反对

使用道具 举报

kkiron 社区微信达人 初学乍练(Lv1)
发表于 前天 18:31 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

联系管理员@饭团君|联系帆软|免责声明|手机版|帆软社区|Copyright © 帆软软件有限公司 ( 苏ICP备14031611号-3 )

GMT+8, 2019-9-18 07:14 , Processed in 0.696146 second(s), 133 queries , Gzip On.

返回顶部 返回列表