CN104049836A - 三明治叠层式内容广告混合的网页用户界面展示方法 - Google Patents

Abstract

一种三明治叠层式信息碎片组织方式用户界面设计方法。该方法用于组织不同类别的信息碎片，使得缩略内容信息碎片位于叠层的顶部。当用户对缩略内容信息产生兴趣后，叠层式信息碎片开始展开动作，使得用户能够阅读到完整的内容信息、相关的内容信息和广告。当用户完成内容阅读后，展开的信息碎片开始收拢动作，恢复到初始状态。该方法能够改善用户的阅读体验，提供广告的投放效率，并通过建立内容信息与广告的所有权关系，厘清在多方参与的内容创作的公共区域中各个主体所产生的广告收益计算问题，避免了经济纠纷。

Description

三明治叠层式内容广告混合的网页用户界面展示方法

技术领域

本说明书涉及的技术领域为网页的用户界面设计。 

背景技术

注意力经济是互联网产业中的一个核心商业模式。绝大多数网站均以信息内容与广告互相嵌套的方法盈利。因此，只有科学合理富有创造力地对内容和广告进行布局安排才能既为用户提供愉快的服务体验又能保障网站的收益。 

    以门户网站为代表的传统内容广告投放布局方式内容和广告均不醒目，既不能为用户提供愉快的浏览体验，又不能高效率的为购买广告位的广告主定位潜在客户。以搜索引擎（如谷歌、百度）为代表的内容广告投放布局方式采用了如下创新：根据用户搜索的信息计算出用户可能感兴趣的广告内容；把这些广告随同用户搜索的结果一起精准投放，从而提高广告投放的效率。而以新浪微博为代表的自媒体在内容广告布局上除了采用传统门户网站的边缘投放广告的方法以外，还把广告内嵌到用户互相交流的内容中。然而，这些办法还是需要以牺牲用户体验为代价来获取收益。 

    此外，在发明专利申请《一种在互联网上根据公众利益诉求的表达提供针对性广告的方法和装置》（CN 102956010 A）中，专利申请人发明了一种通过广告销售为自然人和法人的观点、见解、影响力和所提供的公共服务进行定价，并进行支付转移的方法。这种新的商业模式将以鼓励人民群众为公共利益建言献策、投身公共服务，而不需要以对公共事务的无私奉献的思想道德情操为前提，从而提升公共事务的广泛参与性并从事让人民群众喜闻乐见的创造性文化生产活动。然而，该发明没有解决以下三个问题：1.在不降低用户体验的前提下，如何提高广告销售收入，从而提高观点、见解、影响力和所提供的公共服务的价值的问题？2.如何在缩略信息汇总的目录页面，让人信服地厘清各个主体各自产生的广告收益？3.如何在多方参与、有问有答、有赞成有反对的话题讨论中，让人信服地厘清各自产生的广告收益。 

发明内容

本发明借鉴了三明治（肉夹馍）的立体布局方式，充分利用HTML5的最新技术进展，采用分层堆叠的方法对网页的内容广告进行混合布局，从而达到既能让用户能够愉快地找到自己感兴趣的内容，又能让网站充分、大量、醒目地对用户投放精准广告的目的。同时，在标题汇总的页面，具体投放什么样的广告根据用户自行选择的兴趣点决定，从而厘清了各个主体间的广告收益，避免了可能产生的经济纠纷。本发明的演示效果可参考演示网址：http://www.topic-value.com/TopicValue/test_sandwich.html。 

    为解决所述的技术问题，本发明采用以下方法： 

        在个人电脑（PC）或移动终端（手机、iPad）的浏览器或应用程序中，用户界面向用户提供内容的概要缩略信息。用户可以通过鼠标或触摸方式的指示感兴趣的概要信息，以获得完整信息。用户界面在扩展信息的同时以符合人类心理学的动画方式醒目的播放与用户感兴趣的内容相关的广告或其他与原始信息相关联的内容。从而达到让这些与用户感兴趣的信息内容相关联的精准广告吸引用户注意力的目的。

本发明有如下有益效果： 

1.  采用具有新颖性的用户界面布局方式，让用户不受干扰的找到感兴趣的缩略信息条目，从而提升用户阅读信息的愉快感。

2.  根据用户的指示，向用户展开完整信息。并在这一过程中以醒目方式播放与用户阅读信息相关联的广告，从而达到提高广告投放效率的目的。 

