深度解读 | iH5背后的设计逻辑

一、体验环境

体验产品：www.ih5.cn

评测时间：16年11月

浏览器： Google Chrome 53（PC端）

二、产品概述

产品定位：专业的H5创作工具与服务平台

产品服务

iH5背后的设计逻辑其实是要提供一套完整H5广告制作解决方案，构造H5制作的生态链。iH5在网站蓝图的构建上，主要分四个部分——

（1）H5广告展示平台

表面上看，H5广告展示平台就是一个行业优质H5的聚集地，展示作品为iH5平台用户制作的H5。

这些广告的效果、来源都是公开的，包括作者、关注、点击量、点赞数等信息，隐藏3个目的——

a. 社交：用户可以关注特定的设计师并与他们发起对话，为特定的作品点赞，实际是为了打通社交联系，加强iH5的使用粘性。

b. 资源池：公开iH5设计师的主页信息，有利于买手与设计师进行交流，培养H5制作行业的专业作者资源。

c. 权威性：iH5首页选择的作品，大多数是比较知名的品牌，以及体现产品差异化的H5，实际上是为了加强品牌与网站的权威性。

（2）H5可视化编辑工具

iH5提供H5的在线可视化制作与发布，包括全景组件、画布、物理引擎、画图、付费点等高级组件。

从界面上看，iH5编辑器分为菜单栏、工具栏、属性栏、工作台、资源区5个部分，隐含用户、开发逻辑、操作逻辑三个方面。

a. 菜单栏：包括PSD导入、模板、在线课堂、LOGO等按钮，看起来简单，却涵盖iH5面向的不同群体。专业设计师需要依靠PSD分层进行设计，初学者需要依赖于模板和在线课堂，商业用户重视的是自定义LOGO的加载。

b. 工具栏：提供的组件大部分是比较基础的多媒体对象，诸如画布、输入框、变量、文本、全景容器等，几乎没有像表单、图表等组合程度较高的套件，说明iH5提供的是底层元素的交互，开发初衷是要确保设计的灵活性与拓展性。

c. 工作台：支持拖拽上传、拖拽改变属性等动作，属于iH5可视化编辑的方向之一，图形化的可操作界面。

d. 属性栏&资源区：以参数的设定为主，属于iH5可视化编辑的方向之二，文字化的属性配置。

（3）工具教学与培训中心

提供针对iH5的H5制作教学，包括线上的QQ群咨询、直播间、教学视频、教学手册，以及线下的课程培训。

本质上，采用的是线上免费教学、线下付费指导的模式。

Photoshop等软件刚兴起的时候，没有这么多教程，也没有太多案例，大多数人也需要自己摸索进行学习。但等待用户群体自发地成熟，过程是十分缓慢的。

因此iH5采取的措施就是先做赔本生意，组织大量人力去设计案例、开发教程，提高网站实用性的形象；随着业务的扩张、用户的增长，再推出专业化的培训课程，维持免费培训的成本，体系成熟后还能成为盈利的重要来源。

（4）数据监控中心

iH5提供H5投放后的访问情况与传播路径追踪，这些数据目前只有基础的访问增长、数据库后台数据开放给设计师，路径追踪、事件监测等高级功能应该是面向商业用户的。自建数据监控中心有两大益处：

a. 精准量化广告效果：让用户可以了解广告的投放与传播质量、不同渠道的投放与传播效果。

b. 大数据报告：通过长期的数据收集、统计与处理，有利于输出专业的行业数据报告。

三、用户分析

根据网站展示的作品类型，可以看出产品主要用户是企业、媒体、广告公司的营销人员，也有一定数量的独立设计师。

用户需求与痛点

·想要做几个H5来推广，应该怎么做？

·想要做出720°全景、物理碰撞这些复杂效果，可是不会代码！

·想要独立制作H5广告，可以去哪学？

·想要为公司做几个H5广告，可以找谁？

·想要接一些H5的设计单，可是编程太耗时间了！

用户反馈

根据公开的用户群、百度贴吧等地方的评论收集，也可以看出无论是企业还是个人，用户都是希望在提高制作效率的同时，保证制作质量。

从根本上，用户需求是要简单、快速地做出专业水平高的H5。

四、功能分析

iH5遵循“图形化+事件+配置”的工作流程，用事件控制不同对象/元素的交互，相比其他工具在实际操作上对多媒体的控制更灵活多样。

（1）基础多媒体组件

一般的H5页面制作工具都具备的组件，比如中文字体、图片、音频、视频、地图等。

（2）高级多媒体组件

包括720度全景、物理引擎、时间轴、付费点等特色组件，属于HTML5网页支持的复杂功能，可能涉及外部js的应用。

（3）数据应用组件

与iH5数据库相关的功能组件，主要涉及对字段、输入框与变量的控制，属于HTML5网页表单相关的控件，拓展性较强。

（4）容器组件

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!