袋鼠云：可视化大屏打造智能数据方案全闭环

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

编者按：距热情似火的618国民年中购物节已经不到两个月时间，去年京东商城最终以累计下单金额高达1199亿元（行业口径）的战绩收官。而记者了解到每年借着“京东618”“双11”这两股全民消费热潮的新零售品牌远远不止淘宝与京东两家，已成为了整个产业链方方面面品牌的推广盛宴。

因此，每年的618购物节参与的企业数量可谓“芸芸之众”，这场一年比一年盛大的狂欢节也对支撑其后的运算资源、网络平台、存储与挖掘大数据提出了更高更严苛的要求。针对各家的技术资源体系、技术运维团队、大数据智能技术水平也成为了企业高管的“第一关注”。

而记者采访了多家新零售企业的CIO,提及如何更好地应对即将到来的今年“618”，他们大多表示：“增加服务器及运算资源、优化技术架构提高冗余、完成即时大数据挖掘分析是今年的三大要务。”的确，在保证全民购物节完美的用户操作体验之外，对自身企业在这场没有硝烟的商战中获得的宝贵数据充分分析并加以利用也成为了CIO们所考量的重点，让精准营销落地同时指导未来的市场规划。

如何更好的挖掘大型项目节点中企业获得的巨量数据？如何将挖掘数据中的信息得以简明有效的呈现，最终迅速指导市场策略？记者在618前夕走访了国内新锐的数据智能解决方案企业——袋鼠云。

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司，在今年动作频频，完善提升自身数据智能产品线研发的同时，也在今年大量引入高端人才，全面完善数据智能整体品牌价值。

记者在采访中了解到，袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础，通过袋鼠云的数据内容策划团队的有效建模，配以令人印象深刻的专业视觉设计，通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司，在今年动作频频，完善提升自身数据智能产品线研发的同时，也在今年大量引入高端人才，全面完善数据智能整体品牌价值。

记者在采访中了解到，袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础，通过袋鼠云的数据内容策划团队的有效建模，配以令人印象深刻的专业视觉设计，通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云CEO在采访中向记者介绍了典型客户“中国茅台”可视化大屏项目实施情况，他告诉记者：“世界第一白酒品牌“中国茅台”之所以选择袋鼠云建设数据可视化大屏项目，主要是基于要解决全面打造企业数据中台以及将中国茅台品牌能力直观生动地呈现给领导与参观客户。”

“基于此，袋鼠云为他们从数据管理与应用方式方法上改变思路， 有些甚至是全新的角度与理念，目的也是为了让‘中国茅台’的企业数据价值更好的被利用。”他告诉记者：“因为茅台品牌社会面很广，袋鼠云后期基于数据，提供的诸如舆情分析系统、反黄牛数据系统等富有社会成效的定制功能，获得客户的高度认可。”

数据智能（DI）不仅仅是把数据放在一起，而是要聚集产生化学反应。“中国茅台”这个客户应用就很典型，他继续向记者介绍:“我们给客户的数据分析与决策都是动态的，实时监控大屏即时展现茅台酒的交易总额是多少？哪个地区的茅台酒目前是销量最高的？哪些客户最热衷于他们的产品？这些动态的数据分析结果都能实时呈现在展会现场的可视化大屏幕上。另外茅台做的可视化大屏，也直观地体现了茅台用户群体的年轻化趋势，这和我们之前想象中茅台的消费者较高年龄层的情况不一样。这次可视化大屏解决方案帮助茅台更清晰地了解了自己的终端用户，要知道以前客户数据分散在经销商、渠道商那里，到底谁喝了茅台酒，茅台集团是无法获知的。”