3.  建立内容广告相关联的关系，从而避免了在缩略信息汇总的目录页面和多方参与的话题讨论页面，计算提供内容信息的各方所贡献的广告收益的争议。 

  

    

附图说明

图1为用户界面中三明治式的内容广告展开示意图

图2为发明所涉及的各模块之间关系图

图3为实现叠层展开和收拢方法的流程图

图4为用户撰写内容的用户界面

图5为缩略信息应用场景和组合方式示意图

具体实施方式  

下面结合图例说明发明的实施方式：

图1是所发明的三明治叠层式内容广告混合的用户界面示意图100。该用户界面100用于包括但不限于网页浏览器、手机、iPad等客户端。其动态演示效果可参考网址：http://www.topic-value.com/TopicValue/test_sandwich.html。作为HTML语言的一个DOM元素，三明治叠层式内容广告混合DOM元素由缩略信息页面碎片101、向左展开页面碎片102，向右展开页面碎片103，静止页面碎片104，向下展开页面碎片105组成。其中，缩略信息页面碎片101作为封面最先呈现给用户，其内容包括但不限于内容的标题、图片、作者、来源、时间、内容摘要等。其他页面碎片102-105通过调整DOM元素的z-index属性使其隐藏在缩略信息页面碎片101的下面。当用户使用包括但不限于鼠标、键盘、触摸屏、语音、手势感应器等输入设备示意用户对该内容感兴趣后，三明治叠层式内容广告混合DOM元素将开始展开动作。其展开的方法可以由单个或多个包括但不限于平移、以任意空间轴为轴心的旋转、渐入渐出等动作组成。其展开的方向可以向包括但不限于向上110、向左111、向右112，向下113的方向展开。在展开完成后，原隐藏在缩略信息页面碎片101下的其他页面碎片102-105开始向用户呈现信息，其信息既可以是原有内容的完整信息，也可以是与原有内容相关联的参考信息或是广告。当用户通过包括但不限于鼠标、键盘、触摸屏、语音、手势感应器等输入设备示意用户对该内容已经阅读完毕后，用户界面100就可以回归到初始状态，又可以递归迭代地对包括但不限于101-105页面碎片再次进行如上所述的展开操作。

    图2是发明所需模块的模块关系图200，包括HTML页面201、Javascript脚本文件202、CSS页面格式文件203、Web服务器204组成。其中发明所述的三明治叠层式内容广告混合模块作为DOM元素205从属于HTML页面201。当用户加载HTML页面201时，浏览器或手机客户端从Web服务器204下载HTML页面文件201，以及相关联的Javascript脚本文件202和CSS页面格式文件203。其中，CSS页面格式文件203定义了三明治叠层式内容广告混合DOM元素205的初始位置、大小、叠层顺序以及渲染方法等格式信息，Javascript脚本文件202包含了叠层式内容广告混合DOM元素205的响应用户交互事件的程序代码。当用户通过输入设备触发叠层式内容广告混合DOM元素205的预先定义事件后，Javascript脚本文件202里的代码将根据程序向Web服务器204上传包括但不限于：用户信息、访问次数等数据，或下载包括但不限于：扩展内容信息、相关联内容信息、广告等数据。Javascript脚本文件202向CSS页面格式文件203读取或修改相关的格式信息，从而完成叠层式内容广告混合DOM元素205展开或收拢的操作。 

    图3为实现发明所述展开和收拢方法在Javascript脚本文件202的程序的流程图300。在三明治叠层式内容广告混合DOM元素205展开的流程中，首先由包括但不限于鼠标在内的输入设备触发展开事件301，然后为了收拢复原操作存储当前DOM元素的位置信息302，并把该信息保存在DOM元素位置信息变量中308。接着程序向Web服务器204提交和获取有关的信息303。然后根据所需要展开信息的类别、大小，页面的大小、布局以及设计风格计算出各页面碎片101-105展开后各自的布局方案304。接着Javascript脚本文件202通过修改CSS页面格式文件203来实现展开操作305。在动画的渐变过程结束后完成展开操作306。 

    图4为用户输入内容信息的界面400。该界面包括内容标题401、内容相关话题的标签402、内容摘要403和正文404若干部分。内容摘要403即可以由计算机从正文中智能提取概括，也可以由用户自行撰写。其中包括但不限于内容标题401、内容相关话题的标签402、内容摘要403的部分作为构成创建缩略信息页面碎片101的基础信息。内容标题401、内容相关话题的标签402、内容摘要403和正文404若干部分以各自不同的权重作为投放精准广告和选择相关内容信息的依据。 

    图5为缩略信息页面碎片101和缩略信息滚动条504在包括但不限于论坛501、话题讨论502、朋友圈博客503等应用场景的排列方式的示意图500。其中，缩略信息滚动条504以滚动播放的方式向用户提供包括但不限于热点新闻、市场行情、天气预报、交通拥堵情况、朋友动态或其他用户自定义信息。当用户表示兴趣后，按照300所述的流程展开和收拢。缩略信息页面碎片101和缩略信息滚动条504的排列方式既可以由包括但不限于纵向排列、横向排列，多行多列排列、页面悬停、内部嵌套排列等方式布局。在论坛501的应用场景中，缩略信息101和缩略信息滚动条504的选择排列方式包括但不限于关注度、时间、分类、用户自定义等方法，从而帮助用户方便醒目的找到自己感兴趣的内容信息。在话题讨论502应用场景中，缩略信息101和缩略信息滚动条504的选择排列方式包括但不限于时间、支持度、反对度、回复数、投票数、话题发展的先后逻辑顺序、用户自定义等方法，从而帮助用户方便醒目的找到自己感兴趣的内容信息。在朋友圈博客503的应用场景中，缩略信息101和缩略信息滚动条504的选择排列方式包括但不限于时间、投票数、关系亲密度或用户自定义等方法，从而帮助用户方便醒目的找到自己感兴趣的内容信息。 

