返回首页

怎样制作一个H5页面

83 2023-11-21 15:35 admin

一、怎样制作一个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里的常见制作流程如下: