大屏业务拆解实例与方法

2021-08-03 by uino 84 实施工艺 产品

简介

本文章分为3个部分。一方面结合网联平台项目实际案例,了解实际大屏项目的实际做法。第二部分是遇到大屏项目的思考方法。最后一部分是一些链接。包括大屏产品专业知识的培训、大屏项目中的调研方法(内附rp元件库可作为制作粗略原型图制作原料)、包括大屏项目中的实施方法。

网联平台项目

网联平台项目背景

网联平台项目对接的是网联平台,网联平台一般指非银行支付机构网络支付清算平台。目前所有的网上交易都会在网联平台核算然后钱再银行和用户之间交易。

利益相关方&项目目标

直接对接人基础平台部仇工,仇工和基础平台部老大晓光总汇报。在向上汇报是非直管基础平台部门的老大黄总(分管应用技术部、业务运营部),黄总上面是董总(网联平台董事长),董总和行长和人民银行行长汇报。image.png 一开始项目直接对接人是仇工、然后上面是黄总。后来由于网联几大主题第一个大主题就是网联介绍,简介里也说了,网联介绍本来打算展会上用,此时对接人是仇工,仇工职位是工程师对业务不敏感,在网联介绍这个主题前期和仇工需求沟通讨论时,没有很明确的需求描述,在仇工觉得没问题的时候,然后和黄总汇报,在汇报上黄总全盘推翻之后黄总推荐了综合部娇姐。娇姐是负责展会的对展示内容比较清楚,后面将网联介绍主题进一步拆分了几个场景,也就是春风暖心、建设初心、科技匠心、为民恒心、未来雄心几个子主题。后边会详细介绍这些主题的过程。

目标分解

客户心里大的预期是什么样的,或者说主线是什么样的? 网联介绍主题(主要展会展示用没有对接真实数据) 子主题:春风暖心、建设初心、科技匠心、为民恒心、未来雄心 一键隔离(和网联介绍主题过程类似) 平台核心业务指标(传统2D云运维大屏) 平台系统运行状态(传统2D云运维大屏)(和平台核心业务指标类似)

指标分解

每个主题甚至是子主题需指标需要对接哪些子系统? 1.一种情况是业务描述也可理解展示用,此时数据不存在来源什么子系统都是客户嘴里收集。 2.一直情况是真实使用,此时不仅要访谈从客户那要到什么数据,也要调研子系统有没有这些数据,考虑没有怎么办,这时候需要和客户包括相关方(接口)沟通解决办法。

评价体系

展示什么数据?涉及具体在子系统里取什么数据?包括和客户最终获得他要展示什么数据所表达的业务名称。比如网络延迟率:XXX BPS/S。 XXX表示数据大小,BPS/S表示单位。

数据处理

数据处理表示拿到这些业务指标和数据怎么用到大屏中或者说系统中。主要考虑两点。 1.对于展示类数据如何展示?重点展示在场景中间。 2.对于对接子系统数据如何展示?包含用什么类型的图表,这些图表的布局。

网联介绍过程

网联介绍主题过程(颖怡口述)