Claims (9)

1.一个新颖的叠层式内容广告混合的信息展示用户界面的方法，该方法包括一下特征：

内容广告混合信息由包括但不限于内容缩略信息、内容完整信息、相关内容信息、广告等信息碎片组合合成；

如a）所述的信息碎片按照叠层的方式排列，其中内容缩略碎片放置在叠层的顶部并覆盖住其他信息碎片，在初始状态时最先呈现在用户眼前；

当用户通过输入设备选择感兴趣的内容缩略碎片后，呈叠层式的信息碎片以醒目方式展开，使得用户能够阅读完整内容信息、相关内容信息，已经以醒目方式注意到广告内容信息；

当用户通过输入设备表示兴趣点转移后，其感兴趣的内容碎片迭代递归地按照如c)所述方法继续进行展开动作；

当用户通过输入设备表示完成阅读后，展开的内容碎片开始收拢操作，恢复到初始状态；

明确内容-广告的所有权关系，广告作为叠层式内容广告组合包的所有物，内容收益由被用户展开的广告信息碎片产生的广告收益计算。

2.如1所述的叠层式内容广告混合的信息展示用户界面，其运行平台可以由包括但不限于个人电脑、移动电话、个人信息阅读器等设备；其运行的程序可以由包括但不限于网页浏览器、手机浏览器、定制的阅读或发言等通过HTML语言组织内容和渲染的应用程序组成。

3.如1所述的内容缩略碎片，其组成可由包括但不限于标题、作者、时间、分类、内容摘要、标签、投票数、实时动态等信息构成，其展现方式既可以以目录形式出现，也可以以动态滚动条的形式滚动播放。

4.如1所述的广告信息碎片选择，其方法可以由包括但不限于与内容信息向关联、与用户个人信息相关联、作者自定义、网站自定义等方法构成。

5.如1所述的用户输入设备，包括但不限于鼠标、键盘、触摸屏、语音、手势等设备，其触发展开收拢的事件包括但不限于：移入、移出、单击、双击、拖拽等。

6.如1所述的叠层信息展开方式和收拢方式，其操作包括但不限于：平移、折叠、以几何空间任意轴的旋转、缩放、渐入渐出、覆盖或替代其他无关信息等。

7.如1所述的叠层信息展开和收拢的过程中，扩展信息碎片的内容既可以随内容缩略碎片一起加载到如2所述的客户端，也可以根据用户需要动态的实时加载。

8.如1所述的叠层信息展开和收拢的过程中，如2所述的客户端将与服务器发生信息交互，其内容包括但不限于：用户兴趣和访问记录、广告播放内容、广告计费数据、扩展信息内容等。

9.如1所述的叠层式内容广告的应用场景，包括但不限于论坛、新闻、讨论区、电子邮件、博客等。