HTML5的创新应用

    孙颖+李禹臻+朱琳

    摘要：文章根据当前新媒体的趋势，总结了运营微信平台时视觉设计上积累的经验与心得，并且叙述了针对THTML5在新媒体运营中产生的作用、创新点以及具体研究过程。

    关键词：HTML5新媒体运营视觉设计

    一、背景与定义

    新媒體是一个相对于传统媒体而言的概念，在传播方式上包含了各种形式的媒体，例如数字电视，网络，手机等媒体。

    而通过现代化互联网手段，借由微信、QQ等新兴的媒体平台工具进行一系列宣传的运营手段就叫作新媒体运营。新媒体运营作为一种新型传媒方式，在生活中的作用也一点一点凸显出来。正因如此，单调的平面效果也随时间的增长越来越难以吸引消费群体，媒体人对更加高效，更能博人眼球的传媒方式的需求愈加强烈。HTML5这种新颖的运营方式给予了媒体人新的机会与可能。

    21世纪是因特网的井喷阶段，此后人们逐渐习惯于接受图形化碎片化的信息，简单易懂生动形象传播速度快的H5应运而生，H5是指第5代HTML，也指用H5语言制作的一切数字产品。从引爆朋友圈的HTML5（以下将简称HTML5为H5）小游戏《围住神经猫》开始，到颠覆传统广告的微信公开课H5专题页《我和微信的故事》，这种富有新意的传媒方式从2015年起，借由微信这个移动社交平台，正在走进更多人的视野。其丰富的展现方式，是它能迅速“走红”的关键原因。

    Google已经将页面加载速度作为搜索排名的一个因素，这也预示着H5在未来传媒业发展上的重要性。随着科技的进步，H5的优势便更加显现出来，双屏互动、绘图、全景视频、重力感应以及最近最火爆的虚拟现实等丰富的互动效果，都是H5显著的优势。H5给大家提供了一个很好的信息优化与传播的平台，我们可以充分利用这个极具潜力的传播平台，将想要传达的信息从听觉视觉触觉各方面进行设计优化，使其更有效地传播出去。

    然而，由于H5的发展处于初期阶段，现在H5的创新与应用存在一些显著的问题。现在的H5应用呈现方式过于单调，一个神经猫出来后，模仿者、类似的游戏此起彼伏。一个接电话的H5出来后，一大堆接电话的广告效仿。我们要做的就是借助现有的H5技术结合新媒体平台，将要传播的信息进行设计与创新，推出更富有设计感和视觉效果的游戏和页面。丰富H5的形式，推动H5的发展，去适应新媒体的趋势。

    在视觉设计上，我们还没有充分运用H5给我们带来的便利，以及其无限的拓展空间，许多的H5的动态效果依旧很简单，我们可以在其多功能多模块的格式下发挥想象力，将动态模块发挥出更大的作用。

    二、H5国内外研究概况及发展趋势

    （一）技术研究方面：

    2008年1月22日，H5的第一份正式草案公布。

    2012年12月17日，万维网联盟（W3C）正式宣布HTML5规范已经正式定稿。

    2013年5月6日，HTML 5.1正式草案公布。该规范定义了第五次重大版本，第—次要修订万维网的核心语言：超文本标记语言（HTML）。其中将会逐渐设计新形态的格式，以帮助Web应用程序的作者，努力提高新元素的互操作性。

    2014年10月29日，万维网联盟正式宣布，H5标准规范最终制定已经完成，并已公开发布。在此之前的几年时间里，已经有很多开发者陆续使用了H5的部分技术。

    H5将推动Web进入新的时代。H5有望成为梦想中的“开放Web平台”（Open Web Platform）的基石，如能实现可进一步推动更深入的跨平台Web应用。接下来，W3C将致力于开发用于实时通信、电子支付、应用开发等方面的标准规范，还会创建一系列隐私、安全防护相关的措施。而这些进步，是每一个用户都能亲身体会到的。

    2015至2016年，国内各大手机移动端APP都会在年终的时候针对于用户一年以来操作过的记录加以总结，H5作为主要传播格式，应用十分广泛，从2015年的微信、知乎年终总结拓展到2016年例如支付宝2016账单、知乎年终总结、豆瓣、网易云音乐等。可以看出H5在新媒体中起到的作用已然不容小觑。

    （二）未来的发展方向：

    在云计算的快速进步下，尤其是“平台及服务”（PaaS）的加速部署，较少的资金运营、更加宏伟的规格、更加简单操作维持管理的云服务时代已经开启，而H5作为web云服务的前端技术顺势而起，极大增强了web云服务在移动终端上的展现与交互能力。随着web应用在功能、性能及业务体验上开始接近原生应用，web应用生态必然会在长尾化、轻量级的应用领域挤占原属于原生应用的部分份额。现在已有众多浏览器支持H5，在网页端和移动端，H5都将会发挥其巨大的作用。

    三、新媒体平台的视觉设计

    为研究H5在新媒体平台的创新应用，研究小组专门开设了大工设计微信公众平台进行专业的媒体运营，在其中积累了不少关于微信公众平台视觉设计的经验。在传统的微信编辑模式下，直接用微信公众平台编辑视觉效果有以下几点值得注意。

    （一）文字

    1.文字可调项有大小，加粗，斜体，下划线，颜色，首行缩进，行间距，段间距，对齐方式等。调节好这些项，足以让版面抓人眼球。

    2.首行不缩进，这样会使文字看起来更整齐，不杂乱。字体大小13px～18px比较合适，字小一点会有设计感，清新好看。但是太小又会看不清，影响阅读效率。13px～15px比较适合设计类，情感类的公众号。16px～18px比较适合新闻，财经类的公众号。一篇文章中的字号不要用太多，2～3种就够用To行间距调成1.5-1.75最符合人类视觉的舒适点，一些设计类，文艺类的公众号可以适当加大行间距，凸显设计感和清新感。

    3.加粗，斜体，下划线，改变字体颜色等都可以来标注文章中的重点。不过除了少部分的英文字体，大部分字体变成斜体以后都不会美观，所以个人比较喜欢用直接加粗或改变颜色的方式来标注重点。字体的颜色不宜过多，除了灰黑色之外，字体颜色不要超过1～2种。建议每个微信公众号都有一个和自己风格或logo相搭配的主色，文章中用主色来突出小标题或文中重点即可。

    每段的行数最好不要超过6行，行数太多会显得冗长缀余，削弱读者的阅读兴趣。段间距微信设置的5～25看上去都还比较舒适，可以根据个人的公众号风格自行选择，但要注意的是每段之间一定要留一行空白，要学会留白之美。

    （二）图片

    1.圖片相较文字而言给人更直观的感受和信息，所以公众号推送尽量多图少字。

    2.首先图片的质量一定要清晰，有多张图片的时候图片色调和大小要统一，如果图片的宽度占不满整个手机屏幕，将图片的格式设置为居中。

    3.如果要展示一些产品或者动态效果，GIF格式的动图会比JPG格式的图片效果更好，视频里面的重点也可以直接用GIF格式的动图展示出来，让读者更容易接收到重要信息。如今的微信公众号编辑器功能增加了许多，对于GIF的格式宽容了许多，这也暗示了动态图片在未来编辑上起到的作用，合理地运用动态效果的图片不仅能增加受众阅读的趣味性，还可以更能清楚地表达所想传达的内容，从而达到宣传的目的。

    4.微信推送的封面图分为头图封面和小图封面，头图封面大小是900×500px，小图封面大小为200×200px，选来做封面的图片要注意其大小，避免图片变形或被裁减。

    5.微信图片可以加水印来限制图片的使用权，水印有使用微信号和使用名称两种，根据自己公众号的情况自行选择，理论上选择短的，水印体积小，好看的那一个。当然，如果想防止重要内容被遮挡，也可以选择不添加水印。

    （三）自主排版

    如果个人有很高的排版能力及自我要求，可以尝试用其他排版软件如CorelDRAW，PS等自己排好版，导成图片格式上传到微信公众平台。效果会相当不错，但过程比较麻烦。除此之外，利用第三方微信编辑器如易点，135editor，ipanban等也相当快捷，美观。

    四、项目案例的具体研究过程及成果

    （一）项目主要研究内容

    1.基于TypeScript及JavaScript技术制作一系列网页互动效果，也可以将其看作是移动端的web游戏，无需下载软件即可体验。结合多种展现形式的页面、动态特效、交互应用（1interactive app）和数据分析（Data analysis）的元素，实现信息的直接传播。并且其对于格式的要求低，初期资金投入低、完成一个项目所需要耗费精力小的优点，进行不断实践，以达到充分掌握的程度，为下一步进行H5的视觉创新搭建技术基础。

    2.基于微信平台，通过新媒体的再设计，通过页面的制作方式开发出多款新颖、有趣、生动、形象、准确的信息传播方式，用于推广游戏，并在微信平台通过用户体验反馈对游戏进行不断改进更新。

    3.主要针对视觉上的效果进行创新设计。结合其动态元素的特点，制作出生动传神的H5页面。

    （二）项目研究过程

    1.学习了H5的制作方法后在大工设计的微信平台上发布了视觉效果与传播性极佳的建筑与艺术学院教师招聘H5页面这是初步的成果。

    2.在探索方案方向的过程中，起初决定将H5与同样是热点的ardunio结合起来，结合实际的项目做一个宠物防丢的装置，主要做检测呈现软界面的这一块，在界面视觉呈现方式上创新。通过初步对ardunio的了解以及对项目的深入分析之后，觉得这个在新媒体方向工作量相对较少，大部分工作在宠物防丢实物这一块，而且工作量相对偏大，于是决定改换方向。

    3.决定最终方向：经过一系列讨论，决定将项目与专业的需求结合在一起，满足身边的需求，用H5技术做一个工业设计老师同学毕业设计互选的应用，解决毕业设计学生选老师，老师选学生尴尬、繁琐的问题。

    4.方案初步：应用取名为：师生互动选择应用。师生互动选择应用中师生互选部分一改平淡的风格，以游戏的方式呈现，具有极强的互动性和趣味性。应用H5的方式呈现，具有极强的传播性与视觉性，体验性。

    5.方案深化：中期之前我们的重头工作放在应用的创意和视觉效果上面，经过多次讨论，我们确定了应用的风格：使用像素风。确定应用的内容：应用以讲故事为主线，中间插入游戏互动的环节。同学选在老师过程中用找人的游戏来进行。老师同学进行趣味性互选之后，连线过程通过算法进行匹配，最后的结果直接通过微信发给用户。让师生轻松愉快地完成这个毕设互选过程。

    6.经过讨论决定了最后方案：用H5做一款工业设计老师学生互选的应用。应用的大背景取景于大连理工大学第二教学馆馆，小组成员分工到现场实地取景，进行大背景的视觉设计。

    （三）研究成果

    结合实际问题，我们利用了HTML5，CSS3，TypeScript及JavaScript等技术，制作一款工业设计毕业设计老师学生互选的应用，解决老师同学在毕业设计互选的过程中尴尬繁琐的问题。应用一改之前的平常化流程，用游戏的方式让老师和同学进行互相选择。

    师生互动选择应用的平面风格为像素画风格，大背景实地采景教学馆，根据每个年级不同时期所会经历的课程和活动，提取出具有其特点的小物品们，使其形象平面化来制作大背景，同学在选老师过程中用找人的游戏来进行。老师同学进行趣味性互选之后，连线过程通过算法进行匹配，最后的结果直接通过微信发给用户。让师生轻松愉快地完成这个毕设互选过程。应用会发布在大工设计微信平台上面，达到一定的用户点击量，起到宣传大连理工大学工业设计微信平台的作用，进而起到宣传工业设计的作用。后期积累一定数量的粉丝，可以通过发布广告等途径来获得利益，维持微信平台的运转。在微信平台通过用户体验反馈对游戏进行不断改进更新，对于最终的应用版本申请版权，正式上线并进行推广。

    结语

    新媒体的视觉设计必须跟上时代的脚步，在新的时代，大家需要了解掌握更多的新媒体传播技术，更好地把握受众群的需求，多加实践，在操作中吸取经验，从书本上学到的远远不足以支撑一个媒体平台的运营。在未来的媒体传播方式中HTML5将会占有愈来愈多的比重，甚至是革新新媒体信息的传播方式，我们要创新性地应用HTML5，发挥其功能和效用，在了解了移动端与其的特殊性后，更加准确、创新性地进行新媒体的视觉设计。