這次5.0版本改版的使命不僅要整體提升駕校一點(diǎn)通App的用戶體驗(yàn)，也需要與行業(yè)內(nèi)的其他產(chǎn)品形成差異。在改版期間，駕校一點(diǎn)通從App、PC、Wap端到品牌logo做了一系列體驗(yàn)升級(jí)。這篇文章旨在針對(duì)此次App端改版過程，做完整的設(shè)計(jì)回顧。

駕校一點(diǎn)通作為移動(dòng)端教輔類工具，一直深受廣大用戶的喜愛。隨著功能的豐富與強(qiáng)大，產(chǎn)品的結(jié)構(gòu)也越來越復(fù)雜，現(xiàn)有的信息架構(gòu)已不能承載產(chǎn)品未來的發(fā)展，設(shè)計(jì)改版勢(shì)在必行。

這次5.0改版主要將各種功能進(jìn)行結(jié)構(gòu)化整合、根據(jù)駕校一點(diǎn)通的調(diào)性重新定義產(chǎn)品視覺風(fēng)格，讓信息架構(gòu)和視覺展現(xiàn)更加合理，創(chuàng)造流暢生動(dòng)的用戶體驗(yàn)。改版不僅僅只是為了視覺感受上更具有設(shè)計(jì)感，而是希望能讓用戶有更好的體驗(yàn)，形成品牌的忠誠(chéng)度。

駕校一點(diǎn)通團(tuán)隊(duì)于2016年9月底啟動(dòng)了5.0版本的設(shè)計(jì)改版，到目前5.4版本，所有改版的內(nèi)容已悉數(shù)上線。在啟動(dòng)改版之前，設(shè)計(jì)團(tuán)隊(duì)調(diào)研了駕考同類型產(chǎn)品，發(fā)現(xiàn)頁(yè)面結(jié)構(gòu)以及視覺設(shè)計(jì)都比較一致，且產(chǎn)品頁(yè)面多年都很少進(jìn)行視覺更新迭代。所以，這次5.0版本改版的使命不僅要整體提升駕校一點(diǎn)通App的用戶體驗(yàn)，也需要與行業(yè)內(nèi)的其他產(chǎn)品形成差異。在改版期間，駕校一點(diǎn)通從App、PC、Wap端到品牌logo做了一系列體驗(yàn)升級(jí)。這篇文章旨在針對(duì)此次App端改版過程，做完整的設(shè)計(jì)回顧。

圍繞問題，設(shè)定設(shè)計(jì)目標(biāo)

基于舊版的產(chǎn)品分析，用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)發(fā)現(xiàn)如下幾個(gè)問題：

1. 信息架構(gòu)不合理，入口多，主次信息不清晰。
2. 視覺風(fēng)格過時(shí)，樣式較為單一，品牌認(rèn)知度較弱。
3. 運(yùn)營(yíng)頁(yè)面信息比較雜亂，與整體頁(yè)面融合度不高。
4. 同類產(chǎn)品，頁(yè)面差異性不大，其產(chǎn)品的差異性較弱。

用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)的小伙伴們多次迭代，從用戶角度出發(fā)，針對(duì)問題以及競(jìng)品分析的結(jié)果，不斷發(fā)散收斂，得到此次改版的設(shè)計(jì)方向：合理規(guī)劃信息架構(gòu)，確定駕校一點(diǎn)通產(chǎn)品設(shè)計(jì)調(diào)性，形成差異化的視覺語(yǔ)言，重新全面包裝，提升品牌認(rèn)知度，整體提升線上的用戶體驗(yàn)。

1、合理的信息架構(gòu)，引導(dǎo)用戶行為

舊版首頁(yè)入口太多，主次信息不清晰，信息架構(gòu)不夠合理?；诋a(chǎn)品用戶數(shù)據(jù)分析、用戶使用行為和產(chǎn)品功能需求等三個(gè)方面，交互同學(xué)對(duì)于首頁(yè)信息結(jié)構(gòu)重新進(jìn)行了調(diào)整。

新改版后的主要功能模塊有：考試、福利、社區(qū)、發(fā)現(xiàn)、購(gòu)車。首頁(yè)改版中，將考試練習(xí)、模擬考試和做題相關(guān)功能提煉出來，整合成首頁(yè)頭部卡片內(nèi)容，讓考試做題這塊核心功能更加突出。同時(shí)，在考題練習(xí)、模擬考試上面顯示用戶已完成題庫(kù)百分比和最高得分的數(shù)據(jù)，不僅對(duì)考題練習(xí)和模擬考試進(jìn)行解釋說明，還能提醒用戶進(jìn)行下一步操作，增加產(chǎn)品與用戶之間的聯(lián)系。

