H5页面设计规范

H5页面设计规范
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、尽可能的对页面部件大小边距等元素进行大小的标注

移动端H5页面设计实战

移动端H5页面设计实战 目录 为什么要设计H5页面............................................................. 错误!未定义书签。赛程魔方3D旋转界面设计 ...................................................... 错误!未定义书签。双屏互动游戏设计................................................................... 错误!未定义书签。资讯与游戏的结合设计............................................................ 错误!未定义书签。刮刮乐在移动端互动游戏中的微创新 ........................................ 错误!未定义书签。互动调查小游戏的设计创新 ..................................................... 错误!未定义书签。设计小贴士 ............................................................................ 错误!未定义书签。

为什么要设计H5页面 移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心(CNNIC)2014年7月的报告显示,中国网民中,手机使用率达83.4%,已经超过传统PC整体80.9%的使用率。其中,手机网络新闻的使用率为74.2%,仅次于即时通信和搜索,远超其他手机网络应用。在资讯移动化的趋势下,观察近期各大门户在重大事件报道中的表现,会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中,基于HTML5技术的移动Web页面(以下简称H5页面),较完美地融合了上述三种属性,成为当下最受关注的内容报道形态,也引爆了社交平台上的大规模分享行为。 就像CD取代磁带成为一种更高效的音乐播放方式一样,数字文件也将取代CD,依此类推,智能手机也将会替代PC的一部分重要功能。尽管仍有争议,但不可否认的是,移动互联网时代已经到来,随着用户从PC向移动端的迁移,从大屏到小屏,从鼠标键盘到多点触控,移动端逐渐成为媒体报道的前沿阵地。 一提起移动端,大家首先想到的就是手机上安装的移动应用,比如微信、腾讯新闻客户端、QQ浏览器等。我们称这些应用为原生应用(Native App),因为它们是需要安装在用户设备上的软件,它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能,例如使用存储空间实现离线阅读,利用图形加速实现界面动效,以及利用摄像头来上传图片,等等。但跟Web专题相比,移动应用的开发周期长,开发者需要将产品提交到应用商店供用户下载使用。以苹果的iOS应用开发为例,开发者在应用商店要发布应用,需要通过约耗时8天的人工审核。因此,把PC端的Web专题做成一个个移动应用是不现实的。 除了原生应用之外,在移动端还有一种产品形态——移动Web页面。它源自于移动互联网诞生初期的WAP页面,有着和PC网页同样的优点:开发周期短、发布和更新方便。此外,用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问,比原生应用要方便得多。但在2014年前,因用户渠道和设备性能的原因,移动Web页面的形态通常都非常简单,也很少有用户互动。2014年,HTML5技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。 在移动端,要在网页上实现交互和动效需要借助HTML5技术(例如CSS3媒体查询、CSS3动画、Canvas等)。现在的手机浏览器大都支持HTML5的核心技术,例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换,以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等,为市场营销、媒体报道等提供了大量不同形式的载体,同时为产品策划与视觉设计带来了更多的想象空间。

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的距离。

H5页面设计规范

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 North Gate Station and all the long distance Intercity, TRANS-province lines; North Gate Station currently runs the original counties, rural routes; Simon, station main, Yibin city, across the city, across the province and to the West of range line. Yibin city highway main station distribution table 3.1-6 station name grade accounted for to area (m2) Gao

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

H5页面设计与制作教学教案

《H5页面设计与制作》 教学教案 第1讲 课时内容H5初识授课时间90分钟课时2 教学目标 了解H5的定义与发展。 了解H5的特点与应用。 了解H5的类型。 教学重点 了解H5的定义和特点。 教学难点 了解H5的发展、应用和类型。 教学设计1、教学思路:(1)通过基础知识的讲解,了解H5的定义、发展、特点和应用; (2)通过举例说明了解H5的类型。 2、教学手段:(1)通过资料了解H5的定义、发展、特点和应用;(2)通过举例说 明了解H5的类型。 教学内容 讨论问题:1、H5的发展分为哪几个阶段? 2、H5有哪几种类型? 内容大纲:具体可结合本项目的PPT课件进行配合讲解。 1.1 H5的定义 1.2 H5的发展 1.3 H5的特点 1.4 H5的应用 1.5 H5的类型 小结1、了解H5的定义和发展。 2、了解H5的特点与应用。 3、了解H5的类型。

