如何设计h5页面

完整的H5页面的制作流程为：策划案——原型图——文案拟定——视觉设计——动画设计——音效编辑——代码或工具实现——上线

这是一种比较理想的作业流程，一般到了一定规模的制作公司会采用这种方式。如果公司的细分程度做不到这么细的话，那就身兼数职，但是流程是不变的。

你的提的问题，是初学者普遍困惑的问题，我按照你的提问顺序逐一回答一下：

1、H5页面正规流程下需要用什么软件制作（不要网上那种几张摆摆自动生成的）

策划阶段：word、PPT，我还见过用excel做策划案的（还做得相当不错呢）

原型：墨刀、OmniGraffle、Origami、乎之原型、Easel、Prott（其实我常常就是在纸上画出来，然后丢给设计童鞋，如果是设计童鞋参与到策划阶段，可以直接出简单的手绘稿）

视觉设计：PS、AI

动画设计：AE，C4D

音效编辑：garageband、finalcut、AdobePremiere

大众型工具：MAKA、兔展、易企秀，还有很多，也很优秀。利用模板，支持一定范围的自由创作，推荐MAKA。

专业型工具：支持自由创作，推荐ih5和意派

2、需要用到哪些技术（比如哪些程序语言）

Html5,、CSS3、js、threejs、webGL、nodejs、SVG、PHP

如果是做H5的游戏，那就涉及到egret和layabox和cocos，我们用egret多些。

哦对了，还有一些开发接口：百度API、微信红包API、还有识别和声音识别的接口

3、微信里的一些特殊的动态效果，比如摇一摇、倾斜手机、举起手机是怎样实现的

这些是利用陀螺仪和重力感应做出来的，实现方法已经很成熟了，百度一下吧。

参考H5最新玩法汇总有了这些新玩法，还怕没灵感？

4、H5页面怎样发布到微信上

等你做好一个H5的时候，我相信你就已经会怎么发布到微信上了，所以，justdo

it，不要什么都没做，就问题一大堆。即便你只是复制粘贴，你也先把整个流程走完，然后再提问。

5、有什么相关参考资料

人脸识别

百度地图接口title=jspopular

迪士尼动画原理

Egret开发者中心

199case的H5案例库

牛黄清心丸

H5涉及的内容太多了，每个环节都可以展开讲很多，关注我，不一定什么时候就爆出猛料来的。h5页面自己做肯定是不行的，可以借助制作h5的工具，我就说个自己用的给你吧工具名叫“我要联赢”可以制作情景网页玩法多样、

功能齐全还有配套做微网页的功能，无论是营销推广还是自己玩玩发朋友圈都不错。望采纳！

从开发者的角度：

需要写代码进行开发，可能会用到JavaScript、html5、css各种知识，专业度比较高，不是程序员一般难以实现。

从普通使用者的角度：

借助H5页面在线制作工具，或是直接套用模板，或是完全自定义编辑设计，也可以模板+自定义结合。市面上H5制作工具很多，在 *** 作方法上大同小异，跟做PPT差不多，而且其风格样式基本能覆盖生活和工作各种场景的需要。

如果追求简单易上手、节约时间的话可以尝试MAKA、易企秀、兔展、初页这几款，这几款模板选择多，直接提供组件，拖拽编辑即可。如果想做更强大的酷炫交互页面，追求个人设计感的话可以尝试秀米和iH5,这两款工具没有手机APP，只能在电脑 *** 作。

1MAKA

这款工具在国内上线时间算是比较早的了，用户基础庞大，模板丰富， *** 作简单。

2易企秀

模板也很丰富，但专门针对企业推广营销，全方位覆盖企业各种营销内容创意制作。

3兔展

模板丰富，每天都有更新，模板的风格也比较简约大气，有设计感。

4初页

风格小清新，刚开始推广的点是“情书”，把照片做成故事和书，目前智能在手机APP上进行 *** 作。

5秀米

模板和页面组件都很丰富，自定义设计编辑功能强大但并不复杂。秀米除了可以做H5页面，还是一款非常好用的微信公众号图文编辑器。

6iH5

一款功能非常强大的H5在线制作工具，甚至可以算得上专业级别， *** 作起来没有其他工具简单，需要自己多去看教程，多练习。

1/6分步阅读

在网络上搜索H5制作工具，下面会出现很多的H5页面制作工具，选一个简单好用的。（如图一所示）

