大屏十诫

DataViz

在大屏产品设计中的10大建议。

作为一个新晋的热门产品,大屏在理想中的状态是这样的

然而很不幸,90%的情况下,我们得到的结果是这样的

为什么?因为大屏从设计到上墙(扶我上墙)要通过多次周转,最后的效果还得看硬件的脸色😂

设计⟹坑⟹坑⟹坑⟹上墙

为了少踩坑多上墙,超级背锅侠给你以下十大建议。

1. 谁是用户

某一天,有个你的钉钉响起,一个陌生人发来消息:“全球500强xxx要做一个大屏,高大上那种”。可别被他迷了眼。这样的一手咨询往往来自销售或者项目经理,他们为了拿下项目可是什么都能吹。你得虚心求教,小心求证,把幕后真正的用户抓出来。为什么这样说?因为大屏的客户一般不是我们可以天天接触到的,至少的得带CXO头衔。作为设计师,特别是有追求的设计师,可不能被高段位所吓倒,你必须找到真正的用户,并且和他至少面谈一次。很多信息在经过“中间商”传递后就缩水了,或有意被加上自己的主观意见,或由于传递者的误解而曲意;直接面谈不仅能够得到第一手信息,通过观察引导,你能够挖掘更多的项目背景和意义。

  1. 找到真正用户
  2. 进行面谈

2. 使用场景

大屏的使用场景是什么?找一间大的房间挂起来不就OK了么?房间越大越好,能容纳的人越多越好。我们关注的不是场所,场景是能将环境、产品、目标串联起来的系列因素。

一般来说,大屏产品都会使用专用场地,如果是现有场地,就得知道具体的属性。场地面积决定了大屏产品可以采用多大的物理尺寸,面积同时也能预测出参观人数。具体的使用场景是什么?会议专用、视察参观、全局监控,不同的使用场景需要使用不同的产品设计路线。比如我们不能讲公司的敏感数据暴露给来访参观者,而是有选择得进行展示。面积、物理尺寸、观看距离事关大屏受众的体验。

  1. 专用场地or公共场地
  2. 场景面积
  3. 可视距离

3. 硬件规格

大屏的硬件基本是电脑主机+大屏组成。从电脑配置上看,不管最终上墙是以何种形式(独立客户端或者浏览器),首先确保一块优秀的显卡,必须NVIDIA GTX 或 RTX系列;CPU和内存基本主流配置就可以(如4核+4G Ram)。记住,一定要给出详细的硬件要求并且得到确认。大屏硬件至少是65寸以上,以单屏液晶电视(常规屏)或者拼接LED(拼接屏)为主;单屏投影简单来说就是一个外接显示器,操作简单,一般情况下不会出现异常。而拼接屏要收到电脑硬件、转接线、屏控软件、屏幕硬件这些因素的影响,经常出现一些未知错误(如显示错位、色彩偏差等)。如何避免这些异常,就需要对所有环节的影响和限制都做到心中有数,在设计时避免触碰到限制边界。另外,对于拼接方式,我们建议用2x2,3x3,4x4,这样等比放大的形式,避免拉高(2x3,2x4..)或拉长(3x2,4x3)的拼接形式,因为我们用电脑投射的界面基本属于16:9,不同于这个比例并全屏显示会明显被拉伸。

  1. 常规屏or拼接屏
  1. 避免和利用拼接缝
  1. 硬件参数
  2. 投屏方案

4. 真实数据

数据呈现是大屏设计的基础。在整个项目之初,我们能够获得的信息无关这两种:原始数据和产品目标。那么,在数据呈现上,我们主要考量的就是以下两个问题:原始数据是否能够支撑起产品目标,产品目标是否全面覆盖了全部数据。数据可视化就是这两者之间的纽带。

保证数据来源,达成产品目标

比如产品定位需要看到过去1年的某项数据变化趋势,在数据层就必须保证有1年周期的有效数据;

深入挖掘数据,反向优化产品

同样是1年的数据变化趋势,如果1年内每个时间粒度的值是没有明显变化,那说明这样的产品定义是不合理的,应该重新考虑其他数据纬度。

  1. 理论数据和真实数据的差异
  2. 考虑数据的极限表达

5. 沟通协调

大屏是一个高度定制和集成的产品,在项目初期/中期/后期所需要沟通和协调的侧重点也不一样。

项目初期,需求确认

项目中期,设计开发

项目后期,测试验收

  1. 沟通技术方案
  2. 确定布局方案

6. 输出分辨率?=显示分辨率?=物理分辨率

大屏产品中的分辨率概念和常规的分辨率有所不同。我们知道,图片分辨率和显示器分辨率是可以不同的,但是只有图片分辨率等于显示器分辨率(物理分辨率)时显示效果最佳。大屏产品都是从电脑输出视频信号到大屏,我们需要确保输出信号分辨率等于大屏物理分辨率,这样大屏的显示效果才能达到最佳。目前主流视频信号支持4k,所以显示大屏的分辨率最好不要大于4K,否则在显示时会出现明显的模糊效果。我们有的客户为了显示对大屏产品的重视(不缺钱),大屏分辨率能上到8k,但是信号源的分辨率又不够造成显示效果差,多花了钱又适得其反。

7.色彩限制

大屏屏幕的色域远远低于电脑显示器(特别是Mac电脑),所以在设计时,要注意大屏色域,否则最后呈现的效果惨不忍睹。其次,不要使用过于复杂的特效,比如五颜六色的黑,色彩斑斓的灰。大屏对于色阶的还原也有限,普通的渐变色都有可能形成彩虹条。

  1. 色彩范围
  2. 色彩梯度
  1. 慎用渐变阴影
  2. 对比清晰确定

8. 保证地图轮廓正确完整

realme发布会出现重大错误!共青团微博怒斥:中国一点也不能少!


11月4日,越南海关总局宣布,因车展中的途锐汽车自带软件中含有中国主张的南海九段线的地图,违反了越南法律规定,决定对越南大众汽车公司处以2000~4000万越南盾的罚款,并没收途锐汽车,但是为了避免浪费不销毁相关车辆,而是充入国库。

9. 现场调试

在完成功能开发测试工作后,大屏内容上墙是非常关键的环节。大屏约小,最后产品实际效果发生问题的几率会越小,屏幕越大,拼接方式约复杂,显示效果越可能发生不可预知的的异常。我们建议:

  • 开发完成后首先在windows系统下进行调试,验证文字,色彩显示是否正常
  • 现场自带无线鼠标和无线键盘,自备视频接口转接线
  • 现场效果为最终效果,切勿以自己电脑为准
  1. 自带硬件

10. 傻瓜式操作

大屏是不适合交互操作,在大屏上进行鼠标移动是一项非常费劲儿的工作。如果确实需要操作的,我们建议通过以下方式实现:

通过自动播放,轮播

设置播报场景和脚本

通过手持终端进行操作