CN108062728A - 一种二维户型展示系统及其实现方法 - Google Patents

Abstract

本发明提供一种二维户型展示系统及其实现方法，所述实现方法包括：S1，将目标房源的照片按各分间进行分组并存储；S2，配置各分间在展示页面中对应的按钮控件；S3，配置所述展示页面中的滚动视图窗口，并构建当所述按钮控件被触发后，所述滚动视图窗口调用对应分组的照片并展示的业务逻辑。本发明能够有效提高用户通过网站查看房源的效率，增强信息显示能力，改善用户使用体验。

Description

一种二维户型展示系统及其实现方法

技术领域

本发明涉及数据处理技术领域，更具体地，涉及一种二维户型展示系统及其实现方法。

背景技术

用户在租、购房时，主要关注的是房屋本身的屋况信息，包括户型、房间配置等。因此，在通过房屋租售网站了解房屋信息时，除了想了解房源的建造年代、公共设施等之外，还会关注房源的户型图、房间图片和房屋详情等。

通常对于某个房源，房屋租售网站都能获取其户型资源，摄影师也会对每个分间进行拍照，对于房源信息和房间信息也会有详细描述。传统的网站房源详情照片浏览模式是以一个滚动视图(scroλlView)来滑动浏览图片相册实现，房间的户型图也会作为一张图片显示在相册里。

上述传统浏览方式，用户一般需要从第一页看到最后一页，操作单一，无法跳页查看，且无法形成对房型一个很直观的概念。有时候想查看一处房源的厨房照片，可能需要滑动好几张甚至更多的图片才能看到。房源查看效率低，用户使用体验不好，同时展示的信息也具有局限。

发明内容

为了克服上述问题或者至少部分地解决上述问题，本发明提供一种二维户型展示系统及其实现方法，用以有效提高用户通过网站查看房源的效率，增强信息显示能力，改善用户使用体验。

一方面，本发明提供一种二维户型展示系统的实现方法，包括：S1，将目标房源的照片按各分间进行分组并存储；S2，配置各分间在展示页面中对应的按钮控件；S3，配置所述展示页面中的滚动视图窗口，并构建当所述按钮控件被触发后，所述滚动视图窗口调用对应分组的照片并展示的业务逻辑。

进一步的，所述实现方法中所述S1的步骤进一步还包括：对所述目标房源的户型图片和/或详情描述页进行存储；相应的，所述S2的步骤进一步还包括：对应配置所述目标房源的户型按钮控件和/或详情描述按钮控件；相应的，所述S3的步骤进一步还包括：对应构建当所述户型按钮控件和/或所述详情描述按钮控件被触发后，所述滚动视图窗口对应调用所述户型图片和/或所述详情描述页并展示的业务逻辑。

进一步的，所述实现方法还包括：配置各分间的分间描述页，并配置所述展示页面中的分间描述展示窗口；相应的，所述S3的步骤进一步还包括：构建所述滚动视图窗口在调用对应分间的照片的同时，所述分间描述展示窗口调用对应分间描述页并展示的业务逻辑。

进一步的，所述实现方法中所述S1的步骤进一步还包括：对所述目标房源的户型图片和各分间对应的分间描述页进行存储；相应的，所述S3的步骤进一步还包括：配置所述展示页面中的户型展示窗口和分间描述展示窗口，并构建用户进入所述展示页面时所述户型展示窗口调用所述户型图片并展示的业务逻辑，以及对应分间按钮控件被触发时所述分间描述展示窗口调用对应分间描述页并展示的业务逻辑。

进一步的，所述实现方法还包括：对所述户型图片按各分间分区域绘制点击范围，构建各分间对应的点击范围被点击触发时，对应的所述点击范围保持高亮的业务逻辑。

进一步的，所述实现方法还包括：构建在对应的所述点击范围保持高亮的同时，所述滚动视图窗口调用对应分间的照片并展示，以及所述分间描述展示窗口调用对应分间的分间描述页并展示的业务逻辑。

