MAKA的网站主页
制作前要建立Photoshop尺寸文件， 画布设置宽为 640px、高为1008px， 如图所示， 这是为了后期方便将设计文件导入到H5工具， 这是目前H5工具普遍采用的页面尺寸 。 下面开始详细讲解 。
设计的细则讲解
（1）图片设计
图片是此次设计的关键， 因文字内容整体较简单， 所以文字只起点缀作用， 这就凸显出图的重要性 。 从品牌提供的图片中选择合适的图片分别安插在了8个页面当中， 但很快就出现了一个难题 。
因为在页面中整版图最为美观， 所以计划用8张整图配8段文字来设计画面 。 但在产品展示部分， 品牌方并没有可以包含所有产品的整图， 只有单个产品的展示图片 。
如果直接将不同产品图拼凑在一个页面， 就会很不美观， 但如果将产品图分散到其他页面， 又会使得H5的页数太多 。
Photoshop尺寸建立页面
为解决问题， 我们使用了一个轮播图的互动插件， 通过该插件可以做到在一个页面展示多张图， 还能保证图版的整屏效果， 而这个互动插件就是H5工具的一个功能组件 。 为了使页面更为美观， 我们还找到了一张宣纸的背景作为背景图， 这样会比白底要有更多的细节展现 。 设计过程如图所示 。
一个页面展示多张产品图的设计过程
（2）文字与标题设计
H5大标题采用方正大标宋体， 页面正文主要采用方正仿宋简体， 如图所示 。
H5设计选用的字体
在前面， 我们已明确告诉大家尽量不要使用识别性较差的宋体字， 但此项目例外， 因为H5正文文字量少， 文字排版可以非常稀松 。 在这种情况下， 宋体字的使用不会影响阅读时的识别 。 为了更好凸显文化气息， 文字排版方式是以竖版为主的， 这样更像是古体字的书写方式， 能够凸显文化气息， 所以用宋体字就更合适了 。 标题与正文的字体的排版对比效果
标题与正文的字体
大家也应该注意， H5的第2页正文描述部分还是采用了黑体字， 这是因为文字量太大了， 所以在具体设计时做了取舍 。 不管你用什么字体， 设计目的都是一致的， 就是让H5清晰地呈现内容 。 正文字体采用黑体和宋体的效果
黑字体正文
（识别度更好）
文章插图
宋体字正文
（识别度不如黑体字）
（3）地图设计
在设计地图时， 项目采用了手绘地图的形式， 但实际大可不必这样， 因为现在的H5生成器内置了定位地图， 在点击这样的地图后可以直接调取手机中安装的地图 APP， 呈现位置信息 。 但因为书中的H5模拟案例是要长期使用的案例， 所以还是选用了手绘地图来表现 。 地图在配色上沿用金色作为主色， 与画面风格保持一致，
从卫星地图转化为更加直观的手绘地图
（4）页面版式
为了让页面有更好的视觉效果， 版式设计中运用了3阶排版法， 尤其是产品部分的页面， 在画面中， 图片、文字描述和脚标构成3层关系， 这样页面的视觉效果就比较美观了
3阶排版法， 加上第三级脚标后， 视觉效果更丰富
在第2屏的品牌介绍部分， 为了让文字更清晰， 弱化了背景图， 为文字专门添加了金色底图来强化文字的识别性， 这样的做法和第8屏形成了反差， 在第8屏是弱化文字， 凸显图片，
第2屏- 文字为主， 图片为辅
第8屏- 文字为辅， 图片为主
不管是文字， 还是图片， 一定要有一个为主、一个为辅， 这是做页面设计时的一个重要意识， 时刻以主要内容为导向 。
（5）页面的节奏感
在设计第1屏时， 起初设计了好几个样式， 如图所示， 最后选择了最简单、最不起眼的一组（第3组）， 原因就是考虑到整支H5的节奏 。
第1屏的3个备选方案
这样， 让第1屏内容简单到只有一个问句， 能够让观看节奏有一个从低到高的过渡， 让内容的呈现有一个从简单到复杂的趋势 。 关于节奏的概念， 在之前的章节已有具体介绍了， 读者可查看之前内容 。
（6）H5工具制作
打开MAKA， 在界面中单击“Ps”按钮， 会提示上传PSD文件， 如图所示， 需要观看和了解这里的上传说明 。
MAKA后台的PSD文件上传教程
上传后， 需要为H5各屏元素添加动效 。 清雅风格的H5同样不适合添加太过炫酷的动效， 所以这里主要添加的动态就是“淡入”和“向上飞入” 。
因为图片多为场景， 所以图片不适合添加动效 。 动效的应用主要放在了文字上， 每一屏的文字都可以添加动态效果 。 具体的操作如下：
推荐阅读
- 这类分享2个小技巧 小程序不支持虚拟支付怎么办？
- 3类鞋子正悄悄危害胎宝宝的正常发育
- 声乐艺考100首曲目 流行音乐分类
- 【养生常识】胆结石不能吃什么东西，5类食物要忌口
- 理性的女生喜欢什么类型的男生
- 什么是依恋？依恋有不同类型吗？
- 【养生知识】三类人吃生姜，小心活不长！
- LED灯珠（LED光源 LED黄光的波长是多少分类详解）
- 小儿正常视力发育进程表
- 麋鹿是鹿类动物中较温顺的一种 谁知道关于麋鹿的知识