H5页面的设计有哪些小技巧？

       随着HTML5技术的成熟，H5页面越来越受大家欢迎，各种H5页面层出不穷，那如何才能让自己的H5页面在众多页面中脱颖而出呢？几个H5页面的设计技巧分享给大家，希望对大家有所帮助。

 

1.故事化

H5本身是一个信息承载和传达的工具。讲故事是让信息快速传达的最好方式。你要将品牌故事融入H5，借助H5的技术优势将品牌价值文化理念传达给用户，让其永久的记住你。

如图以成长记录的形式来进行产品的推广：

 

H5融入场景一是让用户能在参与中，找到熟悉感以更容易的接受里面的信息，而是场景承载的品牌信息，用户在特定场景里，唤起他们的认知，从而加深用户对品牌的印象。

比如下图滴滴打车利用“加班”场景推广品牌：

 

2.强互动

强互动是将H5页面做的比较有趣的最好的一种方法。场景现实化、加入互动机制，能让用户进一步感知体验H5宣传的品牌产品，提高对产品的购买欲望，并且增加了乐趣。

如图为苏泊尔空气净化器的H5页面，交互的方式让用户既进一步认知产品又提高乐趣：

3.参与感

真正能和让用户更好的理解品牌是让用户在参与进来深入感知，拥有能让用户参与体验的H5会更加有趣和让用户喜爱。你可以结合产品本身的特性以及用户的喜好进行参与机制的设置。

如图优衣库“为自己的一天搭配”，希望用户通过H5页面的搭配来传递给用户优衣库的品牌、产品信息：

 

4.社交性

H5页面最重要的一个特性是传播。要让品牌能传播的更远还需在H5上融入社交性，借助用户的社交关系链传播。通产用户会通过谈资、帮助、比较、炫耀、窥视……与好友维持或促进社交关系。因此在H5设计中，应融入了这些能让用户分享的动机。而且社交对H5页面是一个黄金方法，利用好社交性，推广力度、传播范围会成倍增长。

 

5.话题性

想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。注意借势营销具有很强时效性。要分清主次用热点去推广产品。

 

如图为天天P图结合当时的热播剧《武媚娘》的界面：

  

6.流畅性

随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、吹起、3D视图等互动效果。但是切记实现动效的前提是保证流畅性。有些流畅性可以通过动效进行掩盖，但有的时候动效可能会影响画面的流畅性，所以产品经理要根据具体情况具体对待。

 

原文链接：http://www.maiziedu.com/wiki/productthink/h5/