而实时采集数据，实时处理分析数据也是袋鼠云口中的“一大门槛”。记者了解到，类似袋鼠云这样的从数据采集--数据存储--数据应用--数据呈现整体打造闭环的数据智能解决方案服务商在行业里具有很大优势。在中国茅台的典型方案中这一点就展露无遗。他向记者介绍：“中国茅台选择过去传统服务商时，手机端与电脑端的开发商是不同的，因此移动端和PC端后台数据没有打通，形成了非即时的数据孤岛。而采用了袋鼠云“全域”智能数据解决方案后，所有的标准制定都是相同的，数据得以深入而全面的加工。而精准营销、反黄牛、打标签、舆情监测、秒杀系统等等富有成效的模型都是基于企业数据的被统一联结并做出实时分析结果。”

记者谈到实时数据可视化这个部分时，袋鼠云CEO显得自信满满。他告诉记者：“数据的实时性采集非常重要，“袋鼠云”实现了TB级别甚至是PB级别的大数据进行实时处理，实现秒级反馈是最基本的要求。”他继续告诉记者：“这得益于袋鼠云的技术团队多数来自于阿里云，针对业务暴增、恶劣环境等极端情况下的峰值保障应急处理的技术与能力具有相当的经验。”记者还了解到，袋鼠云现在的技术团队都曾经历过“天猫双11”等等大型活动，并协助茅台、百草味、秒钱、申通E等多家公司顺利完成了大促护航等工作。

记者观察：一方面基于人才技术优势打造团队“硬气功”，另一方面深化客户项目落地可视化效果的“软实力”，在袋鼠云眼中一个睥睨新业界的发展蓝图已清晰可见。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

- 硬件+远距离操控——基本交互 -

基于桌面资料研究以及设计经验，总结了基本交互主要包含以下几个关键内容：遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。

一 、遥控器输入

当我们用手指快速便捷地在手机屏幕上点击或滑动时，主流电视大屏及应用的操作还是：使用遥控器进行操作。而市面上不同电视生产商生产的遥控器也有着不同的造型和按键数量，如图1，分别展示了：苹果、谷歌、小米、乐视和中兴机顶盒的遥控器。

图1 不同厂商的遥控器

尽管有着千奇百怪的造型和按键数量，但几乎全部的遥控器都有几个相同的按键：上、下、左、右、返回键和OK键，如图2。它们也够成了遥控器输入的基本交互方式：通过“上下左右键”移动焦点位置，选中界面元素，按“OK键”进行相关操作，按“返回键”返回。

图2 遥控器的基本按键

而上图中还有一些按键，如数字键、菜单键，有些遥控器是没有它们的。这里强调下“菜单键”，比如之前的一个设计，将不常用的操作隐藏到菜单键中，当用户按菜单键时再唤出操作（如安卓端的“长按”，iOS端的“左滑”等）。后来，才发现并不是所有遥控器都有该按键，只能在后续版本中迭代优化。因此，在设计之前，不妨研究一下你的输入硬件设备，避免因“刻板印象”造成不必要的坑。

遥控器输入的特性决定了用户在输入时的效率和便捷程度都大打折扣，因此，在这样的局限下，设计师只能通过各种不同的方式来尽量减弱这种不便捷：

1. 减少用户输入

能不让用户输入就不输入，尽量只让用户去做“选择型”输入，避免大量“文字型”输入，比如电视上的搜索功能中，及时联想、热搜词就变得极为重要，如图3右图所示。

图3 键盘输入的优化

2. 优化输入模式

结合项目情况，去尝试优化输入模式，比如充分利用遥控器数字键输入、重新设计键盘以减少用户操作，如图3所示。

3. 将输入转移

越来越多的产品开始将一些输入转移并引导到手机端进行操作，甚至将手机端直接做为遥控器，比如最常见的扫码登录和TV助手类APP。输入转移能大大提升用户操作效率，但设计时还是要结合具体场景，避免用户过多地在手机和遥控器间切换。

4. 创新的输入方式

随着各种技术的发展，在未来，电视端也会有越来越多的输入方式，而不仅限于遥控器输入，如智能语音输入，而我们也需要了解这些新技术，才能帮助我们不断的创新并给用户带来优秀的体验。

