上亿人都在用的58 App全新升级，官方设计团队揭秘背后思路！

58UXD：在互联网的下半场中，用户增长乏力的形势日益凸显，充分发挥用户的流量价值变得尤为重要。然而对用户单一业务维度的满足已经不足以支撑住用户日益增高的体验诉求，只有围绕用户诉求打造多场景、精细化、一致性的体验，才能打破用户对产品工具属性的定位，对平台形成更高程度的依赖。基于此，我们发起了本次首页 9.0 版本的改版，希望达成「知你所需，予你所求」的战略目标。

我们通过挖掘用户场景来建立规则，并刺激业务生产更多有价值的内容反哺给用户，周而复始来满足用户的多场景使用体验。与此同时，对目标进行拆解，通过提升信息容量、丰富展现形式以及拓展内容维度，对结构及各个模块进行再造。从而实现无论是供给端还是用户的决策，都可以从该通道抵达相同的目标。

基于此，我们从多个维度展开前期的分析工作，围绕着分析结果制定设计策略，通过设计原则来执行策略，最终应用到设计中的各个环节。这让产品更聚焦于当前所要解决的问题，让目标更加清晰明朗，让最终结果的呈现更加贴合各方诉求。

我们希望通过体系化的设计方式打破产品属性的壁垒，将产品背后交织的复杂逻辑与数据通过用户的行为进行分类和归整。设计体系的存在即是在中间环节进行协调，让呈现的结果具备科学性。既能满足业务的需求，又能从中延展出不同的形式来激励业务，使之产生更多的可能性。

千人千面需要从用户的多元需求去深挖，用户想要什么比我们能给什么更重要

想要实现千人千面的目标，让每个用户都能找到其感兴趣的精细化的内容，要求我们对用户场景的充分理解与深挖，在用户的使用流程中，定制化每一个场景，帮助用户解决生活中的每一个重要时刻。

以前我们都是根据用户在业务线的行为推测用户当前需求，根据需求向用户推送单一的业务线专题或相关的通知，但是这样做就会造成推荐的场景单一、信息不够丰富的问题。为了改善这个问题，我们这次从场景出发，挖掘用户更多的需求。只有深刻地了解用户及其生活所需，并将用户的行为通过场景转化为信息，方能带来前所未有的体验。

我们调整了信息的聚合方式，将以业务为中心调整为以用户需求为中心来推荐内容，通过对用户群体的挖掘，我们发现用户的需求往往是在动态流转的，这时我们除了要满足用户的核心诉求之外，也要尝试满足用户的衍生需求及潜在需求，但用户对这些边缘需求往往缺少预期。

以找工作为例，用户对 58 的预期是能够从海量的岗位中找到合适的工作，但是对于确定择业方向、判断企业优劣、入职相关事宜等衍生需求以及租房、交友、搬家等潜在需求感知较弱，这时我们就要尝试让用户在完成核心诉求的同时去发现这些边界需求，用户的使用路径也由之前的单一线状变成了网状，以此打破业务屏障。

与此同时，我们梳理出了典型用户的体验流程，基于大量的用户画像观测并总结出用户在流程节点上的共性需求，同时结合业务线的服务能力，为用户推荐符合需求的内容或服务。

为了让用户更好地发现这些场景，我们在首页上增加了大量场景透传的入口。首先将首页的顶部打造为业务主打区，对集团的创新项目进行突出展示，并应用动画效果来引起用户的注意。同时为了让页面更灵活丰富，icon 区以及占据首屏约 70% 的背景图都支持配置，可为大型的运营活动提供承载能力。

其次将腰部区域定义为场景感知区，我们将分散的推荐信息进行整合，通过用户画像匹配内容信息来满足用户不同的场景。而在用户的使用路径中，场景感知区的内容及形式也会随着用户的场景进行变化。

再次，将底部区域作为生态拓展区，将业务信息、UGC、PGC、专题、运营等多维度信息以用户诉求为维度进行聚合，作为对场景感知区的补充，满足用户的长尾需求。同时让用户能有更多内容可看，刷新对服务能力的固有认知。

千人千面要求设计师不只是设计一套页面，而是设计一套生成页面的规则

想要让页面具有能承载多元场景的能力，这对页面的灵活性和信息承载能力提出了更高的要求。这要求设计师在处理页面信息时，不再是给业务线「分蛋糕」，而是为用户「做蛋糕」，也就是基于用户的诉求去定制内容。

首先我们需要增加页面可定制的部分，同时要求页面的结构足够模块化，让海量的信息得以以统一的形式进行展现，而不让页面显得过于凌乱。其次是增加页面信息的承载容量，从而提高命中用户的机会。在增加信息容量方面，一是增加信息的静态容量，增加更多推荐的入口，另外一方面是提高信息的动态容量，在同一入口内提高信息的展现的频次，即在有限的空间内，形成无限的组合。

为了更好的让首页做到「千人千面」，本次改版的一个主要目标是将推荐在首屏能够露出部分内容，因此场景感知区的高度就要降低。为了解决内容越来越多，但空间却越来越小的问题，我们在设计中用到了「七巧板」理论。

七巧板理论 – 有限空间内，无限的组合

