江苏龙网

  1. 首页 > 资讯 > 科技 > >

|6大数据可视化应用设计规范( 二 )


四、字体字号以及画面配色631
1. 字体字号
在数据可视化设计中,一般选中的字体有如下几种:

  • 中文字体：苹方 ， 思源黑体
  • 英文字体：DIN ， DIN-PRO
  • 数字字体：Exo
正常1080P情况下 ， 由于甲方大多数为政府机构 ， 文字要求会比一般的要求大一点 ， 一般都是选择最小16px 。 字号不是固定的 ， 人是活的 ， 规范是由人制定的 ， 切勿迷信规范 。
|6大数据可视化应用设计规范
本文插图

2. 配色法则以及颜色选用
运用配色631法则 ， 将配色定义为主色60% ， 辅助色30% ， 对比色10%去贯穿整套界面 。 文字的颜色通过重要、普通、次要去分配 ， 是带有色彩倾向丰富页面视觉 。
在数据可视化设计中 ， 由于大屏是偏暗的 ， 所以需要选择高饱和度的色彩 ， 并且需要选择统一的颜色 ， 保持画面协调 。
有时候会遇到客户需要高饱和度的颜色并且多个颜色的时候 ， 在选用时尽量选用饱和度不要太高的颜色 ， 不然画面会很不协调 ， 也就是所说的晃眼 。
|6大数据可视化应用设计规范
本文插图

在设计过程中尽量选用深色背景作为画面主背景 ， 这个可以解决大屏因为色差问题 ， 对整体页面的影响 ， 用户也比较容易忽略拼缝中的存在的跨屏感 。 同时深色背景时更容易突出主体 ， 画面效果更好 ， 更能体现流光、粒子、发光等酷炫效果 。
同时 ， 大屏由于有色差 ， 尽量不要使用渐变色 。 如若需要使用需要到达现场 ， 根据大屏反馈的色差 ， 现场调整 ， 但还是推荐尽量使用纯色 。
五、画面饱满以及页面装饰点线面
1. 画面如何饱满
1）字体的饱满
将字体处理后 ， 空白面积减少 ， 整体更饱满了些 。
|6大数据可视化应用设计规范
本文插图

2）文字的饱满
正常情况下为使阅读更方便 ， 标题间距给-10%~20%为佳 。
|6大数据可视化应用设计规范
本文插图

通常数字会比汉字小 ， 为使基线对齐 ， 数字与汉字需分开设置字号 。
|6大数据可视化应用设计规范
本文插图

主副标题字号比例过大过小会导致界面不平衡 ， 建议主标题是副标题的1.5倍 。
|6大数据可视化应用设计规范
本文插图

3）关系的饱满
当A=B时 ， 图标和文字的关系会混淆 ， 这种情况下要满足B>A ， 用间距分层次 。
|6大数据可视化应用设计规范
本文插图

采用黄金分割0.618值 。 也就是横向21个小方块 ， 竖向13个小方块 。 此时 ， 最优雅的板式是A＞B的间距 ， 1＞2＞3的间距 。
|6大数据可视化应用设计规范
本文插图

4）图标的饱满
|6大数据可视化应用设计规范
本文插图

2. 页面如何装饰会更丰富
我们在设计的过程中 ， 经常会因为画面不够饱满页面太空 ， 收到客户的吐槽 。 下面就讲讲如何通过点线面来丰富画面 ， 使画面更丰富更有层次感 。
  • 原画面设计完成
  • 添加装饰线(点线面构成)
  • 调整位置 ， 丰富画面
在画面添加装饰的情况下需要给画面留足位置 。 数据可视化大屏本身面积就比较大 ， 合理运用画面以及拼接屏缝隙添加装饰线 ， 可以更好的减轻拼缝所带来的影响 。


推荐阅读


上一篇：趣投稿|工作复盘：对消息的浅析

下一篇：酷玩儿|随着手机尺寸的增大，苹果应该将Max型号扩大到多大？