58UXD：58便當(dāng)體驗(yàn)升級(jí)項(xiàng)目是由PM發(fā)起，設(shè)計(jì)進(jìn)行優(yōu)化，解決M端頁(yè)面上一版遺留問(wèn)題。并在迭代中進(jìn)行深度挖掘，持續(xù)優(yōu)化產(chǎn)品體驗(yàn)。對(duì)于頁(yè)面設(shè)計(jì)過(guò)程中，總結(jié)了一些經(jīng)驗(yàn)與方法，今天拿來(lái)與大家分享一下。

項(xiàng)目簡(jiǎn)述

“ 58便當(dāng) ”是58同城旗下的一個(gè)便民服務(wù)平臺(tái)，早期版本以辦證攻略為主，功能和結(jié)構(gòu)單一。此次改版在滿足日常辦證業(yè)務(wù)的需求上，引入豐富的資訊內(nèi)容（創(chuàng)業(yè)服務(wù)、優(yōu)學(xué)培訓(xùn)、生活竅門、養(yǎng)車用車），結(jié)合58的服務(wù)，承擔(dān)資訊輸出的角色。

設(shè)計(jì)背景

用戶分析

根據(jù)以往數(shù)據(jù)模擬出用戶畫像：

并根據(jù)不同用戶瀏覽需求，劃分為兩類：

• 有目標(biāo)：如有辦證需求的用戶，希望快速找到辦證指南。
• 無(wú)目標(biāo)：對(duì)資訊等內(nèi)容感興趣的用戶，能夠找到滿足其需求的資訊。

首先針對(duì)有辦證需求用戶的行為：

• 快捷方便、信息全面是用戶選擇上網(wǎng)查找的主因。
• 使用搜索引擎或官網(wǎng)查詢方式，獲得方便快捷／信息真實(shí)可靠信息資源。
• 設(shè)備使用占比，電腦64%、移動(dòng)端29%、終端機(jī)7%。

用戶痛點(diǎn)：

改善用戶體驗(yàn)

• 有目標(biāo)：縮短用戶訪問(wèn)路徑，提升產(chǎn)品的查找效率。
• 無(wú)目標(biāo)：提供精準(zhǔn)資訊推送，提升列表的可讀性。

行動(dòng)計(jì)劃

• 優(yōu)化首頁(yè)快捷入口圖標(biāo)，在設(shè)計(jì)上優(yōu)化圖標(biāo)的引導(dǎo)作用，方便用戶從首頁(yè)直接跳到詳情。
• 增強(qiáng)搜索過(guò)程中的體驗(yàn)感受。
• 增加個(gè)性化推薦，豐富視覺(jué)語(yǔ)言。
• 采用統(tǒng)一的視覺(jué)元素提升頁(yè)面效果。

架構(gòu)歸類

把不同種類的頁(yè)面進(jìn)行歸類，對(duì)不同的詳情、頻道等頁(yè)面進(jìn)行設(shè)計(jì)風(fēng)格規(guī)劃，方便設(shè)計(jì)執(zhí)行時(shí)可以夠更好的統(tǒng)一。

改版

真實(shí)可信的顏色

基于產(chǎn)品特性，沒(méi)有延續(xù)主站的橙色，而是選用藍(lán)色為主色，藍(lán)色會(huì)帶給人們一種知性與信賴感，并且會(huì)使得頁(yè)面更輕量。在最終敲定主色方案的過(guò)程中，還進(jìn)行一些微調(diào)，最終確定了當(dāng)前的色值。

新鮮風(fēng)格

先從Banner開(kāi)始，融入亮色漸變與淺陰影效果，跟隨潮流當(dāng)前潮流。同時(shí)在使用這種效果后，更能方便Banner的規(guī)范輸出，只要修改漸變色就能輕松輸出比較搶眼的Banner，減少了后期運(yùn)營(yíng)設(shè)計(jì)成本。

并優(yōu)化視覺(jué)風(fēng)格陳舊的UI，加大頁(yè)面間隙的留白，去掉不必要的細(xì)線樣式。

