文档库

最新最全的文档下载
当前位置:文档库 > 如何制作出有逼格的H5页面

如何制作出有逼格的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倍行距。

二、图片

①图片来源

免版权:http://www.wendangku.net/doc/b6500dd26c175f0e7dd137a5.html;http://www.wendangku.net/doc/b6500dd26c175f0e7dd137a5.html

创意设计:http://www.wendangku.net/doc/b6500dd26c175f0e7dd137a5.html;站酷

GIF图:http://www.wendangku.net/doc/b6500dd26c175f0e7dd137a5.html;http://www.wendangku.net/doc/b6500dd26c175f0e7dd137a5.html

图片素材:全景网;昵图;花瓣

图标:http://www.wendangku.net/doc/b6500dd26c175f0e7dd137a5.html;iconpng,http://www.wendangku.net/doc/b6500dd26c175f0e7dd137a5.html

②背景颜色及含义

红色:热情、喜庆丨紫色:神秘、浪漫、女性、情感

黄色:高贵、富有丨蓝色:智慧、清爽、科普、商务

橙色:欢快、销售、购物丨绿色:生机、安全、环保

不花哨是阅读的第一体验。

三、排版

①简单集中

最好的效果是简单集中,最好有一个核心元素,中心元素不宜过多,突出重点为最优。

②文字排版形式及应用

齐行型:最稳妥保险,纯纯的阅读方便,没有其他企图。

居左型:方便断句,突出某信息,适合用于短诗歌,介绍类信息。

居右型:凸显个性,杂志类。

居中型:高端、正式、贵气,适用地产、珠宝、手表等奢侈行业。

自由型:八卦杂志,那些角版的插图非常需要这些。

四、新手需知:

①应用三级动画

H5制作软件动画分为3级,进入、强调、退出。

随便插入一张图片,然后设定进入效果,强调效果和退出效果,熟悉每个动画表达出的感官效果,并设定相互延迟时间。

②利用互动插件

添加一键拨号,网站链接,点赞和投票等配件,增加场景互动性。

②推荐浏览器

使用百(GU)度(ge)浏览器,兼容H5制作及操作。

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

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

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