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

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

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

 設(shè)計(jì)思路 

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

下面我將分別從以下幾個(gè)頁(yè)面來(lái)展開(kāi)講述：

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

 首頁(yè)

頂部插圖設(shè)計(jì)：在8.0版本中，視覺(jué)上最直觀的改變便是首頁(yè)頂部插圖的新設(shè)計(jì)。即是，打開(kāi)首頁(yè)下拉過(guò)程中所看到的插畫(huà)部分。

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

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

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

新版展示

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

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

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

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

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

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

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

啟動(dòng)頁(yè)

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

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

引導(dǎo)頁(yè) 

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

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

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

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

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

消息中心全新改版

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

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

 結(jié)語(yǔ) 

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

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

原文地址：58UXD

作者： UXD平臺(tái)組

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