如何制作出有逼格的H5页面？

目录

一、文字进阶... 1

①好看有特效的文字... 1

②文字配色及取色... 1

③字体搭配及含义... 2

④字体下载... 2

⑤字体大小及行距... 2

二、图片... 2

①图片来源... 2

②背景颜色及含义... 3

三、排版... 3

① 简单集中... 3

②文字排版形式及应用... 3

四、新手需知：... 3

①应用三级动画... 3

②利用互动插件... 4

③推荐浏览器... 4

④手机端加载速度慢、卡顿... 4

一、文字进阶

①好看有特效的文字

百度中打开花体字在线生成器

依次选定字体、大小、字色、背景（透明背景）等参数，点击生成。

下载预览图，并且保存png格式到桌面，即可导入H5之中。

②文字配色及取色

黑底白字，黑底不放蓝色、绿色丨黑底金字丨

红底白字丨黄底黑字丨蓝底白字丨蓝底黄字丨

白底绿字

快速取色方法：打开QQ→截图快捷键Ctrl+Alt+A→将鼠标箭头放在取色位置→出现颜色相对应的RGB（255.255.255）此为白色的RGB值。

③字体搭配及含义

J  扁平风：张海山锐体 

J  文艺风：静蕾钢笔、方正呐喊

J  商务风：造字工房力黑、逼格青春体简、张海山锐线体简

J  中国风:叶根友行书、汉仪星字体

J  科技风：方正幼线、方正兰亭

J  可爱风：造字工房丁丁体、华康娃娃体

J  杂志风：造字工房俊雅、方正大标宋

J  男性风：方正超粗黑、蒙纳简超刚黑

J  女性风：造字工房悦黑常规体、方正细圆

④字体下载

百度搜索→字体下载→下载位置→系统盘→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制作及操作。

④手机端加载速度慢、卡顿

上传图片和音乐控制大小，不宜过大，参照以下尺寸大小。