交互数字内容设计 H5设计表现力 2.H5的设计表现力.ppt

1.视觉氛围（传递情感） H5是一连串的内容载体，需要对所有页面进行视觉氛围的统一。 统一调性上注意两点：统一的背景 Nice-90后生活方式报告 1.视觉氛围（传递情感） 统一调性上注意两点：成套的色彩和元素 “致另一个无用的我”H5截图和项目元素汇总 2.形式感（打动用户的重要方法） 注重情感，洞察内心 案例1 一步一步看清韩寒 形式推理过程：代言人-人物传记-书本-书写-文字-打字机-H5页面 2.形式感（打动用户的重要方法） 注重情感，洞察内心 案例2 天天传奇-母亲节录音机 形式推理过程：母亲节-回忆-记录-录音-录音机-H5页面 2.形式感（打动用户的重要方法） 习惯用推理的方式来获得有效的形式，我们可以将生活中任何一件具体事情抽象为创作对象：一个动作、一类事情、一种游戏、一个杯子、一个小的道具都可以被挖掘和延展。 好的形式，实际上就是旧元素的新组合。 3.参与感（H5设计的爆点） 指用户可以通过H5定制带有自身特征的内容并能够参与到内容的创作与传播，往往这类H5内容比较容易受欢迎，并极为容易创造出夸张的刷屏级效果，但创作难度比较大。 案例3 腾讯新闻H5：垃圾分类大作战 测试题类 H5的画面表现 画面表现直接牵连到原型图的构思和规划，它是具体执行的第一步，也是上手H5设计的开始 传递情感 打动用户的重要发方法 H5设计的爆点 视觉气氛 形式感 参与感 1.视觉氛围（传递情感） 良好的视觉气氛可以更好地引导用户理解设计表现意图。根据H5的目的、内容需要营造合适的视觉氛围。 促销类 画面喜庆 内容活泼 KFC里约奥运促销 淘宝双12万能账单 2015沃尔玛新年促销 1.视觉氛围（传递情感） 良好的视觉气氛可以更好地引导用户理解设计表现意图。根据H5的目的、内容需要营造合适的视觉氛围。 锤子科技新手机推广 2016微信公开课 移动工坊“一秒钟”新闻 科技类 画面深沉 内容严肃 1.视觉氛围（传递情感） 良好的视觉气氛可以更好地引导用户理解设计表现意图。根据H5的目的、内容需要营造合适的视觉氛围。 2015腾讯UP大会邀请函 2016腾讯UP大会邀请函 华住：一份来自未来的邀请函 邀请类 画面切合 主题 内容凸显 神秘、重 点 1.视觉氛围（传递情感） 良好的视觉气氛可以更好地引导用户理解设计表现意图。根据H5的目的、内容需要营造合适的视觉氛围。 豆瓣-我的精神角落 品牌类 画面凸显 品牌气质 内容紧密 联系形象 1.视觉氛围（传递情感） 良好的视觉气氛可以更好地引导用户理解设计表现意图。根据H5的目的、内容需要营造合适的视觉氛围。 豆瓣-我的精神角落 品牌类 画面凸显 品牌气质 内容紧密 联系形象