移动互联网环境下的H5设计形式探究

李昱娇

摘  要：笔者依托于移动互联网发展向好的大环境，对H5设计样式予以了细致探究，对其优越性和展现方式都予以了充分剖析。确认了H5设计不论选取哪一种样式，都需将出发点定位于全局性能和服务这两大层面之上，使其信息资源逐步多样化，从客户立场出发，研发出能够迎合运用场景的性能，以达到设计美学价值和商业推广经济价值这二者的深度融合。

关键词：移动互联网  H5设计  形式

移动互联网本质上来说是互联网与移动通信两者的融合，伴随着5G时代的来临还有移动终端设施的日益更新化，移动互联网的发展势头可谓是所向披靡，随着互联网核心用语标准规范的制作结束，H5面世首日便广受好评。消费升级带来的后营销时代，让移动营销逐渐演变成了深层次、多样化的营销样式，涵盖内容有很多，不限于次元穿越、剧情交互还有明星直播等。H5公布相关标准规范之后，不但能借助编程达到相应效果，还能借助部分零代工具像是无需插件的语音视频、本地储存还有图像动画等达成可视化制作，同时达成相关APP的轻应用体验。

1  H5优越性剖析

H5拥有十分灵活的特性，可将其运用于多元化的平台之上，同时其兼容性也是十分惹眼的，能够切实减少软件研发和运行的花费，可以让企业在发展中得到更多的经济收益和潜在机遇。将H5和APP比对剖析可知，其研发耗时更少，运用阶段中联网速率和启动速率都更高，不但不会对终端设施的内存造成一定的占用，对于移动终端的媒体平台而言，适用性更是有所提升。H5的导流入口是极其多元的，这一优越性能够让商家在尚品宣传方面领先一大步。此外，H5的更新换代也是十分及时的，不管是差量更新还是实时更新，门槛都在逐步下降，不但涵盖了嗨爆朋友圈的H5小游戏，还涵盖了京东购物节和淘宝造物节等知名网络热门讯息，H5将其优越性充分展现，潜能也被挖掘得淋漓尽致。

2  H5表现形式探究

在确认性能目标以后，就需落实接下来一个很关键的步骤与设计。就H5的视觉效果而言，涵盖了三大核心要素：一是色彩;二是文字;三是图像，三者彼此配合，方能实现立体的视觉效果的传输，赋予其在独特语境的独特含义，借此向大众传达所要传达的思想、概念还有信息等。怎样有选择性地在为数不多的页面内进行设计，一定要牢牢把控3个方面：一是潜在客户和目标客户的心理状况;二是场景的灵活应用;三是内容传输的关键点。尽量使得用户在打开H5页面那一瞬间有眼前一亮的感受，随之心动不已，进而主动分享。此篇文章将惯用的H5设计样式予以了细致的探讨。

2.1 幻灯片展示形式

这一种H5是最基础的一种表现样式，简单来说就是页面内容的相关呈现，若想实现这一任务，可以借助的第三方工具的种类十分多元。纵使常规而言，客户自身对这种样式的H5的参与感并不会特别强烈，顾客自主的转发数量和转化效率也都不是很高，但对企业而言，借助这种成本不高且简单易行的H5，能够实现紧追热点的效果，反应迅速，实现热点第一時间的转化。纵使是基础的展现式H5，也能够借助版面和内容来实现对顾客的吸引，若前一个阶段的策划足够的清晰，独一无二的设计风格一样能够实现十分优良的传输效果。就常规的设计版面而言，直线型画面是比较符合既定认知规范的，简洁的直线分割更易塑造出沉稳且品质感满满的页面基调，传达出一种庄重且理性十足的气氛，还能在视觉上对差异化内容起到一定的、清晰的划分作用。

就视觉冲击力而言，斜线型版面显然是更为强大的，全局版面的律动感也是更为优良的，且指引性极佳，易给民众传达一种平面延续的错觉。辅以适宜的动态特效，就能在第一时间为消费者带来强烈的画面冲击感，倾斜角的大小和冲击感的大小成正比例的关系，较适宜运用的场合有很多，涵盖但不限于推荐、促销还有活动等。圆形版面呈现在手机屏幕上时具有天然的聚焦视线的能力，适宜一些重要信息、主图还有主标题等的呈现。

