上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

58UXD:在互聯網的下半場中,用戶增長乏力的形勢日益凸顯,充分發揮用戶的流量價值變得尤為重要。然而對用戶單一業務維度的滿足已經不足以支撐住用戶日益增高的體驗訴求,只有圍繞用戶訴求打造多場景、精細化、一致性的體驗,才能打破用戶對產品工具屬性的定位,對平臺形成更高程度的依賴?;诖耍覀儼l起了本次首頁 9.0 版本的改版,希望達成「知你所需,予你所求」的戰略目標。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

我們通過挖掘用戶場景來建立規則,并刺激業務生產更多有價值的內容反哺給用戶,周而復始來滿足用戶的多場景使用體驗。與此同時,對目標進行拆解,通過提升信息容量、豐富展現形式以及拓展內容維度,對結構及各個模塊進行再造。從而實現無論是供給端還是用戶的決策,都可以從該通道抵達相同的目標。

基于此,我們從多個維度展開前期的分析工作,圍繞著分析結果制定設計策略,通過設計原則來執行策略,最終應用到設計中的各個環節。這讓產品更聚焦于當前所要解決的問題,讓目標更加清晰明朗,讓最終結果的呈現更加貼合各方訴求。

我們希望通過體系化的設計方式打破產品屬性的壁壘,將產品背后交織的復雜邏輯與數據通過用戶的行為進行分類和歸整。設計體系的存在即是在中間環節進行協調,讓呈現的結果具備科學性。既能滿足業務的需求,又能從中延展出不同的形式來激勵業務,使之產生更多的可能性。

千人千面需要從用戶的多元需求去深挖,用戶想要什么比我們能給什么更重要

想要實現千人千面的目標,讓每個用戶都能找到其感興趣的精細化的內容,要求我們對用戶場景的充分理解與深挖,在用戶的使用流程中,定制化每一個場景,幫助用戶解決生活中的每一個重要時刻。

以前我們都是根據用戶在業務線的行為推測用戶當前需求,根據需求向用戶推送單一的業務線專題或相關的通知,但是這樣做就會造成推薦的場景單一、信息不夠豐富的問題。為了改善這個問題,我們這次從場景出發,挖掘用戶更多的需求。只有深刻地了解用戶及其生活所需,并將用戶的行為通過場景轉化為信息,方能帶來前所未有的體驗。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

我們調整了信息的聚合方式,將以業務為中心調整為以用戶需求為中心來推薦內容,通過對用戶群體的挖掘,我們發現用戶的需求往往是在動態流轉的,這時我們除了要滿足用戶的核心訴求之外,也要嘗試滿足用戶的衍生需求及潛在需求,但用戶對這些邊緣需求往往缺少預期。

以找工作為例,用戶對 58 的預期是能夠從海量的崗位中找到合適的工作,但是對于確定擇業方向、判斷企業優劣、入職相關事宜等衍生需求以及租房、交友、搬家等潛在需求感知較弱,這時我們就要嘗試讓用戶在完成核心訴求的同時去發現這些邊界需求,用戶的使用路徑也由之前的單一線狀變成了網狀,以此打破業務屏障。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

與此同時,我們梳理出了典型用戶的體驗流程,基于大量的用戶畫像觀測并總結出用戶在流程節點上的共性需求,同時結合業務線的服務能力,為用戶推薦符合需求的內容或服務。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

為了讓用戶更好地發現這些場景,我們在首頁上增加了大量場景透傳的入口。首先將首頁的頂部打造為業務主打區,對集團的創新項目進行突出展示,并應用動畫效果來引起用戶的注意。同時為了讓頁面更靈活豐富,icon 區以及占據首屏約 70% 的背景圖都支持配置,可為大型的運營活動提供承載能力。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

其次將腰部區域定義為場景感知區,我們將分散的推薦信息進行整合,通過用戶畫像匹配內容信息來滿足用戶不同的場景。而在用戶的使用路徑中,場景感知區的內容及形式也會隨著用戶的場景進行變化。

再次,將底部區域作為生態拓展區,將業務信息、UGC、PGC、專題、運營等多維度信息以用戶訴求為維度進行聚合,作為對場景感知區的補充,滿足用戶的長尾需求。同時讓用戶能有更多內容可看,刷新對服務能力的固有認知。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

千人千面要求設計師不只是設計一套頁面,而是設計一套生成頁面的規則

想要讓頁面具有能承載多元場景的能力,這對頁面的靈活性和信息承載能力提出了更高的要求。這要求設計師在處理頁面信息時,不再是給業務線「分蛋糕」,而是為用戶「做蛋糕」,也就是基于用戶的訴求去定制內容。

首先我們需要增加頁面可定制的部分,同時要求頁面的結構足夠模塊化,讓海量的信息得以以統一的形式進行展現,而不讓頁面顯得過于凌亂。其次是增加頁面信息的承載容量,從而提高命中用戶的機會。在增加信息容量方面,一是增加信息的靜態容量,增加更多推薦的入口,另外一方面是提高信息的動態容量,在同一入口內提高信息的展現的頻次,即在有限的空間內,形成無限的組合。

為了更好的讓首頁做到「千人千面」,本次改版的一個主要目標是將推薦在首屏能夠露出部分內容,因此場景感知區的高度就要降低。為了解決內容越來越多,但空間卻越來越小的問題,我們在設計中用到了「七巧板」理論。

七巧板理論 – 有限空間內,無限的組合

