Senseinsight客群洞察数据大屏最初作为展会演示Demo，设定使用场景是商店商场等场所，主要目的为了吸引顾客注意力，满足客户对客群整体的数据读取，主要功能包括：

1.客群整体数据可视化;

2.实时大屏互动：如微笑成为VIP的，举手好评等;

3.识别客户的人脸图像，分析生成人物画像;

4.顾客身份及人物数据信息卡片;

5.顾客及员工签到功能。

后期应用领域扩充至教育领域及客户定制展会，根据不同的使用场景又进行了不同程度的功能及设计调整

设计师最好能够在每次项目后复盘梳理一套固定的流程，查漏补缺，做到对下次的项目做到心中有数。也方便与产品沟通交流。

根据产品文档确认梳理好全部功能点后，设计师需要对功能的优先级进行排序，划分主要功能、次要功能及辅助功能。功能的优先级排序直接影响了视觉上的布局及阅读顺序。

• 主要功能：最大区域展示，视线浏览次序最优先，居于屏幕最左或中央。

• 次要功能：多为图表展示，居于屏幕两侧或底部。

• 辅助功能：主要功能的辅助信息，通常不会主动显示需要一定的触发条件。

根据功能优先级确定界面的整体布局。需要注意的是拉开视觉主次对比，保证视觉重点，尽量保持一个视觉重点的原则。“乱花渐欲迷人眼”如果所有设计指标的视觉比重类似，则很难抓住用户注意力，无法达到设计引导用户视觉的目的。

作者采坑经验分享1：

布局设计需要提前确认是否有限制尺寸或其他条件。本次设计的的主要功能区为视频，而后续与产品进一步沟通挖出主要功能视频画面的限制尺寸为16：9，那么界面布局的可能性减少了。

（本次项目设计布局）

作者项目采坑提示2：

预先与产品沟通大屏设计是否存在多个尺寸，选择中间尺寸作为基准，方便后续设计上下尺寸扩展。本次涉及到了3个尺寸，最终以1920*1080为基准尺寸进行设计。对1920*1200尺寸上高度拉伸适配，对2340*1080尺寸上进行宽度布局的调整。

1.液晶电视屏

物理属性：本次设计基准屏幕大小为1920*1080分辨率，尺寸比例为16:9、液晶大屏电视。

