基于用户体验的H5页面设计原则与策略研究

2019-02-12张霞

艺术与设计·理论 2019年8期

张霞

（南宁师范大学计算机与信息工程学院，南宁 530023）

随着移动技术的发展、网络速度的加快、移动设备的普及，H5逐渐成为广告设计、新闻报道、品牌宣传的“新宠”，其丰富的媒体融合形式、多样的人机交互手段和快捷的传播途径，给人以独特的视听和情感体验。那么，如何设计H5页面才能更好地吸引观众？设计H5页面需要遵循哪些原则？哪些设计策略可以提升H5页面的感染力，使其获得更为丰富的用户体验呢？基于以上问题，本文针对部分经典、热门且点击率高的H5作品进行分析和研究，从提升用户体验的角度，归纳总结了H5页面的设计流程、设计原则和设计策略。

一、H5页面的设计流程

为使H5页面的开发更加系统化、规范化和结构化，设计H5页面需遵循一定的设计流程和步骤，本研究在综合参考其他优秀H5作品设计流程的基础上，提出H5页面的设计流程为“确定目标→设计方案→原型设计→文案创作→整合开发”。

确定目标：设计H5页面之前必须了解用户的需求，明确H5的使用目的和用途，是用于广告设计、新闻报道还是品牌宣传，是为了描述某种现象，传达某种理念，还是为了抒发某种情感，解决某种问题；然后细化目标，提炼核心观点。

设计方案：根据H5页面的达成目标和核心观点构思H5的呈现方案，通过头脑风暴提出各种创意，并构建H5页面的层级架构。在此过程中需确定H5页面的叙事手段、表达形式、呈现节奏和采用的技术工具等，预估方案的实施可行性及可能出现的问题、解决方法等。

原型设计：根据设计方案，从视觉、动效、声效、节奏、交互等方面制作H5页面的原型图，初步呈现H5页面完成后的初始效果，让客户及时了解方案是否满足自身的目标需求，并判断各项设计的可实施性，以便及时调整设计方案。

文案创作：确定原型图效果之后，需根据H5的核心观点和表达形式，精简文字内容，并采用有趣、符合视觉氛围和叙事节奏的语言风格进行文案创作。

整合开发：根据设计要求，收集图片、文字、视频、音频、动画等相关素材，并采用H5各类开发工具进行整合和开发。

二、基于用户体验的H5页面设计原则

通过对大量热门H5作品的对比研究可知，能获得良好用户体验的H5作品往往在视听体验、情感体验和互动体验等方面均有良好设计，主要遵循三项设计原则：可视化原则、一致性原则、切身性原则。

可视化原则：H5页面设计的可视化原则是指通过生动有趣的图片、图形、视频、动画等直观形态元素，更好地将枯燥乏味的文字信息、数据信息等表达出来。进行信息可视化处理，不仅有助于观众理解复杂信息，还能加快观众对信息的接收效率。在信息泛滥的轻悦读时代，如果观众无法在短暂的碎片化时间内收到H5传达的核心思想和信息，就无法保证观众能在H5作品中获得良好的用户体验。

一致性原则：一致性原则贯穿在H5页面设计的全过程，例如，在视觉设计上，H5所有页面版式、文字字体、图片图形的颜色、风格、色调等要基本统一和协调；在表现形式上，H5所有页面的文案表述方法、动效设置风格需一致；在气氛感染上，其声效设置与H5作品的文字基调、画面风格和叙事节奏等要保持一致等。

切身性原则：为了击中观众内心深处的“动情点”，必须从人们熟悉的生活和热点事件中寻找“突破点”进行内容设计。能激发用户良好情感体验的往往不是那些脱离实际、“高端大气上档次”却与自己无关的内容，而是那些源于生活、终于生活的“闪光点”。因此，在内容设计上，必须选择与生活息息相关的内容，如果能让观众将H5页面传达的思想情感与自身先前经验相联系，就能激发观众与H5作品之间的情感共鸣，使其获得更好的用户体验。

三、基于用户体验的H5页面设计策略

除了遵循三项设计原则，在设计H5作品的角色、交互手段、节奏等方面时，还需要合理采用三项设计策略，才能更好地优化H5作品的视听体验、情感体验和互动体验等用户体验。

（一）借助“创意思维”打造个性化“角色”

在信息可视化设计中，为了获得更加生动有趣且令人“意想不到”的效果，在将文字内容转化成图时，可借助联想、拟人、夸张、借代等创意思维进行个性化设计。

联想是指“由于某人或某种事物而想起其他相关的人或事物”，可分为写实联想、类比联想和跳跃联想三种。在联想过程中可围绕内容特征由表及里地发散思维，直接依照字面意思进行写实联想，有助于形成对内容的表征形象；理解字面意思本质后进行图形代换的类比联想，有助于加深对事物本质的理解；而感性创意的想象则是跳跃联想带给我们的“惊喜”。借助联想的可视化设计，是设计者对内容本质进行理解和加工之后的“产物”，不仅能可视化地展现内容本身，还能融入设计者的思想情感，是个性化角色生成过程中较为重要的一种手法。如《我们的精神角落》是由豆瓣出品的H5作品，目的是对豆瓣进行品牌塑造与宣传。作品通过联想将一颗不断成长的豆子作为豆瓣理念的传达者和守卫者，而作品每个版块中具有不同感官的豆子则分别代表了豆瓣的每个模块，较好地展现了豆瓣的宗旨，突显了品牌形象。

