交互数字内容设计 H5的文字设计 4.H5的文字设计.pptVIP

3.H5的正文设计技巧-字体装饰 适当加修饰元素，一定不能太抢眼，起辅助作用，不要干扰阅读。 这是一段测试文字。米有错，你随便看看就好。 这是一段测试文字。米有错，你随便看看就好。 剩下这些文字也是测试文字，米有错，全部都是 为了凑字数滴。米有错，你随便看看就好。 3.设计拓展知识 来源B站，良心翻译，共6集，5分钟/集。 平面设计0基础教程 资料来源： 把握好H5设计的表现力；《H5+移动营销设计宝典》P73-85，苏杭，清华大学出版社 数英网：/projects/22650.html 字体设计，/work/ZNjA4OTI0NA==.html 字体设计，/work/ZMjE3NjQ4MzI=.html 饿了么:吃喝玩乐年货节, /caseview.aspx?id=3885 平面设计基础教程，/video/a?p=1 H5实战：庆祝新中国成立70周年 5 作业4.H5实战——“庆祝新中国成立70周年” 主题 题目来源：第14届设计之都（中国?深圳）公益广告大赛——“庆祝新中国成立70周年”主题 题目要求：请对“庆祝新中国成立70周年”主题进行H5策划（3个方案），在3个方案中选择1个制作H5作品。 步骤： 1.请使用思维导图工具将你的创意构思呈现出来，导出图片（包含3个方案）。 2.请分别画出3个方案的原型图（视觉布局、交互动效、所用素材等均需体现）。 3.请在课堂上制作页面视觉和其他相关素材。 4.请在课后完成整支H5的合成，并发布。 5.请将消防安全主题H5的制作全过程做出PPT提交。 6.提交时间第4周周一。 注意： 1.PPT必须包含思维导图、原型图、视觉图、演示网址、二维码。 2.请尽量把“要获奖的野心”做出来。 THE END THANKS H5的文字设计 1 H5的视觉设计技巧 2 H5的图片设计技巧 3 H5的标题设计技巧 4 H5正文设计技巧 CONTENT 5 作业-H5实战：“庆祝新中国成立70周年“主题 H5的视觉设计技巧 1 1.H5的视觉设计技巧 更多地利用图形来展示信息，把文字转化成用户更容易看懂的图形。 韩/式/辣/白/菜 图片 图形 文字 1.H5的视觉设计技巧 页面元素尽量统一，建议使用成套、成组素材。 不统一的图标 风格统一的图标 风格、颜色均统一的图标 H5的图片设计技巧 2 2.H5的图片设计技巧 单个页面中，尽量使用全图（能够完全覆盖手机屏幕的图片） 不 能 二 不知道写啥 不 能 二 2.H5的图片设计技巧 使用特写 2.H5的图片设计技巧 使用视觉角度引导 后退还是向前 后退还是向前 仰望还是向往 仰望还是向往 2.H5的图片设计技巧 图文版式统一 饿了么:吃喝玩乐年货节 H5的标题设计技巧 3 3.H5的标题设计技巧 标题的空间 设计H5的标题时要尽量呈现出方形区域，因为手机尺寸比较 细长，想要标题更大，就要以方形区域作为范围。 标题文案要进行优化。一般来说，主标题和副标题的自述在 8-16个字之间为最佳。 我是 标题 我就是一个 大标题 我就是一个非常非常 醒目耀眼超大标题 标题字数较少 标题字数较多 3.H5的标题设计技巧 标题的层级：1.调整字距 2.主标题和副标题加大对比 3.加装饰元素 一个醒目的 大标题 一个醒目的 大标题 一个醒目的 大标题 一个醒目的 大标题 一个醒目的 大标题 一个醒目的 大标题 一个醒目的 大标题 文字优化+字体紧凑+粗细组合变化+点缀装饰 3.H5的标题设计技巧 标题的层级：1.调整字距 2.主标题和副标题加大对比 3.加装饰元素 文字优化+字体紧凑+粗细组合变化+点缀装饰 大标题 一个醒目的 大 ? 标 ? 题 一个醒目的 大标题 一 个 醒 目 的 3.H5的标题设计技巧 标题与图形 ：为标题加入辅助图形。 降价 50% 降价 50% 半价 AFID ROCK AFID ROCK A ID ROCK 数据调研 数据调研 数据调研 ？ 3.H5的标题设计技巧 标题与背景：为标题增加阴影、底色或投影/调整背景图或弱化背景图 我就是一个 大标题 看清楚 我就是一个 大标题 看不清楚 我就是一个 大标题 我就是一个 大标题 我就是一个 大标题 看不清楚 看清楚 看清楚 H5的正文设计技巧 4 3.H5的正文设计技巧 正文文字太多、字号小，密集 关于我们 ABOUT US 太多字太多字？太多字太多字太，多字太多字太多字太，多字太多字太。多字太多字太多字太多字太多字太多字太多字太多字太多字太