第2讲 课时内容H5的设计与制作授课时间90分钟课时 2 教学目标 了解设计与制作H5的项目流程。 熟悉设计与制作H5的常用软件。 掌握设计与制作H5的基本规范。 掌握设计与制作H5的注意事项。 熟悉设计与制作H5的创意方法。 教学重点 熟练掌握H5设计与制作的项目流程。 了解H5设计与制作的注意事项。 教学难点 熟练掌握H5设计与制作的基本规范。 教学设计1、教学思路:(1)通过基础知识的讲解,了解H5设计与制作的项目流程和H5设计 与制作的常用软件;(2)通过举例说明,熟练掌握H5设计与制作的基本规范、注意事项和创意实现的方法和技巧。 2、教学手段:(1)通过理论讲解掌握H5制作的基本方法;(2)通过深入学习了解 制作过程中需要注意的基本规范和注意事项。 教学内容 讨论问题:1、设计与制作H5的基本规范有哪些? 2、H5常用的测试方法有哪些? 内容大纲:具体可结合本项目的PPT课件进行配合讲解。 2.1 H5设计与制作的项目流程 2.2 H5设计与制作的常用软件 2.3 设计与制作H5的基本规范 2.4 H5的注意事项 2.5 H5的创意实现 2.5.1 H5的常用策划方法 2.5.2 H5的常用交互方法 2.5.3 H5的创意设计风格 2.5.4 H5的动效设计运用 2.5.5 H5的音效设计方法 2.5.6 H5的常用测试方法 2.5.7 H5的常规数据分析

H5页面设计规范

创作编号: GB8878185555334563BT9125XW 创作者:凤呜大王* 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、尽可能的对页面部件大小边距等元素进行大小的标注 创作编号: GB8878185555334563BT9125XW 创作者:凤呜大王*

H5页面设计入门教程:组件工具栏

组件工具栏大致上分基础组件和高级组件。 基础组件 基础组件包括图片、文本、视频、音乐、幻灯、热区、按钮、图形和联系表单。 图片:支持JPG、PNG、GIF、SVG上传,一般也是作品大部分的呈现方式;文本:分为段落和富文本,支持文字基础字体,字号,颜色快速更改,其中段落可实现逐字出现动画; 视频:分为本地和腾讯视频,可自行上传视频或添加视频网址; 音乐:分为背景音乐和音频,一般背景音乐从头播到尾,音频作为某一页的音效使用; 幻灯:分为幻灯片、序列帧、相册,可根据需要添加使用; 热区:为透明组件,它的大小,位置可任意调整,一般作为触发动作或跳转网址;按钮:分为文字按钮和图片按钮,文字按钮可以输入任意文字,图片按钮可替换按钮的素材; 图形:有三角形、圆形、长方形、直线和其他常用图形 联系表单:在我们的高级组件左边,用于解决常用的收集用户数据的问题。 高级组件

高级组件里包含交互组件、逻辑判断、数据应用、微信应用、高级表单、数据应用。 交互组件 交互组件包含地图组件、基础表单、Layer容器、Layer幻灯、联动组件、嵌入网页、拖放目标、拖放目标组、计时器、锚点、碰撞检测、SVG、关联控制、状态组、画板、陀螺仪。 地图组件:地图组件基于腾讯地图,可用于显示指定地理位置、并可以进行导航。基础表单:表单一般用于活动报名、收集反馈信息等。Epub360表单是一个相对独立的功能模块,可以通过工作台进行编辑与设定,完成后通过表单组件插入作品。 Layer容器:用来添加制作好的Layer层,可实现长图滑动效果。 Layer幻灯:用来添加制作好的Layer层,可实现多图幻灯效果。

H5页面设计入门教程:素材大小的优化

通过阅读该须知,可以在制作H5作品前后检查作品是否易于播放。 作品大小建议: 原则上在不加入本地视频的前提下,整个作品5M以内可达到最佳播放效果;查看作品大小可以在作品发布页面进行查看 1.点击左上角发布,如图: 2.进入到下图的作品发布设置页面: 关于图片大小限制: 在保证场景效果的前提下,背景全屏图片,一般不要超过200-400kb,其他图片尺寸尽量小,一般不要超过50kb;同一张图片,PNG格式相比于JPG格式更容易消耗内存,建议能采用jpg格式代替png格式。 图片批量压缩网址:https://www.360docs.net/doc/c89286199.html, 如何在Epub360编辑器中查看图片大小 选中图片——右侧属性设置面板的素材资源——图片缩略图的右侧小眼睛

