篇一：HTML5微信页面设计
我保证你一分钟就能看完这篇文章! 真的..
角色解释：
需求方：有钱大爷
设计人员：美工殿下
前端工程师：前端文艺青年
一个HTML5页面从提出到完成上线的流程：
1、需求方、设计人员、H5实现人员三方共同讨论实现方案
2、设计人员出设计图
3、H5人员按设计图出H5页面
4、需求方评估已实现的H5页面后给予反馈
5、设计人员与H5人员根据反馈进行适当调整
6、发布推广
如何提出一个合理的微信HTML5页面设计诉求？
合理分析诉求与公司团队拥有的资源：
1、需求完成时间；
时间给的越多，项目做的就越扎实，优化的也更好，就像造一座桥，三个星期完工，保质10年，1年完工，保质100年
2、现有技术能力；
根据人员的能力选用合适的技术，以及设计对应能实现的视觉特效
3、工作人员配备；
有些狂拽酷炫屌炸天的特效需要专业的游戏或影视人员参与制作
4、领导B格
不解释
5、公司B格
不解释
好吧以上都是枯燥的叙述，后面会有可爱的喵星人出现，所以往下看吧。
三方需要达成的共识与常识
一、手机屏宽度高度不一
由于手机屏大小不一，所以H5页面所承载的设计图相应的宽高也会不一样，是否需要设计多套不同的设计图以适应不同的手机屏？
最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸，但这样需要大量的人力与时间，而且维护成本太高，不符合大部分团队的实际情况。
典型的手机屏尺寸如：
导航栏+iphone状态栏高度： 64px
iphone4
屏幕总宽度: 320px
屏幕总高度: 480px
微信网页可视高度: 416px
iphone5
屏幕总宽度: 320px
屏幕总高度: 568px
微信网页可视高度: 504px
iphone6
屏幕总宽度: 375px
屏幕总高度: 667px
微信内网页可视高度: 603px
iphone6 plus
屏幕总宽度: 414px
屏幕总高度: 736px
微信网页可视高度: 672px
samsung galaxy note3 （三丧手机开发者的黑洞。。）
导航栏+Android状态栏高度： 73px
屏幕总宽度: 360px
屏幕总高度: 640px
微信网页可视高度: 567px
仅iphone就4个尺寸了，更别说Android阵营的手机了
特别注意：以上不是手机的分辨率单位，而是普通电脑上浏览网页时的像素，这和客户端Native制作有很大的区别。
比如iphone4,宽度就是320px像素，高度为480px，如果以实际分辨率来设计即640*960来排列设计，实际在H5页面显示时会显得很小。
一般我们都是以用自适应的解决方案，以一套或两套效果图适应大部分的屏目，放弃极端屏或对其优雅降级，牺牲一些效果
正因为只有一套或两套效果图，团队、公司拥有的手机型号又是有限的，那么其它型号的手机显示效果就需要大家脑补了，
需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。
二、两种效果图排列，以及对应的解决方案
1、效果图水平居中排列设计（较容易实现自适应）
由于是水平居中，则两边可以用纯色平铺，不管屏有多宽，都可以以纯色填充，这就是最最容易的自适应了。
篇二：用案例浅谈微信传播的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大特性，宏观和微观都照顾周全。
篇三：微信小程序和H5,你可能不知道这5件事
微信小程序和H5，你可能不知道这5件事
昨晚睡得早，没能第一时间见证微信小程序的新闻：微信开放一系列基于微信的开发组件，方便用户在HTML5网页内构建与微信打通的轻应用。大清早起来，朋友圈被史无前例地刷屏，论调有二：
这回，大家总算不会以为H5只是用来做营销的小广告。无论你信不信，Web程序员的春天就是要来了。以下从5个角度说明这件事的前因后果——
1、小程序抢占的就是应用服务市场。
网传微信内部人员透露：
“微信推出小程序，并非想要做应用分发市场，而是给一些优质服务提供一个开放的平台。”
这种说法没错，但有擦边球的嫌疑。小程序本来就不是传统意义上的APP，它采用微信开放的接口和框架开发，严重依赖于微信，只能在微信里用，不像我们平时用的APP，下载完就和应用市场没什么关系了。
所以它抢占的是应用服务市场，和淘宝卖东西一个道理：平台给你玩，卖啥你说了算，反正都是在我这卖的。
2、小程序赋予H5原生应用的能力。
这次微信开放的接口和框架，有经验的开发者看了知道大多没什么新意：
文本、表单、操作反馈、导航、媒体组件、地图、画布、网络通信、位置、重力感应、动画、绘图等等，你看现在市面上那些真正搞开发的，有几个做不了？甚至有iH5.cn这种做基础交互的H5制作工具，已经把这些功能全给可视化了，还有更复杂的物理引擎、数据库、屏幕等组件，代码都不用学。
真正有价值的是微信开放自己客户端的接口，让那些单打独斗的H5网页，可以使用原生APP的网络通信和数据缓存能力。
换句话说，小程序打通了客户端和H5的连接。开发者做的基本还是H5网页，但有一个强大的应用后台支撑离线数据——让H5具备原生应用能力。
3、该高兴的是整个Web生态产业。
现在开发一个APP要推广，很多人会用H5做品牌宣传。先搞一个类似《穿越故宫来看你》、《吴亦凡入伍》的页面，再去微信、微博、今日头条等各个地方推，能产生病毒效应就再好不过了。
不过有个难处，过程太曲折。比如网易前阵子刷爆朋友圈的H5《请用你的洪荒之力画一个小人》，好不容易让人家看到最后一个页面，还得下载客户端。微信这一拳漂亮，直接普及了H5的真正用途，它既能是起点，又能是终点。
如果做小程序这样的Web APP，有三大优势：
（1）通过微信的入口，提高使用率；
（2）利用网页的轻便，提高打开率；
（3）制作时间的缩短，节约开发成本。
所以对原生应用开发者而言，小程序让人头疼。但对于整个Web生态，以至于整个HTML5生态而言，这个举措来之不易。
4、小程序真没什么新鲜的。
开放APP的原生能力，让其他开发者跟着做开发，谁都可以做，但不是谁投钱做都有用。
15年年底起，国外就一直在议论“Progressive Web APP”这个概念，也是想用Web APP模仿原生应用。它指的是借助Chrome、Opera等浏览器的壳，给予HTML5网页离线存储等原生应用能力。
而微信真正推广应用号的概念，是今年2月的事。它相比Chrome等浏览器的有三大优势：
（1）用户十分强大；
（2）社交应用的用户黏性很强；
（3）有公众号当基础，节省教育成本。
小程序的概念不新鲜，新鲜的是微信要抢这块市场了。
5、别只抱希望于JavaScript程序员。
从小程序的名字你就知道，这东西就是给程序员用的。所以新闻一出，很多人说快去学HTML5、JavaScript这些Web编程语言吧！
但你不能忽视没有编程基础的内容生产者，依旧是人最多的那波儿。如果有提供基础交互的H5页面制作平台，整合出从网页制作到编译的一体化服务，估计一场Web内容生产的集体狂欢也不远了。
能预见的是，小程序的加入会带动Web内容的专业化和多元化，让H5真正用起来。
《微信h5页面制作平台》
由：免费论文网互联网用户整理提供,链接地址：
http://m.csmayi.cn/show/165960.html
转载请保留,谢谢!
- 上一篇：小学英语节活动方案
- 下一篇：超市水果节活动方案