项目8月份启动,计划9月末交付,为了参展10月的金融展会,后面展会不办了。 前三个月和仇工反复沟通确认网联介绍主题。最终出了下面这个原型图。 image.png 按照这个原型没有实际的去做,然后和黄总汇报的时候,被黄总全部推翻,找到了新的网联介绍业务负责人娇姐。下一次汇报确定大目标,开始步入正轨,之后从娇姐拿到需求然后拿着原型确认之后慢慢有了网联介绍大主题下的五颗心小主题。期间客户也会根据他们提的东西,给我们找素材。然后我们也会根据故事线给他们提要求(还缺啥素材啊等等)。 最最开始那版也是我自己想想出来的,因为我们一开始的故事线是凭空想的(思路方法来源强哥),跟客户这边的实际情况差距还挺大的,他们会提出自己的想法,给素材,然后我们不断调整故事线。 一.先有故事线 上面这个图设计基本上就是照着草图,然后做精细一些。包括右侧那俩图表,都是因为客户这边用面积图,他也用面积图,我还记得当时马上要第一次汇报,就剩一天,设计一天赶出来的。就是先有故事线,然后碰故事线,然后碰故事线的过程中客户会给我们素材,草图就是根据故事线和素材拼出来的。因为我们一开始的故事线是凭空想的,跟客户这边的实际情况差距还挺大的,他们会提出自己的想法,给素材,然后我们不断调整故事线。 网联介绍大屏故事线V1 开始:地球出现 image.png 地球拉近出现中国地图: 第一个场景: image.png 标题:网联平台组织架构 中间:

  • 中国地图上左边浮现机构(并不指明坐标,只是悬浮),右边浮现银行(并不指明坐标,只是悬浮),上空浮现网联logo,网联logo与机构、银行之间有双向连线,网联logo发光并且以一定的速率旋转(类似中科院项目效果)
  • 目的:以比较震撼的效果展示网联的业务架构,从机构到网联平台到银行 左边图表:
  • 网联定位:在中国人民银行指导下,服务于非银行支付机构和商业银行支付业务的特许清算组织,致力于为金融行业提供高效、安全、专业的跨行资产清算与业务增值服务。
  • 目的:介绍网联的定位 下边图表:
  • 消费者-商户机构-网联平台-受理机构-商户
  • 目的:介绍网联的业务链路 右边图表:
  • 初心使命:让支付更美好
  • 价值观:诚信 协同 担当 服务
  • 发展原则:守正 安全 普惠 开放
  • 目的:介绍网联的价值使命 第二个场景: image.png 标题:网联平台基础设施 中间:
  • ①中国地图上展示三地六中心:北京(北京亦庄、北京昌平)、上海(上海外高桥、上海静安)、深圳(深圳福田、深圳盐田),数据中心需要有比较立体的感觉;②三地六中心组成一个三角平面,需要区别于地图底色;
  • 目的:展示三地六中心 左边图表:
  • 高性能:大于25万笔/秒峰值处理 高安全:四级全系统金融等保 信息数据完整、保密、抗抵赖 高可用:99.999%系统高可用率 高可控:整体框架自主设计 核心应用自主研发 高扩展:应用->服务器->数据中心->城市 多层级横向扩展能力 高一致:本地、同城、异地多层级一主多备 交易、清算、对账三方一致
  • 目的:展示网联平台的特色 右边图表:
  • 顶牌:9.2万笔/秒 图表:历史最高峰实证超过9.2万笔/秒的趋势图 顶牌:全网全链路系统成功率>99.99% 网联平台系统成功率>99.999% 全网全链路平均耗时<240ms
  • 目的:展示经过具备六个高特征的三地六中心的架构可以实现全网全链路系统成功率>99.99% 网联平台系统成功率>99.999% 全网全链路平均耗时<240ms这样的成就,进而实现峰值9.2万笔/秒这样的能力 二.客户有思路 然后拿着自己故事线去跟客户这边碰,然后客户说,我觉得你这里内容有些少,然后我这边是有春风暖心,建设初心,科技匠心这三颗心的概念的,能不能按照这个给我做啊,春风暖心呢展示的就是你这个故事线里头的啥啥啥内容以及啥啥啥(给素材),建设初心展示链路,这个我一会给你(给素材),科技匠心的话跟你第二个场景比较类似,想讲讲我们的技术亮点。 这个就是我说的,先有一个故事线,然后客户这边就会有想法。然后就根据客户提供的素材和想法,整理新的一版故事线,然后再碰,客户这边又说,其实我们这边不止三颗心,是五颗心,还有为民恒心和未来雄心。后面反复确认,收集素材。 三.反复确认 为民恒心的内容问娇姐,娇姐说我把握不住,我得问问领导,未来雄心我给你一些素材,你再琢磨一下。此时第二版故事线及业务需求及原型图基本确认。只要原型图没问题,落地概率有60-70%。 接下来又一次与业务负责人沟通确认故事线收集反馈。 网联介绍大屏故事线V2 开始:地球出现 image.png 第一个场景: 地球拉近出现中国地图: image.png 出现机构和银行(每一个小亮光都是机构或银行,颜色区分) image.png 出现网联:(有光束从星星点点的机构和银行连到网联,网联图标做成立体的,旋转的,浮在地图上空) image.png 出现真实链路: image.png 第二个场景: 地球拉近出现中国地图: image.png 出现网联的三地六中心和两边图表: image.png 出现连接三地六中心的光环,光环有流动效果 image.png 在地图页面模仿原来视频,从北京上海深圳三个点到全国省会的覆盖。 image.png 修改意见: 开始:地球出现 image.png 地球拉近出现中国地图: image.png image.png 1:春风暖心 image.png 2:建设初心 image.png 3:科技匠心 image.png image.png 4:为民恒心(左右两边图表空置,下周一前提供) image.png 5:未来雄心 中间放吉祥物 image.png 四.领导汇报 故事线与业务负责人确认没问题,然后客户拿着我这个故事线去找他的领导讲了一遍。 然后领导觉得可以,挺好的,逻辑都有了,做吧! 然后我就找设计沟通输出高保真图。 跟设计沟通也是拿着这个故事线,一个个给他讲,春风暖心想展示啥,里头包含了什么业务。 比如中间动画想展示一个断直连的概念,什么是断直连呢,找客户问,客户给素材。断直连怎么跟地球跟中国关联呢,噢覆盖全国,就有了中间动画的中间和地球部分。左边图表要突出什么呢,右边图表要突出什么,分别都有素材,然后设计根据素材去提取重点的字是什么颜色,次重点是什么,一般是什么颜色,不重要但非要展示的怎么展示。 对了,得跟设计说清楚,我们想要动态的,做高保真的时候要想想动态效果。 我们做出来高保真以后,客户觉得看不到动态效果没法给领导汇报,然后我们拿着春风暖心和科技匠心做完了开发,部署在公司测试环境,拿给客户看效果的。 综上根本不是一下客户就知道他想要啥,都是一点点问出来的。 最后定的网联介绍主题5大心,高保真原型图。 image.png image.png image.png image.png image.png 这是第一版高保真图,图中看不出来动态,但是最终实现动态效果确实全靠设计。原型图内部对应故事线,里头是能跟高保真图对应上的。 设计会根据我提供的素材去提取,确实里头需要设计有想法。 为什么我的草图是这样,高保真是那样的呢,我会告诉他内容,告诉他业务,告诉他重点,但是提炼,设计这个,是设计的专业,我对于设计也不专业。专业的人专业的人做。

