根据应用的目标和功用不同, H5专题页分为多种表现形式, 如类似幻灯片的图文加音效形式, 问答、测试类形式, 礼物、贺卡、简历、邀请函形式, 以及游戏形式等几大类。
不论形式如何, 能够吸引眼球并成功传播, 且使用户建立对品牌形象的良好认知等, 才是衡量一个H5设计精彩的最终标准。那么, 如何达到这个效果呢?作为一名设计师, 下面就H5页面的视觉设计, 结合一些案例, 与大家一起探讨“如何给H5页面设计品质加分的一些小技巧”:
一、讲究细节, 风格统一
要成就高品质的用户体验, 除了在细节上体现设计师别具匠心之处, 更要注意设计整体风格的统一性。如整体走漫画风, 音效也必须与之相配;时尚的画面效果, 字体就不能过于古典;轻松诙谐的基调, 图文就不能太刻板;想走情感路线, 动效就不能过于酷炫。例如, 腾讯公益为宣传99公益日活动所打造的作品, 其H5动画的设计制作就很好体现了这一点。其画面采取了上下分屏的形式, 将手绘和动画相结合, 色彩时而多彩, 时而黑白, 随着观众点击画面出现的爱心举动文字, 女主人公动画会配合文字内容将分屏中的黑白部分变为彩色画面, 呼吁人们为公益做出行动。除了画面, 背景音效等也都与视觉风格保持一致, 给用户一个协调整体的互动体验。
此外, 细节的设计常能让受众眼前一亮, 达到让人印象深刻的效果。
以“分享提示”这个细节设计为例, 比起一句简单的“点击可分享”, 用心的细节设计带来的吸睛感、参与度是显而易见的。此类设计案例如下图:
二、讲好故事, 引发共鸣
不论H5的形式如何丰富多彩, 内容才是王道。在有限的篇幅里, 讲个好故事, 能够让观众产生情感共鸣, 愿意观看并分享始终是最重要的。
例如, 杰士邦产品的“每一段青春, 都是限量版”主题H 5动画——
熟悉冯唐的人必定也听说过《春风十里不如你》这部小说, 而随着小说被改编为热播电视剧, 冯唐也与品牌展开了合作营销。下面这支H5就是杰士邦联手冯唐所做的一次产品推广, 以“青春”“爱情”这些元素为着眼点, 画面以漫画的形式讲述着书中的剧情, 同时以4个书签作为引导故事的分支, 洋溢着文艺清新的画风。
三、紧跟热点, 吸引眼球
想要你的H5页面吸引大众目光, 迅速抓住当下热点作为由头, 利用话题效应, 借机进行主题宣传也不失为一条捷径。
例如, 故宫博物院与天天P图合作推出了名为《故宫国宝唇彩》的H5互动页面, 借着最近热播的清宫剧《如懿传》《延禧攻略》的人气, 一口气推出了数十款口红, 每款色号都与故宫内的一些藏品相对应。对用户来说, 这个H5互动页面操作简单易上手:点开H5, 欣赏完佳丽选色动画后, 直接进入色号选择模式, 同时, 还可了解与之相对应的国宝简介;一键上传照片后, 挑出最合适自己的唇色, 立刻能体验在线上妆效果, 然后保存或分享照片。此H5利用热点话题来吸睛, 既娱乐了大众, 又迅速推广了软件、同时介绍了故宫藏品。
四、运用技术, 避免堆砌
随着技术的发展, 如今的H5动画已可实现众多酷炫效果和功能, 如:选项点击、摇一摇、绘图、3D视图、重力感应等互动效果。但需合理运用技术, 实现为受众提供流畅舒适的互动体验。避免将各种不同种类动效进行堆砌, 使画面显得凌乱无序。案例如下:ofo共享单车品牌推出的名为《小黄车研发车间》的主题H5页面, ofo小黄车和小黄人的联盟可谓是一只“双黄”彩蛋, 二者联手也自然少不了一支优秀的H5作品。设计师巧妙的营造了一个奇妙可爱的三维小黄车研发车间, 它的界面颜色以小黄人与ofo共有的黄色为主色调, 大大增强了产品辨识度。还利用技术让受众通过点击、滑动、摇一摇等不同形式进行交互体验, 但并不突兀, 整体形式统一流畅, 配合生动有趣的背景音效带给受众舒适的互动观感。
随着信息技术的不断升级和多媒体技术的广泛应用, HTML5技术迅速发展并日趋成熟, 具有跨平台、低成本、易传播、效果佳、更新快、互动性强等优势的H5作品, 将迎来更加广阔的应用前景。作为一种新的媒体传播形式, 它的产生与发展, 必然需要与之相适应的艺术表现形式, 这就要求设计师们不断提高艺术审美能力、设计水平, 并加深对多媒体新技术的认识与运用, 从而不断创作出精彩的作品, 满足并引领人们的审美需求, 使运用HTML5这种新技术呈现出的数字作品更好地服务于人们的生活, 并不断带给人们惊喜!
摘要：近年来, 随着智能手机以及“微信”这个移动社交平台的广泛应用, “H5”这个由HTML5简化而来的词汇, 这种能够跨平台并在移动端上呈现各种多媒体效果、具有互动性的传播形式, 也为人们所熟知。它被广泛应用于活动运营、品牌宣传、产品介绍、总结报告中。
关键词：H5,设计,小技巧