免费论文网 首页

h5页面制作教程

时间:2017-02-12 06:20:30 来源:免费论文网

篇一:国内H5页面制作工具评测-iH5排第一

国内H5页面制作工具评测,iH5排第一

当前,H5页面制作工具的各种排行榜与评测文章花样百出、各执一词,却都没有明确依据。国内的大多评测与利益集团密切相关,说白了是抬高自有品牌、贬低竞品的工具,因此本文尽量通过可量化的指标,保证评测结果的可信度。

首先须明确,国内的H5页面制作工具,一般指用于HTML5页面可视化开发的在线编辑器,基本目的为生成可用于传播的HTML5网页。因此,无论不同工具在功能上有多少差异,基本面向作品的一键发布与即时投用,制作流程如下:

这与国外存在很大差别。美国也有H5页面制作工具,但多为离线软件形式、成品是打包的文件夹,功能应用上专用性也较强。比如Adobe Edge和Tumult Hype偏向网页动画、Google Web Designer偏向广告设计、Construct 2偏向游戏制作,制作流程如下:

评测以工具功能与性能为主,包括多媒体功能、高级应用、微信应用和用户友好度四个指标(各5分,总计65个参数),总分20分。有意思的是,诸如初页、MAKA这些在H5界“盛名”的H5页面制作工具,并没有排上名次,评测得出排行榜单如下:

第1名 iH5.cn 18星半

多媒体支持 ★★★★☆

微信应用 ★★★★☆

高级应用 ★★★★☆

用户友好度 ★★★★★

iH5综合性能最强,各项指标的得分均比较高,品牌展示、动画、游戏、建站均适用,主要面向企业用户。因为免费,也不少像我这样的小散户用iH5玩玩票。多媒体文件支持方面,iH5是唯一同时支持图片(JPG、GIF、ZIP、PSD等)、音视频、网页等的上传,并允许用户在生成页面中重设文件属性的编辑器,拓展性高。

总的来说,iH5目前有超过10项高级功能的可视化是业内独有的,包括:(1)绘画(2)横幅(Banner)(3)画布(4)物理引擎(5)运动模拟与监测(6)智能语音识别(7)轴动画(8)响应设备(9)跨屏互动(10)数据库(11)变量绑定(12)数据运算等的可视化,也支持红包、支付、录音、拍照上传、获取用户个人信息等微信功能。

iH5界面看起来有点“原生态”,但实用性和友好度很高,模板、工具说明手册、教程齐全,也提供历史记录、另存为作品等多种操作回退方案。美中不足的是,iH5并不具备制图和图表功能。

第2名 Epub360 10星

多媒体支持 ★★

微信应用 ★★☆

高级应用 ★★☆

用户友好度 ★★★

和搜索引擎等互联网产品的现象一致,第二名和第一名的差距比较明显。Epub 360相当于升级版的易企秀,微信应用和高级应用的支持较好,独有功能是有一个编辑SVG代码的简易入口。

总的来说Epub 360虽然原意是面向HTML5页面的专业制作,但在复杂应用支持的设计上并不彻底。虽然能对文本、图片、音视频做简单的显示、播放与否的控制,但Epub 360不支持重设文件尺寸大小、播放进度等较复杂的控制,也不具备动画、游戏制作所需的带轨时间轴、物理引擎等功能。

界面布局比较合理,遗憾的是Epub 360

并不提供一对一的配置,比如不具备使

用条件的事件也可能出现在对象属性里,对于用户体验是一大硬伤。

第3名 易企秀 8星半

多媒体支持 ★★

微信应用 ★☆

高级应用 ★

用户友好度 ★★★★

易企秀很容易定义,就是移动版的PPT制作工具,面向手机上的基本演示。易企秀各方面的功能,包括文本、按钮、图表、页面动效等参数都与微软的Powerpoint如出一辙。当然,易企秀图表的个性化设计还比不上微软。

易企秀还是有一定H5页面制作特色的,比如基于套件的表单采集,以及微信应用上有录音和拍照上传功能。但易企秀的功能有些还不够稳定,

