篇一：用案例浅谈微信传播的H5页面设计
用案例浅谈微信传播的H5页面设计
从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。
功能与目标
首先从功能与设计目标来看， H5专题页主要有以下4大类型：
1.活动运营型
为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。
大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出“大众点评选座看电影”，一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错，这个页面有点diao噢”的心情点击了分享。
2.品牌宣传型
不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
伴随着浪漫的钢琴旋律，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用H5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。
3.产品介绍型
聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。 这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
篇二：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函数
《手机h5页面设计教程》
由：免费论文网互联网用户整理提供,链接地址：
http://m.csmayi.cn/show/165082.html
转载请保留,谢谢!
- 上一篇：元宵节的来历和风俗
- 下一篇：六一儿童节字体设计