其中，所述分间描述页展示的分间信息包括以下信息中的一种或多种：面积信息、朝向信息、装修信息、窗子类型和家具配置信息。

另一方面，本发明提供一种二维户型展示系统，包括：后台存储单元，用于将目标房源的照片按各分间进行分组存储；展示页面，所述展示页面至少包括按钮控件区域和滚动视图窗口区域，所述按钮控件区域至少包括各分间分别对应的按钮控件，所述滚动视图窗口区域包括滚动视图窗口，所述滚动视图窗口用于当对应分间的所述按钮控件被触发后，调用存储在所述后台存储单元中的对应分间的照片并进行展示；逻辑控制单元，用于控制实现所述展示页面的调用和展示业务逻辑。

进一步的，所述后台存储单元具体还用于存储所述目标房源的户型图片和各分间对应的分间描述页；相应的，所述展示页面具体还包括：户型展示窗口区域和分间描述展示窗口区域，所述户型展示窗口区域包括户型展示窗口，所述户型展示窗口用于在用户进入所述展示页面时，调用所述户型图片并进行展示，所述分间描述展示窗口区域包括分间描述展示窗口，所述分间描述展示窗口用于当所述分间按钮控件被触发后，调用对应的分间描述页并进行展示。

进一步的，所述户型图片包括按各分间分区域绘制的点击范围；相应的，所述逻辑控制单元具体还用于，控制在各分间对应的所述点击范围被点击触发后，对应的点击范围保持高亮，和/或，所述滚动视图窗口调用对应分间的照片并进行展示，所述分间描述展示窗口调用对应分间的分间描述页并进行展示。

本发明提供的一种二维户型展示系统及其实现方法，通过户型分间的方式把目标房源照片进行分组展示，可以更好的把图片归类，用户可以任意跳转到自己想看的房间查看；通过把户型图、分间照片及分间信息相结合展示，能够使用户更直观的了解房源信息。本发明能够有效提高用户通过网站查看房源的效率，增强信息显示能力，改善用户使用体验。

附图说明

图1为本发明实施例一种二维户型展示系统的实现方法的流程图；

图2为本发明实施例一种二维户型展示系统的结构示意图；

图3为本发明实施例一种展示页面的布局示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

作为本发明实施例的一个方面，本实施例提供一种二维户型展示系统的实现方法，参考图1，为本发明实施例一种二维户型展示系统的实现方法的流程图，包括：

S1，将目标房源的照片按各分间进行分组并存储。

可以理解为，为了实现目标房源照片的快速按分间分组调用，在后台存储中将目标房源的照片按分间进行分组，并将相同分组的照片存入临近的存储区域。这种存储方式能够方便数据的连续调用，有利于降低程序编写复杂程度和提高数据调用效率。

S2，配置各分间在展示页面中对应的按钮控件。

可以理解为，为了方便用户针对性的选择需要了解的分间，在展示页面中配置目标房源各个房间对应的按钮控件。如某个房源包括厨房、客厅、餐厅、卧室和洗手间几个房间，各个房间有对应的几组照片。则在配置展示页面中的按钮控件时，对应的配置厨房、客厅、餐厅、卧室和洗手间的五个按钮控件，每个按钮控件上对应添加厨房、客厅、餐厅、卧室和洗手间的标签进行标记。当用户需要了解某个分间时，点击对应的按钮控件即可。

S3，配置所述展示页面中的滚动视图窗口，并构建当所述按钮控件被触发后，所述滚动视图窗口调用对应分组的照片并展示的业务逻辑。

可以理解为，在用户通过点击按钮控件选择要了解的分间时，展示页面需要对应展示该选定分间对应的照片。因此本步骤在展示页面中配置滚动视图窗口，并构建该滚动视图窗口对对应照片的调用和显示业务逻辑。且在接收到用户的点击触发事件时才会执行该调用和显示流程。

本发明实施例提供的一种二维户型展示系统的实现方法，通过户型分间的方式把目标房源照片进行分组展示，可以更好的把图片归类，用户可以任意跳转到自己想看的房间查看，能够有效提高用户通过网站查看房源的效率，增强信息显示能力，改善用户使用体验。