二、导航和菜单

电视端的导航和菜单大多数和手机端、PC端是类似的，但因遥控器输入的特性或多或少的有些差异，主要分为以下几类：

1. 十字

十字导航在国内的产品中比较少见，但因它的主导航和二级导航同时展开，能与十字方向键完美契合，用户可通过方向键在主导航和二级导航之间以最的方式切换，如图4所示。但它最多展现2级菜单，即纵向菜单和横向菜单，又浪费了大量界面空白，因此针对国内大而全的产品而言，往往不是特别适用。

图4 十字导航

2. 磁贴

磁贴广泛应用于各种电视应用产品，一般包含主导航和二级磁贴，往往二级磁贴的展现能使信息更加扁平、直观及可视化，且相比于十字导航，操作的方向不会受到限制；但往往焦点从磁贴移回到左侧/上侧导航需要更多的操作成本，如图5所示。磁贴的信息展现能够充分利用界面空间，并把信息前置，因此，对很多内容型产品而言，磁贴可以很好的适用内容露出，吸引用户进入。

图5 磁贴信息展示

3. Tab

广泛应用于手机端和PC端，当然在电视端中也经常使用，往往起到一级导航的作用，在告知用户所处位置的同时，很好的引导用户进行模块间的切换，如图6所示。然而，Tab导航也有一些基本的设计要求，比如尽量不使用多层Tab套用，即使不得已套用也需尽量保证表现形式不同；另外，在“焦点”的章节，也还会提到Tab切换时的加载问题。

图6 Tab导航

4. 列表

列表也是手机端最常用的菜单展现形式，在电视端同样适用，如电视直播类产品，主功能就利用了多层列表套用的展现形式，详见图7所示。而在电视端，列表的样式也是多种多样的：如纯文字列表（可配按钮）、图文列表（可配按钮）、展示型列表（不可操作）、横向列表（选集列表）等。

图7 图文列表和展示型列表

5. 其他

电视产品上最常用的菜单和导航模式一般都可以总结为以上4种，当然还有一些其他的方式。随着用户多设备的使用，越来越多的手机端和PC端的设计模式开始在电视上出现；而更多的产品界面因其复杂的功能无法只使用1种菜单和导航模式，往往是混合型设计，如图8所示。不过，无论使用何种导航和菜单类型，电视大屏幕的菜单和导航的设计目标终归是：用户可以快速定位，并且能够预测出操作结果。因此，灵活使用导航和菜单，使用户不会迷失在功能繁多的界面信息中就尤为重要。

图8 其他类型的导航和菜单

三、信息展现

在前面的文字中，我在“电视”这个词后面都紧跟了“大屏”这个词，电视的屏幕是比PC还要大的屏幕；而用户也因为如此大的屏幕，往往是坐在两三米之外。因此，电视端的信息设计有着两个显著的特质：为大屏幕而设计和为远距离而设计，有着以下几个注意事项：

1. 重视信息的识别性和简洁易懂

文字、图标和按钮，乃至toast提示，在电视端的识别性问题比手机和PC端更为凸显。因为远距离、大屏幕，加上电视本身的休闲属性，使得用户的注意力较为分散，因此，界面中的信息和元素就需要适当放大，至少保证用户能够在两三米之外能清晰看到，如图9所示。

图9 信息识别案例

2. 提前露出信息和多露出点信息

在“遥控器输入”章节中有提到，提前露出信息能够在一定程度上减少用户输入，并在产品层面吸引用户进入。不过，和手机端设计类似，还是需要甄别哪些信息需要提前露出、怎么露出以及露出信息后对产品稳定性和性能的影响；这些都需要基于产品特点，并与产品、视觉和开发共同协商确定。而“多露出点信息”却相对容易理解，主要是告知用户右边/下边“还有一些内容，快去看看”，如图10所示。

图10 信息露出案例

3. 避免过多无模块信息的展示

