UI大牛揭秘28APP8.0版本設(shè)計技巧

58同城是中國互聯(lián)網(wǎng)生活服務(wù)領(lǐng)導(dǎo)者，作為中國最大的分類信息平臺，大多數(shù)用戶來這里主要的訴求都在找房、找工作或二手車等。那么如何延長用戶在平臺的停留時長，而不是用完即走呢？為此，58同城App在8.0版本的UI設(shè)計做了很多新的嘗試，使得用戶來到58不僅只是查找信息，還能跟有相同訴求的用戶們一起交流。

為應(yīng)對產(chǎn)品的日益變化和用戶的不斷成長，我們將產(chǎn)品訴求分解開來，通過視覺語言落地到了啟動頁、引導(dǎo)頁、首頁、消息中心等方面，希望給用戶帶來耳目一新的版本。

 設(shè)計思路 

首先我們明確了改版的設(shè)計概念和思路，由于58同城匯集了各種生活服務(wù)類的分類信息，進一步來看，這些信息都源自于人在城市中生活的各種訴求。所以我們想通過一些適合的場景，用視覺語言去描繪“人在城市中生活”的這個概念，由此衍生出的設(shè)計思路便是三個關(guān)鍵詞：人、城市、生活。我們的設(shè)計將圍繞這個主題給用戶帶來一些情感上的共鳴，切實的讓用戶體會到58帶來的“生活更簡單”。

下面我將分別從以下幾個頁面來展開講述：

• 首頁
• 啟動頁
• 引導(dǎo)頁
• 消息中心

 首頁

頂部插圖設(shè)計：在8.0版本中，視覺上最直觀的改變便是首頁頂部插圖的新設(shè)計。即是，打開首頁下拉過程中所看到的插畫部分。

舊版頂部插圖設(shè)計

我們先來分析舊版存在的問題，舊版以城市為概念，設(shè)計師們描繪了28座熱門城市的標志性建筑物。當用戶切換到這些城市時，頂部頭圖就變?yōu)楫數(shù)氐牡貥私ㄖ铩：髞砦覀儼l(fā)現(xiàn)，對于絕大多數(shù)用戶來說，是很少有機會切換到別的城市，所以即使我們做了28個城市，很多用戶長期也只能看到1-2種頭圖。另外標志性建筑概念的可延展性比較小，如果要把全國幾百個城市全都繪制出來，成本很高，用戶也難以從中發(fā)掘出新鮮的感受。

為了給用戶帶來共鳴，我們圍繞“人在城市中生活”的這個概念，重新構(gòu)想“城市”的插圖概念——以最生活化的視角觀察城市，從不同的角度描繪城市所帶給人的印象。描繪碩大的建筑物，描繪道路橋梁，描繪公園，描繪家庭等，組織出日常生活的圖景，建立起與用戶的情感聯(lián)結(jié)。

新版展示

在插圖繪制中，用抽象的元素形態(tài)，構(gòu)建出了更有設(shè)計感的圖形語言。

大塊面的幾何形狀大量運用，局部細膩刻畫，微妙的處理光源與物體的關(guān)系。而設(shè)色多用同類色漸變，在極小的色彩范圍中處理素描關(guān)系，完成空間感的表達。

系列圖中都有太陽處在畫面正中，不僅是貫穿系列的固有元素，同時也是動效設(shè)計的切入點，下拉刷新時出現(xiàn)光芒的動態(tài)變化，在與用戶互動時使畫面更加鮮活。

在大與小，虛與實，動與靜的對比中展示出對生活的細膩感受，傳遞出生活的溫暖意境。在頂部區(qū)域承載了搜索，掃碼，天氣，簽到等諸多功能的情況下，達到了插圖的體量感，區(qū)域信息傳達效率，和優(yōu)雅的平衡。

梳理產(chǎn)品脈絡(luò)，優(yōu)化頁面布局：除了頂部插畫的升級，新版首頁還加入了58同鎮(zhèn)、同城部落、圈子等新功能，我們趁機對首頁的布局進行整體的優(yōu)化。

舊版的視覺問題是分割線較多、漸變的區(qū)分方式使頁面割裂感、擁擠感比較強，所以我們想用新的區(qū)分方式讓頁面更加整體、帶來呼吸感。

新版的頁面區(qū)分和業(yè)務(wù)緊密集合，頁面自上而下分別是分類業(yè)務(wù)導(dǎo)航區(qū)、內(nèi)容模塊區(qū)（部分還在灰度中）、拓展業(yè)務(wù)區(qū)（含到家和便民工具）、推薦區(qū)。這些大區(qū)域的區(qū)分方式我們保留了漸變，小模塊之間我們使用了線條，使頁面更有節(jié)奏，并提升了瀏覽效率，邏輯更加清晰化。

