国庆节h5页面.docx

上传人:PIYPING 文档编号:11733972 上传时间:2021-09-01 格式:DOCX 页数:9 大小:18.74KB
返回 下载 相关 举报
国庆节h5页面.docx_第1页
第1页 / 共9页
国庆节h5页面.docx_第2页
第2页 / 共9页
国庆节h5页面.docx_第3页
第3页 / 共9页
国庆节h5页面.docx_第4页
第4页 / 共9页
国庆节h5页面.docx_第5页
第5页 / 共9页
亲,该文档总共9页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

《国庆节h5页面.docx》由会员分享,可在线阅读,更多相关《国庆节h5页面.docx(9页珍藏版)》请在三一文库上搜索。

1、国庆节h5页面篇一:H5页面案例 篇二:浅谈H5页面以及动效 浅谈H5页面排版以及动效 随着H5的诞生和发展,H5页面带动了更多社交平台的出现和成长,那么这些平台的设计又有什么样的风格呢,你又知道有那一些常见的H5设计吗?下面我来介绍一下H5页面设计的几种设计风格。 Part 1 排版篇 与其他广告相比,生长在移动端的H5广告,具有屏幕小、层级深、较难在保持内容统一性的前提下包含众多且交互复杂东西等缺点,也因此可能会影响用户在阅览H5时对有效信息的获取能力。所以,利用设计在最短的时间内引导用户接收到有效信息成了一件非常重要的事情。 那么,怎样才能更有效地引导用户接受到那些有效信息呢? 通过排版

2、! 版面是基础,先确定版面的布局框架,再考虑配色,字体优秀的版面设计,不仅在视觉上能起到正确引导用户的作用,同时也能明确信息主次,使有效信息达到最优的传播。版面在H5设计中的作用: 1、 不同图文信息的有序展示,在视觉上起到一定引导作 用,通过版面大小和前后复叠关系明确展示信息的主次,视觉表达更加合理。 2、交互性是移动端H5设计中不可忽视的因素,好的版面分割可以增强引导性、增加点击感,在视觉上辅助交互。 我们常见的版面类型包括:圆型版面、三角型版面、直线型版面、斜线型版面。 1、圆型版面 圆形在手机屏幕上的表现天然具有视线聚焦的吸引力,适合主标题、主图和其他关键信息的展示。圆形在视觉表现上更

3、加光滑饱满,给人亲近感,通常用于手绘风格、卡通风格的设计 圆型版面示意图 利用圆形巧妙灵动的将画面内容进行分割,相比较直线版面更加流畅,视觉上更具亲和力,圆润而不生硬。 2、三角型版面三角形是一个具有稳定性的图形,在页面上容易给用户带来视觉引导。稳定的三角形,同时也是尖锐的形状,比较容易传达快速、时尚、暴力刺激等感受。 三角型版面示意图 在视觉上,三角形给人以指向性和方向感。在多屏滑动页面时,可用于交互上的页面引导。 从零到精通:你不知道的H5排版以及动效. 3、直线型版面 由直线进行切分,面积大小会根据内容相对调整。此版面类型操作起来最为简单,画面中规中矩,易给人严肃而具有理性的感觉。反过来

4、说,直线版面也容易显得呆板生硬,不够活泼。 不过可以通过不同的设计风格进行弥补,根据内容的不同,清晰地进行分割。居中的板式和文案,表现出品牌的正式、专业、高端,适合高端消费领域的品牌。 直线型版面是最常见的板式,简单的直线分割可以带给读者一种沉稳和品质感,同时在视觉内容上会有泾渭分明的区分,从而正确引导用户进行相应的交互。 4、斜线型版面 斜线类型比直线更活泼,视觉上更具冲击力,整体版面更加动感,并有一定的引导性。斜线版面配合适当的动效能够在第一时间给用户带来画面冲击,倾斜的角度越大冲击感越强,适合在活动、促销、推荐等情况下使用。 斜线容易给人以平面延续的感觉,可以在页面切换时打造连续的画面,

5、增强页面的引导性,适合用于长页面和多页面同级并列的H5场景。 设计总结 1、优秀的版面设计,不仅在视觉上能起到正确引导用户的作用,同时也能明确信息主次; 2、不同的版面会有不同的视觉效果,给予设计效果不同的设计感觉。 Part 2 动效篇 如今的消费者几乎手机不离身,手机移动端H5对公司宣传的影响愈加明显,可移动端相对于PC端与纸媒等其他渠道而言,具有以下几点特性: 为了大大降低这些特征对H5内容阅读吸引力的影响,针对篇三:H5页面设计小知识 H5设计小知识 一. 简介 H5运营类页面设计,是指用来承载运营活动、品牌活动或信息传递的移动端页面设计;具有展示空间小、时间碎且短、操作可互动的特点;

6、直接目的是引起用户病毒式分享,从而提升活跃度和品牌形象。常见类型如下: 展示型:多用于图文展示,通常采用上下滑动或者左右滑动来进行多页切换,每页集中一个内容点,搭配动效出现; 游戏型:以简单操作的小游戏为主,交互性和趣味性更强,经常伴有挑战记录或者测试结果,让用户乐于分享; 产品型:通常会有2级页面存在,提供内容让用户对运营活动有更进一步的了解,同时,常会有表单出现,与用户进行互动; 进行H5设计的时候,需根据主题和内容,选择适合自己产品的H5类型,来最大化地促进传播和分享。 二. 用户为何分享 为了最大化传播效果,需要了解一下用户分享的动机有哪些?一般有以下4类: 三. 更好地吸引用户 除了

7、依靠分享动机来让用户进行传播,在设计层面,可以通过场景趣味化、动效、参与感、讲故事的方式,来更好地吸引用户读下去,进一步产生分享的冲动。 1. 趣味化: 在素材有限或场景不好直接构建的情况下,通过画面的卡通、夸张,让用户耳目一新,产生有趣的感受,更愿意进行分享; 2. 动起来: 通过动效来让用户每一次操作都充满未知、惊喜,从而吸引用户阅读到最后,大大提高常规性运营内容的阅读乐趣。 3. 参与进来: 让用户参与进来,让用户的互动成为页面最终结果的一部分,从而产生荣耀感、专属感,用户也更愿意去分享自己的成绩单。 四. 实用Tips 1. 字体 默认中文字体 Heiti SC ,中文名称叫黑体-简,一般用华文黑体来代替,两者差异微小;默认英文字体 Helvetica Neue LT ; 字号选择不要小于18号,其他字号双数,同种类别下用同一样字号。 2. 动效类型 通过动效来让用户每一次操作都充满未知、惊喜,从而吸引用户阅读到最后,大大提高常规性运营内容的阅读乐趣。 3. 图片和音效大小 PNG图片压缩请使用;音效大小一般控制在100k以内 4. 适配 一般情况下用640X1136进行设计;其他安卓机器前端切图时可以适当拉伸,变化不会太大就不用每个进行适配。 国庆节h5页面

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 科普知识


经营许可证编号:宁ICP备18001539号-1