2.2 交互式

假使展示型H5触碰到了“视觉设计”的技能点，那么交互式H5便触碰到了“交互设计”的技能点。相较于纸媒而言，互联网传输的一个最大的优越性在于使用者参与度的增强，在网络环境中，使用者能够依托于自身进度实现相关数据的获得和转换，此时H5也不再局限于老式的翻页，不需一味地等待动态特效的加载，H5页面的设计过程逐步被用户体验所影响。尤其是交互式H5更加深了用户体验的深层性，提升了用户的参与度，用户参与感更强烈、更真实，分享的意愿也更高了。

2.3 答题测试、数据提交式

倘若交互设计是在构建一种用户、产品和服务这三者之间的、有一定实际意义的联系，那么数据提交类H5就是对上述联系的数据归纳。该类H5一方面能够帮助企业实现对消费者的产品宣传，另一方面也能同步实现对使用者相关数据的搜集。这种H5能够将使用者的求知欲和探究欲予以充分的调动和利用，逐步地将使用者引领到既定目标轨道上，所以要在第一时间将线索明晰化，使用者借助相关引导进行题目回答，最终达到的结果也得足够科学且不唐突，若能配合以巧妙的视觉特效和文案，用户体验将会更加优良。使用者在网络上将自己的选择输入之后，企业后台会依照输入的相关数值进行数值分析，同时对使用者的消费态度、需求、喜好等进行全面剖析，将目标受众的群体范围进一步缩小化。

2.4 动态游戏式

一旦“交互设计”和“数据库”这两大技能点都被触动之后，黑科技也就自觉出场了。相较于上述几类H5开发方式，游戏类H5的研发耗资和科技含量都是更高的，它需多个环节的协调和辅助，比如激励手段、游戏制作、设计、创意还有策划等。最初风靡起来的“神经猫”可谓是火爆了朋友圈的存在。此游戏的研发耗时仅为一天半，美术和程序都只有一个人的迷你团体研发并上线的“魔性”《围住神经猫》小游戏上线短短3d，访问量就已经破亿。这样一个简简单单的小游戏，所带来的传播效用却是极其惊人的，很多公司由此对H5游戏的研发跃跃欲试。随后一大批质量优异的H5小游戏接连问世，它们已经不再局限于对旧爆款游戏的小幅度改动，而是选择将游戏题目回答和视觉要素甚至是AR/VR技术彼此融合，进而实现视觉传播质量方面的更上一层楼。

2.5 复合功能式

H5的初始名称是Web Application 1.0，APP应用的完整称谓亦即Application。但H5技术和APP的差异性在于，前者研发的重点在于基于核心底层从零开始重建全部互联网的根基，但后者只需基于旧式的语言基础来实现相应的研发即可。因此APP火爆的时间要远远早于H5。H5技术的研发人员在研发初始阶段就为应用设置了内核，使用者无需再下载安装很多的APP，只需像PC时代一般，借助浏览器登录即可。所以，曾有预言称，H5技术有可能让移动互联网回归到浏览器时代。倘若APP是为移动互联网增光添彩的存在，那H5就是为互联网全局打造了一个最新的平台与框架。就使用者层面而言，若想实现产品测试、一键导航、在线预订还有参会邀请等功能，都可以直接登录浏览器，无需再次下载APP，因此，使用便捷度大大提升，被服务的范畴也更加宽泛。就企业层面而言，需把功能型H5视作是一个商品，需对其进行持续的更新换代，以迎合使用者需要。

3  结语

现阶段HTML5已然迈入速率恒定且速度较快的发展阶段，同时在很多行业实现了跨越式发展，上述行业涵盖但不限于AR/AV、教育、移动营销、移动应用还有手机网游等，以HTML5为根基的“移动互联网+”的时代即将来临。此篇文章中提及的只是部分惯用的H5类型，现实设计过程中，H5能够依托于多元用户需要选取多元技能叠加应用，最终实现视觉传输还有使用者体验这两大层面的最优效果。

参考文献

[1] 胡晓林，马振龙.基于H5技术的微信交互式广告在交互设计方面的“优势整合”创新思考[J].包装工程，2016（24）：124-129.

[2] 刘铭.西域明珠APP程序开发的构思与应用[J].电子技术与软件工程，2014（9）：266-267.