新媒体运营 课件：H5交互设计 H5交互设计.ppt

* * * * * 5 ①什么样的图片适合移动网页 图片的呈现尺寸要与真实世界的物体大小类似 图片要尽可能多地显现出肉眼能够捕捉到的细节 页面配图小技巧 ②更好的理解图片与版式的关系 版式与内容统一 H5的动效设计 动效优化内容，一方面多维度的信息需要动效串联，利用它的优势来提升内容表现力；另一方面，利用它在时间维度上的变化来让内容更有条理。 1 不要忽视动效的发起与结束 5 动效应该适可而止 别分散用户的注意力 别领跑用户的注意力 3 好的动效都有情感 物理世界的还原 动效/动画与交互方式的结合条理。 4 动效的层级与节奏 0k * * * * * * * * * * * * * * * * * * * * * * * * * 此处添加您的标题 Biscuit oat cake carrot cake muffin jelly 1 此处添加您的标题 Biscuit oat cake carrot cake muffin jelly 2 此处添加您的标题 Biscuit oat cake carrot cake muffin jelly 3 此处添加您的标题 Biscuit oat cake carrot cake muffin jelly 4 ADD YOUR TITLE HERE Click here to modify the text , you may post text here . Click here to modify the text Click H5交互设计 把握好H5设计的表现力大法 1 视觉气氛（传递感觉） 淘宝双12账单 KFC里约奥运促销 星巴克圣诞促销 促销类 促销类 淘宝双12账单 KFC里约奥运促销 星巴克圣诞促销 科技类 2015腾讯UP大会邀请函 腾讯视频V视界大会邀请函 邀请函 2016腾讯UP大会邀请函 统一的背景 成套的色彩和元素 2 形式感（打动用户的重要方法） 3 参与感（H5设计的爆点） H5页面的版式设计要领 H5与平面设计版式区别 1.画幅尺寸差异 内容信息不能过多 排版不能过于复杂 元素要精简 字体要更大 H5与平面设计版式区别 2.阅读方式 阅读方式改变 动态元素加入大 H5与平面设计版式区别 3.内容接收习惯不同 不适合深度阅读大 1 分清ppt页面与H5页面的差异 2 具备画面焦点意识 3 页面视觉的平衡 主要信息 次要信息 辅助信息 4 创造清晰明确的层级关系 人的感官需要一种秩序，而在页面的版式上我们则需要设计出明确的主线，用条理感和明确的主次来引导用户的阅读次序。对于凌乱的内容，我们通常可以采用数字、编号、图形、时间轴、相近元素或者色彩等方法来辅助完成内容的划分，把内容安排在多个分屏，利用一种层级关系来穿插统一，而不是积压在一个屏幕，尽量精简内容并将文字转化为图形，来帮助你划分层级，尽力降低受众的阅读难度。 ①把拥挤的内容分成多屏，并且用数字、元素、角标或者画面风格来进行梳理和统一。 ②内容设计成长图文 ③当页面内容过多时，我们还可以通过动作让内容逐个呈现 此处添加您的标题 Biscuit oat cake carrot cake muffin jelly 1 此处添加您的标题 Biscuit oat cake carrot cake muffin jelly 2 此处添加您的标题 Biscuit oat cake carrot cake muffin jelly 3 此处添加您的标题 Biscuit oat cake carrot cake muffin jelly 4 ADD YOUR TITLE HERE Click here to modify the text , you may post text here . Click here to modify the text Click 0k * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *