导语：租房是58条重要业务线之一，个人住房在租房业务线上具有绝对的流量优势，为租房提供源源不断的动力。帮助个人房东高效管理房屋，降低管理成本，是提升房东用户体验的方式之一。围绕这个目标，设计团队对房管系统进行了修改和重构，希望房东在租房前、租房中、租房后都能有更顺畅的体验。以下是设计思路和最终设计方案。

01 梳理架构-寻找目标

在修订之前，物业管理只是作为租赁物业过程中的一个阶段。房东把物业放出来上架后，就可以管理物业了。这时，物业管理被称为狭义管理。

就房东而言，房屋只有三种状态：“不出租/找租客/出租出去”。基于此，我们找到了突破点，将管理的概念泛化为“租前、租中、租后”，从房东的角度对房屋全生命周期进行管理，使房屋管理更加扁平化。

02 根据目标-确认整合内容

因为楼主处于不同的状态，所以不同阶段所表达的所有任务的侧重点都需要有所区别。需要整合不同类型的任务，楼主必须做的，可能会做的，平台希望楼主根据楼主的不同时期去做。

03 内容呈现-清晰自然的视觉落地

让不同租赁阶段的物业管理页面有相同的视觉表达，在熟悉的页面上操作，可以增加完成任务的信心；保证所有管理页面的一致性，可以降低楼主的认知成本。在不同的租房阶段，房东的顾虑是不同的。如何让不同阶段的物业管理页面保持一致？

我们的方式是将不同的任务模块化，像构建块一样设计，用相同的方式表达相同类型的功能，然后根据页面的需求，将它们适配到所需的界面。我们整理了租前、租中、租后的管理内容，并展示了每一项内容。

所有模块统一后，需要测试管理页面的适配性。最后通过透顶插图和文字相结合的方式显示房屋状态，使所有页面具有共同的色调，其他模块采用圆角卡片处理，模块之间和模块内部间距均匀。

整个节奏由无标题栏的沉浸式设计统一，间距在小卡片上闭合，保证视觉上的呼吸感和连贯性。

减少单页模块化带来的碎片感

每个模块的固定显示可以保持它们的一致性，但是在租赁的每个过程中，每个阶段要完成的主要任务是不同的，例如：

在租用case1:之前，在挂牌发布之后，为了保证挂牌的真实性，我们要求房东在上架之前通过挂牌认证。楼主的主要任务是提醒楼主认证；

如何选择更合理的方式引导用户将每个页面做到“合而不同”？

对每种状态下的页面逐个分析，我们将每个页面中所有任务模块按优先级排序：主线内容>辅线内容>附加值内容。

如租前，主线任务是提醒房东此时最需要做的事情是认证房源，在头部状态上，不仅有与租中/租后相同的房源当前状态提示，还增加了任务节点，让房东明确的知晓当前所处位置，加强对于整体房源上架流程透传，明确当前主线任务的重要性。

租前页面管理页面设计上，默认“确认个人信息”模块展开，做认证前最后的信息确认工作，同时也保证了在首屏内容足够简洁清晰，保证主线任务顺利进行。

提升页面精致感

提升页面精致感，可以在用户的潜意识中留下更优质的体验印象，也是视觉设计师提升设计稿质量的有效方式。优雅舒适的色彩和插图、恰到好处的模块修饰、增加微动效等都可以提升页面的精致感。

优雅舒适的色彩和配图：色彩可以简单直接的传达感受，不同色彩传达的内容不同。可以根据房东对于出租各阶段的感知不同，选取不同的色彩搭配传达信息。

我们结合58app的主色橙色进行合适的颜色搭配，最终选取了橙色、绿色、灰色、金色分别表现租前、普通房东的租中、金牌房东的租中、租后管理页面。沉浸式的无标题栏设计，通顶的颜色中增加表现对应阶段的小插图，辅助传达信息，使页面更加活泼。

恰到好处的模块修饰

对不同功能模块选取恰到好处的修饰，可以对模块增加视觉吸引力，增强内容表现力。

在租中房源数据模块，在模块背景增加了曲线图，用以表现此处的数据效果；在加速出租模块，右上角增加了向上箭头，用以表现此处所内容均可带来加速效果；房源转委托模块，用了真实专业的中介形象，且中介形象超出模块区域，打破了布局约束，让页面更灵动透气。

增加微动效

过渡内容增加微动效，可以使页面更柔和；重点内容增加微动效，可提升信息层级，提高销量。微动效能够给页面带来活力。在房源管理详情页的设计中，也分别在不同的地方使用了微动效。

在沉浸式无标题栏上滑时，增加微动效，使内容和顶部的插画元素过渡不突兀；打开租中页面时，对每日房源数据数字用滚动效果呈现，增加视觉吸引力；若当前房源有预约看房订单时，在icon上方增加数字提醒的同时，对icon增加缩放+流光效果。

04 最后

此次房源管理详情页是从管理的架构出发，进行管理概念和页面重构的改版，未来我们会对改版效果进行一系列测试，有结论会继续和大家分享，如有任何问题，欢迎在留言区互动～

作者：邵秀芬，UI设计师

本文来源于人人都是产品经理合作媒体@58用户体验设计中心

题图来自Unsplash，基于CC0协议