在首頁(yè)的情感化設(shè)計(jì)中，我們也加入了“老司機(jī)”形象，讓老司機(jī)給用戶陪伴感，同時(shí)可以有效引導(dǎo)用戶更加快速直接的進(jìn)行操作。

駕校一點(diǎn)通V5.0首頁(yè)改版對(duì)比圖

2、確定駕校一點(diǎn)通產(chǎn)品視覺語(yǔ)言，制定設(shè)計(jì)規(guī)范

通過設(shè)計(jì)團(tuán)隊(duì)多次討論和分析，在APP5.0設(shè)計(jì)改版中，產(chǎn)品需要回歸用戶剛性需求：強(qiáng)化考試做題頁(yè)。優(yōu)化科目一、科目四線上做題體驗(yàn)，重新梳理科目二、科目三展示內(nèi)容。增加福利頁(yè)面，優(yōu)化社區(qū)、購(gòu)車頁(yè)面，其他功能展示適當(dāng)弱化和規(guī)范化。

在駕校一點(diǎn)通App此次視覺改版中，我們得到調(diào)研反饋問題，主要集中在缺乏設(shè)計(jì)感、風(fēng)格保守、土氣、粗糙不精致等。根據(jù)梳理后的的品牌視覺感受，整體采用扁平化風(fēng)格使體驗(yàn)更加輕量化。通過對(duì)內(nèi)容布局、顏色、圖標(biāo)、字體等細(xì)節(jié)元素上進(jìn)行了重新設(shè)計(jì)，使得頁(yè)面更加簡(jiǎn)潔，便于用戶聚焦產(chǎn)品功能及內(nèi)容本身。

（1）內(nèi)容布局

新版中去除所有多余元素，將同類信息進(jìn)行系統(tǒng)性歸納，并整理到一張卡片內(nèi)做為獨(dú)立的單元進(jìn)行展示，使頁(yè)面干凈，清晰和美觀布局。歸納整合了功能模塊，降低用戶的理解成本，增加產(chǎn)品易用性。

目前線上考試首頁(yè)界面的截圖

（2）顏色

重新定義的產(chǎn)品品牌色——綠色，讓頁(yè)面整體顯得更干凈、更年輕、更專業(yè)，配合駕校一點(diǎn)通產(chǎn)品slogan：“學(xué)車更輕松”。讓用戶輕松產(chǎn)生信賴感，加深用戶對(duì)品牌的認(rèn)知，并給用戶一種綠色通道的感覺，選擇駕校一點(diǎn)通意味著一路綠燈。

改版后的引導(dǎo)頁(yè)截圖

（3）圖標(biāo)

此次圖標(biāo)的圖形及顏色也秉承輕量化設(shè)計(jì)，遵循品牌特征，化繁為簡(jiǎn)。采用了較為明快的色彩，使得圖標(biāo)充滿朝氣與活力，增加愉悅感以及辨識(shí)度。同時(shí)，我們也解決了舊版中頁(yè)面圖標(biāo)風(fēng)格不統(tǒng)一的問題。

改版前后圖標(biāo)對(duì)比

（4）字體

改版中，我們也嚴(yán)格規(guī)范了字體色值和字號(hào)的使用，讓頁(yè)面有清晰的視覺層級(jí)關(guān)系。標(biāo)題加粗，讓用戶能直接快速的獲取信息。信息模塊之間的間距也比之前更大一些，從而區(qū)分層級(jí)關(guān)系，形成視覺的節(jié)奏感。

駕校一點(diǎn)通App作為一個(gè)成熟產(chǎn)品，從主功能頁(yè)面到二級(jí)三級(jí)頁(yè)面，有著上百個(gè)頁(yè)面。在我們前期視覺風(fēng)格成型后，為了團(tuán)隊(duì)設(shè)計(jì)能夠快速協(xié)作，并具有統(tǒng)一性，設(shè)計(jì)規(guī)范的制定也是必不可少。有了規(guī)范，后續(xù)迭代中也能保持設(shè)計(jì)初衷，遵循定制好設(shè)計(jì)規(guī)范，維護(hù)好品牌形象，能使產(chǎn)品在不斷更新迭代中保持品牌形象不走樣，保持產(chǎn)品特性，同時(shí)產(chǎn)品的規(guī)范統(tǒng)一增加了用戶使用認(rèn)知，有效提升用戶體驗(yàn)。

駕校一點(diǎn)通設(shè)計(jì)規(guī)范部分截圖

3、融入情感化設(shè)計(jì)，優(yōu)化運(yùn)營(yíng)相關(guān)內(nèi)容頁(yè)面

對(duì)于工具類應(yīng)用產(chǎn)品，年輕用戶比例超過整體行業(yè)。在駕校的用戶群中，我們發(fā)現(xiàn)，24歲以下用戶占比接近四成，比移動(dòng)端整體高出7個(gè)百分點(diǎn)；30歲以下用戶占比超過七成，用戶年輕化程度較高。一般工具類產(chǎn)品頁(yè)面給人感覺是冰冷且模式機(jī)械化的。在情感化設(shè)計(jì)中，我們也推出老司機(jī)形象，配合產(chǎn)品運(yùn)營(yíng)設(shè)計(jì)，讓頁(yè)面在不失專業(yè)性、權(quán)威性的基礎(chǔ)上，更具有活力，更貼合用戶生活，增強(qiáng)用戶的愉悅感。

暗中觀察的老司機(jī)

駕校一點(diǎn)通作為學(xué)車類工具產(chǎn)品，很多用戶都會(huì)在拿到駕駛證之后，會(huì)以卸載產(chǎn)品來作為學(xué)車拿證的一個(gè)儀式感。對(duì)于這一點(diǎn)，我們也一直想除了報(bào)名駕校和考試做題的功能，賦予駕校一點(diǎn)通產(chǎn)品更多的內(nèi)容，從而使用戶黏性更高?？荚囀醉?yè)中，我們將學(xué)員pk頁(yè)面從之前的小入口，拿出來單獨(dú)作為一個(gè)模塊。背景彈幕樣式的微動(dòng)畫的呈現(xiàn)方式，強(qiáng)化了點(diǎn)擊入口，活動(dòng)內(nèi)頁(yè)活潑的視覺效果，讓做題與游戲緊密結(jié)合在一起，增加用戶使用的愉悅感。調(diào)整后的學(xué)員pk頁(yè)在上線一周后，數(shù)據(jù)呈火箭式增長(zhǎng)。

從此次5.0開始，我們對(duì)福利、社區(qū)、發(fā)現(xiàn)、購(gòu)車頁(yè)面也進(jìn)行了優(yōu)化，福利和社區(qū)頁(yè)面作為運(yùn)營(yíng)頁(yè)面，與報(bào)名考試首頁(yè)相比，視覺上更為活潑，從而吸引用戶，刺激用戶的點(diǎn)擊。讓運(yùn)營(yíng)頁(yè)面不失活動(dòng)熱鬧的氣氛同時(shí)又與主頁(yè)面官方冷靜的氣質(zhì)保持一致，這需要我們對(duì)整體頁(yè)面的把控以及細(xì)節(jié)上的思考是嚴(yán)謹(jǐn)細(xì)致的。

新版考試、福利、社區(qū)、發(fā)現(xiàn)、購(gòu)車首頁(yè)截圖

4、品牌體驗(yàn)優(yōu)化升級(jí)，與其它競(jìng)品形成差異化

為了讓線上多端體驗(yàn)更加完整，在App改版初步完善后， Wap端以及PC端也相繼進(jìn)行改版，使得三端體驗(yàn)保持一致。此次改版設(shè)計(jì)中，我們一直遵循以下幾項(xiàng)原則：統(tǒng)一設(shè)計(jì)來源、統(tǒng)一信息布局、統(tǒng)一視覺語(yǔ)言。精致的細(xì)節(jié)可以讓產(chǎn)品視覺散發(fā)氣質(zhì)，形成產(chǎn)品的視覺語(yǔ)言。根據(jù)每一個(gè)不同的模塊，通過不同樣式的組合設(shè)計(jì)，準(zhǔn)確地傳達(dá)信息內(nèi)容。從每一個(gè)細(xì)節(jié)去強(qiáng)化產(chǎn)品氣質(zhì)，形成與競(jìng)品的差異化。

目前線上的駕校一點(diǎn)通、駕考寶典、車輪駕考通頁(yè)面截圖

總結(jié)

每一個(gè)季度，用研團(tuán)隊(duì)會(huì)通過用戶訪談和問卷調(diào)研，對(duì)產(chǎn)品體驗(yàn)進(jìn)行調(diào)研和總結(jié)。同時(shí)，APP頁(yè)面中，我們一直保留了用戶反饋入口，每天會(huì)收集到上千條用戶反饋信息，我們從用戶反饋信息中提取有價(jià)值的信息，并整理優(yōu)化我們的產(chǎn)品，希望能夠讓每一位用戶都能滿意。無(wú)論是產(chǎn)品本身還是功能的更新迭代，我們都以用戶為中心。

作者：?馬亞薈

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@?馬亞薈