设计沉思录｜58同城部落的设计点滴【百科全说】

项目背景

同城部落作为58同城平台全新功能模块之一，有着平台用户需求目标性强且具有群体性的特征，它是将相同兴趣、目的和地理位置的用户聚集到一起形成的交流平台，用户可以在这里更容易找到共同目标，促进用户之间的交流与沟通，从而撮合用户的共有需求，在用户的沟通过程中通过明确主题与形式的引导，产生有价值的内容来辅助用户决策，增加用户粘性，并逐渐形成用户层级及更立体的用户。对于一个社区，这是一个很重要的前提，意味着这个平台能给对某类事情感兴趣的人找到一个有价值的交流场所。

同城部落目前涵盖了招聘和房产两个业务功能，同时由此又发散出一些强相关的不同主题和内容，包括话题、讨论、发布等用户进行社交的功能。

设计思路

· 设计思维解密

在设计初期，首先需要用系统性设计思维去思考，这个方法分为业务、体验和品牌三个方向，同时也是设计中比较容易有所突破的地方，它强调从整体出发，先综合，后分析，再综合的思维模式。

因为同城部落的主要入口在首页腰部位置，而在首页的头部已经有比较强的品牌露出的展示——10个入口图标，所以在这个项目中更多的是需要思考业务和体验两个方向，通过这两个方向来寻求设计上的一些突破点。

· 用户需求分析

58同城部落的目标用户年龄集中在19-30岁，并且以蓝领阶层为主，占整个年龄段的近八成。而这个年龄段的人群面临着刚毕业需要找工作，或者是去外地打工，需要租房，由于身处异地社交圈窄，迫切需要稳定生活、交友等等，因此我们得出了以下关键词：

通过把这些关键词分为两类，一个是对物质追求上面的需求，另一个就是情感共鸣上的需求，由这两个点依次细分为效率高、品类多、分类准、互动强，通过这四点分别对应着设计目标——提高设计一致性，提升体验与效率，以及增强页面设计活力；产品目标——促使人与人之间更快达成“交易”和丰富平台内容，提高留存率。

在入口页增强了内容的扩展性和强化了入口分类，由于同城部落目前只涵盖房产和招聘两个内容，在统一颜色背景上如何更好的区分不同属性的内容呢？就需要在内容上做些区别，招聘是与人相关的，房产是与地理位置相关的，因此，分别用“头像”和“坐标”的图形元素来表示跟人相关的招聘和跟地理位置相关的房产，让用户能第一时间感知并快速找到自己的需求目标。

首先需要思考的是如何与整体58同城平台的页面相融合，并且页面整体设计基调能保持一致，因此，在部落卡片颜色上舍弃了高亮与高饱和度的颜色，用浅灰色作为背景颜色，与整个页面能更协调，并且能在视觉效果上突出上面图标入口内容，从而产生自上而下的阅读习惯，与下面其他模块内容也能相呼应。

同时，在这两种类型的图标颜色上延续了58Logo的四种品牌色——蓝、红、橘、绿，并对这四种颜色进行轮换的形式。为了不使图标在整体页面中显得突兀，因此在品牌色基础上适度降低了颜色饱和度，这样就衍生出了8种不同组合状态，并且与顶部轮播图标的颜色相呼应，又能给用户一种强感知的视觉体验。通过这种形式可以在同样颜色背景上避免对不同内容产生混淆，更容易让用户通过形状来加深和巩固记忆，更快速高效达到目标。

· 详情页排版节奏把控

进入详情页后，整个页面分为上下两个层级：分类信息区和信息内容区。分类信息区是商圈名或具体职业信息的展示地方，并且也有着个人的一些操作内容，如自己发布和回复的帖子入口、消息提醒以及切换商圈等；信息内容区则是用户积极讨论的区域，由于信息量很大，如何更好的将信息归纳和分类成了这部分最关键的部分。

由于同城部落整体属于社区性质，文字信息较多，因此在字号上不能太小，以免对用户造成识别干扰。在用户讨论上做了三个层次，首先为标题，也是用户最关心和最先看到的内容，因此这部分文字内容需要着重突出；第二则是正文内容，属于标题的附属信息，所以这部分需要稍弱化于标题，但是也要在用户可视范围内；第三则是辅助信息，包括用户id、浏览历史、时间、回贴量等，这部分是附带信息，在用户迫切想得到目标信息时需要把这部分内容做出退让，由于这部分内容不能进行操作，所以需要弱化于标题和正文信息。在这部分内容之间会穿插些话题卡片，既能为产品导量，让用户对自己感兴趣的话题有参与感，又能缓解信息过于密集的现状，让用户在浏览信息期间能有节奏的阅读，不会过于枯燥。

底部button用大圆角矩形代替以往拉通的长方形形式，增加友好型，促使用户点击，并且由于长期置底，在视觉层面上可以显得更通透，并且对底部内容也不会全部遮挡。

思考与总结

同城部落最终目标是让用户在58除了找工作找房子之外，还希望通过它能拉近用户之间的距离，让用户之间无缝联系，在这个信息内容至上的年代，通过此产品让用户更高效的获取所需内容，同时为用户生产更多的价值。

58UXD（公众号）

作者：李颖菲

设计沉思录｜58同城部落的设计点滴