【可视化大屏学习2】大屏帧率、大屏设计（ui）等

数据开发流程

需求阶段

• 需求： 与运营产品讨论需求，业务方吧需求提交到JIRA，并且和产品沟通过
• PRD评审：产品评审PRD文档
• 技术方案讨论
• 技术设计评审
• 设计评审的原则
• 设计接口
• 设计字段
• 开发
• 代码
• 提测
• 上线
• 文档

设计阶段

开发阶段

测试阶段

发布阶段

运维阶段

可视化大屏设计流程

展示类

功能+展示型

需求调研

• 产品定位

  • 产品定位

  • 产品要解决哪些问题

  • 产品服务的人群

    • 面向新用户就要使用容易理解的图
    • 面向专家要用更专业的图

• 用户研究

• 需求评估

• 竞品分析

• 技术方案调研

  • 可能会遇到技术壁垒

可视化大屏分类

拼接屏

• 由46～55寸的液晶显示屏拼接而成，有一定的缝隙

  • 44的拼接大屏与电脑屏幕比例都是16:9，当投屏电脑分辨率为1920px1080px
  • 3840px2160px 就可以用1920～38401080～2160px
  • 可以1920px*1080px设计，然后同比放大4k

LED屏

• 无缝隙，由成千上万led等构成像素点，p值越小成像就越优秀，越细腻

产品设计

1.确定大屏的使用场景

• 大屏现场色差测试

• 观赏大屏的距离

• 环境的明暗程度

  • 如果场景较暗，色彩就不能太亮

2. 布局数据

• 模块化，把同类的数据放在同一块区域
• 强化重点信息，弱化辅助元素

3. 格式塔原则

• kiss（keep it simple and stupid）

• 一致性原则

  • 对业务、行业、数据等方面有效的表达

• 设计规范

  • 本能

    • 抓眼球

  • 行为

    • 满足行为

  • 反思

    • 认同依赖

4. 黄金比例

• 黄金比例是将一个整体一分为二，较小部分与较大部分的比值等于较大部分与整体的比值，约为0.618
• 设计第一个元素是100px，临近元素要尝试60px或者160px大小的设计
• 留白，需要有外围的边框，图表占据框框的0.6的黄金比例

5. 色彩

• 色相

  • 比如，蓝色，红色，这些都是色相

• 明度与饱和度

  • 明度是指色彩的明暗程度，最高颜色为白色，最低颜色为黑色，色彩的明度直接表现了数据的大小，一般不要超过六个等级，同时要尽可能把色彩明度跨度拉大，增强对比性

  • 饱和度是指色彩所具有的鲜艳强度，饱和度最高的颜色被成为纯色，最低为无彩色，大屏背景一般会采用暗色调，饱和度不宜过低

    • 在明度最低的背景中，需要使用饱和度和明度较高的颜色，这样的视觉效果更为突出聚焦

• 认知配色

  • 人对色彩的感知具有共性

    • 比如红色、橙色、暖色系会看起来物体更大一些，相反，用冷色调会显得更小一点，视觉上更有收缩感