之前我們需要什么模塊或頻道,就在場景感知區給這個模塊開辟一個位置,即使模塊內的信息做到了千人千面,但模塊的樣式、形狀和相對位置都是固定的。如果我們以后需要添加更多的信息類型,這個區域會越來越高,這樣的結構能承載的信息是有限的。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

那么,如何讓有限的空間承載更多的信息?思考這個問題的過程中,我們聯想到了七巧板,即在固定空間內,通過基本圖形的拼接,能組合成百上千種不同圖案。根據這樣的一個啟發,我們換了一種思考方式,把場景感知區域當成七巧板,劃分出幾種基本形狀,再將信息根據自己的特性填充到這些基本模塊中,這些模塊可以排列組合,產生多種組合樣式。這樣一來,不僅信息千人千面,模塊本身的樣式和順序也能有所不同,從而做到「結構越來越簡單,內容越來越豐富」。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

通過信息管理設計系統將視覺語言「編碼化」,實現展現樣式的千人千面

在 58APP 9.0 版本中,我們賦予了它更加獨特的身份。在繼承的同時與當下的潮流保持著同步。在新的版本中我們開始引用「信息管理設計系統」,并將設計系統中的四點原則──獨特、效率、智能、豐富貫穿至首頁。我們希望,在用戶使用產品的每個重要時刻,都可通過我們的設計,指引他們觸達更深層的場景。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

我們將原則貫徹到設計中的每一處,使產品的最終呈現緊密圍繞著設計原則。不僅如此,我們將設計原則提升至更高的層級,最終對全平臺及各業務進行覆蓋;系統性的設計猶如一個「容器」,包裹著所有元素,使產品最終的呈現更加統一,通過設計的容器,我們在業務之間構建了一種平衡的生態關系。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

在新版本的設計中,我們定義了圖形標識的框架及色彩范圍。通過提取58同城 LOGO 中的弧度,延展出了新的圖形標識框架,在該框架內對圖形進行設計,這使每一個標識都具備了58同城的屬性。頁面中的元素也更加貼合品牌且更具有凝聚力。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

我們通過建立圖標庫來對所有圖標進行分類管理,并將所有圖標進行編碼。在實現上,我們可以通過編碼來調取圖標到頁面中并與樣式進行拼接。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

在色彩庫中,我們根據品牌色進行延展,原有的四色基礎上擴展至二十七種相近色及漸變樣式,并在其中增加了適用于暗黑模式下的配色。經過對色彩的調試,這些顏色的應用使產品更有活力,在屏幕上的顯示更為鮮活。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

文本在產品中的應用極其廣泛,通過梳理,我們將現有字號和字色進行銜接并將其納入編碼庫中,在使用中更加便捷。

無論是基于品牌屬性的 DNA,還是通過推薦而來的內容信息,我們將其理解為數據信息,是單一或者成組的數據串聯到一起的結果。我們細分到每一個元素,使用元素編碼的形式,將編碼與編碼之間進行連接,直至拼裝成模塊,從而覆蓋用戶的大部分場景。

以場景感知區為例,我們將模塊中呈現的信息進行拆解,通過解讀數據來源匹配資源庫中的圖形、色彩、線框、文本及文本色值等信息,將這些細分元素進行編號,編號與編號之間拼接形成編碼,而編碼則對應著最終呈現。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

那些出乎意料的關懷,源自對用戶每一個細微場景下的感同身受

  1. 獲取、理解、決策,信息的構建依賴于使用者的訴求

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

我們希望用戶能夠聚焦于當前所執行的任務,無論是頁面層級,亦或者信息層級,恰當合理的分布可有效地控制用戶的注意力,并將其引導至其所需的內容。在本次首頁改版中,我們運用了卡片的方式來對信息做聚合的處理。它的核心任務是將豐富,多樣和持久的內容,聚焦在模塊中展現,并激勵用戶參與到內容中。

2. 唯有與用戶感同身受,方能使體驗更完整

在設計中,我們試圖喚醒使用者的感官體驗,最終在使用者和產品之間產生共鳴。技術在這個時代日新月異,通過技術的變革來豐富人們的生活,同時也對其產生了依賴。產品不應只有冰冷的數據信息及直白的功能,我們設計的節氣系列也一直在為用戶傳達著「讓生活簡單美好」的概念。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

3. 理解你白天的勞累,所以知道如何幫你放下夜晚的疲憊

同時隨著暗黑模式的到來,我們也為此進行了設計。讓用戶在任何時間都可以輕松且舒適地瀏覽我們所提供的內容。

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

總結

內容在無時無刻地驅動著產品走向用戶的內心。我們在互聯網急速發展的時代里一路狂奔,與此同時對產品和用戶的理解也在不斷加深。

直至今日,我們明確的知道用戶需要什么內容,甚至能夠在用戶對內容的敏感度上做出預判。這些預判正是在回顧過往的歷程中所沉淀下來的經驗以及與現今用戶需求的結合。為了更好的激活多元場景體驗,我們也在嘗試通過機制體系的構建來激發業務線參與的熱情,同時也作為構建體系化設計系統的根基。當我們更加沉著冷靜地思考解決方案時,使用者與產品之間的連接關系會更加穩固牢靠。

隨著58同城 9.0 版本的發布,我們將全新的品牌體驗賦能于所有業務中。在不久的將來,用戶會在日常的使用中感受到前所未有的變化。而在全新的旅程中,58同城不止步于當下,更思考長遠的未來。

歡迎關注「58UXD」的微信公眾號:

上億人都在用的58 App全新升級,官方設計團隊揭秘背后思路!

收藏 78
點贊 3

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。