相比于手机端，因屏幕较大，与PC端类似，往往需将屏幕划分为多个排列整齐的小屏幕来进行设计，即模块化、区域化的设计信息展现。通过这种方式，可以使信息布局更为规整，用户不容易迷失在繁杂的信息中，如图11所示。

图11 信息模块化案例

四、控件位置

控件的位置问题是初期开始电视产品设计时非常容易犯的错误，如图12所示。左图中的“添加股票”按钮，当已添加的股票过多时，可能会看不到该按钮，或需用户按很多下才能使焦点移动到“添加股票”；右图中的文字浏览，完全不知道如何浏览，也不知道如何将焦点从文字移动到“查看票种”按钮。这两个案例阐述了：按钮的位置导致按钮丢失或操作效率较低；电视端文字阅读也得遵守焦点浏览原则，如每行1个焦点或整篇1个焦点，若是后者，就得保证可见范围内文字已展示全。因此，在电视大屏中放置交互控件，需充分考虑是否符合电视端的使用方式以及用户的操作效率。

图12 控件位置案例

五、焦点状态

前文提到过很多次的“焦点”，它其实是电视大屏用户体验的第一要素，而在交互说明中最常出现的也是“焦点怎么样了”。无论是交互还是视觉，在初期接触电视产品设计时，可能都会因为“焦点”的设计失误引发用户体验问题，比如：焦点的移动顺序不一致（从哪里来未回到哪里去，焦点在界面中乱跳）使用户认知错乱；焦点的不够醒目或样式不统一使用户无法找到焦点等，如图13所示。

图13 不统一的焦点样式

电视端焦点也是有着各种不同的状态的，如图14所示，“焦点状态”一般采用“描边、放大、高亮等”方式使其明显，而“按下状态”可能不一定有，或者是和其他几个状态相同。

图14 焦点状态种类

可能需要简单讲述一下“标记状态”和“半选中状态”：“标记状态”在PC和手机端也非常常见，比如告知用户所在位置在哪里的Tab标记；而“半选中状态”是“焦点状态”的一种情况，即移动到某个焦点后，不进行加载或触发操作，需按“OK键”才触发，如图15所示。这种状态在早期电视盒子性能不足、在Tab切换时经常需要使用，因为如果直接切换焦点时就加载，可能会造成卡顿。

图15 标记状态和半选中状态案例

六、结语

我总结和归纳的这些基本知识和注意事项，虽然它们能够帮助我们快速了解电视大屏的基本交互知识，避免一些不必要的坑；但还远远不够，更多的是需要在实际参与项目中快速学习、快速应用，因此，之后我将会基于我参与的项目再次进行电视大屏的实战总结，欢迎下次再与大家一同交流和成长。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

2016年3月，阿里巴巴中国零售交易市场2016财年商品交易即时总额即将突破三万亿，这是阿里历史性的一刻，也见证了消费的力量， 为了记录这一历史时刻，三万亿大屏项目应运而生。这是阿里UED的一些文章。

城市大屏

在技术上，所有的媒体大屏都是基于web端技术实现的，这样的选择是因为数据大屏幕只是数据可视化在我们日常工作中的一个运用场景，我们需要能让数据可视化的技术能在日常工作中得到最广泛的落地运用，web端当然就是我们的主战场。当然。抛开这一点，我们认为web端的相关技术也是大家落地相关数据可视化开发的良好平台，为什么这么说呢？这基于以下几点：功能全，前端技术svg，canvas，webgl三者的相互补充，已经让我们在交互，2D&3D以及大规模数据量绘制有了充足的发挥空间，其次我们团队在以前开发数据产品的过程中已经用Nodejs建立了良好的中间件来连接各种数据源，这让目前接入各种数据库变得非常便捷。最后就是便于分享，在任何硬件设备上只要打开浏览器就能看到最终的数据可视化作品，在当今这个注重信息分享的时代，这一点非常关键。

