加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

设计H5页面的三个思路和细节

(2018-11-15 16:43:38)
标签:

设计h5页面

手机h5

随着移动互联网的浪潮和手机技术的不断日新月异,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来,尤其是HTML5技术以其“即点即玩、病毒传播、用户粘性”的特点备受品牌广告主的青睐。那么企业应该如何扬长避短,才能做出一个吸睛的H5页面的?

一、H5设计的三个思路

1、内容方向的H5

内容方向是指介绍内容为主的H5,从用户情感出发,基于大众所熟知和想了解的方面入手。重点放在内容方面要引人入胜,能够吸引特定用户,把H5有目标、有目的的去投放。如节日类、信息广告类、电视影片类等。

例如,腾讯网《活着》项目组策划的《活在此时》,充分透析了北漂一天的忙碌生活,直击为了生活而奋斗着的年轻人内心,主题震撼,内容充实,闻者心动,见者伤感。腾讯新闻发布的系列H5《传统节气》,随着人们开始越来越关注传统文化的传承,二十四节气的由来、习俗等知识,越来越多的人想深入了解。实时推出《传统节气》,既满足了此类人群的需求,又弘扬了传统文化知识。

2、视觉方向的H5

视觉方向是指以画面为主的H5,这里指的不单单是好看,而是把重点放在画面执行上,画面更有丰富的动效,做到非常强力视觉冲击力。视觉方向的H5拥有着炫酷的画面、华丽的动效以及特点鲜明的手绘,让人印象深刻,过目不忘。

例如,《AKQA Winterlands》借势圣诞节,让用户进入水晶球,环视3D场景,让用户有身在其中的感觉,在视觉和互动上达到双赢。

3、交互方向的H5

交互方向是指注重与用户建立丰富的互动体验,以用户操作为主要卖点。重点放在和用户的交互体验方面,让用户有很强的参与感。这就需要在互动过程中要做到完美的体验,吸引用户一步一步按照设计师思路看完H5。如游戏类、广告类。

交互方向H5一大类是小游戏,例如,早期的围住神经猫、虐心的小鸟等等。另外,腾讯新闻出品《俄罗斯阅兵—抢答1分钟》参与互动答题,再配上风格独特的手绘图案,可以说是H5中的精品。

二、提升H5页面的设计细节

1、Loading页

根据《移动页面用户行为报告》的统计显示:H5的加载时间超过5秒,就会有74%的用户离开页面。所以,一个有趣的loading动效,可以极大的增加用户的耐心,缓解无聊的等待时间。

2、背景音乐图标

H5中的背景音乐图标也是常常被忽略的一个细节,一些百搭、万能式的图标,虽然在视觉上不会显得突兀、能较为自然的融进H5中,但从另一方面来看,却总归缺少了鲜明的个性化特色。如果能够结合H5本身的内容重新进行设计,不仅能统一整体的画面风格,还会使你的H5变得更为精致!

3、翻页提示

箭头翻页:通常适用于展示类H5,一般为上翻箭头(上下翻页时)和左翻箭头(左右翻页),与背景音乐图标类似,翻页提示最好也尝试结合H5内容进行设计。

手势翻页:主要适用于长页面或者左右翻页的场景,通过做手点击的滑动效果来提示翻页。

4、分享提示

H5上线后,最重要的当然就是传播出去,刷屏的梦想还是要有滴,万一呢?所以,除了H5本身的内容质量外,一个用心设计的分享提示绝对能打动用户,吸引他们进行分享转发~

但首先,我们得了解下什么是诱导分享,最最直接的就是提示文字分享转发到朋友圈,但是也可以通过巧妙的设计来隐晦的表达出求关注求转发的心情,比如在分享文案上花点心思:

http://s9/mw690/007d7lxRzy7pbVdxVBCe8&690

总结:

以上就是设计H5页面可以参考的三个思路和一些细节问题,并非所有的H5都要兼顾这三个方面,可选择其中一个做精做好即可,当然其他两个方面肯定会有所涉及,企业可根据自身情况进行选择。

来源:世界工厂网•企业线上生态学院

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有