如何设计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的工具，我就说个自己用的给你吧工具名叫“我要联赢”可以制作情景网页玩法多样、

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

制作办法：先准备H5的制作工具－然后，以IH5为例，要注册一个账号－接着，注册完毕－然后，点击创建作品，选择电脑版－接着，在编辑窗口中，插入图标并选择、上传，在里面 *** 作即可。

制作具体办法如下：

1、首先，准备一个H5的制作工具，自行在百度搜索一下，这里以IH5为例，先注册一个账号，如下图所示。

2、然后，在注册的页面中，填写手机号、密码等信息后登录账号，如下图所示。

3、接下来，在主页上，单击“创建新工作”，如下图所示。

4、然后，选择电脑版，点击创建作品，如下图所示。

5、接着，在编辑窗口的左侧，单击“插入”图标，选择并上传，如下图所示。

6、然后，显示，点击窗口左侧的事件图标，如下图所示。

7、接下来，在d出的对象框中，勾选和事件1即可，如下图所示。

8、然后，在触发条件选择点，目标对象选择，目标动作选择振动，时间选择3秒，如下图所示。

9、接着，单击窗口顶部的“保存”图标。输入作品的标题和简介，如下图所示。

10、最后，这时，就可以查看作品完成的作品了，如下图所示。

注意事项：

在事件的页面中，一定要记得目标对象选择，目标动作选择震动，时间选择3秒，否则，下面的 *** 作无法进行了。

1 背景图
炫酷的画面，离不开背景的衬托，能否快速更换背景图，相信是考验一个H5页面能否快速完成的准则之一；
2 文本
微信交互H5页面更重交互，重视觉效果，在酷炫的背景衬托之下，突出重点的文字往往是点睛之笔；
3 音乐
炫酷的背景下，配以提纲挈领式的文字，如果能够再来一段能够引起共鸣的音乐，那是何等的应景；
4
背景之外，重点之间的交互、与文字的配合正是H5页面能够调动用户感官的重要方式!光速的定义是光在1秒内行驶距离，所以光速比声速快，比打字速度更快。那为什么不用呢
5 视频
如果炫酷的背景、精炼的文字、应景的音乐，还不能够让你感到震撼的话，那就来段视频吧!一目了然!
6 按钮(点击跳转链接)
H5页面在微信展示的优势是交互效果好，观赏性强，但是归根结底，还是要回到营销的目的上来。或用于宣传，需要链接到更为详尽的介绍页面;或用户收集信息，需要链接到指定的信息收集页面。如此一来，是否具有点击跳转功能就成为判断一个H5工具是否可供选择的硬性标准之一；
7 输入框
在微信H5页面中，除宣传类外，大部分都是以收集信息为目的的。除了使用麦客表单、金数据、问卷星等第三方表单收集工具外，各个H5工具内置的输入框功能也不失为一个很好的选择。这样，在对应的后台，不仅可以看到访问信息(如已有查看权限)，还可查看详细报名数据。

新手可以尝试用意派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开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。

首先HTML5不能简称为H5，为啥就不说了。其次，页面和制作之间不要空格，因为这样会让人理会错意思。最后，题目应为：如何自己编写HTML5代码。

唠叨完毕，下面是回答：

HTML5是HTML的一个版本，所以只需要使用HTML的编辑器就行（常见的有：Windows记事本，gedit，Atom，SublimeText，Bluefish，WebStorm，等）。这个版本主要是语义细节化和规范化，方便了搜索引擎的录入（不排除搜索引擎不更新的情况）。

如果不会写，那就上网找下HTML教程，有非常多的网站可以使用，另：推荐使用Google搜索，百度目前（20161231）在这些技术问题搜索方面有所欠缺。

简单的说就是利用html5制作出来的页面。众多制作商都是将H5页面拆分成模板、、文字和特效四个方面，用户可以自由选择模板，将手机中的随意加入，并且修改文字内容，产生逻辑。在逐个添加模本文字音乐等， *** 作简单方便，目前已成为朋友圈的新潮流。

具体如下。
寻找H5的制作平台目前网络上有不少H5页面的制作平台，我们可以从中找一个比较流行的、免费的，然后在这个平台上注册一个自己的账号，进入这个平台。找到H5页面创建，就能够看到不同的主题。2编辑h5模板页面一般来说，H5主题页面的内容是需要编辑的，不用担心自己没有经验不会进行编辑。事实上这非常的简单，一般来说，H5制作平台分为三个区域：左边的是H5页面结构展示区，中间的是h5页面制作区，右边的是组件属性。
广义上，H5指的是HTML5，即网页使用的HTML代码——第五代超文本标记语言。狭义的解释。狭义上的解释，H5就是——互动形式的多媒体广告页面。

完整的H5页面的制作流程为：策划案——原型图——文案拟定——视觉设计——动画设计——音效编辑——代码或工具实现——上线这是一种比较理想的作业流程，一般到了一定规模的制作公司会采用这种方式。如果公司的细分程度做不到这么细的话，那就身兼数职，但是流程是不变的。

1、H5页面正规流程下需要用什么软件制作（不要网上那种几张摆摆自动生成的）策划阶段：word、PPT，我还见过用excel做策划案的（还做得相当不错呢）原型：墨刀、OmniGraffle、Origami、乎之原型、Easel、Prott（其实我常常就是在纸上画出来，然后丢给设计童鞋，如果是设计童鞋参与到策划阶段，可以直接出简单的手绘稿）视觉设计：PS、AI动画设计：AE，C4D音效编辑：garageband、finalcut、AdobePremiere实现：大众型工具：MAKA、兔展、易企秀，还有很多，也很优秀。利用模板，支持一定范围的自由创作。

2、需要用到哪些技术（比如哪些程序语言）Html5,、CSS3、js、threejs、webGL、nodejs、SVG、PHP如果是做H5的游戏，那就涉及到egret和layabox和cocos，我们用egret多些。哦对了，还有一些开发接口：百度API、微信红包API、还有识别和声音识别的接口。

---