2/6

点击进入到制作工具的官网，点击注册登录。（如图二所示）

3/6

登录上官网以后，在页面中移动鼠标到“H5管理”，出现两个选项，点击“新建H5”。（如图三所示）

4/6

新建H5后，系统会提示选择竖屏或者横屏，一般都是在手机端浏览，所以选择竖屏。（如图四所示）

5/6

选择完后，会出现一个空白模板，需要把之前准备好的、文字还有音乐放进去。（如图五所示）

6/6

把、文字和音乐放进去即可以个人的审美观来进行动画、特效等等的设置，点击下方的按钮，刷新预览效果。（如图六所示）

有专业的H5工具可以制作。自己用的是意派Epub360。这个的话是相对比较专业一些的，制作逻辑偏向于PPT，上手难度3颗星（一共5颗星），但是这个工具制作出来的贺卡可以充分展示你的创意想法，当然前提是你对该工具 *** 作熟练。用该工具做的贺卡可以传递语音祝福、文字涂鸦，转发给好友一起合成一张合照等等，十分有趣。

一般是由、文字甚至是视频、音频组成的电子，基于网络平台传播。格式一般是JPG、JPEG、或者PNG格式。

需要借助一些设计软件，PC端软件PS、AI，或者在线的一些设计工具，如创客贴，图怪兽等。

常见制作方法一般是找人定制开发写代码、或者套模板，或者用工具做。

可以尝试一下意派Epub360，并且有专业的客服人员帮你回答各种问题，不用担心做不出来，这是很多平台都做不到的一点。

有很多的免费平台可以做出精美的h5页面，甚至有一些可以做出视频效果。

个人最早用的就是易企秀

概括来讲简单，容易上手，也有很多模版。曾经用易企秀做过一个移动端企业网站

类似的还有兔展MAKAWe+

2014年的时候用过互动大师

当时感觉互动大师是一款非常强大的软件，相比较易企秀来讲可以自定义更多的动态效果，曾经用互动大师做过一个短的动态视频。

除此之外还有很多的免费平台可以做出精美的H5页面。

首先如果没有任何基础的话，可以去网上找h5设计工具，不用写一行代码就可以制作精美的界面。如果想自己实现一些精美的界面或者一些其他效果的的话，你需要先学习几门编程语言，先学习HTML，然后是CSS，最后再看下javascript

在线表单是用户可以通过浏览器向服务器端提交信息的功能，如我们常用的用户注册、在线联系、在线调查表等都是在线表单的具体应用形式。在网页的HTML代码中，表单的内容位于标签之间。在网络营销中，在线表单与电子邮件一样可以作为一种在线顾客服务手段。
在线表单的作用
在线表单的作用与Email类似，顾客无需利用自己的电子邮件发送信息，而是通过浏览器界面上的表单填写咨询内容，提交到网站，由相应的顾客服务人员处理，由于可以事先设定一些格式化的内容，如顾客姓名、单位、地址、问题类别等，通过在线表单提交的信息比一般的电子邮件更容易处理，因此有为数不少的网站采用这种方式。
从功能上说，在线表单和电子邮这两种常用的在线都可以实现用户信息传递的目的，但从效果上来说却有着很大的区别，但如果处理不当，在线表单可能会存在很大的潜在问题，因此应该对此给予必要的重视。
作为市场、运营人员，相信大家对表单工具都不陌生，但如果你还认为表单工具只是做信息搜集、问卷调查时才会用到，那你就大错特错了。近两年，国内涌现出不少具有创新性的表单工具，比如为用户提供CRM解决方案的麦客，满足商家订单支付需求的金数据，人人秀将这些表单移植到h5页面中，推出了在线表单插件，方便用户在线使用，并且为企业提供更多创意、新颖的营销玩法。
制作在线表单的步骤
一、创建姓名框
首先打开人人秀制作页面，并选择好背景或者模板。
选择屏幕右侧的表单按钮，d出选项栏，在d出栏中我们可以看到输入框、单选、下拉菜单等一共14种表单类型和单页模板的链接按钮。我们现在需要姓名输入框，鼠标左键点选输入框。
选中我们添加的输入框，在右侧可以调节输入框类型，点击类型下拉菜单，并选择姓名。因为姓名是每个用户的基础信息，我们必须获得，所以勾选必填。然后把输入框调整到一个合适的位置。
二、创建手机框
再次创建一个输入框，将类型选择为手机，并调整至合适位置。
这样，人人秀系统就会知道您所需要的数据类型是手机号码，并自动帮您过滤部分虚假手机号。如果您需要邮箱账号，也可以选择邮箱，人人秀系统也会自动帮您识别用户填写内容是否为有效的邮箱格式。
因为每个手机号或邮箱号都只能对应一个有效用户。所以，您需要在右侧勾选唯一。这样，当有人重复填写手机号码时，就会得到人人秀的提醒，并禁止他填写此号码。
如果您需要所有的人都填写自己的手机，那么需要勾选唯一上方的必填。
三、创建选择框
获得用户姓名以及后，我们需要获得一些其他信息，比如性别、职业等。所以我们需要再次点选表单按钮，根据您的需求选择单选、多选、下拉菜单、多级下拉等类型的表单。

