网易新闻:查看你的隐藏星座

2020-01-02 H5案例分享 H5案例分享
网易新闻:查看你的隐藏星座


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

查看你的隐藏星座-查阅二维码

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


案例:查看你的隐藏星座

品牌:网易新闻

技术实现: createjs + zepto

亮点:

  1. 创意定位

网易新闻出品,总结成长之路,用户一边浏览长幅画作,一边回答问题,生成自己的隐藏星座海报。

 

  1. 策划逻辑

整个作品是一段治愈系的长幅画作,用户下滑屏幕浏览,一段段文字在画作中浮现,总结成长之路,当中穿插了若干成长道路上的问题,用户输入自己的答案即可,概况如下:

 

  • 星辰降落

滑动屏幕,一颗星辰落在地球上变成一个红衣小孩,用户输入名字,小孩就代表了自己,小孩经历了被妈妈第一次唤名,在妈妈的摄影胶片中喝奶,玩耍,学习,长大,有了自己的梦想,用户在此需要问答选择题——小时候的梦想。

 

  • 历炼成长

小孩在浩渺星空中遨游,遇到另一个TA,怦然心跳,用户此时需要回答和恋人最常去的约会地点,小孩意识到自己需要努力长大,经历高考,用户再次回答高中时最不擅长的科目,小人意识到自己的平凡,开始了远航,在大学中磨炼,经历了交友和毕业,用户需要回答第一份工作在哪个城市,最晚一次下班的时间,印象最深刻的三个城市。

 

  • 落地海报

测试完毕,海报自动生成,包括用户名,隐藏星座,星座图,星座关键词和解析,下方是出品方名字,用户可重新测试或分享作品。

 

  1. 设计上

加载界面是一个红衣小人抱着小星星站在小小的星球上,让人联想到“小王子”,星辰降落地球的人物设定很温情纯真,图画和文字风格都很治愈,富有童趣,内容也比较符合大多数人生活上与心理上的成长之路。

 

  1. 交互上

下滑屏幕推动作品展开,停止下滑时界面也停止变动,用户可仔细浏览文字,也可上滑让作品倒退,重新浏览。

 





以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

网易新闻 | 哒哒:你的专属小诗

美团榛果民宿:夏日民宿斩男术

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~