进一步的，所述实现方法中所述S1的步骤进一步还包括：对所述目标房源的户型图片和/或详情描述页进行存储；相应的，所述S2的步骤进一步还包括：对应配置所述目标房源的户型按钮控件和/或详情描述按钮控件；相应的，所述S3的步骤进一步还包括：对应构建当所述户型按钮控件和/或所述详情描述按钮控件被触发后，所述滚动视图窗口对应调用所述户型图片和/或所述详情描述页并展示的业务逻辑。

可以理解为，在根据上述实施例将目标房源各个分间的照片存入后台存储器的同时或之前、之后，将目标房源的户型图片和详情描述页中的一种，或者二者一同存入后台存储器。并在配置展示页面各分间的按钮控件时，另外对应配置目标房源的户型按钮控件和/或详情描述按钮控件。具体的，若存入的信息包括户型图片和详情描述页中的一种，则对应该种信息配置对应的按钮控件；若二者兼有，则对应配置二者分别对应的按钮控件。

相应的，在接收到用户通过点击户型按钮控件或详情描述按钮控件选择相应的选项时，需要通过滚动视图窗口对对应的户型图片或详情描述页进行展示。因此，本实施例在步骤S3中还构建滚动视图窗口基于用户点击触发事件，对应调用和展示户型图片和/或详情描述页的业务逻辑。即构建在对应按钮控件接收到用户的点击触发事件时，滚动视图窗口调用并展示户型图片和/或详情描述页的业务逻辑。

进一步的，所述实现方法还包括：配置各分间的分间描述页，并配置所述展示页面中的分间描述展示窗口；相应的，所述S3的步骤进一步还包括：构建所述滚动视图窗口在调用对应分间的照片的同时，所述分间描述展示窗口调用对应分间描述页并展示的业务逻辑。

其中可选的，所述分间描述页展示的分间信息包括以下信息中的一种或多种：面积信息、朝向信息、装修信息、窗子类型和家具配置信息。

可以理解为，考虑到用户在查看各分间照片的同时，还会希望了解针对该分间的详细描述信息，如面积信息、朝向信息、装修信息、窗子类型和家具配置信息等。其中装修信息如地板类型、墙面装修、天花板装修等；窗子类型如飘窗、落地窗等；家具配置信息如沙发、床、电脑桌等。

因此本实施例事先配置各分间的分间描述页，分间描述页包含对应分间的分间信息描述。同时，为了对该分间信息页进行同时展示，在展示页面中配置分间描述展示窗口。相应的，在通过滚动视图窗口展示选定分间的照片时，需要在分间描述展示窗口中展示该分间的详细描述信息。本实施例同时构建分间描述展示窗口在对应分间的按钮控件接收到点击触发事件时调用和展示对应分间描述页的业务逻辑。

进一步的，所述实现方法中所述S1的步骤进一步还包括：对所述目标房源的户型图片和各分间对应的分间描述页进行存储；相应的，所述S3的步骤进一步还包括：配置所述展示页面中的户型展示窗口和分间描述展示窗口，并构建用户进入所述展示页面时所述户型展示窗口调用所述户型图片并展示的业务逻辑，以及对应分间按钮控件被触发时所述分间描述展示窗口调用对应分间描述页并展示的业务逻辑。

可以理解为，考虑到用户希望在查看各分间图片和分间描述信息的同时，还希望看到目标房源的户型图片，即希望各分间图片、分间描述信息和户型图片同时展示在同一个页面中，以更直观地了解目标房源情况，本实施例将目标房源的户型图片和各分间对应的分间描述页连同各分间对应的照片一起存入后台存储器。并相应的在展示页面中配置户型展示窗口和分间描述展示窗口。

同时，构建用户进入目标房源的展示页时，通过户型展示窗口调用和展示户型图片的业务逻辑，以及，在选定分间按钮控件接收到用户的点击触发事件时，分间描述展示窗口调用和展示对应分间描述页的业务逻辑。即户型展示窗口调用和展示户型图片的流程以用户进入目标房源的展示页为触发条件，分间描述展示窗口调用和展示对应分间描述页的流程以选定分间按钮控件接收到用户的点击触发事件为触发条件。

