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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,490评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,581评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,830评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,957评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,974评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,754评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,464评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,847评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,995评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,137评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,819评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,482评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,023评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,149评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,409评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,086评论 2 355

推荐阅读更多精彩内容

  • 社交红利阅读笔记 书名:社交红利(修订升级版) 作者:徐志斌 出版社:中信出版社 正文前笔记: 推荐序1摘要 社交...
    凫水阅读 8,944评论 4 26
  • 相比电视、杂志、户外广告等传统媒体呈逐年下降的趋势,品牌营销在数字和移动方面的投入在逐年上升,而且,在所有渠道预算...
    soloveme阅读 2,628评论 0 23
  • 在水一方 一船溯流破浪轻,杨柳风暖雷蛙鸣。 蒹葭飘絮散新绿,嬉水伊人苇上行。 处女泉 潭清直见底,隔岸观游鳞。 飞...
    灵魂刀手阅读 282评论 0 0
  • 不知大家平常如何实现 ">",目前我仅知道的常规做法如下: 切图 单独为>或者">"符号设置为“Tahoma”字体...
    Triple_Rock阅读 1,231评论 0 2
  • 凌晨两点的成都,我们骑着小黄车,从玉林路的小酒馆骑到永陵附近。穿过那些没有收工的水果摊,只为了去网吧通宵。 但是,...
    小七流年阅读 690评论 0 1