案例：越过山丘
品牌：网易有道词典
玩法：动画
整理：蓝橙H5开发
1.详情内容上：
网易有道词典为品牌宣传，以“人生山丘”为主题出品的动画H5，让用户点选/定义人生重要节点事件，根据节点事件的正面、负面影响，唤起用户对过往的回忆和思考，最后生成“人生山丘”曲线图，启发人们“人生可以有无限可能”引发共鸣和裂变转发。用交互文案和富有启发的简洁动画，展开关于“人生山丘”的讨论。“hey，陌生人，每个人一生都在攀登，在人生山丘见到你真开心。关于你的人生，不同的人，有不同的建议。”妈妈觉得应该是这样的，老师觉得应该是那样的。在我自己的眼里，我的人上山丘有多种可能性。用户“点击绘制”进入下一部分。以高考为界，把人生分为两部分，高考前，选择三件事，高考后，选择三件事。节点事件以便签条的方式呈现，选中后有选中提示，还有选中列表，如果第一批的便签中没有和用户吻合的事件，还可以点击“换一组”更换便签，多次更换仍没有找到与用户相匹配的事件时，用户可以选择“自定义一件事”，每件事不超过8个字。
为选中的6件事分别打分，积极影响和消极影响，每题只能选一个方面一个分数，打完分，点击“确定。调起键盘，输入姓名，使最后生成的海报跟你有一定的关联性。点击“确认”，会出现一个“绘制中...”的转场动画。生成命运海报：包含用户微信头像、输入的昵称，以及根据用户选择的六个人生节点事件正负影响的“人生山丘”曲线图。海报中部包含：用户是第多少位参与用户，以及中英文双语金句文案。海报底部是品牌露出以及回流访问二维码。
2.页面设计上：
采用扁平清新色块设计。背景分别用淡色系的绿蓝黄粉色块，即代表了生命的丰富多彩，又不抢镜，很好的为故事及情节推进渲染了气氛。
3.用户体验上：
对于小白用户，交互过于复杂；对于被吸引的用户，会耐心完成每一步操作，最后生成的曲线，会是一个直观的小惊喜/小惊吓，你选的事件如果都是正面积极5分，你的人生山丘就跟小五一样了：一条直线，想想也够吓人的。
扫描二维码查看
注：如果你还想了解更多的H5精品案例，可点击右侧“方案咨询”在线联系，或者微信搜索“蓝橙互动”公众号获取案例。
相关链接：H5制作|小程序定制|节日H5|H5玩法|H5设计
