H5交互融媒体作品创作第4章H5作品的页面设计课件

1、第四章 H5作品的页面设计第四章 H5作品的页面设计第一节 表现型字体与功能型字体第一节 表现型字体与功能型字体表现型文字？功能型文字？表现型文字？功能型文字？H5交互融媒体作品创作PPT第4章-H5作品的页面设计1、方正字迹-龙吟体2、方正侠客体3、方正工业黑4、方正有猫在5、方正精气神体6、方正摩登体1、方正字迹-龙吟体2、方正侠客体3、方正工业黑4、方正有猫第二节 如何选择合适的字体？第二节 如何选择合适的字体？1. 将要表达的信息配上“适当”的感觉1. 将要表达的信息配上“适当”的感觉H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页

2、面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计2. 多倾听读者的心声现在我们已经为我们的设计配了完美字体，但仍然有个问题，并非所有人对同一种字体都有一样的感觉。可能有一群人觉得这款字体很新潮，另一群就觉得它过时，选择了适合的字体后，我们也要确定它适合我们的观众。因为人们看字体的方式受到文化连结的影响，而文化又和年龄及地区有相当大的关系。所以要对我们的目标群众有敏感度，如果对选择的字体有所迟疑，不妨多问问H5的目标用户，分析目标受众的特性，不仅能够帮我们选择更合适的字体，还能

3、让你的文字排版效果更好。2. 多倾听读者的心声现在我们已经为我们的设计配了完美字体，3. 混排时中英文字体的匹配很多时候我们做H5时会遇到中西文混排的情况，汉字与拉丁字母的形体结构是有差异的，汉字为方块字，而拉丁文有上升线和下伸线。如果想要在中西文混排时两种字体视觉大小近似，首先要选择风格接近的两种字体，再根据选择，通过调整拉丁字体大小来看设计效果。3. 混排时中英文字体的匹配很多时候我们做H5时会遇到中西文3. 混排时中英文字体的匹配3. 混排时中英文字体的匹配3. 混排时中英文字体的匹配3. 混排时中英文字体的匹配第三节 文字与正文第三节 文字与正文让字型的尺寸搭配设计的内容A.字重B.字

4、号让字型的尺寸搭配设计的内容A.字重B.字号H5交互融媒体作品创作PPT第4章-H5作品的页面设计设计中的逻辑正文字体：方正兰亭黑设计中的逻辑正文字体：方正兰亭黑H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计默认字号17px可以试试14px17px14px默认字号17px可以试试14px17px14pxH5交互融媒体作品创作PPT第4章-H5作品的页面设计第四节 表现型与功

5、能型字体推荐第四节 表现型与功能型字体推荐H5交互融媒体作品创作PPT第4章-H5作品的页面设计方正苏新诗古印宋方正榜书楷方正苏新诗古印宋方正榜书楷方正字迹-惊鸿体方正字迹-惊鸿体H5交互融媒体作品创作PPT第4章-H5作品的页面设计方正字迹-劲颜体方正润扁宋方正字迹-劲颜体方正润扁宋H5交互融媒体作品创作PPT第4章-H5作品的页面设计方正粗金陵简体方正粗金陵简体南京国子监刻本南齐书南京国子监刻本南齐书方正字迹-龙吟体方正字迹-龙吟体H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计H5交互融媒体作品创作PPT第4章-H5作品的页面设计第五节 通过版面率、图版率合理安排H5页面的层次第五节 通过版面率、图版率H5交互融媒体作品创作PPT第4章-H5作品的页面设计留白是影响版面率的重要因素，一般来说:留白越多，版面率越低，H5页面越显得恬静典雅；留白越少，版面率越高，H5页面越显得活泼热闹。留白 少留白 多留白是影响版面率的重要因素，一般来说:留白 少留白 多图版率 高图版率 低一般来说，当图版率为0时，读者对H5的阅读欲望会很低，会让人觉得这个H5页面非常单调乏味。对于陈述性信息较多的页面，增加图版率，恢复读者的阅读兴趣，增加留白，让整个版面重新充满生机。