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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（2）顏色

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

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

（3）圖標(biāo)

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

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

（4）字體

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

駕校一點(diǎn)通App作為一個(gè)成熟產(chǎn)品,，從主功能頁(yè)面到二級(jí)三級(jí)頁(yè)面,，有著上百個(gè)頁(yè)面。在我們前期視覺(jué)風(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)一增加了用戶(hù)使用認(rèn)知,，有效提升用戶(hù)體驗(yàn),。

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