人工智能简史

请长按/扫描下方二维码

了解AI简史

完整欣赏此案例大约需要2分钟

案例:AI简史

出品:人民日报

技术实现:Three.js + jQuery

亮点:

策划上,纵向长图滑动。案例以盘点大事件的形式,讲述了自1950年以来AI的进化以及发展。Loading完毕后,进入案例,向下滑动来观看案例,滑动到每个AI大事件的特定位置,会有动画自动播放来过渡。最后,可以关于人类与AI的未来写一句“未来寄语”并分享给好友,懒得写也可以直接三句预设中选一个,点击确定按钮提示分享,点击重置按钮重置寄语。

设计上,渐变色的背景,每个年份都有不同的配色主题,配合背景音乐,整体科技感十足。案例最亮眼的还是其动画效果,滑到特定位置时,屏幕上的元素会被打碎成无数个碎片并下落,镜头随碎片移动,碎片也会重新组合成新的元素。文案方面,也非常精炼,一句概括,没有多余的介绍或叙述,所以画面显得非常干净。右侧的时间尺随内容变化而变化,在显示年份的同时,也巧妙地给用户提示了整体进度,非常友好。

除此之外,案例中某些元素有3D属性,用户可以通过滑动来查看。

体验上,很赞的事件盘点型的案例,小五个人非常喜欢这样的动画效果。不过,炫酷的效果以及清晰的画面,往往会伴随着很长的loading时间,即使处在wifi环境下,小五也看了蛮久的loading,在电脑模拟器上打开亦是如此。其次,Loading完毕后的首屏,小五并没有看到任何的交互提示,相信有不少人也会在首屏愣一会儿。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171211A0AV3700?refer=cp_1026

相关快讯

扫码关注云+社区