篇一：PS教程 H5手绘专题运营设计
PS教程——手绘与实景打造H5运营专题
【写在前面——什么叫H5专题】：
简单说来，H5专题是现在在移动端（手机、Pad）上面的一种推广形式。可能是游戏形式，也可能是一种翻页的故事形式，平时大家也可以在微信朋友圈里看到很多这种H5专题的推广。这种形式比较活泼生动、比较利于传播及推广产品。
【内容概要】：
今天给大家介绍一个生活服务类的H5专题——从前期整个思路推导，到整个专题的搭建过程。主要知识点有三个方面： 1. H5页面构成 2. 素材的再加工 3. 气氛营造。 4.PS+AI实际操作
【需求原型】：
不可否认，在所有项目的最开始，设计师需要解决的问题就是理解项目与需求。下面这张图就是产品经理给到UE设计师的活动策划，大家可以看到这个活动策划是纯文字的。
【最终效果】：
设计师需要根据这些文字构建起画面——可以通过手绘的形式，也可以通过口头
描述的形式。再把它反馈给我们的产品经理，综合交流、沟通，最终产品经理和
UE设计师达到意见的一致。我们来看最终效果：
【思维分析】：
简单分析一下该H5专题：
1.H5的交互形式其实非常简单，从下往上翻页。它的目的是给用户带来一个故事性的小专题。
2.使用的设计语言主要是手绘风格。在手绘风格的同时结合了一些实景，整体的风格偏怀旧，是一个情感化的气质。
3.理想和现实的落差感对比。可以看到，过去的画面是非常斑斓的，整个形式比较梦幻。而现在整体的色调和风格是非常暗淡的，正好体现了我们现实生活的平淡、无奈的感觉。通过这种配色以及视觉元素上的对比，给用户带来一个更好的落差感。
由此延伸一下，一个运营设计师平时在做项目时候的思路与重点，主要归结为以下三点：营造出专题氛围、突出主题和卖点、美化视觉。
再回归到此次的H5专题设计：
1.根据与产品经理的沟通及主题的理解，推导出这次主基调的关键词为——温馨、走心；视觉落差、梦想与现实的对比、虚幻色彩等；
2.根据主基调与关键词，推导情感化的表达形式为——手绘；推导落差感的表达形式为——色彩的对比、虚实的结合；
3.产品与品牌植入为：hao123及生活服务类的卖点；
【视觉规划与设计输出】： 进入了视觉规划阶段：
要解决的几个问题：场景的设计、素材选择、色彩选择、页面布局与素材处理 1.场景设计
我们这次的专题策划，主要是强调了理想场景和现实场景的对比落差，这个是我们专题的重点，结合我们H5这种移动端的操作习惯，那么使用这种上下翻页营造出前后对比，可能是比较好的处理方式。它能更好的把梦境和现实两个场景比较饱满的这种用视觉来做出对比感，所以我们最后在场景设计上选用这种全屏的、上下翻页的这种形式。
2.主题素材选择
主题素材也是构成我们整体视觉风格非常重要的一环，根据之前的设想，我们这次的视觉风格还是需要营造一个对比落差的感觉，所以在素材的挑选上也要遵循这种对比落差的感觉，来贯穿于我们整个的视觉风格。
因此，在理想状态，我们选用了这种口红、高跟鞋、爆米花等；现实状态选用了类似公交卡、闹钟、搓衣板等和生活息息相关、非常平庸的物品来营造我们平淡的现实生活。一方面，通过这种对比形成一系列的落差，给用户一些理想和现实对比的暗示。另一方面，也是暗含小心机，如之前说过的也需要在素材的选用上结合产品与品牌（此处为hao123）的特色、卖点，其实爆米花替代了hao123服务的特价电影票，漂亮的高跟鞋和口红正好针对一些女性的O2O上门服务，还有公交卡正好映射代驾、租车等服务，搓衣板正好映射上门洗衣的O2O服务。如此一来，给用户软性呈现的同时，达到推广产品的效果。
篇二：10个H5页面制作工具,功能全面评测
10个H5页面制作工具，功能全面评测
目前市面上各种H5页面制作工具，其中既有滥竽充数的，也有真材实料的。但是怎么区分呢？其实最简单的办法就是看案例，也就是用这些H5页面制作工具能做出哪些类型的H5。
笔者在创作H5的路上走过很多坑，基本国内外所有的H5页面制作工具都用了一遍，这篇文章也是希望能让大家在H5页面制作工具的选择上少走点弯路。
以下是笔者浏览了近万个优质案例后，总结出来的各大H5页面制作工具对H5种类的支持分析，以及付费情况。
1. 易企秀
/
百度指数：★★★★★
易企秀界面
作为百度指数最热的易企秀其实很容易定义，就是移动版PPT的H5页面制作工具，用来在手机上做简单动态演示。所以它各方面的组件，比如文本、按钮、图表、动效这些都和微软的PowerPoint非常相像，用于问卷类型的表单采集，但不能自主设计。总的来说，使用难度比较低，主要面向对H5没有太高要求的用户。
支持的——
素材：图片、视频、音乐、文本、中文字体、幻灯片
动画：平移、缩放、淡隐等动效（跟PPT类似）
交互：点击（可以触发元素显示/隐藏）、滑动翻页、摇一摇
H5：微信邀请函、个人电子贺卡、手机相册等微场景
典型案例——
易企秀的H5页面
付费情况——
免费版：提供基础编辑，有在线教程和人工客服
增值版：能去除广告尾页、底标和加载LOGO、外链添加、数据统计等高级功能，有专属客服
2. iH5
百度指数：★★★★
iH5界面
iH5定位于取代HTML5网页编程的可视化工具，是H5页面制作工具里比较标新立异的产品，因为功能很完善，笔者用的时间比较长。客观来说iH5完全取代编程目前还达不到，不过确实几乎所有能想到的H5类型iH5都能实现，而且好像用的知名企业和官方媒体很多。学习难度算中等，笔者是文科专业出身，大概三四天看教程学习能做个H5小游戏吧。
支持的——
素材：图片、视频、音乐、文本、中文字体、图片序列、幻灯片、GIF、富文本、嵌入网页、全景图、PSD、画板（就是带涂鸦功能的东东）、文件（PDF、Word） 动画：轨迹动画（简单来说就是复杂动画），动效（跟PPT动效类似），物理运动，滑动时间轴动画（这个比较难懂，就是可以通过手指滑动控制的动画） 交互：点击、手指按下/离开、滑动、鼠标移上/移下（PC案例会用到）、滚轮滚动、键盘按键、摇一摇、重力感应、擦一擦、图片上传与合成、视频交互、微信红包发放、自定义转发标题/描述/缩略图、微信昵称/头像获取、数据库增删查改、外部数据调用
H5：H5动画、互动广告、小游戏（支持重力感应和物理引擎）、全景、交互视频、照片合成、电商支付、微信红包、评论弹幕、电子杂志、微信邀请函等
典型案例——
iH5的H5页面
付费情况——
免费版：功能没有限制，有在线教程和人工客服
增值版：针对企业用户，能修改加载LOGO和广告底标，有专门的数据服务，有一对一技术支持和线下培训，支持外部数据通信，开发者外调JS函数
篇三：iH5基础教程：HTML5编辑器介绍
iH5基础教程：HTML5编辑器介绍
一、 公司介绍
iH5是国际领先的HTML5制作工具和服务平台，你可以使用iH5轻松制作具有丰富动态效果的HTML5网页应用，可视化操作界面，无需编程基础。
二、 网站结构
1、 ih5.cn注册登录页面
填写信息注册账号或点击右上角进入登录页面。
2、 ih5首页
（1） 作品推荐
点击封面可查看作品，点击左上角可收藏此作品，点击右上角可获得作品二维码与作品链接，点击关注可关注作品的作者。
查看作品时，点击右上角可全屏观看，还可以关注作者或联系作者。关注的设计师会出现在首页目录系统消息之下。
点击精品模板，可以按分类查看模板，点击下载按钮可下载模板，下载后将保存到您的个人主页下面，下载付费模板需充值V币，模板下载后不能另存为或再次发布成为模板。
（2） 学习使用
点击首页右下角学习使用按钮，可进入教学页面。按基础篇、初级篇、中级篇、高级篇查看教学视频，也可以功能/应用详解。
（3） 新建案例
点击右下角新建案例或点击首页左上角帐户名进入个人页面，
可以创建新的案例，
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有