交通类大屏幕界面设计应用案例欣赏 

统计图表类大数据可视化界面设计

相关负责人介绍，大屏幕最上方一个个显示着列车、车站景象的小窗口是1号线各个站点的实时监控图像，可以清晰看见地铁内发生的情况。下面有着紫色绿色条纹的一幅幅图像就是地铁的信号系统，哪辆车行到哪里，间隔多少，是否有情况需要停车……这里一目了然，调度人员就是在同步的电脑屏幕上进行调度，保证地铁正常运营。最下面的是供电系统，停电、变电、送电等操作都在这上面完成。

（蓝蓝注：转载这篇文章，是为了让设计师和产品经理们了解到客户平时的业务和工作方法）

蓝蓝设计经常会接到大屏设计的项目，比如中国移动互联网监控大屏可视化设计及开发、太极集团承接的中央台应急指挥中心大屏可视化设计、交大思源承接的北京地铁轨道批挥中心大屏可视化设计、数码视讯展厅大屏可视化设计，在积累了一定经验的同时，也在不断的学习和丰富关于大屏设计的特点及数据可视化的表达方式。

1.面积巨大——用户站远才能看全内容（所以字也不能设计很小）。
2.深色背景——紧张感强，让视觉更好的聚焦，省电。
3.不可操作——大屏主要用来给来宾观看的。来宾一般不会直接操作大屏。
4.空间局限——大屏不像网页有滚动条，它的长宽都是固定的。
5.单独主题——每块大屏都有具体想给来宾表达某个主题

知道了这些，如果我们遇到一个具体的大屏项目，要怎么来设计呢？

今天上午参观了太极上周刚搬的新家，5000多人的新办公楼群，不知不觉聊到12:43，匆匆离去。听到我们参与的项目要评国家科技进步一等奖，听到设计界面得到多方全国范围内的认可，听到客户赞比同行业设计公司做的好，听到客户由项目经理升总监，还是蛮开心的。作为外包方，我们是弱势群体，有时候觉得很辛酸，这个客户没有用高人一等的优越感和我们交流，而是用卓越的交流方式让我们感受到这件事的价值和意义，被尊重，我们也回报以高优先级，卓越的作品，不惜加班加点去工作。

这次，还有之前几次和客户、朋友的交流让我非常受益，感受到不同的人做事，换位思考，打动人心说话的方式，项目管理方式，视野的广阔性和方法，教我许多。信息量太大，恨不得记下来。

今天主要是和大家分享一下阿里云数据可视化展示平台的搭建过程，我会尽量将整个过程本真的还原出来，帮助准备自己搭建平台的小伙伴们扫除一些障碍。

我们这个平台是用来搭建大屏的。什么是大屏?大屏是我们集团内部对于数据可视化的数据大屏的一个简称，目前我们集团有三种大屏，第一种是触摸式大屏，它的最大特点是能够展示全量的数据，一般来说这种大屏都会带有互动。

第二种大屏是数据大屏，也是我们的双十一大屏，它的特性是展示性非常强，能够让大家快速的了解到大屏背后讲述的故事。

第三种大屏是数据产品类型，这种大屏的图表都非常简单易懂，基本上就是折线、饼图等等这一类的图表，对展示性的需求也不是特别的高，主要目的是让商家快速读懂图表的意思。

大数据可视化是个热门话题，在信息安全领域，也由于很多企业希望将大数据转化为信息可视化呈现的各种形式，以便获得更深的洞察力、更好的决策力以及更强的自动化处理能力，数据可视化已经成为网络安全技术的一个重要趋势。

总之，借助大数据网络安全的可视化设计，人们能够更加智能地洞悉信息与网络安全的态势，更加主动、弹性地去应对新型复杂的威胁和未知多变的风险。

可视化设计的过程中，我们还需要注意：1、整体考虑、顾全大局；2、细节的匹配、一致性；3、充满美感，对称和谐。