H5页面设计技巧案例分析.docx

世界工厂网线上生态学院  H5页面设计技巧案例分析自15年起爆火，到17年底的现在， H5已经走过三年时间了，尽管每一年都有人在质疑H5何时会死，但就目前形势来看，日趋成熟的H5在未来仍有很大的发展空间特别是在Flash被Adobe官方宣布将于2020年停止支持宣布弃用之后，我们可以看到，Html5 已经成长为能够代替Flash的技术，同时它也为当下的H5营销创意广告提供了有力支持 那么，H5页面都有哪些设计技巧呢？下面分享五个设计方法，仅供参考方法一：抓住用户喜欢读故事的心理，创造有价值的内容案例：LEVI’S新年优惠活动专题页以第一人称的口吻，用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比，用手绘风渲染出亲切的怀旧氛围最后引出“这个新年，把压力和束缚打包扔掉，用新鲜的眼光感受生活，一起活出趣”的品牌推广slogan，代入感极强的故事无疑是驱动分享的源动力总结：不论H5页面的形式如何多变，有价值的内容始终是第一位的在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动方法二：注重页面的细节与整体调性的统一案例：大众点评推出的姜文电影推广系列的《九步之遥》H5专题页便牢牢抓住了这一点。

从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效，无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验总结：要成就高品质的用户体验，必须考虑到细节与整体的统一性复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨方法三：特别关注分享提示这个按钮设计人员应该特别关注“分享提示”这个细节设计，比起一个简单的箭头和一句冷冰冰的“点这里分享”，用心的细节设计带来的高品质和好感度是显而易见的方法四：第一时间抓住热点，利用话题营销案例：电视剧《武媚娘传奇》热播期间，网易娱乐在武媚娘剪胸风波的风口浪尖上推出了名为《神还原武媚娘被剪胸真相》的H5专题页，放下节操用极富想象力的粗旷草图风向广大观众“还原”了真相一时间被疯狂转发，网易娱乐也算是顺势自我宣传了一把总结：想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，从而借机进行品牌宣传和推广方法五：页面技术要合理运用，宜简不宜多随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。

案例：淘宝在双12曾推出的预售推广H5专题页在浏览过程中只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动态GIF设计师巧妙利用图形设计与组合，在滑动过程中营造出一种丰富的视差滚动效果，单个图形元素的遮罩、旋转与整体页面的动势配合极为默契总结：相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验总结：以上就是小编整理的企业设计H5页面的五个小技巧，助力企业打造一个爆款，从而推动企业品牌推广世界工厂网线上生态学院：制造公司开展线上业务的加油站  。