新媒体创意

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

2019-07-12 11:44:09 182

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

 

1.故事化

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

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

 H5页面的设计有哪些小技巧?(图1)

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

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

 H5页面的设计有哪些小技巧?(图2)


2.强互动

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

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

H5页面的设计有哪些小技巧?(图3)


3.参与感

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

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

 H5页面的设计有哪些小技巧?(图4)

4.社交性

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

 

5.话题性

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

 

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

  H5页面的设计有哪些小技巧?(图5)

6.流畅性

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

 H5页面的设计有哪些小技巧?(图6)


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