html5专题,html5基础

html5时代的主要的网页设计风格有哪些

一、首先从功能与设计目标来看， H5专网页主要有以下4大类型：

1.活动运营型

为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。

2.品牌宣传型

不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。

3.产品介绍型

聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。

这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。

4.总结报告型

自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。

二．形式为功能服务

在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。

1.简单图文

简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。

2.礼物/贺卡/邀请函

每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。

3.问答/评分/测试

问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。

4.游戏

从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。

三．为设计加分的4个要点

一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：

1.细节与统一

要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。

2.紧跟热点，利用话题效应

想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。

3.讲个好故事，引发情感共鸣

不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。

4.合理运用技术，打造流畅的互动体验

随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。

结语

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。

相关问答

Q1: html5为什么要用结构标签布局网页？

对于HTML5来讲，在网页结构上标签定义与使用更加语义化，让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在！

列举常用HTML5结构组合

header

nav

section

article

figure

figcaption

aside

footer

一般首页结构，如图所示

当然也可以是下面的结构

其中section和article最为相似，而且和div标签貌似也有很大相似之处。

但看似相似，并不是真的相似，这些标签是为了布局而生的，自然有它们更精确的语义定位，或者说他们更将强调Html的语义。

DIV

这个标签一直是我们见得最多、用得最多的标签。

它本身无任何语义，用作布局以及样式化标签。

Section

与div相似，但它有更进一步的语义。

section用作一段有专题性的内容，一般在它里面会带有标题。  section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

Article

article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

div、section、article，语义是从无到有，逐渐增强的。

div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。

原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。

Q2: html5是什么？发展前景如何呢？

HTML5这项于2004年被正式提出的HTML语言的第五次重大修改，过了十年之久，才算在互联网世界中火了起来。在中国，无论是早期腾讯在推其浏览器时，还是后来百度为了打破APP的不可搜索性而力推H5，都没有将之引爆。倒是最近随着微信越来越火，H5也火了起来了。

H5的最大优势就是可以在网页上直接调试和修改，而且更重要的是，它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统：Android和iOS，一个做应用的团队，怎么着也得准备两套班子来适应用户两种手机。而在Android体系中，版本的分裂和机型的五花八门，想要求得极致的体验，还得反复测试各种版本和机型。这无疑大大抬高了开发成本。

就像开发一个网站无需太多关注用户究竟是windows机器还是MAC机器（少许关注还是需要的，但比起开发软件所需要的关注，那就少多了），开发H5同样能够大幅降低成本。

第二个非常重要的优势在于版本升级。正如网站升级和用户无关一样，H5应用的升级，用户也不需要去update什么东西。这某种程度上就等于“强制升级”，这给开发者带来的好处也是巨大的：他们不需要考虑应用的各种版本的兼容性问题。

第三个也必须注意到的优势是，如果使用H5（甚至是更低版本的html）开发出网络应用（web app），它可以绕过苹果的应用商店，让用户直接从网站上下载，这可以避免让应用商店在收费上扣去3成的分成制度。

不过，这绝不是H5在时下忽然大火的原因。因为上述这些特点，H5早就具备了。

第一个重要的原因在于，一直到去年10月29日，万维网联盟才宣布，经过近8年的艰辛努力，H5标准规范终于最终制定完成了，并已公开发布。有了标准规范，给H5打下了非常重要的基石。对于互联网世界而言，标准规范几乎就是生命线。

第二个重要的原因在于移动互联网终于如燎原之势普及开来，而在中国，移动互联网的主要应用之一微信，又一直在很多模块里使用H5技术，比如微信公众账号。

微信的朋友圈中，除了图片和文字以外，能发送进去和朋友们分享的，都是网页。过去一般都是分享公众账号的一篇文章，但很快，商业组织们意识到，如果把他们的商业信息做得有趣一些，借助用户们的分享，他们的传播效率会高很多。于是，我们就会看到今天的朋友圈里动辄就会出现商业组织的H5制作，比如会议邀请，比如组织招聘，比如活动策划。

于是，有人开始惊呼：H5会杀死原生应用（native app）——不过，这句话其实好几年之前就有人喊过，Facebook一度还使用所谓的“网络应用”来替代原生应用（不过但没过多久，就退了回去。网络应用还是有很多问题，比如对交互性的即时响应）。

但我始终不这么认为。网站并没有杀死软件，web app也很难杀死native app，即便得到H5支持的web app。更有可能的是，一个native app里在部分甚至大部分模块里包含H5——事实上，微信就是这样的应用，Facebook所谓退回native app，本质上也是网页打包进入它的那个原生应用。很难有泾渭分明的web app或者native app。

还有一点是值得我们担心的，那就是今天对H5的使用，过于营销化了。朋友圈里动辙可见的H5，都是营销信息。这让我不得不想起了一度非常火爆的minisite，商业公司曾经疯狂在这种小型网站上烧钱，一个策划专题投入上百万都不算罕见，最终，minisite可以说是营销需求催动，也毁于过于营销化。普通用户图个新鲜第一次会看，第二次第三次，他们总有厌烦的一天。

真正能让H5大火的，绝不是今天朋友圈这些移动互联网里的“minisite”，而是能切实解决某种需求的H5式解决方案。一个我个人很看好的方向是视频。H5理论上是不再需要嵌入什么Flash技术了。不过，到目前为止，以谷歌、Firfox、Opera为一方，苹果为另外一方，就视频格式问题，还在继续纠结讨论中。