提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

移动端解决方案第一弹--手机端的配色与布局

shalor 社区微信达人帆软员工 浪迹天涯(Lv4)
发表于 2016-12-21 11:12 | 显示全部楼层 |取消关注该作者的回复
都说俺们IT人员不懂美工,移动端报表做的各种心酸心累啊,PC的表格是在手机上看真是又丑又长,看看其他APP页面都绚丽多彩交互好,我们的简直惨不忍睹,尤其是领导层看报表,报表看起来不漂亮,哪有心情看具体的数据 怎么办?

移动端专属的布局与配色解决方案来啦!!!

我们的方案收集了实际客户各个业务场景下的报表,专门由帆软UI进行美化。
并且提供多套配色风格及排版样式以及对应的实际模板,并且对移动报表如何突出数据、如何考虑布局排版、如何提高使用体验以及一些常用的设置进行了说明。
需要者可以根据实际业务需要,借鉴该方案中样式及布局,或从中启发思路,来实现自己好看的报表。
想想是不是有点小激动呢下面赶紧来看内容吧!

方案效果图及介绍:

方案采用同一套Demo,由UE设计了经典、清新、商务3种配色风格,效果如下。ps.论坛展示有限哦,大家可以戳底部下载高清截图以及相应的工程包


经典系列为典型的商务蓝色风格,庄重但不失美观,沉稳精致。
经典.jpg
清新系列活泼明亮,偏向于扁平化,充满热情。
清新.jpg
金属商务系列高端大气,精致美观。
商务.jpg

方案说明:
1、调色表
1.1 没有难看的颜色,只有不协调的配色,利用进阶色表,来进行色彩搭配吧,我们每个人都可以成为视觉设计师
进阶色表.png

在进阶色表中,按照固定规则提取颜色,来应用到自己的报表中或者图表中,就能生成色彩协调的视觉效果
例如可以横向依次选取同一色系的颜色:
横向颜色.png 横向依次.png
也可以纵向依次选取颜色:
纵向颜色.png 纵向依次.png


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

固定规则.png 规则颜色.png

1.2 也可以取下方常用颜色表中的颜色进行组合

常用颜色.png

2、怎样才能做出调理清晰的报表?

一般情况下,我们制作的报表不会简单的只有一个表格或者一个图表,而是包含了很丰富的内容,很多的组件组合而来,这个时候怎样才能让我们做出来的报表更加具有条理性呢?
关键是需要对我们报表里面的内容按照类别或者模块来进行划分,合理的布局,每个模块通过明显的标题或者分割来进行区分
就像下图偏深色短/长条标题划分,是最常用的一种形式:

1.png 2.png



采用深色短线或者其他图标来分割内容也是不错的选择:

3.png

4.png



侧边栏的颜色块也可以起到很好的分块作用,或者是通过颜色的渐变来区分:

5.png

6.png


浅色分割条,会让你的报表看起来很清爽:

7.png


相同模块的小类别之间也可以用一个浅色的横线来分割,来加强报表的可阅读性:

8.png


3、明细数据转为卡片显示

明细表如果列数比较多,条数不是很多的时候,可以转换成相同格式的卡片显示,在手机上面的效果更好,可读性更强


9.png

10.png



4、避免多层次钻取与返回,试着尽量放在一个报表内部进行切换

钻取层数如果过多的话,看报表的人的操作体验就会下降很多,因为不知道现在自己已经下钻到哪一层,以及如何返回到第一层
因此在报表制作的时候,可以多用tab的形式来将多个报表放在一个页面里面来实现,这样实用性更强
现在移动端还不支持tab组件,可以采用表格的超级链接>动态参数来实现,等移动端实现了tab组件,就会更加方便了

11.png



5、学会弱化显示

一张报表中的数据有很多,制作的报表需要有主次概念,视觉上有一定的层次感,先看什么、后看什么,根据先后顺序,我们需要对显示的内容进行加粗、加深或者是淡化
不要所有的文字都用相同的格式,要敢于将数据进行弱化显示
例如下面的模板,不通的字体颜色给我们带来的视觉层次感

12.png


6、适当的视觉冲击会突出的异常的数据

分析类的报表最重的目的就是要找出数据所呈现出来的异常从而让我们去找出问题与结论,例如同期比下降了,销售额没有达到目标,针对这些数据结果,我们需要重点突出出来
这个时候采用整体颜色背景,给我们带来的视觉冲击会更强烈

13.png

移动端解决方案完整工程打包
链接: https://pan.baidu.com/s/1c2HFlAC 密码: axpy

往期移动端干货回顾:
【专题汇总】移动端解决方案

编辑于 2017-12-28 11:52  
编辑于 2017-12-28 11:53  

效果图.rar

5.47 MB, 下载次数: 1000

售价: 1 个F豆  [记录]

30 张模板放送.rar

190.93 KB, 下载次数: 187

售价: 1 个F豆  [记录]

评分

参与人数 3F豆 +3 收起 理由
flyingsnake + 1 很给力!
zsh331 + 1 感谢分享
netforces + 1

查看全部评分

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

已有3人关注本帖

simonliuchenhappyhorse

本帖被以下淘专辑推荐:

回复

使用道具 举报

