深度解读产品背后的设计逻辑

　　一、体验环境
　　体验产品：www.ih5.cn
　　评测时间：16年11月
　　浏览器：Google Chrome 53（PC端）
　　二、行业概述
　　行业背景
　　HTML5于2014年底定稿，此后世界各大互联网巨头以实际行动表示对新一代Web编写标准的支持。借助HTML5的跨平台、高拓展性等优势，近两年涉及互联网的产品或多或少依赖于HTML5，甚至称霸多媒体领域逾20年的Flash也不得不为HTML5让位。
　　需求分析
　　随着微信社交广告的兴起，国内很多企业都借助H5引发朋友圈的刷屏热潮，腾讯穿越故宫来看你、淘宝造物节、网易画小人、百度种太阳等等。越来越多企业希望利用H5广告实施新的线上营销战略，同时催生了大量互动广告公司、H5页面制作工具或平台的诞生。
　　随着国内网络广告市场规模的增长，HTML5被很多人认为是互联网的下一个风口。但因为HTML5概念的普及、应用的加强，H5页面开始出现大面积同质化的现象。各行各业对H5广告的产量和质量的要求越来越高，大家都在等一个和Adobe Flash一样兼具专业性与实用性的平台出现。
　　三、产品概述
　　产品定位：专业的H5创作工具与服务平台
　　产品服务
　　iH5背后的设计逻辑其实是要提供一套完整H5广告制作解决方案，构造H5制作的生态链。蓝图的构建上，主要分四个部分——
　　（1）H5广告展示平台
　　表面上看，H5广告展示平台就是一个行业优质H5的聚集地，展示作品为平台用户制作的H5。
　　这些广告的效果、来源都是公开的，包括作者、关注、点击量、点赞数等信息，隐藏3个目的——
　　a. 社交：用户可以关注特定的设计师并与他们发起对话，为特定的作品点赞，实际是为了打通社交联系，加强用户粘性。
　　b. 资源池：公开设计师用户的主页信息，有利于买手与设计师进行交流，培养H5制作行业的专业作者资源。
　　c. 权威性：首页选择的作品，大多数是比较知名的品牌，以及体现工具差异化的H5，实际上是为了加强品牌与工具的权威性。
　　（2）H5可视化编辑工具
　　提供H5的在线可视化制作与发布，包括全景组件、画布、物理引擎、画图、付费点等高级组件。
　　从界面上看，工具分为菜单栏、工具栏、属性栏、工作台、资源区5个部分，隐含工具用户、开发逻辑、操作逻辑三个方面。
　　a. 菜单栏：包括PSD导入、模板、在线课堂、LOGO等按钮，看起来简单，却涵盖工具面向的不同群体。专业设计师需要依靠PSD分层进行设计，初学者需要依赖于模板和在线课堂，商业用户重视的是自定义LOGO的加载。
　　b. 工具栏：提供的组件大部分是比较基础的多媒体对象，诸如画布、输入框、变量、文本、全景容器等，几乎没有像表单、图表等组合程度较高的套件，说明工具提供的是底层元素的交互，开发初衷是要确保设计的灵活性与拓展性。
　　c. 工作台：支持拖拽上传、拖拽改变属性等动作，属于可视化编辑的方向之一，图形化的可操作界面。
　　d.属性栏&资源区：以参数的设定为主，属于可视化编辑的方向之二，文字化的属性配置。
　　（3）工具教学与培训中心
　　提供针对平台工具的H5制作教学，包括线上的QQ群咨询、直播间、教学视频、教学手册，以及线下的课程培训。
　　本质上，采用的是线上免费教学、线下付费指导的模式。
　　Photoshop等软件刚兴起的时候，没有这么多教程，也没有太多案例，大多数人也需要自己摸索进行学习。但等待用户群体自发地成熟，过程是十分缓慢的。
　　因此iH5采取的措施就是先做赔本生意，组织大量人力去设计案例、开发教程，提高工具实用性的形象；随着业务的扩张、用户的增长，再推出专业化的培训课程，维持免费培训的成本，体系成熟后还能成为盈利的重要来源。
　　（4）数据监控中心
　　提供H5投放后的访问情况与传播路径追踪，这些数据目前只有基础的访问增长、数据库后台数据开放给用户，路径追踪、事件监测等高级功能应该是面向商业用户的。自建数据监控中心有两大益处：
　　a. 精准量化广告效果：让用户可以了解广告的投放与传播质量、不同渠道的投放与传播效果。
　　b. 大数据报告：通过长期的数据收集、统计与处理，有利于输出专业的行业数据报告。
　　四、用户分析
　　根据网站展示的作品类型，可以看出产品主要用户是企业、媒体、广告公司的营销人员，也有一定数量的独立设计师。
　　用户需求与痛点
　　想要做几个H5来推广，应该怎么做？
　　想要做出720°全景、物理碰撞这些复杂效果，可是不会代码！
　　想要独立制作H5广告，可以去哪学？
　　想要为公司做几个H5广告，可以找谁？
　　想要接一些H5的设计单，可是编程太耗时间了！
　　用户反馈
　　根据公开的用户群、百度贴吧等地方的用户评论收集，也可以看出无论是企业还是个人，用户都是希望在提高制作效率的同时，保证制作质量。
　　从根本上，用户需求是要简单、快速地做出专业水平高的H5。
　　五、功能分析
　　iH5遵循＂图形化+事件+配置＂的工作流程，用事件控制不同对象/元素的交互，相比其他工具在实际操作上对多媒体的控制比较灵活多样。
　　（1）基础多媒体组件
　　一般的H5页面制作工具都具备的组件，比如中文字体、图片、音频、视频、地图等。
　　（2）高级多媒体组件
　　包括720度全景、物理引擎、时间轴、付费点等特色组件，属于HTML5网页支持的复杂功能，可能涉及外部js的应用。
　　（3）数据应用组件
　　与数据库相关的功能组件，主要涉及对字段、输入框与变量的控制，属于HTML5网页表单相关的控件，拓展性较强。
　　（4）容器组件
　　用于多媒体对象的中高层级控制，包括设备、屏幕、面板等组件，属于HTML5网页支持的顶层功能。
　　（5）其他功能
　　主要是一些外部js的应用，包括微信红包、微信设定内容、语音识别等。
　　六、盈利模式分析
　　免费平台
　　指工具使用、内容发布不收取费用，面向设计师和开发者。设计师可以完全用工具可视化的功能进行创作，不需要学网页编程；开发者可以利用工具提供的开放接口、开放组件，进行二次开发，省时省力。
　　功能完全免费，根据企业CEO孟智平的说法，是因为他希望能让更多人体验到专业的H5制作服务、开展更广泛的创作，而不是让好的功能沦为商业的傀儡。
　　但从产品的长远发展来看，这样的确也能留住更多做优质内容的创作者，而非生产商业广告的执行者。
　　付费平台
　　指工具去广告服务与用于培训的线下课程。
　　因为iH5发布的网页在移动端都会出现3秒左右的品牌标识加载页，页面域名后缀也为ih5.cn。对于商业用户而言，他们想要完全去除第三方工具的品牌特征，就需要购买一定的增值服务。这一块也是iH5盈利的主要来源，作为功能免费的取舍。
　　线下课程班，目前在国内开展的城市不多，主要还停留在北上广这些大城市，课程定位在于让用户在短期内掌握工具的使用。这种模式比较传统，实际上吸引到的更多是企业用户，通过培训的方式为公司人员储备知识技能，可以节省外包的成本。
　　另外有一种比较少人知道的是多屏交互演示系统的技术解决方案，本质上也是通过工具授权获利。
　　七、结语
　　总的来说，iH5面向的是企业和专业用户。企业就是公司市场部、媒体公司和4A广告公司这些，专业用户主要指设计师、开发者，主要特点有3个：
　　（1）工具的开发把引擎尽量做得轻量级，完全搭建在云端；
　　（2）制作流程倾向于对多媒体元素进行底层控制，图形化界面+配置的模式，接近程序可视化的思维，能留给创作者较大的设计余地；
　　（3）拥有一套完整的行业解决方案，包括培训、制作、广告展示、数据监控等方面。
　　需要注意的是，国内外其实都出过很多H5页面制作工具，但适用于商用的大多是国外的大牌软件，比如Adobe Animate、Google Webdesigner、Tumult Hype等；国内平台很多做的是组合套件，这样带给创作者发挥的空间很少。
　　目前，绝大部分工具生产的H5广告制作成本都控制在5万之内，而开发类的H5广告可能开发成本本身都超过5万。H5的工具化生产应该是未来网络广告制造业提高制作效率的一大出路。