比如虽然声明可

篇二:国内H5页面制作工具评测-iH5排第一

国内H5页面制作工具评测,iH5排第一

当前,H5页面制作工具的各种排行榜与评测文章花样百出、各执一词,却都没有明确依据。国内的大多评测与利益集团密切相关,说白了是抬高自有品牌、贬低竞品的工具,因此本文尽量通过可量化的指标,保证评测结果的可信度。

首先须明确,国内的H5页面制作工具,一般指用于HTML5页面可视化开发的在线编辑器,基本目的为生成可用于传播的HTML5网页。因此,无论不同工具在功能上有多少差异,基本面向作品的一键发布与即时投用,制作流程如下:

这与国外存在很大差别。美国也有H5页面制作工具,但多为离线软件形式、成品是打包的文件夹,功能应用上专用性也较强。比如Adobe Edge和Tumult Hype偏向网页动画、Google Web Designer偏向广告设计、Construct 2偏向游戏制作,制作流程如下:

评测以工具功能与性能为主,包括多媒体功能、高级应用、微信应用和用户友好度四个指标(各5分,总计65个参数),总分20分。有意思的是,诸如初页、MAKA这些在H5界“盛名”的H5页面制作工具,并没有排上名次,评测得出排行榜单如下:

第1名 iH5.cn 18星半

多媒体支持 ★★★★☆

微信应用 ★★★★☆

高级应用 ★★★★☆

用户友好度 ★★★★★

iH5综合性能最强,各项指标的得分均比较高,品牌展示、动画、游戏、建站均适用,主要面向企业用户。因为免费,也不少像我这样的小散户用iH5玩玩票。多媒体文件支持方面,iH5是唯一同时支持图片(JPG、GIF、ZIP、PSD等)、音视频、网页等的上传,并允许用户在生成页面中重设文件属性的编辑器,拓展性高。

总的来说,iH5目前有超过10项高级功能的可视化是业内独有的,包括:(1)绘画(2)横幅(Banner)(3)画布(4)物理引擎(5)运动模拟与监测(6)智能语音识别(7)轴动画(8)响应设备(9)跨屏互动(10)数据库(11)变量绑定(12)数据运算等的可视化,也支持红包、支付、录音、拍照上传、获取用户个人信息等微信功能。

iH5界面看起来有点“原生态”,但实用性和友好度很高,模板、工具说明手册、教程齐全,也提供历史记录、另存为作品等多种操作回退方案。美中不足的是,iH5并不具备制图和图表功能。

第2名 Epub360 10星

多媒体支持 ★★

微信应用 ★★☆

高级应用 ★★☆

用户友好度 ★★★

和搜索引擎等互联网产品的现象一致,第二名和第一名的差距比较明显。Epub 360相当于升级版的易企秀,微信应用和高级应用的支持较好,独有功能是有一个编辑SVG代码的简易入口。

总的来说Epub 360虽然原意是面向HTML5页面的专业制作,但在复杂应用支持的设计上并不彻底。虽然能对文本、图片、音视频做简单的显示、播放与否的控制,但Epub 360不支持重设文件尺寸大小、播放进度等较复杂的控制,也不具备动画、游戏制作所需的带轨时间轴、物理引擎等功能。

界面布局比较合理,遗憾的是Epub 360

并不提供一对一的配置,比如不具备使

用条件的事件也可能出现在对象属性里,对于用户体验是一大硬伤。

第3名 易企秀 8星半

多媒体支持 ★★

微信应用 ★☆

高级应用 ★

用户友好度 ★★★★

易企秀很容易定义,就是移动版的PPT制作工具,面向手机上的基本演示。易企秀各方面的功能,包括文本、按钮、图表、页面动效等参数都与微软的Powerpoint如出一辙。当然,易企秀图表的个性化设计还比不上微软。

易企秀还是有一定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页面制作教程
由:免费论文网互联网用户整理提供,链接地址:
http://m.csmayi.cn/show/166434.html
转载请保留,谢谢!
相关阅读
最近更新
推荐专题