篇一：用案例浅谈微信传播的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大特性，宏观和微观都照顾周全。
篇二：9个最好用的H5页面制作工具
9个最好用的H5页面制作工具
随着移动互联网时代的到来，市场营销人的工作也越来越复杂化，尤其是设计营销页制作的时候，必须要跟设计人员和技术人员打交道，十分头疼。
伴随着一些H5页面制作工具的诞生，这个问题得到了解决。市场营销人员只要对图片和文字稍加处理，就可以达到自己满意的效果。
那么，有哪些工具是特别好用的呢？
1. Page页面制作工具-----------来自M1云端市场部
这款工具是梅花网新推出的，针对集客营销的H5页面制作工具。这款工具拥有丰富的模板和插件，能够在较短的时间内做出美观又简洁的H5页面。
另外，这款工具搭配了表单以及客户管理系统等功能，能够快速的完成一次完整的营销活动，更为重要的是，这样一款工具竟然是免费的，不得不说是业内良心。
2. 易企秀
该应用有多种动态模板，并实现多种动态效果，并且，易企秀拥有IOS移动客户端，可以
在手机上进行H5的页面制作工作。
3. MAKA
Maka也是一款优秀的H5页面制作工具，模板丰富多样，
在交互效果方面非常人性化，
该工具有免费版，不过免费版不提供外链等功能。
4. Wix
Wix 基于HTML5技术的建站工具，向用户提供多种网页模板，操作非常简便，智能拖拽便可完成简单的网页建设。据Wix统计每天有超过45000的新用户加入 Wix，每个类目下有上百的HTML5模板可供使用，支持页面自适应，在手机端也有很好的展示。
5. Google Web Designer
Google Web Designer是谷歌是专门为设计者打造的的可视化HTML5
设计开发工具。
它提供了所见即所得的设计环境，包含设计视图和代码视图，还能制作Banner广告动画，功能丰富且强大。
6. Weebly
Weebly是一款HTML5拖放式智能建设工具，支持中文，拥有多种个优秀的网页模板，在交互设计商业为人称道，并且设有IOS和Android客户端，方便管理自己的网页、随时随地进行跟踪。
7. Ceilfire
Ceilfire是一个HTML5游戏设计平台。用户可以直接在浏览器中创建游戏、参与游戏、分享游戏，无需编程知识和相关技术细节。想做简单的HTML5游戏可以用这种方式试试手。
8. Jimdo
Jimdo 是一款德国的在线网页自助建站平台，在全球12个国家拥有超过1000万用户。用户可在不懂任何网页制作方面知识的情况下轻松制作出漂亮的网页。同时除固定模板外，Jimdo允许用户使用自定义代码和widget外部插件接入。
9. 兔展
篇三：H5页面设计规范
H5网页设计规范
1、非可循环平铺图片的背景图，须按最大屏幕尺寸来设计，即：1920*720；
2、集团、新闻类网站中间内容宽度使用1003PX；展示、购物类网站中间内容部分宽度使用1200PX；
3、必须删除非显示图层和参考线；
4、命名和分组必须规范，建议使用一下命名规则（如有更合适或者更熟悉的命名规则请提前与技术沟通）中英文均可；
页头：header 内容：content/container 页面主体：main页尾：footer 导航：nav 侧栏：sidebar
栏目：column整体布局：wrapper左右中：缩写为L R C 水平/垂直： H/V菜单：submenu 摘要: summary按钮：btn/button 滚动：scroll 鼠标悬停：hover 点击：click已浏览：visited。 广告横幅：AD/ banner
5、建议将每个独立控件设计有明显的边界，如果不能给出明显边界，请在设计稿中标出与邻近控件的距离；
6、段落文字必须给出行高，必须使用10号以上字体，建议使用1.5倍行高和14号字体。
7、需要后台添加的文字（标题、内容等）必须使用常用字体，即宋体和微软雅黑；
H5手机页面设计规范
1、PSD按照宽度640PX，高度不限来设计；
2、可点击部件不可小于88PX，（如果不够提交设计稿的时候特别说明）。
3、所有部件的尺寸大小必须是双数。
4、每个按钮需要有四个状态：默认、按下、选中、不可选。至少需要考虑：默认和不可选两个状态。
5、除广告图片外，其他图形部件尽量用图形工具绘制。
6、可点击部件尽量和屏幕四边保持20-30PX的距离。
7、设计的时候尽量以一个使用者的角度去设计，判断哪个页面需要状态栏，哪个页面只需要一个返回按钮。
8、iPhone输入法自带搜索按钮，没有必要再在页面上进行显示。
9、尽可能的对页面部件大小边距等元素进行大小的标注
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有