一键隔离主题过程(颖怡口述,和网联介绍类似无对接真实数据)

平台核心业务指标(颖怡口述)

一.先有故事线 数据的这个屏其实高度依赖客户这边,一开始客户这边期望是用我们这两个屏可以取代他们在用的八个屏, 这简直不可能也没必要,但是客户不听,他们的屏幕塞得密密麻麻的。 先说平台核心,平台核心还好,因为是核心,仇工他们是数据提供方,比较清楚什么是核心业务。 所以这个屏很快就确定了要展示银行,网联平台的,机构的和数据中心,以及备付金的指标,本来还想放清算,但是确实放不下了这是第一版草图。 image.png 二.客户有思路 依据上述原型出了第一版低保真图、内容又多又杂,然后客户删减了一些。 image.png 这是第二版,他们看了又觉得备付金不展示趋势看不出来东西。 image.png 三.反复确认 依据领导黄总定位(展示)上述低保真图设计高保真图。 image.png 这个是一开始的版本,不断的修改修改,输出的是这个。 image.png 四.领导汇报 第一次与领导(黄总)确认推翻了。领导说,太平,不够酷炫。但是他这张屏幕指标那么多,确实不好做。 然后重新调研,客户说既然这样,就做个立体的吧,然后我做了个草图。 image.png 这版是2.5D,客户觉得还可以了,就找设计。 image.png 后面感觉整体效果还能优化一下,然后我找谢鹏聊了一下,刚好那会北京的设计没空,找了王培,他也给了我一些思路,然后就输出了这个。 image.png 这张图整体思路就是思路就是,六个数据中心组成网联平台这个,可以用圆盘展示。 陆陆续续改了几次。最终确定这个图。 image.png 第二次和领导汇报,领导(黄总)改变了定位,平台核心变成了对内,这种只能看实时值的,显然不适合运维。 第二次汇报的以后花大力气在网联介绍了,平台核心就拖了一下,马上要第三次汇报了,客户才说,就拿第一次汇报的图,改个草图。不要备付金,银行也要趋势图,我就截图p了两个草图。 image.png image.png 然后汇报完,我也不知道他们内部达成了什么共识,就说不改了,我们用第一版开发就行。 image.png 至此平台核心业务部分基本稳定。

平台系统运行状态(颖怡口述,和平台核心业务指标类似对接真实数据)

网联平台项目简短总结

大家可以看看这个项目过程,看看有什么启发,这个项目还是比较典型在展示上也不存在技术问题类似不会出像智慧城市大屏一样受限缺失地图数据的问题,包括受限地图数据更新的问题。包含2D,3D,也包含接口数据和业务数据(宏观上数据不会实时变化),包含展示类大屏和运维类大屏。 过程中没有详细总结。比方说如何的和客户调研、如何把客户调研的过程变成原型图,然后把原型图和设计沟通。这三个步骤非常考验经验,与客户实际业务强相关,比方说弄个公安部雪亮工程这个设计方法包括换了客户口味不同整个思考方法可能完全不同,但是思路(过程)是有参考价值的。颖怡作为一个新晋项目经理,这个过程是强哥(栾志强)辅助完成的。大家可以参考下面的理论在辅助思考这个项目的过程。

大屏业务拆解理论

思考理论 image.png ——方法论来自大熊 做项目核心是以客户中心进行设计:以客户为中心不是客户说什么是什么,二是站在客户角度看他想表达什么,并在自己能力公司能力产品能力范围内尽可能满足客户的正确需求,并在客户需求有可能不合理时敢于提出自己的建议。此时自己的建议也不一定对但是要拿出来讨论,这样会在客户沟通时产生不一样化学反应。 目标分解:将客户大的主题细分小的目标,比方说网联介绍,介绍什么,后面可以进一步分解成几个“心”。各项目情况可能不一定都能分解,但是能分解时最好分解。 指标分解 根据主题调研有什么的子系统,根据项目自身情况选择。可能展示类项目不用考虑调研子系统这步。 评价指标 根据一些主题,具体的要考虑需要展示什么指标,比如网络延迟,是展示数据吗还是动画+数据展示?是重点展示么?重点展示应该放在场景中间。不重点可以放在两侧图表中。展示数据可以放在3D场景中间,也可放在两侧图表。动画+数据或动画这种方式就不适合在两侧图表里展示。 数据处理 这部分主要涉及接口对接。推送方式是什么:我方发起请求还是对方主动推送、对接协议是什么、对方是标准的接口或数据库对接还是定制化的接口?对接架构是什么:将数据存入数据库在读取还是直接请求接口通过http方式对接,通过http对接时就要考虑对方是否能承受请求频率或者我方dip是否能承受? 故事线&主题 通常这部分是在调研过程不断变化的,总之是要有个大屏核心理念的(为客户创造的价值),这个过程可以是,有个粗略的主题,然后进行大屏脚本设计,最后在把脚本落到交付层面具体怎么实施。 实施理论 ——方法论来自廖敏君&张炎 image.png image.png image.png image.png image.png image.png image.png image.png image.png 详细参考优锘小学大屏实施培训-廖敏君&张炎 大屏实施培训 实施过程前期还需要了解大屏基础的硬件和方法 DP线、HDMI线、AVI线、VGA线 及各自支持最大分辨率多少? 浏览器最大支持4K分辨率。 要调研哪些硬件信息? 涉及大屏项目了解的基本信息? 详细参考优锘小学大屏产品培训-刘玉龙 大屏产品培训 详细参考优锘小学大屏调研方法-刘彪 大屏调研方法内附原型图rp文件可使用AXURE原型制作软件快速设计符合现场分辨率的大屏 另一个大屏项目实例(雪亮工程-王凯) 进入优锘小学官网搜索雪亮工程 image.png