人机交互作业页面设计.docx

人机交互作业页面设计.docx

《人机交互作业页面设计.docx》由会员分享，可在线阅读，更多相关《人机交互作业页面设计.docx（11页珍藏版）》请在冰豆网上搜索。

人机交互作业页面设计

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

题目：

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

班级：

计算机2011-3班

学号：

姓名：

时间：

2013年11月28号

1、设计题目14

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

行业简介：

房产中介如今一个非常热门的行业，越来越多的人出售，出租房子，也有越来越多的人需要买二手房，求租，合租房子。

所以所需要的和处理的信息量非常，如果以传统方式处理这些信息非常烦琐，不但速度慢，容易出错，而且还要大量的人力，才力。

这样在很大程度上限制了这个企业的发展。

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

公司背景：

公司经营范围：

房产买卖、租赁中介、咨询服务、商务信息咨询等

在此数据库主要提供两类信息：

房源信息和客户信息。

把房源信息和客户对房屋的要求做比较，以此找出客户所需求的房子，方便管理。

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

2、房产中介公司首页

图1

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

此页面采用蓝色为主色调，导航条采用蓝底白字。

白色的字体更突出了这个网页的导航功能，而下面的内容采用黑色字体。

在页面的中间，添加一些最新的房产信息，把他放在中间更醒目，让浏览者可以更快的了解最新的信息。

我把登陆信息放在了右边，这样不会占用很大的页面空间，但是可以放浏览者可以很方便的注册为本网站的会员。

3、房产中介公司注册页

图2

图2为房产中介公司的注册页。

本页面采用了两种控件，文本框和提交按钮。

4、提示注册成功页面

图3

图3为提示用户注册成功页面，如果用户注册失败，则会显示为“注册失败，返回首页”的超链接。

显示用户名和退出的区域我放在了导航条的右下方。

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

5、个人修改页面

图4

图4为房产中介公司会员个人信息修改页面。

在这个页面，会员可以查看自己填写的所有个人信息，同时还可以进行修改。

我还添加了重置按钮，方便用户使用。

6、房产中介公司介绍

图5

图5为房产中介公司的简介。

页面中间显示了房产行业的介绍，还用公司的经营范围。

页面左侧展示了房产中介公司的各个部门。

右侧显示了公司办公每部的实景，让浏览者更多的了解公司的情况。

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

图6

图6为房产中介公司的售房页面。

在这个页面，用户可以浏览售房信息，也可以发布自己的售房信息。

页面左侧用户发布售房信息的区域，用户可以添加自己房屋的照片，房屋的大小情况。

页面中间为其他用户发布的售房信息，在上面，我添加了一个导航条，在导航条上，方便用户选择售房信息。

页面右侧添加了最新的售房信息。

出租和求租的页面和图6类似。

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

图7

图7为房产中介公司注册的会员发布的售房详细信息，此页面是用户在图6中间售房信息中点击任意一条的后出来的页面，此页面分为左右两部分，左边为发布房屋信息的用户和自己房屋的实际情况，而右边提供了用户所要销售的房屋的更多实景图片。

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

图8

图8为用户发布的租赁页面。

左侧是用户发布的求租信息和用户的资料，右侧为根据用户情况检索出来的相关出租信息。

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

图9

图9为房产中介公司的客服页面。

在这里用户可以选择自己相应的情况来选择售房、出租还是租房。

通过给客服留言和房产中介公司沟通。

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

图10

图10为房产中介公司的商务信息页面。

本页面提供了各种链接到与房屋有关的服务。

12、个人总结

通过制作房产中介公司的网页，我学会了如何选择色彩的搭配和设计过程中的思想，我也能够更熟练地使用Photoshop软件的使用。

做网页过程中，我参考了很多设计网站，看了很多别人设计好的网页。

同时我也参考了淘宝网等购物网站，最终做出了房产中介公司网页的雏形。