腾讯新闻：十道题，测出你的女主人设

2020-03-30 H5案例分享 H5案例分享

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

识别图中二维码

十道题，测出你的女主人设-查阅二维码

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

案例：十道题，测出你的女主人设

品牌：腾讯新闻

技术实现： Html5 + css3 + CreateJS + canvas +jQuery

制作：腾讯新闻、奈思设计

亮点：

以妇女节和女性权益这一热门话题为背景推出的测试内容型H5。针对女性用户，通过十道浅显易懂的题目和丰富有趣的形式测试用户的女主人设，本质上是测试用户在女性主义观点上的所持立场。类似哲学测试，或职场人设测试。

加载完毕后，初始页面两个主圆球非线性速度对撞，中间白色交叉区域大小呈动态变化，左下角小球缓动缩放，点击开始测试按钮进入测试页。主圆球滑动来切换页面内容，每次呈现一道问题，答案分2-3个选项，点选后所选答案的图形向下移动至底部圆形空白位置，其他选项图形缩放消失。全部题目完成后生成可分享的最终页面。

设计风格上偏文艺风，采用手绘漫画来呈现人物，塑造不同女性人物形态，使整体页面更富有故事感。色彩上以黑白色调为主，局部装饰图形随机使用蓝、红、黑、黄、绿色。

点选答案伴随着气泡声音效，增强互动感。图形动效简单自然，无硬切换，用户体验流畅顺滑。背景音乐为节奏舒缓的钢琴曲，营造轻松的氛围。在轻盈的音乐声中阅读和体验页面，更利于陷入思考。

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

标签