进一步的，所述实现方法还包括：对所述户型图片按各分间分区域绘制点击范围，构建各分间对应的点击范围被点击触发时，对应的所述点击范围保持高亮的业务逻辑。

可以理解为，在上述实施例的基础上，考虑到可以使用户在查看户型图片时，直接通过户型图片选择相应的分间进行详细信息和图片的显示，本实施例中目标房源的每间房间都被绘制成一块区域的点击范围。同时构建各点击范围在接收用户的点击事件触发时，被点击的点击范围，即户型图中对应的分间区域被设置为高亮的业务逻辑。例如，在户型图页面中，当点击户型图中的客厅区域时，图中客厅分间被设置为高亮。

进一步的，所述实现方法还包括：构建在对应的所述点击范围保持高亮的同时，所述滚动视图窗口调用对应分间的照片并展示，以及所述分间描述展示窗口调用对应分间的分间描述页并展示的业务逻辑。

可以理解为，根据上述实施例，在用户点击户型图中的对应分间区域时，对应的分间区域会被设置为高亮。为了使用户更清楚的了解该分间的详细图片和描述信息，同时在滚动视图窗口展示对应分间的照片，在分间描述展示窗口中展示对应分间的分间描述页。

本实施例在构建业务逻辑时，除构建点击范围保持高亮的业务逻辑，还构建滚动视图窗口调用并展示对应分间的照片，以及分间描述展示窗口调用并展示对应分间的分间描述页的业务逻辑。即当用户点击户型图中的对应分间区域时，户型图中该区域会高亮，并在滚动视图窗口区域内展示对应户型的相册和对应的分间信息。

本发明实施例提供的一种二维户型展示系统的实现方法，通过把户型图、分间照片及分间信息相结合展示，能够使用户更直观的了解房源信息。

作为本发明实施例的另一方面，本实施例提供一种二维户型展示系统，参考图2，为本发明实施例一种二维户型展示系统的结构示意图，包括：后台存储单元1、展示页面2和逻辑控制单元3，其中，

后台存储单元1用于将目标房源的照片按各分间进行分组存储；展示页面2至少包括按钮控件区域和滚动视图窗口区域，所述按钮控件区域至少包括各分间分别对应的按钮控件，所述滚动视图窗口区域包括滚动视图窗口，所述滚动视图窗口用于当对应分间的所述按钮控件被触发后，调用存储在所述后台存储单元中的对应分间的照片并进行展示；逻辑控制单元3用于控制实现所述展示页面的调用和展示业务逻辑。

可以理解为，本实施例的二维户型展示系统至少由后台存储单元1、展示页面2和逻辑控制单元3构成。其中，后台存储单元1用于存储待展示的图片信息和房源描述信息。后台存储单元1具有调用接口，通过访问该调用接口，可以调用其中存储的数据信息。

展示页面2用于根据相应业务逻辑对需要展示的数据信息进行展示，包括图片信息和房源描述信息等。按不同的展示内容，展示页面2被分为多个区域，包括按钮控件区域和滚动视图窗口区域等。其中的按钮控件区域中包含各分间分别对应的按钮控件，各按钮控件用于接收用户针对各分间的点击触发事件。其中的滚动视图窗口区域中包含滚动视图窗口，滚动视图窗口用于基于用户的点击触发事件，调用并展示后台存储单元中对应分间分组中的照片

逻辑控制单元3中包含本实施例所有的控制逻辑，用于控制实现展示页面的调用和展示业务逻辑等。

进一步的，后台存储单元1具体还用于存储所述目标房源的户型图片和各分间对应的分间描述页；相应的，展示页面2具体还包括户型展示窗口区域和分间描述展示窗口区域，所述户型展示窗口区域包括户型展示窗口，所述户型展示窗口用于在用户进入所述展示页面时，调用所述户型图片并进行展示，所述分间描述展示窗口区域包括分间描述展示窗口，所述分间描述展示窗口用于当所述分间按钮控件被触发后，调用对应的分间描述页并进行展示。

