房屋中介网站用户界面分析报告研讨(ppt 48页).ppt

,房屋中介网站用户界面分析报告,1.,房屋中介公司网站搜集,2.,3.,国内,国外,1.,2.,4.,首页,Trulia的首页分为三大区域：1.搜索栏。2.最新房源信息。3.trulia网页的推荐重要模块。（trulia抵押中心、在iphone上的trulia软体，在线问答。）,1,2,3,Trulia首页颜色：主色白色、灰色、草绿色、中黄色。搭配起来给人一种很亲近自然的感觉。白色占页面的70%,会显得整个页面很干净整洁。为了强调搜索栏的重要性。搜索栏的背景色选择草绿色。使用户进入网站，视线直接被牵引过来。,Trulia首页布局：简洁明确。用矩形模块分出几个功能区域。,首页搜索栏,Trulia搜索栏：用按钮切换的形式分类买房、租房、最近销售房源。而且除了地点搜索外，还提供了价位、房屋类型、卧房数量、浴室数量、占据面积的细节搜索。让用户以最快的时间选出自己要的房源。,这种按钮切换形式可以借鉴.,点击进入更多功能搜索页面,Trulia更多功能搜索页面：1.背景色为淡绿的导航，突出醒目。视觉上突出买房搜索和租房搜索。,买房列表页,Trulia的买房列表页首要为四大区域：1.高级搜索栏。2.房源信息列表图。3.Trulia搜索区域地图。4.Trulia推荐模块（资源中心、在线问答）。,1,2,3,4,Trulia买房列表页颜色：与trulia首页色彩风格一致。左边的高级搜索栏固然重要，但是房源列表图更为重要，所以搜索栏选择灰色为背景色。强调的同时也不会抢去房源列表图的关注度。,Trulia买房列表布局：简洁明确。用左、中、右三栏。视线一般会集中在页面中间部分，所以把房源信息类表图放在中间。凸显其重要性。,把房源尽可能的多展示，放在突出的位置，我们可以借鉴。增加用户关注度度，提高房源点击率。,买房列表页高级搜索栏,Trulia高级搜索栏：包括地点、离地点几公里之内、价格（价格最大最小）、卧室数量、浴室数量、房屋可观看的时间（所有日期开放、今天开放、这周开放、未来七天开放、最近价格下降房屋）、房屋类型、房屋占据面积大小。更多信息搜索：关键字、建筑年份、价格范围。,高级搜索列表我们可以借鉴，让用户尽快找到满意房源。Ps：离地点几公里这个选项很人性化。,买房房源详细页,Trulia的首页首要分为十四个区域：1.房源基本信息。2.联系经纪人。3.列表信息。4.公开记录。5.财产税。6.历史价格。7.可能感兴趣房源。,1,2,3,4,5,6,7,买房房源详细页,8,9,10,11,12,13,14,Trulia的首页首要分为十四个区域：8.对周边评价（整洁、交通、可走性、宠物友好）.9.房屋价格的趋势。10.地图展示(分为地图、街道、卫星、三维)。11.周边学校列表（小学、初中、高中）。12.发邮件给经纪人。13.按兴趣的其他房源.14.在线提问。,Trulia买房列表布局：简洁明确。用左、右分类。左边三分之二，全面的介绍房屋信息和周边信息。右边三分之一都是让用户与经纪人交互，或是以网站交互（在线提问）。,买房房源详细页-房源基本信息,Trulia房源基本信息：用按钮切换的形式展现房源信息。其中包括房源实况、房源照片、地图和附近设施查找、抵押、比较个案、价格趋势、周边学校）用尽可能全面的描述这个房源。,买房房源详细页-点击联系经济人弹出页面,Trulia联系经纪人弹出页面：上面勾选所需要的经纪人。填写自己的姓名和联系方式、要求，发送到经纪人邮箱。,Trulia联系经纪人弹出页面颜色：边框是网站同一颜色的草绿色，与下面的页面脱离开。边框里是白色的背景，清晰的衬托出弹出页面的信息。视觉效果很清爽干净。,经纪人列表页,Trulia的经纪人列表页首要分为四个区域：1.搜索栏(地点、分类经纪人、姓名关键字)2.首要城市选择。3.经纪人列表信息。4.在线问答。,1,2,3,4,经纪人详细页,1,2,3,4,5,Trulia的经纪人详细页首要分为五个区域：1.经纪人详细信息。2.经纪人手中房源。3.经纪人最新在线答复。4.经纪人最新博客。5.联系经纪人。让用户全方位了解经纪人，建立良好印象。有助于提升经纪人卖房成交率。,经纪人最新在线答复可以借鉴，从这里可经纪人可以找到新客户。,经纪人详细页-经纪人详细信息,Trulia经纪人详细信息：内容包括经纪人照片、联系方式（邮件和电话）、经纪人个人名言、个人简历、经纪人房源列表、经纪人在线问答记录、经纪人博客、经纪人级别。这个经纪人点击率。,经纪人被点击次数展示可以借鉴，增加用户对经纪人的信任度。也算是一个经纪人的级别划分。,建议列表页,Trulia建议列表页：1.用户反馈和交流的很好平台。2.用按钮切换和区域模块划分为在线问答、浏览部落格、阅读指南三个部分。3.列表中每个帖子右端都标有现在有几条回复。,3.,首页,zillow首页首要特色：1.一屏页面。把首要功能区域放在一个页面中。清晰明了。,1,zillow首页颜色：1.蓝色为主色系。显示出一种沉稳内敛的感觉，沉稳可靠符合企业形象。2.用草绿色和橘黄色做点缀，增加网页的活力。,zillow首页布局：1.用矩形模块的形式分布首要功能，清晰明了。虽然只有一个屏幕的页面，麻雀虽小，五脏俱全。,买房列表页,zillow的买房列表页首要为三大区域：1.高级搜索栏。2.房源信息列表图。3.zillow推荐功能模块。,zillow买房列表页颜色：白灰色为首，点缀蓝色和橙色，让页面色彩活跃。详情用纯度比较高的蓝色按钮，吸引用户点击，提升房源点击率。,zillow买房列表布局：与Trulia布局类似。但是中间详细列表页部分的比例更大。尽可能的展现房源。,1,2,3,买房房源详细页,zillow的买房房源详细页：1.房源的基本内容2.全面MAP搜索（周边设施、价格趋势等)3.首推的几个功能模块（联系经纪人、可能喜欢的房源，相似的价格售房）,买房房源详细页-MAP全面搜索,全面MAP搜索：1.各种价格趋势搜索2.周边设施查找。计算出开车到达的时间、距离等。,经纪人信息页,zillow经纪人详细页划分：1.经纪人级别区域2.经纪人基本详情3.联系经纪人4.经纪人手中的房源。,经纪人级别划分可以借鉴，增加用户对经纪人的信任度。,1,2,3,4,首页,三井首页主要特色：1.首页功能全面，页面颜色鲜艳夺目。,三井首页颜色：1.红色为主色系。配上相关的暖色系：橙色和肉色。整个页面的视觉冲击力增强。,三井首页布局：1.用矩形划分功能区域。2.用红色的边框，虽然清晰夺目。但是放在一起感觉十分拥挤。,房源详细页,三井的买房房源详细页：1.首要房源信息（地址、交通）两个大红色按钮突出“询问合同”和与“经纪人预约时间”.2.房源的基本内容3.大图（户型图和房源图片）图片质量很好。,房源详细页房源首要信息,三井的买房房源详细页首要信息：1.地址2.交通3.两个大红色按钮突出“询问合同”和与“经纪人预约时间”.增加用户点进击去的几率。,房源详细页房源图,三井的买房房源详细页房源图1.图片清晰，视角好。2.点击图片弹出大图。交互性能更好。图片更加清晰。,房源详细页房源信息表格,三井的买房房源详细页房源信息表1.表格显得房源内容清晰明了。2.用户浏览时，方便获取所需信息。,页面中细节图,三井的页面中细节图1.店长介绍后面就是店面图片icon。2.优秀经纪人后面就是企业徽章，更能凸显企业文化。3.从图片上进一步区分经纪人和店长。,realestate首页主要特色：1.搜索栏。不同的类别，鼠标滑动时，出现不容的颜色（买房-红色租房-蓝色等）.,realestate首页颜色：1.红色为主色系。整个页面的视觉冲击力增强。,realestate首页布局：1.上下两部分。上部分为搜索栏。下部分为网站主推模块。,首页,首页-搜索栏,realestate首页-搜索栏1.鼠标滑动显示彩色切换按钮，划分买房、租房、新房、分享、寻找经纪人、销售价格、退休这几个部分。2.搜索栏中每个类别都分为左右两个部分，左边是MAP区域搜索，右边是文字搜索。3.搜索栏在屏幕三分之二以上，视觉中心最集中的位置。并且搜索栏宽度与页面宽度一致。从位置和面积上都凸显搜索栏的重要性.4.搜索栏中的按钮，地图制作风格是立体的水晶效果。凸显整个页面的品质。,房源列表页,realestate房源列表页：1.布局大体上与trulia和zillow一致.左为高级搜索栏，中间为房源列表，右边为地图搜索。2.亮点是房源列表展现的形式可转换。类别包括列表、地图、图片画廊、开放时间。,房源列表页-MAP形式,realestate房源列表页-开放时间：1.布局左边是搜索栏，中间是房源列表，右边是按月份区分的房源列表包括了房源信息、可看房时间、价格。,房源列表页-画廊形式,realestate房源列表页-画廊形式：1.主要呈现形式是房源图片。2.在每个房源图片的右下角，标注【当前页数】/【总页数】、向左按键、向右按钮。在列表也中就可以观看多款房源图片。,房源列表页-开放时间形式,realestate房源列表页-开放时间：1.布局左边是搜索栏。右边是按月份区分的房源列表包括了房源信息、可看房时间、价格。,乐屋首页主要特色：1.功能齐全，有关房屋买卖、租赁、装修等一系列房屋信息。,乐屋首页颜色：1.颜色过多。超过三种以上，显得凌乱。,乐屋首页布局：1.用矩形划分功能区域。2.功能区域过多。分布没有规划，浏览起来眼花缭乱。,首页,首页细节,乐屋页面中细节1.首页显示待出租出售物件数和已成交房屋数字。2.每个类别下面都写有房屋数字。（例：房屋出售337,375件）3.Icon、banner、button制作的都很精致，可爱。,房源列表页,乐屋房源列表1.布局，左边是搜索栏，右边是房源列表.2.搜索栏的折叠形式。节省空间且分门别类。,首页,永庆首页主要特色：1.分布明确，上面为功能区。下面为房源区。2.尽可能展现房源信息，增加房源点击率。,永庆首页颜色：1.橙黄为首色，做了一个明度的渐变。搭配红色。给人暖暖的感觉。,永庆首页布局：1.分布明确，上面为功能区。下面为房源区。,首页地铁房功能,地铁房：1.分线路找房。（一号线、二号线、等）2.鼠标划过不同的bottom，显示不同的颜色