新媒体运营新 课件：H5的页面设计 模块3.H5页面设计.ppt

* * * * * * * * * * * * * * * * * * * * * * 新媒体运营A 王小红/ 项目四 H5制作与营销 任务1 H5的营销价值 任务2 提升H5的传播力 任务3 H5策划与运营 模块3 H5的页面设计 H5与平面设计的版式到底哪里不同？ 1.画幅尺寸差异 内容信息不能过多 排版不能过于复杂 元素要精简 字体要更大 2.阅读方式 不管是网页还是常规纸质媒介的设计实物，我们的阅读习惯基本上都会遵循从左及右的方式。因为手机屏幕尺寸的特性，H5的画面常规阅读习惯却是从上及下的，并且内容带有动态性，会对视觉的牵引产生作 用，这直接影响到了常规排版思路。所以，阅读方式的改变和动态元素的加入是它与平面设计的第二个不同点。 2.内容接收习惯不同，不适合深度阅读 要如何应对H5版面设计？ 1.分清“PPT”页面与H5页面的差异 2.具备画面焦点意识 3.页面视觉的平衡 主要信息 次要信息 辅助信息 4.重新认识文字，改变你的排版习惯 人的感官需要一种秩序，而在页面的版式上我们则需要设计出明确的主线，用条理感和明确的主次来引导用户的阅读次序。对于凌乱的内容，我们通常可以采用数字、编号、图形、时间轴、相近元素或者色彩等方法来辅助完成内容的划分，把内容安排在多个分屏，利用一种层级关系来穿插统一，而不是积压在一个屏幕，尽量精简内容并将文字转化为图形，来帮助你划分层级，尽力降低受众的阅读难度。 ①把拥挤的内容分成多屏，并且用数字、元素、角标或者画面风格来进行梳理和统一。 ②内容设计成长图文 ③当页面内容过多时，我们还可以通过动作让内容逐个呈现 ④控制字号 即使文字多，但字号在移动端千万不能太小，小屏幕配小字视觉上 会特别累， （20-26） ⑤文字图形化 ⑥标题设计 5.页面配图小技巧 ①什么样的图片适合移动网页 图片的呈现尺寸要与真实世界的物体大小类似 图片要尽可能多地显现出肉眼能够捕捉到的细节 Xxxxxxxxx xxxxxxxxxxxxx ②更好的理解图片与版式的关系 版式与内容统一 谢谢 * * * * * * * * * * * * * * * * * * * * * * * *