第89章 亚运H5的UI设计难题(1/2)
2009年2月的广州,街头已经挂起了亚运倒计时的横幅。
五羊雕塑旁的花坛里,木棉花苞鼓得正圆,风里都带着点赛事将至的热乎气。
我站在设计部办公室里,看着桌上摊开的几张亚运H5初稿,眉头越皱越紧。
火炬的动画太僵硬,数据展示页又太单调,完全撑不起“单日5000万访问”的项目定位,更别说要让用户有“沉浸式传递火炬”的体验。
“刘哥,咱们试了三版动画,要么加载太慢,要么没亚运的氛围。”
设计组的小林把数位板往桌上一放,语气里带着点挫败。
“网益那边催着要初稿,可这效果,拿出去肯定要被打回来。”
我拿起一张草图,上面的火炬是简单的火焰特效,和普通网页广告没两样,完全没体现出广州亚运的特色。
之前解决了高并发的技术难题,可UI设计要是掉了链子,整个项目的体验都会大打折扣。
脑子里第一个冒出来的人选,就是远在硅谷的刘菲菲。
她不仅懂技术,设计感也强,当初“开心农场”的向日葵装扮、UE浏览器的启动页,都是她操刀的。
而且她对广州的本土元素很熟悉,肯定能拿出合适的方案。
看了眼时间,广州十点,硅谷该是昨天晚上七点,不知道她有没有出去玩。
犹豫了几秒,还是点开了视频会议软件,给她发了个邀请链接,顺带附上了几版失败的UI草图。
没等两分钟,屏幕就亮了。
菲菲的脸出现在画面里,头发有点乱,眼下带着淡淡的黑眼圈。
背景里是她实验室的工作台,角落那盆向日葵小苗已经长出了两片嫩叶。
“刚改完低温技术的报告,”
她揉了揉眼睛,看到我手里的草图,立刻坐直了身子。
“UI设计卡壳了?我看看。”
我把草图一张张对着镜头展示,跟她讲了网益的需求。
“要兼顾观赏性和加载速度,还要有广州特色,最好能加个实时数据模块,让用户看到自己的火炬传递到了哪个城市,有多少人参与。”
菲菲指尖在数位板上快速勾勒起来,屏幕共享里很快出现了线条。
先是一个带着木棉花纹路的火炬轮廓,然后是动态的火焰,火焰里还藏着小小的五羊图案。
“我有个想法,”
她的声音一下子精神起来。
“做‘火炬传递动画+实时数据大屏’的组合方案。火炬动画分两层,表层是木棉花火焰,底层是轻量化的粒子特效,既好看又不占内存;数据大屏做成卷轴样式,左边显示实时传递人数,右边是全国传递热力图,广州地区标成五羊的形状,突出本土特色。”
“这个思路好!”
我眼前一亮。
小林他们也凑到屏幕前,眼睛都亮了。
“但怎么平衡动画效果和加载速度?要是特效太复杂,低网速用户打开会卡顿。”
“简单,”
菲菲调出之前做的农场装扮优化方案。
“把动画资源拆成三级,4G用户加载完整特效,2G用户加载简化版火焰,离线用户只显示静态火炬和文字数据。而且可以复用咱们之前做的静态资源预加载技术,用户点开UE导航页时,就悄悄缓存H5的核心资源,等他点进火炬入口,直接就能打开,不用等加载。”
本章未完,点击下一页继续阅读。