新手可以尝试用意派Epub360制作一些简单的H5作品，这是一款专业的H5制作工具，大量基础功能均可免费使用。

你可以先到意派官网上的案例库中找找灵感，然后再到其教程中心查找相关教程慢慢学，合成海报、长页面、测试题等比较简单的H5创意形式都可以自学完成。此外，你还可以直接套用一些简单的模板，比自学制作更方便一点。

一、AdobeEdge目前还处于预览阶段的AdobeEdge是用HTML5、CSS、JavaScript开发动态互动内容的设计工具。内容可以同时兼容移动设备和桌面电脑。Edge的一个重要功能是Web工具包界面，方便确保页面在不同浏览器中的架构一致性，此外Edge还将整合TypeKit这样的字体服务。

动画和图形可以添加到HTML元素中，程序也能通过Edge自身的代码片段库或者JavaScript代码进行扩展。动画可以在独立的时间线上进行嵌套，还能实现互动功能。符合可以服用并通过API和代码片段控制。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器。

二、AdobeDreamweaverCS6AdobeDreamweaverCS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面。其FluidGrid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性。

开发者可以完全实现Web设计的可视化 *** 作，无需为代码所困。用户不但还能在LiveView中预览，还提供多屏幕预览功能。开发者可以通过MultiScreen预览面板查看HTML5内容的渲染效果。LiveView通过WebKit渲染引擎支持HTML5。

三、AdobeColdFusion10ColdFusion是用来开发企业Web程序的服务器端技术，通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。四、SenchaArchitect2在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。

开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发SenchaTouch2和ExtJS4JavaScript应用，并实时预览。五、SenchaTouch2SenchaTouch2是移动应用框架，也被看作是Sencha的HTML5平台。

开发者可以用它开发面向iOS、Android和Blackberry、KindleFire等多种平台的移动应用。六、DojoFoundationMaqetta来自于IBM的一个项目，DojoFoundationMaqetta是为桌面和移动设备开发HTML5应用的开源工具，支持在浏览器中查看HTML5界面。

用户体验设计师可以通过拖放组装UI样板七、微软VisualStudio2010ServicePack1虽然一开始并不支持HTML5，但微软在2011年三月发布的VisualStudio2010SP1中提供了IntelliSense，追加了针对HTML5的一些元素。

八、JetBrainsWebStorm4。0作为拥有HTML编辑器的JavaScript集成开发环境，WebStorm4。0提供了开发web应用的HTML5样板。开发者可以在创建HTML文档时可获得对HTML5文件的支持。例如砍伐者键入。

开发者还可以在chrome浏览器中实时预览HTML文档。九、GoogleWebToolkit该开发工具用于开发浏览器应用，但库中支持很多HTML5功能。包括对客户端或web存储的支持。其他HTML5功能还包括支持Canvas可视化，以及音频和视频widget。

十、DCloudHBuilderHBuilder是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。

H5页面怎么制作及发布？下面我们就来看一下如何制作H5页面吧，希望能够帮助到大家。

01

首先在浏览器中搜索“易企秀”，然后点进入他们的官网。

02

在易企秀官网H5模板中，找到一个你想用的模板，然后点击进入这个模板，找到“立即使用”字样。开始进行下一个 *** 作。

03

点击立即使用之后，会让你登陆账户的，可以选择直接用QQ登陆。

04

在H5页面制作中，修改好你想要的内容，然后点击页面右上角的保存，发布。就完成设置了。

---