可以理解为，后台存储单元1除对上述目标房源各分间的照片进行存储外，还存储目标房源的户型图片和各分间对应的分间描述页。展示页面2中将各分间图片、分间描述信息和户型图片同时展示在同一个页面中，以更直观地了解目标房源情况。因此，展示页面2中还包括户型展示窗口区域和分间描述展示窗口区域，在户型展示窗口区域展示户型图片，在分间描述展示窗口区域展示对应分间描述信息。

即，当用户进入目标房源的展示页时，通过户型展示窗口调用和展示户型图片；在选定分间按钮控件接收到用户的点击触发事件时，在分间描述展示窗口调用和展示对应分间描述页。

进一步的，所述户型图片包括按各分间分区域绘制的点击范围；相应的，逻辑控制单元3具体还用于，控制在各分间对应的所述点击范围被点击触发后，对应的点击范围保持高亮，和/或，所述滚动视图窗口调用对应分间的照片并进行展示，所述分间描述展示窗口调用对应分间的分间描述页并进行展示。

可以理解为，在上述实施例的基础上，目标房源的每间房间都被绘制成一块区域的点击范围。通过逻辑控制单元3实现各点击范围在接收用户的点击事件触发时，被点击的点击范围，即户型图中对应的分间区域被设置为高亮。同时，逻辑控制单元3还实现在滚动视图窗口展示对应分间的照片，在分间描述展示窗口中展示对应分间的分间描述页。即当用户点击户型图中的对应分间区域时，户型图中该区域会高亮，并在滚动视图窗口区域内展示对应户型的相册和对应的分间信息。

参考图3，为本发明实施例一种展示页面的布局示意图，图中上半部分区域为户型展示窗口区域21，中间区域为按钮控件区域22和分间描述展示窗口区域23，下方部分区域为滚动视图窗口区域24。

户型展示窗口区域21展示目标房源的户型图片。按钮控件区域22展示各分间对应的按钮控件，各按钮控件上用对应分间的名称进行标签标记，同时显示该分间对应的照片数量。分间描述展示窗口区域23显示选定分间的详细描述信息，比如面积信息、朝向信息、装修信息、窗子类型和家具配置信息等信息中的一种或多种。滚动视图窗口区域24滚动显示选定房间的所有照片。

当在按钮控件区域22点击选择某个分间对应的按钮控件，或者在户型展示窗口区域21点击相应的分间区域时，分间描述展示窗口区域23显示该选定分间的详细描述信息，滚动视图窗口区域24滚动显示选定房间的所有照片。滚动视图窗口中可以手动翻页，也可以自动滚动播放。当在户型展示窗口区域21点击相应的分间区域时，户型图中对应的分间区域保持高亮。

本实施例把看房场景中所涉及的三个主要的元素：户型图、房间的照片和房间基本信息进行整合联动，使其在同一个展示系统里同时展示，相互关联，形成一种使用场景犹如亲临现场看房。用户可以清楚的看到目标房源是什么样的户型，每间房间长什么样，每个房间里面的窗户是什么样。

另外，在本发明实施例的基础上，还包括以下控件和功能：

放大镜功能，点击放大镜，浮层上户型图会放大；

分间分类名tab，里面包含目标房源所有分间的房间名称；

分间数据信息，显示相应分间下的具体数据信息；

另外，若朝向无数据时显示“暂无”；窗户无字段时显示“无”；

分间照片，可以无锚点的拖动；

点击户型图分间，户型图相应分间形状高亮，tab平移到该分类，显示该分间数据信息，显示该分间下的照片；

户型分间的入口，点击箭头进入户型分间详情页面；

入口内容，户型图和模块功能说明。

本发明实施例把房源的信息通过户型分间的方式更直观的展示出来，相对以往一张户型图和一推图片的体验有了明显的提升。弥补了看户型图无法了解窗户类型，如是飘窗还是落地窗的缺陷，以及分间信息无法体现整体屋况的缺陷。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种二维户型展示系统的实现方法，其特征在于，包括：

