H5页面编辑的操作技巧

H5页面的视觉效果是很重要的，一个良好的页面布局可以为更多人带来更好的视觉体验。我们所提供的不仅仅是一个页面，还要融入很多产品元素进去，所以一个H5页面的版面也就是相当的重要。

一、模版文字

“文字”即模版内所有文字样式元素。设计师可以使用编辑器内自带的字体格式进行文字排版设计。

1、设计标准

（1）内容区分：文字排版区分内容，标题、副标题、正文、注释需分开不同的图层设计；

（2）可编辑性：除艺术性通用标题/主题内容以外，所有文字必须能够被编辑；

（3）最长字符：注意文本框的设定，保留最长字符的区域；

（4）图层设计：可替换文字素材应置于顶层，便于用户修改替换。

2、建议思路

（1）使用1~3种字体，根据文本层级属性（大标题、小标题、正文）适当调整文本字体、大小、行间距进行信息区分展示，而非盲目采取图片格式艺术字体，导致用户无法更替文案内容；

（2）根据模版的主题/行业/场景/主要素材，选择符合主流审美模版文本字体。

二、模版图片

“图片”即模版内所有JPG, PNG, GIF等常用图片格式的可替换图片素材。用户可自行根据自身需求上传相应图片进行替换。

1、设计及选择标准

（1）形状：可替换图片请勿用PS制作特殊图形（例如抠图、心形、花瓣、菱形等等），用户无法使用编辑器将图片改成特殊形状；

（2）版权：图片请选用通用且无版权纠纷等图片；

（3）剪裁：若需将图片剪裁成圆形，使用圆角工具将方形图片裁剪成圆形即可。若是从psd直接上传的圆形图片，则需将圆角属性设置为100%；

（4）图层处理：鉴于目前MAKA手机APP移动图层比较困难，可替换图片上尽量保证没有任何蒙层/元素/装饰，保证用户可以直接点选图片进行替换修改。

2、建议思路

（1）根据模版的主题/行业/场景/主要素材，选择符合主流审美的模版搭配图片；

（2）根据模版页面内容搭配对应场景图片，提高图片丰富度，避免全篇可替换图片单一展示。

三、模版背景图

“背景图”即为保证模版样式风格统一的通用背景底图。

1、设计标准

（1）背景图选择：模版背景图与主题、场景、素材相搭配；

（2）图层处理：背景图应置于底层，避免遮挡其他可编辑元素；

（3）图片请选用通用且无版权纠纷等图片；

（4）与文字、素材颜色有明显对比，不影响其他内容浏览。

2、建议思路

（1）根据模版的主题/行业/场景/主要素材，选择符合主流审美模版背景图；

（2）如选择了照片或其他颜色较为复杂的背景图，可在背景图上添加半透明矩形，以降低背景图透明度，方便浏览其他内容；

（3）适当选用动态背景图，让模版效果更上一层楼。

H5页面是的编辑是很简单的，但是要做好却不是一件容易的事，大家之所以喜欢去看这种页面，所以会有更加良好的体验效果。