啟動頁

啟動頁通常是app的標志縮影，是企業(yè)Logo的概括。因此在設(shè)計前期中，先要了解58品牌的涵義以及它希望帶給用戶一種怎樣的情感。首先釋讀下58品牌的含義，“58”由L、O、C、O 4個部分組成，分別代表了不同的釋義，四個字母組合在一起則是一個集結(jié)更多服務(wù)的“生活集團”，為用戶創(chuàng)造更美好、更無限的精彩生活的企業(yè)。

圍繞“人在城市中生活”這個概念，而我們需要具象化的用視覺語言來表現(xiàn)出這個概念。其次，首屏加入了情感化、響應(yīng)時節(jié)（冬季）及大型事件的元素，那么在啟動頁中，需要做到承前啟后的功能，以社區(qū)城市生活的概念為主體，以柔和的顏色和面形為主要設(shè)計方式，并且與首頁頂圖的意境相契合，在情感側(cè)拉近和用戶之間的關(guān)系，增強交互體驗與品牌認知。設(shè)計方案如下圖：

引導(dǎo)頁 

啟動引導(dǎo)主要目的是新功能宣傳，這次需要表現(xiàn)的三個功能點分別是：“8.0新首頁”、“消息中心升級”及“58同鎮(zhèn)”。

圍繞這些主功能，設(shè)計形式延續(xù)了往期期扁平插畫風(fēng)格。插畫是一種可以與用戶進行情感交流的視覺語言，對于品牌的宣傳以及傳遞品牌形象有更好的傳播效果，加深用戶對產(chǎn)品的印象。

畫面立意以APP界面抽象化的圖形為主視覺焦點，搭配人物元素對界面進行改造的畫面情節(jié)。如“8.0全新首頁”的畫面中，將人物的畫面情節(jié)設(shè)定為幾個人物一起對APP界面進行“渲染”和改造來體現(xiàn)“全新”的感覺。其中主視覺焦點的“界面”中，展示首頁改版的功能點，以簡潔的圓形圖形示意頂部的頭圖改版、人物頭像及地點圖形示意同城部落及圈子的功能點。通過這種故事性畫面情節(jié)吸引用戶興趣，給用戶留下比較深刻的印象。

畫面色彩采用核心的品牌色桔色為主體，采用相同色系的顏色進行搭配以協(xié)調(diào)整個畫面。用高飽和度顏色突出“APP界面”的主視覺圖形及人物，用低飽和度色彩弱化背景及輔助元素如云彩植物等搭配圖形。除此之外還加入了漸變色的運用來豐富畫面的層次感，吸引用戶眼球。

希望通過以上設(shè)計構(gòu)思來平衡好用戶需求與產(chǎn)品目標——讓用戶快速愉悅的對新功能產(chǎn)生認知，引導(dǎo)新手用戶快速向活躍度高的忠實用戶進行轉(zhuǎn)化，提升產(chǎn)品品牌印象。

消息中心全新改版

舊版消息中心存在消息量級負載，不同價值的消息號和各類IM消息混雜等問題，導(dǎo)致用戶無法高效獲取有用的信息，長期以往消息中心用戶價值將逐漸弱化。

新版希望通過優(yōu)化消息中心結(jié)構(gòu)框架，梳理已有消息類型、分類歸納，提高用戶得到有用信息以及溝通效率。針對舊版消息中心信息混雜的問題，我們分類歸納了現(xiàn)有消息類型，聚合了相關(guān)信息，設(shè)計上我們采用了卡片的方式，使得頁面模塊化，同類信息更聚焦，不同類信息不會相互影響，頁面層級更加明確。我們采取了同樣的設(shè)計風(fēng)格去設(shè)計icon，實色圓底與白色實心icon。這樣做的好處是：塊狀背景會從視覺上擴大icon面積，icon更易區(qū)分；相同的icon繪制方式從視覺上會使頁面視覺負荷減少，頁面更加統(tǒng)一。

 結(jié)語 

大家可以到安卓和ios相關(guān)應(yīng)用市場去更新到8.0版本，線上體驗一下我們實際的變化，這次的改版除了首頁、消息中心、啟動頁等改變，部分用戶還能體驗我們的新產(chǎn)品：同城部落、圈子（灰度中），也許可以在里面找到志趣相投的人哦。

8.0的改版需求雖已落下帷幕，但我們并不是到此為止，而是要去不斷挖掘新的方向，做新的嘗試！再次感謝參與的每一位付出的同學(xué)，我們一起繼續(xù)深耕下去。

原文地址：58UXD

作者： UXD平臺組

相關(guān)文章--《UI大牛告訴你動效的使用方法》