拟人化设计是通过为某些物象元素添加表情、肢体、服饰、语言等人类特征，让不具备人类特征的事物拥有人格化特征，从而让角色活起来。通过拟人化设计，可以为物象角色赋予“精气神”，使整个画面基调更为活跃、生动和有趣。如《一起来寻龙摸金，活蒸大粽子》H5中的粽子形象，便是为粽子添加了僵尸人的眼睛、獠牙和表情等人格化特征，设计出了不同颜色的“僵尸小粽子”形象，既突显了H5的寻龙摸金主题，又映照了民间的端午节。

在可视化设计中采用夸张手法，“是对某事物的形象、特征、作用、程度等，有意做出夸大或缩小的处理。通过夸张的形象设计，可以快速抓住观者的眼球，提高观者的阅读积极性；通过夸张的对比处理，可以突出某些角色的特质，更好地传达核心观点。”如《穿越故宫来见你》H5作品，通过夸张的手法塑造了一个戴墨镜、爱自拍、玩QQ、逛朋友圈的“现代化皇帝”，然后让皇帝采用说唱形式描述了与现代技术融合后的后宫生活，接着呈现大赛的广告和主题。其新颖、夸张、有趣、嘻哈、无厘头的设计，获得了意想不到的传播效果。

“借代是指借用一个物象来代替另一个物象”。通常采用与之相关且更能体现本质特征的物象来替代原有物象，一方面既能保留原物象所要呈现的“精髓”内容，另一方面又能引发观众的进一步思考，达到引申的作用。如《梦幻H5》就是以两只不同形象特质的大狗作为“主角”，来代指文案稿本中的甲方和乙方，乙狗形象比较强壮和硬朗，戴有H形的金项链，代表服务方；甲狗形象看起来虽柔弱，但拿着金色骨头，更能体现甲方的主导地位。正因为在服务行业中大家喜欢用某种狗来称呼自己，所以通过使用两只不同气质的狗来代指服务行业中的甲方和乙方，更能增强同行间的认同感，而这种含有自嘲意味的借代风格，也为作品平添了不少乐趣。

（二）设计多样化的交互手段，提升参与感

参与感是H5页面区别于PPT和视频等的关键要素，如果能让用户在H5页面中获得良好、真实且有意义的参与感，便能加深用户对H5内容的印象，提高信息获取的效率；同时用户在参与过程中所感受到的悲伤、快乐、恐惧、兴奋、惊讶、好奇等情绪，也会伴随着信息，一同烙刻在记忆的深处。通常具有参与感的H5作品会更容易受到用户欢迎，更容易实现刷屏级效果。为了提升H5的参与感，可以运用方向传感、重力感应、距离感应、陀螺仪全景、VR/AR等多样化的交互手段，模拟现实世界中的效果。用户在交互过程中就仿佛亲身经历一般，会获得更为真实的情感体验。如2017年人民日报推出的《快看呐！这是我的军装》H5作品，采用人脸智能识别技术，通过让用户上传照片，就能生成独属于用户各年代的军装照，增强了体验的代入感和参与感，使用户在浏览不同年代军装照的同时能回顾建军节，铭记历史。这类生成性的H5作品既有展示作用，又能引导用户参与和创作，具有较强的用户原创体验，深受用户喜爱，上线后迅速获得刷屏级效果。2016年腾讯阅读推出的《盗墓笔记》则利用重力感应、点击操控、话筒感应吹气等多种交互方式，使用户“身临其境”，在墓穴中跟随吴邪一起过险桥、夺真金、吹尘土、开棺木，获得了较好的多重交互体验。

（三）通过节奏调动用户情绪，增强情感共鸣

H5作品就好比一部电影、一个故事、一首歌，如果只是平铺直叙，没有起承转合，则像一杯淡而无味的白开水，无法调动观众的情绪。因此，一个具备良好用户体验的H5作品必须有其特定的节奏，时而高潮时而低谷，时而急促时而悠缓，时而激荡时而平静。在进行H5的文案创作、动效设置、声效设计时，便可将节奏融入其中。分屏的H5作品在叙事进程中一般包含两个高潮点，第一个高潮点设在第二屏，第二个高潮点设在倒数第二屏。依据高潮点的位置，在文案创作时，可在第一个高潮点设置冲突、矛盾、问题、悬念等引起观者注意、思考的“刺激点”，在第二个高潮点则设置答案、结局等答疑解惑的解决方法。在设置动效时，可在两个高潮点分别设置两种与众不同的动效，以区别于其余页面的常规动效，提醒用户这两处是重点。在设计声效时，则应该在两个高潮点位置上采用背景配乐的高潮部分。通过同时对文案、动效和声效等进行节奏控制，有助于调动用户情绪，在观看中产生情感共鸣。如《罗斯·绝不凋谢》H5作品是在罗斯饱受质疑，而以罗斯命名的第6代明星战靴即将上市之时上线的作品，一方面为了宣传产品，另一方面则为了激励罗斯，回应质疑。文案表述上采用了类似讲故事的手法，开场快速切换的消极性画面，配合着人类嘈杂的质疑声，给人以情绪上的第一个刺激点；然后进入缓和的叙事阶段，以罗斯的角度描述自己经历的巅峰和低谷，缓和的人声和环境声配合着相应画面，故事节奏趋于缓和；最后在面对质疑时，“罗斯明确表态决不放弃”成为作品的高潮，紧张快节奏的配乐、快闪的动画切换效果以及精简的文案，则将观众的情绪带向高潮，使观者能随同罗斯一起冲破质疑，获得“新生”。