S1，将目标房源的照片按各分间进行分组并存储；

S2，配置各分间在展示页面中对应的按钮控件；

S3，配置所述展示页面中的滚动视图窗口，并构建当所述按钮控件被触发后，所述滚动视图窗口调用对应分组的照片并展示的业务逻辑。

2.根据权利要求1所述的实现方法，其特征在于，所述S1的步骤进一步还包括：对所述目标房源的户型图片和/或详情描述页进行存储；

相应的，所述S2的步骤进一步还包括：对应配置所述目标房源的户型按钮控件和/或详情描述按钮控件；

相应的，所述S3的步骤进一步还包括：对应构建当所述户型按钮控件和/或所述详情描述按钮控件被触发后，所述滚动视图窗口对应调用所述户型图片和/或所述详情描述页并展示的业务逻辑。

3.根据权利要求1或2所述的实现方法，其特征在于，还包括：配置各分间的分间描述页，并配置所述展示页面中的分间描述展示窗口；

相应的，所述S3的步骤进一步还包括：构建所述滚动视图窗口在调用对应分间的照片的同时，所述分间描述展示窗口调用对应分间描述页并展示的业务逻辑。

4.根据权利要求1所述的实现方法，其特征在于，所述S1的步骤进一步还包括：对所述目标房源的户型图片和各分间对应的分间描述页进行存储；

相应的，所述S3的步骤进一步还包括：配置所述展示页面中的户型展示窗口和分间描述展示窗口，并构建用户进入所述展示页面时所述户型展示窗口调用所述户型图片并展示的业务逻辑，以及对应分间按钮控件被触发时所述分间描述展示窗口调用对应分间描述页并展示的业务逻辑。

5.根据权利要求4所述的实现方法，其特征在于，还包括：

对所述户型图片按各分间分区域绘制点击范围，构建各分间对应的点击范围被点击触发时，对应的所述点击范围保持高亮的业务逻辑。

6.根据权利要求5所述的实现方法，其特征在于，还包括：构建在对应的所述点击范围保持高亮的同时，所述滚动视图窗口调用对应分间的照片并展示，以及所述分间描述展示窗口调用对应分间的分间描述页并展示的业务逻辑。

7.根据权利要求6所述的实现方法，其特征在于，所述分间描述页展示的分间信息包括以下信息中的一种或多种：

面积信息、朝向信息、装修信息、窗子类型和家具配置信息。

8.一种二维户型展示系统，其特征在于，包括：

后台存储单元，用于将目标房源的照片按各分间进行分组存储；

展示页面，所述展示页面至少包括按钮控件区域和滚动视图窗口区域，所述按钮控件区域至少包括各分间分别对应的按钮控件，所述滚动视图窗口区域包括滚动视图窗口，所述滚动视图窗口用于当对应分间的所述按钮控件被触发后，调用存储在所述后台存储单元中的对应分间的照片并进行展示；

逻辑控制单元，用于控制实现所述展示页面的调用和展示业务逻辑。

9.根据权利要求8所述的系统，其特征在于，所述后台存储单元具体还用于存储所述目标房源的户型图片和各分间对应的分间描述页；

相应的，所述展示页面具体还包括：户型展示窗口区域和分间描述展示窗口区域，所述户型展示窗口区域包括户型展示窗口，所述户型展示窗口用于在用户进入所述展示页面时，调用所述户型图片并进行展示，所述分间描述展示窗口区域包括分间描述展示窗口，所述分间描述展示窗口用于当所述分间按钮控件被触发后，调用对应的分间描述页并进行展示。

10.根据权利要求9所述的系统，其特征在于，所述户型图片包括按各分间分区域绘制的点击范围；

相应的，所述逻辑控制单元具体还用于，控制在各分间对应的所述点击范围被点击触发后，对应的点击范围保持高亮，和/或，所述滚动视图窗口调用对应分间的照片并进行展示，所述分间描述展示窗口调用对应分间的分间描述页并进行展示。