兔子酱 社区微信达人帆软员工 管理员
发表于 2016-12-21 11:31 | 显示全部楼层 |取消关注该作者的回复
{:8_209:}{:8_209:}
  • 评论

回复 支持 反对

使用道具 举报

zsh331 实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2016-12-21 12:57 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

小龙 社区微信达人番薯互助团队 互助新人
发表于 2016-12-21 14:47 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

deafire 社区微信达人实名认证 番薯互助团队 互助新人
发表于 2016-12-21 15:48 | 显示全部楼层 |取消关注该作者的回复
厉害了,我的shalor
  • 评论

回复 支持 反对

使用道具 举报

传说哥 社区微信达人实名认证 番薯互助团队 帆软员工 管理员
发表于 2016-12-21 18:16 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

星痕 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP1
发表于 2016-12-21 18:22 | 显示全部楼层 |取消关注该作者的回复
{:8_208:}厉害了,我的shalor{:8_209:}
  • 评论

回复 支持 反对

使用道具 举报

cherishdqy 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP2
发表于 2016-12-22 08:08 | 显示全部楼层 |取消关注该作者的回复
本帖最后由 cherishdqy 于 2016-12-22 08:09 编辑





  • 评论

回复 支持 反对

使用道具 举报

dydgood  渐入佳境(Lv2)
发表于 2016-12-23 10:56 | 显示全部楼层 |取消关注该作者的回复
造福帆薯啊{:8_209:}
  • 评论

回复 支持 反对

使用道具 举报

llz1981  初学乍练(Lv1)
发表于 2016-12-24 13:51 | 显示全部楼层 |取消关注该作者的回复
{:8_209:}{:8_209:}
  • 评论

回复 支持 反对

使用道具 举报

竹林舞剑  初出茅庐(Lv3)
发表于 2016-12-27 00:06 | 显示全部楼层 |取消关注该作者的回复
妈妈再也不用担心我的手机端报表长得丑了!!!
{:8_209:}{:8_209:}
  • 评论

回复 支持 反对

使用道具 举报

895540847 实名认证 渐入佳境(Lv2)
发表于 2016-12-27 07:59 | 显示全部楼层 |取消关注该作者的回复
{:8_209:}{:8_209:}{:8_209:}
  • 评论

回复 支持 反对

使用道具 举报

laobiah 社区微信达人 渐入佳境(Lv2)
发表于 2016-12-27 08:53 | 显示全部楼层 |取消关注该作者的回复
实在太好了,
但是请问,解压缩的时候为什么报错呢
(文件名,目标名或者卷标语法不正确)
  收起(1)
  • shalor shalor

    我刚刚重新下载亲测解压缩是OK的哦,您是不是有可能下载不完整呢?
    2016-12-27 11:23 评论
  • 评论

回复 支持 反对

使用道具 举报

Poseidon 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2016-12-27 09:07 | 显示全部楼层 |取消关注该作者的回复

这东西还是甩给前端比较实用,色弱分不清细微颜色差距;
最基础的天蓝组合我就感觉很NICE了
  • 评论

回复 支持 反对

使用道具 举报

gqmao 社区微信达人番薯互助团队 互助新人
发表于 2016-12-27 11:43 | 显示全部楼层 |取消关注该作者的回复
厉害的,我的亲
  • 评论

回复 支持 反对

使用道具 举报

dami3937  初出茅庐(Lv3)
发表于 2016-12-27 14:39 | 显示全部楼层 |取消关注该作者的回复
非常好
  • 评论

回复 支持 反对

使用道具 举报

墨月夜 社区微信达人 初学乍练(Lv1)
发表于 2016-12-28 11:42 | 显示全部楼层 |取消关注该作者的回复
╮(╯_╰)美 ╮(╯_╰)美╮(╯_╰)美╮(╯_╰)美╮(╯_╰)美╮(╯_╰)美╮(╯_╰)美╮(╯_╰)美
  • 评论

回复 支持 反对

使用道具 举报

wuchao19880918  初学乍练(Lv1)
发表于 2016-12-29 09:12 | 显示全部楼层 |取消关注该作者的回复
身份证号银行卡号扫描,能实现吗
  收起(1)
  • shalor shalor

    扫描身份证和银行卡这个属于文字识别功能,暂时实现不了
    2016-12-30 10:23 评论
  • 评论

回复 支持 反对

使用道具 举报

iceteacy  初学乍练(Lv1)
发表于 2017-1-4 09:55 | 显示全部楼层 |取消关注该作者的回复
厉害了,要好好学习
领导总是说我的表做得丑{:6_154:}
  • 评论

回复 支持 反对

使用道具 举报

XavierFLY  初学乍练(Lv1)
发表于 2017-1-9 10:58 | 显示全部楼层 |取消关注该作者的回复
对于领导对界面美观度要求很高的我们来说这帖子兼职就是救世主啊!
  收起(1)
  • shalor shalor

    希望能对你们的模板起到借鉴作用
    2017-01-09 11:37 评论
  • 评论

回复 支持 反对

使用道具 举报

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

本版积分规则

Copyright © 帆软|联系帆软| 联系管理员@兔子酱|免责声明|手机版|帆软社区 ( 苏ICP备14031611号-3 )

GMT+8, 2018-10-18 17:40 , Processed in 1.240088 second(s), 217 queries , Gzip On.

返回顶部 返回列表