《全媒体内容制作与运营》教案 2-4 H5页面设计的4个要求 .docx

细节要与整体相统一，注重配色，讲好故事、引发情感共鸣，合理运用技术、打造流畅的互动体验，是H5页面设计的4个要求。

细节要与整体相统一

要成就高品质的用户体验，必须考虑到细节与整体的统一性。如果视觉是复古的风格，那字体就不能过于现代；如果风格是幽默调侃的，那文案措辞就不能过于严肃；走温情路线的，动效就不能过于花哨。

例如，电影《九步之遥》H5专题页便牢牢抓住了细节要与整体统一。从二维码入口内页，再到最后分享提示的设计，包括文案措辞和背景音效，无不与整体的戏虐风保持一致，给用户一个完整统一的互动体验，如图2-1所示。

图2-1（删除手机显示信息图片不够清晰）

注重配色

颜色将特定信息传达给用户的一个重要因素。人眼在观察颜色，视觉消息被传送到大脑，信号的释放会导致用户情绪和情感波动，进而影响用户的行为结果。虽然用户的个人喜好和文化背景决定着不同颜色对他自己的寓意。但是在基础的大环境中，人们对颜色的理解还是有一个较统一的认知，如图2-2所示。

图2-3（图片不够清晰）

①三角色彩

三角色是一个基本的，并且稳定平衡的方法。原理是使用了色彩的活力和互补特性。使用这个12项色环，如图2-4所示，你可以选择任何三种颜色，这三种颜色的位置关系是彼此是120度的距离。

图2-4（图片不够清晰）

例如，圣诞活动H5主题页，以图2-5为例，圣诞活动主题页颜色较为丰富，但整体以三角颜色为基础进行配色。红色，黄色、绿色组成页面的主体颜色，保持一种颜色的平衡感，同时符合圣诞主题。

图2-5（换一个春节的例子，不要圣诞节，图片不够清晰））

②互补色或冷暖色

互补色方法的概念是运用两色或者四种颜色，即一组或者两组对比色（色环上两个180度的补色也可是冷暖的对比色），如图2-6所示。它能有效的强调运营者想表现的信息。同时因为是对比关系，在心理上起到平衡作用。

图2-6

例如，招募榜H5主题页，图2-7所示，内容和画面的设计相对简单。采用冷暖对比的表象形式。在一篇深蓝的画面中凸显红色文字。使视觉不由自主集中于一点。

图2-7（删除手机显示信息）

③近似色

近似色方法仅侧重于同类色，如图2-8所示，能较好的强调画面基调与产品属性。当决定采用这种配色时候，要注意颜色前后及面积上的搭配。近似色强调选择颜色的活力，当这些色彩被完美组合的时候，会在画面上产生一种立体感。

图2-8

例如，双十二预售推广H5专题页，如图2-9所示。因为同类近似色，画面整体基调温暖、愉快。同时主体与背景的颜色差异，迅速吸引用户眼球。

图2-9（删除手机显示信息图片不够清晰）

讲好故事，引发情感共鸣

不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。

例如，人民网采用图文结合的形式，把熟悉温馨的点滴画面融入到了H5，让儿女不禁想到父亲伴随自己的成长历程，引发情感共鸣，如图2-10所示。

图2-10（图片不够清晰）

合理运用技术，打造流畅的互动体验

随着技术的发展，如今的H5拥有众多出彩的特性，让运营者能轻松实现绘图、擦除、摇一摇、重力感应、3D视图等互动效果。相较于塞入各种不同种类的动效导致页面混乱臃肿，更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。