之前我们需要什么模块或频道，就在场景感知区给这个模块开辟一个位置，即使模块内的信息做到了千人千面，但模块的样式、形状和相对位置都是固定的。如果我们以后需要添加更多的信息类型，这个区域会越来越高，这样的结构能承载的信息是有限的。

那么，如何让有限的空间承载更多的信息？思考这个问题的过程中，我们联想到了七巧板，即在固定空间内，通过基本图形的拼接，能组合成百上千种不同图案。根据这样的一个启发，我们换了一种思考方式，把场景感知区域当成七巧板，划分出几种基本形状，再将信息根据自己的特性填充到这些基本模块中，这些模块可以排列组合，产生多种组合样式。这样一来，不仅信息千人千面，模块本身的样式和顺序也能有所不同，从而做到「结构越来越简单，内容越来越丰富」。

通过信息管理设计系统将视觉语言「编码化」，实现展现样式的千人千面

在 58APP 9.0 版本中，我们赋予了它更加独特的身份。在继承的同时与当下的潮流保持着同步。在新的版本中我们开始引用「信息管理设计系统」，并将设计系统中的四点原则──独特、效率、智能、丰富贯穿至首页。我们希望，在用户使用产品的每个重要时刻，都可通过我们的设计，指引他们触达更深层的场景。

我们将原则贯彻到设计中的每一处，使产品的最终呈现紧密围绕着设计原则。不仅如此，我们将设计原则提升至更高的层级，最终对全平台及各业务进行覆盖；系统性的设计犹如一个「容器」，包裹着所有元素，使产品最终的呈现更加统一，通过设计的容器，我们在业务之间构建了一种平衡的生态关系。

在新版本的设计中，我们定义了图形标识的框架及色彩范围。通过提取58同城 LOGO 中的弧度，延展出了新的图形标识框架，在该框架内对图形进行设计，这使每一个标识都具备了58同城的属性。页面中的元素也更加贴合品牌且更具有凝聚力。

我们通过建立图标库来对所有图标进行分类管理，并将所有图标进行编码。在实现上，我们可以通过编码来调取图标到页面中并与样式进行拼接。

在色彩库中，我们根据品牌色进行延展，原有的四色基础上扩展至二十七种相近色及渐变样式，并在其中增加了适用于暗黑模式下的配色。经过对色彩的调试，这些颜色的应用使产品更有活力，在屏幕上的显示更为鲜活。

文本在产品中的应用极其广泛，通过梳理，我们将现有字号和字色进行衔接并将其纳入编码库中，在使用中更加便捷。

无论是基于品牌属性的 DNA，还是通过推荐而来的内容信息，我们将其理解为数据信息，是单一或者成组的数据串联到一起的结果。我们细分到每一个元素，使用元素编码的形式，将编码与编码之间进行连接，直至拼装成模块，从而覆盖用户的大部分场景。

以场景感知区为例，我们将模块中呈现的信息进行拆解，通过解读数据来源匹配资源库中的图形、色彩、线框、文本及文本色值等信息，将这些细分元素进行编号，编号与编号之间拼接形成编码，而编码则对应着最终呈现。

那些出乎意料的关怀，源自对用户每一个细微场景下的感同身受

1. 获取、理解、决策，信息的构建依赖于使用者的诉求

我们希望用户能够聚焦于当前所执行的任务，无论是页面层级，亦或者信息层级，恰当合理的分布可有效地控制用户的注意力，并将其引导至其所需的内容。在本次首页改版中，我们运用了卡片的方式来对信息做聚合的处理。它的核心任务是将丰富，多样和持久的内容，聚焦在模块中展现，并激励用户参与到内容中。

2. 唯有与用户感同身受，方能使体验更完整

在设计中，我们试图唤醒使用者的感官体验，最终在使用者和产品之间产生共鸣。技术在这个时代日新月异，通过技术的变革来丰富人们的生活，同时也对其产生了依赖。产品不应只有冰冷的数据信息及直白的功能，我们设计的节气系列也一直在为用户传达着「让生活简单美好」的概念。

3. 理解你白天的劳累，所以知道如何帮你放下夜晚的疲惫

同时随着暗黑模式的到来，我们也为此进行了设计。让用户在任何时间都可以轻松且舒适地浏览我们所提供的内容。

总结

内容在无时无刻地驱动着产品走向用户的内心。我们在互联网急速发展的时代里一路狂奔，与此同时对产品和用户的理解也在不断加深。

直至今日，我们明确的知道用户需要什么内容，甚至能够在用户对内容的敏感度上做出预判。这些预判正是在回顾过往的历程中所沉淀下来的经验以及与现今用户需求的结合。为了更好的激活多元场景体验，我们也在尝试通过机制体系的构建来激发业务线参与的热情，同时也作为构建体系化设计系统的根基。当我们更加沉着冷静地思考解决方案时，使用者与产品之间的连接关系会更加稳固牢靠。

随着58同城 9.0 版本的发布，我们将全新的品牌体验赋能于所有业务中。在不久的将来，用户会在日常的使用中感受到前所未有的变化。而在全新的旅程中，58同城不止步于当下，更思考长远的未来。

欢迎关注「58UXD」的微信公众号：