html5网页前端设计 h5页面设计案例分析 _生活百科

今天是全国第三十四个教师节，祝福教育行业工作者，你们是最棒的。今天依旧有无非创意带来的优秀H5案例，更多原创案例关注无非创意微信公众号：wufaecy
一、这是一片有故事的土地

文章插图

创意定位，腾讯公益联合凯迪拉克推出的公益类H5,旨在助力额济纳胡杨林绿化建设。
策划上，开头讲述了额济纳胡杨林的历史变迁，从白垩纪到2018年分7个时期，为7个自动切换的小动画。步骤，长按可保存，点击向下按钮可跳转至爱心捐款页面。
设计上，单色颗粒感手绘漫画风，黄沙色具有岁月感，也含现在沙漠化的土地之意。
体验上，动画播放体验流畅，配合西域风的背景音乐很有历史感，让被黄沙侵蚀的土地重现生机，需要你的助力！

二、请让我照顾你

文章插图
创意定位，，从一名职场女性的视角，讲述一个女性拼搏的温情故事。场景切换中，配合口播文案，露出品牌价值主张：再忙，也要照顾好自己，请让京东超市照顾你。
2.策划上，大致分为三个部分：① 故事带入，一个女生完成了所有日程计划的事情，累趴在电脑前；用户按引导向左滑动后，进入场景故事；② 从早起出门的洗漱打扮，到上班途中的地铁拥挤，再到工作场景的忙忙碌碌，直接加班到很晚才想起吃一口零食，再到晚上回到家仍然加班努力工作。末屏呼应开屏的故事带入，证明这是一个周而复始的过程；③ 忙完收到一条微信消息，用户第二次交互，点击打开信封后，露出活动主题“京东超市周年庆请让我照顾你” 。页面底部有分享和跳转至京东超市的链接。
3.设计上，手绘漫画风格，用动漫的形式讲述女主从早晨、路上、工作及晚上的忙碌状态，画面唯美，娓娓道来。
【html5网页前端设计 h5页面设计案例分析】4.体验上，用温情故事来打动那些拼在一线的职业女性，很能引发共鸣，这就是很多职业女性每天的节奏和工作状态。如果京东超市有一定的实惠给到用户，超出用户预期，效果可能会更好。
三、让你一秒变有面儿

文章插图
1.创意定位，将人生比喻成一次地铁出行，每一站都是人生的一个阶段。
2.策划上，操作手法是滑动屏幕，一图到底的形式；H5主人公进入地铁后，先后经历了“转眼毕业站”、“一往职前”、“组建家庭”、“猝不及房”、“秃然发现”等五站，形象的展现了人生需要经历的各个阶段；之后主人公走出地铁，经过满是有面儿生活的广告牌，进入品牌轿车开启了有面儿生活
3.设计上，手绘漫画风格，页面上的细节很用心：每一节车厢门都根据不同的阶段配有相关文案，不同的车厢窗外都有不同的风景。
4.体验上，整体操作流畅，一气呵成，但不同车厢之间的配乐衔接有些出戏，如果滑动的速度太快还会导致音频重叠。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「爱刨根生活网」www.aipaogen.com小编还为您精选了以下内容，希望对您有所帮助：