篇一：H5页面排版以及动效
H5页面排版以及动效
随着H5的火热，越来越多的社交平台。开始应用到H5页面，一些平台的设计又有什么样
的风格，各种不一的H5页面充斥着我们的朋友圈，你又知道有那一些常见的H5设计吗？
Part 1 排版篇
生长在移动端的H5广告相较于其他广告，充分地暴露了屏幕小、层级深、较难在保持内容统一性的前提下包含众多且交互复杂东西等缺点，也因此可能会影响用户在阅览H5时对有效信息的获取能力。所以，利用设计在最短的时间内引导用户接收到有效信息变得更加重要。
那么，怎样才能更有效地引导用户接受到那些有效信息呢? 通过排版!
版面是基础，先确定版面的布局框架，再考虑配色，字体…
优秀的版面设计，不仅在视觉上能起到正确引导用户的作用，同时也能明确信息主次，使有效信息达到最优的传播。
版面在H5设计中的作用：
1、不同图文信息的有序展示，在视觉上起到一定引导作用，通过版面大小和前后复叠关系明确展示信息的主次，视觉表达更加合理。
2、交互性是移动端H5设计中必须考虑的因素，好的版面分割可以增强引导性、增加点击感，在视觉上辅助交互。
我们常见的版面类型包括：直线型版面、斜线型版面、三角型版面、圆型版面。
1、直线型版面
由直线进行切分，面积大小会根据内容相对调整。
此版面类型操作起来最为简单，画面中规中矩，易给人严肃而具有理性的感觉。反过来说，直线版面也容易显得呆板生硬，不够活泼。
不过可以通过不同的设计风格进行弥补，根据内容的不同，清晰地进行分割。居中的板式和文案，表现出品牌的正式、专业、高端，适合高端消费领域的品牌。
直线型版面是最常见的板式，简单的直线分割容易打造沉稳而具有品质感的页面基调。同时在视觉上对不同内容起到明确的区分，从而正确引导用户进行相应的交互。
2、斜线型版面
类型比直线更活泼，视觉上更具冲击力，整体版面更加动感，并有一定的引导性。斜线版面配合适当的动效能够在第一时间给用户带来画面冲击，倾斜的角度越呆冲击感越强，适合在活动、促销、推荐等场景下使用。
斜线容易给人以平面延续的感觉，可以在页面切换时打造连续的画面，增强页面的引导性，适合用于长页面和多页面同级并列的H5场景。
3、三角型版面
三角形是一个具有稳定性的图形，在页面上容易给用户带来视觉引导。稳定的三角形，同时也是尖锐的形状，比较容易传达快速、时尚、暴力刺激等感受。
三角型版面示意图
在视觉上，三角形给人以指向性。在多屏滑动页面时，可用于交互上的页面引导。 从零到精通：你不知道的H5排版以及动效......
4、圆型版面
圆形在手机屏幕上的表现天然具有视线聚焦的吸引力，适合主标题、主图和其他关键信息的展示。圆形在视觉表现上更加光滑饱满，给人亲近感，适合手绘风格、卡通风格的页面设计。
圆型版面示意图
利用圆形巧妙灵动的将画面内容进行分割，相比较直线版面更加流畅，视觉上更具亲和力，不生硬。
设计总结
1、优秀的版面设计，不仅在视觉上能起到正确引导用户的作用，同时也能明确信息主次;
2、不同的版面会有不同的视觉效果，给予设计效果不同的设计感觉。
Part 2 动效篇
如今的消费者几乎手机不离身，手机移动端H5对公司宣传的影响愈加明显，可移动端相对于PC端与纸媒等其他渠道而言，具有以下几点特性：
为了大大降低这些特征对H5内容阅读吸引力的影响，针对不同的问题，我们可以在H5内容中添加相对应的动效，以达到优化的作用：
问题一：屏幕小，信息含量多
解决思路：对重点宣传信息加以突出让关键信息在最短的时间内被获取
问题二：页面多，要保持统一性
解决思路：通过固定的动效交互，在体验上保证整个内容展示的完整性
问题三：层级深，用户易流失
解决思路：有趣的动效加上适当的交互，提高用户参与度、趣味性、更有效地留住用户以下从几个方面谈谈动效的制作和应用：
1、动效的作用
总结而言，动效对H5页面的作用主要体现在两个方面，分别为功能性以及趣味性。
(1)功能性：
引导用户进行点击、翻页等动作
吸引用户并让其做长时间的视觉停留;
(2)趣味性：
通过一些充满趣味的特效，让用户的体验变得真正愉快以及难忘。
2、动效的类型
在H5内容展示中常见的动效有：移位、旋转、翻转、缩放、逐桢、淡入淡出、粒子效果、3D等，而我们能大致地将这些动效分为基础特效、招牌特效以及高难度特效三种类别。其中，基础动效分为指向性动效和空间展示动效，具体表现在：
指向性动效——H5元素的出现、滑动、弹出等
空间展示动效——页面的切换、翻动和放大。
基础动效最重要的目的是要让用户感到毫无负担，顺应自然规律，此类动效无需做到夺
人眼球，而是要让动效舒服流畅。
以上仅仅是一些制作经验和思路分享，不过具体的情况还得具体分析，排版与动效的表现形式错综复杂，只有找到合适自己创作风格的才能打动读者。
篇二：移动端H5页面的设计稿尺寸大小规范
移动端H5页面的设计稿尺寸大小规范 当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。如果是app设计师，就不会那么纠结啦，开始学习制作
H5页面的小伙伴可以参考参考哦！
那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。 请注意：（以下所有讨论内容和规范均将viewport设定为
content=”width=device-width”的情况下）也就是我们的H5页面前端代码里面必须包含
<meta
content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-
width” name=”viewport” />
<meta content=”telephone=no” name=”format-detection” />
根据目前市场流行的手机移动终端，统计他们的设备独立像素，也只有iPhone6+采用了分辨率降频处理。
具体看下图：
有兴趣的小伙伴可以去尝试不同的尺寸，比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。既满足了显示需求，又能降低用户加载图片需要的带宽。
可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。
第一：背景图片必须采用background-size:cover;来实现。
第二：我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。
通过对比可得：
除去将浏览器全屏显示的情况，几乎所有情况均会有顶部的状态栏和导航栏。
iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。
由于Android系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px（这些尺寸网上均可查）。
那么就会把网页内容往下挤，进入盲区（根据不同的布局方式可能挤出视口，即可视区域之下，）。取这两个系统者的最大值为148（48+100）,如下图5，设计稿要尽量保证单页下面没有重要内容。
图5
那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640x960px（iPhone4分辨率）之上，所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812（960-148=812）。
在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）设计稿尺寸为640×1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。
移动端H5页面的设计稿尺寸大小规范内容如下：
1、像素是没有宽高的（不要被Photoshop中的像素格欺骗），它只代表一个采样的色值。
2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何意义，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有ppi的意义，被打印出来才可以描述这张图片有多高多宽。
3、平时制作H5页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个尺寸一是为了浏览方便（现在很多手机的屏宽达到1440px，用这个尺寸去模拟显然不现实），
二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽应该向下兼容。
4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时，按照现在流行的做法，可以直接使用原型稿上的尺寸，也就是设计稿上的1/2。
5、一般情况下，设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上（网上有些文章说安全线是960px处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。
篇三：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 共享时代 共享你我他 版权所有