色彩特性：存在色彩、偏冷色、对比度弱于MAC电脑屏幕，纯白色(#ffffff)容易在电视上造成颤动。

2.拼接大屏：

物理属性：每块小屏的尺寸比例为16:9、设计尺寸可以将总高预定为1080px,除以纵向的数量得出每块的高度360px和宽度640px。再用单块的高度乘以横向的块数，得出横向的总宽度为2560px。

缝隙:常见的有无缝，1.7mm/3.5mm/三种，缝隙越小价格越贵。设计时提前考虑到缝隙位置，尽量避免缝隙对图像的截断。

3.为什么大屏设计多深色呢？

• 硬件条件的限制：拼接屏幕中间存在缝隙，深色更容易让屏幕看起来是一体的，即使内容跨屏也不易产生割裂感。

• 展厅环境复杂，遇到带色彩倾向的灯光对浅色屏影响大于深色屏。

• 浅色背景适合阅读展示大量数据信息，深色背景适合读图，带来更震撼的视觉效果。

• 深色背景会在视觉感官上后退，对于彩色的衬托能力更强，可以拉开层次让视线更好的聚焦，专注于内容。

• 多屏操作可以减少屏幕切换的拖尾。

• 更方便做出一些流光、粒子等炫酷效果。

• 更省电。

• 
  

1.确定视觉大方向

根据视觉调研及产品功能分析，数据内容属于次级功能，需要清晰直观且不争抢主视觉的吸引力，扁平科技风很适合。产品功能具有娱乐互动性，可以参考一些科技类游戏风格；设计的使用场景是在人多嘈杂的展厅中客户的注意力是十分分散的需要增强对比。如何在科技产品的以蓝，绿为主色调冷色系产品突出重围，吸引用户的注意也是本次视觉设计需要考虑的重要因素。

2.视觉符号提取

根据产品和视觉方向，扩展关键词。从感觉及视觉两个角度去细化整体的氛围感和设计的原则，丰富视觉的更多细节。从而达到心中对设计的预期更加的明确。

3.参考情绪版

设计师可以利用情绪版图片参考风格、色彩搭配、及元素运用，也方便用于与产品展示敲定设计风格。

4.视觉元素应用至自己的设计中

设计是细节的体现，灵感一方面来源于自身的生活经验，一方要借鉴他人的生活经验。

没有轮子的参考设计就是闭门造车。笔者在设计前会参考搜集了大量的科技感图片，提取里面具有科技感的元素如：灯带、芯片卡、金属感、发光等，将其统一风格，灵活应用至自身的设计中。

设计来源于生活，另一些比较有创意的想法来源于设计师自身生活的经验。比如VIP皇冠灯是本次的一个设计亮点，灵感来源于笔者高中时追星的经历，BIGBANG粉丝名为VIP, 最具代表性的应援物为皇冠灯，而皇冠代表的含义恰好能体现VIP用户的尊贵。当用户微笑达到一定阈值，就能够点亮皇冠灯成为VIP用户，因此我在灯的下部分加入了可视的进度条，让用户明确的看到任务进度，更具娱乐性。

在应用场景改为课堂的时候，又结合学生时期的经验：表现优秀的学生会得到老师奖励一朵小红花，因此我将皇冠元素替换成了花朵，小改动既能营造出符合课堂的氛围。

5.色彩的探索与取舍

设计稿尝试了蓝绿、蓝紫、蓝黄等常见科技产品配色。多稿对比后得出结论：相邻冷色调如蓝紫，蓝绿色彩感知上统一，但缺乏对比、且太过冷静。蓝黄色中VIP黄色亮度偏高，整体对比虽强不适合长时间观看阅读，且黄色作为底色对白色部分文字来说易读性会减弱。最终稿在配色上确定了粉蓝撞色，既体现了互娱性，在科技配色中并不那么常见，作为底色又能够对所有的文字信息较好呈现。

颜色搭配需要讲究对比于调和，根据产品调性确定主色与强调色的搭配，但要慎用饱和亮度过高的颜色，在深色模式下会对比过强，太过刺眼反而会降低识别度。

数据可视化的核心是数据，明确好图表本身要达到的目的比制作好图标本身更重要，可视化是辅助数据更易理解的手段。

在数据设计之前，要对数据进行理解分析，考虑当前场景下目标用户的图解能力，选择恰当的数据图，表现数据的对比与规律。普通用户相对于专家级用户的读图能力会弱很多，在复杂的环境更不会愿意花费脑力去理解。对于专家级用户对于复杂图表的需求更多可以放在管理后台。

图标设计注意不要舍本求末，为了视觉效果的新奇选择一些对普通用户不太友好的图表，增加了理解成本和学习成本。

在设计动线图表可视化时，我们发现现有图表无法直观清晰的表达单多用户在多点间的移动路径及排序。不能调用普通图表时，这时候设计师根据需求主动发挥创造力创新图表。

在多人动线选择排行图表中：用颜色表示不同的路径；用粗细表现了受欢迎程度；横向标注移动次序；纵向标注定点位置坐标，表现了不同路径的选择。在固定有限的空间内用一个图表现了4层信息。

与普通交互不同，SenseInsight的交互主要是对屏幕外的人脸识别和动作识别，包括：表情识别微笑成为VIP，肢体识别举手好评。

新的交互方式在设计的时候需要引导用户主动体验,做出未发生的动作。如：状态引导、文字引导、动态引导…

（1）VIP和非VIP的状态区分+文字引导

（2）举手动效引导

（3）微笑进度可视化

（4）VIP优越感的身份加持

作者： 唐小葱