篇一：如何制作出有逼格的H5页面
如何制作出有逼格的H5页面？
目录
一、文字进阶 ............................................................................................... 2
①好看有特效的文字 ............................................................................ 2
②文字配色及取色 ................................................................................ 2
③字体搭配及含义 ................................................................................ 2
④字体下载 ............................................................................................. 3
⑤字体大小及行距 ................................................................................ 3
二、图片 ....................................................................................................... 3
①图片来源 ............................................................................................. 3
②背景颜色及含义 ................................................................................ 3
三、排版 ....................................................................................................... 3
① 简单集中............................................................................................ 3
②文字排版形式及应用 ........................................................................ 4
四、新手需知： ........................................................................................... 4
①应用三级动画 .................................................................................... 4
②利用互动插件 .................................................................................... 4
③推荐浏览器 ........................................................................................ 4
④手机端加载速度慢、卡顿 ............................................................... 4
一、文字进阶
①好看有特效的文字
百度中打开花体字在线生成器
依次选定字体、大小、字色、背景（透明背景）等参数，点击生成。 下载预览图，并且保存png格式到桌面，即可导入H5之中。 ②文字配色及取色
黑底白字，黑底不放蓝色、绿色丨黑底金字丨
红底白字丨黄底黑字丨蓝底白字丨蓝底黄字丨
白底绿字
快速取色方法：打开QQ→截图快捷键Ctrl+Alt+A→将鼠标箭头放在取色位置→出现颜色相对应的RGB（255.255.255）此为白色的RGB值。 ③字体搭配及含义
? 扁平风：张海山锐体
? 文艺风：静蕾钢笔、方正呐喊
? 商务风：造字工房力黑、逼格青春体简、张海山锐线体简 ? 中国风:叶根友行书、汉仪星字体
? 科技风：方正幼线、方正兰亭
? 可爱风：造字工房丁丁体、华康娃娃体
? 杂志风：造字工房俊雅、方正大标宋
? 男性风：方正超粗黑、蒙纳简超刚黑
? 女性风：造字工房悦黑常规体、方正细圆
④字体下载
百度搜索→字体下载→下载位置→系统盘→WINDOWS→Fonts→打开ps/officie等软件就OK
⑤字体大小及行距
建议最小不超过18，其他字号双数，同种类别下用一样字号。 行距建议使用1.5倍行距。
二、 图片
①图片来源
免版权：unsplash.com;pixabay.com
创意设计：dribble.com;站酷
GIF图：giphy.com;giffox.com
图片素材：全景网；昵图；花瓣
图标：esyicon.net;iconpng,iconfont.com
②背景颜色及含义
红色：热情、喜庆丨紫色：神秘、浪漫、女性、情感
黄色：高贵、富有丨蓝色：智慧、清爽、科普、商务
橙色：欢快、销售、购物丨绿色：生机、安全、环保
不花哨是阅读的第一体验。
三、 排版
① 简单集中 最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。
②文字排版形式及应用
齐行型：最稳妥保险，纯纯的阅读方便，没有其他企图。
居左型：方便断句，突出某信息，适合用于短诗歌，介绍类信息。 居右型：凸显个性，杂志类。
居中型：高端、正式、贵气，适用地产、珠宝、手表等奢侈行业。 自由型：八卦杂志，那些角版的插图非常需要这些。
四、 新手需知：
①应用三级动画
H5制作软件动画分为3级，进入、强调、退出。
随便插入一张图片，然后设定进入效果，强调效果和退出效果，熟悉每个动画表达出的感官效果，并设定相互延迟时间。
②利用互动插件
添加一键拨号，网站链接，点赞和投票等配件，增加场景互动性。 ② 推荐浏览器
使用百（GU）度（ge）浏览器，兼容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、尽可能的对页面部件大小边距等元素进行大小的标注
篇三：3-h5页面和app的区别_h5和app的区别
h5页面和app的区别_h5和app的区别
如今，app和h5页面在我们的生活是很常见的，那么，h5页面和app的区别是什么呢？本期乔布简历小编就和小伙伴们聊聊h5和app的区别。
关键词：h5页面和app的区别，h5和app的区别
h5页面和app的不同
1、app和h5页面相比，拥有较少的页面跳转。网络环境一致的情况下，h5页面渲染是需要调取服务器的，但是app的渲染在本地，所以h5页面跳转更费力，不稳定感会强一些。所以h5页面想要减少跳转的话，一般都会使用交互技巧来隐藏文字。
2、h5页面页面展示空间比app小，给使用者带来的记忆负担大于app。人的大脑能短期记忆，但是这样的记忆是不稳定的。如果用户在滚动翻阅屏幕的过程中，需要临时记忆的信息越多，他们的表现是会越差的。现在，只有很少的人会有耐心慢慢看完长长的内容，h5页面相对于app而言，多了浏览器导航所占用的屏幕空间。
3、h5与app相比的优势在于h5页面可以随意的分享，而且迭代是很方便的，不同的系统只要适配一次即可。但是app的每次迭代需要在不同系统基础上迭代。
4、h5页面与app导航设计不同。h5页面使原有底部导航消失，有效的导航遇到挑战。在设计要考虑导航设计，顶部底部或左右侧，还要考虑如何快速跳转回重要页面，导航快捷键：如顶部固定位置、悬浮圆圈或非首屏时页面右侧悬浮。而app的导航更直接方便。
总之，h5页面其实基本能完成app的所有效果，但是它局限于浏览器这种打开方式，而app可以直接打开使用，方便一些。
h5页面和app的区别_h5和app的区别
http://cv.qiaobutang.com/knowledge/articles/568e25c50cf2bae6d1e0116a
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有