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

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

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

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

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

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

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

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

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

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

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

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

駕校一點通V5.0首頁改版對比圖

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

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

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

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

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

目前線上考試首頁界面的截圖

（2）顏色

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

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

（3）圖標(biāo)

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

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

（4）字體

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

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

駕校一點通設(shè)計規(guī)范部分截圖

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

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

暗中觀察的老司機

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

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

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

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

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

目前線上的駕校一點通、駕考寶典、車輪駕考通頁面截圖

總結(jié)

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

作者：?馬亞薈

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