怎样制作一个H5页面

一、怎样制作一个H5页面

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

2、依照要求填写手机号、密码等信息后登录账号。

3、在个人主页，点击创建新作品。

4、选择电脑版，点击创建作品。

5、在编辑窗口的左侧，点击插入图片图标。选择图片、上传。

6、显示图片。点击窗口左侧的事件图标。

7、在对象树的列表里勾选图片和事件1。

8、触发条件选择点中，目标对象选择图片，目标动作选择震动，时间选择3秒。

9、点击窗口上方的保存图标。输入作品的标题和介绍。

10、完成后即可查看作品。

二、UI交互设计需要学些什么东西？

UI设计是一个课程大类，包含的小科目很多，比如平面设计、网页设计、电商设计、UI交互设计等等。接下来我们分别讲一些每个科目的培训课程内容。

一、平面设计

平面设计分为两个阶段，在第一阶段视觉设计基础中会学习UI行业概述与课程介绍、PS软件入门与PS基础抠图、钢笔抠图、钢笔绘图、扁平图标与写实图标绘制、画笔工具制作噪点插画、PS高级抠图与人物精修、蒙版、调色、滤镜、商业海报制作、AI软件入门与基础工具操作、AI绘图功能基本操作、制作矢量元素与图标、AI画笔工具/颜色、混合工具/文字/段落工具/符号工具制作立体效果海报、AI的3D效果与偏移路径效果制作综合海报、AI综合使用及提升等课程。

第二阶段品牌运营视觉设计中会学到现代素描与光影、手绘ICON、手绘商业插画与创意设计、图形形态创意与插画角色设计、插画实战项目解析与应用、字体设计、品牌概念认知、品牌LOGO创意、品牌形象设计及应用延展、品牌宣传物料设计、线上品牌宣传设计、项目整合与答辩等。

二、网页设计

网页设计课程也分为两个阶段，在第一阶段中会学到行业概述与学前准备、Photoshop图像处理软件、illustrator矢量图形处理软件、CINEMA 4D 三维立体软件、矢量插画绘制等课程。在第二阶段中会学习网站概述、网页设计与制作介绍、电商设计与店铺装修、web界面—专题设计、web网站布局与专题制作、企业网站设计与制作、后台系统设计、WAP网站设计、H5新媒体运营设计。

三、电商设计

电商设计课程则包含电商概论、产品拍摄技巧与后期精修、C4D三维场景与PS高级合成海报打造、打造高点击主图、产品详情页设计之提炼卖点、高品质视觉营销店铺首页、大促营销策划与专题页面视觉呈现、推广图引爆流量、项目整合与答辩等。

四、UI交互设计

UI交互设计课程也有两个阶段，在第一阶段产品交互UI设计中，要学习Sketch软件实操、项目全流程介绍、项目产品认知、交互设计入门、交互设计方法、PC端与移动端项目交互原型图、项目原型设计答辩、PC及移动端界面设计流行趋势、ICON图标设计、PC端设计规范及界面设计、移动端设计规范及界面设计、切图标注、高保真交互、整套项目答辩、电视、小程序、项目整合与答辩等课程。

三、做H5页面用什么软件比较好

H5页面制作软件按定位划分，基本分为2类：模板类和专业工具类。

模板类有哪些呢？易企秀、MAKA、兔展、初页等；专业类工具并不多，目前国内数得过来的三个：意派Epub360、木疙瘩、ih5。

如果非要说哪个软件好，可以从几个角度出发：

一、定位上：如果是模板类工具，动画跟交互（如滑动翻页、点击等动作）修改空间不大。你如果是出色的设计师，买个模板，自己改改视觉设计部分，但想在动画跟交互效果上有些想法，基本就被框定了。

如果是专业类制作H5工具，发挥空间大一些：

意派Epub360更适合设计师、微信运营、文案、策划甚至是文员使用，如果接触过PPT，使用起来还是比较好上手的。这个是有各种各样的组件来完成不同的交互展示，自由度够高，也足够灵活。

木疙瘩相当于将Adobe的Flash功能搬到线上，优势是处理元素动画，用过Flash的用户可能比较好上手，用的不多，所以不做评价。

ih5适合设计师、程序员等使用，上手有一定门槛，用的不多，不做评价。

二、性价比：

如果是自己公司单位做一个H5给某个活动用，一般1000块左右够了，木疙瘩跟意派Epub360还算适合；ih5的商业套餐最低上万，如果只是为了去除H5第一页的加载广告，这个费用也不低。以上内容供参考，根据个人需求衡量。

如果自己或者所在单位是接H5业务的，建议开通套餐，一般3000元左右一年，这个定位基本就可以满足大部分企业用户对于H5制作的基本需求了，自由度也更好，推荐意派Epub360。

三、自己感受上手难度：

木疙瘩对于使用过Flash软件的小伙伴足够友好；意派Epub360的初级版本跟PPT非常像，现在升级后比PPT难度大一些，自己下点功夫学习下还是可以拿下的；iH5没有进行过深度学习，对程序员比较友好，设计师也OK。

最后，如果个人对于品牌展示或者营销活动方式有一些创意想法，推荐工具类产品制作，模板毕竟是有限制的。

意派常用的企业展示效果如：一镜到底、全景效果、走马灯、画中画、视频H5。

邀请函类型：数据收集表单，视频+关联控制等的。

比较热门的像是合成海报、测试题H5，这些H5都可以用工具里的一些组件来做。在意派Epub360里的常见制作流程如下：