4000-888-103

资讯动态设计沉思录|58App全新租房首页改版资讯详情

设计沉思录|58App全新租房首页改版

2019-12-06 14:43:27

 

58App租房新版首页

 

58租房业务最近上线了安选房源线上交订金在线签约等功能,而租房首页作为流量分发的上级页面,在给用户提供更好的找房路径的同时,也同样作为新功能的介绍宣传以及活动宣传的窗口。旧版首页在不断做加法以后,单一的页面结构形式已经无法满足新业务的需要。这次全新改版主要目的是将功能结构进行整合,并且探索新的产品设计风格,让信息架构和视觉展示更加合理,让用户能眼前一亮,能多维度找到自己心满意足的房源信息。同时,也让58租房的用户知晓全新的功能及其用户体验上的升级。

 

产品目标 

在产品和交互同学的配合下,我们逐渐梳理出本次改版的设计目标:

· 缩短找房路径,提供更多的找房途径 

 

租房首页作为流量分发的上级页面,应该帮助用户快速流向目标页面,对比旧版首页,新版首页丰富了找房形式,根据个性化推荐更优质的房源,让用户能快速准确的触达房源信息。

 

· 用户重要信息、任务操作给出明确引导

在对于进行中的任务,如定金流程,签约等,将定义为首屏可见的特殊模块。

 

· 让页面灵活可配置,增强不同等级的运营活动支持能力

运营的活动划分等级,页面结构灵活,结合用户行为让页面更加灵活可配,满足日常以及重大活动的运营需求。

 

· 产品能力的宣传

除了实用的功能之外,首页也承载着品牌传播和产品能力宣传的用途,更加新颖巧妙的方式,传达给租房用户,知晓58租房功能更丰富,和体验不断提升的认知。

涉及敏感信息,故模糊化处理

 

视觉目标 

与产品交互同学在产品目标上表达成一致后,视觉的目标也逐渐清晰:

1.租房产品调性的视觉烘托

2.调整页面节奏

3.加强核心功能的引导

4.缩短找房路径,提升找房效率

5.传递产品价值,丰富用户体验

 

      改版前                                                                                                            改版后

 

· 确立页面风格调性

在设计进行之前我们对新的首页风格展开了一些探索和思考,为了把握全新首页的设计质量,租房team抽调了多名优秀的设计师加入到此次项目里来,在视觉探索阶段,我们分成了创新,保守,激进的方向对新的首页进行了风格的探索,这样的方法有助于我们比较更多符合首页信息展示的方法从中推导出更符合首页设计的方案,同时也能创造出更多的可能性。给用户更加新颖的视觉体验。最终我们定义了以温馨的头部图片烘托页面气氛,icon采用图形重叠的方式,利用高饱和度的颜色渐变,展现了主入口的全新风格。

激进的孟菲斯风格

 

运用重叠简化的延续

 

最终确立风格

 

· 调整页面节奏

加大功能入口的占比,打通了顶部banner区域。能吸引用户对关键信息的关注度,主标题和副标题在每个模块中的插入在丰富页面信息的同时让页面充满节奏并且更加统一。横向卡片的布局也能更加突出产品的核心内容。

新的页面节奏与布局

 

· 加强核心功能的引导

搜索从顶部放到banner图片的下方,更为突出的展现形式引导用户搜索。

 

卡片式运用使结构更加灵活 。 在租房业务里预定和在线签约的提示在大类页中是一个比较特殊的功能,此功能需要用户第一时间进行操作处理,首屏的卡片式展示能第一时间告知引导用户,同时灵活可配的卡片式结构也能让大类页在没有操作提示时保证页面的统一性。

 

动画效果引导用户关注,提升地图模块的点击率。

 

· 提供更多的找房途径,提升找房效率

为了缩短用户的找房路径,并且提升找房效率,我们在多个位置进行了优化,新加入的安选房源、公寓馆和直播看房模块也为用户提供了更多根据用户行为更匹配用户的高质量房源,为用户提供更为优质的房源参考。猜你喜欢模块添加了筛选项,能让用户更快捷的找到根据用户喜好和行为推送的房源。

 

 

· 传递产品价值,丰富用户体验

我们集中把线上交订金,在线签约,实名认证等新的服务展示给用户,传递给用户产品的全新体验和价值。

 

 

新上线的租房福利搬家,保洁,维修等功能能完善租房体验,为用户创造品质居住生活,完善58生活服务的生态圈。

 

总结 

新版首页已达到预期效果,为用户打造一个更好用的租房平台需要不停的打磨产品的每一个细节。接下来我们的团队也会不断的努力,提升产品的用户体验,给用户展现一个更好用的租房平台。

 

 

关键词:微信h5是什么意思 h5制作网站 h5页面怎么设计

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png