人机交互作业 页面设计

图形用户界面与人机交互方式结课作业

题目：房产中介公司的数据库系统

班级：计算机2011-3班

学号：

姓名：

时间：2013年11月28号

目录

1、设计题目14..............................................................................................................................................................3

1.1房产中介公司的数据库系统（题目等级30）................................................................3

2、房产中介公司首页................................................4

3、房产中介公司注册页..............................................5

4、提示注册成功页面................................................6

5、个人修改页面....................................................7

6、房产中介公司介绍................................................8

7、房产中介公司售房信息展示........................................9

8、用户发布的详细售房信息.........................................10

9、房产中介公司的租赁页面.........................................11

10、房产中介公司的咨询页面........................................12

11、房产中介公司的商务信息........................................13

12、个人总结......................................................14

1、设计题目14

1.1房产中介公司的数据库系统（题目等级30）

行业简介：房产中介如今一个非常热门的行业，越来越多的人出售，出租房

子，也有越来越多的人需要买二手房，求租，合租房子。所以所需要的和处理的

信息量非常，如果以传统方式处理这些信息非常烦琐，不但速度慢，容易出错，

而且还要大量的人力，才力。这样在很大程度上限制了这个企业的发展。因此我

们为房产中介公司设计一个数据库系统。

公司背景：公司经营范围：房产买卖、租赁中介、咨询服务、商务信息咨询

等

在此数据库主要提供两类信息：房源信息和客户信息。把房源信息和客户对

房屋的要求做比较，以此找出客户所需求的房子，方便管理。我们也可以让用户

直接在网上查询所需要的信息，让用户以最快速度找到自己所需要的最新的信

息。

2、房产中介公司首页

首页|公司介绍|房产买卖|租赁中介|咨询信息|商务信息

联系宝后|唐居-褶意th并且信，耙泰而彳詈总

传房付息1出租_件1率组信息］

存月网1

住房信，包2出租L信息2求组信息2

客月艮2

售房信昌3出程"言,$^3求组修息3

田月度3住房彳营，包^4出海3言

,&4求组信息4

图1

如图1为我设计的房产中介公司首页，我取名为信用房产。此页面采用蓝色

为主色调，导航条采用蓝底白字。白色的字体更突出了这个网页的导航功能，而

下面的内容采用黑色字体。在页面的中间，添加一些最新的房产信息，把他放在

中间更醒目，让浏览者可以更快的了解最新的信息。我把登陆信息放在了右边，

这样不会占用很大的页面空间，但是可以放浏览者可以很方便的注册为本网站的

会员。

3、房产中介公司注册页

■a..底E

首页I公司介绍I房产买卖I租赁中介I咨询信息I商务信息

管厕房/、账户注册

用户名：［手机号"

密码：［邮箱J

确认密码"主是交I重置

版权

图2

图2为房产中介公司的注册页。本页面采用了两种控件,文本框和提交按钮。

4、提示注册成功页面

首页|公司介绍|房产买卖|租赁中介|咨询信息|商务信息

用户W二**退出

注册成功！

1、恭喜您成为我们的VIP用户

2、请返回继续浏览房产信息

3、谢谢您对我们的支持

板权

图3

图3为提示用户注册成功页面，如果用户注册失败，则会显示为"注册失败,

返回首页”的超链接。显示用户名和退出的区域我放在了导航条的右下方。在这

里不会占用空间，也可以让用户很方便了解自己的登陆情况。

5、个人修改页面

但危房号

首页|公司介绍|房产买卖|租赁中介|咨询信息|商务信息

用户名：**

用户名：厂

联系方式：****

个性签名密用：「

邮箱：L

确定I重置|

版权

图4

图4为房产中介公司会员个人信息修改页面。在这个页面，会员可以查看自

己填写的所有个人信息，同时还可以进行修改。我还添加了重置按钮，方便用户

使用。

6、房产中介公司介绍

信层宸岸

租赁中介I商务信息

售房部

出租部

租房部

客服部

板权

图5

图5为房产中介公司的简介。页面中间显示了房产行业的介绍，还用公司的

经营范围。页面左侧展示了房产中介公司的各个部门。右侧显示了公司办公每部

的实景，让浏览者更多的了解公司的情况。

7、房产中介公司售房信息展示

信局宸睁

_______\\

一■■■*■

首页I公司介绍I房产买卖租赁中介I咨询信息I商务信息

黄页一房产实麦

房屋信息」房屋类型Jd介■田发布时间

不限V

添加房屋相片|普通住宅

用）10.5万2013.11.27

••商住两用

出售价格JV”公里

10.5万

孱屋面板r用/别器2013.11.27

地段：L

10.5万2013.11.27

百已去：r一

上一页123。56789101112下一页

板权

图6

图6为房产中介公司的售房页面。在这个页面，用户可以浏览售房信息，也

可以发布自己的售房信息。页面左侧用户发布售房信息的区域，用户可以添加自

己房屋的照片，房屋的大小情况。页面中间为其他用户发布的售房信息，在上面,

我添加了一个导航条，在导航条上，方便用户选择售房信息。页面右侧添加了最

新的售房信息。出租和求租的页面和图6类似。

8、用户发布的详细售房信息

僧屋宸声

首页|公司介绍|房产买卖|租赁中介|咨询信息|商务信息

用户名：**退出

此处为施.的册

房屋描述：

itwassr第一张

用户名：**麻觥：翻跳ttf釉辅第二张

联系方式：****啕嬲

房屋售价：10.5万

第三张

板权

图7

图7为房产中介公司注册的会员发布的售房详细信息，此页面是用户在图6

中间售房信息中点击任意一条的后出来的页面，此页面分为左右两部分，左边为

发布房屋信息的用户和自己房屋的实际情况，而右边提供了用户所要销售的房屋

的更多实景图片。

9、房产中介公司的租赁页面

首页|公司介绍|房产买卖|租赁中介|咨询信息|商务信息

用户名：**退出

首页-租赁中介

符合条件的出租信息

用户名：**房屋信息一PF7L价格发布时间I

.普通住宅

联系方式：****用?商住两用

360/月2013.11.27

联系为里*

婚否：否别笈

用户名：**

柱格：内向取业：学生360/月2013.11.27

联系方式：****

租房要求：环境优雅，干净整洁

・上一页口下一支

单身公寓。12356789101112

版权

图8

图8为用户发布的租赁页面。左侧是用户发布的求租信息和用户的资料，右

侧为根据用户情况检索出来的相关出租信息。

10、房产中介公司的咨询页面

首页|公司介绍|房产买卖|租赁中介|咨询信息|商务信息

用户名：**退出

首页—一咨询信息

用户名：**

您选择的服务：r售房r出租「租房

给我们前言:谢谢您对我们的支持

版权

图9

图9为房产中介公司的客服页面。在这里用户可以选择自己相应的情况来选

择售房、出租还是租房。通过给客服留言和房产中介公司沟通。