篇一：5款最好用的H5大翻页制作平台推荐
互联网营销手段时时有时时新。屡屡刷爆朋友圈的H5页面绝对是现在最炫酷最吸睛的营销方式。这种集文字、图片、音乐、视频、链接等多种形式的展现形式，能够跨平台、低成本地实现企业宣传、活动推广、产品介绍、报名、增粉、反馈等目的，很快风靡全网。
然而，限于HTML5语言的技术门槛，无论是由程序员开发，还是外包制作，设计制作费用都居高不下，制作周期往往也很长，完全无法满足需求。所以市场上立刻出现了一批在线的H5页面制作工具。
这么多H5制作平台，哪一款最好用呢？华子上网推荐下面五款最好用的H5制作平台。
1、秀米
秀米主要是做微信编辑的，其微信编辑器功能所占的市场份额应该是全国最大的。不过，他们同时也在做H5页面设计。其H5制作功能延续了微信图文排版同样的操作方式和逻辑，操作相当简单。
但
是其问题也相当突出：模板种类和数量少，可选择少；DIY程度极差，只能套模板，模板几乎无法改动。功能较为初级，尚不能支持电话、表单等，无交互，还需
进一步的优化。图片上传有等级限制，超过一定流量也要付费。基础功能：★★★★扩展功能：★★性价比：★★★总评：★★★
2、搜狐快站
搜狐快站是致力于一站式移动建站的云平台，有搜狐十七年的技术经验做支持，本来就是基于HTML5语言的制作。不久前也进军了H5大翻页的制作领域，产
品时间虽短，却已相当成熟。
拖
拽式操作，简单易上手；有辅助线，支持图片微调；背景图片有滤镜功能，同一组件支持多重动画，DIY程度高。另外还支持表单、电话、视频、自动播放等。缺
点是大翻页制作入口较深，需要先创建站点。搜狐快站全面免费，所以不用担心制作成本啦。基础功能：★★★★☆扩展功能：★★★★☆性价比：★★★★☆总
评：★★★★☆
3、初页
初页给自己起了一个很有话题性的名字，可惜并未引起话题。它的模板质量很高，直接套用模板简单快捷，而且更强调在手机上的编辑功能。可是，它只能套用模板，自定义程度极低，除了外链，完全没有其他的交互。基础功能：★★★★☆扩展功能：☆性价比：★★★★总评：★★★
4、MAKA
MAKA
给自己起了一个很洋气的名字，界面同样做得很洋气，所以操作并不是那么得友好。不过他们推出了新手和高阶两种编辑模式，弥补了这一缺点。它的功能很强大，
模板和动画效果都很多，但问题是很多功能都需要付费。免费版功能不全，也不提供自定义动效、支付、电话支持、预约等服务。基础功能：★★★★☆扩展功
能：★★★☆性价比：★★总评：★★★☆
5、兔展
兔展的优点在于页面简单易上手，模板效果较多，DIY程度较高，动画实现方便。但同时它的缺点也很明显：上传的图可能会比例失调。
兔展分为免费版、体验版、VIP版，免费版仅支持默认功能，不支持一键关注、电话支持等，体验版和VIP版价格很高，果断觉得有些不划算。基础功能：★★★★扩展功能：★★☆性价比：★总评：★★★
很多其它的H5页面制作工具，不仅有国内的，甚至还包括国外的一些产品。像Wix、Weebly、Ceilfire、Jimdo、Mixeek等，有的基本功能根本比不上国内的产品，有的由于海外服务器速度太慢。总之，可以相信我国的H5技术水平已经达到了世界一流水平。
篇二：HTML5微信页面设计
我保证你一分钟就能看完这篇文章! 真的..
角色解释：
需求方：有钱大爷
设计人员：美工殿下
前端工程师：前端文艺青年
一个HTML5页面从提出到完成上线的流程：
1、需求方、设计人员、H5实现人员三方共同讨论实现方案
2、设计人员出设计图
3、H5人员按设计图出H5页面
4、需求方评估已实现的H5页面后给予反馈
5、设计人员与H5人员根据反馈进行适当调整
6、发布推广
如何提出一个合理的微信HTML5页面设计诉求？
合理分析诉求与公司团队拥有的资源：
1、需求完成时间；
时间给的越多，项目做的就越扎实，优化的也更好，就像造一座桥，三个星期完工，保质10年，1年完工，保质100年
2、现有技术能力；
根据人员的能力选用合适的技术，以及设计对应能实现的视觉特效
3、工作人员配备；
有些狂拽酷炫屌炸天的特效需要专业的游戏或影视人员参与制作
4、领导B格
不解释
5、公司B格
不解释
好吧以上都是枯燥的叙述，后面会有可爱的喵星人出现，所以往下看吧。
三方需要达成的共识与常识
一、手机屏宽度高度不一
由于手机屏大小不一，所以H5页面所承载的设计图相应的宽高也会不一样，是否需要设计多套不同的设计图以适应不同的手机屏？
最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸，但这样需要大量的人力与时间，而且维护成本太高，不符合大部分团队的实际情况。
典型的手机屏尺寸如：
导航栏+iphone状态栏高度： 64px
iphone4
屏幕总宽度: 320px
屏幕总高度: 480px
微信网页可视高度: 416px
iphone5
屏幕总宽度: 320px
屏幕总高度: 568px
微信网页可视高度: 504px
iphone6
屏幕总宽度: 375px
屏幕总高度: 667px
微信内网页可视高度: 603px
iphone6 plus
屏幕总宽度: 414px
屏幕总高度: 736px
微信网页可视高度: 672px
samsung galaxy note3 （三丧手机开发者的黑洞。。）
导航栏+Android状态栏高度： 73px
屏幕总宽度: 360px
屏幕总高度: 640px
微信网页可视高度: 567px
仅iphone就4个尺寸了，更别说Android阵营的手机了
特别注意：以上不是手机的分辨率单位，而是普通电脑上浏览网页时的像素，这和客户端Native制作有很大的区别。
比如iphone4,宽度就是320px像素，高度为480px，如果以实际分辨率来设计即640*960来排列设计，实际在H5页面显示时会显得很小。
一般我们都是以用自适应的解决方案，以一套或两套效果图适应大部分的屏目，放弃极端屏或对其优雅降级，牺牲一些效果
正因为只有一套或两套效果图，团队、公司拥有的手机型号又是有限的，那么其它型号的手机显示效果就需要大家脑补了，
需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。
二、两种效果图排列，以及对应的解决方案
1、效果图水平居中排列设计（较容易实现自适应）
由于是水平居中，则两边可以用纯色平铺，不管屏有多宽，都可以以纯色填充，这就是最最容易的自适应了。
篇三：移动端H5页面设计实战
移动端H5页面设计实战
目录
为什么要设计H5页面 ......................................................................................... 2
赛程魔方3D旋转界面设计 .................................................................................. 4
双屏互动游戏设计 ............................................................................................... 8
资讯与游戏的结合设计 ...................................................................................... 11
刮刮乐在移动端互动游戏中的微创新 .................................................................. 15
互动调查小游戏的设计创新 ............................................................................... 19
设计小贴士 ...................................................................................................... 23
为什么要设计H5页面
移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心（CNNIC）2014年7月的报告显示，中国网民中，手机使用率达83.4%，已经超过传统PC整体80.9％的使用率。其中，手机网络新闻的使用率为74.2%，仅次于即时通信和搜索，远超其他手机网络应用。在资讯移动化的趋势下，观察近期各大门户在重大事件报道中的表现，会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中，基于HTML5技术的移动Web页面（以下简称H5页面），较完美地融合了上述三种属性，成为当下最受关注的内容报道形态，也引爆了社交平台上的大规模分享行为。
就像CD取代磁带成为一种更高效的音乐播放方式一样，数字文件也将取代CD，依此类推，智能手机也将会替代PC的一部分重要功能。尽管仍有争议，但不可否认的是，移动互联网时代已经到来，随着用户从PC向移动端的迁移，从大屏到小屏，从鼠标键盘到多点触控，移动端逐渐成为媒体报道的前沿阵地。
一提起移动端，大家首先想到的就是手机上安装的移动应用，比如微信、腾讯新闻客户端、QQ浏览器等。我们称这些应用为原生应用（Native App），因为它们是需要安装在用户设备上的软件，它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能，例如使用存储空间实现离线阅读，利用图形加速实现界面动效，以及利用摄像头来上传图片，等等。但跟Web专题相比，移动应用的开发周期长，开发者需要将产品提交到应用商店供用户下载使用。以苹果的iOS应用开发为例，开发者在应用商店要发布应用，需要通过约耗时8天的人工审核。因此，把PC端的Web专题做成一个个移动应用是不现实的。
除了原生应用之外，在移动端还有一种产品形态——移动Web页面。它源自于移动互联网诞生初期的WAP页面，有着和PC网页同样的优点：开发周期短、发布和更新方便。此外，用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问，比原生应用要方便得多。但在2014年前，因用户渠道和设备性能的原因，移动Web页面的形态通常都非常简单，也很少有用户互动。2014年，HTML5技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。
在移动端，要在网页上实现交互和动效需要借助HTML5技术（例如CSS3媒体查询、CSS3动画、Canvas等）。现在的手机浏览器大都支持HTML5的核心技术，例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。
通过HTML5实现交互效果时，通常比原生应用要更消耗设备资源，因此设备性能就成为H5页面效果的一大瓶颈。现在，这个瓶颈正在消除：2014年7月的一项调查表明，中国手机用户换机周期已由2011年的29个月缩短到18个月。而近两年上市的智能手机，大都运行着较新的操作系统和浏览器，性能上也能基本达到展示H5页面的要求。
好的产品需要恰当的渠道来让用户发现和传播，如果把一个个H5专题比作“箭矢”，那新闻客户端、微信和微博等传播渠道就是射出这些箭矢的“弓”。利用新闻客户端、微信和微博内嵌的网页浏览器（见图1），H5页面可以与新闻文章、朋友圈状态和好友微博一起触达用户，再通过用户的分享形成传播。此外， H5交互页面凭借着精美的设计风格、新鲜的交互体验以及强烈的社交属性，对于用户来说有着极强的分享驱动力，很容易在移动社交环境中形成病毒式传播。微信红包和滴滴红包就是通过微信朋友圈广泛传播的H5案例。
图1 腾讯新闻客户端内的H5专题
综上所述，与原生应用相比，H5页面的传播性和灵活性使它更加符合媒体产品对时效性和差异化的要求，成为2014年移动媒体产品最重要的形态之一。
H5资讯专题主要基于H5技术，将图、文、动画、视频、音频等媒体形式进行合理组合，突破了传统新闻专题的内容、形式界限，让新闻资讯变得更加直观、生动。人性化的交互设计更好地将内容与人机互动结合，强化了用户的参与感。同时，这种多媒体形式创新带来的趣味性和新鲜感，也使用户分享专题的意愿得到提高，促进了新闻资讯专题的二次传播。
赛程魔方3D旋转界面设计
在2014巴西世界杯期间，我们与腾讯体育推出了一款世界杯赛程H5页面。在项目之初，我们就希望这一款小产品在内容定位+视觉设计+交互设计三个维度上可以高度统一，三位一体，围绕世界杯赛程赛事赛时这一中心，内容、交互、视觉密不可分；即设计与交互体现内容，内容反方向印证视觉与交互，将常规的体育赛程表通过多屏展现，时间轴表现等与H5交互特性紧密结合起来，创造出一种大家喜闻乐见的界面展示方式。随后小产品一经推出，赛程魔方（见图2）即引爆朋友圈，前后被复制抄袭几十次，从另一方面也印证团队定位的准确，形式与内容高度统一是项目成功的一大法宝。
图2 赛程魔方的视觉案例
交互形式与项目名称和内容高度统一：3D智能旋转交互方案（见图3）。
图3 3D旋转的交互模拟步骤
因团队负责媒体界面设计，所以从本源上我们十分强调内容与设计形式的高度结合，我们希望设计形式就可以强烈传达出我们要表现的内容与态度。项目名称为“赛程魔方”，体育赛事如同魔方一样复杂多变，结果未知，所以在交互设计上，希望能够利用HTML5的CSS 3D智能旋转方案完成多个页面的切换方式，以达到贴合“魔方”的项目概念。大家知道H5可以有3D旋转等形式，所以页面的交互方式将充分利用这一特性，当用户触控屏幕，手指上划，页面整体呼之欲出，以整体3D翻转的形式完成页面切换，交互形式新颖震撼并贴合内容。这一交互形式在随后多个项目中得到推广应用。
动态卡片抽出交互设计方案如图4所示。
图4 赛程魔方动态页卡抽出的交互虚拟步骤：从大屏到小屏
如图4所示，考虑到不同用户的不同需求，我们希望从封面起，即可以快速定位至相应页面，交互形式上补充了动态卡片抽出的交互设计方案，三排纵向并列式按钮以单击或滑动均可触发卡片抽出，继而快速定位至相应页面，满足相关用户的个性化需求。
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有