点击小眼睛后弹出图片大图,右上角的i可以查看图片大小 关于GIF图: 如果GIF图片较大,建议导出成为多张图片,使用序列帧组件。

解决方式: 使用系统预先处理好的图片 在图片组件右面板,可以选择系统预先处理好的几个尺寸,一般只要不是满屏的图片,640可以了。 使用https://www.360docs.net/doc/c89286199.html,进行图片压缩后替换 我们推荐使用https://www.360docs.net/doc/c89286199.html, 进行图片压缩。图片压缩后,可以直接替换原有图片组件中的图片。 那么,如何替换图片、又不影响既有的交互设定呢? ●怎么替换图片 ●如何替换幻灯片里的图片/调整顺序 关于视频大小的限制: 如果使用本地视频组件,视频本身需要酌情压缩,建议不要超过50M; 如果是几秒的视频,并且希望灵活控制,建议使用序列帧组件,序列帧组件相比视频组件占内存小,灵活易于控制;序列帧图片上传前,建议先看下每张图片的大小,以便于压缩; 关于音频大小的限制: 添加到作品中的音频文件大小需要限制,背景音乐可以循环的尽量使用循环的,原则上不要超过500k。 音频压缩 意派Epub360-专业H5设计工具 意派Coolsite360-专业响应式网站/微信小程序设计工具

移动端H5页面设计实战

移动端H5页面设计实战

移动端H5页面设计实战 目录 为什么要设计H5页面 (3) 赛程魔方3D旋转界面设计 (8) 双屏互动游戏设计 (15) 资讯与游戏的结合设计 (21) 刮刮乐在移动端互动游戏中的微创新 (26) 互动调查小游戏的设计创新 (30) 设计小贴士 (37)

为什么要设计H5页面 移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心(CNNIC)2014年7月的报告显示,中国网民中,手机使用率达83.4%,已经超过传统PC整体80.9%的使用率。其中,手机网络新闻的使用率为74.2%,仅次于即时通信和搜索,远超其他手机网络应用。在资讯移动化的趋势下,观察近期各大门户在重大事件报道中的表现,会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中,基于HTML5技术的移动Web页面(以下简称H5页面),较完美地融合了上述三种属性,成为当下最受关注的内容报道形态,也引爆了社交平台上的大规模分享行为。 就像CD取代磁带成为一种更高效的音乐播放 方式一样,数字文件也将取代CD,依此类推,智能手机也将会替代PC的一部分重要功能。尽

管仍有争议,但不可否认的是,移动互联网时代已经到来,随着用户从PC向移动端的迁移,从大屏到小屏,从鼠标键盘到多点触控,移动端逐渐成为媒体报道的前沿阵地。 一提起移动端,大家首先想到的就是手机上安装的移动应用,比如微信、腾讯新闻客户端、QQ 浏览器等。我们称这些应用为原生应用(Native App),因为它们是需要安装在用户设备上的软件,它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能,例如使用存储空间实现离线阅读,利用图形加速实现界面动效,以及利用摄像头来上传图片,等等。但跟Web专题相比,移动应用的开发周期长,开发者需要将产品提交到应用商店供用户下载使用。以苹果的iOS应用开发为例,开发者在应用商店要发布应用,需要通过约耗时8天的人工审核。因此,把PC端的Web专题做成一个个移动应用是不现实的。

移动端H5页面的设计稿尺寸大小规范

移动端H5页面的设计稿尺寸大小规范 当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的。如果是app设计师,就不会那么纠结啦,开始学习制作H5页面的小伙伴可以参考参考哦! 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨 率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。 请注意:(以下所有讨论内容和规范均将viewport设定为 content=”width=device-width”的情况下)也就是我们的H5页面前端代码里面必须包 含

根据目前市场流行的手机移动终端,统计他们的设备独立像素,也只有iPhone6+采用了分辨率降频处理。 具体看下图: 有兴趣的小伙伴可以去尝试不同的尺寸,比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。既满足了显示需求,又能降低用户加载图片需要的带宽。 可以用各种分辨率的移动智能手机查看我们设计的H5页面时,当然,也会出现如下的情况,内容显示不全,甚至一些重要内容和按钮都会被遮挡。 第一:背景图片必须采用background-size:cover;来实现。 第二:我们在进行H5页面内容规划布局设计的时候,不能把重要内容放在太偏下的位置或者偏上,否则前端布局时可能出现内容显示不全的情况。

相关主题
相关文档
最新文档