圖標(biāo)優(yōu)化

根據(jù)頁(yè)面功能的變化，逐漸從第一版的彩色圖標(biāo)，到簡(jiǎn)單的線性，讓圖標(biāo)在頁(yè)面內(nèi)看起來(lái)更加的合適，并且直觀的進(jìn)行引導(dǎo)。

首頁(yè)

優(yōu)化整體頁(yè)面布局，加入Banner／圖標(biāo)等元素。細(xì)節(jié)上融入淺陰影，提升頁(yè)面整體等視覺(jué)效果，減弱了入口層級(jí)深，加入推薦信息優(yōu)化首頁(yè)的使用效率。

信息列表拓展

在設(shè)計(jì)列表的過(guò)程中，考慮頁(yè)面更多是信息內(nèi)容比較多，盡可能更好的展示內(nèi)容，采用了三種展現(xiàn)形式，有效的起到了預(yù)覽與吸引眼球的效果，并且兼顧避免瀏覽重復(fù)樣式的疲勞，提升頁(yè)面的可讀性。

同類信息橫滑

把同類證件，加入橫滑的操作方式。方便用戶在瀏覽列表的同時(shí)在當(dāng)前屏幕中，能夠更加便捷的對(duì)內(nèi)容進(jìn)行瀏覽。

字體優(yōu)化

增加大主要區(qū)域文字字號(hào)，縮小標(biāo)簽及次要內(nèi)容字號(hào)，提高對(duì)列表及詳情等頁(yè)面的悅讀體驗(yàn)。并且對(duì)超文本鏈接進(jìn)行提亮處理，讓頁(yè)面更好的區(qū)分主次與功能，調(diào)整頁(yè)面整體的字體顏色，優(yōu)化純黑為深灰色，減少閱讀過(guò)程中高對(duì)比度對(duì)眼睛產(chǎn)生的疲勞。

增加帶入感

加入情景化背景圖，讓詳情頁(yè)面具有代入感，提升瀏覽證件時(shí)用戶的視覺(jué)感官，起到內(nèi)容聯(lián)想作用。同時(shí)漸變效果讓文字信息與照片看起來(lái)更柔和，不會(huì)顯得過(guò)于生硬。

獲取更有效的推送

由于用戶入口等因素，在考慮一部分用戶會(huì)首先進(jìn)入詳情頁(yè)面，而非首頁(yè)或列表頁(yè)時(shí)，需要讓用戶進(jìn)行自循環(huán)瀏覽。

為了避免用戶的跳出，我們?cè)陧?yè)面中心位置的Tab切換效果，為當(dāng)前頁(yè)面也起到了精準(zhǔn)的信息推送。

結(jié)語(yǔ)

根據(jù)前期的調(diào)研分析后，定義出新的視覺(jué)語(yǔ)言，建立便當(dāng)?shù)囊?guī)范，保證品牌的一致性，方便后期版本迭代。并采用極簡(jiǎn)的排版，讓用戶沉浸在閱讀中不受干擾，提升了用戶的閱讀體驗(yàn)。設(shè)計(jì)是一個(gè)不斷打磨的過(guò)程，需要深入產(chǎn)品之中精耕細(xì)作，持續(xù)挖掘產(chǎn)品的可優(yōu)化點(diǎn)，提升產(chǎn)品的使用體驗(yàn)。

歡迎關(guān)注58UXD 的公眾號(hào)：

「國(guó)內(nèi)各大互聯(lián)網(wǎng)公司的內(nèi)部教程」

• 《騰訊內(nèi)部分享！一個(gè)工作坊的完整設(shè)計(jì)流程劇透》
• 《內(nèi)部傳統(tǒng)項(xiàng)目！揭秘FACEBOOK 設(shè)計(jì)互評(píng)的實(shí)戰(zhàn)過(guò)程》
• 《內(nèi)部教程！超實(shí)用6步透視網(wǎng)易設(shè)計(jì)規(guī)范（附完整PDF下載）》