H5制作页面工具_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
暂无相关推荐文档
H5制作页面工具
h页​面​制​作​专​家​,​H页​面​制​作​,​朋​友​圈​营​销​利​器​,​各​种​场​景​服​务​!​h页​面​海​量​模​版​,​在​线​制​作​,​广​告​精​美​,​无​需​下​载​,​用​户​极​致​体​验​!
阅读已结束，如果下载本文需要使用
想免费下载本文？
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢　　专为客户定制移动端H5页面的大小机构数以千记，这里早已一片红海，但还是有企业不断涌入。一家创业公司要如何才能后来居上，甚至颠覆行业?
　　云起CEO王志强给的答案是：用互联网思维搭建一个人人可用的平台，在这里最重要的是用户而非客户;设计和体验会被做到极致，但一切都是免费的。
　　这个行业尽管都在做互联网及移动互联网产品，却全都被根深蒂固的传统服务商思维束缚：我们是专业人士，你什么都不懂，你就把想法告诉我们，完全由我们来做;做出的产品过得去就行，运行有没有足够流畅，交互是不是完全自然，细节是不是都已完美，其实无人care，更不用谈它有没有情怀是不是创新;最后，通过我们做出来的产品，那必须得付费。一千一页?不，你少说了个零。
　　王志强带领团队做西部动力，经过十多年的行业深耕，成了国内CMS与网站集群领域供应商的前三甲。两年前他发现在经历车库咖啡里的重生之后，王志强明白，让自己产生焦虑感的不是年龄，而是思维：把产品的设计和体验做到极致，再加上免费模式，这才是移动互联网时代的王道，不主动拥抱，就会被动脱节。
　　于是，云起现在成了全球唯一一家可让普通用户自助创作高品质移动端H5页面的厂商，用户的所有的创作都只需通过一个免费APP即可完成。王志强认为，这个APP解决了用户这些痛点：
　　不懂技术或不会设计的用户都无法自己做出H5页面，去找人设计则耗时耗力，需要反复沟通，且别人做出来的成品未必能有自己希望的效果。这个APP的出现，让每个人都能自己做H5页面。
　　传统方式是通过电脑来做H5页面，但普通用户更多的照片已经通过手机拍摄，这样就需要先将图从手机导进电脑，再用电脑做好，将成品发往手机，在手机上看到效果，再回电脑更改，最后发回手机发布。这个APP能让用户在手机上就可完成全部的创作、预览及管理、发布、传播。
　　绝大多数的H5页面模板或成品都售价不菲，动辄价格上万，这对于个人或小商户、企业显然成本过高。用户通过这个APP自助创作初页则完全免费。
　　个别能便宜或者免费自制初页的PC网站或手机站，制作过程的体验糟糕，成品也往往粗糙、土、慢甚至极卡，字体、音乐单调，功能单薄，兼容性差，同时在最后带有整页甚至更多广告。而在云起平台是使用一个技术领先、成熟的APP创作，页面极简，过程流畅，精心制作过的成品，其质感甚至能接近苹果水准。
　　而这种人人皆可创作，成品自带格调的移动端H5页被统称为“初页”。被称为“初页”，据说最开始只是为了让移动端的页面有个对应PC端“首页”的称呼，关于如何解释这个称呼有了如下版本：“云起希望，你在移动端的每一页展现，都美若人生初见，于是，有了‘初页’”。
　　初页”其实是一种专用于移动端展示H5页面，业内一直没有一个统一的称呼，有叫海报(动态海报、指尖海报、掌中海报、动画海报)的，有叫微杂志的，也有叫应用的(场景应用、场景APP)，还有直接管它叫手机上的PPT/Keynote，甚至手机广告页的，上千家竞争者没有一个能向普通用户形象准确的描述这种页面到底像什么。王志强是计算机科班出身，想到PC端的首页、欢迎页，决定叫它“初页”。现在大家知道，BAT发个邀请函、大数据，iPhone6
在联通首发，都是用这种“页”，用精挑细琢的文案配千挑万选的背景图，再加上气势磅礴的音乐，好像谁家不用它谁就low下去了
　　在手机里选几张图即可完成初页的创作。但如果希望做得更丰富生动，则可以添加简单的文字，选择APP里自带的背景音乐;要更酷或实现更多功能，则还可以加入多图页、联系页、在线视频、功能按钮。从云起给的消息来看，初页能成为的包括邀请函、品牌秀、商品\服务\电影电视发布海报、微信公号被添加时的欢迎页、艺术家作品集、旅程图志、风景相簿、偶像画报、微杂志、引导页、说明书、婚礼\寿宴请柬、图文\漫画短故事、生日贺卡、周年纪念册、图读新闻、科普小册子。
　　做好的初页几乎能放进任何地方：朋友圈、微博、微网站、微信公众号甚至QQ和邮件里，由于初页APP可以一键生成二维码，所以印往纸质宣传页、户外广告牌，或直接让人扫手机屏幕也毫无压力。而且与在微信公号内直接发布图文消息图文消息或微博里发长微博不同的是，它们发出的传统图文，无论何种形式，发布后无论发现细节瑕疵还是重大错误，都不可更改，而初页在发布后仍可随时改进、更新内容或功能，读者每次浏览，看到都是最新的页面。我想了想，用它们来讲个品牌故事，介绍新酷产品，包装明星艺术家，邀约活动宴会，演示思路创意，宣传热映电影电视剧，分享旅程及风景，温暖至爱亲朋，或者恶搞闺蜜基友，初页APP可能都是个相当合适的产品。
　　尽管王志强现在信心十足，但初页APP却有些明显的短板。一是只有iOS版本，安卓或其它平台用户虽然能看能互动能传播，但无法自行创作。同时它也只有免费版本，用这个版本的初页APP所做出的初页会自动生成带有“分享”和“创作”按钮的尾页，但部分商业用户希望开发出商业版将这一页完全去掉。初页制作行业的现实是竞争已经越来越直接和激烈。与云起在初页领域最为接近的一些对手尽管尚未能提供APP，制作平台也未开放给普通用户，但已在近期宣布准备开放给企业用户有条件免费申请，看样子是已经开始跟随云起的免费策略。不同企业的领导人思维不同，虽然现在看不出来谁会笑到最后，但至少，用户可以笑得更开心了。
　　初页APP正在内测，36氪读者可以抢鲜体验初页(地址：.cn/Chuye)，正式版预计下周在App Store上线。前言： 公司一个售前问我能不能用H5做一个手机拍照，给相片添加相框和添加文字上传到服务器的功能，我当时一琢磨觉得可行，就利用空余时间做了一个demo，去掉了拍照和上传，如果以后有机会，会给补上，当然对于开发过webApp的朋友来做到这个很简单。下面来看代码 1，思路 首先我们需要准备素材，一个相框和一个相片，然后我们要思考，只是把他们和并且就可以了吗？答案是否定的，我还需要对照片进行编辑，比如平移和缩放等。还要可以切换相框。 2，如何合并相框和图片？
上面是我的界面，从界面可以看出，我有三张图片和两个相框，最右边是相框和图片合并之后的结果。看代码：html:
body,html,ul,li,h1,h5,a,p,span,div{
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
margin:40px;
width: 1000px;
height: 400px;
background-color: #fff;
box-shadow: 0px 0px 1px 1px #eee;
.photoWrap{
width: 100px;
height: 380px;
float: left;
border: 1px solid #ccc;
margin:10px 40px 10px 40px;
text-align: center;
.imgWrap img{
width: 60px;
height: 100px;
.photoWrap img{
width: 90px;
height: 140px;
.photoWrap_canvas{
position: absolute;
/*opacity: 0.4;*/
width: 300px;
left: 365px;
height: 400px;
/*background-color:*/
} &/style& &div class=&wrap&&
&div class=&photoWrap_canvas& id=&photoWrap_canvas& &
&canvas id=&myCanvas& width=&300& height=&400&style=&background-color:#ccc&&&/canvas&
&div class=&photoWrap& id=&photoWrap&&
&li&&imgsrc=&img/xk1.png& alt=&&&&/li&
&li&&imgsrc=&img/xk2.png& alt=&&&&/li&
&div class=&imgWrap&&
&li&&img src=&img/mm1.jpg& alt=&&&&/li&
&li&&img src=&img/mm2.jpg& alt=&&&&/li&
&li&&img src=&img/mm3.jpg& alt=&&&&/li&
&input type=&text& id=&txtKey&&
&button id=&btnAddFont&&输入&/button&
&button id=&btnOk&&完成&/button&
&button id=&btnReset&&还原&/button&
&/div& &/div& View Codejs:
var _ = function(selector){return document.getElementById(selector);}
var util = {
isNull:function(str){return str == null || str.length == 0 }
var c = _(&myCanvas&);
var ctx = c.getContext(&2d&);
var ctxW = c.width,
var img = new Image();
img.src = &img/mm2.jpg&;
var imgW,imgH;
img.onload=function(){
imgW = 300 || img.width,
imgH = 400 || img.
ctx.save();
function onDraw(){
ctx.drawImage(img,0,0,300,400);
// 切换相册
$(&.photoWrap&).delegate(&ul li img&,&click&,function(){
var src = $(this).attr(&src&);
$(&.photoWrap_canvas&).css(&background&,&url(&+src+&) no-repeat&).css(&background-size&,&100% 100%&).attr(&data-url&,src);
})看到上面的代码，很简单，1，获取一个canvas标签，然后利用getContext(&2d&)获取到一个画布对象；2，创建一个image对象，给它添加src属性3，图片加载完毕使用 drawImage()把img对象画到canvas里面，4，再给div.photoWrap的div添加背景图片，（通过给canvas添加一个透明的蒙层可以做一个切换相框的效果） 3，如何平移图片？
以上效果，通过移动鼠标来设置图片的位置。看代码：　　　　　　// 移动相册的动作var hasTouch = 'ontouchstart' in// console.log(window);var STA_EN = hasTouch ? &touchstart& : &mousedown&, MV_EV = hasTouch ? &touchmove&:&mousemove&, END_EV = hasTouch ? &touchend& : &mouseup&, END_Cancel = hasTouch ? &touchcancel& : &mouseout&;_(&photoWrap_canvas&).addEventListener(STA_EN,start,false);_(&photoWrap_canvas&).addEventListener(MV_EV,move,false);_(&photoWrap_canvas&).addEventListener(END_EV,end,false);_(&photoWrap_canvas&).addEventListener(END_EV,end,false);var bStart = 0;var bginX,bginY,startX = 0,startY = 0;var offsetX_ctx = 0,offsetY_ctx = 0;function start(ev){ // console.log(&32&) ev.preventDefault(); bStart = 1; var poi = getEvtLocation(ev); // console.log(poi.x,poi.y); bginX = poi.x; bginY = poi.y;}function move(ev){ ev.preventDefault(); if(bStart === 0)return; var poi = getEvtLocation(ev); var offsetX = poi.x - bginX, offsetY = poi.y - bginY; ctx.translate(offsetX,offsetY); onDraw(); bginX = poi.x; bginY = poi.y;}function end (ev) { // body... ev.preventDefault(); bStart = 0;}function getEvtLocation(ev){ if(util.isNull(ev)) return; // var touch = ev.touches[0]; return{ x : ev.offsetX, y : ev.offsetY }}上面代码做了如下动作：1，首先给div.photoWrap_canvas监听鼠标事件，有些人可能会问了，为什么要给div注册事件呢？我们操作的可是 canvas啊，刚刚我们说过我们为了能达到随意的切换相框的效果就给canvas上面蒙一个层，这样的话，我们可能就没法直接给canvas添加事件，希望大家理解。2，在鼠标刚开始点击的时候执行 start()方法，他记住鼠标在div内部起点的位置，并告诉浏览器我们可以滑动了（bStart = 1）。3，在鼠标移动的时候会先判断 是否执行过 start()，如果有的话，计算移动位置和开始位置的偏移值，然后赋值给 translate()方法。图片就可移动了4，结束移动的时候，可以设置bStart = 0,等待下次启动 4，如何消除移动痕迹？ 以上讲述的能让我们的图片随之鼠标的移动而移动，不过在移动的过程中，我们会发现，移动方向的相反位置会留下，很多痕迹。
上面的图片可以看到，很多痕迹，就像电脑卡顿住了一样，，那如何去除呢？我们想明白造成这样的原因是什么？随着我们的移动，图片的位置也在做相应的改变，注意，我们调用drawImage()的时候，我是画上去，就像画画一样，当然有痕迹，幸好，canvas对象也给我们提供了清除的方法 clearRect()--清除矩形，没错使用这个方法，我们就能清除痕迹了。让我们重写onDraw()方法：function onDraw(){ctx.clearRect(- ctxW,-ctxH, 2 * ctxW, 2 * ctxH);ctx.drawImage(img,0,0,300,400);}重写之后的效果：
但是，当我们想左移动的时候会发现，还是会有痕迹，怎么回事呢？ 在已上代码是指，在图片右下角的相反方向，清除一个是当前canvas大小2的范围。（在这里需要大家注意一点，外面的那个框是 c 这个dome元素，而我们现在对canvas做的任何操作，都是有 c 这个元素生成的 ctx对象上，所以，图像移动，那么图片的右下角也移动，当然它本身还是图片的右下角）其实不难理解，canvas初始化的时候，ctxW和ctxH这个就作为画布的右下角，为什么要用负号呢，因为clearRect(x,y,width,height)这个方法的使用是以(x,y)为起点，向右清除一个矩形范围的，注意是向右，那我们肯定是不能向右的（再向右的话，就什么也没有了），当然向左也不行，那怎么办呢？ 在这里呢，我也通过查找博文找到了方案，就是我们用图片的的中心点，当然我们canvas的原点，什么意思呢？让我们来修改下代码：img.onload=function(){ imgW = 300 || img.width, imgH = 400 || img. // 把canvas的原点设置为图片的中心点，但是现实的时候，要还原，否则图片会已左上角钉在canvas的中心点上 ctx.translate(imgW /2,imgH/2); onDraw(); ctx.save();}以上代码，修改了图片刚加载完毕之后，我们做的操作，就是给canvas先平移下位置，平移的位置就是图片大小的中心点上，这就完成了图片中心点偏移。
偏移之后，我们页面刚开始的时候，不能就这么显示对吧？不然会被客户骂的，那我们要进行显示还原。function onDraw(){// 这是清除图片因为平移而造成的痕迹，-ctxw是图片平移的反方向的位置，2*ctxW，是清除的面积ctx.clearRect(- ctxW,-ctxH, 2 * ctxW, 2 * ctxH);// -imgW/2 是为了让图片显示的回复正常，因为上面显示的时候做了旋转ctx.drawImage(img,-imgW / 2, -imgH / 2,300,400);}代码：drawImage()的时候,(x,y)的值，本来是(0,0)的，也就是canvas的左上角，但是，我们把原点偏移了，通过显示的时候把这个偏移量给补回来就好了，所有就是(-imgW/2,-imgH/2);好了，写到这儿，我们这个功能算是完成了一半，我们实现了相框的切换和图片的平移，下面就是图的缩放和图片合并了。 5，图片缩放
// 注册鼠标滚轮事件,,暂时只做除去firfox之外的浏览器
window.onmousewheel = document.onmousewheel = scrollF
var scale = 1;
function scrollFnc(ev){
var delta = ev.wheelD
if(delta & 0 && scale &= 5){ //滚轮向上
scale += 0.1;
}else if(delta & 0 && scale &= 1){
scale -= 0.2;
ctx.scale(scale,scale);
}注意，我们这边缩放是通过鼠标的滚轮来做的，当然了，如果使用手机来的话，那就需要手势的操作了，通过计算两个手指或则三个手指之间的距离来进行缩放操作，以后我会补上，现在先这么做吧。代码很简单，获取鼠标在元素上滚轮的动作如果是负数就缩小，正数就放大，scale(w,h)，放大缩小的函数。6，图片和相框的合并我们可以进行图片的缩放和平移了，那么下步就是把图片和相框进行合并，我刚才说了，为了能够随意的切换相框，那我就先用div的背景来做，并不是直接加入到canvas中，那样会很麻烦。// 完成var newxC$(&#btnOk&).click(function(){ newCanvas = document.createElement('canvas'); newCanvas.width = 300; newCanvas.height = 400; newxCtx = newCanvas.getContext(&2d&);var img = new Image(); img.src = $(&.photoWrap_canvas&).attr(&data-url&);img.onload=function(){ $(&.photoWrap_canvas&).hide(); // var x = (-ctxW / 2) - offsetX_ctx, // y =(-ctxH / 2) - offsetY_ // console.log(offsetX_ctx,offsetY_ctx); newxCtx.drawImage(c,0,0); newxCtx.drawImage(img,0,0,300,400);//-ctxW /2, -ctxH / 2 $(&.wrap&).prepend(newCanvas);}})其实大家看看到了，我是把相框和canvas(图片)再重新drawImage到一个新的canvas里面去的，那为什么这么做呢？直接把相框draw到原有的canvas不久行了吗？我先给大家看下如果这么做的效果是什么：
可以明显的看出，相框随着图片的小而小，位置也发生了变化，当然了，位置我们可以给他设置偏移，但是大小却不一定，至少，我还没有找到方法，那我就是想到了一个办法，再创建一个canvas这个专门为相框而做的，然后把做好的相片在画到相框这个canvas里面就可以了。7，写入文字// 添加文字
$(&#btnAddFont&).click(function(){
var val = $(&#txtKey&).val();
if(val == null || val.length == 0) return;
if(util.isNull(newxCtx)) return;
newxCtx.font=&40px Arial&;
newxCtx.fillText(val,50,100);
})写入文字很简单，对不对，得到想要的之，使用 fillText()就可以了，，，
OK，到这，都写完了，希望对你有帮助.
无相关信息【14-07-24 讨论】H5页面测试之汇总_软件测试吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：25,185贴子：
【14-07-24 讨论】H5页面测试之汇总收藏
　　在此对H5页面的测试点（以及容易出问题的点），做一个总结，给开发同学自测，以及准备入手H5测试的同学个参考。　　1、业务逻辑相关　　除基本的功能测试之外，H5页面的测试，需要关注以下几点：　　1.1 登陆　　目前H5与native各个客户端都做了互通，所以大家在测试的时候要注意两点：　　A、若客户端已登录，那么进入H5后仍然是登录状态。　　B、若客户端未登录，进入H5，点击对应按钮OR链接，如果需要登录，须拉起native登录。若取消登录，是否可再次拉起登录，或者停留在的页面是否有对应的登录提示。　　ps：本次测试过程中就发现，第一次点击链接，可以拉起登录，第二次却不能。　　1.2 翻页　　遇到翻页加载的页面，需要注意内容为1页或者多页的情况。　　A、数据分页加载时，注意后续页面请求数据的正确。　　ps：这个需要注意在快速操作场景中，请求页数是不是依次递增，快速操作（如第一页尚未loading出来的时候仍然继续上拉操作）时是否发出去对应的请求了。　　1.3 刷新与返回　　A、下拉刷新是否仍然处于当前页面。　　B、用户主动点击刷新按钮是否仍然处于当前页面。　　C、点击返回与back键，回退页面是否是期望页面　　ps：本次测试过程中就发现，mtop接口请求成功，但是data内无数据时，返回到的就是个空白页面，无法正常发送请求。　　1.4 mtop接口返回处理　　发现这个出现问题的地方有很多，但是只要有意识的去处理，就很容易避免，主要是以下几种情况：　　A、请求成功，且返回有数据，测试mtop接口返回数据的各种场景。　　B、请求成功，但data内容为空。　　C、请求接口异常，出现ERR_SID_INVALID::SESSION过期，拉起登录。　　D、请求接口发生除C中提到的异常之外的异常，通常可归结为一类进行处理。　　2、H5适配相关　　H5的适配其实比客户端的相对来说，要少一些，手机品牌之间的差异不大，所以不用太多关注，最容易出现问题的是android2.3系统，这个要特别关注下：　　A、大屏（如720*1280，重点关注页面背景是否完全撑开页面，刷新是否有抖动）、小屏手机（如320*480，重点关注下弹框样式和文案折行）　　B、android2.3、android4.X随机找一个即可。　　C、ios5、ios6、ios7。　　3、安全相关　　3.1 明确投放渠道都有哪些　　如独客、主客、wap，是否对未投放渠道做了限制，直接通过url请求是否拦截等　　3.2 评估是否需要接入集团安全，如mtee黑白名单等。　　3.3 是否需要接入支付宝实名认证　　涉及到金钱相关，如天猫积分，红包等，为了防刷，一般都需要判断是否支付宝实名认证。　　3.4 是否接入windvane，所有请求通过native发出。　　4、体验相关　　4.1 资源相关　　A、页面中有图片的话，淘宝那边建议图片一般不大于50kb，本着一个原则，尽量缩小图片。　　B、资源是否压缩、是否通过CDN加载。　　C、如何保证二次发布后有效更新。　　4.2 流量　　A、对于一些不会变化的图片，如游戏动画效果相关图片，不需要每次都请求的东西，做本地缓存。　　B、数据较多时是否做了分页加载。　　4.3 页面展现时间　　A、关注页面首屏加载时间。　　4.4 页面提示　　A、弱网络下，数据加载较慢，是否有对应的loading提示。　　B、接口获取异常时，提示是否友好。　　C、刷新页面或者加载新内容时页面是否有抖动。　　4.5 手机操作相关　　A、锁屏之后展示页面。　　B、回退到后台之后，重新呼出在前台展示。　　4.6 弱网络体验　　5、埋点数据检查　　与BI、前端同学一起确认埋点情况。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或那些过目不忘的H5页面 | 人人都是产品经理
QQ讨论组 6月11日上海 5月31日已结束红点直播 5月24日已结束
【起点学院】产品经理实战训练营，北京、上海、广州、深圳、成都、杭州同时开课啦！
从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。功能与目标首先从功能与设计目标来看， H5专题页主要有以下4大类型：1.活动运营型为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出“大众点评选座看电影”，一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错，这个页面有点diao噢”的心情点击了分享。 2.品牌宣传型不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。伴随着浪漫的钢琴旋律，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用H5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。 3.产品介绍型聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。 4.总结报告型自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。《京东的十大任性》用10张横屏页面讲述了京东在2014年的十大成就，视觉设计上采用简洁的扁平风插画，加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果，最后还有刘总这个小彩蛋。一口气看完后大概就了解2014年京东都干了哪些大事。 二．形式为功能服务 在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。以下列举几种常见的H5专题页表现形式：1.简单图文简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。滴滴打车这个案例就是典型的简单图文型H5专题页，用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙色。每切换一张图片，文字就渐隐浮现，没有其他互动形式，让观众聚焦于内容，通过陌生人之间的真情联系来塑造品牌的正能量形象。
也有不甘平淡的精彩案例。在除夕夜全国人民疯狂抢红包的时刻，微信推出了《从此看尽中国人的名与利》这样一个专题页。第一眼就被镇住了，好亲切的RMB~每个页面都是一张人民币风景局部放大图，创作者加入巧妙的创意元素与微动态进行细腻刻画，带观众走进了人民币的微观世界。每一张钞票图案配合发人深省的文案，在推广微信红包的同时呼吁人们重新审视人情与名利的奥义。 2.礼物/贺卡/邀请函每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。AKQA创意营销公司在圣诞之际献上了一份厚礼——梦幻水晶球。通过移动手机，镜头从水晶球外不断摇晃推近，渐渐走进水晶球的微观世界里。通过手机环顾四周，可以360度欣赏水晶球里的全景，摇一摇雪花便漫天飘洒。写下你的祝福并分享给朋友，相信一定会惊艳到对方。这个H5页面使用了重力感应、3D等技术，文字与BGM的使用也十分讲究，给用户带来了完美的互动体验，值得细细品味。 Evernote在过年期间也别出心裁地推出语音贺卡，通过公众号引导用户对其发送一条语音消息，然后把这条祝福语音结合中国风动画做成一张独一无二的语音贺卡发送给朋友。整体色调也是以Evernote品牌色为主，同时蕴含着一丝优雅的年味，十分讨巧。 3.问答/评分/测试问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。与本文开头一样也是大众点评的项目，这次是为姜文的电影《一步之遥》做持续推广，让用户为姜文的代表作评分。视觉设计依旧出彩，开脑洞的创意和动画设计令人叫绝（一定要扫一扫体验下！）。延续了怀旧大字报风格，字体、文案、装饰元素等细节处理也十分用心。问答形式的H5页面能做到这个份上也是蛮拼的。 4.游戏从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。Same在圣诞节推出了一款名为《圣诞老人拯救计划》的H5小游戏，操作非常简单，只需用手指交替上滑，把角色的脖子向上拉到无限长，游戏会记录你拉的最高距离，跟朋友比一比谁比较长。界面清新可爱，与Same的招牌画风一致，游戏角色也是Same的品牌角色，通过幽默恶搞的游戏向用户传达Same独到有趣的产品文化。 三．为设计加分的4个要点一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：1.细节与统一要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。大众点评姜文电影推广系列的《九步之遥》H5专题页便牢牢抓住了这一点。从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效，无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。 尤其关注“分享提示”这个细节设计，比起一个简单的箭头和一句冷冰冰的“点这里分享”，用心的细节设计带来的高品质和好感度是显而易见的。再贴几个精彩案例： 2.紧跟热点，利用话题效应想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。天天P图抓住武则天热播的契机推出了风靡海内外的媚娘妆，同时《全民COS武媚娘》的H5互动页也第一时间上线，操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众又推广了产品。 网易娱乐在武媚娘剪胸风波的风口浪尖上推出了名为《神还原武媚娘被剪胸真相》的H5专题页，放下节操用极富想象力的粗旷草图风向广大观众“还原”了真相。一时间被疯狂转发，网易娱乐也算是顺势自我宣传了一把。 3.讲个好故事，引发情感共鸣不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。LEVI’S新年优惠活动专题页以第一人称的口吻，用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比，用手绘风渲染出亲切的怀旧氛围。最后引出“这个新年，把压力和束缚打包扔掉，用新鲜的眼光感受生活，一起活出趣”的品牌推广slogan，代入感极强的故事无疑是驱动分享的源动力。 4.合理运用技术，打造流畅的互动体验随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。（有兴趣的话可以点击这个网站 几乎有所有H5动态效果的展示）。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。典型的案例是淘宝在双12推出的预售推广H5专题页。在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动态GIF。设计师巧妙利用图形设计与组合，在滑动过程中营造出一种丰富的视差滚动效果，单个图形元素的遮罩、旋转与整体页面的动势配合极为默契。 结语随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。未来必将涌现更多优秀的H5页面，让我们拭目以待。1437
分享到微信朋友圈
主编追逐中的IT人啊，靠谱是比能力更重要的事
人人都是产品经理社区（）是中国最大、最活跃、最具人气产品经理学习、交流、分享平台，微信公众号woshipm。成立5年以来举办线上活动500余场，线下活动数百场，覆盖北京、上海、广州、深圳、成都、杭州等30多个城市，在互联网业内得到了广泛关注和高度好评。社区目前拥有300万忠实粉丝，其中产品经理占比50万， 中国75%的产品经理都在这里。