人民日报 | 客户端 + 网易文创 | 哒哒：这样的我，很中国

2020-10-05 H5案例分享 H5案例分享

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

识别图中二维码

这样的我，很中国-查阅二维码

完整欣赏此案例大约需要1分30秒

案例：这样的我，很中国

品牌：人民日报 | 客户端 + 网易文创 | 哒哒

技术实现： zepto + Scroller.js + Animate.js

亮点：

1、创意定位

人民日报|客户端和网易文创|哒哒联合出品的H5，以展示“中国记忆”为主，列举了100件中国记忆。

2、策划上

① 首屏中展示我的100个中国记忆，提示向上滑动；而后需要输入你的名字，输入完毕后，点击“去选择”按钮；

② 100个中国记忆，浅灰色的图标陪文字循环滚动；点击选择你做过的事情，图标被点亮（变成彩色），图标的右上角显示已完成；右上角有提示选择的已完成的个数；如果已经选择了，再次点击后，会取消选择；点击屏幕下方的“完成选择”按钮，生成中国记忆海报；

③ 在中国记忆海报中，如果用户微信登录后，并授权了，将显示用户的微信头像；海报中有选择的中国记忆个数，和选择的中国记忆图标和对应的文字。

3、设计上

橘色为主色调，扁平风格；未选择时图标默认为浅灰色，点选后为彩色图标。

4、体验上

100个中国记忆中估计有小伙伴可以得满分，会勾起很多回忆。

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

标签